@thi.ng/meta-css 0.5.0 → 0.6.0

package/README.md

@@ -7,8 +7,9 @@
 ![npm downloads](https://img.shields.io/npm/dm/@thi.ng/meta-css.svg)
 [![Mastodon Follow](https://img.shields.io/mastodon/follow/109331703950160316?domain=https%3A%2F%2Fmastodon.thi.ng&style=social)](https://mastodon.thi.ng/@toxi)
 
-This project is part of the
-[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo and anti-framework.
+This is a standalone project, maintained as part of the
+[@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo and
+anti-framework.
 
 - [About](#about)
 - [Generating CSS frameworks](#generating-css-frameworks)
@@ -21,6 +22,7 @@ This project is part of the
     - [Properties](#properties)
     - [Key value generation](#key-value-generation)
   - [Media query definitions](#media-query-definitions)
+  - [Custom declarations](#custom-declarations)
 - [Converting meta stylesheets to CSS](#converting-meta-stylesheets-to-css)
   - [Meta-stylesheets syntax](#meta-stylesheets-syntax)
     - [Class identifiers & media query prefixes](#class-identifiers--media-query-prefixes)
@@ -44,42 +46,52 @@ This project is part of the
 
 Data-driven CSS framework codegen, transpiler & bundler.
 
-This toolchain and the overall workflow proposed by it is heavily building atop
-the concept of _CSS utility classes_ (as known from Tachyons, Turret or the
-newer Tailwind projects). How and where those CSS classes are applied is however
-a defining point of difference to other existing approaches. Furthermore, using
-JSON as data format for expressing generative rules and as intermediate format
-for generated frameworks, removes the need for any complex CSS-related
-dependencies and makes it trivial to build secondary tooling around (e.g. part
-of this readme is an auto-generated report of the included base framework
-specs).
+This toolkit (started as experiment in 2016) and the overall design approach and
+workflows proposed by it are heavily building atop the concept of _CSS utility
+classes_ (as known from [Tachyons](https://tachyons.io/),
+[Turret](https://turretcss.com/) or the newer
+[Tailwind](https://tailwindcss.com/) projects). How and where those CSS classes
+are defined and later applied is however a major defining point of difference to
+these other existing approaches and will be explained in this document. To
+remove the need for any complex & bloated CSS-related dependencies (parsers
+etc.) and to simplify building secondary tooling (e.g. part of this readme is an
+[auto-generated report of the included base framework
+specs](#bundled-css-base-framework)), we're using JSON — rather than CSS — as
+data format to: 1) express the _generative_ rules to define all the CSS classes,
+declarations, media query criteria which are forming a framework and
+2) as intermediate data format for a generated CSS framework itself. **The
+entire toolkit (incl. all bundled dependencies) is currently only 32KB!**
 
 This readme aims to provide a thorough overview of this toolchain and some
 concrete usage examples...
 
 Note: In all cases, final CSS generation itself is handled by
 [thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-css/).
+Please see its readme for further useful information.
 
-**👷🏻 This is all WIP!** Also see included & linked examples for basic usage...
+**👷🏻 This is all WIP!** See included & [linked examples](#usage-examples) for
+concrete usage...
 
 ## Generating CSS frameworks
 
-The `generate` command is used to generate custom frameworks with (likely)
-hundreds of CSS utility classes from a number of extremely compact, parametric
-JSON rule specs. This process generates all desired, combinatorial versions of
-various rules/declarations and exports them to another JSON file used as
-intermediary for the other commands provided by this toolchain. The
-[syntax/format of the generator rules](#framework-generation-specs--syntax) is explained
-further on. These rule specs can be split up into multiple files for better
-handling, can define [arbitrary media query criteria]() (all later combinable),
-shared lookup tables for colors, margins, sizes, timings etc.
-
-The package includes generator specs for a basic, fully customizable,
-[tachyons.io](https://tachyons.io)-derived [CSS
-framework](#bundled-css-base-framework). These specs and resulting framework are
-still being worked on and are used for some example projects in this repo, but
-are mostly intended as basic starting points for creating other custom
-frameworks (in the hope they'll be shared back similarly)...
+The `generate` command is used to generate custom CSS frameworks with (likely)
+hundreds of utility classes, all derived from a number of extremely compact,
+parametric JSON rule specs. This process generates all desired, combinatorial
+versions of various rules/declarations and exports them to a framework JSON file
+used as intermediary stage for the other commands provided by this toolchain.
+The [syntax/format of the generator rules](#framework-generation-specs--syntax)
+is explained further on. These framework specs can be split up into multiple
+files for better handling and organization, can define [CSS base
+declarations](#custom-declarations) (e.g. for normalization purposes),
+[arbitrary media query criteria](#media-query-definitions) (all later
+combinable), shared lookup tables for colors, margins, sizes, timings etc.
+
+The package includes dozens of generator specs for a basic, fully customizable,
+Tachyons-derived [CSS framework](#bundled-css-base-framework). These specs and
+resulting framework are still being worked on and are used for some example
+projects in this repo, but are mostly intended as basic starting points for
+creating other custom frameworks (_in the hope some useful specs will be shared back
+similarly_)...
 
 ```text
 metacss generate --help
@@ -100,8 +112,8 @@ Main:
 ### Framework generation specs & syntax
 
 This section gives an overview of the JSON format used to generate CSS
-frameworks of dozens (usually hundreds) of utility classes, including many
-possible variations (per spec).
+frameworks of dozens (usually hundreds or thousands) of utility classes,
+including many possible variations (per spec).
 
 Generation specs use a simple JSON structure as shown below. The specs can be
 split over multiple files and will all be merged by the `generate` command of
@@ -117,14 +129,15 @@ the toolchain.
     // optional media queries and their criteria, will be merged from multiple spec files
     "media": {
         "large": { "min-width": "60rem" },
-        "dark": { "prefers-color-scheme": "dark" }
+        "dark": { "prefers-color-scheme": "dark" },
+        "anim": { "prefers-reduced-motion": false }
     },
     // optional shared values/LUTs (arrays or objects)
-    // tables are always local to the current spec file only...
+    // (local to the current file only)
     "tables": {
         "margins": [0, 0.25, 0.5, 1, 2, 4]
     },
-    // optional shared variations
+    // optional shared variations (local to current file only)
     "vars": {
         "size": ["width", "height"]
     },
@@ -150,7 +163,7 @@ For each additional value added to the `margins` table, 7 more CSS classes will
 generated. The `name` (class) and `props` (CSS property name) are parametric and
 will be explained in more detail further below.
 
-```json tangle:export/readme-margins.json
+```json tangle:export/readme-margins.mcss.json
 {
     "tables": {
         "margins": [0, 0.5, 1]
@@ -161,18 +174,18 @@ will be explained in more detail further below.
             "props": "margin<var>",
             "values": "margins",
             "unit": "rem",
-            "var": ["a", "t", "r", "b", "l", "h", "v"]
+            "vars": ["a", "t", "r", "b", "l", "h", "v"]
         }
     ]
 }
 ```
 
-Assuming the above spec has been saved to file `myspecs.json`...
+Assuming the above spec has been saved to file `margins.mcss.json`...
 
 ```bash
 # the generate cmd can merge specs from multiple input files
 # if no `--out` file is given, the result will go to stdout
-metacss generate --pretty myspecs.json
+metacss generate --pretty margins.mcss.json
 ```
 
 ...this command (with the above spec) will generate the following output (here
@@ -221,26 +234,28 @@ An individual generator spec JSON object can contain the following keys:
 
 | **ID**   | **Type**                | **Description**                                              |
 |----------|-------------------------|--------------------------------------------------------------|
+| `key`    | string, optional        | Method for deriving keys from current value                  |
 | `name`   | string                  | Parametric name for the generated CSS class(es)              |
 | `props`  | string or object        | CSS property name(s), possibly parametric                    |
-| `values` | string, array or object | Values to be assigned to CSS properties, possibly parametric |
 | `unit`   | string, optional        | CSS unit to use for values                                   |
-| `key`    | string, optional        | Method for deriving keys from current value                  |
-| `var`    | string[], optional      | Array of variation IDs (see section below)                   |
-| `user`   | any, optional           | Custom user data, comments, metadata etc.                    |
+| `user`   | any, optional           | Custom, arbitrary user data, comments, metadata etc.         |
+| `values` | string, array or object | Values to be assigned to CSS properties, possibly parametric |
+| `vars`   | string[], optional      | Array of variation IDs (see section below)                   |
 
 The number of generated CSS classes per spec is the number of items in `values`
 multiplied by the number of variations in `var` (if any).
 
 Any `user` data will be stored (as is) with each generated CSS class, but
-currently has no other direct use in the toolchain and is meant for additional
-user-defined tooling.
+currently has no direct use in the toolchain and is purely intended for
+additional user-defined custom tooling.
 
 #### Variations
 
 Variations can be requested by providing an array of valid variation IDs. If
-used, `<vid>` or `<var>` parameters must be used in the `name` or else naming
-conflicts will occur.
+used, `<vid>` or `<var>` parameters **must** be used in the `name` or else
+naming conflicts will occur.
+
+The following variation presets are available:
 
 | **ID**     | **Expanded values**   |
 |------------|-----------------------|
@@ -259,26 +274,60 @@ conflicts will occur.
 | `"x"`      | `["-x"]`              |
 | `"y"`      | `["-y"]`              |
 
+Custom, file-local variations can also be used (parameters in `name` and `props`
+will be explained next), e.g.:
+
+```json tangle:export/readme-custom-vars.mcss.json
+{
+    "vars": {
+        "svg": ["fill", "stroke"]
+    },
+    "specs": [
+        {
+            "name": "<var>-<k>",
+            "props": { "<var>": "<v>" },
+            "values": { "black": "#000", "white": "#fff", "current": "currentColor" },
+            "vars": ["svg"]
+        }
+    ]
+}
+```
+
+This spec will generate the following classes:
+
+```json
+{
+    "fill-black": { "fill": "#000" },
+    "fill-white": { "fill": "#fff" },
+    "fill-current": { "fill": "currentColor" },
+    "stroke-black": { "stroke": "#000" },
+    "stroke-white": { "stroke": "#fff" },
+    "stroke-current": { "stroke": "currentColor" }
+}
+```
+
 #### Parametric IDs
 
 The following parameters can (and should) be used in a spec's `name` and `props`
 to generate multiple pattern-based values (more examples below).
 
-- `<vid>` is a value from the ID column of the above variations table. If no
-  variations are requested, its value will be an empty string.
-- `<var>` is one of the expanded values for the current variation (2nd column of
-  variations table). If no variations are defined, this too will be an empty
-  string.
+- `<vid>` is the ID of the currently processed variation (e.g. a value from the
+  ID column in the above table). If no variations are requested, this value will
+  be an empty string.
+- `<var>` is one of the expanded values for the current variation (e.g. 2nd
+  column of variations table). If no variations are defined, this too will be an
+  empty string.
 - `<v>` is the currently processed value of a spec's `values`.
-- `<k>` is the key (possibly derived) for the currently processed value of a
-  spec's `values` and will depend on the type of `values` (see below)
+- `<k>` is the (possibly derived) key for the currently processed value of a
+  spec's `values` collection and will depend on the type of `values` (see [key
+  value generation](#key-value-generation))
 
 #### Values
 
 The `values` are used to populate the `props` (CSS properties). If `values` is a
 string it will be used as table-name to look up in the current spec file's
-`tables`, an object storing values which should be shared among specs (only in
-the same file).
+`tables`, an object storing value collections which should be shared among specs
+(only in the same file).
 
 Other allowed types of `values`: string array, numeric array or object of
 key-value pairs (where values are strings or numbers too). The following
@@ -293,7 +342,7 @@ Using a named `tables` entry:
     },
     "specs": [
         {
-            "name": "test<v>",
+            "name": "test-<v>",
             "props": "color",
             "values": "test"
         }
@@ -305,7 +354,7 @@ Using an array directly (here only showing the spec itself for brevity):
 
 ```json
 {
-    "name": "test<v>",
+    "name": "test-<v>",
     "props": "color",
     "values": ["red", "green", "blue"]
 }
@@ -315,7 +364,7 @@ Using an object (ignoring the keys, only using the values here):
 
 ```json
 {
-    "name": "test<v>",
+    "name": "test-<v>",
     "props": "color",
     "values": { "r": "red", "g": "green", "b": "blue"}
 }
@@ -363,13 +412,13 @@ Will result in these definitions:
 
 The `key` field is only used when `values` is resolving to an array. In this
 case this field determines how a "key" value (aka the `<k>` param for string
-interpolation, see below) will be derived for each value in `values`:
+interpolation) will be derived for each value in `values`:
 
 | **`key`** | **`values`**    | **Description**         | **Examples** |
 |-----------|-----------------|-------------------------|--------------|
 | `v`       | `[10, 20, ...]` | Actual array item value | 10, 20, ...  |
 | `i`       | `[10, 20, ...]` | Array item index        | 0, 1,...     |
-| `i1`      | `[10, 20, ...]` | Array item index + 1    | 1, 2,...     |
+| `i+1`     | `[10, 20, ...]` | Array item index + 1    | 1, 2,...     |
 
 If `values` resolves to an object, the `<k>` param will always be the key of the
 currently processed value.
@@ -410,16 +459,37 @@ ALWAYS combined using `and`:
 See [media queries in the bundled base
 specs](https://github.com/thi-ng/umbrella/blob/982fff7bfcc48f108b6ad88f854ef00be4078510/packages/meta-css/specs/_info.json#L6-L24)
 
+### Custom declarations
+
+Each of the JSON spec files can provide fixed CSS declarations via the `decls`
+key. These declarations are to be given in
+[thi.ng/hiccup-css](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-css/)
+format and are passed as is to the CSS serializer used by the `convert` and
+`export` commands. Please see
+[`/specs/normalize.mcss.json`](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/normalize.mcss.json)
+for examples and the [thi.ng/hiccup-css
+readme](https://github.com/thi-ng/umbrella/blob/develop/packages/hiccup-css/README.md)
+for detailed reference.
+
+```json
+{
+    "decls": [
+        [":root", { "font-size": "16px" }],
+        ["*", { "margin": 0 }]
+    ]
+}
+```
+
 ## Converting meta stylesheets to CSS
 
 The `convert` command is used to compile & bundle actual CSS from user-provided
-MetaCSS stylesheets (`*.meta` files) and the JSON framework specs created by the
+MetaCSS stylesheets (`.mcss` files) and the JSON framework specs created by the
 `generate` command. The meta-stylesheets support any CSS selectors, are nestable
 and compose full CSS declarations from lists of the utility classes in the
 generated framework.
 
 Each item (aka utility class name) can be prefixed with an arbitrary number of
-media query IDs (also custom defined in the framework): e.g. `dark:bg-black`
+media query IDs (also custom defined in the framework): e.g. `dark:bg-color-black`
 might refer to a CSS class to set a black ground, with the `dark:` prefix
 referring to a defined media query which only applies this class when dark mode
 is enabled...
@@ -429,9 +499,8 @@ from multiple input files. **The resulting CSS will only contain referenced
 rules** and can be generated in minified or pretty printed formats (it's also
 possible to [force include CSS classes which are otherwise
 unreferenced](#force-inclusion-of-unreferenced-classes)). Additionally, multiple
-`.meta` stylesheets can be watched for changes (their definitions getting
-merged), and existing CSS files can be included (prepended) in the bundled
-output too.
+`.mcss` stylesheets can be watched for changes (their definitions getting
+merged), and existing CSS files can be included (prepended) in the output(s) too.
 
 ```text
 metacss convert --help
@@ -440,8 +509,10 @@ Usage: metacss convert [opts] input [...]
 
 Flags:
 
+-b, --bundle            Bundle inputs (see `out` option)
 -d, --no-decls          Don't emit framework decls
 --no-header             Don't emit generated header comment
+--no-write              Don't write files, use stdout only
 -p, --pretty            Pretty print output
 -v, --verbose           Display extra process information
 -w, --watch             Watch input files for changes
@@ -457,6 +528,16 @@ Main:
 -s STR, --specs STR     [required] Path to generated JSON defs
 ```
 
+Notes:
+
+- The `--no-write` flag is only used if `--bundle` is **disabled**
+- The `--out` file arg is only used if `--bundle` is **enabled**
+
+If bundling is disabled (default), each input `.mcss` file is converted
+individually and results are written to the same directory, but using `.css` as
+file extension (and unless `--no-write` is enabled). This behavior is intended
+for local style definitions of web components.
+
 ### Meta-stylesheets syntax
 
 As mentioned earlier, the `convert` command transpiles meta-stylesheets into
@@ -480,8 +561,8 @@ selector {
 
 #### Class identifiers & media query prefixes
 
-As indicated by the above file structure, `*.meta` stylesheets purely consist of
-CSS selectors and the names of the generated framework-defined utility classes.
+As indicated by the above file structure, `.mcss` stylesheets purely consist of
+CSS selectors and the names of the utility classes defined in a generated framework.
 For example, using the [bundled framework specs](#bundled-css-base-framework),
 this simple meta-stylesheet `body { ma0 monospace blue }` creates a CSS rule for
 `body` with the definitions of the generated `ma0`, `monospace` and `blue`
@@ -498,11 +579,11 @@ body {
 #### Media query prefixes
 
 This toolchain doesn't pre-generate media-query-specific versions of any CSS
-class, and any class ID/token can be prefixed with any number of media query IDs
-(separated by `:`). These [media queries are defined as part of the framework
-generation specs](#media-query-definitions) and when used as a prefix, multiple
-query IDs can be combined freely. For example, the meta-stylesheet `a:hover {
-dark:bg-blue dark:anim:bg-anim2 }` will auto-create two separate CSS
+class, and any utility class ID/token can be prefixed with any number of media
+query IDs (separated by `:`). These [media queries are defined as part of the
+framework generation specs](#media-query-definitions) and when used as a prefix,
+multiple query IDs can be combined freely. For example, the meta-stylesheet
+`a:hover { dark:bg-color-blue dark:anim:bg-anim2 }` will auto-create two separate CSS
 `@media`-query blocks for the query IDs `dark` and `(dark AND anim)`:
 
 ```css
@@ -521,44 +602,45 @@ dark:bg-blue dark:anim:bg-anim2 }` will auto-create two separate CSS
 
 A more detailed example, split over two files (for merging & bundling):
 
-readme.meta:
+readme.mcss:
 
-```text tangle:export/readme.meta
+```text tangle:export/readme.mcss
 body {
     // no margins
     ma0
     // default colors
-    bg-white black
+    bg-color-white color-black
     // colors for dark mode
-    dark:bg-black dark:white
+    dark:bg-color-black dark:color-white
 }
 
 #app { ma3 }
 
 .bt-group-v > a {
     db w-100 l:w-50 ph3 pv2 bwb1
-    dark:bg-purple dark:white dark:b--black
-    light:bg-light-blue light:black light:b--white
+    dark:bg-color-purple dark:color-white dark:b--color-black
+    light:bg-color-light-blue light:color-black light:b--color-white
 
     // nested selectors
     {
-        :hover { bg-gold black anim:bg-anim2 }
+        :hover { bg-color-gold color-black anim:bg-anim2 }
         :first-child { brt3 }
         :last-child { brb3 bwb0 }
     }
 }
 ```
 
-readme2.meta:
+readme2.mcss:
 
 We will merge the definitions in this file with the ones above (i.e. adding &
 overriding some of the declarations, here: a larger border radius):
 
-```text tangle:export/readme2.meta
+```text tangle:export/readme2.mcss
 #app { pa2 }
 
 .bt-group-v > a {
     {
+        // override border radii
         :first-child { brt4 }
         :last-child { brb4 }
     }
@@ -568,10 +650,10 @@ overriding some of the declarations, here: a larger border radius):
 ```bash
 # if no --out dir is specified, writes result to stdout...
 # use previously generated framework for resolving all identifiers & media queries
-metacss convert --pretty --specs framework.json readme.meta readme2.meta
+metacss convert --pretty --specs framework.json readme.mcss readme2.mcss
 ```
 
-Resulting CSS bundle output:
+Resulting merged CSS bundle output:
 
 ```css
 /*! MetaCSS base v0.0.1 - generated by thi.ng/meta-css @ 2023-12-18T12:22:36.548Z */
@@ -665,7 +747,7 @@ verbatim and will **not** be transformed or reformatted in any way.
 ### Force inclusion of unreferenced classes
 
 Only the CSS classes (and their optionally associated media queries) referenced
-in a `.meta` stylesheet will appear in the export CSS bundle. This ensures that
+in a `.mcss` stylesheet will appear in the export CSS bundle. This ensures that
 the resulting CSS will only contain what's actually used (same effect as
 tree-shaking, only vastly more efficient). However, this also means any CSS
 classes (and optionally, their media query qualifiers) which are otherwise
@@ -689,23 +771,13 @@ framework generation aspects of this toolchain. This command merely takes an
 existing generated framework JSON file and serializes it to a single CSS file,
 e.g. to be then used with other CSS tooling (e.g. `postcss`).
 
-### Media query variations
-
-Users can choose to generate variations of all defined utility classes for any
-of the framework-defined media query IDs. This will create additional suffixed
-versions of all classes (with their appropriate media query wrappers) and cause
-a potentially massive output (depending on the overall number/complexity of the
-generated classes). Again, the idea is that the resulting CSS file will be
-post-processed with 3rd party CSS tooling...
-
-For example, if the framework contains a CSS class `w-50` (e.g. to set the width
-to 50%) and media queries for different screen sizes (e.g. named `ns`, `l`),
-then the export with said media queries will also generate classes `w-50-ns`
-and `w-50-l` (incl. their corresponding `@media` wrappers).
-
 As with the `convert` command, additional CSS files can also be included
 (prepended) in the output file.
 
+If the `--only-decls` option is used, **only** the [framework
+declarations](#custom-declarations) but none of the generated utility classes
+will be exported.
+
 ```text
 metacss export --help
 
@@ -715,6 +787,7 @@ Flags:
 
 -d, --no-decls          Don't emit framework decls
 --no-header             Don't emit generated header comment
+--only-decls            Only emit framework decls
 -p, --pretty            Pretty print output
 -v, --verbose           Display extra process information
 
@@ -725,11 +798,25 @@ Main:
 -o STR, --out STR       Output file (or stdout)
 ```
 
+### Media query variations
+
+Users can choose to generate variations of all defined utility classes for any
+of the framework-defined media query IDs. This will create additional suffixed
+versions of all classes (with their appropriate media query wrappers) and cause
+a potentially massive output (depending on the overall number/complexity of the
+generated classes). Again, the idea is that the resulting CSS file will be
+post-processed with 3rd party CSS tooling...
+
+For example, if the framework contains a CSS class `w-50` (e.g. to set the width
+to 50%) and media queries for different screen sizes (e.g. named `ns`, `l`),
+then the export with said media queries will also generate classes `w-50-ns`
+and `w-50-l` (incl. their corresponding `@media` wrappers).
+
 ## Bundled CSS base framework
 
-The package includes a large number of useful specs in [/specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/). These are provided as starting point to define your custom framework(s)...
+The package includes a large number of useful specs in [/specs](https://github.com/thi-ng/umbrella/blob/develop/packages/meta-css/specs/). These are readily usable, but also are provided as starting point to define your own custom framework(s)...
 
-Currently available CSS classes in MetaCSS base v0.0.1:
+Currently, there are 940 CSS utility classes defined in MetaCSS base v0.0.1:
 
 ### Classes by category
 
@@ -739,11 +826,11 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Animations / transitions <!-- notoc -->
 
-`bg-anim1` / `bg-anim2` / `bg-anim3` / `fadein1` / `fadein2` / `fadein3`
+`anim-alternate` / `anim-alternate-reverse` / `anim-normal` / `anim-reverse` / `bg-anim1` / `bg-anim2` / `bg-anim3` / `fadein1` / `fadein2` / `fadein3` / `fadeout1` / `fadeout2` / `fadeout3` / `spin1` / `spin2` / `spin3`
 
 #### Aspect ratios <!-- notoc -->
 
-`aspect-ratio-16x9` / `aspect-ratio-1x1` / `aspect-ratio-3x4` / `aspect-ratio-4x3` / `aspect-ratio-4x6` / `aspect-ratio-6x4` / `aspect-ratio-9x16` / `aspect-ratio-object`
+`aspect-ratio-1x1` / `aspect-ratio-1x2` / `aspect-ratio-2x1` / `aspect-ratio-2x3` / `aspect-ratio-3x2` / `aspect-ratio-3x4` / `aspect-ratio-4x3` / `aspect-ratio-5x7` / `aspect-ratio-7x5` / `aspect-ratio-9x16` / `aspect-ratio-16x9` / `bg-aspect-ratio-1x1` / `bg-aspect-ratio-1x2` / `bg-aspect-ratio-2x1` / `bg-aspect-ratio-2x3` / `bg-aspect-ratio-3x2` / `bg-aspect-ratio-3x4` / `bg-aspect-ratio-4x3` / `bg-aspect-ratio-5x7` / `bg-aspect-ratio-7x5` / `bg-aspect-ratio-9x16` / `bg-aspect-ratio-16x9` / `bg-aspect-ratio-object`
 
 #### Background <!-- notoc -->
 
@@ -751,15 +838,19 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Border radius <!-- notoc -->
 
-`br-100` / `br-pill` / `br0` / `br1` / `br2` / `br3` / `br4` / `brb0` / `brb1` / `brb2` / `brb3` / `brb4` / `brl0` / `brl1` / `brl2` / `brl3` / `brl4` / `brr0` / `brr1` / `brr2` / `brr3` / `brr4` / `brt0` / `brt1` / `brt2` / `brt3` / `brt4`
+`br0` / `br1` / `br2` / `br3` / `br4` / `br-100` / `br-pill` / `brb0` / `brb1` / `brb2` / `brb3` / `brb4` / `brl0` / `brl1` / `brl2` / `brl3` / `brl4` / `brr0` / `brr1` / `brr2` / `brr3` / `brr4` / `brt0` / `brt1` / `brt2` / `brt3` / `brt4`
 
 #### Border width <!-- notoc -->
 
-`bw-1px` / `bw0` / `bw1` / `bw2` / `bw3` / `bw4` / `bw5` / `bwb-1px` / `bwb0` / `bwb1` / `bwb2` / `bwb3` / `bwb4` / `bwb5` / `bwl-1px` / `bwl0` / `bwl1` / `bwl2` / `bwl3` / `bwl4` / `bwl5` / `bwr-1px` / `bwr0` / `bwr1` / `bwr2` / `bwr3` / `bwr4` / `bwr5` / `bwt-1px` / `bwt0` / `bwt1` / `bwt2` / `bwt3` / `bwt4` / `bwt5`
+`bw0` / `bw1` / `bw2` / `bw3` / `bw4` / `bw5` / `bw-1px` / `bwb0` / `bwb1` / `bwb2` / `bwb3` / `bwb4` / `bwb5` / `bwb-1px` / `bwl0` / `bwl1` / `bwl2` / `bwl3` / `bwl4` / `bwl5` / `bwl-1px` / `bwr0` / `bwr1` / `bwr2` / `bwr3` / `bwr4` / `bwr5` / `bwr-1px` / `bwt0` / `bwt1` / `bwt2` / `bwt3` / `bwt4` / `bwt5` / `bwt-1px`
 
 #### Colors <!-- notoc -->
 
-`b--black` / `b--blue` / `b--dark-blue` / `b--dark-gray` / `b--dark-green` / `b--dark-pink` / `b--dark-red` / `b--gold` / `b--gray` / `b--green` / `b--hot-pink` / `b--light-blue` / `b--light-gray` / `b--light-green` / `b--light-pink` / `b--light-purple` / `b--light-red` / `b--light-silver` / `b--light-yellow` / `b--lightest-blue` / `b--mid-gray` / `b--moon-gray` / `b--navy` / `b--near-black` / `b--near-white` / `b--orange` / `b--pink` / `b--purple` / `b--red` / `b--silver` / `b--transparent` / `b--vcol1` / `b--vcol10` / `b--vcol11` / `b--vcol12` / `b--vcol13` / `b--vcol14` / `b--vcol15` / `b--vcol16` / `b--vcol2` / `b--vcol3` / `b--vcol4` / `b--vcol5` / `b--vcol6` / `b--vcol7` / `b--vcol8` / `b--vcol9` / `b--washed-blue` / `b--washed-green` / `b--washed-red` / `b--washed-yellow` / `b--white` / `b--yellow` / `bg-black` / `bg-blue` / `bg-dark-blue` / `bg-dark-gray` / `bg-dark-green` / `bg-dark-pink` / `bg-dark-red` / `bg-gold` / `bg-gray` / `bg-green` / `bg-hot-pink` / `bg-light-blue` / `bg-light-gray` / `bg-light-green` / `bg-light-pink` / `bg-light-purple` / `bg-light-red` / `bg-light-silver` / `bg-light-yellow` / `bg-lightest-blue` / `bg-mid-gray` / `bg-moon-gray` / `bg-navy` / `bg-near-black` / `bg-near-white` / `bg-orange` / `bg-pink` / `bg-purple` / `bg-red` / `bg-silver` / `bg-transparent` / `bg-vcol1` / `bg-vcol10` / `bg-vcol11` / `bg-vcol12` / `bg-vcol13` / `bg-vcol14` / `bg-vcol15` / `bg-vcol16` / `bg-vcol2` / `bg-vcol3` / `bg-vcol4` / `bg-vcol5` / `bg-vcol6` / `bg-vcol7` / `bg-vcol8` / `bg-vcol9` / `bg-washed-blue` / `bg-washed-green` / `bg-washed-red` / `bg-washed-yellow` / `bg-white` / `bg-yellow` / `black` / `blue` / `dark-blue` / `dark-gray` / `dark-green` / `dark-pink` / `dark-red` / `gold` / `gray` / `green` / `hot-pink` / `light-blue` / `light-gray` / `light-green` / `light-pink` / `light-purple` / `light-red` / `light-silver` / `light-yellow` / `lightest-blue` / `mid-gray` / `moon-gray` / `navy` / `near-black` / `near-white` / `o-0` / `o-10` / `o-100` / `o-20` / `o-30` / `o-40` / `o-50` / `o-60` / `o-70` / `o-80` / `o-90` / `orange` / `pink` / `purple` / `red` / `silver` / `transparent` / `vcol1` / `vcol10` / `vcol11` / `vcol12` / `vcol13` / `vcol14` / `vcol15` / `vcol16` / `vcol2` / `vcol3` / `vcol4` / `vcol5` / `vcol6` / `vcol7` / `vcol8` / `vcol9` / `washed-blue` / `washed-green` / `washed-red` / `washed-yellow` / `white` / `yellow`
+`b--color-black` / `b--color-blue` / `b--color-current` / `b--color-dark-blue` / `b--color-dark-gray` / `b--color-dark-green` / `b--color-dark-pink` / `b--color-dark-red` / `b--color-gold` / `b--color-gray` / `b--color-green` / `b--color-hot-pink` / `b--color-light-blue` / `b--color-light-gray` / `b--color-light-green` / `b--color-light-pink` / `b--color-light-purple` / `b--color-light-red` / `b--color-light-silver` / `b--color-light-yellow` / `b--color-lightest-blue` / `b--color-mid-gray` / `b--color-moon-gray` / `b--color-navy` / `b--color-near-black` / `b--color-near-white` / `b--color-orange` / `b--color-pink` / `b--color-purple` / `b--color-red` / `b--color-silver` / `b--color-transparent` / `b--color-washed-blue` / `b--color-washed-green` / `b--color-washed-red` / `b--color-washed-yellow` / `b--color-white` / `b--color-yellow` / `b--color1` / `b--color2` / `b--color3` / `b--color4` / `b--color5` / `b--color6` / `b--color7` / `b--color8` / `b--color9` / `b--color10` / `b--color11` / `b--color12` / `b--color13` / `b--color14` / `b--color15` / `b--color16` / `bg-color-black` / `bg-color-blue` / `bg-color-current` / `bg-color-dark-blue` / `bg-color-dark-gray` / `bg-color-dark-green` / `bg-color-dark-pink` / `bg-color-dark-red` / `bg-color-gold` / `bg-color-gray` / `bg-color-green` / `bg-color-hot-pink` / `bg-color-light-blue` / `bg-color-light-gray` / `bg-color-light-green` / `bg-color-light-pink` / `bg-color-light-purple` / `bg-color-light-red` / `bg-color-light-silver` / `bg-color-light-yellow` / `bg-color-lightest-blue` / `bg-color-mid-gray` / `bg-color-moon-gray` / `bg-color-navy` / `bg-color-near-black` / `bg-color-near-white` / `bg-color-orange` / `bg-color-pink` / `bg-color-purple` / `bg-color-red` / `bg-color-silver` / `bg-color-transparent` / `bg-color-washed-blue` / `bg-color-washed-green` / `bg-color-washed-red` / `bg-color-washed-yellow` / `bg-color-white` / `bg-color-yellow` / `bg-color1` / `bg-color2` / `bg-color3` / `bg-color4` / `bg-color5` / `bg-color6` / `bg-color7` / `bg-color8` / `bg-color9` / `bg-color10` / `bg-color11` / `bg-color12` / `bg-color13` / `bg-color14` / `bg-color15` / `bg-color16` / `color-black` / `color-blue` / `color-current` / `color-dark-blue` / `color-dark-gray` / `color-dark-green` / `color-dark-pink` / `color-dark-red` / `color-gold` / `color-gray` / `color-green` / `color-hot-pink` / `color-light-blue` / `color-light-gray` / `color-light-green` / `color-light-pink` / `color-light-purple` / `color-light-red` / `color-light-silver` / `color-light-yellow` / `color-lightest-blue` / `color-mid-gray` / `color-moon-gray` / `color-navy` / `color-near-black` / `color-near-white` / `color-orange` / `color-pink` / `color-purple` / `color-red` / `color-silver` / `color-transparent` / `color-washed-blue` / `color-washed-green` / `color-washed-red` / `color-washed-yellow` / `color-white` / `color-yellow` / `color1` / `color2` / `color3` / `color4` / `color5` / `color6` / `color7` / `color8` / `color9` / `color10` / `color11` / `color12` / `color13` / `color14` / `color15` / `color16` / `fill-color-black` / `fill-color-blue` / `fill-color-current` / `fill-color-dark-blue` / `fill-color-dark-gray` / `fill-color-dark-green` / `fill-color-dark-pink` / `fill-color-dark-red` / `fill-color-gold` / `fill-color-gray` / `fill-color-green` / `fill-color-hot-pink` / `fill-color-light-blue` / `fill-color-light-gray` / `fill-color-light-green` / `fill-color-light-pink` / `fill-color-light-purple` / `fill-color-light-red` / `fill-color-light-silver` / `fill-color-light-yellow` / `fill-color-lightest-blue` / `fill-color-mid-gray` / `fill-color-moon-gray` / `fill-color-navy` / `fill-color-near-black` / `fill-color-near-white` / `fill-color-orange` / `fill-color-pink` / `fill-color-purple` / `fill-color-red` / `fill-color-silver` / `fill-color-transparent` / `fill-color-washed-blue` / `fill-color-washed-green` / `fill-color-washed-red` / `fill-color-washed-yellow` / `fill-color-white` / `fill-color-yellow` / `fill-color1` / `fill-color2` / `fill-color3` / `fill-color4` / `fill-color5` / `fill-color6` / `fill-color7` / `fill-color8` / `fill-color9` / `fill-color10` / `fill-color11` / `fill-color12` / `fill-color13` / `fill-color14` / `fill-color15` / `fill-color16` / `o-0` / `o-10` / `o-20` / `o-30` / `o-40` / `o-50` / `o-60` / `o-70` / `o-80` / `o-90` / `o-100` / `stroke-color-black` / `stroke-color-blue` / `stroke-color-current` / `stroke-color-dark-blue` / `stroke-color-dark-gray` / `stroke-color-dark-green` / `stroke-color-dark-pink` / `stroke-color-dark-red` / `stroke-color-gold` / `stroke-color-gray` / `stroke-color-green` / `stroke-color-hot-pink` / `stroke-color-light-blue` / `stroke-color-light-gray` / `stroke-color-light-green` / `stroke-color-light-pink` / `stroke-color-light-purple` / `stroke-color-light-red` / `stroke-color-light-silver` / `stroke-color-light-yellow` / `stroke-color-lightest-blue` / `stroke-color-mid-gray` / `stroke-color-moon-gray` / `stroke-color-navy` / `stroke-color-near-black` / `stroke-color-near-white` / `stroke-color-orange` / `stroke-color-pink` / `stroke-color-purple` / `stroke-color-red` / `stroke-color-silver` / `stroke-color-transparent` / `stroke-color-washed-blue` / `stroke-color-washed-green` / `stroke-color-washed-red` / `stroke-color-washed-yellow` / `stroke-color-white` / `stroke-color-yellow` / `stroke-color1` / `stroke-color2` / `stroke-color3` / `stroke-color4` / `stroke-color5` / `stroke-color6` / `stroke-color7` / `stroke-color8` / `stroke-color9` / `stroke-color10` / `stroke-color11` / `stroke-color12` / `stroke-color13` / `stroke-color14` / `stroke-color15` / `stroke-color16`
+
+#### Content <!-- notoc -->
+
+`content-data-lang` / `content-href` / `content-id` / `content-name` / `content-slot` / `content-title`
 
 #### Cursors <!-- notoc -->
 
@@ -767,7 +858,11 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Display mode <!-- notoc -->
 
-`db` / `df` / `dg` / `di` / `dib` / `dif` / `dig` / `dn` / `dt` / `dtc` / `dtr`
+`db` / `di` / `dib` / `dif` / `dig` / `dn` / `dt` / `dtc` / `dtr` / `flex` / `grid`
+
+#### Flex layout <!-- notoc -->
+
+`align-content-center` / `align-content-end` / `align-content-start` / `flex-column` / `flex-column-reverse` / `flex-grow0` / `flex-grow1` / `flex-nowrap` / `flex-row` / `flex-row-reverse` / `flex-shrink0` / `flex-shrink1` / `flex-wrap` / `flex-wrap-reverse` / `justify-content-center` / `justify-content-end` / `justify-content-start`
 
 #### Font families <!-- notoc -->
 
@@ -791,11 +886,11 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Grid layout <!-- notoc -->
 
-`align-items-center` / `align-items-end` / `align-items-start` / `align-items-stretch` / `align-self-center` / `align-self-end` / `align-self-start` / `align-self-stretch` / `gap-1px` / `gap-2px` / `gap-4px` / `gap-8px` / `gap0` / `gap1` / `gap2` / `gap3` / `gap4` / `gap5` / `grid-cols-1` / `grid-cols-10` / `grid-cols-2` / `grid-cols-3` / `grid-cols-4` / `grid-cols-5` / `grid-cols-6` / `grid-cols-7` / `grid-cols-8` / `grid-cols-9` / `grid-rows-1` / `grid-rows-10` / `grid-rows-2` / `grid-rows-3` / `grid-rows-4` / `grid-rows-5` / `grid-rows-6` / `grid-rows-7` / `grid-rows-8` / `grid-rows-9` / `justify-items-center` / `justify-items-end` / `justify-items-start` / `justify-items-stretch` / `justify-self-center` / `justify-self-end` / `justify-self-start` / `justify-self-stretch`
+`align-items-center` / `align-items-end` / `align-items-start` / `align-items-stretch` / `align-self-center` / `align-self-end` / `align-self-start` / `align-self-stretch` / `gap0` / `gap1` / `gap2` / `gap3` / `gap4` / `gap5` / `gap-1px` / `gap-2px` / `gap-4px` / `gap-8px` / `grid-cols-1` / `grid-cols-2` / `grid-cols-3` / `grid-cols-4` / `grid-cols-5` / `grid-cols-6` / `grid-cols-7` / `grid-cols-8` / `grid-cols-9` / `grid-cols-10` / `grid-rows-1` / `grid-rows-2` / `grid-rows-3` / `grid-rows-4` / `grid-rows-5` / `grid-rows-6` / `grid-rows-7` / `grid-rows-8` / `grid-rows-9` / `grid-rows-10` / `justify-items-center` / `justify-items-end` / `justify-items-start` / `justify-items-stretch` / `justify-self-center` / `justify-self-end` / `justify-self-start` / `justify-self-stretch`
 
 #### Height <!-- notoc -->
 
-`h-10` / `h-100` / `h-16` / `h-17` / `h-20` / `h-25` / `h-30` / `h-33` / `h-34` / `h-40` / `h-50` / `h-60` / `h-66` / `h-67` / `h-70` / `h-75` / `h-80` / `h-83` / `h-84` / `h-90` / `h1` / `h2` / `h3` / `h4` / `h5`
+`h1` / `h2` / `h3` / `h4` / `h5` / `h-10` / `h-16` / `h-17` / `h-20` / `h-25` / `h-30` / `h-33` / `h-34` / `h-40` / `h-50` / `h-60` / `h-66` / `h-67` / `h-70` / `h-75` / `h-80` / `h-83` / `h-84` / `h-90` / `h-100` / `vh-25` / `vh-50` / `vh-75` / `vh-100`
 
 #### Icons <!-- notoc -->
 
@@ -803,7 +898,7 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Letter spacing <!-- notoc -->
 
-`ls--1` / `ls--2` / `ls-0` / `ls-1` / `ls-2` / `ls-3`
+`ls-0` / `ls-1` / `ls-2` / `ls-3` / `ls--1` / `ls--2`
 
 #### Line heights <!-- notoc -->
 
@@ -815,23 +910,23 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Margin <!-- notoc -->
 
-`center` / `ma0` / `ma1` / `ma2` / `ma3` / `ma4` / `mb0` / `mb1` / `mb2` / `mb3` / `mb4` / `mh0` / `mh1` / `mh2` / `mh3` / `mh4` / `ml0` / `ml1` / `ml2` / `ml3` / `ml4` / `mr0` / `mr1` / `mr2` / `mr3` / `mr4` / `mt0` / `mt1` / `mt2` / `mt3` / `mt4` / `mv0` / `mv1` / `mv2` / `mv3` / `mv4`
+`center` / `ma0` / `ma1` / `ma2` / `ma3` / `ma4` / `ma5` / `mb0` / `mb1` / `mb2` / `mb3` / `mb4` / `mb5` / `mbe-0` / `mbe-1` / `mbe-2` / `mbe-3` / `mbe-4` / `mbe-5` / `mbs-0` / `mbs-1` / `mbs-2` / `mbs-3` / `mbs-4` / `mbs-5` / `mh0` / `mh1` / `mh2` / `mh3` / `mh4` / `mh5` / `ml0` / `ml1` / `ml2` / `ml3` / `ml4` / `ml5` / `mr0` / `mr1` / `mr2` / `mr3` / `mr4` / `mr5` / `mt0` / `mt1` / `mt2` / `mt3` / `mt4` / `mt5` / `mv0` / `mv1` / `mv2` / `mv3` / `mv4` / `mv5`
 
 #### Max. height <!-- notoc -->
 
-`maxh-10` / `maxh-100` / `maxh-16` / `maxh-17` / `maxh-20` / `maxh-25` / `maxh-30` / `maxh-33` / `maxh-34` / `maxh-40` / `maxh-50` / `maxh-60` / `maxh-66` / `maxh-67` / `maxh-70` / `maxh-75` / `maxh-80` / `maxh-83` / `maxh-84` / `maxh-90` / `maxh1` / `maxh2` / `maxh3` / `maxh4` / `maxh5`
+`maxh1` / `maxh2` / `maxh3` / `maxh4` / `maxh5` / `maxh-10` / `maxh-16` / `maxh-17` / `maxh-20` / `maxh-25` / `maxh-30` / `maxh-33` / `maxh-34` / `maxh-40` / `maxh-50` / `maxh-60` / `maxh-66` / `maxh-67` / `maxh-70` / `maxh-75` / `maxh-80` / `maxh-83` / `maxh-84` / `maxh-90` / `maxh-100`
 
 #### Max. width <!-- notoc -->
 
-`maxw-10` / `maxw-100` / `maxw-16` / `maxw-17` / `maxw-20` / `maxw-25` / `maxw-30` / `maxw-33` / `maxw-34` / `maxw-40` / `maxw-50` / `maxw-60` / `maxw-66` / `maxw-67` / `maxw-70` / `maxw-75` / `maxw-80` / `maxw-83` / `maxw-84` / `maxw-90` / `maxw1` / `maxw2` / `maxw3` / `maxw4` / `maxw5`
+`maxw1` / `maxw2` / `maxw3` / `maxw4` / `maxw5` / `maxw-10` / `maxw-16` / `maxw-17` / `maxw-20` / `maxw-25` / `maxw-30` / `maxw-33` / `maxw-34` / `maxw-40` / `maxw-50` / `maxw-60` / `maxw-66` / `maxw-67` / `maxw-70` / `maxw-75` / `maxw-80` / `maxw-83` / `maxw-84` / `maxw-90` / `maxw-100`
 
 #### Min. height <!-- notoc -->
 
-`minh-10` / `minh-100` / `minh-16` / `minh-17` / `minh-20` / `minh-25` / `minh-30` / `minh-33` / `minh-34` / `minh-40` / `minh-50` / `minh-60` / `minh-66` / `minh-67` / `minh-70` / `minh-75` / `minh-80` / `minh-83` / `minh-84` / `minh-90` / `minh1` / `minh2` / `minh3` / `minh4` / `minh5`
+`minh1` / `minh2` / `minh3` / `minh4` / `minh5` / `minh-10` / `minh-16` / `minh-17` / `minh-20` / `minh-25` / `minh-30` / `minh-33` / `minh-34` / `minh-40` / `minh-50` / `minh-60` / `minh-66` / `minh-67` / `minh-70` / `minh-75` / `minh-80` / `minh-83` / `minh-84` / `minh-90` / `minh-100`
 
 #### Min. width <!-- notoc -->
 
-`minw-10` / `minw-100` / `minw-16` / `minw-17` / `minw-20` / `minw-25` / `minw-30` / `minw-33` / `minw-34` / `minw-40` / `minw-50` / `minw-60` / `minw-66` / `minw-67` / `minw-70` / `minw-75` / `minw-80` / `minw-83` / `minw-84` / `minw-90` / `minw1` / `minw2` / `minw3` / `minw4` / `minw5`
+`minw1` / `minw2` / `minw3` / `minw4` / `minw5` / `minw-10` / `minw-16` / `minw-17` / `minw-20` / `minw-25` / `minw-30` / `minw-33` / `minw-34` / `minw-40` / `minw-50` / `minw-60` / `minw-66` / `minw-67` / `minw-70` / `minw-75` / `minw-80` / `minw-83` / `minw-84` / `minw-90` / `minw-100`
 
 #### Overflow <!-- notoc -->
 
@@ -839,11 +934,19 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Padding <!-- notoc -->
 
-`pa0` / `pa1` / `pa2` / `pa3` / `pa4` / `pb0` / `pb1` / `pb2` / `pb3` / `pb4` / `ph0` / `ph1` / `ph2` / `ph3` / `ph4` / `pl0` / `pl1` / `pl2` / `pl3` / `pl4` / `pr0` / `pr1` / `pr2` / `pr3` / `pr4` / `pt0` / `pt1` / `pt2` / `pt3` / `pt4` / `pv0` / `pv1` / `pv2` / `pv3` / `pv4`
+`pa0` / `pa1` / `pa2` / `pa3` / `pa4` / `pa5` / `pb0` / `pb1` / `pb2` / `pb3` / `pb4` / `pb5` / `pbe-0` / `pbe-1` / `pbe-2` / `pbe-3` / `pbe-4` / `pbe-5` / `pbs-0` / `pbs-1` / `pbs-2` / `pbs-3` / `pbs-4` / `pbs-5` / `ph0` / `ph1` / `ph2` / `ph3` / `ph4` / `ph5` / `pl0` / `pl1` / `pl2` / `pl3` / `pl4` / `pl5` / `pr0` / `pr1` / `pr2` / `pr3` / `pr4` / `pr5` / `pt0` / `pt1` / `pt2` / `pt3` / `pt4` / `pt5` / `pv0` / `pv1` / `pv2` / `pv3` / `pv4` / `pv5`
 
 #### Positions <!-- notoc -->
 
-`absolute` / `bottom--1` / `bottom--2` / `bottom-0` / `bottom-1` / `bottom-2` / `fixed` / `left--1` / `left--2` / `left-0` / `left-1` / `left-2` / `relative` / `right--1` / `right--2` / `right-0` / `right-1` / `right-2` / `static` / `sticky` / `top--1` / `top--2` / `top-0` / `top-1` / `top-2`
+`absolute` / `bottom-0` / `bottom-1` / `bottom-2` / `bottom--1` / `bottom--2` / `fixed` / `left-0` / `left-1` / `left-2` / `left--1` / `left--2` / `relative` / `right-0` / `right-1` / `right-2` / `right--1` / `right--2` / `static` / `sticky` / `top-0` / `top-1` / `top-2` / `top--1` / `top--2`
+
+#### Print <!-- notoc -->
+
+`break-after-avoid` / `break-after-avoid-column` / `break-after-avoid-page` / `break-after-column` / `break-after-left` / `break-after-page` / `break-after-recto` / `break-after-right` / `break-after-verso` / `break-before-avoid` / `break-before-avoid-column` / `break-before-avoid-page` / `break-before-column` / `break-before-left` / `break-before-page` / `break-before-recto` / `break-before-right` / `break-before-verso`
+
+#### Scrolling <!-- notoc -->
+
+`ss-always` / `ss-both` / `ss-center` / `ss-end` / `ss-normal` / `ss-start` / `ss-x` / `ss-y`
 
 #### Selection <!-- notoc -->
 
@@ -865,17 +968,13 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 `ttc` / `ttfsk` / `ttfw` / `tti` / `ttl` / `ttn` / `ttu`
 
-#### Undefined <!-- notoc -->
-
-`vh-100` / `vh-25` / `vh-50` / `vh-75` / `vw-100` / `vw-25` / `vw-50` / `vw-75`
-
 #### Vertical align <!-- notoc -->
 
 `v-base` / `v-btm` / `v-mid` / `v-top`
 
 #### Visibility <!-- notoc -->
 
-`hidden` / `visible`
+`collapse` / `hidden` / `visible`
 
 #### Whitespace <!-- notoc -->
 
@@ -883,7 +982,7 @@ Currently available CSS classes in MetaCSS base v0.0.1:
 
 #### Width <!-- notoc -->
 
-`w-10` / `w-100` / `w-16` / `w-17` / `w-20` / `w-25` / `w-30` / `w-33` / `w-34` / `w-40` / `w-50` / `w-60` / `w-66` / `w-67` / `w-70` / `w-75` / `w-80` / `w-83` / `w-84` / `w-90` / `w1` / `w2` / `w3` / `w4` / `w5`
+`vw-25` / `vw-50` / `vw-75` / `vw-100` / `w1` / `w2` / `w3` / `w4` / `w5` / `w-10` / `w-16` / `w-17` / `w-20` / `w-25` / `w-30` / `w-33` / `w-34` / `w-40` / `w-50` / `w-60` / `w-66` / `w-67` / `w-70` / `w-75` / `w-80` / `w-83` / `w-84` / `w-90` / `w-100`
 
 #### Z-indices <!-- notoc -->
 
@@ -920,7 +1019,7 @@ distributed as CLI bundle with **no runtime dependencies**. The following
 dependencies are only shown for informational purposes and are (partially)
 included in the bundle.
 
-Package sizes (brotli'd, pre-treeshake): ESM: 11.46 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 11.77 KB
 
 ## Dependencies
 
@@ -947,6 +1046,7 @@ directory are using this package:
 | Screenshot                                                                                                             | Description                              | Live demo                                             | Source                                                                             |
 |:-----------------------------------------------------------------------------------------------------------------------|:-----------------------------------------|:------------------------------------------------------|:-----------------------------------------------------------------------------------|
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/meta-css-basics.png" width="240"/> | Basic thi.ng/meta-css usage & testbed    | [Demo](https://demo.thi.ng/umbrella/meta-css-basics/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/meta-css-basics) |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-dnd.png" width="240"/>        | rdom drag & drop example                 | [Demo](https://demo.thi.ng/umbrella/rdom-dnd/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-dnd)        |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-lazy-load.png" width="240"/>  | Lazy loading components via @thi.ng/rdom | [Demo](https://demo.thi.ng/umbrella/rdom-lazy-load/)  | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-lazy-load)  |
 
 ## Authors
@@ -966,4 +1066,4 @@ If this project contributes to an academic publication, please cite it as:
 
 ## License
 
-&copy; 2023 Karsten Schmidt // Apache License 2.0
+&copy; 2023 - 2024 Karsten Schmidt // Apache License 2.0