diff --git a/frontend/purestack.studio/guides/content/_nav.json b/frontend/purestack.studio/guides/content/_nav.json
index 93c58dab..1ba18d86 100644
--- a/frontend/purestack.studio/guides/content/_nav.json
+++ b/frontend/purestack.studio/guides/content/_nav.json
@@ -3,6 +3,7 @@
     "index.mdx",
     "links.mdx",
     "code-blocks.mdx",
+    "image-optimization.mdx",
     "shared-content.mdx",
     "localization.mdx"
   ]
diff --git a/frontend/purestack.studio/guides/content/image-optimization.mdx b/frontend/purestack.studio/guides/content/image-optimization.mdx
new file mode 100644
index 00000000..87722492
--- /dev/null
+++ b/frontend/purestack.studio/guides/content/image-optimization.mdx
@@ -0,0 +1,286 @@
+---
+title: Image optimization
+description: Enable responsive images with ts-images, choose widths and formats, prioritize hero images, and reuse optimized assets across builds.
+template: doc
+layout:
+  showNav: true
+  showToc: true
+  showFooter: true
+nav:
+  icon: tabler:photo
+---
+
+# Image optimization
+
+`@purestack/ts-images` turns local images into responsive AVIF and WebP sources with JPEG or PNG fallbacks during the build. Keep writing ordinary Markdown or HTML images. The plugin adds responsive markup, missing dimensions, and loading defaults without a special component or browser script.
+
+Image optimization is optional and is not included in PureStack's default plugin set. Original files remain available for downloads and links, and source files are never edited.
+
+## Enable the plugin
+
+Install the package alongside PureStack. It requires Node.js 22.20 or newer and uses Sharp's platform-specific image codecs:
+
+```sh
+npm install @purestack/ts-images
+```
+
+Add the named plugin export to `content/siteConfig.json`, keeping any plugins already listed:
+
+```json
+{
+  "plugins": ["@purestack/ts-images#imagesPlugin"],
+  "extensions": {
+    "images": {
+      "widths": [480, 960, 1440],
+      "formats": ["avif", "webp"]
+    }
+  }
+}
+```
+
+No TypeScript configuration is required. Listing the plugin enables its defaults; the `extensions.images` section is optional. Settings in that section belong to the image plugin and are applied only when it is installed in the plugin list.
+
+Place images inside the content folder and reference them from your pages:
+
+```text
+content/
+  siteConfig.json
+  index.mdx
+  images/
+    dashboard.png
+```
+
+```md
+![Dashboard showing project activity](./images/dashboard.png)
+```
+
+Run your usual [build or publish command](/guides/getting-started/purestack-cli/). The same optimization applies to images in rendered components, page templates, and shared headers and footers. Images inserted later by browser JavaScript are outside the build's rendered document.
+
+## What visitors receive
+
+For an eligible image, the plugin generates a `<picture>` with AVIF and WebP sources and an `<img>` fallback. Each format has a `srcset` of available widths. The browser chooses a supported format and a suitable candidate for the image's layout and the screen's pixel density.
+
+The plugin preserves `alt`, classes, IDs, styles, links around images, and author-supplied loading attributes. It fills missing `width` and `height` attributes from the image's oriented aspect ratio so the browser can reserve space. If you supply one dimension, the other is derived; if you supply both, both are kept.
+
+Generated images are written under `/_assets/images/`, with your site's `basePath` applied automatically. Filenames include a hash of the encoded bytes. Shared variants are reused across pages, and generated files are removed when no page references them. Original assets remain available at their usual URLs.
+
+Widths are sorted, deduplicated, and capped at the source image's dimensions. A 700-pixel-wide source with widths `[480, 960, 1440]` produces 480- and 700-pixel candidates for each format. The plugin never enlarges a source image.
+
+## Match responsive images to your layout
+
+`widths` chooses the pixel widths to generate. `sizes` tells the browser how wide the image will appear in the layout. It does not set the image's CSS width.
+
+The default `sizes` is `100vw`, suitable for an image that spans the viewport. For an image that spans the viewport only up to a 960-pixel limit, configure:
+
+```json
+{
+  "extensions": {
+    "images": {
+      "widths": [480, 960, 1440, 1920],
+      "sizes": "(max-width: 960px) 100vw, 960px"
+    }
+  }
+}
+```
+
+Adjust `sizes` for your container widths, sidebars, and gutters. A browser may choose a larger candidate for a high-density screen, so a 960-pixel layout can benefit from a 1920-pixel source.
+
+An individual image can supply its own `sizes`, overriding the configured default:
+
+```html
+<img
+  src="./images/dashboard.png"
+  alt="Dashboard showing project activity"
+  sizes="(max-width: 640px) 100vw, 480px"
+  style="width: 100%; max-width: 480px; height: auto"
+>
+```
+
+Use HTML when you need per-image attributes. Markdown images use the global settings. More widths and formats generate more files and take more encoding time; choose candidates that serve your actual layouts.
+
+## Use presets for common images
+
+Presets group per-image choices. Select one with `data-image-preset`:
+
+```html
+<img src="./images/workshop.jpg" alt="The workshop" data-image-preset="hero">
+<img src="./images/settings.png" alt="Editor settings" data-image-preset="screenshot">
+<img src="./images/portrait.jpg" alt="A contributor" data-image-preset="thumbnail">
+```
+
+| Preset | Behavior |
+| --- | --- |
+| `content` | Uses the global image settings. |
+| `hero` | Generates 960, 1440, and 1920 widths and supplies eager loading with high fetch priority. |
+| `thumbnail` | Generates 160, 320, and 640 widths with `sizes="(max-width: 640px) 50vw, 320px"`. |
+| `screenshot` | Uses lossless WebP with a PNG fallback and inherits the global widths. |
+
+Preset widths are still capped at the source's dimensions. Presets inherit the resolved global settings before applying their own overrides. Override a built-in preset or add your own under `presets`:
+
+```json
+{
+  "extensions": {
+    "images": {
+      "presets": {
+        "card": {
+          "widths": [320, 640, 960],
+          "sizes": "(max-width: 640px) 100vw, 480px",
+          "quality": { "webp": 85 }
+        }
+      }
+    }
+  }
+}
+```
+
+```html
+<img src="./images/project.jpg" alt="Project overview" data-image-preset="card">
+```
+
+Presets can set `widths`, `formats`, `quality`, `sizes`, `loading`, `decoding`, `priority`, `lossless`, and `metadata`.
+
+### Prioritize the main image
+
+Images default to `loading="lazy"` and `decoding="async"`. For a prominent image visible when the page opens, use the `hero` preset or mark it directly:
+
+```html
+<img src="./images/cover.jpg" alt="The project workspace" data-image-priority>
+```
+
+Priority fills missing attributes with `loading="eager"` and `fetchpriority="high"`. Explicit `loading`, `decoding`, and `fetchpriority` attributes take precedence, so remove `loading="lazy"` if you want the priority default to apply. Mark the important image explicitly; the plugin does not infer which images are above the fold.
+
+## Choose formats, quality, and metadata
+
+The default formats are AVIF followed by WebP, with an automatic JPEG or PNG fallback. The order in `formats` determines source preference. PNG sources, transparent images, and lossless presets use a PNG fallback.
+
+```json
+{
+  "extensions": {
+    "images": {
+      "formats": ["avif", "webp"],
+      "quality": { "avif": 50, "webp": 80, "jpeg": 82 },
+      "metadata": "strip"
+    }
+  }
+}
+```
+
+Quality values range from 1 to 100. Use `lossless: true` when preserving detail matters more than file size, as with screenshots and diagrams. The `screenshot` preset provides that choice per image.
+
+Set `formats: []` to generate only responsive JPEG/PNG fallbacks without adding a `<picture>` wrapper. This can help when existing CSS depends on the image being a direct child of its parent.
+
+Images are automatically oriented and converted to sRGB. `metadata: "strip"` omits embedded metadata by default. `"preserve"` retains metadata with orientation normalized. Optimization can produce files larger than the original, especially for small or lossless images; inspect the results for representative sources before choosing settings for the whole site.
+
+## Control which images are processed
+
+Use `include` and `exclude` to select source files. Patterns match content-root-relative paths with forward slashes, regardless of the page referencing the image:
+
+```json
+{
+  "extensions": {
+    "images": {
+      "include": ["images/**"],
+      "exclude": ["images/downloads/**"]
+    }
+  }
+}
+```
+
+To keep one image's markup and source unchanged, opt out on that image:
+
+```html
+<img src="./images/diagram.png" alt="Source diagram" data-image-optimize="false">
+```
+
+To turn off all optimization while keeping the plugin declaration, set `extensions.images.enabled` to `false`. You can also remove the plugin from `plugins`.
+
+| Input | Treatment |
+| --- | --- |
+| Local JPEG, PNG, WebP, AVIF, single-frame GIF, and TIFF references | Eligible for optimization. |
+| External, data, and blob URLs | Left unchanged; the plugin does not download images. |
+| SVG and animated images, including APNG | Left unchanged. |
+| An image inside `<picture>`, or one with `srcset` already set | Existing responsive markup is preserved. |
+| CSS backgrounds, video posters, social preview metadata, and URLs in browser scripts | Original assets remain available; these references are not rewritten. |
+
+Because optimized images normally gain a `<picture>` parent, review direct-child selectors such as `.gallery > img`. Adjust the selector, use fallback-only output, or opt out where the original structure is required.
+
+## Builds, development, and caching
+
+Full builds and publishes process images referenced by rendered pages. During `serve`, images are processed when their pages render, and generated files exist before those pages are served. Editing a source image invalidates dependent pages. Local paths follow the same [content link and localization rules](./links) as other assets.
+
+The persistent encoding cache survives cleaned output directories. Its keys include source bytes, pixel settings, and codec versions. Changes to `alt`, loading attributes, or `sizes` can reuse encoded files. The default cache lives in the OS temporary directory under `purestack-images`, separated by content root.
+
+`cacheMaxAgeDays` defaults to 30. During use, cleanup removes entries unused for that many days, checking at most hourly per processor. Set it to `0` to disable cleanup. A custom `cacheDir` must stay outside the content and output directories; relative paths resolve from the build's `rootDir`, not the content folder. The default temporary cache needs no path configuration.
+
+To bypass persistent cache reads and writes for a run:
+
+```sh
+yarn purestack publish --content ./content --no-cache
+```
+
+The same flag works with `build` and `serve`. Programmatic builds use `options.cache: false`. Existing cache files remain in place, and development still reuses rendered pages until they are invalidated. See the [CLI guide](/guides/getting-started/purestack-cli/) for cache and output-cleaning behavior.
+
+Encoding concurrency defaults to two jobs per site, including output emission. Increase it only after measuring duration and memory on your build machine. Keeping fewer widths or formats also reduces work on a cache miss.
+
+## Configure from TypeScript
+
+For custom factory defaults or diagnostic callbacks, add the plugin to your existing `purestack.config.ts`:
+
+```ts
+import { imagesPlugin } from '@purestack/ts-images'
+import { defineConfig } from 'purestack'
+
+export default defineConfig({
+  plugins: [
+    imagesPlugin({
+      widths: [480, 960, 1440],
+      onDiagnostic(diagnostic) {
+        console.log(diagnostic)
+      },
+    }),
+  ],
+})
+```
+
+Factory settings supply defaults that `extensions.images` can override. An explicit TypeScript plugin instance replaces a JSON-selected instance with the same plugin name. Callbacks belong in TypeScript; JSON supplies settings only. The [Plugins guide](/guides/extending/plugins/) explains how plugin declarations compose.
+
+Diagnostics report the referring page, source path, cache result, original bytes, total generated bytes, variant count, and duration. Without a callback, completed optimizations are logged as `image optimized`. Total generated bytes include every variant; they are not the bytes a visitor downloads for a single image.
+
+## Settings reference
+
+All settings below belong under `extensions.images`, or can be supplied as factory defaults to `imagesPlugin()`.
+
+| Setting | Default | Purpose |
+| --- | --- | --- |
+| `enabled` | `true` | Enable optimization when the plugin is listed. |
+| `widths` | `[480, 960, 1440]` | 1 to 16 widths, each an integer from 1 to 16384; no upscaling. |
+| `formats` | `["avif", "webp"]` | Modern sources in preference order; `[]` generates only fallbacks. |
+| `quality` | `{ "avif": 50, "webp": 80, "jpeg": 82 }` | Encoder quality from 1 to 100. |
+| `sizes` | `"100vw"` | Default layout width hint; an image's own `sizes` takes precedence. |
+| `loading` | `"lazy"` | `"lazy"`, `"eager"`, or `false` to omit the default attribute. |
+| `decoding` | `"async"` | `"async"`, `"sync"`, `"auto"`, or `false`. |
+| `priority` | `false` | Supply missing eager-loading and high-priority attributes. |
+| `lossless` | `false` | Use lossless modern encoders and a PNG fallback. |
+| `metadata` | `"strip"` | Strip metadata or use `"preserve"`. |
+| `include` / `exclude` | `["**/*"]` / `[]` | Source selection using content-root-relative glob patterns. |
+| `presets` | `content`, `hero`, `thumbnail`, `screenshot` | Override built-ins or define named per-image settings. |
+| `cacheDir` | OS temporary cache per content root | Location outside content and output directories. |
+| `cacheMaxAgeDays` | `30` | Retain entries used within this many days; `0` disables expiry. |
+| `concurrency` | `2` | Per-site processing limit from 1 to 16. |
+| `maxInputPixels` | `40000000` | Maximum source pixel count. |
+| `maxSourceBytes` | `52428800` (50 MiB) | Maximum source file size. |
+| `onError` | `"error"` | Fail on optimization errors, or use `"warn"` to retain the original image. |
+
+## When something goes wrong
+
+| Symptom | Check |
+| --- | --- |
+| Images still reference their originals | Confirm the plugin is listed, `enabled` is true, the file matches `include`/`exclude`, and the input is eligible. Existing `<picture>` and `srcset` are intentionally preserved. |
+| A hero still loads lazily | Remove an explicit `loading="lazy"`; author-supplied attributes override priority defaults. |
+| The browser selects an unexpectedly large candidate | Match `sizes` to the actual layout and account for screen pixel density. |
+| A gallery's CSS stops matching | Optimization added a `<picture>` parent. Adjust direct-child selectors or opt out. |
+| The build reports an unknown preset | Define the name under `presets` or choose one of the built-in presets. |
+| A source exceeds the byte or pixel limit | Resize the source, exclude it, or deliberately adjust the corresponding limit. |
+| Sharp cannot load on the build machine | Install dependencies for that machine's platform and confirm Node.js 22.20 or newer. |
+
+`onError: "warn"` lets the plugin keep an original image after an optimization failure, but missing or invalid local URLs still follow PureStack's normal URL validation. Remote downloads, SVG optimization, animated transcoding, placeholders, and automatic cropping are outside this plugin's current scope.
diff --git a/frontend/purestack.studio/guides/content/index.mdx b/frontend/purestack.studio/guides/content/index.mdx
index 5b8e0194..adcb0604 100644
--- a/frontend/purestack.studio/guides/content/index.mdx
+++ b/frontend/purestack.studio/guides/content/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Content
-description: Write links and code examples, share content, and organize translations.
+description: Write links and code examples, optimize images, share content, and organize translations.
 template: doc
 nav:
   icon: tabler:files
@@ -10,9 +10,10 @@ layout:
 
 # Content
 
-Write links and code examples, share content, and organize translations.
+Write links and code examples, optimize images, share content, and organize translations.
 
 - [Links](./links)
 - [Code blocks](./code-blocks)
+- [Image optimization](./image-optimization)
 - [Shared content](./shared-content)
 - [Localization](./localization)
diff --git a/frontend/purestack.studio/guides/content/links.mdx b/frontend/purestack.studio/guides/content/links.mdx
index 52156a43..e2ea626c 100644
--- a/frontend/purestack.studio/guides/content/links.mdx
+++ b/frontend/purestack.studio/guides/content/links.mdx
@@ -89,6 +89,8 @@ Images, videos, downloads, and other files in your content folder follow the sam
 
 Write a file's full name, with its extension and the same capitals, so it works on any host.
 
+For responsive image formats, sizing, and loading defaults, see [Image optimization](./image-optimization). The optional `ts-images` plugin handles ordinary Markdown and rendered HTML images while keeping originals available for downloads.
+
 Files that a build step writes straight into the output aren't in your content folder, so PureStack can't check them. Link them from the site root, such as `/previews/demo.html`.
 
 ## Link outside your content
diff --git a/frontend/purestack.studio/guides/extending/plugins.mdx b/frontend/purestack.studio/guides/extending/plugins.mdx
index 4d98b04f..e2926513 100644
--- a/frontend/purestack.studio/guides/extending/plugins.mdx
+++ b/frontend/purestack.studio/guides/extending/plugins.mdx
@@ -64,6 +64,8 @@ its defaults even without `extensions.images`. Set `extensions.images.enabled`
 to `false` to disable optimization. An explicit plugin instance in
 `purestack.config.ts` replaces a JSON-selected plugin with the same name.
 
+The [Image optimization guide](/guides/content/image-optimization/) covers responsive sizing, presets, formats, caching, and per-image controls.
+
 Both config formats use PureStack's own copy of a package when available so
 shared registries stay together; other packages resolve from the site.
 Plugin declarations execute installed JavaScript with the build process's
@@ -242,18 +244,7 @@ Builder style state is isolated across asynchronous operations, including concur
 
 ## Optimize images
 
-Image optimization is optional. Install `@purestack/ts-images` alongside PureStack and add it to your existing plugin list:
-
-```ts
-import { defineConfig } from 'purestack'
-import { imagesPlugin } from '@purestack/ts-images'
-
-export default defineConfig({
-  plugins: [imagesPlugin({ widths: [480, 960, 1440] })],
-})
-```
-
-Ordinary Markdown images and rendered HTML images receive responsive AVIF/WebP sources, JPEG/PNG fallbacks, dimensions, and loading defaults. Originals remain available for links and downloads. Remote images, SVGs, animations, existing `picture` markup, and images with `srcset` pass through. Use `data-image-preset="hero"` for eager priority images, `data-image-preset="screenshot"` for lossless output, or `data-image-optimize="false"` to keep an individual image unchanged. Set `sizes` for your actual image layout.
+For installation and site configuration, follow the dedicated [Image optimization guide](/guides/content/image-optimization/). It covers JSON and TypeScript setup, responsive sizing, presets, caching, and per-image controls. The rest of this section explains the asset contribution for plugin authors.
 
 The plugin owns its `extensions.images` settings, persistent cache, and encoder limits. It uses the generic asset contribution: `assets(config)` returns a per-site processor with a unique namespace and `processPage(input)`. This runs after all `onPageDocument` hooks, before URL rewriting. `resolveSource(element, url)` resolves local inputs and registers dependencies; `dependOn(relPath)` registers additional inputs; `emit(fileName, bytes)` atomically writes an owned file and returns its URL. Use content-addressed names and await all writes. Core handles base paths, incremental invalidation, shared references, manifest persistence, and cleanup when pages or processors disappear. The builder contains no image format or encoder selection.
 
diff --git a/frontend/purestack.studio/guides/index.mdx b/frontend/purestack.studio/guides/index.mdx
index 0171e23d..9b9854d4 100644
--- a/frontend/purestack.studio/guides/index.mdx
+++ b/frontend/purestack.studio/guides/index.mdx
@@ -23,7 +23,7 @@ Start with the CLI and site configuration, then choose a topic below. Each categ
   </Panel>
   <Panel tone="neutral" bodyClass="p-3">
     <h2 class="mt-0">Content</h2>
-    <p>Write links and code examples, share content, and organize translations.</p>
+    <p>Write links and code examples, optimize images, share content, and organize translations.</p>
     <BtnLink href="./content/" tone="accent" variant="link">Explore content</BtnLink>
   </Panel>
   <Panel tone="neutral" bodyClass="p-3">
diff --git a/package.json b/package.json
index 3c7c783a..fe176330 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "purestack-repo",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.18.1",
   "type": "module",
   "sideEffects": false,
diff --git a/packages/purestack/package.json b/packages/purestack/package.json
index 50f09052..8fdb6139 100644
--- a/packages/purestack/package.json
+++ b/packages/purestack/package.json
@@ -1,6 +1,6 @@
 {
   "name": "purestack",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/purestack.mjs",
   "types": "./dist/purestack.d.mts",
diff --git a/packages/purestack/src/index.ts b/packages/purestack/src/index.ts
index 2c4f7b73..28b0b535 100644
--- a/packages/purestack/src/index.ts
+++ b/packages/purestack/src/index.ts
@@ -1,3 +1,3 @@
-export const version: string = '1.1.16'
+export const version: string = '1.1.17'
 
 export * from '@purestack/ts-ssg'
diff --git a/packages/ts-common/package.json b/packages/ts-common/package.json
index d447ea5f..58e7722a 100644
--- a/packages/ts-common/package.json
+++ b/packages/ts-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-common",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-common.mjs",
   "types": "./dist/ts-common.d.mts",
diff --git a/packages/ts-components/package.json b/packages/ts-components/package.json
index 70723797..f914ac69 100644
--- a/packages/ts-components/package.json
+++ b/packages/ts-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-components",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-components.mjs",
   "types": "./dist/ts-components.d.mts",
diff --git a/packages/ts-css/README.md b/packages/ts-css/README.md
index b24957a2..2ee10292 100644
--- a/packages/ts-css/README.md
+++ b/packages/ts-css/README.md
@@ -94,6 +94,35 @@ style.css({ display: 'grid', gap: '1rem' })
 style.media('max-width: 720px').css({ display: 'block' })
 ```
 
+### Keyframe Animations
+
+Use `.keyframes(name)` to create an animation definition and `.select()` to
+define its frames. Frame selectors are emitted without the parent selector.
+
+```ts
+const style = s()
+const frames = style.keyframes('zt-memory-cycle')
+frames.select('0%, 4%, 40%, 100%').transform('translateY(0)')
+frames.select('12%, 28%').transform('translateY(-8px)')
+
+style.select('.zt-slab-memory')
+  .animation('zt-memory-cycle 8s ease-in-out infinite')
+style.select('.zt-slab-memory')
+  .media('prefers-reduced-motion: reduce')
+  .animation('none !important')
+```
+
+Frames support `from`, `to`, percentages, and comma-separated percentage lists.
+Use existing property methods, `.css()`, or `.set()` for declarations, including
+motion-path properties such as `.set('offset-distance', '100%')`.
+Repeated names in the same container reuse their block; repeated frame selectors
+merge declarations using the normal style builder behavior. Definitions stay
+inside their containing media or scope block and participate in revision tracking.
+
+Names are trimmed and must be non-empty; supply a valid CSS animation name and
+valid frame selectors. Names are emitted without rewriting and remain global
+inside `@scope`. Use distinct names for animations with different definitions.
+
 ### CSS Variables via `autoVar`
 
 Values beginning with `$name` or `--name` are automatically converted to `var(...)`.
@@ -189,7 +218,8 @@ const button = s('.button').css({
 - `Style` extends `BaseStyle` and stores declarations in a map and nested selectors as children.
 - `.select()` creates a child style using the parent selector + the new selector (with automatic spacing unless a combinator or `:` is used).
 - `.media()` creates a sibling style under `@media(...)` and targets the current selector inside that media block.
-- `.toCSS()` serializes rules in a deterministic order: normal selectors first, then `@media` blocks, preserving creation order via internal IDs.
+- `.keyframes()` creates a named animation block whose children are unprefixed frame selectors.
+- `.toCSS()` serializes each container in a deterministic order: normal selectors first, then `@media`, `@scope`, and `@keyframes` blocks, preserving creation order within each group via internal IDs.
 - `.toPrettyCSS()` runs the output through Prettier (`parser: css`) with default formatting options.
 
 ## API Reference
@@ -204,6 +234,7 @@ Creates a `Style` instance. If a selector is provided, it becomes the root selec
 - `css(object)` - set many properties at once using `CSSProps`.
 - `select(selector)` - create or access a nested selector.
 - `media(query)` - create or access a `@media(...)` block scoped to this selector.
+- `keyframes(name)` - create or access a named animation; select its frames with `select()`.
 - `use(style)` - shallow-merge declarations from another style into this one.
 - `toCSS()` - serialize to CSS string.
 - `toPrettyCSS(options?)` - serialize and format using Prettier.
@@ -266,6 +297,7 @@ Key `BaseStyle` methods:
 - `css({...})`
 - `select(selector)`
 - `media(query)`
+- `keyframes(name)`
 - `use(style)`
 - `toCSS()`
 - `toPrettyCSS(options?)`
@@ -285,6 +317,22 @@ const stops = getGradient('#21a8c3', '#a50d60', 6, 'hsl')
 
 `CSSProps` is a large type union of CSS properties used by `.css()` and property-specific methods on `Style`. It provides autocomplete and helps catch invalid property names or values.
 
+## Maintaining Property Metadata
+
+The generator combines the original `src/meta/cssProps.ts` with the handwritten
+additions in `src/meta/cssProps2.ts`. Maintain new properties in `cssProps2.ts`
+using the same `$`, `desc`, and optional `values.value` structure. Existing
+properties, including vendor-prefixed and older names, remain available.
+
+Regenerate the fluent methods and explicit property types from the repository root:
+
+```bash
+yarn tsx packages/ts-css/src/meta/generateStyle.ts
+```
+
+This updates `src/style.ts` and `src/cssProps.ts`. Keep property additions in the
+metadata so they survive subsequent generator runs.
+
 ## Tests
 
 ```bash
diff --git a/packages/ts-css/package.json b/packages/ts-css/package.json
index 67fa2152..d8cf0ec6 100644
--- a/packages/ts-css/package.json
+++ b/packages/ts-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-css",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-css.mjs",
   "types": "./dist/ts-css.d.mts",
diff --git a/packages/ts-css/src/baseStyle.ts b/packages/ts-css/src/baseStyle.ts
index 0dcb0814..29f992c3 100644
--- a/packages/ts-css/src/baseStyle.ts
+++ b/packages/ts-css/src/baseStyle.ts
@@ -136,6 +136,17 @@ export class BaseStyle<T extends RootStyle> extends RootStyle {
     return child
   }
 
+  /**
+   * Create or access a named animation block. Select frames with `select()`:
+   * `style.keyframes('fade-in').select('from').opacity('0')`.
+   * Names are emitted as supplied and remain global inside `@scope`.
+   */
+  keyframes(name: string) {
+    const trimmed = name.trim()
+    if (!trimmed) throw new Error('Keyframes name must be a non-empty string.')
+    return this.selectWithoutParentKey(`@keyframes ${trimmed}`)
+  }
+
   toCSS() {
     let result = ''
     const children = [...this.children.entries()].sort((a, b) => {
@@ -147,11 +158,11 @@ export class BaseStyle<T extends RootStyle> extends RootStyle {
     })
     const selector = this.selector
     if (isGroupingRule(selector)) {
-      const mediaContent = children
+      const blockContent = children
         .map((x) => `\r\n${x[1].toCSS()}`)
         .join('')
         .trimEnd()
-      result = `${selector} {${mediaContent}
+      result = `${selector} {${blockContent}
 }
 
 `
@@ -210,7 +221,11 @@ ${props}
 }
 
 function isGroupingRule(selector: string) {
-  return selector.startsWith('@media') || selector.startsWith('@scope')
+  return (
+    selector.startsWith('@media') ||
+    selector.startsWith('@scope') ||
+    selector.startsWith('@keyframes')
+  )
 }
 
 function buildScopeRule(rootSelector: string, limitSelector?: string) {
diff --git a/packages/ts-css/src/cssProps.ts b/packages/ts-css/src/cssProps.ts
index b8f75029..af055290 100644
--- a/packages/ts-css/src/cssProps.ts
+++ b/packages/ts-css/src/cssProps.ts
@@ -1905,4 +1905,194 @@ export type CSSProps = {
     | (string & {})
   zIndex: number | string
   zoom: 'normal' | (string & {})
+  accentColor: 'auto' | (string & {})
+  animationComposition: 'replace' | 'add' | 'accumulate' | (string & {})
+  appearance: 'none' | 'auto' | (string & {})
+  aspectRatio: 'auto' | (string & {})
+  backgroundPositionX: 'left' | 'center' | 'right' | (string & {})
+  backgroundPositionY: 'top' | 'center' | 'bottom' | (string & {})
+  borderBlock: string
+  borderBlockColor: string
+  borderBlockStyle: string
+  borderBlockWidth: string
+  borderEndEndRadius: string
+  borderEndStartRadius: string
+  borderInline: string
+  borderInlineColor: string
+  borderInlineStyle: string
+  borderInlineWidth: string
+  borderStartEndRadius: string
+  borderStartStartRadius: string
+  breakAfter: 'auto' | 'avoid' | 'page' | 'column' | (string & {})
+  breakBefore: 'auto' | 'avoid' | 'page' | 'column' | (string & {})
+  breakInside: 'auto' | 'avoid' | 'avoid-page' | 'avoid-column' | (string & {})
+  colorScheme: 'normal' | 'light' | 'dark' | (string & {})
+  columnRuleColor: string
+  containIntrinsicBlockSize: string
+  containIntrinsicHeight: string
+  containIntrinsicInlineSize: string
+  containIntrinsicSize: string
+  containIntrinsicWidth: string
+  container: string
+  containerName: string
+  containerType:
+    | 'normal'
+    | 'size'
+    | 'inline-size'
+    | 'scroll-state'
+    | (string & {})
+  contentVisibility: 'visible' | 'auto' | 'hidden' | (string & {})
+  counterSet: string
+  cx: string
+  cy: string
+  dominantBaseline:
+    | 'auto'
+    | 'alphabetic'
+    | 'middle'
+    | 'central'
+    | 'hanging'
+    | (string & {})
+  fontOpticalSizing: 'auto' | 'none' | (string & {})
+  fontPalette: 'normal' | 'light' | 'dark' | (string & {})
+  fontSynthesisSmallCaps: 'auto' | 'none' | (string & {})
+  fontSynthesisStyle: 'auto' | 'none' | (string & {})
+  fontSynthesisWeight: 'auto' | 'none' | (string & {})
+  fontVariationSettings: string
+  hyphenateCharacter: string
+  inset: string
+  insetBlock: string
+  insetBlockEnd: string
+  insetBlockStart: string
+  insetInline: string
+  insetInlineEnd: string
+  insetInlineStart: string
+  lineClamp: 'none' | (string & {})
+  marginBlock: string
+  marginInline: string
+  mask: string
+  maskClip:
+    | 'border-box'
+    | 'padding-box'
+    | 'content-box'
+    | 'no-clip'
+    | (string & {})
+  maskComposite: 'add' | 'subtract' | 'intersect' | 'exclude' | (string & {})
+  mathStyle: 'normal' | 'compact' | (string & {})
+  offset: string
+  offsetAnchor: string
+  offsetDistance: string
+  offsetPath: string
+  offsetPosition: string
+  offsetRotate: 'auto' | 'reverse' | (string & {})
+  overflowBlock:
+    | 'visible'
+    | 'hidden'
+    | 'clip'
+    | 'scroll'
+    | 'auto'
+    | (string & {})
+  overflowInline:
+    | 'visible'
+    | 'hidden'
+    | 'clip'
+    | 'scroll'
+    | 'auto'
+    | (string & {})
+  overscrollBehavior: string
+  overscrollBehaviorBlock: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorInline: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorX: 'auto' | 'contain' | 'none' | (string & {})
+  overscrollBehaviorY: 'auto' | 'contain' | 'none' | (string & {})
+  paddingBlock: string
+  paddingInline: string
+  page: string
+  placeContent: string
+  placeItems: string
+  placeSelf: string
+  printColorAdjust: 'economy' | 'exact' | (string & {})
+  r: string
+  rotate: string
+  rowGap: string
+  rx: string
+  ry: string
+  scale: string
+  scrollMargin: string
+  scrollMarginBlock: string
+  scrollMarginBlockEnd: string
+  scrollMarginBlockStart: string
+  scrollMarginBottom: string
+  scrollMarginInline: string
+  scrollMarginInlineEnd: string
+  scrollMarginInlineStart: string
+  scrollMarginLeft: string
+  scrollMarginRight: string
+  scrollMarginTop: string
+  scrollPadding: string
+  scrollPaddingBlock: string
+  scrollPaddingBlockEnd: string
+  scrollPaddingBlockStart: string
+  scrollPaddingBottom: string
+  scrollPaddingInline: string
+  scrollPaddingInlineEnd: string
+  scrollPaddingInlineStart: string
+  scrollPaddingLeft: string
+  scrollPaddingRight: string
+  scrollPaddingTop: string
+  scrollSnapAlign: 'none' | 'start' | 'end' | 'center' | (string & {})
+  scrollSnapStop: 'normal' | 'always' | (string & {})
+  scrollbarColor: string
+  scrollbarGutter: 'auto' | 'stable' | 'stable both-edges' | (string & {})
+  scrollbarWidth: 'auto' | 'thin' | 'none' | (string & {})
+  shapeRendering:
+    | 'auto'
+    | 'optimizeSpeed'
+    | 'crispEdges'
+    | 'geometricPrecision'
+    | (string & {})
+  textAutospace: string
+  textCombineUpright: 'none' | 'all' | (string & {})
+  textDecorationSkipInk: 'auto' | 'all' | 'none' | (string & {})
+  textDecorationThickness: 'auto' | 'from-font' | (string & {})
+  textEmphasis: string
+  textEmphasisColor: string
+  textEmphasisPosition: string
+  textEmphasisStyle: string
+  textUnderlineOffset: string
+  textUnderlinePosition:
+    | 'auto'
+    | 'from-font'
+    | 'under'
+    | 'left'
+    | 'right'
+    | (string & {})
+  textWrap: 'wrap' | 'nowrap' | 'balance' | 'pretty' | (string & {})
+  textWrapMode: 'wrap' | 'nowrap' | (string & {})
+  textWrapStyle: 'auto' | 'balance' | 'stable' | 'pretty' | (string & {})
+  transformBox:
+    | 'content-box'
+    | 'border-box'
+    | 'fill-box'
+    | 'stroke-box'
+    | 'view-box'
+    | (string & {})
+  transitionBehavior: 'normal' | 'allow-discrete' | (string & {})
+  translate: string
+  vectorEffect:
+    | 'none'
+    | 'non-scaling-stroke'
+    | 'non-scaling-size'
+    | 'non-rotation'
+    | 'fixed-position'
+    | (string & {})
+  viewTransitionClass: string
+  viewTransitionName: string
+  whiteSpaceCollapse:
+    | 'collapse'
+    | 'preserve'
+    | 'preserve-breaks'
+    | 'preserve-spaces'
+    | 'break-spaces'
+    | (string & {})
+  x: string
+  y: string
 } & Record<string & {}, string | number>
diff --git a/packages/ts-css/src/keyframes.test.ts b/packages/ts-css/src/keyframes.test.ts
new file mode 100644
index 00000000..83be78c3
--- /dev/null
+++ b/packages/ts-css/src/keyframes.test.ts
@@ -0,0 +1,159 @@
+import prettier from 'prettier'
+import { describe, expect, it } from 'vitest'
+
+import { s } from './s'
+
+describe('keyframes', () => {
+  it('renders unprefixed frames, preserves frame order, and puts definitions after selectors', async () => {
+    const root = s('.notice')
+    const frames = root.keyframes('fade-in')
+    frames.select('from').opacity('0')
+    frames.select('50%, 75.5%').opacity('.5').transform('scale(.9)')
+    frames.select('to').opacity('1')
+    root.animation('fade-in 160ms ease-out')
+
+    const expected = `.notice {
+  animation: fade-in 160ms ease-out;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  50%,
+  75.5% {
+    opacity: 0.5;
+    transform: scale(0.9);
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+`
+    const raw = root.toCSS()
+    expect(raw).toContain('@keyframes fade-in {')
+    expect(raw).toContain('50%, 75.5% {')
+    expect(raw).not.toContain('.notice from')
+    expect(raw).not.toContain('.notice @keyframes')
+    expect(raw).toBe(root.toCSS())
+    expect(await prettier.format(raw, { parser: 'css' })).toBe(expected)
+    expect(await root.toPrettyCSS()).toBe(expected)
+  })
+
+  it('reuses blocks and frames without changing revisions until a value changes', () => {
+    const root = s()
+    const other = s()
+    const otherRevision = other.revision
+    const frames = root.keyframes(' fade-in ')
+    const from = frames.select('from').opacity('0')
+    const before = root.revision
+
+    expect(root.keyframes('fade-in')).toBe(frames)
+    expect(frames.select('from')).toBe(from)
+    from.opacity('0')
+    expect(root.revision).toBe(before)
+
+    from.opacity('.2')
+    expect(root.revision).toBeGreaterThan(before)
+    expect(other.revision).toBe(otherRevision)
+    expect(root.toCSS().match(/@keyframes fade-in/g)).toHaveLength(1)
+    expect(root.toCSS().match(/from \{/g)).toHaveLength(1)
+    expect(root.toCSS()).toContain('opacity: .2;')
+  })
+
+  it('rejects empty names without changing the tree', () => {
+    const root = s()
+    const before = root.revision
+    for (const name of ['', '   ', '\n\t']) {
+      expect(() => root.keyframes(name)).toThrow(
+        'Keyframes name must be a non-empty string.',
+      )
+    }
+    expect(root.revision).toBe(before)
+    expect(root.toCSS()).toBe('')
+  })
+
+  it('keeps keyframes inside their scope and media blocks', async () => {
+    const root = s().scope('.hero')
+    root.keyframes('pulse').select('0%, 100%').opacity('1')
+    root
+      .media('prefers-reduced-motion: no-preference')
+      .select('.packet')
+      .keyframes('travel')
+      .select('to')
+      .set('offset-distance', '100%')
+
+    expect(await root.toPrettyCSS()).toBe(`@scope (.hero) {
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @keyframes travel {
+      to {
+        offset-distance: 100%;
+      }
+    }
+  }
+}
+`)
+  })
+
+  it('supports hero motion paths, SVG strokes, grouped frames, and reduced motion', async () => {
+    const root = s()
+    root.select('.zt-write-packet').css({
+      opacity: '0',
+      'offset-path': "path('M64 102H118L180 138L280 154')",
+      'offset-rotate': 'auto',
+      animationName: 'zt-write-packet',
+    })
+    const packet = root.keyframes('zt-write-packet')
+    packet.select('0%').css({ 'offset-distance': '0%', opacity: '0' })
+    packet.select('3%').opacity('.9')
+    packet.select('20%').css({ 'offset-distance': '100%', opacity: '.9' })
+    packet.select('23%, 100%').css({ 'offset-distance': '100%', opacity: '0' })
+    const trace = root.keyframes('zt-merge-trace')
+    trace.select('0%, 34%').strokeDashoffset('1').opacity('0')
+    trace.select('38%').opacity('.8')
+    trace.select('56%').strokeDashoffset('0').opacity('.8')
+    trace.select('64%, 100%').strokeDashoffset('0').opacity('0')
+    root
+      .select('.zt-engine .zt-motion')
+      .media('prefers-reduced-motion: reduce')
+      .animation('none !important')
+
+    const expected = `.zt-write-packet {
+  opacity: 0;
+  offset-path: path('M64 102H118L180 138L280 154');
+  offset-rotate: auto;
+  animation-name: zt-write-packet;
+}
+@media (prefers-reduced-motion: reduce) {
+  .zt-engine .zt-motion { animation: none !important; }
+}
+@keyframes zt-write-packet {
+  0% { offset-distance: 0%; opacity: 0; }
+  3% { opacity: .9; }
+  20% { offset-distance: 100%; opacity: .9; }
+  23%, 100% { offset-distance: 100%; opacity: 0; }
+}
+@keyframes zt-merge-trace {
+  0%, 34% { stroke-dashoffset: 1; opacity: 0; }
+  38% { opacity: .8; }
+  56% { stroke-dashoffset: 0; opacity: .8; }
+  64%, 100% { stroke-dashoffset: 0; opacity: 0; }
+}
+`
+    expect((await root.toPrettyCSS()).replace(/\n\s*\n/g, '\n')).toBe(
+      (await prettier.format(expected, { parser: 'css' })).replace(
+        /\n\s*\n/g,
+        '\n',
+      ),
+    )
+  })
+})
diff --git a/packages/ts-css/src/meta/cssProps2.ts b/packages/ts-css/src/meta/cssProps2.ts
new file mode 100644
index 00000000..1354dcba
--- /dev/null
+++ b/packages/ts-css/src/meta/cssProps2.ts
@@ -0,0 +1,1875 @@
+/**
+ * Hand-maintained additions to cssProps.ts in the same metadata format.
+ * Includes the 126 properties selected in docs/css-property-audit.md and the
+ * seven setters previously maintained directly in Style. Keep existing entries.
+ *
+ * Syntax and browser references were checked against:
+ * https://github.com/microsoft/vscode-custom-data/blob/23b85b992e52a06bebee444bd788ccaa549ae5a1/web-data/data/browsers.css-data.json
+ */
+export const cssProps2 = [
+  {
+    $: {
+      name: 'accent-color',
+      restriction: 'color',
+      browsers: 'E93,FF92,C93,O79',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/accent-color',
+      syntax: 'auto | <color>',
+    },
+    desc: 'Sets the accent color of controls that expose an accent color',
+    values: {
+      value: [{ $: { name: 'auto' }, desc: 'Use the browser accent color.' }],
+    },
+  },
+  {
+    $: {
+      name: 'animation-composition',
+      restriction: 'enum',
+      browsers: 'E112,FF115,S16,C112,O98',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/animation-composition',
+      syntax: '<single-animation-composition>#',
+    },
+    desc: 'Controls how animation effects combine with underlying property values',
+    values: {
+      value: [
+        { $: { name: 'replace' }, desc: 'Replace the underlying value.' },
+        { $: { name: 'add' }, desc: 'Add the effect to the underlying value.' },
+        {
+          $: { name: 'accumulate' },
+          desc: 'Accumulate the effect with the underlying value.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'appearance',
+      restriction: 'enum',
+      browsers: 'E84,FF80,S15.4,C84,O70',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/appearance',
+      syntax: 'none | auto | <compat-auto> | <compat-special>',
+    },
+    desc: 'Controls the native platform appearance of a user interface element',
+    values: {
+      value: [
+        { $: { name: 'none' }, desc: 'Remove the native appearance.' },
+        {
+          $: { name: 'auto' },
+          desc: 'Use the native appearance for the element.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'aspect-ratio',
+      restriction: 'ratio',
+      browsers: 'E88,FF89,S15,C88,O74',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/aspect-ratio',
+      syntax: 'auto || <ratio>',
+    },
+    desc: 'Sets the preferred width-to-height ratio used during automatic sizing',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Use the intrinsic ratio when available.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'background-position-x',
+      restriction: 'length, percentage',
+      browsers: 'E12,FF49,S1,C1,O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/background-position-x',
+      syntax:
+        '[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#',
+    },
+    desc: 'Sets the horizontal starting position of each background image',
+    values: {
+      value: [
+        { $: { name: 'left' }, desc: 'Align with the left edge.' },
+        { $: { name: 'center' }, desc: 'Center horizontally.' },
+        { $: { name: 'right' }, desc: 'Align with the right edge.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'background-position-y',
+      restriction: 'length, percentage',
+      browsers: 'E12,FF49,S1,C1,O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/background-position-y',
+      syntax:
+        '[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#',
+    },
+    desc: 'Sets the vertical starting position of each background image',
+    values: {
+      value: [
+        { $: { name: 'top' }, desc: 'Align with the top edge.' },
+        { $: { name: 'center' }, desc: 'Center vertically.' },
+        { $: { name: 'bottom' }, desc: 'Align with the bottom edge.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'border-block',
+      restriction: 'length, color',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-block',
+      syntax: "<'border-block-start'>",
+    },
+    desc: 'Sets the width, style, and color of both logical block borders',
+  },
+  {
+    $: {
+      name: 'border-block-color',
+      restriction: 'color',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-block-color',
+      syntax: "<'border-top-color'>{1,2}",
+    },
+    desc: 'Sets the colors of the logical block-start and block-end borders',
+  },
+  {
+    $: {
+      name: 'border-block-style',
+      restriction: 'string',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-block-style',
+      syntax: "<'border-top-style'>{1,2}",
+    },
+    desc: 'Sets the line styles of the logical block borders',
+  },
+  {
+    $: {
+      name: 'border-block-width',
+      restriction: 'length',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-block-width',
+      syntax: "<'border-top-width'>{1,2}",
+    },
+    desc: 'Sets the widths of the logical block borders',
+  },
+  {
+    $: {
+      name: 'border-end-end-radius',
+      restriction: 'length, percentage',
+      browsers: 'E89,FF66,S15,C89,O75',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius',
+      syntax: "<'border-top-left-radius'>",
+    },
+    desc: 'Rounds the corner at the logical block-end and inline-end edges',
+  },
+  {
+    $: {
+      name: 'border-end-start-radius',
+      restriction: 'length, percentage',
+      browsers: 'E89,FF66,S15,C89,O75',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius',
+      syntax: "<'border-top-left-radius'>",
+    },
+    desc: 'Rounds the corner at the logical block-end and inline-start edges',
+  },
+  {
+    $: {
+      name: 'border-inline',
+      restriction: 'length, color',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-inline',
+      syntax: "<'border-block-start'>",
+    },
+    desc: 'Sets the width, style, and color of both logical inline borders',
+  },
+  {
+    $: {
+      name: 'border-inline-color',
+      restriction: 'color',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-inline-color',
+      syntax: "<'border-top-color'>{1,2}",
+    },
+    desc: 'Sets the colors of the logical inline-start and inline-end borders',
+  },
+  {
+    $: {
+      name: 'border-inline-style',
+      restriction: 'string',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-inline-style',
+      syntax: "<'border-top-style'>{1,2}",
+    },
+    desc: 'Sets the line styles of the logical inline borders',
+  },
+  {
+    $: {
+      name: 'border-inline-width',
+      restriction: 'length',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-inline-width',
+      syntax: "<'border-top-width'>{1,2}",
+    },
+    desc: 'Sets the widths of the logical inline borders',
+  },
+  {
+    $: {
+      name: 'border-start-end-radius',
+      restriction: 'length, percentage',
+      browsers: 'E89,FF66,S15,C89,O75',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius',
+      syntax: "<'border-top-left-radius'>",
+    },
+    desc: 'Rounds the corner at the logical block-start and inline-end edges',
+  },
+  {
+    $: {
+      name: 'border-start-start-radius',
+      restriction: 'length, percentage',
+      browsers: 'E89,FF66,S15,C89,O75',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius',
+      syntax: "<'border-top-left-radius'>",
+    },
+    desc: 'Rounds the corner at the logical block-start and inline-start edges',
+  },
+  {
+    $: {
+      name: 'break-after',
+      restriction: 'enum',
+      browsers: 'E12,FF65,S10,C50,O37',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/break-after',
+      syntax:
+        'auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region',
+    },
+    desc: 'Controls page, column, or region breaks after the element',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow automatic breaks.' },
+        { $: { name: 'avoid' }, desc: 'Avoid a break.' },
+        { $: { name: 'page' }, desc: 'Force a page break.' },
+        { $: { name: 'column' }, desc: 'Force a column break.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'break-before',
+      restriction: 'enum',
+      browsers: 'E12,FF65,S10,C50,O37',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/break-before',
+      syntax:
+        'auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region',
+    },
+    desc: 'Controls page, column, or region breaks before the element',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow automatic breaks.' },
+        { $: { name: 'avoid' }, desc: 'Avoid a break.' },
+        { $: { name: 'page' }, desc: 'Force a page break.' },
+        { $: { name: 'column' }, desc: 'Force a column break.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'break-inside',
+      restriction: 'enum',
+      browsers: 'E12,FF65,S10,C50,O37',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/break-inside',
+      syntax: 'auto | avoid | avoid-page | avoid-column | avoid-region',
+    },
+    desc: 'Controls whether page, column, or region breaks may occur inside the element',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow automatic breaks.' },
+        { $: { name: 'avoid' }, desc: 'Avoid breaks inside the element.' },
+        {
+          $: { name: 'avoid-page' },
+          desc: 'Avoid page breaks inside the element.',
+        },
+        {
+          $: { name: 'avoid-column' },
+          desc: 'Avoid column breaks inside the element.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'color-scheme',
+      restriction: 'string',
+      browsers: 'E81,FF96,S13,C81,O68',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/color-scheme',
+      syntax: 'normal | [ light | dark | <custom-ident> ]+ && only?',
+    },
+    desc: 'Declares the color schemes supported by the element for browser-provided rendering',
+    values: {
+      value: [
+        {
+          $: { name: 'normal' },
+          desc: 'Use the browser default color scheme.',
+        },
+        { $: { name: 'light' }, desc: 'Support a light color scheme.' },
+        { $: { name: 'dark' }, desc: 'Support a dark color scheme.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'column-rule-color',
+      restriction: 'color',
+      browsers: 'E12,FF52,S9,C50,O11.1',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/column-rule-color',
+      syntax: '<color>',
+    },
+    desc: 'Sets the color of the rule drawn between columns',
+  },
+  {
+    $: {
+      name: 'contain-intrinsic-block-size',
+      restriction: 'length',
+      browsers: 'E95,FF107,S17,C95,O81',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size',
+      syntax: 'auto? [ none | <length> ]',
+    },
+    desc: 'Provides a placeholder block size when size containment hides the actual content size',
+  },
+  {
+    $: {
+      name: 'contain-intrinsic-height',
+      restriction: 'length',
+      browsers: 'E95,FF107,S17,C95,O81',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height',
+      syntax: 'auto? [ none | <length> ]',
+    },
+    desc: 'Provides a placeholder height for size-contained content',
+  },
+  {
+    $: {
+      name: 'contain-intrinsic-inline-size',
+      restriction: 'length',
+      browsers: 'E95,FF107,S17,C95,O81',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size',
+      syntax: 'auto? [ none | <length> ]',
+    },
+    desc: 'Provides a placeholder inline size for size-contained content',
+  },
+  {
+    $: {
+      name: 'contain-intrinsic-size',
+      restriction: 'length',
+      browsers: 'E83,FF107,S17,C83,O69',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size',
+      syntax: '[ auto? [ none | <length> ] ]{1,2}',
+    },
+    desc: 'Sets placeholder width and height values for size-contained content',
+  },
+  {
+    $: {
+      name: 'contain-intrinsic-width',
+      restriction: 'length',
+      browsers: 'E95,FF107,S17,C95,O81',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width',
+      syntax: 'auto? [ none | <length> ]',
+    },
+    desc: 'Provides a placeholder width for size-contained content',
+  },
+  {
+    $: {
+      name: 'container',
+      restriction: 'string',
+      browsers: 'E105,FF110,S16,C105,O91',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/container',
+      syntax: "<'container-name'> [ / <'container-type'> ]?",
+    },
+    desc: 'Sets a query container name and containment type',
+  },
+  {
+    $: {
+      name: 'container-name',
+      restriction: 'identifier',
+      browsers: 'E105,FF110,S16,C105,O91',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/container-name',
+      syntax: 'none | <custom-ident>+',
+    },
+    desc: 'Names the element for use in container queries',
+  },
+  {
+    $: {
+      name: 'container-type',
+      restriction: 'string',
+      browsers: 'E105,FF110,S16,C105,O91',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/container-type',
+      syntax: 'normal | [ [ size | inline-size ] || scroll-state ]',
+    },
+    desc: 'Establishes the types of container queries supported by the element',
+    values: {
+      value: [
+        {
+          $: { name: 'normal' },
+          desc: 'Do not establish size containment for queries.',
+        },
+        { $: { name: 'size' }, desc: 'Allow queries on both size axes.' },
+        {
+          $: { name: 'inline-size' },
+          desc: 'Allow queries on the inline size.',
+        },
+        { $: { name: 'scroll-state' }, desc: 'Allow scroll-state queries.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'content-visibility',
+      restriction: 'enum',
+      browsers: 'E85,FF125,S18,C85,O71',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/content-visibility',
+      syntax: 'visible | auto | hidden',
+    },
+    desc: 'Controls whether the browser renders the contents of an element',
+    values: {
+      value: [
+        { $: { name: 'visible' }, desc: 'Render the contents normally.' },
+        {
+          $: { name: 'auto' },
+          desc: 'Allow rendering work to be skipped for offscreen content.',
+        },
+        { $: { name: 'hidden' }, desc: 'Skip rendering the contents.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'counter-set',
+      restriction: 'string',
+      browsers: 'E85,FF68,S17.2,C85,O71',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/counter-set',
+      syntax: '[ <counter-name> <integer>? ]+ | none',
+    },
+    desc: 'Sets the values of named CSS counters',
+  },
+  {
+    $: {
+      name: 'cx',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S9,C43,O30',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/cx',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the horizontal center coordinate of an SVG circle or ellipse',
+  },
+  {
+    $: {
+      name: 'cy',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S9,C43,O30',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/cy',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the vertical center coordinate of an SVG circle or ellipse',
+  },
+  {
+    $: {
+      name: 'dominant-baseline',
+      restriction: 'enum',
+      browsers: 'E79,FF1,S4,C1,O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/dominant-baseline',
+      syntax:
+        'auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top',
+    },
+    desc: 'Selects the dominant baseline used to align text',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Choose the baseline from the writing mode.',
+        },
+        { $: { name: 'alphabetic' }, desc: 'Use the alphabetic baseline.' },
+        { $: { name: 'middle' }, desc: 'Use the middle baseline.' },
+        { $: { name: 'central' }, desc: 'Use the central baseline.' },
+        { $: { name: 'hanging' }, desc: 'Use the hanging baseline.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-optical-sizing',
+      restriction: 'enum',
+      browsers: 'E17,FF62,S13.1,C79,O66',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-optical-sizing',
+      syntax: 'auto | none',
+    },
+    desc: 'Controls automatic optical-size adjustment in fonts that support it',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Adjust optical sizing to the text size.',
+        },
+        { $: { name: 'none' }, desc: 'Disable automatic optical sizing.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-palette',
+      restriction: 'string',
+      browsers: 'E101,FF107,S15.4,C101,O87',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-palette',
+      syntax: 'normal | light | dark | <palette-identifier> | <palette-mix()>',
+    },
+    desc: 'Chooses the color palette used by a color font',
+    values: {
+      value: [
+        { $: { name: 'normal' }, desc: 'Use the default palette.' },
+        {
+          $: { name: 'light' },
+          desc: 'Choose a palette suited to a light background.',
+        },
+        {
+          $: { name: 'dark' },
+          desc: 'Choose a palette suited to a dark background.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-synthesis-small-caps',
+      restriction: 'enum',
+      browsers: 'E97,FF111,S16.4,C97,O83',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-synthesis-small-caps',
+      syntax: 'auto | none',
+    },
+    desc: 'Controls whether missing small-cap glyphs may be synthesized',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow synthetic small caps.' },
+        {
+          $: { name: 'none' },
+          desc: 'Use only small-cap glyphs supplied by the font.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-synthesis-style',
+      restriction: 'enum',
+      browsers: 'E97,FF111,S16.4,C97,O83',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-synthesis-style',
+      syntax: 'auto | none',
+    },
+    desc: 'Controls whether missing italic or oblique font styles may be synthesized',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow synthetic font styles.' },
+        { $: { name: 'none' }, desc: 'Use only styles supplied by the font.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-synthesis-weight',
+      restriction: 'enum',
+      browsers: 'E97,FF111,S16.4,C97,O83',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-synthesis-weight',
+      syntax: 'auto | none',
+    },
+    desc: 'Controls whether missing bold font weights may be synthesized',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Allow synthetic bold weights.' },
+        { $: { name: 'none' }, desc: 'Use only weights supplied by the font.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'font-variation-settings',
+      restriction: 'string',
+      browsers: 'E17,FF62,S11,C62,O49',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/font-variation-settings',
+      syntax: 'normal | [ <string> <number> ]#',
+    },
+    desc: 'Sets individual variation-axis values for a variable font',
+  },
+  {
+    $: {
+      name: 'hyphenate-character',
+      restriction: 'string',
+      browsers: 'E106,FF98,S17,C106,O92',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/hyphenate-character',
+      syntax: 'auto | <string>',
+    },
+    desc: 'Selects the string displayed at automatic hyphenation breaks',
+  },
+  {
+    $: {
+      name: 'inset',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset',
+      syntax: "<'top'>{1,4}",
+    },
+    desc: 'Sets the top, right, bottom, and left offsets of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-block',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-block',
+      syntax: "<'top'>{1,2}",
+    },
+    desc: 'Sets both logical block offsets of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-block-end',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-block-end',
+      syntax: "<'top'>",
+    },
+    desc: 'Sets the logical block-end offset of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-block-start',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-block-start',
+      syntax: "<'top'>",
+    },
+    desc: 'Sets the logical block-start offset of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-inline',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-inline',
+      syntax: "<'top'>{1,2}",
+    },
+    desc: 'Sets both logical inline offsets of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-inline-end',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-inline-end',
+      syntax: "<'top'>",
+    },
+    desc: 'Sets the logical inline-end offset of a positioned element',
+  },
+  {
+    $: {
+      name: 'inset-inline-start',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF63,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/inset-inline-start',
+      syntax: "<'top'>",
+    },
+    desc: 'Sets the logical inline-start offset of a positioned element',
+  },
+  {
+    $: {
+      name: 'line-clamp',
+      restriction: 'integer, string',
+      browsers: 'O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/line-clamp',
+      syntax: 'none | <integer>',
+    },
+    desc: 'Limits the number of displayed lines in a block of text',
+    values: {
+      value: [
+        { $: { name: 'none' }, desc: 'Do not clamp the number of lines.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'margin-block',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/margin-block',
+      syntax: "<'margin-top'>{1,2}",
+    },
+    desc: 'Sets the logical block-start and block-end margins',
+  },
+  {
+    $: {
+      name: 'margin-inline',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/margin-inline',
+      syntax: "<'margin-top'>{1,2}",
+    },
+    desc: 'Sets the logical inline-start and inline-end margins',
+  },
+  {
+    $: {
+      name: 'mask',
+      restriction: 'string',
+      browsers: 'E120,FF53,S15.4,C120,O106',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/mask',
+      syntax: '<mask-layer>#',
+    },
+    desc: 'Sets the mask images, positions, sizing, clipping, and compositing layers',
+  },
+  {
+    $: {
+      name: 'mask-clip',
+      restriction: 'string',
+      browsers: 'E120,FF53,S15.4,C120,O106',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/mask-clip',
+      syntax: '[ <coord-box> | no-clip ]#',
+    },
+    desc: 'Specifies the area affected by each mask layer',
+    values: {
+      value: [
+        { $: { name: 'border-box' }, desc: 'Clip the mask to the border box.' },
+        {
+          $: { name: 'padding-box' },
+          desc: 'Clip the mask to the padding box.',
+        },
+        {
+          $: { name: 'content-box' },
+          desc: 'Clip the mask to the content box.',
+        },
+        { $: { name: 'no-clip' }, desc: 'Do not clip the mask.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'mask-composite',
+      restriction: 'string',
+      browsers: 'E120,FF53,S15.4,C120,O106',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/mask-composite',
+      syntax: '<compositing-operator>#',
+    },
+    desc: 'Controls how each mask layer combines with the layers below it',
+    values: {
+      value: [
+        {
+          $: { name: 'add' },
+          desc: 'Add the current layer to the layers below.',
+        },
+        {
+          $: { name: 'subtract' },
+          desc: 'Keep the part outside the layers below.',
+        },
+        { $: { name: 'intersect' }, desc: 'Keep only the overlapping part.' },
+        {
+          $: { name: 'exclude' },
+          desc: 'Keep only the non-overlapping parts.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'math-style',
+      restriction: 'enum',
+      browsers: 'E109,FF117,S14.1,C109,O95',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/math-style',
+      syntax: 'normal | compact',
+    },
+    desc: 'Selects normal or compact layout for mathematical expressions',
+    values: {
+      value: [
+        { $: { name: 'normal' }, desc: 'Use normal mathematical layout.' },
+        { $: { name: 'compact' }, desc: 'Use compact mathematical layout.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'offset',
+      restriction: 'string',
+      browsers: 'E79,FF72,S16,C55,O42',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset',
+      syntax:
+        "[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?",
+    },
+    desc: 'Sets the motion path, distance, rotation, position, and anchor',
+  },
+  {
+    $: {
+      name: 'offset-anchor',
+      restriction: 'position',
+      browsers: 'E116,FF72,S16,C116,O102',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset-anchor',
+      syntax: 'auto | <position>',
+    },
+    desc: 'Sets the point on the element that follows its motion path',
+  },
+  {
+    $: {
+      name: 'offset-distance',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF72,S16,C55,O42',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset-distance',
+      syntax: '<length-percentage>',
+    },
+    desc: 'Sets how far the element has traveled along its motion path',
+  },
+  {
+    $: {
+      name: 'offset-path',
+      restriction: 'string',
+      browsers: 'E79,FF72,S15.4,C55,O45',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset-path',
+      syntax: 'none | <offset-path> || <coord-box>',
+    },
+    desc: 'Defines the path followed by an element during motion',
+  },
+  {
+    $: {
+      name: 'offset-position',
+      restriction: 'position',
+      browsers: 'E116,FF122,S16,C116,O102',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset-position',
+      syntax: 'normal | auto | <position>',
+    },
+    desc: 'Sets the initial position used to establish the motion path',
+  },
+  {
+    $: {
+      name: 'offset-rotate',
+      restriction: 'angle',
+      browsers: 'E79,FF72,S16,C56,O43',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/offset-rotate',
+      syntax: '[ auto | reverse ] || <angle>',
+    },
+    desc: 'Sets the orientation of an element as it follows its motion path',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Follow the direction of the path.' },
+        {
+          $: { name: 'reverse' },
+          desc: 'Face opposite the direction of the path.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overflow-block',
+      restriction: 'enum',
+      browsers: 'E135,FF69,S26,C135,O120',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overflow-block',
+      syntax: 'visible | hidden | clip | scroll | auto',
+    },
+    desc: 'Controls overflow along the logical block axis',
+    values: {
+      value: [
+        { $: { name: 'visible' }, desc: 'Allow content to overflow.' },
+        {
+          $: { name: 'hidden' },
+          desc: 'Clip overflow while allowing programmatic scrolling.',
+        },
+        {
+          $: { name: 'clip' },
+          desc: 'Clip overflow without creating a scroll container.',
+        },
+        {
+          $: { name: 'scroll' },
+          desc: 'Provide scrolling even without overflow.',
+        },
+        {
+          $: { name: 'auto' },
+          desc: 'Provide scrolling when content overflows.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overflow-inline',
+      restriction: 'enum',
+      browsers: 'E135,FF69,S26,C135,O120',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overflow-inline',
+      syntax: 'visible | hidden | clip | scroll | auto',
+    },
+    desc: 'Controls overflow along the logical inline axis',
+    values: {
+      value: [
+        { $: { name: 'visible' }, desc: 'Allow content to overflow.' },
+        {
+          $: { name: 'hidden' },
+          desc: 'Clip overflow while allowing programmatic scrolling.',
+        },
+        {
+          $: { name: 'clip' },
+          desc: 'Clip overflow without creating a scroll container.',
+        },
+        {
+          $: { name: 'scroll' },
+          desc: 'Provide scrolling even without overflow.',
+        },
+        {
+          $: { name: 'auto' },
+          desc: 'Provide scrolling when content overflows.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overscroll-behavior',
+      restriction: 'string',
+      browsers: 'E18,FF59,S16,C63,O50',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior',
+      syntax: '[ contain | none | auto ]{1,2}',
+    },
+    desc: 'Controls scroll chaining and boundary effects on both scroll axes',
+  },
+  {
+    $: {
+      name: 'overscroll-behavior-block',
+      restriction: 'enum',
+      browsers: 'E79,FF73,S16,C77,O64',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-block',
+      syntax: 'contain | none | auto',
+    },
+    desc: 'Controls scroll chaining and boundary effects on the logical block axis',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Allow scroll chaining and boundary effects.',
+        },
+        { $: { name: 'contain' }, desc: 'Prevent scroll chaining.' },
+        {
+          $: { name: 'none' },
+          desc: 'Prevent scroll chaining and boundary effects.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overscroll-behavior-inline',
+      restriction: 'enum',
+      browsers: 'E79,FF73,S16,C77,O64',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-inline',
+      syntax: 'contain | none | auto',
+    },
+    desc: 'Controls scroll chaining and boundary effects on the logical inline axis',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Allow scroll chaining and boundary effects.',
+        },
+        { $: { name: 'contain' }, desc: 'Prevent scroll chaining.' },
+        {
+          $: { name: 'none' },
+          desc: 'Prevent scroll chaining and boundary effects.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overscroll-behavior-x',
+      restriction: 'enum',
+      browsers: 'E18,FF59,S16,C63,O50',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-x',
+      syntax: 'contain | none | auto',
+    },
+    desc: 'Controls horizontal scroll chaining and boundary effects',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Allow scroll chaining and boundary effects.',
+        },
+        { $: { name: 'contain' }, desc: 'Prevent scroll chaining.' },
+        {
+          $: { name: 'none' },
+          desc: 'Prevent scroll chaining and boundary effects.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'overscroll-behavior-y',
+      restriction: 'enum',
+      browsers: 'E18,FF59,S16,C63,O50',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-y',
+      syntax: 'contain | none | auto',
+    },
+    desc: 'Controls vertical scroll chaining and boundary effects',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Allow scroll chaining and boundary effects.',
+        },
+        { $: { name: 'contain' }, desc: 'Prevent scroll chaining.' },
+        {
+          $: { name: 'none' },
+          desc: 'Prevent scroll chaining and boundary effects.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'padding-block',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/padding-block',
+      syntax: "<'padding-top'>{1,2}",
+    },
+    desc: 'Sets the logical block-start and block-end padding',
+  },
+  {
+    $: {
+      name: 'padding-inline',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF66,S14.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/padding-inline',
+      syntax: "<'padding-top'>{1,2}",
+    },
+    desc: 'Sets the logical inline-start and inline-end padding',
+  },
+  {
+    $: {
+      name: 'page',
+      restriction: 'identifier',
+      browsers: 'E85,FF110,S1,C85,O71',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/page',
+      syntax: 'auto | <custom-ident>',
+    },
+    desc: 'Assigns the element to a named page in paged media',
+  },
+  {
+    $: {
+      name: 'place-content',
+      restriction: 'string',
+      browsers: 'E79,FF45,S9,C59,O46',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/place-content',
+      syntax: "<'align-content'> <'justify-content'>?",
+    },
+    desc: 'Sets content alignment on the block and inline axes',
+  },
+  {
+    $: {
+      name: 'place-items',
+      restriction: 'string',
+      browsers: 'E79,FF45,S11,C59,O46',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/place-items',
+      syntax: "<'align-items'> <'justify-items'>?",
+    },
+    desc: 'Sets item alignment on the block and inline axes',
+  },
+  {
+    $: {
+      name: 'place-self',
+      restriction: 'string',
+      browsers: 'E79,FF45,S11,C59,O46',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/place-self',
+      syntax: "<'align-self'> <'justify-self'>?",
+    },
+    desc: 'Sets the alignment of an individual item on both axes',
+  },
+  {
+    $: {
+      name: 'print-color-adjust',
+      restriction: 'enum',
+      browsers: 'E136,FF97,S15.4,C136,O121',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/print-color-adjust',
+      syntax: 'economy | exact',
+    },
+    desc: 'Controls whether the browser may adjust colors when printing',
+    values: {
+      value: [
+        {
+          $: { name: 'economy' },
+          desc: 'Allow adjustments that reduce printing cost.',
+        },
+        {
+          $: { name: 'exact' },
+          desc: 'Request that authored colors be preserved.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'r',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S9,C43,O30',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/r',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the radius of an SVG circle',
+  },
+  {
+    $: {
+      name: 'rotate',
+      restriction: 'angle',
+      browsers: 'E104,FF72,S14.1,C104,O90',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/rotate',
+      syntax: 'none | <angle> | [ x | y | z | <number>{3} ] && <angle>',
+    },
+    desc: 'Sets rotation independently of the transform property',
+  },
+  {
+    $: {
+      name: 'row-gap',
+      restriction: 'length, percentage',
+      browsers: 'E16,FF52,S10.1,C47,O34',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/row-gap',
+      syntax: 'normal | <length-percentage>',
+    },
+    desc: 'Sets the gap between rows in grid, flex, and multi-column layouts',
+  },
+  {
+    $: {
+      name: 'rx',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S17.4,C43,O30',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/rx',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the horizontal radius of an SVG ellipse or rounded rectangle',
+  },
+  {
+    $: {
+      name: 'ry',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S17.4,C43,O30',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/ry',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the vertical radius of an SVG ellipse or rounded rectangle',
+  },
+  {
+    $: {
+      name: 'scale',
+      restriction: 'number, percentage',
+      browsers: 'E104,FF72,S14.1,C104,O90',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scale',
+      syntax: 'none | [ <number> | <percentage> ]{1,3}',
+    },
+    desc: 'Sets scaling independently of the transform property',
+  },
+  {
+    $: {
+      name: 'scroll-margin',
+      restriction: 'length',
+      browsers: 'E79,FF90,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin',
+      syntax: '<length>{1,4}',
+    },
+    desc: 'Sets the outsets of the scroll snap area on all four sides',
+  },
+  {
+    $: {
+      name: 'scroll-margin-block',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block',
+      syntax: '<length>{1,2}',
+    },
+    desc: 'Sets the scroll snap area outsets on both logical block edges',
+  },
+  {
+    $: {
+      name: 'scroll-margin-block-end',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end',
+      syntax: '<length>',
+    },
+    desc: 'Sets the scroll snap area outset on the logical block-end edge',
+  },
+  {
+    $: {
+      name: 'scroll-margin-block-start',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start',
+      syntax: '<length>',
+    },
+    desc: 'Sets the scroll snap area outset on the logical block-start edge',
+  },
+  {
+    $: {
+      name: 'scroll-margin-bottom',
+      restriction: 'length',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom',
+      syntax: '<length>',
+    },
+    desc: 'Sets the bottom outset of the scroll snap area',
+  },
+  {
+    $: {
+      name: 'scroll-margin-inline',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline',
+      syntax: '<length>{1,2}',
+    },
+    desc: 'Sets the scroll snap area outsets on both logical inline edges',
+  },
+  {
+    $: {
+      name: 'scroll-margin-inline-end',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end',
+      syntax: '<length>',
+    },
+    desc: 'Sets the scroll snap area outset on the logical inline-end edge',
+  },
+  {
+    $: {
+      name: 'scroll-margin-inline-start',
+      restriction: 'length',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start',
+      syntax: '<length>',
+    },
+    desc: 'Sets the scroll snap area outset on the logical inline-start edge',
+  },
+  {
+    $: {
+      name: 'scroll-margin-left',
+      restriction: 'length',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left',
+      syntax: '<length>',
+    },
+    desc: 'Sets the left outset of the scroll snap area',
+  },
+  {
+    $: {
+      name: 'scroll-margin-right',
+      restriction: 'length',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right',
+      syntax: '<length>',
+    },
+    desc: 'Sets the right outset of the scroll snap area',
+  },
+  {
+    $: {
+      name: 'scroll-margin-top',
+      restriction: 'length',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top',
+      syntax: '<length>',
+    },
+    desc: 'Sets the top outset of the scroll snap area',
+  },
+  {
+    $: {
+      name: 'scroll-padding',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding',
+      syntax: '[ auto | <length-percentage> ]{1,4}',
+    },
+    desc: 'Sets the optimal viewing area insets on all four sides of a scrollport',
+  },
+  {
+    $: {
+      name: 'scroll-padding-block',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block',
+      syntax: '[ auto | <length-percentage> ]{1,2}',
+    },
+    desc: 'Sets the scrollport viewing area insets on both logical block edges',
+  },
+  {
+    $: {
+      name: 'scroll-padding-block-end',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the scrollport viewing area inset on the logical block-end edge',
+  },
+  {
+    $: {
+      name: 'scroll-padding-block-start',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the scrollport viewing area inset on the logical block-start edge',
+  },
+  {
+    $: {
+      name: 'scroll-padding-bottom',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the bottom inset of the scrollport viewing area',
+  },
+  {
+    $: {
+      name: 'scroll-padding-inline',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline',
+      syntax: '[ auto | <length-percentage> ]{1,2}',
+    },
+    desc: 'Sets the scrollport viewing area insets on both logical inline edges',
+  },
+  {
+    $: {
+      name: 'scroll-padding-inline-end',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the scrollport viewing area inset on the logical inline-end edge',
+  },
+  {
+    $: {
+      name: 'scroll-padding-inline-start',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S15,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the scrollport viewing area inset on the logical inline-start edge',
+  },
+  {
+    $: {
+      name: 'scroll-padding-left',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the left inset of the scrollport viewing area',
+  },
+  {
+    $: {
+      name: 'scroll-padding-right',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the right inset of the scrollport viewing area',
+  },
+  {
+    $: {
+      name: 'scroll-padding-top',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF68,S14.1,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top',
+      syntax: 'auto | <length-percentage>',
+    },
+    desc: 'Sets the top inset of the scrollport viewing area',
+  },
+  {
+    $: {
+      name: 'scroll-snap-align',
+      restriction: 'string',
+      browsers: 'E79,FF68,S11,C69,O56',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align',
+      syntax: '[ none | start | end | center ]{1,2}',
+    },
+    desc: 'Sets the alignment of the element within its scroll snap area',
+    values: {
+      value: [
+        { $: { name: 'none' }, desc: 'Do not define a snap position.' },
+        { $: { name: 'start' }, desc: 'Align with the start of the snapport.' },
+        { $: { name: 'end' }, desc: 'Align with the end of the snapport.' },
+        {
+          $: { name: 'center' },
+          desc: 'Align with the center of the snapport.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'scroll-snap-stop',
+      restriction: 'enum',
+      browsers: 'E79,FF103,S15,C75,O62',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop',
+      syntax: 'normal | always',
+    },
+    desc: 'Controls whether scrolling may pass over a snap position',
+    values: {
+      value: [
+        {
+          $: { name: 'normal' },
+          desc: 'Allow scrolling to pass over the snap position.',
+        },
+        {
+          $: { name: 'always' },
+          desc: 'Require scrolling to stop at the snap position.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'scrollbar-color',
+      restriction: 'color',
+      browsers: 'E121,FF64,S26.2,C121,O107',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scrollbar-color',
+      syntax: 'auto | <color>{2}',
+    },
+    desc: 'Sets the thumb and track colors of scrollbars',
+  },
+  {
+    $: {
+      name: 'scrollbar-gutter',
+      restriction: 'string',
+      browsers: 'E94,FF97,S18.2,C94,O80',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter',
+      syntax: 'auto | stable && both-edges?',
+    },
+    desc: 'Reserves space for scrollbars to prevent layout changes',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Reserve space only when required by the scrollbar.',
+        },
+        { $: { name: 'stable' }, desc: 'Reserve a stable scrollbar gutter.' },
+        {
+          $: { name: 'stable both-edges' },
+          desc: 'Reserve matching gutters on both inline edges.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'scrollbar-width',
+      restriction: 'enum',
+      browsers: 'E121,FF64,S18.2,C121,O107',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/scrollbar-width',
+      syntax: 'auto | thin | none',
+    },
+    desc: 'Chooses the thickness of scrollbars',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Use the platform default thickness.' },
+        { $: { name: 'thin' }, desc: 'Use a thinner scrollbar.' },
+        {
+          $: { name: 'none' },
+          desc: 'Hide the scrollbar without disabling scrolling.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'shape-rendering',
+      restriction: 'enum',
+      browsers: 'E79,FF3,S4,C1,O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/shape-rendering',
+      syntax: 'auto | optimizeSpeed | crispEdges | geometricPrecision',
+    },
+    desc: 'Provides rendering-quality hints for SVG shapes',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Let the renderer balance speed and quality.',
+        },
+        { $: { name: 'optimizeSpeed' }, desc: 'Favor rendering speed.' },
+        { $: { name: 'crispEdges' }, desc: 'Favor crisp edges.' },
+        {
+          $: { name: 'geometricPrecision' },
+          desc: 'Favor geometric accuracy.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-autospace',
+      restriction: 'string',
+      browsers: 'E140,FF145,S18.4,C140,O124',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-autospace',
+      syntax: 'normal | <autospace> | auto',
+    },
+    desc: 'Controls automatic spacing between characters from different writing systems',
+  },
+  {
+    $: {
+      name: 'text-combine-upright',
+      restriction: 'string',
+      browsers: 'E79,FF48,S15.4,C48,O35',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-combine-upright',
+      syntax: 'none | all | [ digits <integer>? ]',
+    },
+    desc: 'Combines a sequence of characters into one upright unit in vertical text',
+    values: {
+      value: [
+        { $: { name: 'none' }, desc: 'Do not combine characters.' },
+        { $: { name: 'all' }, desc: 'Combine all characters in the element.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-decoration-skip-ink',
+      restriction: 'enum',
+      browsers: 'E79,FF70,S15.4,C64,O50',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip-ink',
+      syntax: 'auto | all | none',
+    },
+    desc: 'Controls whether text decoration lines avoid glyph strokes',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Let the browser avoid glyph strokes.' },
+        { $: { name: 'all' }, desc: 'Avoid glyph strokes wherever possible.' },
+        { $: { name: 'none' }, desc: 'Draw continuous decoration lines.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-decoration-thickness',
+      restriction: 'length, percentage',
+      browsers: 'E89,FF70,S12.1,C89,O75',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness',
+      syntax: 'auto | from-font | <length> | <percentage>',
+    },
+    desc: 'Sets the thickness of text decoration lines',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Let the browser choose a thickness.' },
+        {
+          $: { name: 'from-font' },
+          desc: 'Use the thickness specified by the font.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-emphasis',
+      restriction: 'string, color',
+      browsers: 'E99,FF46,S7,C99,O85',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-emphasis',
+      syntax: "<'text-emphasis-style'> || <'text-emphasis-color'>",
+    },
+    desc: 'Sets the style and color of emphasis marks beside text',
+  },
+  {
+    $: {
+      name: 'text-emphasis-color',
+      restriction: 'color',
+      browsers: 'E99,FF46,S7,C99,O85',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color',
+      syntax: '<color>',
+    },
+    desc: 'Sets the color of text emphasis marks',
+  },
+  {
+    $: {
+      name: 'text-emphasis-position',
+      restriction: 'string',
+      browsers: 'E99,FF46,S7,C99,O85',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-emphasis-position',
+      syntax: 'auto | [ over | under ] && [ right | left ]?',
+    },
+    desc: 'Positions emphasis marks relative to the text',
+  },
+  {
+    $: {
+      name: 'text-emphasis-style',
+      restriction: 'string',
+      browsers: 'E99,FF46,S7,C99,O85',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-emphasis-style',
+      syntax:
+        'none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>',
+    },
+    desc: 'Selects the shape and fill of text emphasis marks',
+  },
+  {
+    $: {
+      name: 'text-underline-offset',
+      restriction: 'length, percentage',
+      browsers: 'E87,FF70,S12.1,C87,O73',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-underline-offset',
+      syntax: 'auto | <length> | <percentage>',
+    },
+    desc: 'Sets the distance between an underline and its original position',
+  },
+  {
+    $: {
+      name: 'text-underline-position',
+      restriction: 'string',
+      browsers: 'E12,FF74,S12.1,C33,O20',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-underline-position',
+      syntax: 'auto | from-font | [ under || [ left | right ] ]',
+    },
+    desc: 'Selects the placement of underlines in horizontal and vertical text',
+    values: {
+      value: [
+        { $: { name: 'auto' }, desc: 'Let the browser choose the position.' },
+        {
+          $: { name: 'from-font' },
+          desc: 'Use the underline position supplied by the font.',
+        },
+        {
+          $: { name: 'under' },
+          desc: 'Place the underline below the text content.',
+        },
+        {
+          $: { name: 'left' },
+          desc: 'Place the underline to the left in vertical text.',
+        },
+        {
+          $: { name: 'right' },
+          desc: 'Place the underline to the right in vertical text.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-wrap',
+      restriction: 'string',
+      browsers: 'E114,FF121,S17.4,C114,O100',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-wrap',
+      syntax: "<'text-wrap-mode'> || <'text-wrap-style'>",
+    },
+    desc: 'Sets text wrapping behavior and the strategy used to choose line breaks',
+    values: {
+      value: [
+        { $: { name: 'wrap' }, desc: 'Allow text to wrap.' },
+        { $: { name: 'nowrap' }, desc: 'Prevent text from wrapping.' },
+        { $: { name: 'balance' }, desc: 'Balance line lengths.' },
+        {
+          $: { name: 'pretty' },
+          desc: 'Favor a more pleasing arrangement of line breaks.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-wrap-mode',
+      restriction: 'enum',
+      browsers: 'E130,FF124,S17.4,C130,O115',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-wrap-mode',
+      syntax: 'wrap | nowrap',
+    },
+    desc: 'Controls whether text may wrap onto additional lines',
+    values: {
+      value: [
+        { $: { name: 'wrap' }, desc: 'Allow wrapping.' },
+        { $: { name: 'nowrap' }, desc: 'Prevent wrapping.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'text-wrap-style',
+      restriction: 'enum',
+      browsers: 'E130,FF124,S17.5,C130,O115',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/text-wrap-style',
+      syntax: 'auto | balance | stable | pretty',
+    },
+    desc: 'Chooses the strategy used to arrange wrapped text lines',
+    values: {
+      value: [
+        {
+          $: { name: 'auto' },
+          desc: 'Use the browser default wrapping strategy.',
+        },
+        { $: { name: 'balance' }, desc: 'Balance line lengths.' },
+        {
+          $: { name: 'stable' },
+          desc: 'Avoid changing earlier lines while editing.',
+        },
+        {
+          $: { name: 'pretty' },
+          desc: 'Favor a more pleasing arrangement of line breaks.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'transform-box',
+      restriction: 'enum',
+      browsers: 'E79,FF55,S11,C64,O51',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/transform-box',
+      syntax: 'content-box | border-box | fill-box | stroke-box | view-box',
+    },
+    desc: 'Selects the reference box used by transforms and transform-origin',
+    values: {
+      value: [
+        { $: { name: 'content-box' }, desc: 'Use the content box.' },
+        { $: { name: 'border-box' }, desc: 'Use the border box.' },
+        { $: { name: 'fill-box' }, desc: 'Use the object bounding box.' },
+        { $: { name: 'stroke-box' }, desc: 'Use the stroke bounding box.' },
+        { $: { name: 'view-box' }, desc: 'Use the nearest SVG viewport.' },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'transition-behavior',
+      restriction: 'string',
+      browsers: 'E117,FF129,S17.4,C117,O103',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/transition-behavior',
+      syntax: '<transition-behavior-value>#',
+    },
+    desc: 'Controls whether transitions may start for discrete properties',
+    values: {
+      value: [
+        {
+          $: { name: 'normal' },
+          desc: 'Transition only continuously animatable properties.',
+        },
+        {
+          $: { name: 'allow-discrete' },
+          desc: 'Allow transitions of discrete properties.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'translate',
+      restriction: 'length, percentage',
+      browsers: 'E104,FF72,S14.1,C104,O90',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/translate',
+      syntax: 'none | <length-percentage> [ <length-percentage> <length>? ]?',
+    },
+    desc: 'Sets translation independently of the transform property',
+  },
+  {
+    $: {
+      name: 'vector-effect',
+      restriction: 'enum',
+      browsers: 'E79,FF15,S5.1,C6,O15',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/vector-effect',
+      syntax:
+        'none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position',
+    },
+    desc: 'Controls how transformations affect SVG strokes and geometry',
+    values: {
+      value: [
+        {
+          $: { name: 'none' },
+          desc: 'Apply the normal transformation behavior.',
+        },
+        {
+          $: { name: 'non-scaling-stroke' },
+          desc: 'Keep stroke width independent of scaling.',
+        },
+        {
+          $: { name: 'non-scaling-size' },
+          desc: 'Keep the object size independent of scaling.',
+        },
+        {
+          $: { name: 'non-rotation' },
+          desc: 'Keep the object orientation independent of rotation.',
+        },
+        {
+          $: { name: 'fixed-position' },
+          desc: 'Keep the object position independent of transformations.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'view-transition-class',
+      restriction: 'identifier',
+      browsers: 'E125,FF144,S18.2,C125,O111',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/view-transition-class',
+      syntax: 'none | <custom-ident>+',
+    },
+    desc: 'Assigns classes used to style view-transition pseudo-elements',
+  },
+  {
+    $: {
+      name: 'view-transition-name',
+      restriction: 'identifier',
+      browsers: 'E111,FF144,S18,C111,O97',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/view-transition-name',
+      syntax: 'none | <custom-ident> | match-element',
+    },
+    desc: 'Names an element for capture and matching during a view transition',
+  },
+  {
+    $: {
+      name: 'white-space-collapse',
+      restriction: 'enum',
+      browsers: 'E114,FF124,S17.4,C114,O100',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/white-space-collapse',
+      syntax:
+        'collapse | preserve | preserve-breaks | preserve-spaces | break-spaces',
+    },
+    desc: 'Controls how whitespace characters and segment breaks are collapsed',
+    values: {
+      value: [
+        {
+          $: { name: 'collapse' },
+          desc: 'Collapse whitespace sequences and segment breaks.',
+        },
+        {
+          $: { name: 'preserve' },
+          desc: 'Preserve whitespace sequences and segment breaks.',
+        },
+        {
+          $: { name: 'preserve-breaks' },
+          desc: 'Preserve segment breaks while collapsing spaces.',
+        },
+        {
+          $: { name: 'preserve-spaces' },
+          desc: 'Preserve spaces while converting tabs and breaks to spaces.',
+        },
+        {
+          $: { name: 'break-spaces' },
+          desc: 'Preserve spaces and allow a break after each one.',
+        },
+      ],
+    },
+  },
+  {
+    $: {
+      name: 'x',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S9,C42,O29',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/x',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the horizontal position of an SVG geometry element',
+  },
+  {
+    $: {
+      name: 'y',
+      restriction: 'length, percentage',
+      browsers: 'E79,FF69,S9,C42,O29',
+      ref: 'https://developer.mozilla.org/docs/Web/CSS/y',
+      syntax: '<length> | <percentage>',
+    },
+    desc: 'Sets the vertical position of an SVG geometry element',
+  },
+]
diff --git a/packages/ts-css/src/meta/generateStyle.ts b/packages/ts-css/src/meta/generateStyle.ts
index 2144323d..8ff00c56 100644
--- a/packages/ts-css/src/meta/generateStyle.ts
+++ b/packages/ts-css/src/meta/generateStyle.ts
@@ -6,6 +6,9 @@ import { fileURLToPath } from 'node:url'
 import prettier from 'prettier'
 
 import { cssProps } from './cssProps'
+import { cssProps2 } from './cssProps2'
+
+const allCssProps = [...cssProps, ...cssProps2]
 
 const camelize = (s: string) =>
   (s.startsWith('-') ? s.substring(1) : s).replace(/-./g, (x) =>
@@ -62,7 +65,7 @@ function createCode() {
   const methods = createMethods()
   const code = `
 import { BaseStyle } from './baseStyle'
-import { CSSProps } from './cssProps'
+import type { CSSProps } from './cssProps'
 
 export class Style extends BaseStyle<Style> {
   constructor(selector?: string) {
@@ -108,7 +111,7 @@ function getAnyType(propType: PropType) {
     restriction === 'number(0-1)' ||
     restriction === 'number'
   )
-    return 'number'
+    return 'number | string'
   const stringType = ' | (string & {})'
   if (!propType?.values?.value) return 'string'
   if (!propType.values.value.map)
@@ -164,7 +167,7 @@ ${values}
 
 function createMethods() {
   let result = ''
-  for (const prop of cssProps) {
+  for (const prop of allCssProps) {
     result += createMethod(prop as PropType)
   }
   return result
@@ -172,7 +175,7 @@ function createMethods() {
 
 function createProps() {
   let result = ''
-  for (const prop of cssProps) {
+  for (const prop of allCssProps) {
     result += createProp(prop as PropType)
   }
   return result
@@ -203,6 +206,6 @@ writeCode('../cssProps.ts', formatted2)
 
 function writeCode(file: string, code: string) {
   const outTs = fileURLToPath(new URL(file, import.meta.url))
-  fs.writeFileSync(outTs, code)
+  fs.writeFileSync(outTs, code.replace(/[\t ]+$/gm, ''))
   console.log(`✅ Wrote ${outTs}`)
 }
diff --git a/packages/ts-css/src/style.test.ts b/packages/ts-css/src/style.test.ts
index db9f45c6..9ef43869 100644
--- a/packages/ts-css/src/style.test.ts
+++ b/packages/ts-css/src/style.test.ts
@@ -28,6 +28,99 @@ describe('Style', () => {
     expect(st.props.get('foo-bar')).toBe('baz')
   })
 
+  it('builds motion paths and frame declarations with fluent properties', async () => {
+    const root = s()
+    const packet = root
+      .select('.packet')
+      .offsetPath("path('M0 0L100 100')")
+      .offsetRotate('auto')
+      .transformBox('fill-box')
+      .animation('travel 8s linear infinite')
+    const frame = root.keyframes('travel').select('to')
+    const before = root.revision
+
+    expect(frame.offsetDistance('$travel, 100%')).toBe(frame)
+    expect(root.revision).toBeGreaterThan(before)
+    const after = root.revision
+    frame.offsetDistance('$travel, 100%')
+    expect(root.revision).toBe(after)
+    expect(packet.offsetAnchor('center')).toBe(packet)
+    expect(await root.toPrettyCSS()).toBe(`.packet {
+  offset-path: path("M0 0L100 100");
+  offset-rotate: auto;
+  transform-box: fill-box;
+  animation: travel 8s linear infinite;
+  offset-anchor: center;
+}
+
+@keyframes travel {
+  to {
+    offset-distance: var(--travel, 100%);
+  }
+}
+`)
+  })
+
+  it('composes modern layout, logical, scroll, and typography properties', async () => {
+    const root = s('.card')
+      .aspectRatio('16 / 9')
+      .containerType('inline-size')
+      .marginBlock('1rem 2rem')
+      .paddingInline('$gutter')
+      .rowGap('1rem')
+      .scrollbarGutter('stable both-edges')
+      .textWrap('balance')
+      .fontVariationSettings('"wght" 650')
+      .css({ scrollPaddingBlockStart: '4rem', textUnderlineOffset: '.2em' })
+
+    expect(await root.toPrettyCSS()).toBe(`.card {
+  aspect-ratio: 16 / 9;
+  container-type: inline-size;
+  margin-block: 1rem 2rem;
+  padding-inline: var(--gutter);
+  row-gap: 1rem;
+  scrollbar-gutter: stable both-edges;
+  text-wrap: balance;
+  font-variation-settings: "wght" 650;
+  scroll-padding-block-start: 4rem;
+  text-underline-offset: 0.2em;
+}
+`)
+  })
+
+  it('keeps hand-added setters and existing numeric and string values after generation', () => {
+    const root = s('.existing')
+      .placeItems('center')
+      .inset('0')
+      .scrollMarginTop('4rem')
+      .appearance('none')
+      .accentColor('$accent')
+      .breakInside('avoid')
+      .lineClamp('3')
+      .whiteSpace('pre-wrap')
+      .opacity('.5')
+      .zIndex('auto')
+      .flexGrow(1)
+      .webkitAppearance('none')
+      .motionOffset('20%')
+
+    expect(Object.fromEntries(root.props)).toEqual({
+      'place-items': 'center',
+      inset: '0',
+      'scroll-margin-top': '4rem',
+      appearance: 'none',
+      'accent-color': 'var(--accent)',
+      'break-inside': 'avoid',
+      'line-clamp': '3',
+      'white-space': 'pre-wrap',
+      opacity: '.5',
+      'z-index': 'auto',
+      'flex-grow': 1,
+      '-webkit-appearance': 'none',
+      'motion-offset': '20%',
+    })
+  })
+
   it('uses properties from another Style instance', () => {
     const a = s().color('blue').zoom('normal')
     const b = s()
diff --git a/packages/ts-css/src/style.ts b/packages/ts-css/src/style.ts
index 55244b50..4ab610a0 100644
--- a/packages/ts-css/src/style.ts
+++ b/packages/ts-css/src/style.ts
@@ -26,13 +26,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how 'justify-content' aligns individual items within the main-axis..
-   * 
+   *
    * syntax:  `p { align-content: flex-start; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#align-content
    *
    * values:
@@ -82,13 +82,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Aligns flex items along the cross axis of the current line of the flex container..
-   * 
+   *
    * syntax:  `p { align-items: flex-start; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#align-items
    *
    * values:
@@ -132,13 +132,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the default justify-self for all items of the box, giving them the default way of justifying each box along the appropriate axis.
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF45
-   * 
+   *
    * ref: https://www.w3.org/TR/css-grid-1/#row-align
    *
    * values:
@@ -188,13 +188,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the way of justifying a box inside its container along the appropriate axis..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF45
-   * 
+   *
    * ref: https://www.w3.org/TR/css-grid-1/#row-align
    *
    * values:
@@ -242,13 +242,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows the default alignment along the cross axis to be overridden for individual flex items..
-   * 
+   *
    * syntax:  `p { align-self: flex-start; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#align-items
    *
    * values:
@@ -326,13 +326,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines six of the animation properties into a single property..
-   * 
+   *
    * syntax:  `div { animation: movearound 4s ease 3 normal; }`
-   * 
+   *
    * restriction: time, timing-function, enum, identifier, number
-   * 
+   *
    * browsers: E,C43,FF16,IE10,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation
    *
    * values:
@@ -382,13 +382,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether or not the animation should play in reverse on alternate cycles..
-   * 
+   *
    * syntax:  `div { animation-direction: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C43,FF16,IE10,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-direction
    *
    * values:
@@ -428,13 +428,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines what values are applied by the animation outside the time it is executing..
-   * 
+   *
    * syntax:  `div { animation-fill-mode: forwards; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C43,FF16,IE10,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-fill-mode-property
    *
    * values:
@@ -492,13 +492,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether the animation is running or paused..
-   * 
+   *
    * syntax:  `div { animation-play-state: running; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C43,FF16,IE10,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-play-state
    *
    * values:
@@ -534,13 +534,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer..
-   * 
+   *
    * syntax:  `div { backface-visibility: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C36,FF16,IE10,O23
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transforms/#backface-visibility-property
    *
    * values:
@@ -558,13 +558,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting most background properties at the same place in the style sheet..
-   * 
+   *
    * syntax:  `section { background: url(image.png) no-repeat #999; }`
-   * 
+   *
    * restriction: enum, image, color, position, length, repeat, percentage, box
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#background
    *
    * values:
@@ -586,13 +586,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether the background images are fixed with regard to the viewport ('fixed') or scroll along with the element ('scroll') or its contents ('local')..
-   * 
+   *
    * syntax:  `.box { background-attachment: fixed; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#the-background-attachment
    *
    * values:
@@ -612,13 +612,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the blending mode of each background layer..
-   * 
+   *
    * syntax:  `div { background-blend-mode: saturation; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C35,FF30,O22,S7.1
-   * 
+   *
    * ref: http://www.w3.org/TR/compositing-1/#propdef-background-blend-mode
    *
    * values:
@@ -772,13 +772,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the size of the background images..
-   * 
+   *
    * syntax:  `header { background-size: 20px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: E,C,FF4,IE9,O10,S4.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#the-background-size
    *
    * values:
@@ -1086,13 +1086,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Selects a table's border model..
-   * 
+   *
    * syntax:  `table { border-collapse: collapse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/CSS2/tables.html#borders
    *
    * values:
@@ -1128,13 +1128,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values..
-   * 
+   *
    * syntax:  `td { border-image: url(border.png) 30 30 round;}`
-   * 
+   *
    * restriction: length, percentage, number, url, enum
-   * 
+   *
    * browsers: E,C16,FF15,IE11,O15,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#border-image
    *
    * values:
@@ -1182,13 +1182,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how the images for the sides and the middle part of the border image are scaled and tiled. If the second keyword is absent, it is assumed to be the same as the first..
-   * 
+   *
    * syntax:  `td { border-image-repeat: stretch; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C16,FF15,IE11,O15,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#the-border-image-repeat
    *
    * values:
@@ -1750,13 +1750,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether individual boxes are treated as broken pieces of one continuous box, or whether each box is individually wrapped with the border and padding..
-   * 
+   *
    * syntax:  `div { box-decoration-break: clone; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF32,O11
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-break/#break-decoration
    *
    * values:
@@ -1774,13 +1774,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Attaches one or more drop-shadows to the box. The property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color, and an optional 'inset' keyword. Omitted lengths are 0; omitted colors are a user agent chosen color..
-   * 
+   *
    * syntax:  `div { box-shadow: rgba(0,0,0,0.4) 10px 10px inset; }`
-   * 
+   *
    * restriction: length, color, enum
-   * 
+   *
    * browsers: E,C,FF4,IE9,O11.5,S5.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#box-shadow
    *
    * values:
@@ -1798,13 +1798,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the behavior of the 'width' and 'height' properties..
-   * 
+   *
    * syntax:  `div { box-sizing: content-box; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C10,FF29,IE8,O8,S5.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#box-sizing
    *
    * values:
@@ -1822,13 +1822,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the position of the caption box with respect to the table box..
-   * 
+   *
    * syntax:  `caption { caption-side: bottom; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C,FF,IE8,O,S
-   * 
+   *
    * ref: http://www.w3.org/TR/CSS2/tables.html#caption-position
    *
    * values:
@@ -1872,13 +1872,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts..
-   * 
+   *
    * syntax:  `footer { clear: both; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/2006/WD-CSS21-20060411/visuren.html#propdef-clear
    *
    * values:
@@ -1904,13 +1904,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Deprecated. Use the 'clip-path' property when support allows. Defines the visible portion of an element's box..
-   * 
+   *
    * syntax:  `span { clip: rect(0px, 60px, 200px, 0px); }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking/#clip-property
    *
    * values:
@@ -1928,13 +1928,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies a clipping path where everything inside the path is visible and everything outside is clipped out..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, shape, geometry-box, enum
-   * 
+   *
    * browsers: FF3.5
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking/#the-clip-path
    *
    * values:
@@ -1952,13 +1952,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates the algorithm which is to be used to determine what parts of the canvas are included inside the shape..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C5,FF3,IE10,O9,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-clip-rule
    *
    * values:
@@ -1994,13 +1994,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the color space for imaging operations performed via filter effects..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C5,FF3,IE10,O9,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/filter-effects/#ColorInterpolationFiltersProperty
    *
    * values:
@@ -2038,13 +2038,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In continuous media, this property will only be consulted if the length of columns has been constrained. Otherwise, columns will automatically be balanced..
-   * 
+   *
    * syntax:  `article { column-fill: balance; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,IE10,O11.5,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#filling-columns
    *
    * values:
@@ -2152,13 +2152,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior after the generated box..
-   * 
+   *
    * syntax:  `article { column-span: all; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,IE10,O11.5,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-span0
    *
    * values:
@@ -2176,13 +2176,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the width of columns in multicol elements..
-   * 
+   *
    * syntax:  `div { column-width: 100px; }`
-   * 
+   *
    * restriction: length, enum
-   * 
+   *
    * browsers: E,IE10,O11.5,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-width
    *
    * values:
@@ -2206,13 +2206,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates that an element and its contents are, as much as possible, independent of the rest of the document tree..
-   * 
+   *
    * syntax:  `div { contain: strict; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C52,O40
-   * 
+   *
    * ref: https://drafts.csswg.org/css-containment-3/#propdef-contain
    *
    * values:
@@ -2240,13 +2240,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines which page-based occurrence of a given element is applied to a counter or string value..
-   * 
+   *
    * syntax:  `a:after { content: ' ( attr(href))';}`
-   * 
+   *
    * restriction: string, url
-   * 
+   *
    * browsers: E,C,FF1,IE8,O4,S1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-content/#content
    *
    * values:
@@ -2354,13 +2354,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows control over cursor appearance in an element.
-   * 
+   *
    * syntax:  `nav { cursor: pointer; }`
-   * 
+   *
    * restriction: url, number, enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#cursor0
    *
    * values:
@@ -2462,13 +2462,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the inline base direction or directionality of any bidi paragraph, embedding, isolate, or override established by the box. Note: for HTML content use the 'dir' attribute and 'bdo' element rather than this property..
-   * 
+   *
    * syntax:  `div { direction: rtl; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-writing-modes-3/#direction
    *
    * values:
@@ -2486,13 +2486,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In combination with 'float' and 'position', determines the type of box or boxes that are generated for an element..
-   * 
+   *
    * syntax:  `p { display: inline; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-display-3/#propdef-display
    *
    * values:
@@ -2610,13 +2610,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content..
-   * 
+   *
    * syntax:  `table { empty-cells: hide; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C,FF1,IE7,O4,S1.2
-   * 
+   *
    * ref: http://www.w3.org/TR/CSS2/tables.html#empty-cells
    *
    * values:
@@ -2636,13 +2636,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Deprecated. Use 'isolation' property instead when support allows. Specifies how the accumulation of the background image is managed..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: integer, length, percentage, enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/filter-effects/#AccessBackgroundImage
    *
    * values:
@@ -2678,13 +2678,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Paints the interior of the given graphical element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: color, enum, url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#FillProperty
    *
    * values:
@@ -2728,13 +2728,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates the algorithm (or winding rule) which is to be used to determine what parts of the canvas are included inside the shape..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#WindingRule
    *
    * values:
@@ -2752,13 +2752,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Processes an element's rendering before it is displayed in the document, by applying one or more filter effects..
-   * 
+   *
    * syntax:  `div { filter: opacity(50%); }`
-   * 
+   *
    * restriction: enum, url
-   * 
+   *
    * browsers: E13,FF35
-   * 
+   *
    * ref: http://www.w3.org/TR/filter-effects/#propdef-filter
    *
    * values:
@@ -2775,7 +2775,7 @@ export class Style extends BaseStyle<Style> {
 
    * grayscale(): Converts the input image to grayscale.
 
-   * hue-rotate(): Applies a hue rotation on the input image. 
+   * hue-rotate(): Applies a hue rotation on the input image.
 
    * invert(): Inverts the samples in the input image.
 
@@ -2796,13 +2796,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the components of a flexible length: the flex grow factor and flex shrink factor, and the flex basis..
-   * 
+   *
    * syntax:  `p { flex: 0 1 auto; }`
-   * 
+   *
    * restriction: length, number, percentage
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#flex
    *
    * values:
@@ -2822,13 +2822,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Sets the flex basis..
-   * 
+   *
    * syntax:  `p { flex-basis: 30%; }`
-   * 
+   *
    * restriction: length, number, percentage
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#flex-basis-propdef
    *
    * values:
@@ -2846,13 +2846,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis..
-   * 
+   *
    * syntax:  `div { flex-direction: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#flex-direction
    *
    * values:
@@ -2874,13 +2874,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how flexbox items are placed in the flexbox..
-   * 
+   *
    * syntax:  `div { flex-flow: column wrap; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF28,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#flex-flow
    *
    * values:
@@ -2944,13 +2944,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in..
-   * 
+   *
    * syntax:  `div { flex-wrap: nowrap; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF28,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#flex-wrap
    *
    * values:
@@ -2970,13 +2970,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how a box should be floated. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned..
-   * 
+   *
    * syntax:  `img { float: right; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/CSS21/visuren.html#propdef-float
    *
    * values:
@@ -3036,13 +3036,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height', and 'font-family', at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts..
-   * 
+   *
    * syntax:  `body { font: bold 12px arial, verdana; }`
-   * 
+   *
    * restriction: font
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font
    *
    * values:
@@ -3118,13 +3118,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies a prioritized list of font family names or generic family names. A user agent iterates through the list of family names until it matches an available font that contains a glyph for the character to be rendered..
-   * 
+   *
    * syntax:  `body { font-family: arial, verdana; }`
-   * 
+   *
    * restriction: font
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-family0
    *
    * values:
@@ -3174,13 +3174,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case..
-   * 
+   *
    * syntax:  `body { font-feature-settings: 'hwid'; }`
-   * 
+   *
    * restriction: string, integer
-   * 
+   *
    * browsers: E,FF34,IE10
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-feature-settings
    *
    * values:
@@ -3434,13 +3434,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Kerning is the contextual adjustment of inter-glyph spacing. This property controls metric kerning, kerning that utilizes adjustment data contained in the font..
-   * 
+   *
    * syntax:  `body { font-kerning: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C33,FF34,O20
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-kerning
    *
    * values:
@@ -3478,13 +3478,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates the desired height of glyphs from the font. For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values..
-   * 
+   *
    * syntax:  `div { font-size: 12px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-size-prop
    *
    * values:
@@ -3534,13 +3534,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Selects a normal, condensed, or expanded face from a font family..
-   * 
+   *
    * syntax:  `div { font-stretch: expanded; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,FF9,IE9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-stretch0
    *
    * values:
@@ -3576,13 +3576,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows italic or oblique faces to be selected. Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face..
-   * 
+   *
    * syntax:  `body { font-style: italic; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-style0
    *
    * values:
@@ -3602,13 +3602,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls whether user agents are allowed to synthesize bold or oblique font faces when a font family lacks bold or italic faces..
-   * 
+   *
    * syntax:  `html:lang(ar) { font-synthesis: none; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-synthesis
    *
    * values:
@@ -3628,13 +3628,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies variant representations of the font.
-   * 
+   *
    * syntax:  `div { font-variant: small-caps; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-variant-prop
    *
    * values:
@@ -3652,13 +3652,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * For any given character, fonts can provide a variety of alternate glyphs in addition to the default glyph for that character. This property provides control over the selection of these alternate glyphs..
-   * 
+   *
    * syntax:  `h2 { font-variant-alternates: styleset(3,5); }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-variant-alternates
    *
    * values:
@@ -3688,13 +3688,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies control over capitalized forms..
-   * 
+   *
    * syntax:  `p { font-variant-caps: titling-caps; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-variant-caps-prop
    *
    * values:
@@ -3722,13 +3722,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows control of glyph substitute and positioning in East Asian text..
-   * 
+   *
    * syntax:  `mark { font-variant-east-asian: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-variant-east-asian-prop
    *
    * values:
@@ -3762,13 +3762,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies control over which ligatures are enabled or disabled. A value of 'normal' implies that the defaults set by the font are used..
-   * 
+   *
    * syntax:  `div { font-variant-ligatures: historical-ligatures; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C18,FF34,O15,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-variant-ligatures-prop
    *
    * values:
@@ -3806,13 +3806,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies control over numerical forms..
-   * 
+   *
    * syntax:  `.amount { font-variant-numeric: oldstyle-nums diagonal-fractions; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-variant-numeric-prop
    *
    * values:
@@ -3844,13 +3844,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the vertical position.
-   * 
+   *
    * syntax:  `sub { font-variant-position: subscript; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF34
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-variant-position
    *
    * values:
@@ -3870,13 +3870,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies weight of glyphs in the font, their degree of blackness or stroke thickness..
-   * 
+   *
    * syntax:  `th { font-weight: bold; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#font-weight-the-font-weight-property
    *
    * values:
@@ -3952,13 +3952,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determine a grid item's size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. Shorthand for 'grid-row-start', 'grid-column-start', 'grid-row-end', and 'grid-column-end'..
-   * 
+   *
    * syntax:  `div { grid-area: span 3; }`
-   * 
+   *
    * restriction: identifier, integer
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-area
    *
    * values:
@@ -3994,13 +3994,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the size of implicitly created columns..
-   * 
+   *
    * syntax:  `div { grid-auto-columns: 100px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-auto-columns
    *
    * values:
@@ -4022,13 +4022,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid..
-   * 
+   *
    * syntax:  `div { grid-auto-flow: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-auto-flow
    *
    * values:
@@ -4048,13 +4048,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the size of implicitly created rows..
-   * 
+   *
    * syntax:  `div { grid-auto-rows: 100px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-auto-rows
    *
    * values:
@@ -4076,13 +4076,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand for 'grid-column-start' and 'grid-column-end'..
-   * 
+   *
    * syntax:  `#item1 { grid-column: span 2 / auto; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-column
    *
    * values:
@@ -4100,13 +4100,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determine a grid item's size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement..
-   * 
+   *
    * syntax:  `#item1 { grid-column-end: span 2; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-column-end
    *
    * values:
@@ -4142,13 +4142,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determine a grid item's size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement..
-   * 
+   *
    * syntax:  `#item1 { grid-column-start: span 2; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-column-start
    *
    * values:
@@ -4184,13 +4184,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand for 'grid-row-start' and 'grid-row-end'..
-   * 
+   *
    * syntax:  `#item1 { grid-row: span 2 / auto; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-row
    *
    * values:
@@ -4208,13 +4208,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determine a grid item's size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement..
-   * 
+   *
    * syntax:  `#item1 { grid-row-end: span 2; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-row-end
    *
    * values:
@@ -4250,13 +4250,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determine a grid item's size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement..
-   * 
+   *
    * syntax:  `#item1 { grid-row-start: span 2; }`
-   * 
+   *
    * restriction: identifier, integer, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-row-start
    *
    * values:
@@ -4274,13 +4274,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand for setting grid-template-columns, grid-template-rows, and grid-template-areas in a single declaration..
-   * 
+   *
    * syntax:  `#item1 { grid-template: auto 1fr auto / auto 1fr; }`
-   * 
+   *
    * restriction: identifier, length, percentage, string, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-template
    *
    * values:
@@ -4326,13 +4326,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * specifies, as a space-separated track list, the line names and track sizing functions of the grid..
-   * 
+   *
    * syntax:  `#item1 { grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr); }`
-   * 
+   *
    * restriction: identifier, length, percentage, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-template-columns
    *
    * values:
@@ -4360,13 +4360,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * specifies, as a space-separated track list, the line names and track sizing functions of the grid..
-   * 
+   *
    * syntax:  `#item1 { grid-template-rows: 100px 1fr max-content minmax(min-content, 1fr); }`
-   * 
+   *
    * restriction: identifier, length, percentage, string, enum
-   * 
+   *
    * browsers: FF52,C57,S10.1,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-grid-1/#propdef-grid-template-rows
    *
    * values:
@@ -4394,13 +4394,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the height of the content area, padding area or border area (depending on 'box-sizing') of certain boxes..
-   * 
+   *
    * syntax:  `footer { height: 100px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#height
    *
    * values:
@@ -4424,13 +4424,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls whether hyphenation is allowed to create more break opportunities within a line of text..
-   * 
+   *
    * syntax:  `div { hyphens: manual; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C55,FF43,O44
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-3/#hyphens-property
    *
    * values:
@@ -4450,13 +4450,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies an orthogonal rotation to be applied to an image before it is laid out..
-   * 
+   *
    * syntax:  `img.ninety { image-orientation: 90deg; }`
-   * 
+   *
    * restriction: angle
-   * 
+   *
    * browsers: FF26
-   * 
+   *
    * ref: http://www.w3.org/TR/css4-images/#image-orientation
    *
    * values:
@@ -4474,13 +4474,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Provides a hint to the user-agent about what aspects of an image are most important to preserve when the image is scaled, to aid the user-agent in the choice of an appropriate scaling algorithm..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,FF3.6,O11.6,S
-   * 
+   *
    * ref: https://drafts.csswg.org/css-images-3/#the-image-rendering
    *
    * values:
@@ -4506,13 +4506,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the state of the input method editor for text fields..
-   * 
+   *
    * syntax:  `body { ime-mode: active; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,FF3,IE5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#ime-mode
    *
    * values:
@@ -4554,13 +4554,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In CSS setting to 'isolate' will turn the element into a stacking context. In SVG, it defines whether an element is isolated or not..
-   * 
+   *
    * syntax:  `div { isolation: isolate; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,FF,O,S
-   * 
+   *
    * ref: http://www.w3.org/TR/compositing-1/#isolation
    *
    * values:
@@ -4578,13 +4578,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Aligns flex items along the main axis of the current line of the flex container..
-   * 
+   *
    * syntax:  `p { justify-content: flex-start; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C29,FF22,IE11,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-flexbox/#align-content
    *
    * values:
@@ -4702,13 +4702,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies what set of line breaking restrictions are in effect within the element..
-   * 
+   *
    * syntax:  `p { line-break: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,IE5.5,C58,O45,S
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#line-break0
    *
    * values:
@@ -4750,13 +4750,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand for setting 'list-style-type', 'list-style-position' and 'list-style-image'.
-   * 
+   *
    * syntax:  `ul { list-style: square url('square.png');}`
-   * 
+   *
    * restriction: image, enum, url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-lists/#list-style
    *
    * values:
@@ -4828,13 +4828,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the position of the '::marker' pseudo-element's box in the list item..
-   * 
+   *
    * syntax:  `ul { list-style-position: inside; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-lists/#list-style-position
    *
    * values:
@@ -4852,13 +4852,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Used to construct the default contents of a list item's marker.
-   * 
+   *
    * syntax:  `<glyph> | <algorithmic> | <numeric> | <alphabetic> | <symbolic> | <non-repeating> | normal | none`
-   * 
+   *
    * restriction: enum, string
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-lists/#list-style-type
    *
    * values:
@@ -4964,13 +4964,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..
-   * 
+   *
    * syntax:  `div { margin: 4px 7px 2px 4px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#margin1
    *
    * values:
@@ -5132,13 +5132,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the marker symbol that shall be used for all points on the sets the value for all vertices on the given 'path' element or basic shape..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#MarkerProperty
    *
    * values:
@@ -5158,13 +5158,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the marker that will be drawn at the last vertices of the given markable element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties
    *
    * values:
@@ -5184,13 +5184,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the marker that will be drawn at all vertices except the first and last..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties
    *
    * values:
@@ -5210,13 +5210,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the marker that will be drawn at the first vertices of the given markable element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#VertexMarkerProperties
    *
    * values:
@@ -5236,13 +5236,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Sets the mask layer image of an element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, image, enum
-   * 
+   *
    * browsers: E,FF53
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-image
    *
    * values:
@@ -5260,13 +5260,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Indicates whether the mask layer image is treated as luminance mask or alpha mask..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, image, enum
-   * 
+   *
    * browsers: FF53
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-mode
    *
    * values:
@@ -5340,13 +5340,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the size of the mask layer images..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: length, percentage, enum
-   * 
+   *
    * browsers: F53
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-size
    *
    * values:
@@ -5366,13 +5366,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether the content of the <mask> element is treated as as luminance mask or alpha mask..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C24,FF35,O15,S7
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-type
    *
    * values:
@@ -5408,13 +5408,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows authors to constrain content height to a certain range..
-   * 
+   *
    * syntax:  `footer { max-height: 300px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: E,C,FF1,IE7,O7,S1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#max-height
    *
    * values:
@@ -5456,13 +5456,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows authors to constrain content width to a certain range..
-   * 
+   *
    * syntax:  `footer { max-width: 300px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: E,C,FF1,IE7,O7,S1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#max-width
    *
    * values:
@@ -5504,13 +5504,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows authors to constrain content height to a certain range..
-   * 
+   *
    * syntax:  `footer { min-height: 300px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: E,C,FF1,IE7,O7,S1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#min-height
    *
    * values:
@@ -5552,13 +5552,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Allows authors to constrain content width to a certain range..
-   * 
+   *
    * syntax:  `footer { min-width: 300px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: E,C,FF1,IE7,O7,S1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#min-width
    *
    * values:
@@ -5582,13 +5582,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the formula that must be used to mix the colors with the backdrop..
-   * 
+   *
    * syntax:  `div { mix-blend-mode: saturation; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C41,FF32,O29,S7.1
-   * 
+   *
    * ref: http://www.w3.org/TR/compositing-1/#propdef-mix-blend-mode
    *
    * values:
@@ -5634,13 +5634,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting 'motion-path', 'motion-offset' and 'motion-rotation'..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, length, percentage, angle, shape, geometry-box, enum
-   * 
+   *
    * browsers: C46,O33
-   * 
+   *
    * ref: http://www.w3.org/TR/motion-1/#propdef-motion
    *
    * values:
@@ -5682,13 +5682,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the motion path the element gets positioned at..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, shape, geometry-box, enum
-   * 
+   *
    * browsers: C46,O33
-   * 
+   *
    * ref: http://www.w3.org/TR/motion-1/#propdef-motion-path
    *
    * values:
@@ -5708,13 +5708,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the direction of the element while positioning along the motion path..
-   * 
+   *
    * syntax:  `div { motion-rotation: 90%; }`
-   * 
+   *
    * restriction: angle
-   * 
+   *
    * browsers: C46,O33
-   * 
+   *
    * ref: http://www.w3.org/TR/motion-1/#propdef-motion-rotation
    *
    * values:
@@ -5732,13 +5732,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines six of the animation properties into a single property..
-   * 
+   *
    * syntax:  `div { -moz-animation: movearound 4s ease 3 normal; }`
-   * 
+   *
    * restriction: time, enum, timing-function, identifier, number
-   * 
+   *
    * browsers: FF9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation
    *
    * values:
@@ -5788,13 +5788,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether or not the animation should play in reverse on alternate cycles..
-   * 
+   *
    * syntax:  `div { -moz-animation-direction: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-direction
    *
    * values:
@@ -5870,13 +5870,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether the animation is running or paused..
-   * 
+   *
    * syntax:  `div { -moz-animation-play-state: running; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-play-state
    *
    * values:
@@ -5912,13 +5912,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Used in Gecko (Firefox) to display an element using a platform-native styling based on the operating system's theme..
-   * 
+   *
    * syntax:  `.example { -moz-appearance: toolbarbutton; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-appearance
    *
    * values:
@@ -6068,13 +6068,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer..
-   * 
+   *
    * syntax:  `div { -moz-backface-visibility: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF10
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-3d-transforms/#backface-visibility
    *
    * values:
@@ -6110,13 +6110,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In Gecko-based applications like Firefox, the -moz-background-inline-policy CSS property specifies how the background image of an inline element is determined when the content of the inline element wraps onto multiple lines. The choice of position has significant effects on repetition..
-   * 
+   *
    * syntax:  `div { -moz-background-inline-policy: bounding-box; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-background-inline-policy
    *
    * values:
@@ -6172,13 +6172,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values..
-   * 
+   *
    * syntax:  `td { -moz-border-image: url(border.png) 30 30 round;}`
-   * 
+   *
    * restriction: length, percentage, number, url, enum
-   * 
+   *
    * browsers: FF3.6
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#border-image
    *
    * values:
@@ -6262,13 +6262,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how a XUL box aligns its contents across (perpendicular to) the direction of its layout. The effect of this is only visible if there is extra space in the box..
-   * 
+   *
    * syntax:  `div { -moz-box-align: end; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-box-align
    *
    * values:
@@ -6292,13 +6292,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge)..
-   * 
+   *
    * syntax:  `div { -moz-box-direction: reverse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-box-direction
    *
    * values:
@@ -6370,13 +6370,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In Mozilla applications, -moz-box-orient specifies whether a box lays out its contents horizontally or vertically..
-   * 
+   *
    * syntax:  `div { -moz-box-orient: vertical; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-box-orient
    *
    * values:
@@ -6398,13 +6398,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how a box packs its contents in the direction of its layout. The effect of this is only visible if there is extra space in the box..
-   * 
+   *
    * syntax:  `div { -moz-box-pack: end; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-box-pack
    *
    * values:
@@ -6426,13 +6426,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Box Model addition in CSS3..
-   * 
+   *
    * syntax:  `div { -moz-box-sizing: content-box; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#box-sizing
    *
    * values:
@@ -6596,13 +6596,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case..
-   * 
+   *
    * syntax:  `body { -moz-font-feature-settings: 'hwid'; }`
-   * 
+   *
    * restriction: string, integer
-   * 
+   *
    * browsers: FF4
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-feature-settings
    *
    * values:
@@ -6640,13 +6640,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls whether hyphenation is allowed to create more break opportunities within a line of text..
-   * 
+   *
    * syntax:  `div { -moz-hyphens: manual; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#hyphens0
    *
    * values:
@@ -6702,13 +6702,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'..
-   * 
+   *
    * syntax:  `div { -moz-text-align-last: right; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF12
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#text-align-last0
    *
    * values:
@@ -6754,13 +6754,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies what line decorations, if any, are added to the element..
-   * 
+   *
    * syntax:  `div { -moz-text-decoration-line: underline; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF6
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-decor-3/#text-decoration-line
    *
    * values:
@@ -6782,13 +6782,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the line style for underline, line-through and overline text decoration..
-   * 
+   *
    * syntax:  `div { -moz-text-decoration-style: solid; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF6
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-decor-3/#text-decoration-style
    *
    * values:
@@ -6814,13 +6814,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies a size adjustment for displaying text content in mobile browsers..
-   * 
+   *
    * syntax:  `body { -moz-text-size-adjust: 150%; }`
-   * 
+   *
    * restriction: enum, percentage
-   * 
+   *
    * browsers: FF
-   * 
+   *
    * ref: http://dev.w3.org/csswg/css-size-adjust/
    *
    * values:
@@ -6838,13 +6838,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG..
-   * 
+   *
    * syntax:  `div { -moz-transform: rotate(-90deg); }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF3.5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-2d-transforms/#transform-property
    *
    * values:
@@ -6920,13 +6920,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines four of the transition properties into a single property..
-   * 
+   *
    * syntax:  `div { -moz-transition: background-color linear 1s; }`
-   * 
+   *
    * restriction: time, property, timing-function, enum
-   * 
+   *
    * browsers: FF4
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition
    *
    * values:
@@ -6980,13 +6980,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the name of the CSS property to which the transition is applied..
-   * 
+   *
    * syntax:  `div { -moz-transition-property: background-color; }`
-   * 
+   *
    * restriction: property
-   * 
+   *
    * browsers: FF4
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition-property
    *
    * values:
@@ -7022,13 +7022,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Used to indicate whether the element can have focus..
-   * 
+   *
    * syntax:  `div { -moz-user-focus: ignore; }`
-   * 
-   * restriction: 
-   * 
+   *
+   * restriction:
+   *
    * browsers: FF1.5
-   * 
+   *
    * ref: https://developer.mozilla.org/en-US/docs/CSS/-moz-user-focus
    *
    * values:
@@ -7046,13 +7046,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the appearance of selection..
-   * 
+   *
    * syntax:  `div { -moz-user-select: text; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF1.5
-   * 
+   *
    * ref: https://developer.mozilla.org/en/CSS/-moz-user-select
    *
    * values:
@@ -7100,13 +7100,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how the contents of a replaced element should be scaled relative to the box established by its used height and width..
-   * 
+   *
    * syntax:  `p { object-fit: cover; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C32,FF36,O19,S7.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css-images/#object-fit
    *
    * values:
@@ -7274,13 +7274,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for 'outline-style', 'outline-width', and 'outline-color'..
-   * 
+   *
    * syntax:  `header { outline: 5px solid red;}`
-   * 
+   *
    * restriction: length, line-width, line-style, color, enum
-   * 
+   *
    * browsers: E,C,FF1.5,IE8,O8,S1.2
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#outline0
    *
    * values:
@@ -7370,13 +7370,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand for setting 'overflow-x' and 'overflow-y'..
-   * 
+   *
    * syntax:  `div { overflow: hidden auto; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-overflow-3/#overflow
    *
    * values:
@@ -7402,13 +7402,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box..
-   * 
+   *
    * syntax:  `div { overflow-wrap: break-word; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C23,O12.1,S6.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#overflow-wrap0
    *
    * values:
@@ -7428,13 +7428,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the handling of overflow in the horizontal direction..
-   * 
+   *
    * syntax:  `div { overflow-x: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C,FF1.5,IE5,O9.5,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#overflow-x
    *
    * values:
@@ -7458,13 +7458,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the handling of overflow in the vertical direction..
-   * 
+   *
    * syntax:  `div { overflow-y: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C,FF1.5,IE5,O9.5,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#overflow-x
    *
    * values:
@@ -7668,13 +7668,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines rules for page breaks after an element..
-   * 
+   *
    * syntax:  `table { page-break-after: always; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-break/#page-break-properties
    *
    * values:
@@ -7702,13 +7702,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines rules for page breaks before an element..
-   * 
+   *
    * syntax:  `table { page-break-before: always; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-break/#page-break-properties
    *
    * values:
@@ -7732,13 +7732,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines rules for page breaks inside an element..
-   * 
+   *
    * syntax:  `table { page-break-inside: avoid; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,IE8,O7,S1.3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-break/#page-break-properties
    *
    * values:
@@ -7756,13 +7756,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the order that the three paint operations that shapes and text are rendered with: their fill, their stroke and any markers they might have..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C35,FF31,O22,S7.1
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#PaintOrderProperty
    *
    * values:
@@ -7820,13 +7820,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies under what circumstances a given element can be the target element for a pointer event..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/interact.html#PointerEventsProperty
    *
    * values:
@@ -7837,7 +7837,7 @@ export class Style extends BaseStyle<Style> {
 
    * none: The given element does not receive pointer events.
 
-   * painted: The given element can be the target element for pointer events when the pointer is over a "painted" area. 
+   * painted: The given element can be the target element for pointer events when the pointer is over a "painted" area.
 
    * stroke: The given element can be the target element for pointer events whenever the pointer is over the perimeter of the element.
 
@@ -7858,13 +7858,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { position: absolute; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-positioning/#propdef-position
    *
    * values:
@@ -7932,13 +7932,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * `@`counter-style descriptor. Defines the ranges over which the counter style is defined..
-   * 
+   *
    * syntax:  `@counter-style { range: 2 infinite, 8 834048; }`
-   * 
+   *
    * restriction: integer, enum
-   * 
+   *
    * browsers: FF33
-   * 
+   *
    * ref: http://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-range
    *
    * values:
@@ -7956,13 +7956,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether or not an element is resizable by the user, and if so, along which axis/axes..
-   * 
+   *
    * syntax:  `div { resize: both; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,FF4,O15,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#resize0
    *
    * values:
@@ -8006,13 +8006,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies how text is distributed within the various ruby boxes when their contents do not exactly fill their respective boxes..
-   * 
+   *
    * syntax:  `auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF10,IE5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ruby/#rubyalign
    *
    * values:
@@ -8046,13 +8046,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base..
-   * 
+   *
    * syntax:  `auto | start | end | none`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF10,IE5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ruby/#rubyover
    *
    * values:
@@ -8074,13 +8074,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Used by the parent of elements with display: ruby-text to control the position of the ruby text with respect to its base..
-   * 
+   *
    * syntax:  `before | after | right`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF10,IE5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ruby/#ruby-position
    *
    * values:
@@ -8102,13 +8102,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether, and on which side, ruby text is allowed to partially overhang any adjacent text in addition to its own base, when the ruby text is wider than the ruby base..
-   * 
+   *
    * syntax:  `attr(x) | none`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF10
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ruby/#rubyspan
    *
    * values:
@@ -8126,13 +8126,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF36
-   * 
+   *
    * ref: http://www.w3.org/TR/cssom-view/#scroll-behavior
    *
    * values:
@@ -8150,13 +8150,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the x and y coordinate within the element which will align with the nearest ancestor scroll container's snap-destination for the respective axis..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: position, length, percentage, enum
-   * 
+   *
    * browsers: FF39
-   * 
+   *
    * ref: http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-coordinate
    *
    * values:
@@ -8194,13 +8194,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the positioning of snap points along the x axis of the scroll container it is applied to..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF39
-   * 
+   *
    * ref: http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-points-x
    *
    * values:
@@ -8218,13 +8218,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the positioning of snap points along the y axis of the scroll container it is applied to..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF39
-   * 
+   *
    * ref: http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-points-y
    *
    * values:
@@ -8242,13 +8242,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines how strictly snap points are enforced on the scroll container..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF39
-   * 
+   *
    * ref: http://www.w3.org/TR/css-snappoints-1/#propdef-scroll-snap-type
    *
    * values:
@@ -8304,13 +8304,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies an orthogonal rotation to be applied to an image before it is laid out..
-   * 
+   *
    * syntax:  `div { shape-outside: margin-box; }`
-   * 
+   *
    * restriction: image, box, shape, enum
-   * 
+   *
    * browsers: C37,O24
-   * 
+   *
    * ref: http://www.w3.org/TR/css-shapes-1/#shape-outside-property
    *
    * values:
@@ -8346,13 +8346,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * `@`font-face descriptor. Specifies the resource containing font data. It is required, whether the font is downloadable or locally installed..
-   * 
+   *
    * syntax:  `src: url(font.woff) format('woff');`
-   * 
+   *
    * restriction: enum, url, identifier
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#src-desc
    *
    * values:
@@ -8408,13 +8408,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Paints along the outline of the given graphical element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: color, enum, url
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#StrokeProperty
    *
    * values:
@@ -8476,13 +8476,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the shape to be used at the end of open subpaths when they are stroked..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#StrokeLinecapProperty
    *
    * values:
@@ -8502,13 +8502,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the shape to be used at the corners of paths or basic shapes when they are stroked..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#StrokeLinejoinProperty
    *
    * values:
@@ -8604,13 +8604,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * `@`counter-style descriptor. Specifies which algorithm will be used to construct the counter's representation based on the counter value..
-   * 
+   *
    * syntax:  `@counter-style triangle { system: cyclic; }`
-   * 
+   *
    * restriction: enum, integer
-   * 
+   *
    * browsers: FF33
-   * 
+   *
    * ref: http://www.w3.org/TR/css-counter-styles-3/#descdef-counter-style-system
    *
    * values:
@@ -8656,13 +8656,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the algorithm used to lay out the table cells, rows, and columns..
-   * 
+   *
    * syntax:  `table { table-layout: fixed; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/CSS2/tables.html#width-layout
    *
    * values:
@@ -8698,13 +8698,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes how inline contents of a block are horizontally aligned if the contents do not completely fill the line box..
-   * 
+   *
    * syntax:  `h2 { text-align: center; }`
-   * 
+   *
    * restriction: string
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#text-align0
    *
    * values:
@@ -8732,13 +8732,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes how the last line of a block or a line right before a forced line break is aligned when 'text-align' is set to 'justify'..
-   * 
+   *
    * syntax:  `div { text-align-last: right; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,FF12,IE5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#text-align-last0
    *
    * values:
@@ -8766,13 +8766,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Used to align (start-, middle- or end-alignment) a string of text relative to a given point..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/text.html#TextAnchorProperty
    *
    * values:
@@ -8792,13 +8792,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Decorations applied to font used for an element's text..
-   * 
+   *
    * syntax:  `a:visited { text-decoration: line-through; }`
-   * 
+   *
    * restriction: enum, color
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-decor-3/#text-decoration-style
    *
    * values:
@@ -8848,13 +8848,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies what line decorations, if any, are added to the element..
-   * 
+   *
    * syntax:  `div { text-decoration-line: underline; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF36
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-decor-3/#text-decoration-line
    *
    * values:
@@ -8876,13 +8876,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the line style for underline, line-through and overline text decoration..
-   * 
+   *
    * syntax:  `div { text-decoration-style: solid; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: FF36
-   * 
+   *
    * ref: http://www.w3.org/TR/css-text-decor-3/#text-decoration-style
    *
    * values:
@@ -8908,13 +8908,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the indentation applied to lines of inline content in a block. The indentation only affects the first line of inline content in the block unless the 'hanging' keyword is specified, in which case it affects all lines except the first..
-   * 
+   *
    * syntax:  `li { text-indent: 5px; }`
-   * 
+   *
    * restriction: percentage, length
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#text-indent0
    *
    * values:
@@ -8932,13 +8932,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the orientation of text within a line..
-   * 
+   *
    * syntax:  `span { text-orientation: mixed; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,O15,S5.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css-writing-modes-3/#text-orientation
    *
    * values:
@@ -8964,13 +8964,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Text can overflow for example when it is prevented from wrapping..
-   * 
+   *
    * syntax:  `span { text-overflow: ellipsis; }`
-   * 
+   *
    * restriction: enum, string
-   * 
+   *
    * browsers: E,C,FF9,IE5.5,O11.6,S2
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#text-overflow0
    *
    * values:
@@ -8988,13 +8988,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The 'text-rendering' property provides these hints..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,FF3,O9,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/SVG2/painting.html#TextRenderingProperty
    *
    * values:
@@ -9034,13 +9034,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls capitalization effects of an element's text..
-   * 
+   *
    * syntax:  `h1 { text-transform: capitalize; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#text-transform0
    *
    * values:
@@ -9082,13 +9082,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether touch input may trigger default behavior supplied by user agent..
-   * 
+   *
    * syntax:  `div { touch-action: pan-x; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C36,IE11,O23
-   * 
+   *
    * ref: http://www.w3.org/TR/pointerevents/#the-touch-action-css-property
    *
    * values:
@@ -9120,13 +9120,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG..
-   * 
+   *
    * syntax:  `div { transform: rotate(-90deg); }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C36,FF16,IE10,O12.1,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transforms/#transform-property
    *
    * values:
@@ -9202,13 +9202,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines how nested elements are rendered in 3D space..
-   * 
+   *
    * syntax:  `div { transform-style: flat; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C36,FF16,IE10,O23,S9
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transforms/#propdef-transform-style
    *
    * values:
@@ -9226,13 +9226,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines four of the transition properties into a single property..
-   * 
+   *
    * syntax:  `div { transition: background-color linear 1s; }`
-   * 
+   *
    * restriction: time, property, timing-function, enum
-   * 
+   *
    * browsers: E,FF16,IE10,O12.5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition
    *
    * values:
@@ -9286,13 +9286,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the name of the CSS property to which the transition is applied..
-   * 
+   *
    * syntax:  `div { transition-property: background-color; }`
-   * 
+   *
    * restriction: property
-   * 
+   *
    * browsers: E,FF16,IE10,O12.5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition-property
    *
    * values:
@@ -9328,13 +9328,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * The level of embedding with respect to the bidirectional algorithm..
-   * 
+   *
    * syntax:  `p { unicode-bidi: embed; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-writing-modes-3/#unicode-bidi
    *
    * values:
@@ -9360,13 +9360,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * `@`font-face descriptor. Defines the set of Unicode codepoints that may be supported by the font face for which it is declared..
-   * 
+   *
    * syntax:  `@font-face { unicode-range: U+26; }`
-   * 
+   *
    * restriction: unicode-range
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#unicode-range-desc
    *
    * values:
@@ -9534,13 +9534,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the appearance of selection..
-   * 
+   *
    * syntax:  `div { user-select: text; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css-ui-4/#propdef-user-select
    *
    * values:
@@ -9564,13 +9564,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Affects the vertical positioning of the inline boxes generated by an inline-level element inside a line box..
-   * 
+   *
    * syntax:  `div { vertical-align: middle; }`
-   * 
+   *
    * restriction: percentage, length
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-linebox/#vertical-align
    *
    * values:
@@ -9612,13 +9612,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether)..
-   * 
+   *
    * syntax:  `img { visibility: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#visibility
    *
    * values:
@@ -9638,13 +9638,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines six of the animation properties into a single property..
-   * 
+   *
    * syntax:  `div { -webkit-animation: movearound 4s ease 3 normal; }`
-   * 
+   *
    * restriction: time, enum, timing-function, identifier, number
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation
    *
    * values:
@@ -9694,13 +9694,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether or not the animation should play in reverse on alternate cycles..
-   * 
+   *
    * syntax:  `div { -webkit-animation-direction: normal; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-direction
    *
    * values:
@@ -9740,13 +9740,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines what values are applied by the animation outside the time it is executing..
-   * 
+   *
    * syntax:  `div { -webkit-animation-fill-mode: forwards; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-fill-mode-property
    *
    * values:
@@ -9806,13 +9806,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines whether the animation is running or paused..
-   * 
+   *
    * syntax:  `div { -webkit-animation-play-state: running; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-animations/#animation-play-state
    *
    * values:
@@ -9850,13 +9850,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Changes the appearance of buttons and other controls to resemble native controls..
-   * 
+   *
    * syntax:  `h3 { -webkit-appearance: button; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-appearance
    *
    * values:
@@ -9958,13 +9958,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Applies a filter effect where the first filter in the list takes the element's background image as the input image..
-   * 
+   *
    * syntax:  `div { backdrop-filter: blur(2px); }`
-   * 
+   *
    * restriction: enum, url
-   * 
+   *
    * browsers: S9
-   * 
+   *
    * ref: https://drafts.fxtf.org/filters-2/#propdef-backdrop-filter
    *
    * values:
@@ -9981,7 +9981,7 @@ export class Style extends BaseStyle<Style> {
 
    * grayscale(): Converts the input image to grayscale.
 
-   * hue-rotate(): Applies a hue rotation on the input image. 
+   * hue-rotate(): Applies a hue rotation on the input image.
 
    * invert(): Inverts the samples in the input image.
 
@@ -10002,13 +10002,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether or not the 'back' side of a transformed element is visible when facing the viewer. With an identity transform, the front side of an element faces the viewer..
-   * 
+   *
    * syntax:  `div { -webkit-backface-visibility: hidden; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-3d-transforms/#backface-visibility
    *
    * values:
@@ -10044,13 +10044,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { -webkit-background-composite: padding; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: undefined
    *
    * values:
@@ -10086,13 +10086,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property for setting 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset' and 'border-image-repeat'. Omitted values are set to their initial values..
-   * 
+   *
    * syntax:  `td { -webkit-border-image: url(border.png) 30 30 round;}`
-   * 
+   *
    * restriction: length, percentage, number, url, enum
-   * 
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-background/#border-image
    *
    * values:
@@ -10122,13 +10122,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the alignment of nested elements within an outer flexible box element..
-   * 
+   *
    * syntax:  `div { -webkit-box-align: end; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-box-align
    *
    * values:
@@ -10152,13 +10152,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In webkit applications, -webkit-box-direction specifies whether a box lays out its contents normally (from the top or left edge), or in reverse (from the bottom or right edge)..
-   * 
+   *
    * syntax:  `div { -webkit-box-direction: reverse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-box-direction
    *
    * values:
@@ -10230,13 +10230,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * In webkit applications, -webkit-box-orient specifies whether a box lays out its contents horizontally or vertically..
-   * 
+   *
    * syntax:  `div { -webkit-box-orient: vertical; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-box-orient
    *
    * values:
@@ -10258,13 +10258,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies alignment of child elements within the current element in the direction of orientation..
-   * 
+   *
    * syntax:  `div { -webkit-box-pack: end; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-box-pack
    *
    * values:
@@ -10286,13 +10286,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines a reflection of a border box..
-   * 
+   *
    * syntax:  `div { -webkit-box-reflect: below 5px; }`
-   * 
-   * restriction: 
-   * 
+   *
+   * restriction:
+   *
    * browsers: C,S4
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-box-reflect
    *
    * values:
@@ -10314,13 +10314,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Box Model addition in CSS3..
-   * 
+   *
    * syntax:  `div { -webkit-box-sizing: content-box; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-ui/#box-sizing
    *
    * values:
@@ -10338,13 +10338,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior before the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-break-after: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S7
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10380,13 +10380,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior before the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-break-before: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S7
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10422,13 +10422,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior inside the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-break-inside: avoid-column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S7
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10452,13 +10452,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior before the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-column-break-after: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10494,13 +10494,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior before the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-column-break-before: column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10536,13 +10536,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior inside the generated box..
-   * 
+   *
    * syntax:  `h2 { -webkit-column-break-inside: avoid-column; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-breaks
    *
    * values:
@@ -10692,13 +10692,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Describes the page/column break behavior after the generated box..
-   * 
+   *
    * syntax:  `article { -webkit-column-span: all; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-multicol/#column-span0
    *
    * values:
@@ -10734,13 +10734,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Processes an element's rendering before it is displayed in the document, by applying one or more filter effects..
-   * 
+   *
    * syntax:  `img { -webkit-filter: blur(3px); }`
-   * 
+   *
    * restriction: enum, url
-   * 
+   *
    * browsers: C18,O15,S6
-   * 
+   *
    * ref: http://www.w3.org/TR/filter-effects/#propdef-filter
    *
    * values:
@@ -10757,7 +10757,7 @@ export class Style extends BaseStyle<Style> {
 
    * grayscale(): Converts the input image to grayscale.
 
-   * hue-rotate(): Applies a hue rotation on the input image. 
+   * hue-rotate(): Applies a hue rotation on the input image.
 
    * invert(): Inverts the samples in the input image.
 
@@ -10814,13 +10814,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * This property provides low-level control over OpenType font features. It is intended as a way of providing access to font features that are not widely used but are needed for a particular use case..
-   * 
+   *
    * syntax:  `body { -webkit-font-feature-settings: 'hwid'; }`
-   * 
+   *
    * restriction: string, integer
-   * 
+   *
    * browsers: C16
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-fonts/#propdef-font-feature-settings
    *
    * values:
@@ -10858,13 +10858,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls whether hyphenation is allowed to create more break opportunities within a line of text..
-   * 
+   *
    * syntax:  `div { -webkit-hyphens: manual; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S5.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#hyphens0
    *
    * values:
@@ -10884,13 +10884,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies line-breaking rules for CJK (Chinese, Japanese, and Korean) text..
-   * 
+   *
    * syntax:  `p { -webkit-line-break: normal; }`
-   * 
-   * restriction: 
-   * 
+   *
+   * restriction:
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-line-break
    *
    * values:
@@ -10908,13 +10908,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { -webkit-margin-bottom-collapse: collapse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: undefined
    *
    * values:
@@ -10934,13 +10934,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { -webkit-margin-collapse: collapse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: undefined
    *
    * values:
@@ -10978,13 +10978,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { -webkit-margin-top-collapse: collapse; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: undefined
    *
    * values:
@@ -11022,13 +11022,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Sets the mask layer image of an element..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: url, image, enum
-   * 
+   *
    * browsers: C,O15,S4
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-image
    *
    * values:
@@ -11082,13 +11082,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the size of the mask layer images..
-   * 
+   *
    * syntax:  ` `
-   * 
+   *
    * restriction: length, percentage, enum
-   * 
+   *
    * browsers: C,O15,S4
-   * 
+   *
    * ref: http://www.w3.org/TR/css-masking-1/#the-mask-size
    *
    * values:
@@ -11108,13 +11108,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines the behavior of nonbreaking spaces within text..
-   * 
+   *
    * syntax:  `p { -webkit-nbsp-mode: space; }`
-   * 
-   * restriction: 
-   * 
+   *
+   * restriction:
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-nbsp-mode
    *
    * values:
@@ -11132,13 +11132,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether to use native-style scrolling in an overflow:scroll element..
-   * 
+   *
    * syntax:  `div { -webkit-overflow-scrolling: touch; }`
-   * 
-   * restriction: 
-   * 
+   *
+   * restriction:
+   *
    * browsers: C,S5
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-nbsp-mode
    *
    * values:
@@ -11210,13 +11210,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * The 'region-fragment' property controls the behavior of the last region associated with a named flow..
-   * 
+   *
    * syntax:  `article { -webkit-region-fragment: break; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S7
-   * 
+   *
    * ref: http://dev.w3.org/csswg/css-regions/#region-fragment
    *
    * values:
@@ -11270,13 +11270,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies a size adjustment for displaying text content in mobile browsers..
-   * 
+   *
    * syntax:  `div { -webkit-text-size-adjust: 60%; }`
-   * 
+   *
    * restriction: percentage
-   * 
+   *
    * browsers: E,C,S3
-   * 
+   *
    * ref: https://drafts.csswg.org/css-size-adjust/#text-size-adjust
    *
    * values:
@@ -11366,13 +11366,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * A two-dimensional transformation is applied to an element through the 'transform' property. This property contains a list of transform functions similar to those allowed by SVG..
-   * 
+   *
    * syntax:  `div { -webkit-transform: rotate(-90deg); }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,O12,S3.1
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-2d-transforms/#transform-property
    *
    * values:
@@ -11502,13 +11502,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Defines how nested elements are rendered in 3D space..
-   * 
+   *
    * syntax:  `div { -webkit-transform-style: flat; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S4
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-3d-transforms/#transform-origin
    *
    * values:
@@ -11526,13 +11526,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Shorthand property combines four of the transition properties into a single property..
-   * 
+   *
    * syntax:  `div { -webkit-transition: background-color linear 1s; }`
-   * 
+   *
    * restriction: time, property, timing-function, enum
-   * 
+   *
    * browsers: C,O12,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition
    *
    * values:
@@ -11586,13 +11586,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the name of the CSS property to which the transition is applied..
-   * 
+   *
    * syntax:  `div { -webkit-transition-property: background-color; }`
-   * 
+   *
    * restriction: property
-   * 
+   *
    * browsers: C,O12,S5
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-transitions/#transition-property
    *
    * values:
@@ -11630,13 +11630,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * undefined.
-   * 
+   *
    * syntax:  `div { -webkit-user-drag: element; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: S3
-   * 
+   *
    * ref: undefined
    *
    * values:
@@ -11656,13 +11656,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Determines whether a user can edit the content of an element..
-   * 
+   *
    * syntax:  `div { -webkit-user-modify: read-only; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-user-modify
    *
    * values:
@@ -11682,13 +11682,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Controls the appearance of selection..
-   * 
+   *
    * syntax:  `div { -webkit-user-select: text; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: C,S3
-   * 
+   *
    * ref: http://css-infos.net/property/-webkit-user-select
    *
    * values:
@@ -11726,13 +11726,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies the width of the content area, padding area or border area (depending on 'box-sizing') of certain boxes..
-   * 
+   *
    * syntax:  `header { width: 200px; }`
-   * 
+   *
    * restriction: length, percentage
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-box/#width
    *
    * values:
@@ -11756,13 +11756,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Provides a rendering hint to the user agent, stating what kinds of changes the author expects to perform on the element..
-   * 
+   *
    * syntax:  `body { will-change: scroll-position; }`
-   * 
+   *
    * restriction: enum, identifier
-   * 
+   *
    * browsers: C36,FF36,O24
-   * 
+   *
    * ref: http://www.w3.org/TR/css-will-change/
    *
    * values:
@@ -11782,13 +11782,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies line break opportunities for non-CJK scripts..
-   * 
+   *
    * syntax:  `p.album { word-break: break-all; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,C,FF15,IE5,S3
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#word-break0
    *
    * values:
@@ -11826,13 +11826,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * Specifies whether the UA may break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit..
-   * 
+   *
    * syntax:  `p { word-wrap: break-word; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: all
-   * 
+   *
    * ref: http://www.w3.org/TR/css3-text/#word-wrap0
    *
    * values:
@@ -11850,13 +11850,13 @@ export class Style extends BaseStyle<Style> {
 
   /**
    * This is a shorthand property for both 'direction' and 'block-progression'..
-   * 
+   *
    * syntax:  `span { writing-mode: lr-tb; }`
-   * 
+   *
    * restriction: enum
-   * 
+   *
    * browsers: E,FF41
-   * 
+   *
    * ref: http://www.w3.org/TR/css-writing-modes-3/#writing-mode
    *
    * values:
@@ -11914,35 +11914,2775 @@ export class Style extends BaseStyle<Style> {
     return this
   }
 
-  placeItems(value: string) {
-    this.set('place-items', value)
+  /**
+   * Sets the accent color of controls that expose an accent color.
+   *
+   * syntax:  `auto | <color>`
+   *
+   * restriction: color
+   *
+   * browsers: E93,FF92,C93,O79
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/accent-color
+   *
+   * values:
+   * ```md
+   * auto: Use the browser accent color.
+   * ```
+   * @param value -
+   */
+  accentColor(value: CSSProps['accentColor']) {
+    this.set('accent-color', value)
     return this
   }
 
-  inset(value: string) {
-    this.set('inset', value)
+  /**
+   * Controls how animation effects combine with underlying property values.
+   *
+   * syntax:  `<single-animation-composition>#`
+   *
+   * restriction: enum
+   *
+   * browsers: E112,FF115,S16,C112,O98
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/animation-composition
+   *
+   * values:
+   * ```md
+   * replace: Replace the underlying value.
+
+   * add: Add the effect to the underlying value.
+
+   * accumulate: Accumulate the effect with the underlying value.
+   * ```
+   * @param value -
+   */
+  animationComposition(value: CSSProps['animationComposition']) {
+    this.set('animation-composition', value)
     return this
   }
 
-  scrollMarginTop(value: string) {
-    this.set('scroll-margin-top', value)
+  /**
+   * Controls the native platform appearance of a user interface element.
+   *
+   * syntax:  `none | auto | <compat-auto> | <compat-special>`
+   *
+   * restriction: enum
+   *
+   * browsers: E84,FF80,S15.4,C84,O70
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/appearance
+   *
+   * values:
+   * ```md
+   * none: Remove the native appearance.
+
+   * auto: Use the native appearance for the element.
+   * ```
+   * @param value -
+   */
+  appearance(value: CSSProps['appearance']) {
+    this.set('appearance', value)
     return this
   }
 
-  appearance(value: CSSProps['webkitAppearance']) {
-    this.set('appearance', value)
+  /**
+   * Sets the preferred width-to-height ratio used during automatic sizing.
+   *
+   * syntax:  `auto || <ratio>`
+   *
+   * restriction: ratio
+   *
+   * browsers: E88,FF89,S15,C88,O74
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
+   *
+   * values:
+   * ```md
+   * auto: Use the intrinsic ratio when available.
+   * ```
+   * @param value -
+   */
+  aspectRatio(value: CSSProps['aspectRatio']) {
+    this.set('aspect-ratio', value)
     return this
   }
-  accentColor(value: CSSProps['accentColor']) {
-    this.set('accent-color', value)
+
+  /**
+   * Sets the horizontal starting position of each background image.
+   *
+   * syntax:  `[ center | [ [ left | right | x-start | x-end ]? <length-percentage>? ]! ]#`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E12,FF49,S1,C1,O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/background-position-x
+   *
+   * values:
+   * ```md
+   * left: Align with the left edge.
+
+   * center: Center horizontally.
+
+   * right: Align with the right edge.
+   * ```
+   * @param value -
+   */
+  backgroundPositionX(value: CSSProps['backgroundPositionX']) {
+    this.set('background-position-x', value)
     return this
   }
-  breakInside(value: CSSProps['webkitBreakInside']) {
-    this.set('break-inside', value)
+
+  /**
+   * Sets the vertical starting position of each background image.
+   *
+   * syntax:  `[ center | [ [ top | bottom | y-start | y-end ]? <length-percentage>? ]! ]#`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E12,FF49,S1,C1,O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/background-position-y
+   *
+   * values:
+   * ```md
+   * top: Align with the top edge.
+
+   * center: Center vertically.
+
+   * bottom: Align with the bottom edge.
+   * ```
+   * @param value -
+   */
+  backgroundPositionY(value: CSSProps['backgroundPositionY']) {
+    this.set('background-position-y', value)
     return this
   }
-  lineClamp(value: string) {
-    this.set('line-clamp', value)
+
+  /**
+   * Sets the width, style, and color of both logical block borders.
+   *
+   * syntax:  `<'border-block-start'>`
+   *
+   * restriction: length, color
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-block
+   *
+   * @param value -
+   */
+  borderBlock(value: CSSProps['borderBlock']) {
+    this.set('border-block', value)
+    return this
+  }
+
+  /**
+   * Sets the colors of the logical block-start and block-end borders.
+   *
+   * syntax:  `<'border-top-color'>{1,2}`
+   *
+   * restriction: color
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-block-color
+   *
+   * @param value -
+   */
+  borderBlockColor(value: CSSProps['borderBlockColor']) {
+    this.set('border-block-color', value)
+    return this
+  }
+
+  /**
+   * Sets the line styles of the logical block borders.
+   *
+   * syntax:  `<'border-top-style'>{1,2}`
+   *
+   * restriction: string
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-block-style
+   *
+   * @param value -
+   */
+  borderBlockStyle(value: CSSProps['borderBlockStyle']) {
+    this.set('border-block-style', value)
+    return this
+  }
+
+  /**
+   * Sets the widths of the logical block borders.
+   *
+   * syntax:  `<'border-top-width'>{1,2}`
+   *
+   * restriction: length
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-block-width
+   *
+   * @param value -
+   */
+  borderBlockWidth(value: CSSProps['borderBlockWidth']) {
+    this.set('border-block-width', value)
+    return this
+  }
+
+  /**
+   * Rounds the corner at the logical block-end and inline-end edges.
+   *
+   * syntax:  `<'border-top-left-radius'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E89,FF66,S15,C89,O75
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-end-end-radius
+   *
+   * @param value -
+   */
+  borderEndEndRadius(value: CSSProps['borderEndEndRadius']) {
+    this.set('border-end-end-radius', value)
+    return this
+  }
+
+  /**
+   * Rounds the corner at the logical block-end and inline-start edges.
+   *
+   * syntax:  `<'border-top-left-radius'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E89,FF66,S15,C89,O75
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-end-start-radius
+   *
+   * @param value -
+   */
+  borderEndStartRadius(value: CSSProps['borderEndStartRadius']) {
+    this.set('border-end-start-radius', value)
+    return this
+  }
+
+  /**
+   * Sets the width, style, and color of both logical inline borders.
+   *
+   * syntax:  `<'border-block-start'>`
+   *
+   * restriction: length, color
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-inline
+   *
+   * @param value -
+   */
+  borderInline(value: CSSProps['borderInline']) {
+    this.set('border-inline', value)
+    return this
+  }
+
+  /**
+   * Sets the colors of the logical inline-start and inline-end borders.
+   *
+   * syntax:  `<'border-top-color'>{1,2}`
+   *
+   * restriction: color
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-inline-color
+   *
+   * @param value -
+   */
+  borderInlineColor(value: CSSProps['borderInlineColor']) {
+    this.set('border-inline-color', value)
+    return this
+  }
+
+  /**
+   * Sets the line styles of the logical inline borders.
+   *
+   * syntax:  `<'border-top-style'>{1,2}`
+   *
+   * restriction: string
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-inline-style
+   *
+   * @param value -
+   */
+  borderInlineStyle(value: CSSProps['borderInlineStyle']) {
+    this.set('border-inline-style', value)
+    return this
+  }
+
+  /**
+   * Sets the widths of the logical inline borders.
+   *
+   * syntax:  `<'border-top-width'>{1,2}`
+   *
+   * restriction: length
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-inline-width
+   *
+   * @param value -
+   */
+  borderInlineWidth(value: CSSProps['borderInlineWidth']) {
+    this.set('border-inline-width', value)
+    return this
+  }
+
+  /**
+   * Rounds the corner at the logical block-start and inline-end edges.
+   *
+   * syntax:  `<'border-top-left-radius'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E89,FF66,S15,C89,O75
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-start-end-radius
+   *
+   * @param value -
+   */
+  borderStartEndRadius(value: CSSProps['borderStartEndRadius']) {
+    this.set('border-start-end-radius', value)
+    return this
+  }
+
+  /**
+   * Rounds the corner at the logical block-start and inline-start edges.
+   *
+   * syntax:  `<'border-top-left-radius'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E89,FF66,S15,C89,O75
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/border-start-start-radius
+   *
+   * @param value -
+   */
+  borderStartStartRadius(value: CSSProps['borderStartStartRadius']) {
+    this.set('border-start-start-radius', value)
+    return this
+  }
+
+  /**
+   * Controls page, column, or region breaks after the element.
+   *
+   * syntax:  `auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region`
+   *
+   * restriction: enum
+   *
+   * browsers: E12,FF65,S10,C50,O37
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/break-after
+   *
+   * values:
+   * ```md
+   * auto: Allow automatic breaks.
+
+   * avoid: Avoid a break.
+
+   * page: Force a page break.
+
+   * column: Force a column break.
+   * ```
+   * @param value -
+   */
+  breakAfter(value: CSSProps['breakAfter']) {
+    this.set('break-after', value)
+    return this
+  }
+
+  /**
+   * Controls page, column, or region breaks before the element.
+   *
+   * syntax:  `auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region`
+   *
+   * restriction: enum
+   *
+   * browsers: E12,FF65,S10,C50,O37
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/break-before
+   *
+   * values:
+   * ```md
+   * auto: Allow automatic breaks.
+
+   * avoid: Avoid a break.
+
+   * page: Force a page break.
+
+   * column: Force a column break.
+   * ```
+   * @param value -
+   */
+  breakBefore(value: CSSProps['breakBefore']) {
+    this.set('break-before', value)
+    return this
+  }
+
+  /**
+   * Controls whether page, column, or region breaks may occur inside the element.
+   *
+   * syntax:  `auto | avoid | avoid-page | avoid-column | avoid-region`
+   *
+   * restriction: enum
+   *
+   * browsers: E12,FF65,S10,C50,O37
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/break-inside
+   *
+   * values:
+   * ```md
+   * auto: Allow automatic breaks.
+
+   * avoid: Avoid breaks inside the element.
+
+   * avoid-page: Avoid page breaks inside the element.
+
+   * avoid-column: Avoid column breaks inside the element.
+   * ```
+   * @param value -
+   */
+  breakInside(value: CSSProps['breakInside']) {
+    this.set('break-inside', value)
+    return this
+  }
+
+  /**
+   * Declares the color schemes supported by the element for browser-provided rendering.
+   *
+   * syntax:  `normal | [ light | dark | <custom-ident> ]+ && only?`
+   *
+   * restriction: string
+   *
+   * browsers: E81,FF96,S13,C81,O68
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/color-scheme
+   *
+   * values:
+   * ```md
+   * normal: Use the browser default color scheme.
+
+   * light: Support a light color scheme.
+
+   * dark: Support a dark color scheme.
+   * ```
+   * @param value -
+   */
+  colorScheme(value: CSSProps['colorScheme']) {
+    this.set('color-scheme', value)
+    return this
+  }
+
+  /**
+   * Sets the color of the rule drawn between columns.
+   *
+   * syntax:  `<color>`
+   *
+   * restriction: color
+   *
+   * browsers: E12,FF52,S9,C50,O11.1
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/column-rule-color
+   *
+   * @param value -
+   */
+  columnRuleColor(value: CSSProps['columnRuleColor']) {
+    this.set('column-rule-color', value)
+    return this
+  }
+
+  /**
+   * Provides a placeholder block size when size containment hides the actual content size.
+   *
+   * syntax:  `auto? [ none | <length> ]`
+   *
+   * restriction: length
+   *
+   * browsers: E95,FF107,S17,C95,O81
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-block-size
+   *
+   * @param value -
+   */
+  containIntrinsicBlockSize(value: CSSProps['containIntrinsicBlockSize']) {
+    this.set('contain-intrinsic-block-size', value)
+    return this
+  }
+
+  /**
+   * Provides a placeholder height for size-contained content.
+   *
+   * syntax:  `auto? [ none | <length> ]`
+   *
+   * restriction: length
+   *
+   * browsers: E95,FF107,S17,C95,O81
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-height
+   *
+   * @param value -
+   */
+  containIntrinsicHeight(value: CSSProps['containIntrinsicHeight']) {
+    this.set('contain-intrinsic-height', value)
+    return this
+  }
+
+  /**
+   * Provides a placeholder inline size for size-contained content.
+   *
+   * syntax:  `auto? [ none | <length> ]`
+   *
+   * restriction: length
+   *
+   * browsers: E95,FF107,S17,C95,O81
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-inline-size
+   *
+   * @param value -
+   */
+  containIntrinsicInlineSize(value: CSSProps['containIntrinsicInlineSize']) {
+    this.set('contain-intrinsic-inline-size', value)
+    return this
+  }
+
+  /**
+   * Sets placeholder width and height values for size-contained content.
+   *
+   * syntax:  `[ auto? [ none | <length> ] ]{1,2}`
+   *
+   * restriction: length
+   *
+   * browsers: E83,FF107,S17,C83,O69
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size
+   *
+   * @param value -
+   */
+  containIntrinsicSize(value: CSSProps['containIntrinsicSize']) {
+    this.set('contain-intrinsic-size', value)
+    return this
+  }
+
+  /**
+   * Provides a placeholder width for size-contained content.
+   *
+   * syntax:  `auto? [ none | <length> ]`
+   *
+   * restriction: length
+   *
+   * browsers: E95,FF107,S17,C95,O81
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-width
+   *
+   * @param value -
+   */
+  containIntrinsicWidth(value: CSSProps['containIntrinsicWidth']) {
+    this.set('contain-intrinsic-width', value)
+    return this
+  }
+
+  /**
+   * Sets a query container name and containment type.
+   *
+   * syntax:  `<'container-name'> [ / <'container-type'> ]?`
+   *
+   * restriction: string
+   *
+   * browsers: E105,FF110,S16,C105,O91
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/container
+   *
+   * @param value -
+   */
+  container(value: CSSProps['container']) {
+    this.set('container', value)
+    return this
+  }
+
+  /**
+   * Names the element for use in container queries.
+   *
+   * syntax:  `none | <custom-ident>+`
+   *
+   * restriction: identifier
+   *
+   * browsers: E105,FF110,S16,C105,O91
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/container-name
+   *
+   * @param value -
+   */
+  containerName(value: CSSProps['containerName']) {
+    this.set('container-name', value)
+    return this
+  }
+
+  /**
+   * Establishes the types of container queries supported by the element.
+   *
+   * syntax:  `normal | [ [ size | inline-size ] || scroll-state ]`
+   *
+   * restriction: string
+   *
+   * browsers: E105,FF110,S16,C105,O91
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/container-type
+   *
+   * values:
+   * ```md
+   * normal: Do not establish size containment for queries.
+
+   * size: Allow queries on both size axes.
+
+   * inline-size: Allow queries on the inline size.
+
+   * scroll-state: Allow scroll-state queries.
+   * ```
+   * @param value -
+   */
+  containerType(value: CSSProps['containerType']) {
+    this.set('container-type', value)
+    return this
+  }
+
+  /**
+   * Controls whether the browser renders the contents of an element.
+   *
+   * syntax:  `visible | auto | hidden`
+   *
+   * restriction: enum
+   *
+   * browsers: E85,FF125,S18,C85,O71
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/content-visibility
+   *
+   * values:
+   * ```md
+   * visible: Render the contents normally.
+
+   * auto: Allow rendering work to be skipped for offscreen content.
+
+   * hidden: Skip rendering the contents.
+   * ```
+   * @param value -
+   */
+  contentVisibility(value: CSSProps['contentVisibility']) {
+    this.set('content-visibility', value)
+    return this
+  }
+
+  /**
+   * Sets the values of named CSS counters.
+   *
+   * syntax:  `[ <counter-name> <integer>? ]+ | none`
+   *
+   * restriction: string
+   *
+   * browsers: E85,FF68,S17.2,C85,O71
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/counter-set
+   *
+   * @param value -
+   */
+  counterSet(value: CSSProps['counterSet']) {
+    this.set('counter-set', value)
+    return this
+  }
+
+  /**
+   * Sets the horizontal center coordinate of an SVG circle or ellipse.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S9,C43,O30
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/cx
+   *
+   * @param value -
+   */
+  cx(value: CSSProps['cx']) {
+    this.set('cx', value)
+    return this
+  }
+
+  /**
+   * Sets the vertical center coordinate of an SVG circle or ellipse.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S9,C43,O30
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/cy
+   *
+   * @param value -
+   */
+  cy(value: CSSProps['cy']) {
+    this.set('cy', value)
+    return this
+  }
+
+  /**
+   * Selects the dominant baseline used to align text.
+   *
+   * syntax:  `auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF1,S4,C1,O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/dominant-baseline
+   *
+   * values:
+   * ```md
+   * auto: Choose the baseline from the writing mode.
+
+   * alphabetic: Use the alphabetic baseline.
+
+   * middle: Use the middle baseline.
+
+   * central: Use the central baseline.
+
+   * hanging: Use the hanging baseline.
+   * ```
+   * @param value -
+   */
+  dominantBaseline(value: CSSProps['dominantBaseline']) {
+    this.set('dominant-baseline', value)
+    return this
+  }
+
+  /**
+   * Controls automatic optical-size adjustment in fonts that support it.
+   *
+   * syntax:  `auto | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E17,FF62,S13.1,C79,O66
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-optical-sizing
+   *
+   * values:
+   * ```md
+   * auto: Adjust optical sizing to the text size.
+
+   * none: Disable automatic optical sizing.
+   * ```
+   * @param value -
+   */
+  fontOpticalSizing(value: CSSProps['fontOpticalSizing']) {
+    this.set('font-optical-sizing', value)
+    return this
+  }
+
+  /**
+   * Chooses the color palette used by a color font.
+   *
+   * syntax:  `normal | light | dark | <palette-identifier> | <palette-mix()>`
+   *
+   * restriction: string
+   *
+   * browsers: E101,FF107,S15.4,C101,O87
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-palette
+   *
+   * values:
+   * ```md
+   * normal: Use the default palette.
+
+   * light: Choose a palette suited to a light background.
+
+   * dark: Choose a palette suited to a dark background.
+   * ```
+   * @param value -
+   */
+  fontPalette(value: CSSProps['fontPalette']) {
+    this.set('font-palette', value)
+    return this
+  }
+
+  /**
+   * Controls whether missing small-cap glyphs may be synthesized.
+   *
+   * syntax:  `auto | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E97,FF111,S16.4,C97,O83
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-synthesis-small-caps
+   *
+   * values:
+   * ```md
+   * auto: Allow synthetic small caps.
+
+   * none: Use only small-cap glyphs supplied by the font.
+   * ```
+   * @param value -
+   */
+  fontSynthesisSmallCaps(value: CSSProps['fontSynthesisSmallCaps']) {
+    this.set('font-synthesis-small-caps', value)
+    return this
+  }
+
+  /**
+   * Controls whether missing italic or oblique font styles may be synthesized.
+   *
+   * syntax:  `auto | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E97,FF111,S16.4,C97,O83
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-synthesis-style
+   *
+   * values:
+   * ```md
+   * auto: Allow synthetic font styles.
+
+   * none: Use only styles supplied by the font.
+   * ```
+   * @param value -
+   */
+  fontSynthesisStyle(value: CSSProps['fontSynthesisStyle']) {
+    this.set('font-synthesis-style', value)
+    return this
+  }
+
+  /**
+   * Controls whether missing bold font weights may be synthesized.
+   *
+   * syntax:  `auto | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E97,FF111,S16.4,C97,O83
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-synthesis-weight
+   *
+   * values:
+   * ```md
+   * auto: Allow synthetic bold weights.
+
+   * none: Use only weights supplied by the font.
+   * ```
+   * @param value -
+   */
+  fontSynthesisWeight(value: CSSProps['fontSynthesisWeight']) {
+    this.set('font-synthesis-weight', value)
+    return this
+  }
+
+  /**
+   * Sets individual variation-axis values for a variable font.
+   *
+   * syntax:  `normal | [ <string> <number> ]#`
+   *
+   * restriction: string
+   *
+   * browsers: E17,FF62,S11,C62,O49
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/font-variation-settings
+   *
+   * @param value -
+   */
+  fontVariationSettings(value: CSSProps['fontVariationSettings']) {
+    this.set('font-variation-settings', value)
+    return this
+  }
+
+  /**
+   * Selects the string displayed at automatic hyphenation breaks.
+   *
+   * syntax:  `auto | <string>`
+   *
+   * restriction: string
+   *
+   * browsers: E106,FF98,S17,C106,O92
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/hyphenate-character
+   *
+   * @param value -
+   */
+  hyphenateCharacter(value: CSSProps['hyphenateCharacter']) {
+    this.set('hyphenate-character', value)
+    return this
+  }
+
+  /**
+   * Sets the top, right, bottom, and left offsets of a positioned element.
+   *
+   * syntax:  `<'top'>{1,4}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset
+   *
+   * @param value -
+   */
+  inset(value: CSSProps['inset']) {
+    this.set('inset', value)
+    return this
+  }
+
+  /**
+   * Sets both logical block offsets of a positioned element.
+   *
+   * syntax:  `<'top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-block
+   *
+   * @param value -
+   */
+  insetBlock(value: CSSProps['insetBlock']) {
+    this.set('inset-block', value)
+    return this
+  }
+
+  /**
+   * Sets the logical block-end offset of a positioned element.
+   *
+   * syntax:  `<'top'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-block-end
+   *
+   * @param value -
+   */
+  insetBlockEnd(value: CSSProps['insetBlockEnd']) {
+    this.set('inset-block-end', value)
+    return this
+  }
+
+  /**
+   * Sets the logical block-start offset of a positioned element.
+   *
+   * syntax:  `<'top'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-block-start
+   *
+   * @param value -
+   */
+  insetBlockStart(value: CSSProps['insetBlockStart']) {
+    this.set('inset-block-start', value)
+    return this
+  }
+
+  /**
+   * Sets both logical inline offsets of a positioned element.
+   *
+   * syntax:  `<'top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-inline
+   *
+   * @param value -
+   */
+  insetInline(value: CSSProps['insetInline']) {
+    this.set('inset-inline', value)
+    return this
+  }
+
+  /**
+   * Sets the logical inline-end offset of a positioned element.
+   *
+   * syntax:  `<'top'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-inline-end
+   *
+   * @param value -
+   */
+  insetInlineEnd(value: CSSProps['insetInlineEnd']) {
+    this.set('inset-inline-end', value)
+    return this
+  }
+
+  /**
+   * Sets the logical inline-start offset of a positioned element.
+   *
+   * syntax:  `<'top'>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF63,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
+   *
+   * @param value -
+   */
+  insetInlineStart(value: CSSProps['insetInlineStart']) {
+    this.set('inset-inline-start', value)
+    return this
+  }
+
+  /**
+   * Limits the number of displayed lines in a block of text.
+   *
+   * syntax:  `none | <integer>`
+   *
+   * restriction: integer, string
+   *
+   * browsers: O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/line-clamp
+   *
+   * values:
+   * ```md
+   * none: Do not clamp the number of lines.
+   * ```
+   * @param value -
+   */
+  lineClamp(value: CSSProps['lineClamp']) {
+    this.set('line-clamp', value)
+    return this
+  }
+
+  /**
+   * Sets the logical block-start and block-end margins.
+   *
+   * syntax:  `<'margin-top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/margin-block
+   *
+   * @param value -
+   */
+  marginBlock(value: CSSProps['marginBlock']) {
+    this.set('margin-block', value)
+    return this
+  }
+
+  /**
+   * Sets the logical inline-start and inline-end margins.
+   *
+   * syntax:  `<'margin-top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/margin-inline
+   *
+   * @param value -
+   */
+  marginInline(value: CSSProps['marginInline']) {
+    this.set('margin-inline', value)
+    return this
+  }
+
+  /**
+   * Sets the mask images, positions, sizing, clipping, and compositing layers.
+   *
+   * syntax:  `<mask-layer>#`
+   *
+   * restriction: string
+   *
+   * browsers: E120,FF53,S15.4,C120,O106
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/mask
+   *
+   * @param value -
+   */
+  mask(value: CSSProps['mask']) {
+    this.set('mask', value)
+    return this
+  }
+
+  /**
+   * Specifies the area affected by each mask layer.
+   *
+   * syntax:  `[ <coord-box> | no-clip ]#`
+   *
+   * restriction: string
+   *
+   * browsers: E120,FF53,S15.4,C120,O106
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/mask-clip
+   *
+   * values:
+   * ```md
+   * border-box: Clip the mask to the border box.
+
+   * padding-box: Clip the mask to the padding box.
+
+   * content-box: Clip the mask to the content box.
+
+   * no-clip: Do not clip the mask.
+   * ```
+   * @param value -
+   */
+  maskClip(value: CSSProps['maskClip']) {
+    this.set('mask-clip', value)
+    return this
+  }
+
+  /**
+   * Controls how each mask layer combines with the layers below it.
+   *
+   * syntax:  `<compositing-operator>#`
+   *
+   * restriction: string
+   *
+   * browsers: E120,FF53,S15.4,C120,O106
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/mask-composite
+   *
+   * values:
+   * ```md
+   * add: Add the current layer to the layers below.
+
+   * subtract: Keep the part outside the layers below.
+
+   * intersect: Keep only the overlapping part.
+
+   * exclude: Keep only the non-overlapping parts.
+   * ```
+   * @param value -
+   */
+  maskComposite(value: CSSProps['maskComposite']) {
+    this.set('mask-composite', value)
+    return this
+  }
+
+  /**
+   * Selects normal or compact layout for mathematical expressions.
+   *
+   * syntax:  `normal | compact`
+   *
+   * restriction: enum
+   *
+   * browsers: E109,FF117,S14.1,C109,O95
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/math-style
+   *
+   * values:
+   * ```md
+   * normal: Use normal mathematical layout.
+
+   * compact: Use compact mathematical layout.
+   * ```
+   * @param value -
+   */
+  mathStyle(value: CSSProps['mathStyle']) {
+    this.set('math-style', value)
+    return this
+  }
+
+  /**
+   * Sets the motion path, distance, rotation, position, and anchor.
+   *
+   * syntax:  `[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF72,S16,C55,O42
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset
+   *
+   * @param value -
+   */
+  offset(value: CSSProps['offset']) {
+    this.set('offset', value)
+    return this
+  }
+
+  /**
+   * Sets the point on the element that follows its motion path.
+   *
+   * syntax:  `auto | <position>`
+   *
+   * restriction: position
+   *
+   * browsers: E116,FF72,S16,C116,O102
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset-anchor
+   *
+   * @param value -
+   */
+  offsetAnchor(value: CSSProps['offsetAnchor']) {
+    this.set('offset-anchor', value)
+    return this
+  }
+
+  /**
+   * Sets how far the element has traveled along its motion path.
+   *
+   * syntax:  `<length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF72,S16,C55,O42
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset-distance
+   *
+   * @param value -
+   */
+  offsetDistance(value: CSSProps['offsetDistance']) {
+    this.set('offset-distance', value)
+    return this
+  }
+
+  /**
+   * Defines the path followed by an element during motion.
+   *
+   * syntax:  `none | <offset-path> || <coord-box>`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF72,S15.4,C55,O45
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset-path
+   *
+   * @param value -
+   */
+  offsetPath(value: CSSProps['offsetPath']) {
+    this.set('offset-path', value)
+    return this
+  }
+
+  /**
+   * Sets the initial position used to establish the motion path.
+   *
+   * syntax:  `normal | auto | <position>`
+   *
+   * restriction: position
+   *
+   * browsers: E116,FF122,S16,C116,O102
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset-position
+   *
+   * @param value -
+   */
+  offsetPosition(value: CSSProps['offsetPosition']) {
+    this.set('offset-position', value)
+    return this
+  }
+
+  /**
+   * Sets the orientation of an element as it follows its motion path.
+   *
+   * syntax:  `[ auto | reverse ] || <angle>`
+   *
+   * restriction: angle
+   *
+   * browsers: E79,FF72,S16,C56,O43
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/offset-rotate
+   *
+   * values:
+   * ```md
+   * auto: Follow the direction of the path.
+
+   * reverse: Face opposite the direction of the path.
+   * ```
+   * @param value -
+   */
+  offsetRotate(value: CSSProps['offsetRotate']) {
+    this.set('offset-rotate', value)
+    return this
+  }
+
+  /**
+   * Controls overflow along the logical block axis.
+   *
+   * syntax:  `visible | hidden | clip | scroll | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E135,FF69,S26,C135,O120
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overflow-block
+   *
+   * values:
+   * ```md
+   * visible: Allow content to overflow.
+
+   * hidden: Clip overflow while allowing programmatic scrolling.
+
+   * clip: Clip overflow without creating a scroll container.
+
+   * scroll: Provide scrolling even without overflow.
+
+   * auto: Provide scrolling when content overflows.
+   * ```
+   * @param value -
+   */
+  overflowBlock(value: CSSProps['overflowBlock']) {
+    this.set('overflow-block', value)
+    return this
+  }
+
+  /**
+   * Controls overflow along the logical inline axis.
+   *
+   * syntax:  `visible | hidden | clip | scroll | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E135,FF69,S26,C135,O120
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overflow-inline
+   *
+   * values:
+   * ```md
+   * visible: Allow content to overflow.
+
+   * hidden: Clip overflow while allowing programmatic scrolling.
+
+   * clip: Clip overflow without creating a scroll container.
+
+   * scroll: Provide scrolling even without overflow.
+
+   * auto: Provide scrolling when content overflows.
+   * ```
+   * @param value -
+   */
+  overflowInline(value: CSSProps['overflowInline']) {
+    this.set('overflow-inline', value)
+    return this
+  }
+
+  /**
+   * Controls scroll chaining and boundary effects on both scroll axes.
+   *
+   * syntax:  `[ contain | none | auto ]{1,2}`
+   *
+   * restriction: string
+   *
+   * browsers: E18,FF59,S16,C63,O50
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior
+   *
+   * @param value -
+   */
+  overscrollBehavior(value: CSSProps['overscrollBehavior']) {
+    this.set('overscroll-behavior', value)
+    return this
+  }
+
+  /**
+   * Controls scroll chaining and boundary effects on the logical block axis.
+   *
+   * syntax:  `contain | none | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF73,S16,C77,O64
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-block
+   *
+   * values:
+   * ```md
+   * auto: Allow scroll chaining and boundary effects.
+
+   * contain: Prevent scroll chaining.
+
+   * none: Prevent scroll chaining and boundary effects.
+   * ```
+   * @param value -
+   */
+  overscrollBehaviorBlock(value: CSSProps['overscrollBehaviorBlock']) {
+    this.set('overscroll-behavior-block', value)
+    return this
+  }
+
+  /**
+   * Controls scroll chaining and boundary effects on the logical inline axis.
+   *
+   * syntax:  `contain | none | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF73,S16,C77,O64
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-inline
+   *
+   * values:
+   * ```md
+   * auto: Allow scroll chaining and boundary effects.
+
+   * contain: Prevent scroll chaining.
+
+   * none: Prevent scroll chaining and boundary effects.
+   * ```
+   * @param value -
+   */
+  overscrollBehaviorInline(value: CSSProps['overscrollBehaviorInline']) {
+    this.set('overscroll-behavior-inline', value)
+    return this
+  }
+
+  /**
+   * Controls horizontal scroll chaining and boundary effects.
+   *
+   * syntax:  `contain | none | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E18,FF59,S16,C63,O50
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-x
+   *
+   * values:
+   * ```md
+   * auto: Allow scroll chaining and boundary effects.
+
+   * contain: Prevent scroll chaining.
+
+   * none: Prevent scroll chaining and boundary effects.
+   * ```
+   * @param value -
+   */
+  overscrollBehaviorX(value: CSSProps['overscrollBehaviorX']) {
+    this.set('overscroll-behavior-x', value)
+    return this
+  }
+
+  /**
+   * Controls vertical scroll chaining and boundary effects.
+   *
+   * syntax:  `contain | none | auto`
+   *
+   * restriction: enum
+   *
+   * browsers: E18,FF59,S16,C63,O50
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/overscroll-behavior-y
+   *
+   * values:
+   * ```md
+   * auto: Allow scroll chaining and boundary effects.
+
+   * contain: Prevent scroll chaining.
+
+   * none: Prevent scroll chaining and boundary effects.
+   * ```
+   * @param value -
+   */
+  overscrollBehaviorY(value: CSSProps['overscrollBehaviorY']) {
+    this.set('overscroll-behavior-y', value)
+    return this
+  }
+
+  /**
+   * Sets the logical block-start and block-end padding.
+   *
+   * syntax:  `<'padding-top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/padding-block
+   *
+   * @param value -
+   */
+  paddingBlock(value: CSSProps['paddingBlock']) {
+    this.set('padding-block', value)
+    return this
+  }
+
+  /**
+   * Sets the logical inline-start and inline-end padding.
+   *
+   * syntax:  `<'padding-top'>{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF66,S14.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/padding-inline
+   *
+   * @param value -
+   */
+  paddingInline(value: CSSProps['paddingInline']) {
+    this.set('padding-inline', value)
+    return this
+  }
+
+  /**
+   * Assigns the element to a named page in paged media.
+   *
+   * syntax:  `auto | <custom-ident>`
+   *
+   * restriction: identifier
+   *
+   * browsers: E85,FF110,S1,C85,O71
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/page
+   *
+   * @param value -
+   */
+  page(value: CSSProps['page']) {
+    this.set('page', value)
+    return this
+  }
+
+  /**
+   * Sets content alignment on the block and inline axes.
+   *
+   * syntax:  `<'align-content'> <'justify-content'>?`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF45,S9,C59,O46
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/place-content
+   *
+   * @param value -
+   */
+  placeContent(value: CSSProps['placeContent']) {
+    this.set('place-content', value)
+    return this
+  }
+
+  /**
+   * Sets item alignment on the block and inline axes.
+   *
+   * syntax:  `<'align-items'> <'justify-items'>?`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF45,S11,C59,O46
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/place-items
+   *
+   * @param value -
+   */
+  placeItems(value: CSSProps['placeItems']) {
+    this.set('place-items', value)
+    return this
+  }
+
+  /**
+   * Sets the alignment of an individual item on both axes.
+   *
+   * syntax:  `<'align-self'> <'justify-self'>?`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF45,S11,C59,O46
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/place-self
+   *
+   * @param value -
+   */
+  placeSelf(value: CSSProps['placeSelf']) {
+    this.set('place-self', value)
+    return this
+  }
+
+  /**
+   * Controls whether the browser may adjust colors when printing.
+   *
+   * syntax:  `economy | exact`
+   *
+   * restriction: enum
+   *
+   * browsers: E136,FF97,S15.4,C136,O121
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/print-color-adjust
+   *
+   * values:
+   * ```md
+   * economy: Allow adjustments that reduce printing cost.
+
+   * exact: Request that authored colors be preserved.
+   * ```
+   * @param value -
+   */
+  printColorAdjust(value: CSSProps['printColorAdjust']) {
+    this.set('print-color-adjust', value)
+    return this
+  }
+
+  /**
+   * Sets the radius of an SVG circle.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S9,C43,O30
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/r
+   *
+   * @param value -
+   */
+  r(value: CSSProps['r']) {
+    this.set('r', value)
+    return this
+  }
+
+  /**
+   * Sets rotation independently of the transform property.
+   *
+   * syntax:  `none | <angle> | [ x | y | z | <number>{3} ] && <angle>`
+   *
+   * restriction: angle
+   *
+   * browsers: E104,FF72,S14.1,C104,O90
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/rotate
+   *
+   * @param value -
+   */
+  rotate(value: CSSProps['rotate']) {
+    this.set('rotate', value)
+    return this
+  }
+
+  /**
+   * Sets the gap between rows in grid, flex, and multi-column layouts.
+   *
+   * syntax:  `normal | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E16,FF52,S10.1,C47,O34
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/row-gap
+   *
+   * @param value -
+   */
+  rowGap(value: CSSProps['rowGap']) {
+    this.set('row-gap', value)
+    return this
+  }
+
+  /**
+   * Sets the horizontal radius of an SVG ellipse or rounded rectangle.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S17.4,C43,O30
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/rx
+   *
+   * @param value -
+   */
+  rx(value: CSSProps['rx']) {
+    this.set('rx', value)
+    return this
+  }
+
+  /**
+   * Sets the vertical radius of an SVG ellipse or rounded rectangle.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S17.4,C43,O30
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/ry
+   *
+   * @param value -
+   */
+  ry(value: CSSProps['ry']) {
+    this.set('ry', value)
+    return this
+  }
+
+  /**
+   * Sets scaling independently of the transform property.
+   *
+   * syntax:  `none | [ <number> | <percentage> ]{1,3}`
+   *
+   * restriction: number, percentage
+   *
+   * browsers: E104,FF72,S14.1,C104,O90
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scale
+   *
+   * @param value -
+   */
+  scale(value: CSSProps['scale']) {
+    this.set('scale', value)
+    return this
+  }
+
+  /**
+   * Sets the outsets of the scroll snap area on all four sides.
+   *
+   * syntax:  `<length>{1,4}`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF90,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin
+   *
+   * @param value -
+   */
+  scrollMargin(value: CSSProps['scrollMargin']) {
+    this.set('scroll-margin', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outsets on both logical block edges.
+   *
+   * syntax:  `<length>{1,2}`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block
+   *
+   * @param value -
+   */
+  scrollMarginBlock(value: CSSProps['scrollMarginBlock']) {
+    this.set('scroll-margin-block', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outset on the logical block-end edge.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end
+   *
+   * @param value -
+   */
+  scrollMarginBlockEnd(value: CSSProps['scrollMarginBlockEnd']) {
+    this.set('scroll-margin-block-end', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outset on the logical block-start edge.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start
+   *
+   * @param value -
+   */
+  scrollMarginBlockStart(value: CSSProps['scrollMarginBlockStart']) {
+    this.set('scroll-margin-block-start', value)
+    return this
+  }
+
+  /**
+   * Sets the bottom outset of the scroll snap area.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-bottom
+   *
+   * @param value -
+   */
+  scrollMarginBottom(value: CSSProps['scrollMarginBottom']) {
+    this.set('scroll-margin-bottom', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outsets on both logical inline edges.
+   *
+   * syntax:  `<length>{1,2}`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline
+   *
+   * @param value -
+   */
+  scrollMarginInline(value: CSSProps['scrollMarginInline']) {
+    this.set('scroll-margin-inline', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outset on the logical inline-end edge.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end
+   *
+   * @param value -
+   */
+  scrollMarginInlineEnd(value: CSSProps['scrollMarginInlineEnd']) {
+    this.set('scroll-margin-inline-end', value)
+    return this
+  }
+
+  /**
+   * Sets the scroll snap area outset on the logical inline-start edge.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start
+   *
+   * @param value -
+   */
+  scrollMarginInlineStart(value: CSSProps['scrollMarginInlineStart']) {
+    this.set('scroll-margin-inline-start', value)
+    return this
+  }
+
+  /**
+   * Sets the left outset of the scroll snap area.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-left
+   *
+   * @param value -
+   */
+  scrollMarginLeft(value: CSSProps['scrollMarginLeft']) {
+    this.set('scroll-margin-left', value)
+    return this
+  }
+
+  /**
+   * Sets the right outset of the scroll snap area.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-right
+   *
+   * @param value -
+   */
+  scrollMarginRight(value: CSSProps['scrollMarginRight']) {
+    this.set('scroll-margin-right', value)
+    return this
+  }
+
+  /**
+   * Sets the top outset of the scroll snap area.
+   *
+   * syntax:  `<length>`
+   *
+   * restriction: length
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-margin-top
+   *
+   * @param value -
+   */
+  scrollMarginTop(value: CSSProps['scrollMarginTop']) {
+    this.set('scroll-margin-top', value)
+    return this
+  }
+
+  /**
+   * Sets the optimal viewing area insets on all four sides of a scrollport.
+   *
+   * syntax:  `[ auto | <length-percentage> ]{1,4}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding
+   *
+   * @param value -
+   */
+  scrollPadding(value: CSSProps['scrollPadding']) {
+    this.set('scroll-padding', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area insets on both logical block edges.
+   *
+   * syntax:  `[ auto | <length-percentage> ]{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block
+   *
+   * @param value -
+   */
+  scrollPaddingBlock(value: CSSProps['scrollPaddingBlock']) {
+    this.set('scroll-padding-block', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area inset on the logical block-end edge.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end
+   *
+   * @param value -
+   */
+  scrollPaddingBlockEnd(value: CSSProps['scrollPaddingBlockEnd']) {
+    this.set('scroll-padding-block-end', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area inset on the logical block-start edge.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start
+   *
+   * @param value -
+   */
+  scrollPaddingBlockStart(value: CSSProps['scrollPaddingBlockStart']) {
+    this.set('scroll-padding-block-start', value)
+    return this
+  }
+
+  /**
+   * Sets the bottom inset of the scrollport viewing area.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-bottom
+   *
+   * @param value -
+   */
+  scrollPaddingBottom(value: CSSProps['scrollPaddingBottom']) {
+    this.set('scroll-padding-bottom', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area insets on both logical inline edges.
+   *
+   * syntax:  `[ auto | <length-percentage> ]{1,2}`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline
+   *
+   * @param value -
+   */
+  scrollPaddingInline(value: CSSProps['scrollPaddingInline']) {
+    this.set('scroll-padding-inline', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area inset on the logical inline-end edge.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end
+   *
+   * @param value -
+   */
+  scrollPaddingInlineEnd(value: CSSProps['scrollPaddingInlineEnd']) {
+    this.set('scroll-padding-inline-end', value)
+    return this
+  }
+
+  /**
+   * Sets the scrollport viewing area inset on the logical inline-start edge.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S15,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start
+   *
+   * @param value -
+   */
+  scrollPaddingInlineStart(value: CSSProps['scrollPaddingInlineStart']) {
+    this.set('scroll-padding-inline-start', value)
+    return this
+  }
+
+  /**
+   * Sets the left inset of the scrollport viewing area.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-left
+   *
+   * @param value -
+   */
+  scrollPaddingLeft(value: CSSProps['scrollPaddingLeft']) {
+    this.set('scroll-padding-left', value)
+    return this
+  }
+
+  /**
+   * Sets the right inset of the scrollport viewing area.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-right
+   *
+   * @param value -
+   */
+  scrollPaddingRight(value: CSSProps['scrollPaddingRight']) {
+    this.set('scroll-padding-right', value)
+    return this
+  }
+
+  /**
+   * Sets the top inset of the scrollport viewing area.
+   *
+   * syntax:  `auto | <length-percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF68,S14.1,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-padding-top
+   *
+   * @param value -
+   */
+  scrollPaddingTop(value: CSSProps['scrollPaddingTop']) {
+    this.set('scroll-padding-top', value)
+    return this
+  }
+
+  /**
+   * Sets the alignment of the element within its scroll snap area.
+   *
+   * syntax:  `[ none | start | end | center ]{1,2}`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF68,S11,C69,O56
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-snap-align
+   *
+   * values:
+   * ```md
+   * none: Do not define a snap position.
+
+   * start: Align with the start of the snapport.
+
+   * end: Align with the end of the snapport.
+
+   * center: Align with the center of the snapport.
+   * ```
+   * @param value -
+   */
+  scrollSnapAlign(value: CSSProps['scrollSnapAlign']) {
+    this.set('scroll-snap-align', value)
+    return this
+  }
+
+  /**
+   * Controls whether scrolling may pass over a snap position.
+   *
+   * syntax:  `normal | always`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF103,S15,C75,O62
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scroll-snap-stop
+   *
+   * values:
+   * ```md
+   * normal: Allow scrolling to pass over the snap position.
+
+   * always: Require scrolling to stop at the snap position.
+   * ```
+   * @param value -
+   */
+  scrollSnapStop(value: CSSProps['scrollSnapStop']) {
+    this.set('scroll-snap-stop', value)
+    return this
+  }
+
+  /**
+   * Sets the thumb and track colors of scrollbars.
+   *
+   * syntax:  `auto | <color>{2}`
+   *
+   * restriction: color
+   *
+   * browsers: E121,FF64,S26.2,C121,O107
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scrollbar-color
+   *
+   * @param value -
+   */
+  scrollbarColor(value: CSSProps['scrollbarColor']) {
+    this.set('scrollbar-color', value)
+    return this
+  }
+
+  /**
+   * Reserves space for scrollbars to prevent layout changes.
+   *
+   * syntax:  `auto | stable && both-edges?`
+   *
+   * restriction: string
+   *
+   * browsers: E94,FF97,S18.2,C94,O80
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
+   *
+   * values:
+   * ```md
+   * auto: Reserve space only when required by the scrollbar.
+
+   * stable: Reserve a stable scrollbar gutter.
+
+   * stable both-edges: Reserve matching gutters on both inline edges.
+   * ```
+   * @param value -
+   */
+  scrollbarGutter(value: CSSProps['scrollbarGutter']) {
+    this.set('scrollbar-gutter', value)
+    return this
+  }
+
+  /**
+   * Chooses the thickness of scrollbars.
+   *
+   * syntax:  `auto | thin | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E121,FF64,S18.2,C121,O107
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/scrollbar-width
+   *
+   * values:
+   * ```md
+   * auto: Use the platform default thickness.
+
+   * thin: Use a thinner scrollbar.
+
+   * none: Hide the scrollbar without disabling scrolling.
+   * ```
+   * @param value -
+   */
+  scrollbarWidth(value: CSSProps['scrollbarWidth']) {
+    this.set('scrollbar-width', value)
+    return this
+  }
+
+  /**
+   * Provides rendering-quality hints for SVG shapes.
+   *
+   * syntax:  `auto | optimizeSpeed | crispEdges | geometricPrecision`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF3,S4,C1,O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/shape-rendering
+   *
+   * values:
+   * ```md
+   * auto: Let the renderer balance speed and quality.
+
+   * optimizeSpeed: Favor rendering speed.
+
+   * crispEdges: Favor crisp edges.
+
+   * geometricPrecision: Favor geometric accuracy.
+   * ```
+   * @param value -
+   */
+  shapeRendering(value: CSSProps['shapeRendering']) {
+    this.set('shape-rendering', value)
+    return this
+  }
+
+  /**
+   * Controls automatic spacing between characters from different writing systems.
+   *
+   * syntax:  `normal | <autospace> | auto`
+   *
+   * restriction: string
+   *
+   * browsers: E140,FF145,S18.4,C140,O124
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-autospace
+   *
+   * @param value -
+   */
+  textAutospace(value: CSSProps['textAutospace']) {
+    this.set('text-autospace', value)
+    return this
+  }
+
+  /**
+   * Combines a sequence of characters into one upright unit in vertical text.
+   *
+   * syntax:  `none | all | [ digits <integer>? ]`
+   *
+   * restriction: string
+   *
+   * browsers: E79,FF48,S15.4,C48,O35
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-combine-upright
+   *
+   * values:
+   * ```md
+   * none: Do not combine characters.
+
+   * all: Combine all characters in the element.
+   * ```
+   * @param value -
+   */
+  textCombineUpright(value: CSSProps['textCombineUpright']) {
+    this.set('text-combine-upright', value)
+    return this
+  }
+
+  /**
+   * Controls whether text decoration lines avoid glyph strokes.
+   *
+   * syntax:  `auto | all | none`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF70,S15.4,C64,O50
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-decoration-skip-ink
+   *
+   * values:
+   * ```md
+   * auto: Let the browser avoid glyph strokes.
+
+   * all: Avoid glyph strokes wherever possible.
+
+   * none: Draw continuous decoration lines.
+   * ```
+   * @param value -
+   */
+  textDecorationSkipInk(value: CSSProps['textDecorationSkipInk']) {
+    this.set('text-decoration-skip-ink', value)
+    return this
+  }
+
+  /**
+   * Sets the thickness of text decoration lines.
+   *
+   * syntax:  `auto | from-font | <length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E89,FF70,S12.1,C89,O75
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-decoration-thickness
+   *
+   * values:
+   * ```md
+   * auto: Let the browser choose a thickness.
+
+   * from-font: Use the thickness specified by the font.
+   * ```
+   * @param value -
+   */
+  textDecorationThickness(value: CSSProps['textDecorationThickness']) {
+    this.set('text-decoration-thickness', value)
+    return this
+  }
+
+  /**
+   * Sets the style and color of emphasis marks beside text.
+   *
+   * syntax:  `<'text-emphasis-style'> || <'text-emphasis-color'>`
+   *
+   * restriction: string, color
+   *
+   * browsers: E99,FF46,S7,C99,O85
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-emphasis
+   *
+   * @param value -
+   */
+  textEmphasis(value: CSSProps['textEmphasis']) {
+    this.set('text-emphasis', value)
+    return this
+  }
+
+  /**
+   * Sets the color of text emphasis marks.
+   *
+   * syntax:  `<color>`
+   *
+   * restriction: color
+   *
+   * browsers: E99,FF46,S7,C99,O85
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-emphasis-color
+   *
+   * @param value -
+   */
+  textEmphasisColor(value: CSSProps['textEmphasisColor']) {
+    this.set('text-emphasis-color', value)
+    return this
+  }
+
+  /**
+   * Positions emphasis marks relative to the text.
+   *
+   * syntax:  `auto | [ over | under ] && [ right | left ]?`
+   *
+   * restriction: string
+   *
+   * browsers: E99,FF46,S7,C99,O85
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-emphasis-position
+   *
+   * @param value -
+   */
+  textEmphasisPosition(value: CSSProps['textEmphasisPosition']) {
+    this.set('text-emphasis-position', value)
+    return this
+  }
+
+  /**
+   * Selects the shape and fill of text emphasis marks.
+   *
+   * syntax:  `none | [ [ filled | open ] || [ dot | circle | double-circle | triangle | sesame ] ] | <string>`
+   *
+   * restriction: string
+   *
+   * browsers: E99,FF46,S7,C99,O85
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-emphasis-style
+   *
+   * @param value -
+   */
+  textEmphasisStyle(value: CSSProps['textEmphasisStyle']) {
+    this.set('text-emphasis-style', value)
+    return this
+  }
+
+  /**
+   * Sets the distance between an underline and its original position.
+   *
+   * syntax:  `auto | <length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E87,FF70,S12.1,C87,O73
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-underline-offset
+   *
+   * @param value -
+   */
+  textUnderlineOffset(value: CSSProps['textUnderlineOffset']) {
+    this.set('text-underline-offset', value)
+    return this
+  }
+
+  /**
+   * Selects the placement of underlines in horizontal and vertical text.
+   *
+   * syntax:  `auto | from-font | [ under || [ left | right ] ]`
+   *
+   * restriction: string
+   *
+   * browsers: E12,FF74,S12.1,C33,O20
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-underline-position
+   *
+   * values:
+   * ```md
+   * auto: Let the browser choose the position.
+
+   * from-font: Use the underline position supplied by the font.
+
+   * under: Place the underline below the text content.
+
+   * left: Place the underline to the left in vertical text.
+
+   * right: Place the underline to the right in vertical text.
+   * ```
+   * @param value -
+   */
+  textUnderlinePosition(value: CSSProps['textUnderlinePosition']) {
+    this.set('text-underline-position', value)
+    return this
+  }
+
+  /**
+   * Sets text wrapping behavior and the strategy used to choose line breaks.
+   *
+   * syntax:  `<'text-wrap-mode'> || <'text-wrap-style'>`
+   *
+   * restriction: string
+   *
+   * browsers: E114,FF121,S17.4,C114,O100
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-wrap
+   *
+   * values:
+   * ```md
+   * wrap: Allow text to wrap.
+
+   * nowrap: Prevent text from wrapping.
+
+   * balance: Balance line lengths.
+
+   * pretty: Favor a more pleasing arrangement of line breaks.
+   * ```
+   * @param value -
+   */
+  textWrap(value: CSSProps['textWrap']) {
+    this.set('text-wrap', value)
+    return this
+  }
+
+  /**
+   * Controls whether text may wrap onto additional lines.
+   *
+   * syntax:  `wrap | nowrap`
+   *
+   * restriction: enum
+   *
+   * browsers: E130,FF124,S17.4,C130,O115
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-wrap-mode
+   *
+   * values:
+   * ```md
+   * wrap: Allow wrapping.
+
+   * nowrap: Prevent wrapping.
+   * ```
+   * @param value -
+   */
+  textWrapMode(value: CSSProps['textWrapMode']) {
+    this.set('text-wrap-mode', value)
+    return this
+  }
+
+  /**
+   * Chooses the strategy used to arrange wrapped text lines.
+   *
+   * syntax:  `auto | balance | stable | pretty`
+   *
+   * restriction: enum
+   *
+   * browsers: E130,FF124,S17.5,C130,O115
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/text-wrap-style
+   *
+   * values:
+   * ```md
+   * auto: Use the browser default wrapping strategy.
+
+   * balance: Balance line lengths.
+
+   * stable: Avoid changing earlier lines while editing.
+
+   * pretty: Favor a more pleasing arrangement of line breaks.
+   * ```
+   * @param value -
+   */
+  textWrapStyle(value: CSSProps['textWrapStyle']) {
+    this.set('text-wrap-style', value)
+    return this
+  }
+
+  /**
+   * Selects the reference box used by transforms and transform-origin.
+   *
+   * syntax:  `content-box | border-box | fill-box | stroke-box | view-box`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF55,S11,C64,O51
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/transform-box
+   *
+   * values:
+   * ```md
+   * content-box: Use the content box.
+
+   * border-box: Use the border box.
+
+   * fill-box: Use the object bounding box.
+
+   * stroke-box: Use the stroke bounding box.
+
+   * view-box: Use the nearest SVG viewport.
+   * ```
+   * @param value -
+   */
+  transformBox(value: CSSProps['transformBox']) {
+    this.set('transform-box', value)
+    return this
+  }
+
+  /**
+   * Controls whether transitions may start for discrete properties.
+   *
+   * syntax:  `<transition-behavior-value>#`
+   *
+   * restriction: string
+   *
+   * browsers: E117,FF129,S17.4,C117,O103
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/transition-behavior
+   *
+   * values:
+   * ```md
+   * normal: Transition only continuously animatable properties.
+
+   * allow-discrete: Allow transitions of discrete properties.
+   * ```
+   * @param value -
+   */
+  transitionBehavior(value: CSSProps['transitionBehavior']) {
+    this.set('transition-behavior', value)
+    return this
+  }
+
+  /**
+   * Sets translation independently of the transform property.
+   *
+   * syntax:  `none | <length-percentage> [ <length-percentage> <length>? ]?`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E104,FF72,S14.1,C104,O90
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/translate
+   *
+   * @param value -
+   */
+  translate(value: CSSProps['translate']) {
+    this.set('translate', value)
+    return this
+  }
+
+  /**
+   * Controls how transformations affect SVG strokes and geometry.
+   *
+   * syntax:  `none | non-scaling-stroke | non-scaling-size | non-rotation | fixed-position`
+   *
+   * restriction: enum
+   *
+   * browsers: E79,FF15,S5.1,C6,O15
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/vector-effect
+   *
+   * values:
+   * ```md
+   * none: Apply the normal transformation behavior.
+
+   * non-scaling-stroke: Keep stroke width independent of scaling.
+
+   * non-scaling-size: Keep the object size independent of scaling.
+
+   * non-rotation: Keep the object orientation independent of rotation.
+
+   * fixed-position: Keep the object position independent of transformations.
+   * ```
+   * @param value -
+   */
+  vectorEffect(value: CSSProps['vectorEffect']) {
+    this.set('vector-effect', value)
+    return this
+  }
+
+  /**
+   * Assigns classes used to style view-transition pseudo-elements.
+   *
+   * syntax:  `none | <custom-ident>+`
+   *
+   * restriction: identifier
+   *
+   * browsers: E125,FF144,S18.2,C125,O111
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/view-transition-class
+   *
+   * @param value -
+   */
+  viewTransitionClass(value: CSSProps['viewTransitionClass']) {
+    this.set('view-transition-class', value)
+    return this
+  }
+
+  /**
+   * Names an element for capture and matching during a view transition.
+   *
+   * syntax:  `none | <custom-ident> | match-element`
+   *
+   * restriction: identifier
+   *
+   * browsers: E111,FF144,S18,C111,O97
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/view-transition-name
+   *
+   * @param value -
+   */
+  viewTransitionName(value: CSSProps['viewTransitionName']) {
+    this.set('view-transition-name', value)
+    return this
+  }
+
+  /**
+   * Controls how whitespace characters and segment breaks are collapsed.
+   *
+   * syntax:  `collapse | preserve | preserve-breaks | preserve-spaces | break-spaces`
+   *
+   * restriction: enum
+   *
+   * browsers: E114,FF124,S17.4,C114,O100
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/white-space-collapse
+   *
+   * values:
+   * ```md
+   * collapse: Collapse whitespace sequences and segment breaks.
+
+   * preserve: Preserve whitespace sequences and segment breaks.
+
+   * preserve-breaks: Preserve segment breaks while collapsing spaces.
+
+   * preserve-spaces: Preserve spaces while converting tabs and breaks to spaces.
+
+   * break-spaces: Preserve spaces and allow a break after each one.
+   * ```
+   * @param value -
+   */
+  whiteSpaceCollapse(value: CSSProps['whiteSpaceCollapse']) {
+    this.set('white-space-collapse', value)
+    return this
+  }
+
+  /**
+   * Sets the horizontal position of an SVG geometry element.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S9,C42,O29
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/x
+   *
+   * @param value -
+   */
+  x(value: CSSProps['x']) {
+    this.set('x', value)
+    return this
+  }
+
+  /**
+   * Sets the vertical position of an SVG geometry element.
+   *
+   * syntax:  `<length> | <percentage>`
+   *
+   * restriction: length, percentage
+   *
+   * browsers: E79,FF69,S9,C42,O29
+   *
+   * ref: https://developer.mozilla.org/docs/Web/CSS/y
+   *
+   * @param value -
+   */
+  y(value: CSSProps['y']) {
+    this.set('y', value)
     return this
   }
 }
diff --git a/packages/ts-highlight/package.json b/packages/ts-highlight/package.json
index c517e2cc..e56f1c6b 100644
--- a/packages/ts-highlight/package.json
+++ b/packages/ts-highlight/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-highlight",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-highlight.mjs",
   "types": "./dist/ts-highlight.d.mts",
diff --git a/packages/ts-html/package.json b/packages/ts-html/package.json
index 17aa21e2..60b522ad 100644
--- a/packages/ts-html/package.json
+++ b/packages/ts-html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-html",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-html.mjs",
   "types": "./dist/ts-html.d.mts",
diff --git a/packages/ts-images/package.json b/packages/ts-images/package.json
index 4ca2df95..b9b4dda3 100644
--- a/packages/ts-images/package.json
+++ b/packages/ts-images/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-images",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-images.mjs",
   "types": "./dist/ts-images.d.mts",
diff --git a/packages/ts-minidom/package.json b/packages/ts-minidom/package.json
index 2f3b379f..517b6ce6 100644
--- a/packages/ts-minidom/package.json
+++ b/packages/ts-minidom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-minidom",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-minidom.mjs",
   "types": "./dist/ts-minidom.d.mts",
diff --git a/packages/ts-page-scripts/package.json b/packages/ts-page-scripts/package.json
index d988aa77..baaf89ee 100644
--- a/packages/ts-page-scripts/package.json
+++ b/packages/ts-page-scripts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-page-scripts",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-page-scripts.mjs",
   "types": "./dist/ts-page-scripts.d.mts",
diff --git a/packages/ts-pagefind/package.json b/packages/ts-pagefind/package.json
index 6fcb24a4..6c0e9d9b 100644
--- a/packages/ts-pagefind/package.json
+++ b/packages/ts-pagefind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-pagefind",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-pagefind.mjs",
   "types": "./dist/ts-pagefind.d.mts",
diff --git a/packages/ts-render/package.json b/packages/ts-render/package.json
index 72f7d7a6..c858c180 100644
--- a/packages/ts-render/package.json
+++ b/packages/ts-render/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-render",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-render.mjs",
   "types": "./dist/ts-render.d.mts",
diff --git a/packages/ts-seo/package.json b/packages/ts-seo/package.json
index ab53fd28..8988355b 100644
--- a/packages/ts-seo/package.json
+++ b/packages/ts-seo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-seo",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-seo.mjs",
   "types": "./dist/ts-seo.d.mts",
diff --git a/packages/ts-ssg-vscode/package.json b/packages/ts-ssg-vscode/package.json
index fa6f355c..d1b3a4e6 100644
--- a/packages/ts-ssg-vscode/package.json
+++ b/packages/ts-ssg-vscode/package.json
@@ -2,7 +2,7 @@
   "name": "purestack-component-navigation",
   "displayName": "PureStack Component Tools",
   "description": "Component navigation, prop IntelliSense, lit-html syntax highlighting, and template formatting for Markdown, Regor MDX, and TypeScript templates.",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "private": true,
   "publisher": "purestack",
   "license": "MIT",
diff --git a/packages/ts-ssg/package.json b/packages/ts-ssg/package.json
index 175f0069..01455ad0 100644
--- a/packages/ts-ssg/package.json
+++ b/packages/ts-ssg/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-ssg",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-ssg.mjs",
   "types": "./dist/ts-ssg.d.mts",
diff --git a/packages/ts-ssg/src/build/incremental/incremental.test.ts b/packages/ts-ssg/src/build/incremental/incremental.test.ts
index e8486229..c25d4b2a 100644
--- a/packages/ts-ssg/src/build/incremental/incremental.test.ts
+++ b/packages/ts-ssg/src/build/incremental/incremental.test.ts
@@ -161,6 +161,62 @@ describe('incremental builder', () => {
     })
   })
 
+  it('rewrites theme CSS after retained keyframe changes', async () => {
+    await withTempDir(async (base) => {
+      const contentDir = path.join(base, 'content')
+      const outDir = path.join(base, 'out')
+      await fs.mkdir(contentDir)
+      await fs.writeFile(path.join(contentDir, 'index.md'), '# Home')
+      let frame: ReturnType<typeof styleBuilder.select> | undefined
+      let writes = 0
+      const builder = await createIncrementalBuilder({
+        siteConfig: { rootDir: base, contentDir, outDir },
+        options: {
+          plugins: [
+            {
+              name: 'hero-motion',
+              hooks: {
+                onConfigResolved() {
+                  frame = styleBuilder
+                    .get('light')
+                    .keyframes('hero-pulse')
+                    .select('to')
+                    .opacity('.41')
+                  styleBuilder
+                    .select('.hero', 'light')
+                    .animation('hero-pulse 8s infinite')
+                },
+                onStylesWritten() {
+                  writes += 1
+                },
+              },
+            },
+          ],
+        },
+      })
+      await builder.prepareForRequests()
+      await builder.renderByUrlPath('/')
+      await builder.preparePageAssets()
+      const initialCss = await readThemeCss(outDir, 'light')
+      expect(
+        initialCss.match(/@keyframes hero-pulse\s*\{[^}]+\}/)?.[0],
+      ).toMatch(/opacity:\s*0?\.41;/)
+      const before = writes
+      if (!frame)
+        throw new Error('Expected the hero animation to be initialized.')
+      frame.opacity('.73')
+      await builder.preparePageAssets()
+      expect(writes).toBe(before + 1)
+      const updatedCss = await readThemeCss(outDir, 'light')
+      expect(
+        updatedCss.match(/@keyframes hero-pulse\s*\{[^}]+\}/)?.[0],
+      ).toMatch(/opacity:\s*0?\.73;/)
+      frame.opacity('.73')
+      await builder.preparePageAssets()
+      expect(writes).toBe(before + 1)
+    })
+  })
+
   it.each(['none', 'hybrid'] as const)(
     'shares discovery across watcher bursts with %s navigation',
     async (mode) => {
diff --git a/packages/ts-ssg/src/config/head.ts b/packages/ts-ssg/src/config/head.ts
index 866b4c3d..cb3fa033 100644
--- a/packages/ts-ssg/src/config/head.ts
+++ b/packages/ts-ssg/src/config/head.ts
@@ -24,7 +24,7 @@ export function getHead(config?: BasicHeadConfig) {
   return createHead(getHeadConfig(merge(DEFAULTS, config))).push(
     h('meta').attr({
       name: 'generator',
-      content: 'PureStack v1.1.16',
+      content: 'PureStack v1.1.17',
     }),
   )
 }
diff --git a/packages/ts-style/README.md b/packages/ts-style/README.md
index 0b203553..da83ebe9 100644
--- a/packages/ts-style/README.md
+++ b/packages/ts-style/README.md
@@ -19,3 +19,29 @@ scope, asynchronous standalone renders must run sequentially. Node integrations
 can install `AsyncLocalStorage<StyleContext>` through `useStyleScope`; the style
 package itself remains browser-safe. Nested contexts restore their parent even
 when a render fails.
+
+Define keyframe animations on the existing theme style builder:
+
+```ts
+import { styleBuilder } from '@purestack/ts-style'
+
+const theme = 'light'
+const root = styleBuilder.get(theme)
+const frames = root.keyframes('zt-memory-cycle')
+frames.select('0%, 4%, 40%, 100%').transform('translateY(0)')
+frames.select('12%, 28%').transform('translateY(-8px)')
+root.select('.zt-slab-memory')
+  .animation('zt-memory-cycle 8s ease-in-out infinite')
+root.select('.zt-slab-memory')
+  .media('prefers-reduced-motion: reduce')
+  .animation('none !important')
+```
+
+Definitions use the same context, revision tracking, and reset lifecycle as
+ordinary styles. Frame selectors also accept `from` and `to`; declarations use
+the existing fluent methods, `.css()`, or `.set()`.
+
+Keyframe names remain global inside `@scope` and are emitted without rewriting.
+Animations with identical definitions can use the same name across themes.
+When definitions differ between themes, use distinct names such as
+`notice-fade-light` and `notice-fade-dark` in both the definition and reference.
diff --git a/packages/ts-style/package.json b/packages/ts-style/package.json
index 6fdf8df5..c29c0ce1 100644
--- a/packages/ts-style/package.json
+++ b/packages/ts-style/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-style",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-style.mjs",
   "types": "./dist/ts-style.d.mts",
diff --git a/packages/ts-style/src/styleContext.test.ts b/packages/ts-style/src/styleContext.test.ts
index 5f63f71e..1c0385cb 100644
--- a/packages/ts-style/src/styleContext.test.ts
+++ b/packages/ts-style/src/styleContext.test.ts
@@ -69,6 +69,50 @@ describe('style contexts', () => {
     )
   })
 
+  it('tracks retained frame mutations only in their owning context', async () => {
+    const first = createStyleContext()
+    const second = createStyleContext()
+    const frame = runWithStyleContext(first, () =>
+      styleBuilder.get('light').keyframes('pulse').select('to').opacity('1'),
+    )
+    runWithStyleContext(second, () => {
+      styleBuilder.get('light').keyframes('pulse').select('to').opacity('.5')
+    })
+    const firstRevision = runWithStyleContext(
+      first,
+      () => styleBuilder.revision,
+    )
+    const secondRevision = runWithStyleContext(
+      second,
+      () => styleBuilder.revision,
+    )
+
+    frame.opacity('1')
+    expect(runWithStyleContext(first, () => styleBuilder.revision)).toBe(
+      firstRevision,
+    )
+    frame.opacity('.8')
+    expect(
+      runWithStyleContext(first, () => styleBuilder.revision),
+    ).toBeGreaterThan(firstRevision)
+    expect(runWithStyleContext(second, () => styleBuilder.revision)).toBe(
+      secondRevision,
+    )
+
+    const render = (context: typeof first) =>
+      runWithStyleContext(context, () => styleBuilder.render('light', false))
+    expect(await render(first)).toContain('opacity: .8;')
+    expect(await render(second)).toContain('opacity: .5;')
+    runWithStyleContext(first, () => styleBuilder.reset())
+    const afterReset = runWithStyleContext(first, () => styleBuilder.revision)
+    frame.opacity('.2')
+    expect(runWithStyleContext(first, () => styleBuilder.revision)).toBe(
+      afterReset,
+    )
+    expect(await render(first)).not.toContain('@keyframes')
+    expect(await render(second)).toContain('@keyframes pulse')
+  })
+
   it('restores nested contexts after async success and failure', async () => {
     const outer = createStyleContext()
     const inner = createStyleContext()
diff --git a/packages/ts-style/src/styles.test.ts b/packages/ts-style/src/styles.test.ts
index e2070a23..3ee2cc94 100644
--- a/packages/ts-style/src/styles.test.ts
+++ b/packages/ts-style/src/styles.test.ts
@@ -35,4 +35,49 @@ describe('styleBuilder', () => {
   it('names the class that renders a region in a theme', () => {
     expect(getThemeClass('Dark')).toBe('theme--dark')
   })
+
+  it.each([true, false])(
+    'renders named keyframes in theme styles (pretty %s)',
+    async (pretty) => {
+      for (const theme of ['light', 'dark']) {
+        const name = `notice-fade-${theme}`
+        const frames = styleBuilder.get(theme).keyframes(name)
+        frames.select('from').opacity('0')
+        frames.select('to').opacity('1')
+        styleBuilder
+          .select('.notice', theme)
+          .animation(`${name} 160ms ease-out`)
+        styleBuilder
+          .select('.notice', theme)
+          .media('prefers-reduced-motion: reduce')
+          .animation('none !important')
+      }
+
+      for (const [theme, other] of [
+        ['light', 'dark'],
+        ['dark', 'light'],
+      ]) {
+        const css = (await styleBuilder.render(theme, pretty)).replace(
+          /\s+/g,
+          ' ',
+        )
+        expect(css).toContain(
+          `@scope (html[data-theme="${theme}"], .theme--${theme}) {`,
+        )
+        expect(css).toContain(
+          `@keyframes notice-fade-${theme} { from { opacity: 0; } to { opacity: 1; } }`,
+        )
+        expect(css).toContain(`animation: notice-fade-${theme} 160ms ease-out;`)
+        expect(css).toMatch(
+          /@media\s*\(prefers-reduced-motion: reduce\) \{ \.notice \{ animation: none !important; \} \}/,
+        )
+        expect(css).not.toContain(`notice-fade-${other}`)
+      }
+
+      styleBuilder.reset()
+      expect(await styleBuilder.render('light', pretty)).not.toContain(
+        '@keyframes',
+      )
+    },
+  )
 })
diff --git a/packages/ts-svg-icons/package.json b/packages/ts-svg-icons/package.json
index 32975cd5..7e110f86 100644
--- a/packages/ts-svg-icons/package.json
+++ b/packages/ts-svg-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-svg-icons",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-svg-icons.mjs",
   "types": "./dist/ts-svg-icons.d.mts",
diff --git a/packages/ts-theme/package.json b/packages/ts-theme/package.json
index 26d36086..59dc186c 100644
--- a/packages/ts-theme/package.json
+++ b/packages/ts-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-theme",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-theme.mjs",
   "types": "./dist/ts-theme.d.mts",
diff --git a/packages/ts-util-node/package.json b/packages/ts-util-node/package.json
index e3de1f48..4e4ba2c6 100644
--- a/packages/ts-util-node/package.json
+++ b/packages/ts-util-node/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-util-node",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-util-node.mjs",
   "types": "./dist/ts-util-node.d.mts",
diff --git a/packages/ts-util/package.json b/packages/ts-util/package.json
index ce952e39..1dd7d3fc 100644
--- a/packages/ts-util/package.json
+++ b/packages/ts-util/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@purestack/ts-util",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "packageManager": "yarn@4.9.2",
   "module": "./dist/ts-util.mjs",
   "types": "./dist/ts-util.d.mts",