@tmorrow/cre8-wc 2.3.4 → 2.3.5

package/a2ui/catalog-kg.json

@@ -10,11 +10,11 @@
     ],
     "catalog_id": "cre8-wc",
     "library": "@tmorrow/cre8-wc",
-    "library_version": "2.3.4",
+    "library_version": "2.3.5",
     "graphify_commit": "735ed2c2ff3caf037f8faf1b71e1ccdb85d80cae",
     "evidence": {
-      "story_files": 70,
-      "source_files": 86,
+      "story_files": 72,
+      "source_files": 88,
       "example_files": [
         "card-gallery.json",
         "compound-families.json",
@@ -31,8 +31,8 @@
         "tabbed-content.json"
       ]
     },
-    "total_nodes": 226,
-    "total_edges": 510,
+    "total_nodes": 232,
+    "total_edges": 517,
     "contains_edges": 111
   },
   "nodes": [
@@ -5350,6 +5350,13 @@
           "default": null,
           "description": "Alignment variant - **center** renders a card that has center aligned content/te…",
           "x-kind": "attribute"
+        },
+        "fullHeight": {
+          "type": "boolean",
+          "enum": null,
+          "default": null,
+          "description": "Full height 1) Stretches the card to fill its parent's height and width. Off by …",
+          "x-kind": "property"
         }
       },
       "slots": [
@@ -5490,6 +5497,137 @@
       ],
       "description": "Style variants - **bare** renders a card without a border and without padding ar…"
     },
+    {
+      "id": "cre8-container",
+      "type": "component",
+      "category": "Layout",
+      "description": "`cre8-container` establishes a CSS containment context so anything slotted inside it - a `cre8-container-grid`, a `cre8-…",
+      "props": {
+        "type": {
+          "type": "string",
+          "enum": [
+            "inline-size",
+            "size",
+            "normal"
+          ],
+          "default": null,
+          "description": "Containment type - **inline-size** (default) contains layout, style, and inline …",
+          "x-kind": "attribute"
+        },
+        "name": {
+          "type": "string",
+          "enum": null,
+          "default": null,
+          "description": "Container name 1) Lets `@container <name> (...)` target this container specifica…",
+          "x-kind": "attribute"
+        }
+      },
+      "slots": [],
+      "accepts_children": true,
+      "extends": null,
+      "exemplar": null
+    },
+    {
+      "id": "prop:cre8-container:type",
+      "type": "enum_prop",
+      "name": "type",
+      "component": "cre8-container",
+      "enum": [
+        "inline-size",
+        "size",
+        "normal"
+      ],
+      "description": "Containment type - **inline-size** (default) contains layout, style, and inline …"
+    },
+    {
+      "id": "cre8-container-grid",
+      "type": "component",
+      "category": "Layout",
+      "description": "`cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to N-across patterns - keyed to this element's own re…",
+      "props": {
+        "variant": {
+          "type": "string",
+          "enum": [
+            "side-by-side",
+            "2up",
+            "3up",
+            "1-3up",
+            "4up",
+            "1-4up",
+            "1-2-4up",
+            "2-4-6up"
+          ],
+          "default": null,
+          "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…",
+          "x-kind": "attribute"
+        },
+        "gap": {
+          "type": "string",
+          "enum": [
+            "sm",
+            "lg",
+            "none"
+          ],
+          "default": null,
+          "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…",
+          "x-kind": "attribute"
+        },
+        "break": {
+          "type": "string",
+          "enum": [
+            "faster",
+            "slower"
+          ],
+          "default": null,
+          "description": "Break variant - **faster** breaks the grid at a smaller container width than the…",
+          "x-kind": "attribute"
+        }
+      },
+      "slots": [],
+      "accepts_children": true,
+      "extends": null,
+      "exemplar": null
+    },
+    {
+      "id": "prop:cre8-container-grid:variant",
+      "type": "enum_prop",
+      "name": "variant",
+      "component": "cre8-container-grid",
+      "enum": [
+        "side-by-side",
+        "2up",
+        "3up",
+        "1-3up",
+        "4up",
+        "1-4up",
+        "1-2-4up",
+        "2-4-6up"
+      ],
+      "description": "Style variant - **side-by-side** yields a grid whose grid items display side-by-…"
+    },
+    {
+      "id": "prop:cre8-container-grid:gap",
+      "type": "enum_prop",
+      "name": "gap",
+      "component": "cre8-container-grid",
+      "enum": [
+        "sm",
+        "lg",
+        "none"
+      ],
+      "description": "Style variant - **none** yields a grid whose grid items are spaced without any g…"
+    },
+    {
+      "id": "prop:cre8-container-grid:break",
+      "type": "enum_prop",
+      "name": "break",
+      "component": "cre8-container-grid",
+      "enum": [
+        "faster",
+        "slower"
+      ],
+      "description": "Break variant - **faster** breaks the grid at a smaller container width than the…"
+    },
     {
       "id": "cre8-divider",
       "type": "component",
@@ -5807,7 +5945,15 @@
       "type": "component",
       "category": "Layout",
       "description": "Grid Item component.",
-      "props": {},
+      "props": {
+        "fullHeight": {
+          "type": "boolean",
+          "enum": null,
+          "default": null,
+          "description": "Full height 1) Stretches the item to fill the height of its row. Off by default …",
+          "x-kind": "property"
+        }
+      },
       "slots": [],
       "accepts_children": true,
       "extends": "Cre8Element",
@@ -6041,6 +6187,13 @@
           "default": "1rem",
           "description": "Top style 1) Used to create dynamic sticky containers that can be adjusted based…",
           "x-kind": "attribute"
+        },
+        "fullHeight": {
+          "type": "boolean",
+          "enum": null,
+          "default": null,
+          "description": "Full height 1) Stretches the section to fill the height of its row in `cre8-layo…",
+          "x-kind": "property"
         }
       },
       "slots": [],
@@ -10588,6 +10741,36 @@
       "to": "prop:cre8-card:variant",
       "rel": "HAS_ENUM_PROP"
     },
+    {
+      "from": "cre8-container",
+      "to": "cat:Layout",
+      "rel": "BELONGS_TO"
+    },
+    {
+      "from": "cre8-container",
+      "to": "prop:cre8-container:type",
+      "rel": "HAS_ENUM_PROP"
+    },
+    {
+      "from": "cre8-container-grid",
+      "to": "cat:Layout",
+      "rel": "BELONGS_TO"
+    },
+    {
+      "from": "cre8-container-grid",
+      "to": "prop:cre8-container-grid:variant",
+      "rel": "HAS_ENUM_PROP"
+    },
+    {
+      "from": "cre8-container-grid",
+      "to": "prop:cre8-container-grid:gap",
+      "rel": "HAS_ENUM_PROP"
+    },
+    {
+      "from": "cre8-container-grid",
+      "to": "prop:cre8-container-grid:break",
+      "rel": "HAS_ENUM_PROP"
+    },
     {
       "from": "cre8-divider",
       "to": "cat:Layout",
@@ -11303,7 +11486,7 @@
       "to": "cre8-text-passage",
       "rel": "CONTAINS",
       "slot": "default",
-      "count": 26,
+      "count": 27,
       "evidence": [
         {
           "kind": "story",
@@ -12919,6 +13102,11 @@
       "to": "cre8-checkbox-field-item",
       "rel": "IN_FAMILY"
     },
+    {
+      "from": "cre8-container",
+      "to": "cre8-container-grid",
+      "rel": "IN_FAMILY"
+    },
     {
       "from": "cre8-dropdown",
       "to": "cre8-dropdown-item",

package/a2ui/catalog.compact.json

@@ -1,8 +1,8 @@
 {
   "contractVersion": 1,
-  "sourceCatalog": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.3.3",
-  "libraryVersion": "2.3.3",
-  "componentCount": 86,
+  "sourceCatalog": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.3.5",
+  "libraryVersion": "2.3.5",
+  "componentCount": 88,
   "components": [
     {
       "name": "cre8-accordion",
@@ -325,6 +325,9 @@
         },
         "align": {
           "type": "string"
+        },
+        "fullHeight": {
+          "type": "boolean"
         }
       },
       "slots": [
@@ -500,6 +503,55 @@
         "change"
       ]
     },
+    {
+      "name": "cre8-container",
+      "category": "Layout",
+      "props": {
+        "type": {
+          "enum": [
+            "inline-size",
+            "size",
+            "normal"
+          ]
+        },
+        "name": {
+          "type": "string"
+        }
+      },
+      "acceptsChildren": true
+    },
+    {
+      "name": "cre8-container-grid",
+      "category": "Layout",
+      "props": {
+        "variant": {
+          "enum": [
+            "side-by-side",
+            "2up",
+            "3up",
+            "1-3up",
+            "4up",
+            "1-4up",
+            "1-2-4up",
+            "2-4-6up"
+          ]
+        },
+        "gap": {
+          "enum": [
+            "sm",
+            "lg",
+            "none"
+          ]
+        },
+        "break": {
+          "enum": [
+            "faster",
+            "slower"
+          ]
+        }
+      },
+      "acceptsChildren": true
+    },
     {
       "name": "cre8-danger-button",
       "category": "Actions",
@@ -988,7 +1040,11 @@
     {
       "name": "cre8-grid-item",
       "category": "Layout",
-      "props": {},
+      "props": {
+        "fullHeight": {
+          "type": "boolean"
+        }
+      },
       "acceptsChildren": true
     },
     {
@@ -1158,6 +1214,9 @@
         },
         "top": {
           "type": "string"
+        },
+        "fullHeight": {
+          "type": "boolean"
         }
       },
       "acceptsChildren": true

package/a2ui/catalog.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.3.3",
+  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.3.5",
   "title": "cre8-wc A2UI Catalog",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "x-native-events": [
@@ -54,7 +54,7 @@
   "x-a2ui": {
     "catalogId": "cre8-wc",
     "library": "@tmorrow/cre8-wc",
-    "libraryVersion": "2.3.3",
+    "libraryVersion": "2.3.5",
     "tagPrefix": "cre8",
     "framework": "Lit 3.3.1"
   },
@@ -218,6 +218,12 @@
         {
           "$ref": "#/$defs/components/cre8-card"
         },
+        {
+          "$ref": "#/$defs/components/cre8-container"
+        },
+        {
+          "$ref": "#/$defs/components/cre8-container-grid"
+        },
         {
           "$ref": "#/$defs/components/cre8-divider"
         },
@@ -5191,6 +5197,11 @@
                 "type": "string",
                 "const": "center",
                 "x-kind": "attribute"
+              },
+              "fullHeight": {
+                "description": "Full height\n1) Stretches the card to fill its parent's height and width. Off by\n  default - only turn this on when the card is a flex/grid item whose\n  siblings should determine its height, e.g. a row of cards that should\n  line up edge to edge regardless of how much content each one has.",
+                "type": "boolean",
+                "x-kind": "property"
               }
             }
           },
@@ -5240,6 +5251,133 @@
           "footer": "(Optional) Content in the card's footer"
         }
       },
+      "cre8-container": {
+        "type": "object",
+        "title": "cre8-container",
+        "x-category": "Layout",
+        "description": "`cre8-container` establishes a CSS containment context so anything slotted\ninside it - a `cre8-container-grid`, a `cre8-card`, plain markup - can be\nstyled with `@container` queries against *this element's own rendered\nsize*, not the viewport. It renders no visible chrome of its own; the only\neffect is making container queries possible for its content.\n\n# How to Use\n1. Wrap `cre8-container` around whatever should respond to the space it is\nactually given rather than the screen size - a sidebar widget, a card\nthat might land in a narrow or a wide column depending on a layout the\ncomponent itself can't see.\n2. Write `@container` rules in your own stylesheet keyed to `name`, if\nset, to target this container specifically when containers are nested\nand the nearest one isn't the one you mean to query.",
+        "required": [
+          "component"
+        ],
+        "properties": {
+          "component": {
+            "const": "cre8-container",
+            "description": "Component tag name"
+          },
+          "props": {
+            "type": "object",
+            "additionalProperties": false,
+            "properties": {
+              "type": {
+                "description": "Containment type\n- **inline-size** (default) contains layout, style, and inline size -\n  the right choice for width-based `@container` queries on a\n  block-level container\n- **size** contains both the inline and block size, so `@container`\n  rules can also query height - only use this when the container's own\n  height does not depend on its content\n- **normal** names the container without adding size containment, for\n  `@container style(...)` queries",
+                "type": "string",
+                "enum": [
+                  "inline-size",
+                  "size",
+                  "normal"
+                ],
+                "x-kind": "attribute"
+              },
+              "name": {
+                "description": "Container name\n1) Lets `@container <name> (...)` target this container specifically\n  when containers are nested and the nearest one isn't the one being\n  queried.",
+                "type": "string",
+                "x-kind": "attribute"
+              }
+            }
+          },
+          "children": {
+            "type": "array",
+            "description": "The content to establish a containment context for",
+            "items": {
+              "$ref": "#/$defs/Child"
+            }
+          },
+          "events": {
+            "type": "object",
+            "description": "Event bindings. Each key is an event name; the value names the handler to emit.",
+            "propertyNames": {
+              "$ref": "#/$defs/NativeEventName"
+            },
+            "additionalProperties": {
+              "$ref": "#/$defs/EventBinding"
+            }
+          }
+        },
+        "additionalProperties": false
+      },
+      "cre8-container-grid": {
+        "type": "object",
+        "title": "cre8-container-grid",
+        "x-category": "Layout",
+        "description": "`cre8-container-grid` is `cre8-grid`'s layout vocabulary - stacked to\nN-across patterns - keyed to this element's own rendered width via\n`@container` instead of the viewport via `@media`. It establishes its own\ncontainment context, so use it wherever the number of columns should\ndepend on the space actually available: a grid placed in a narrow sidebar\non a wide viewport still stacks, and a grid placed in a wide main column\non a narrow viewport still goes multi-up.",
+        "required": [
+          "component"
+        ],
+        "properties": {
+          "component": {
+            "const": "cre8-container-grid",
+            "description": "Component tag name"
+          },
+          "props": {
+            "type": "object",
+            "additionalProperties": false,
+            "properties": {
+              "variant": {
+                "description": "Style variant\n- **side-by-side** yields a grid whose grid items display side-by-side (2 per row) regardless of width\n- **2up** yields a grid whose grid items are stacked when this element is narrow\n  but display side-by-side once it has enough of its own width to do so\n- **3up** yields a grid whose grid items are stacked when narrow,\n  transforms to a 2-across pattern and then transforms again to a 3-across pattern\n- **1-3up** yields a grid whose grid items are stacked when narrow\n  and transforms to a 3-across pattern once wide enough\n- **4up** yields a grid whose grid items are stacked when narrow,\n  transforms to a 2-across pattern, transforms again to a 3-across pattern,\n  and ultimately transforms to a 4-across pattern\n- **1-2-4up** yields a grid whose grid items are stacked when narrow,\n  transforms to a 2-across pattern, and ultimately transforms to a 4-across pattern\n- **1-4up** yields a grid whose grid items are stacked when narrow,\n  transforms to a 4-across pattern once wide enough",
+                "type": "string",
+                "enum": [
+                  "side-by-side",
+                  "2up",
+                  "3up",
+                  "1-3up",
+                  "4up",
+                  "1-4up",
+                  "1-2-4up",
+                  "2-4-6up"
+                ],
+                "x-kind": "attribute"
+              },
+              "gap": {
+                "description": "Style variant\n- **none** yields a grid whose grid items are spaced without any gutter in between\n- **sm** yields a grid whose grid items are spaced with a gap smaller than the default\n- **lg** yields a grid whose grid items are spaced with a gap larger than the default",
+                "type": "string",
+                "enum": [
+                  "sm",
+                  "lg",
+                  "none"
+                ],
+                "x-kind": "attribute"
+              },
+              "break": {
+                "description": "Break variant\n- **faster** breaks the grid at a smaller container width than the default.\n  Example: 2up grid breaks to 2 per row at a smaller width than default\n- **slower** breaks the grid at a larger container width than the default.\n  Example: 2up grid breaks to 2 per row at a larger width than default",
+                "type": "string",
+                "enum": [
+                  "faster",
+                  "slower"
+                ],
+                "x-kind": "attribute"
+              }
+            }
+          },
+          "children": {
+            "type": "array",
+            "description": "The grid items",
+            "items": {
+              "$ref": "#/$defs/Child"
+            }
+          },
+          "events": {
+            "type": "object",
+            "description": "Event bindings. Each key is an event name; the value names the handler to emit.",
+            "propertyNames": {
+              "$ref": "#/$defs/NativeEventName"
+            },
+            "additionalProperties": {
+              "$ref": "#/$defs/EventBinding"
+            }
+          }
+        },
+        "additionalProperties": false
+      },
       "cre8-divider": {
         "type": "object",
         "title": "cre8-divider",
@@ -5380,7 +5518,13 @@
           "props": {
             "type": "object",
             "additionalProperties": false,
-            "properties": {}
+            "properties": {
+              "fullHeight": {
+                "description": "Full height\n1) Stretches the item to fill the height of its row. Off by default -\n  only turn this on when the items in a row should line up edge to\n  edge regardless of how much content each one has.",
+                "type": "boolean",
+                "x-kind": "property"
+              }
+            }
           },
           "children": {
             "type": "array",
@@ -5588,6 +5732,11 @@
                 "default": "1rem",
                 "type": "string",
                 "x-kind": "attribute"
+              },
+              "fullHeight": {
+                "description": "Full height\n1) Stretches the section to fill the height of its row in `cre8-layout`'s\n  grid. Off by default - only turn this on when the sections in a row\n  should line up edge to edge regardless of how much content each one\n  has.",
+                "type": "boolean",
+                "x-kind": "property"
               }
             }
           },

package/a2ui/inert-props.json

@@ -1,6 +1,6 @@
 {
   "$comment": "Generated by a2ui/render-audit.mjs. Props that are declared in the catalog but never reach the DOM — confirmed twice, by rendering under jsdom and by reading the component source. Setting one validates cleanly and does nothing.",
-  "libraryVersion": "2.1.1",
+  "libraryVersion": "2.3.4",
   "components": {
     "cre8-link-list-item": {
       "text": {