@thi.ng/meta-css 0.10.3 → 0.11.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2024-04-08T14:59:30Z
+- **Last updated**: 2024-04-11T12:32:44Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.
@@ -9,6 +9,12 @@ See [Conventional Commits](https://conventionalcommits.org/) for commit guidelin
 **Note:** Unlisted _patch_ versions only involve non-code or otherwise excluded changes
 and/or version bumps of transitive dependencies.
 
+## [0.11.0](https://github.com/thi-ng/umbrella/tree/@thi.ng/meta-css@0.11.0) (2024-04-11)
+
+#### 🚀 Features
+
+- add/update CSS rule specs ([dfab906](https://github.com/thi-ng/umbrella/commit/dfab906))
+
 ### [0.10.3](https://github.com/thi-ng/umbrella/tree/@thi.ng/meta-css@0.10.3) (2024-04-08)
 
 #### ♻️ Refactoring

package/README.md

@@ -7,7 +7,7 @@
 [![Mastodon Follow](https://img.shields.io/mastodon/follow/109331703950160316?domain=https%3A%2F%2Fmastodon.thi.ng&style=social)](https://mastodon.thi.ng/@toxi)
 
 > [!NOTE]
-> This is one of 191 standalone projects, maintained as part
+> This is one of 192 standalone projects, maintained as part
 > of the [@thi.ng/umbrella](https://github.com/thi-ng/umbrella/) monorepo
 > and anti-framework.
 >
@@ -99,7 +99,9 @@
     - [Color definitions](#color-definitions)
     - [Dimensions](#dimensions)
     - [Font families](#font-families)
+    - [Fx](#fx)
     - [Grid layout](#grid-layout)
+    - [Layout](#layout)
     - [Margin](#margin)
     - [Mask](#mask)
     - [Padding](#padding)
@@ -1109,7 +1111,7 @@ These are readily usable (and used by a growing number of example projects in
 this repo), but also are provided as starting point to define your own custom
 framework(s)...
 
-Currently, there are 935 CSS utility classes (incl. 62 templates) defined in "MetaCSS base" (v0.9.0):
+Currently, there are 937 CSS utility classes (incl. 64 templates) defined in "MetaCSS base" (v0.9.0):
 
 ### Classes by category
 
@@ -2345,12 +2347,6 @@ Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child elem
 
 #### Background
 
-<details><summary>4 items:</summary>
-
-##### `bg-blur(radius)`
-
-- **radius**: incl. units
-
 ##### `bg-image(url)`
 
 - **url**: image URL
@@ -2363,8 +2359,6 @@ Sets aspect ratio of background. Use with `bg-aspect-ratio-object` on child elem
 
 - **body**: CSS value/definition
 
-</details>
-
 #### Background color
 
 ##### `bg-color(name)`
@@ -2521,6 +2515,16 @@ Sets width to given value
 
 - **body**: CSS value/definition
 
+#### Fx
+
+##### `bg-blur(radius)`
+
+- **radius**: incl. units
+
+##### `blur(radius)`
+
+- **radius**: incl. units
+
 #### Grid layout
 
 ##### `grid-cols(cols)`
@@ -2531,6 +2535,12 @@ Sets width to given value
 
 - **rows**: CSS rows definitions
 
+#### Layout
+
+##### `columns(num)`
+
+- **num**: column count
+
 #### Margin
 
 <details><summary>7 items:</summary>
@@ -2735,7 +2745,10 @@ directory are using this package:
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/blurhash.jpg" width="240"/>            | Interactive & reactive image blurhash generator                                             | [Demo](https://demo.thi.ng/umbrella/blurhash/)            | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/blurhash)            |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/layout-gridgen.png" width="240"/>      | Randomized space-filling, nested grid layout generator                                      | [Demo](https://demo.thi.ng/umbrella/layout-gridgen/)      | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/layout-gridgen)      |
 | <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/procedural-text.jpg" width="240"/>     | Procedural stochastic text generation via custom DSL, parse grammar & AST transformation    | [Demo](https://demo.thi.ng/umbrella/procedural-text/)     | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/procedural-text)     |
 | <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/ramp-scroll-anim.png" width="240"/>    | Scroll-based, reactive, multi-param CSS animation basics                                    | [Demo](https://demo.thi.ng/umbrella/ramp-scroll-anim/)    | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/ramp-scroll-anim)    |
+|                                                                                                                            | Demonstates various rdom usage patterns                                                     | [Demo](https://demo.thi.ng/umbrella/rdom-basics/)         | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-basics)         |
+| <img src="https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/rdom-delayed-update.jpg" width="240"/> | Dynamically loaded images w/ preloader state                                                | [Demo](https://demo.thi.ng/umbrella/rdom-delayed-update/) | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-delayed-update) |
 | <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-formgen.jpg" width="240"/>        | Basic usage of the declarative rdom-forms generator                                         | [Demo](https://demo.thi.ng/umbrella/rdom-formgen/)        | [Source](https://github.com/thi-ng/umbrella/tree/develop/examples/rdom-formgen)        |
 | <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)      |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/meta-css",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "description": "Data-driven CSS framework codegen, transpiler & bundler",
   "type": "module",
   "module": "./index.js",
@@ -41,20 +41,20 @@
     "tool:tangle": "../../node_modules/.bin/tangle src/**/*.ts"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.10.0",
-    "@thi.ng/args": "^2.3.29",
-    "@thi.ng/arrays": "^2.9.2",
-    "@thi.ng/checks": "^3.6.0",
-    "@thi.ng/compare": "^2.3.1",
-    "@thi.ng/errors": "^2.5.3",
-    "@thi.ng/file-io": "^2.0.1",
-    "@thi.ng/hiccup-css": "^2.7.4",
-    "@thi.ng/logger": "^3.0.8",
-    "@thi.ng/memoize": "^3.3.0",
-    "@thi.ng/rstream": "^8.3.20",
-    "@thi.ng/strings": "^3.7.29",
-    "@thi.ng/text-format": "^2.2.1",
-    "@thi.ng/transducers": "^9.0.0"
+    "@thi.ng/api": "^8.10.1",
+    "@thi.ng/args": "^2.3.30",
+    "@thi.ng/arrays": "^2.9.3",
+    "@thi.ng/checks": "^3.6.1",
+    "@thi.ng/compare": "^2.3.2",
+    "@thi.ng/errors": "^2.5.4",
+    "@thi.ng/file-io": "^2.0.2",
+    "@thi.ng/hiccup-css": "^2.7.5",
+    "@thi.ng/logger": "^3.0.9",
+    "@thi.ng/memoize": "^3.3.1",
+    "@thi.ng/rstream": "^8.4.0",
+    "@thi.ng/strings": "^3.7.30",
+    "@thi.ng/text-format": "^2.2.2",
+    "@thi.ng/transducers": "^9.0.1"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.43.0",
@@ -111,5 +111,5 @@
     "status": "alpha",
     "year": 2023
   },
-  "gitHead": "85ac4bd4d6d89f8e3689e2863d5bea0cecdb371c\n"
+  "gitHead": "18a0c063a7b33d790e5bc2486c106f45f663ac28\n"
 }

package/specs/background.mcss.json

@@ -58,14 +58,6 @@
 			},
 			"name": "bg-size",
 			"props": "background-size"
-		},
-		{
-			"doc": { "group": "background", "args": ["radius: incl. units"] },
-			"name": "bg-blur",
-			"props": {
-				"backdrop-filter": "blur({0})",
-				"-webkit-backdrop-filter": "blur({0})"
-			}
 		}
 	]
 }

package/specs/display.mcss.json

@@ -24,5 +24,12 @@
 			"props": { "visibility": "<v> !important" },
 			"values": ["hidden", "visible", "collapse"]
 		}
+	],
+	"templates": [
+		{
+			"doc": { "group": "layout", "args": ["num: column count"] },
+			"name": "columns",
+			"props": "column-count"
+		}
 	]
 }

package/specs/effects.mcss.json

@@ -0,0 +1,19 @@
+{
+	"templates": [
+		{
+			"doc": { "group": "fx", "args": ["radius: incl. units"] },
+			"name": "blur",
+			"props": {
+				"filter": "blur({0})"
+			}
+		},
+		{
+			"doc": { "group": "fx", "args": ["radius: incl. units"] },
+			"name": "bg-blur",
+			"props": {
+				"backdrop-filter": "blur({0})",
+				"-webkit-backdrop-filter": "blur({0})"
+			}
+		}
+	]
+}