@c2n/mcp 0.0.15 → 0.0.17

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.15",
+  "c2nVersion": "0.0.17",
   "categories": [
     "Inputs",
     "Buttons",
@@ -1303,6 +1303,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -1855,7 +1872,8 @@
           "c2-attachment"
         ],
         "usedBy": [
-          "c2-attachment"
+          "c2-attachment",
+          "c2-upload"
         ]
       },
       "install": {
@@ -5126,6 +5144,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -6230,7 +6265,8 @@
         "internal": [],
         "slotted": [],
         "usedBy": [
-          "c2-button-group"
+          "c2-button-group",
+          "c2-upload"
         ]
       },
       "install": {
@@ -8299,6 +8335,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -10594,34 +10647,34 @@
             {
               "name": "--c2-chatbot--border-top",
               "type": "border",
-              "default": "1px solid #e4e4e7",
+              "default": "1px solid rgb(177, 177, 177)",
               "part": "",
               "property": "border-top",
-              "token": "--c2-theme--color-outline-variant"
+              "token": "--c2-theme--border"
             },
             {
               "name": "--c2-chatbot--border-right",
               "type": "border",
-              "default": "1px solid #e4e4e7",
+              "default": "1px solid rgb(177, 177, 177)",
               "part": "",
               "property": "border-right",
-              "token": "--c2-theme--color-outline-variant"
+              "token": "--c2-theme--border"
             },
             {
               "name": "--c2-chatbot--border-bottom",
               "type": "border",
-              "default": "1px solid #e4e4e7",
+              "default": "1px solid rgb(177, 177, 177)",
               "part": "",
               "property": "border-bottom",
-              "token": "--c2-theme--color-outline-variant"
+              "token": "--c2-theme--border"
             },
             {
               "name": "--c2-chatbot--border-left",
               "type": "border",
-              "default": "1px solid #e4e4e7",
+              "default": "1px solid rgb(177, 177, 177)",
               "part": "",
               "property": "border-left",
-              "token": "--c2-theme--color-outline-variant"
+              "token": "--c2-theme--border"
             },
             {
               "name": "--c2-chatbot__header--padding",
@@ -10633,18 +10686,18 @@
             {
               "name": "--c2-chatbot__header--background",
               "type": "color",
-              "default": "#ffffff",
+              "default": "rgb(248, 248, 248)",
               "part": "header",
               "property": "background",
-              "token": "--c2-theme--color-surface"
+              "token": "--c2-theme--color-surface-container-low"
             },
             {
               "name": "--c2-chatbot__header--border-bottom",
               "type": "border",
-              "default": "1px solid #e4e4e7",
+              "default": "1px solid rgb(177, 177, 177)",
               "part": "header",
               "property": "border-bottom",
-              "token": "--c2-theme--color-outline-variant"
+              "token": "--c2-theme--border"
             }
           ]
         }
@@ -13268,10 +13321,9 @@
             {
               "name": "--c2-color-select__popover--background-color",
               "type": "color",
-              "default": "rgb(255, 255, 255)",
+              "default": "rgb(253, 253, 253)",
               "part": "popover",
-              "property": "background-color",
-              "token": "--c2-theme--color-surface"
+              "property": "background-color"
             },
             {
               "name": "--c2-color-select__popover--gap",
@@ -13520,14 +13572,6 @@
           ],
           "cssParts": [],
           "cssProperties": [
-            {
-              "name": "--c2-color-slider--border-radius",
-              "type": "border-radius",
-              "default": "8px",
-              "part": "",
-              "property": "border-radius",
-              "token": "--c2-theme--radius-lg"
-            },
             {
               "name": "--c2-color-slider--border-top-left-radius",
               "type": "border-radius",
@@ -13563,33 +13607,30 @@
             {
               "name": "--c2-color-slider--border-top",
               "type": "border",
-              "default": "1px solid rgb(177, 177, 177)",
+              "default": "1px solid rgb(248, 248, 248)",
               "part": "",
-              "property": "border-top",
-              "token": "--c2-theme--border"
+              "property": "border-top"
             },
             {
               "name": "--c2-color-slider--border-right",
               "type": "border",
-              "default": "1px solid rgb(177, 177, 177)",
+              "default": "1px solid rgb(248, 248, 248)",
               "part": "",
-              "property": "border-right",
-              "token": "--c2-theme--border"
+              "property": "border-right"
             },
             {
               "name": "--c2-color-slider--border-bottom",
               "type": "border",
-              "default": "1px solid rgb(177, 177, 177)",
+              "default": "1px solid rgb(248, 248, 248)",
               "part": "",
-              "property": "border-bottom",
-              "token": "--c2-theme--border"
+              "property": "border-bottom"
             },
             {
-              "name": "--c2-color-slider--borde-leftr",
+              "name": "--c2-color-slider--border-left",
               "type": "border",
-              "default": "1px solid rgb(177, 177, 177)",
+              "default": "1px solid rgb(248, 248, 248)",
               "part": "",
-              "property": "borde-leftr",
+              "property": "border-left",
               "token": "--c2-theme--border"
             },
             {
@@ -17932,6 +17973,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -20582,6 +20640,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -21036,6 +21111,7 @@
             {
               "name": "--c2-link-button__icon--color",
               "type": "color",
+              "default": "currentColor",
               "part": "icon",
               "property": "color"
             }
@@ -22668,6 +22744,899 @@
       ],
       "hasGallery": true
     },
+    "log-viewer": {
+      "id": "log-viewer",
+      "package": "@c2n/log-viewer",
+      "title": "Log Viewer",
+      "description": "Explore large logs with variable-height virtual scrolling and sticky tabular attributes.",
+      "intro": "Read thousands of log entries without rendering thousands of rows. `c2-log-viewer` combines **virtual scrolling for variable-height text** with **sticky attributes** that keep a long entry's context visible. Single-line messages, wrapped output and multiline traces can share the same viewport.",
+      "category": "Data display",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/log-viewer",
+      "elements": [
+        {
+          "tag": "c2-log-viewer",
+          "className": "LogViewer",
+          "modulePath": "@c2n/log-viewer",
+          "description": "A text-only, variable-height virtual log viewport. Filters and search are controlled by the application.\nWith the viewport focused, Home jumps to the first entry and End follows the latest; Ctrl/Command variants also work.",
+          "attributes": [
+            {
+              "name": "tabular",
+              "type": "boolean",
+              "default": "true",
+              "description": "Align attributes vertically in columns; false displays concatenated entry text."
+            },
+            {
+              "name": "wrap",
+              "type": "boolean",
+              "default": "false",
+              "description": "Break text to fit the available column or viewport width."
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "token",
+              "description": "Colored log token; severity and timestamp tokens use the existing level and timestamp colors"
+            },
+            {
+              "name": "copy-icon",
+              "description": "Copy and success SVG icon"
+            },
+            {
+              "name": "copy-button",
+              "description": "Copy the complete message of a visible entry; revealed on hover or keyboard focus"
+            },
+            {
+              "name": "highlight",
+              "description": "Matching visible entry or plain text slice in highlight mode"
+            },
+            {
+              "name": "viewport",
+              "description": "Keyboard accessible scroll surface"
+            },
+            {
+              "name": "content",
+              "description": "Virtual content and its total scroll extent"
+            },
+            {
+              "name": "entry",
+              "description": "Visible tabular entry"
+            },
+            {
+              "name": "cell",
+              "description": "Attribute column containing its sticky text"
+            },
+            {
+              "name": "text",
+              "description": "Plain text content"
+            },
+            {
+              "name": "empty",
+              "description": "Empty state"
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-log-viewer--height",
+              "type": "CSS value",
+              "default": "480px",
+              "part": "",
+              "property": "height",
+              "description": "Viewport height"
+            },
+            {
+              "name": "--c2-log-viewer--background",
+              "type": "color",
+              "default": "#0b1220",
+              "part": "",
+              "property": "background",
+              "description": "Terminal surface"
+            },
+            {
+              "name": "--c2-log-viewer--color",
+              "type": "color",
+              "default": "#d3deee",
+              "part": "",
+              "property": "color",
+              "description": "Text color"
+            },
+            {
+              "name": "--c2-log-viewer--font-family",
+              "type": "CSS value",
+              "default": "ui-monospace, monospace",
+              "part": "",
+              "property": "font-family",
+              "description": "Text font"
+            },
+            {
+              "name": "--c2-log-viewer--font-size",
+              "type": "CSS value",
+              "default": "13px",
+              "part": "",
+              "property": "font-size",
+              "description": "Text size"
+            },
+            {
+              "name": "--c2-log-viewer--line-height",
+              "type": "CSS value",
+              "default": "1.65",
+              "part": "",
+              "property": "line-height",
+              "description": "Line spacing"
+            },
+            {
+              "name": "--c2-log-viewer--border",
+              "type": "CSS value",
+              "default": "1px solid #263449",
+              "part": "",
+              "property": "border",
+              "description": "Outer edge"
+            },
+            {
+              "name": "--c2-log-viewer--border-radius",
+              "type": "CSS value",
+              "default": "12px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Outer corners"
+            },
+            {
+              "name": "--c2-log-viewer__message--min-width",
+              "type": "CSS value",
+              "default": "240px",
+              "part": "message",
+              "property": "min-width",
+              "description": "Minimum primary column width"
+            },
+            {
+              "name": "--c2-log-viewer__cell--padding",
+              "type": "CSS value",
+              "default": "8px 12px",
+              "part": "cell",
+              "property": "padding",
+              "description": "Attribute cell inset included in row measurements"
+            },
+            {
+              "name": "--c2-log-viewer__text--inset",
+              "type": "CSS value",
+              "default": "12px",
+              "part": "text",
+              "property": "inset",
+              "description": "Horizontal inset for continuous text"
+            },
+            {
+              "name": "--c2-log-viewer__empty--padding",
+              "type": "CSS value",
+              "default": "24px",
+              "part": "empty",
+              "property": "padding",
+              "description": "Empty state inset"
+            },
+            {
+              "name": "--c2-log-viewer__empty--color",
+              "type": "color",
+              "default": "#94a3b8",
+              "part": "empty",
+              "property": "color",
+              "description": "Empty state text"
+            },
+            {
+              "name": "--c2-log-viewer__viewport__focus--outline",
+              "type": "CSS value",
+              "default": "2px solid #60a5fa",
+              "part": "viewport",
+              "state": "focus",
+              "property": "outline",
+              "description": "Keyboard focus indicator"
+            },
+            {
+              "name": "--c2-log-viewer__timestamp--color",
+              "type": "color",
+              "default": "#94a3b8",
+              "part": "timestamp",
+              "property": "color",
+              "description": "Timestamp text"
+            },
+            {
+              "name": "--c2-log-viewer__attribute--color",
+              "type": "color",
+              "default": "#a5b4cc",
+              "part": "attribute",
+              "property": "color",
+              "description": "Secondary attribute text"
+            },
+            {
+              "name": "--c2-log-viewer__level--color",
+              "type": "color",
+              "default": "#c4b5fd",
+              "part": "level",
+              "property": "color",
+              "description": "Unclassified level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__info--color",
+              "type": "color",
+              "default": "#6ee7b7",
+              "part": "level/info",
+              "property": "color",
+              "description": "Info level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__warning--color",
+              "type": "color",
+              "default": "#fcd34d",
+              "part": "level/warning",
+              "property": "color",
+              "description": "Warn and warning level text"
+            },
+            {
+              "name": "--c2-log-viewer__level__error--color",
+              "type": "color",
+              "default": "#fda4af",
+              "part": "level",
+              "state": "error",
+              "property": "color",
+              "description": "Error and fatal level text"
+            },
+            {
+              "name": "--c2-log-viewer__entry--box-shadow",
+              "type": "CSS value",
+              "default": "inset 0 -1px 0 #1b293d",
+              "part": "entry",
+              "property": "box-shadow",
+              "description": "Subtle row divider without changing measured geometry"
+            },
+            {
+              "name": "--c2-log-viewer__entry__hover--background",
+              "type": "color",
+              "default": "#142238",
+              "part": "entry",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered row surface"
+            },
+            {
+              "name": "--c2-log-viewer__entry__highlighted--background",
+              "type": "color",
+              "default": "#17304c",
+              "part": "entry",
+              "state": "highlighted",
+              "property": "background",
+              "description": "Matching entry surface in highlight mode"
+            },
+            {
+              "name": "--c2-log-viewer__entry__highlighted--box-shadow",
+              "type": "CSS value",
+              "default": "inset 3px 0 0 #60a5fa",
+              "part": "entry",
+              "state": "highlighted",
+              "property": "box-shadow",
+              "description": "Matching entry accent without changing measured geometry"
+            },
+            {
+              "name": "--c2-log-viewer__copy--size",
+              "type": "CSS value",
+              "default": "28px",
+              "part": "copy",
+              "property": "size",
+              "description": "Copy button size"
+            },
+            {
+              "name": "--c2-log-viewer__copy--icon-size",
+              "type": "CSS value",
+              "default": "55%",
+              "part": "copy",
+              "property": "icon-size",
+              "description": "Copy and success icon width and height"
+            },
+            {
+              "name": "--c2-log-viewer__copy--stroke-width",
+              "type": "number",
+              "default": "1.8",
+              "part": "copy",
+              "property": "stroke-width",
+              "description": "Copy and success SVG stroke width"
+            },
+            {
+              "name": "--c2-log-viewer__copy--inset",
+              "type": "CSS value",
+              "default": "8px",
+              "part": "copy",
+              "property": "inset",
+              "description": "Copy button offset from viewport edges"
+            },
+            {
+              "name": "--c2-log-viewer__copy--padding-top",
+              "type": "CSS value",
+              "default": "4px",
+              "part": "copy",
+              "property": "padding-top",
+              "description": "Space above the copy button within an entry"
+            },
+            {
+              "name": "--c2-log-viewer__copy--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "copy",
+              "property": "background",
+              "description": "Copy button surface"
+            },
+            {
+              "name": "--c2-log-viewer__copy--color",
+              "type": "color",
+              "default": "#dbeafe",
+              "part": "copy",
+              "property": "color",
+              "description": "Copy icon color"
+            },
+            {
+              "name": "--c2-log-viewer__copy--border",
+              "type": "CSS value",
+              "default": "none",
+              "part": "copy",
+              "property": "border",
+              "description": "Copy button edge"
+            },
+            {
+              "name": "--c2-log-viewer__copy--border-radius",
+              "type": "CSS value",
+              "default": "6px",
+              "part": "copy",
+              "property": "border-radius",
+              "description": "Copy button corners"
+            },
+            {
+              "name": "--c2-log-viewer__copy__hover--background",
+              "type": "color",
+              "default": "#2a4263",
+              "part": "copy",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered copy button surface"
+            },
+            {
+              "name": "--c2-log-viewer__copy__focus--outline",
+              "type": "CSS value",
+              "default": "2px solid #60a5fa",
+              "part": "copy",
+              "state": "focus",
+              "property": "outline",
+              "description": "Copy button keyboard focus"
+            },
+            {
+              "name": "--c2-log-viewer__token--color",
+              "type": "color",
+              "default": "#93c5fd",
+              "part": "token",
+              "property": "color",
+              "description": "Quoted values, numbers, URLs and recognizable IDs in log text"
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/log-viewer @c2n/theme",
+        "import": "import '@c2n/log-viewer'",
+        "importClass": "import { LogViewer } from '@c2n/log-viewer'"
+      },
+      "examples": [
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Real log streams",
+          "description": "Default Real log streams example for c2-log-viewer.",
+          "isDefault": true,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"server-default\" data-log-viewer-demo=\"virtual\" wrap aria-label=\"Server access log with 10,000 requests\"></c2-log-viewer>",
+          "css": ".server-default { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce checkout · sticky context",
+          "section": "Real log streams",
+          "description": "Commerce checkout · sticky context Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-trace\" data-log-viewer-demo=\"sticky\" wrap aria-label=\"Checkout incident with sticky attributes\"></c2-log-viewer>",
+          "css": ".commerce-trace { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Server output · continuous text",
+          "section": "Real log streams",
+          "description": "Server output · continuous text Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"server-plain\" data-log-viewer-demo=\"server\" tabular=\"false\" wrap aria-label=\"Continuous server output\"></c2-log-viewer>",
+          "css": ".server-plain { width: 100%; height: 300px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce operations · highlighted matches",
+          "section": "Real log streams",
+          "description": "Commerce operations · highlighted matches Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-matches\" data-log-viewer-demo=\"matches\" wrap aria-label=\"Commerce logs with warnings and errors highlighted\"></c2-log-viewer>",
+          "css": ".commerce-matches { width: 100%; height: 340px; }"
+        },
+        {
+          "kind": "gallery",
+          "label": "Commerce operations · light theme",
+          "section": "Real log streams",
+          "description": "Commerce operations · light theme Real log streams example for c2-log-viewer.",
+          "isDefault": false,
+          "tags": [
+            "c2-log-viewer"
+          ],
+          "html": "<c2-log-viewer class=\"commerce-light\" data-log-viewer-demo=\"commerce\" wrap aria-label=\"Online store checkout and order logs\"></c2-log-viewer>",
+          "css": ".commerce-light {\n  width: 100%; height: 320px;\n  --c2-log-viewer--background: #f8fafc;\n  --c2-log-viewer--color: #1e293b;\n  --c2-log-viewer--border: 1px solid #cbd5e1;\n  --c2-log-viewer__token--color: #1d4ed8;\n  --c2-log-viewer__timestamp--color: #64748b;\n  --c2-log-viewer__attribute--color: #475569;\n  --c2-log-viewer__level--color: #6d28d9;\n  --c2-log-viewer__level__info--color: #047857;\n  --c2-log-viewer__level__warning--color: #92400e;\n  --c2-log-viewer__level__error--color: #be123c;\n  --c2-log-viewer__entry--box-shadow: inset 0 -1px 0 #e2e8f0;\n  --c2-log-viewer__entry__hover--background: #eef2ff;\n  --c2-log-viewer__entry__highlighted--background: #dbeafe;\n  --c2-log-viewer__entry__highlighted--box-shadow: inset 3px 0 0 #2563eb;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-log-viewer data-log-viewer-demo=\"preview\" wrap aria-label=\"Store server log\" style=\"height:180px;width:300px\"></c2-log-viewer>"
+        }
+      ],
+      "hasGallery": true
+    },
+    "masonry": {
+      "id": "masonry",
+      "package": "@c2n/masonry",
+      "title": "Masonry",
+      "description": "Automatically pack differently sized dashboard tiles, then move or resize them in edit mode.",
+      "intro": "`c2-masonry` packs direct `c2-masonry-item` children into the earliest available cells. It is useful when cards or charts have explicit row and column spans but the application should not manage coordinates. For fixed, author-positioned tracks, use [`c2-dashboard`](/web-components/components/dashboard) instead. Content stays in the application's markup, so forms and links work normally. If it is taller than a tile's declared height, it scrolls inside the tile.",
+      "category": "Layout",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/masonry",
+      "elements": [
+        {
+          "tag": "c2-masonry",
+          "className": "Masonry",
+          "modulePath": "@c2n/masonry",
+          "description": "Automatically packs direct `c2-masonry-item` children into the first available grid cells.\nUse `c2-dashboard` when the application must choose fixed coordinates instead.",
+          "attributes": [
+            {
+              "name": "editable",
+              "type": "boolean",
+              "default": "false",
+              "description": "Shows separate move and resize controls when every tile has a unique identity."
+            },
+            {
+              "name": "save-layout",
+              "type": "boolean",
+              "default": "true",
+              "description": "Saves committed user layouts to localStorage and restores them on load. Use `save-layout=\"false\"` to opt out."
+            },
+            {
+              "name": "storage-key",
+              "type": "string | undefined",
+              "description": "Optional stable localStorage key; otherwise the page URL and element ID or position identify this container."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Direct `c2-masonry-item` children to pack."
+            }
+          ],
+          "events": [
+            {
+              "name": "layout-error",
+              "type": "CustomEvent<MasonryLayoutErrorDetail>",
+              "description": "Invalid tile identities, spans, or supplied snapshot; does not bubble."
+            },
+            {
+              "name": "layout-change",
+              "type": "CustomEvent<MasonryLayoutChangeDetail>",
+              "description": "Fired exactly once after a real user move or resize commit; does not bubble. Detail includes a complete restorable snapshot."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "grid",
+              "description": "Packed grid region."
+            },
+            {
+              "name": "placeholder",
+              "description": "Candidate occupied area during an edit session."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-masonry--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "",
+              "property": "gap",
+              "description": "Gap between cells and tiles."
+            },
+            {
+              "name": "--c2-masonry--row-height",
+              "type": "pixel",
+              "default": "8px",
+              "part": "",
+              "property": "row-height",
+              "description": "Height of one grid row."
+            },
+            {
+              "name": "--c2-masonry--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding",
+              "description": "Inset around the grid."
+            },
+            {
+              "name": "--c2-masonry--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "background",
+              "description": "Grid background."
+            },
+            {
+              "name": "--c2-masonry--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border",
+              "description": "Outer border."
+            },
+            {
+              "name": "--c2-masonry--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Outer corner radius."
+            },
+            {
+              "name": "--c2-masonry__placeholder--background",
+              "type": "color",
+              "default": "rgb(37 99 235 / 8%)",
+              "part": "placeholder",
+              "property": "background",
+              "token": "--c2-theme--color-primary",
+              "description": "Candidate tile fill."
+            },
+            {
+              "name": "--c2-masonry__placeholder--border",
+              "type": "border",
+              "default": "2px dashed #2563eb",
+              "part": "placeholder",
+              "property": "border",
+              "token": "--c2-theme--color-primary",
+              "description": "Candidate tile edge."
+            },
+            {
+              "name": "--c2-masonry__placeholder--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "placeholder",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Candidate corners."
+            },
+            {
+              "name": "--c2-masonry__motion--duration",
+              "type": "time",
+              "default": "160ms",
+              "part": "motion",
+              "property": "duration",
+              "description": "Decorative movement duration."
+            },
+            {
+              "name": "--c2-masonry__motion--timing-function",
+              "type": "timing-function",
+              "default": "ease",
+              "part": "motion",
+              "property": "timing-function",
+              "description": "Decorative movement easing."
+            }
+          ]
+        },
+        {
+          "tag": "c2-masonry-item",
+          "className": "MasonryItem",
+          "modulePath": "@c2n/masonry/masonry-item.js",
+          "description": "A fixed-span content tile placed by its parent `c2-masonry`. Tall content scrolls within the tile.",
+          "attributes": [
+            {
+              "name": "item-id",
+              "type": "string | undefined",
+              "description": "Stable identity used for editing and application snapshots."
+            },
+            {
+              "name": "label",
+              "type": "string | undefined",
+              "description": "Human-readable name used for the scroll region and edit controls."
+            },
+            {
+              "name": "rows",
+              "type": "number",
+              "default": "10",
+              "description": "Positive integer row span shared across size ranges."
+            },
+            {
+              "name": "cols",
+              "type": "number",
+              "default": "3",
+              "description": "Positive integer base column span."
+            },
+            {
+              "name": "cols-xs",
+              "type": "number | undefined",
+              "description": "Optional positive column span for containers narrower than 600 px."
+            },
+            {
+              "name": "cols-sm",
+              "type": "number | undefined",
+              "description": "Optional positive column span for 600–959.99 px containers."
+            },
+            {
+              "name": "cols-md",
+              "type": "number | undefined",
+              "description": "Optional positive column span for 960–1279.99 px containers."
+            },
+            {
+              "name": "cols-lg",
+              "type": "number | undefined",
+              "description": "Optional positive column span for containers at least 1280 px wide."
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Application-owned tile content."
+            },
+            {
+              "name": "move-icon",
+              "description": "Optional move-handle icon; an inline grip is provided by default."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "content",
+              "description": "Keyboard-reachable scrolling region containing the application content."
+            },
+            {
+              "name": "controls",
+              "description": "Group of edit-only move and resize controls."
+            },
+            {
+              "name": "move-handle",
+              "description": "Button that starts a move operation."
+            },
+            {
+              "name": "resize-handle",
+              "description": "Keyboard-reachable bottom edge that starts a resize operation."
+            },
+            {
+              "name": "resize-edge",
+              "description": "Pointer resize target on the right edge."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-masonry-item--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "background",
+              "description": "Tile surface."
+            },
+            {
+              "name": "--c2-masonry-item--border",
+              "type": "border",
+              "default": "none",
+              "part": "",
+              "property": "border",
+              "description": "Tile border."
+            },
+            {
+              "name": "--c2-masonry-item--border-radius",
+              "type": "border-radius",
+              "default": "0px",
+              "part": "",
+              "property": "border-radius",
+              "description": "Tile corner radius."
+            },
+            {
+              "name": "--c2-masonry-item--box-shadow",
+              "type": "box-shadow",
+              "default": "none",
+              "part": "",
+              "property": "box-shadow",
+              "description": "Tile elevation."
+            },
+            {
+              "name": "--c2-masonry-item__content--padding",
+              "type": "padding",
+              "default": "0px",
+              "part": "content",
+              "property": "padding",
+              "description": "Content inset."
+            },
+            {
+              "name": "--c2-masonry-item__controls--gap",
+              "type": "pixel",
+              "default": "4px",
+              "part": "controls",
+              "property": "gap",
+              "description": "Move-handle inset from the top and right borders."
+            },
+            {
+              "name": "--c2-masonry-item__controls--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "controls",
+              "property": "background",
+              "description": "Surface behind the move-handle corner."
+            },
+            {
+              "name": "--c2-masonry-item__handle--size",
+              "type": "pixel",
+              "default": "32px",
+              "part": "handle",
+              "property": "size",
+              "description": "Move-handle hit target size."
+            },
+            {
+              "name": "--c2-masonry-item__resize-handle--size",
+              "type": "pixel",
+              "default": "8px",
+              "part": "resize-handle",
+              "property": "size",
+              "description": "Invisible resize-edge hit-zone depth."
+            },
+            {
+              "name": "--c2-masonry-item__resize-edge__hover--color",
+              "type": "color",
+              "default": "rgb(37 99 235 / 35%)",
+              "part": "resize-edge",
+              "state": "hover",
+              "property": "color",
+              "description": "Right and bottom border color while the tile is hovered or focused."
+            },
+            {
+              "name": "--c2-masonry-item__handle--icon-size",
+              "type": "pixel",
+              "default": "16px",
+              "part": "handle",
+              "property": "icon-size",
+              "description": "Built-in move icon size."
+            },
+            {
+              "name": "--c2-masonry-item__handle--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "handle",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface",
+              "description": "Move-handle foreground."
+            },
+            {
+              "name": "--c2-masonry-item__handle--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "handle",
+              "property": "background",
+              "description": "Move-handle surface."
+            },
+            {
+              "name": "--c2-masonry-item__handle--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "handle",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Edit-control corners."
+            },
+            {
+              "name": "--c2-masonry-item__handle__hover--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "handle",
+              "state": "hover",
+              "property": "background",
+              "description": "Hovered move-handle surface."
+            },
+            {
+              "name": "--c2-masonry-item__handle__focus--outline",
+              "type": "outline",
+              "default": "2px solid #2563eb",
+              "part": "handle",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring",
+              "description": "Keyboard focus indicator."
+            },
+            {
+              "name": "--c2-masonry-item__dragging--opacity",
+              "type": "opacity",
+              "default": "0.92",
+              "part": "dragging",
+              "property": "opacity",
+              "description": "Active tile opacity."
+            },
+            {
+              "name": "--c2-masonry-item__dragging--box-shadow",
+              "type": "box-shadow",
+              "default": "0 12px 28px rgb(15 23 42 / 24%)",
+              "part": "dragging",
+              "property": "box-shadow",
+              "token": "--c2-theme--shadow-md",
+              "description": "Active tile elevation."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [
+          "c2-masonry-item"
+        ],
+        "usedBy": [
+          "c2-masonry"
+        ]
+      },
+      "install": {
+        "npm": "npm install @c2n/masonry @c2n/theme",
+        "import": "import '@c2n/masonry'",
+        "importClass": "import { Masonry } from '@c2n/masonry'"
+      },
+      "examples": [
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Gallery",
+          "description": "Default Gallery example for c2-masonry.",
+          "isDefault": true,
+          "tags": [
+            "c2-masonry",
+            "c2-masonry-item"
+          ],
+          "html": "<c2-masonry client:only=\"lit\" class=\"masonry-default\">\n  <c2-masonry-item item-id=\"throughput\" label=\"Throughput\" rows=\"12\" cols=\"3\" cols-sm=\"4\" cols-md=\"5\" cols-lg=\"6\">\n    <div class=\"masonry-default-tile\"><h3>Orders processed</h3><strong>18,642</strong><p><span class=\"positive\">↑ 8.2%</span> from last week</p><svg class=\"sparkline\" viewBox=\"0 0 240 50\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M2 42 27 35 53 39 79 27 104 31 130 18 156 23 183 12 208 16 238 5\" /></svg></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"queue\" label=\"Queue\" rows=\"12\" cols=\"2\" cols-sm=\"2\" cols-md=\"2\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Open queue</h3><strong>142</strong><p>Across 7 regions</p><ul class=\"mini-list\"><li><span>Priority</span><b>18</b></li><li><span>On track</span><b>124</b></li></ul></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"health\" label=\"Health\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Service availability</h3><strong>99.9%</strong><p>30-day rolling window</p><div class=\"progress-track\" aria-label=\"Availability is 99.9 percent\"><span></span></div></div>\n  </c2-masonry-item>\n  <c2-masonry-item item-id=\"deploys\" label=\"Deploys\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\">\n    <div class=\"masonry-default-tile\"><h3>Deployments today</h3><strong>3</strong><p>All checks passing</p><ul class=\"mini-list\"><li><span>North region</span><span>09:42</span></li><li><span>West region</span><span>08:18</span></li></ul></div>\n  </c2-masonry-item>\n</c2-masonry>",
+          "css": ".masonry-default {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.masonry-default-tile {\n  box-sizing: border-box;\n  height: 100%;\n  padding: 16px;\n  border: 1px solid #e4e4e7;\n  border-radius: 10px;\n  background: #ffffff;\n  color: #18181b;\n  font-size: 12px;\n}\n\n.masonry-default-tile h3 {\n  margin: 0;\n  color: #71717a;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.masonry-default-tile strong {\n  display: block;\n  margin-top: 8px;\n  font-size: 25px;\n  line-height: 1.1;\n  letter-spacing: -0.04em;\n}\n\n.masonry-default-tile p {\n  margin: 6px 0 0;\n  color: #71717a;\n}\n\n.masonry-default-tile .positive {\n  color: #15803d;\n  font-weight: 600;\n}\n\n.masonry-default-tile .sparkline {\n  display: block;\n  width: 100%;\n  height: 48px;\n  margin-top: 14px;\n}\n\n.masonry-default-tile .sparkline path {\n  fill: none;\n  stroke: #2563eb;\n  stroke-width: 3;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.masonry-default-tile .progress-track {\n  height: 7px;\n  margin-top: 15px;\n  border-radius: 999px;\n  background: #e4e4e7;\n}\n\n.masonry-default-tile .progress-track span {\n  display: block;\n  width: 99.9%;\n  height: 100%;\n  border-radius: inherit;\n  background: #22c55e;\n}\n\n.masonry-default-tile .mini-list {\n  display: grid;\n  gap: 7px;\n  margin: 12px 0 0;\n  padding: 0;\n  list-style: none;\n  color: #52525b;\n}\n\n.masonry-default-tile .mini-list li {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.masonry-default-tile .mini-list li span {\n  color: #52525b;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Night watch",
+          "section": "Gallery",
+          "description": "Night watch Gallery example for c2-masonry.",
+          "isDefault": false,
+          "tags": [
+            "c2-masonry",
+            "c2-masonry-item"
+          ],
+          "html": "<c2-masonry client:only=\"lit\" class=\"night-watch\" editable>\n  <c2-masonry-item item-id=\"requests\" label=\"Requests\" rows=\"13\" cols=\"3\" cols-sm=\"4\" cols-md=\"5\" cols-lg=\"6\"><h3>Requests / min</h3><strong>12,804</strong><p><span class=\"night-positive\">↑ 6.8%</span> from yesterday</p><svg class=\"night-trend\" viewBox=\"0 0 240 58\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M2 47 29 42 54 45 80 31 107 35 133 22 159 27 184 15 211 20 238 7\" /></svg></c2-masonry-item>\n  <c2-masonry-item item-id=\"errors\" label=\"Errors\" rows=\"10\" cols=\"2\" cols-sm=\"2\" cols-md=\"2\" cols-lg=\"3\"><h3>Error rate</h3><strong>0.03%</strong><p>Below 0.1% threshold</p></c2-masonry-item>\n  <c2-masonry-item item-id=\"latency\" label=\"Latency\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\"><h3>P95 latency</h3><strong>218 ms</strong><p>Target under 250 ms</p></c2-masonry-item>\n  <c2-masonry-item item-id=\"regions\" label=\"Regions\" rows=\"10\" cols=\"2\" cols-sm=\"3\" cols-md=\"3\" cols-lg=\"3\"><h3>Regional health</h3><ul class=\"night-list\"><li><span>North</span><b>Healthy</b></li><li><span>West</span><b>Healthy</b></li><li><span>East</span><b>Degraded</b></li></ul></c2-masonry-item>\n</c2-masonry>",
+          "css": ".night-watch {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  --c2-masonry--gap: 8px;\n  --c2-masonry--row-height: 9px;\n  --c2-masonry--padding: 12px;\n  --c2-masonry--background: #101827;\n  --c2-masonry--border-radius: 14px;\n  --c2-masonry__placeholder--background: rgb(56 189 248 / 20%);\n  --c2-masonry__placeholder--border: 2px dashed #38bdf8;\n  --c2-masonry-item--background: #1e293b;\n  --c2-masonry-item--border: 1px solid #334155;\n  --c2-masonry-item--border-radius: 10px;\n  --c2-masonry-item__content--padding: 14px;\n  --c2-masonry-item__handle--background: #334155;\n  --c2-masonry-item__handle--color: #f8fafc;\n  --c2-masonry-item__handle__hover--background: #475569;\n}\n\n.night-watch h3 {\n  margin: 0 80px 6px 0;\n  color: #94a3b8;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.night-watch strong {\n  display: block;\n  color: #f8fafc;\n  font-size: 27px;\n  line-height: 1.1;\n  letter-spacing: -0.04em;\n}\n\n.night-watch p {\n  margin: 7px 0 0;\n  color: #94a3b8;\n  font-size: 12px;\n}\n\n.night-watch .night-positive {\n  color: #5eead4;\n  font-weight: 600;\n}\n\n.night-watch .night-trend {\n  display: block;\n  width: 100%;\n  height: 58px;\n  margin-top: 15px;\n}\n\n.night-watch .night-trend path {\n  fill: none;\n  stroke: #38bdf8;\n  stroke-width: 3;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\n.night-watch .night-list {\n  display: grid;\n  gap: 9px;\n  margin: 14px 0 0;\n  padding: 0;\n  list-style: none;\n  color: #cbd5e1;\n  font-size: 12px;\n}\n\n.night-watch .night-list li {\n  display: flex;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.night-watch .night-list li span {\n  color: #cbd5e1;\n}\n\n.night-watch .night-list b {\n  color: #f8fafc;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-masonry style=\"width:260px;--c2-masonry--gap:6px;--c2-masonry--row-height:9px;--c2-masonry--padding:6px;--c2-masonry--background:#f4f4f5;--c2-masonry--border-radius:8px;--c2-masonry-item--background:#fff;--c2-masonry-item--border:1px solid #e4e4e7;--c2-masonry-item--border-radius:6px;--c2-masonry-item__content--padding:8px\">\n  <c2-masonry-item item-id=\"traffic\" label=\"Traffic\" rows=\"5\" cols=\"3\">Traffic · 18.4k</c2-masonry-item>\n  <c2-masonry-item item-id=\"orders\" label=\"Orders\" rows=\"5\" cols=\"2\">Orders · 142</c2-masonry-item>\n</c2-masonry>"
+        }
+      ],
+      "hasGallery": true
+    },
     "mat-icon": {
       "id": "mat-icon",
       "package": "@c2n/mat-icon",
@@ -29826,159 +30795,278 @@
               "property": "gap",
               "description": "Gap between tooltip rows."
             },
-            {
-              "name": "--c2-chart__state--color",
-              "type": "color",
-              "default": "#71717a",
-              "part": "state",
-              "property": "color",
-              "token": "--c2-theme--color-on-surface-variant",
-              "description": "Colour of the empty, loading and error text."
-            },
-            {
-              "name": "--c2-chart__state--font-size",
-              "type": "font-size",
-              "default": "14px",
-              "part": "state",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-md",
-              "description": "Font size of the empty, loading and error text."
-            }
-          ]
-        },
-        {
-          "tag": "c2-chart-series",
-          "className": "ChartSeries",
-          "modulePath": "@c2n/chart/chart-series.js",
-          "description": "One series of a chart, declared as a light-DOM child. The element renders nothing: it is a definition\nthe chart reads, the same way `c2-table` reads its `c2-table-column` children. Everything it exposes as\nan attribute can also be set as a property, and `format` is property-only.\n\n```html\n<c2-line-chart x-field=\"month\" data='[{ \"month\": 1, \"revenue\": 120, \"cost\": 80 }]'>\n  <c2-chart-series field=\"revenue\" label=\"Revenue\"></c2-chart-series>\n  <c2-chart-series field=\"cost\" label=\"Cost\" color=\"#ea580c\"></c2-chart-series>\n</c2-line-chart>\n```",
-          "attributes": [
-            {
-              "name": "field",
-              "type": "string",
-              "default": "''",
-              "description": "Key of the value in the row object; may be a dotted path such as `stats.cpu`."
-            },
-            {
-              "name": "label",
-              "type": "string | undefined",
-              "description": "Legend and tooltip label. Falls back to the field name."
-            },
-            {
-              "name": "color",
-              "type": "string | undefined",
-              "description": "Explicit colour. Falls back to this series' slot in the chart's palette."
-            },
-            {
-              "name": "line-width",
-              "type": "number | undefined",
-              "description": "Stroke width in pixels. Falls back to `--c2-chart__line--width`."
-            },
-            {
-              "name": "axis",
-              "type": "'left' | 'right'",
-              "default": "'left'",
-              "description": "Which y axis the series is drawn against."
-            },
-            {
-              "name": "span-gaps",
-              "type": "boolean",
-              "default": "false",
-              "description": "Joins across gaps instead of breaking the line."
-            },
-            {
-              "name": "hidden",
-              "type": "boolean",
-              "default": "false",
-              "description": "Leaves the series out of the chart without removing the definition."
-            }
-          ],
-          "slots": [],
-          "events": [],
-          "cssParts": [],
-          "cssProperties": []
-        },
-        {
-          "tag": "c2-chart-legend",
-          "className": "ChartLegend",
-          "modulePath": "@c2n/chart/chart-legend.js",
-          "description": "A legend linked to a chart by id. Place it anywhere in the document to control the legend's layout\nindependently from the chart.",
-          "attributes": [
-            {
-              "name": "for",
-              "type": "string",
-              "default": "''",
-              "description": "Id of the chart this element presents."
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Replaces the generated legend. Use `renderLegend` or `renderLegendItem` for data-driven custom content."
-            }
-          ],
-          "events": [],
-          "cssParts": [
-            {
-              "name": "item",
-              "description": "One interactive legend entry."
-            },
-            {
-              "name": "marker",
-              "description": "The colour swatch inside an entry."
-            }
-          ],
-          "cssProperties": [
-            {
-              "name": "--c2-chart__legend--gap",
-              "type": "pixel",
-              "default": "12px",
-              "part": "legend",
-              "property": "gap",
-              "description": "Gap between legend entries."
-            },
-            {
-              "name": "--c2-chart__legend--padding",
-              "type": "padding",
-              "default": "0",
-              "part": "legend",
-              "property": "padding",
-              "description": "Padding around the legend."
-            },
-            {
-              "name": "--c2-chart__legend--color",
-              "type": "color",
-              "default": "#71717a",
-              "part": "legend",
-              "property": "color",
-              "token": "--c2-theme--color-on-surface-variant",
-              "description": "Legend text colour."
-            },
-            {
-              "name": "--c2-chart__legend--font-size",
-              "type": "font-size",
-              "default": "12px",
-              "part": "legend",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-sm",
-              "description": "Legend font size."
-            },
-            {
-              "name": "--c2-chart__legend__disabled--opacity",
-              "type": "opacity",
-              "default": "0.38",
-              "part": "legend",
-              "state": "disabled",
-              "property": "opacity",
-              "token": "--c2-theme--disabled-opacity",
-              "description": "Opacity of a disabled entry."
-            },
+            {
+              "name": "--c2-chart__state--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "state",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant",
+              "description": "Colour of the empty, loading and error text."
+            },
+            {
+              "name": "--c2-chart__state--font-size",
+              "type": "font-size",
+              "default": "14px",
+              "part": "state",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-md",
+              "description": "Font size of the empty, loading and error text."
+            }
+          ]
+        },
+        {
+          "tag": "c2-chart-series",
+          "className": "ChartSeries",
+          "modulePath": "@c2n/chart/chart-series.js",
+          "description": "One series of a chart, declared as a light-DOM child. The element renders nothing: it is a definition\nthe chart reads, the same way `c2-table` reads its `c2-table-column` children. Everything it exposes as\nan attribute can also be set as a property, and `format` is property-only.\n\n```html\n<c2-line-chart x-field=\"month\" data='[{ \"month\": 1, \"revenue\": 120, \"cost\": 80 }]'>\n  <c2-chart-series field=\"revenue\" label=\"Revenue\"></c2-chart-series>\n  <c2-chart-series field=\"cost\" label=\"Cost\" color=\"#ea580c\"></c2-chart-series>\n</c2-line-chart>\n```",
+          "attributes": [
+            {
+              "name": "field",
+              "type": "string",
+              "default": "''",
+              "description": "Key of the value in the row object; may be a dotted path such as `stats.cpu`."
+            },
+            {
+              "name": "label",
+              "type": "string | undefined",
+              "description": "Legend and tooltip label. Falls back to the field name."
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "description": "Explicit colour. Falls back to this series' slot in the chart's palette."
+            },
+            {
+              "name": "line-width",
+              "type": "number | undefined",
+              "description": "Stroke width in pixels. Falls back to `--c2-chart__line--width`."
+            },
+            {
+              "name": "axis",
+              "type": "'left' | 'right'",
+              "default": "'left'",
+              "description": "Which y axis the series is drawn against."
+            },
+            {
+              "name": "span-gaps",
+              "type": "boolean",
+              "default": "false",
+              "description": "Joins across gaps instead of breaking the line."
+            },
+            {
+              "name": "hidden",
+              "type": "boolean",
+              "default": "false",
+              "description": "Leaves the series out of the chart without removing the definition."
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "cssParts": [],
+          "cssProperties": []
+        },
+        {
+          "tag": "c2-chart-legend",
+          "className": "ChartLegend",
+          "modulePath": "@c2n/chart/chart-legend.js",
+          "description": "A legend linked to a chart by id. Place it anywhere in the document to control the legend's layout\nindependently from the chart.",
+          "attributes": [
+            {
+              "name": "for",
+              "type": "string",
+              "default": "''",
+              "description": "Id of the chart this element presents."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Replaces the generated legend. Use `renderLegend` or `renderLegendItem` for data-driven custom content."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "item",
+              "description": "One interactive legend entry."
+            },
+            {
+              "name": "marker",
+              "description": "The colour swatch inside an entry."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-chart__legend--gap",
+              "type": "pixel",
+              "default": "12px",
+              "part": "legend",
+              "property": "gap",
+              "description": "Gap between legend entries."
+            },
+            {
+              "name": "--c2-chart__legend--padding",
+              "type": "padding",
+              "default": "0",
+              "part": "legend",
+              "property": "padding",
+              "description": "Padding around the legend."
+            },
+            {
+              "name": "--c2-chart__legend--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "legend",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant",
+              "description": "Legend text colour."
+            },
+            {
+              "name": "--c2-chart__legend--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "legend",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm",
+              "description": "Legend font size."
+            },
+            {
+              "name": "--c2-chart__legend__disabled--opacity",
+              "type": "opacity",
+              "default": "0.38",
+              "part": "legend",
+              "state": "disabled",
+              "property": "opacity",
+              "token": "--c2-theme--disabled-opacity",
+              "description": "Opacity of a disabled entry."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Radius of the colour swatch."
+            }
+          ]
+        },
+        {
+          "tag": "c2-chart-tooltip",
+          "className": "ChartTooltip",
+          "modulePath": "@c2n/chart/chart-tooltip.js",
+          "description": "A tooltip linked to a chart by id. It can float beside the hovered point or render inline wherever it is\nplaced in the document.",
+          "attributes": [
+            {
+              "name": "position",
+              "type": "'floating' | 'inline'",
+              "default": "'floating'",
+              "description": "Whether the tooltip follows the hovered point or occupies its authored HTML position."
+            },
+            {
+              "name": "placement",
+              "type": "'top' | 'bottom' | 'start' | 'end'",
+              "default": "'top'",
+              "description": "Preferred side of the hovered point when `position=\"floating\"`. Flips at viewport edges."
+            },
+            {
+              "name": "for",
+              "type": "string",
+              "default": "''",
+              "description": "Id of the chart this element presents."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Replaces the generated tooltip body. Use `renderTooltip` for data-driven custom content."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "bubble",
+              "description": "The tooltip surface."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-chart__tooltip--background-color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "tooltip",
+              "property": "background-color",
+              "token": "--c2-theme--color-inverse-surface",
+              "description": "Tooltip background."
+            },
+            {
+              "name": "--c2-chart__tooltip--color",
+              "type": "color",
+              "default": "#fafafa",
+              "part": "tooltip",
+              "property": "color",
+              "token": "--c2-theme--color-on-inverse-surface",
+              "description": "Tooltip text colour."
+            },
+            {
+              "name": "--c2-chart__tooltip--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "tooltip",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm",
+              "description": "Tooltip font size."
+            },
+            {
+              "name": "--c2-chart__tooltip--padding",
+              "type": "padding",
+              "default": "8px 10px",
+              "part": "tooltip",
+              "property": "padding",
+              "description": "Tooltip padding."
+            },
+            {
+              "name": "--c2-chart__tooltip--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "tooltip",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Tooltip corner radius."
+            },
+            {
+              "name": "--c2-chart__tooltip--box-shadow",
+              "type": "box-shadow",
+              "default": "0 8px 24px rgba(24, 24, 27, 0.08)",
+              "part": "tooltip",
+              "property": "box-shadow",
+              "token": "--c2-theme--shadow-md",
+              "description": "Tooltip shadow."
+            },
+            {
+              "name": "--c2-chart__tooltip--gap",
+              "type": "pixel",
+              "default": "6px",
+              "part": "tooltip",
+              "property": "gap",
+              "description": "Gap between tooltip rows."
+            },
             {
               "name": "--c2-chart__legend-marker--size",
               "type": "pixel",
               "default": "10px",
               "part": "legend-marker",
               "property": "size",
-              "description": "Size of the colour swatch."
+              "description": "Size of the colour swatch in a tooltip row."
             },
             {
               "name": "--c2-chart__legend-marker--border-radius",
@@ -29987,109 +31075,7 @@
               "part": "legend-marker",
               "property": "border-radius",
               "token": "--c2-theme--radius-full",
-              "description": "Radius of the colour swatch."
-            }
-          ]
-        },
-        {
-          "tag": "c2-chart-tooltip",
-          "className": "ChartTooltip",
-          "modulePath": "@c2n/chart/chart-tooltip.js",
-          "description": "A tooltip linked to a chart by id. It can float beside the hovered point or render inline wherever it is\nplaced in the document.",
-          "attributes": [
-            {
-              "name": "position",
-              "type": "'floating' | 'inline'",
-              "default": "'floating'",
-              "description": "Whether the tooltip follows the hovered point or occupies its authored HTML position."
-            },
-            {
-              "name": "placement",
-              "type": "'top' | 'bottom' | 'start' | 'end'",
-              "default": "'top'",
-              "description": "Preferred side of the hovered point when `position=\"floating\"`. Flips at viewport edges."
-            },
-            {
-              "name": "for",
-              "type": "string",
-              "default": "''",
-              "description": "Id of the chart this element presents."
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Replaces the generated tooltip body. Use `renderTooltip` for data-driven custom content."
-            }
-          ],
-          "events": [],
-          "cssParts": [
-            {
-              "name": "bubble",
-              "description": "The tooltip surface."
-            }
-          ],
-          "cssProperties": [
-            {
-              "name": "--c2-chart__tooltip--background-color",
-              "type": "color",
-              "default": "#18181b",
-              "part": "tooltip",
-              "property": "background-color",
-              "token": "--c2-theme--color-inverse-surface",
-              "description": "Tooltip background."
-            },
-            {
-              "name": "--c2-chart__tooltip--color",
-              "type": "color",
-              "default": "#fafafa",
-              "part": "tooltip",
-              "property": "color",
-              "token": "--c2-theme--color-on-inverse-surface",
-              "description": "Tooltip text colour."
-            },
-            {
-              "name": "--c2-chart__tooltip--font-size",
-              "type": "font-size",
-              "default": "12px",
-              "part": "tooltip",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-sm",
-              "description": "Tooltip font size."
-            },
-            {
-              "name": "--c2-chart__tooltip--padding",
-              "type": "padding",
-              "default": "8px 10px",
-              "part": "tooltip",
-              "property": "padding",
-              "description": "Tooltip padding."
-            },
-            {
-              "name": "--c2-chart__tooltip--border-radius",
-              "type": "border-radius",
-              "default": "6px",
-              "part": "tooltip",
-              "property": "border-radius",
-              "token": "--c2-theme--radius-md",
-              "description": "Tooltip corner radius."
-            },
-            {
-              "name": "--c2-chart__tooltip--box-shadow",
-              "type": "box-shadow",
-              "default": "0 8px 24px rgba(24, 24, 27, 0.08)",
-              "part": "tooltip",
-              "property": "box-shadow",
-              "token": "--c2-theme--shadow-md",
-              "description": "Tooltip shadow."
-            },
-            {
-              "name": "--c2-chart__tooltip--gap",
-              "type": "pixel",
-              "default": "6px",
-              "part": "tooltip",
-              "property": "gap",
-              "description": "Gap between tooltip rows."
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -34840,6 +35826,23 @@
               "part": "tooltip",
               "property": "gap",
               "description": "Gap between tooltip rows."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch in a tooltip row."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -39225,159 +40228,278 @@
               "property": "gap",
               "description": "Gap between tooltip rows."
             },
-            {
-              "name": "--c2-chart__state--color",
-              "type": "color",
-              "default": "#71717a",
-              "part": "state",
-              "property": "color",
-              "token": "--c2-theme--color-on-surface-variant",
-              "description": "Colour of the empty, loading and error text."
-            },
-            {
-              "name": "--c2-chart__state--font-size",
-              "type": "font-size",
-              "default": "14px",
-              "part": "state",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-md",
-              "description": "Font size of the empty, loading and error text."
-            }
-          ]
-        },
-        {
-          "tag": "c2-chart-series",
-          "className": "ChartSeries",
-          "modulePath": "@c2n/chart/chart-series.js",
-          "description": "One series of a chart, declared as a light-DOM child. The element renders nothing: it is a definition\nthe chart reads, the same way `c2-table` reads its `c2-table-column` children. Everything it exposes as\nan attribute can also be set as a property, and `format` is property-only.\n\n```html\n<c2-line-chart x-field=\"month\" data='[{ \"month\": 1, \"revenue\": 120, \"cost\": 80 }]'>\n  <c2-chart-series field=\"revenue\" label=\"Revenue\"></c2-chart-series>\n  <c2-chart-series field=\"cost\" label=\"Cost\" color=\"#ea580c\"></c2-chart-series>\n</c2-line-chart>\n```",
-          "attributes": [
-            {
-              "name": "field",
-              "type": "string",
-              "default": "''",
-              "description": "Key of the value in the row object; may be a dotted path such as `stats.cpu`."
-            },
-            {
-              "name": "label",
-              "type": "string | undefined",
-              "description": "Legend and tooltip label. Falls back to the field name."
-            },
-            {
-              "name": "color",
-              "type": "string | undefined",
-              "description": "Explicit colour. Falls back to this series' slot in the chart's palette."
-            },
-            {
-              "name": "line-width",
-              "type": "number | undefined",
-              "description": "Stroke width in pixels. Falls back to `--c2-chart__line--width`."
-            },
-            {
-              "name": "axis",
-              "type": "'left' | 'right'",
-              "default": "'left'",
-              "description": "Which y axis the series is drawn against."
-            },
-            {
-              "name": "span-gaps",
-              "type": "boolean",
-              "default": "false",
-              "description": "Joins across gaps instead of breaking the line."
-            },
-            {
-              "name": "hidden",
-              "type": "boolean",
-              "default": "false",
-              "description": "Leaves the series out of the chart without removing the definition."
-            }
-          ],
-          "slots": [],
-          "events": [],
-          "cssParts": [],
-          "cssProperties": []
-        },
-        {
-          "tag": "c2-chart-legend",
-          "className": "ChartLegend",
-          "modulePath": "@c2n/chart/chart-legend.js",
-          "description": "A legend linked to a chart by id. Place it anywhere in the document to control the legend's layout\nindependently from the chart.",
-          "attributes": [
-            {
-              "name": "for",
-              "type": "string",
-              "default": "''",
-              "description": "Id of the chart this element presents."
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Replaces the generated legend. Use `renderLegend` or `renderLegendItem` for data-driven custom content."
-            }
-          ],
-          "events": [],
-          "cssParts": [
-            {
-              "name": "item",
-              "description": "One interactive legend entry."
-            },
-            {
-              "name": "marker",
-              "description": "The colour swatch inside an entry."
-            }
-          ],
-          "cssProperties": [
-            {
-              "name": "--c2-chart__legend--gap",
-              "type": "pixel",
-              "default": "12px",
-              "part": "legend",
-              "property": "gap",
-              "description": "Gap between legend entries."
-            },
-            {
-              "name": "--c2-chart__legend--padding",
-              "type": "padding",
-              "default": "0",
-              "part": "legend",
-              "property": "padding",
-              "description": "Padding around the legend."
-            },
-            {
-              "name": "--c2-chart__legend--color",
-              "type": "color",
-              "default": "#71717a",
-              "part": "legend",
-              "property": "color",
-              "token": "--c2-theme--color-on-surface-variant",
-              "description": "Legend text colour."
-            },
-            {
-              "name": "--c2-chart__legend--font-size",
-              "type": "font-size",
-              "default": "12px",
-              "part": "legend",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-sm",
-              "description": "Legend font size."
-            },
-            {
-              "name": "--c2-chart__legend__disabled--opacity",
-              "type": "opacity",
-              "default": "0.38",
-              "part": "legend",
-              "state": "disabled",
-              "property": "opacity",
-              "token": "--c2-theme--disabled-opacity",
-              "description": "Opacity of a disabled entry."
-            },
+            {
+              "name": "--c2-chart__state--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "state",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant",
+              "description": "Colour of the empty, loading and error text."
+            },
+            {
+              "name": "--c2-chart__state--font-size",
+              "type": "font-size",
+              "default": "14px",
+              "part": "state",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-md",
+              "description": "Font size of the empty, loading and error text."
+            }
+          ]
+        },
+        {
+          "tag": "c2-chart-series",
+          "className": "ChartSeries",
+          "modulePath": "@c2n/chart/chart-series.js",
+          "description": "One series of a chart, declared as a light-DOM child. The element renders nothing: it is a definition\nthe chart reads, the same way `c2-table` reads its `c2-table-column` children. Everything it exposes as\nan attribute can also be set as a property, and `format` is property-only.\n\n```html\n<c2-line-chart x-field=\"month\" data='[{ \"month\": 1, \"revenue\": 120, \"cost\": 80 }]'>\n  <c2-chart-series field=\"revenue\" label=\"Revenue\"></c2-chart-series>\n  <c2-chart-series field=\"cost\" label=\"Cost\" color=\"#ea580c\"></c2-chart-series>\n</c2-line-chart>\n```",
+          "attributes": [
+            {
+              "name": "field",
+              "type": "string",
+              "default": "''",
+              "description": "Key of the value in the row object; may be a dotted path such as `stats.cpu`."
+            },
+            {
+              "name": "label",
+              "type": "string | undefined",
+              "description": "Legend and tooltip label. Falls back to the field name."
+            },
+            {
+              "name": "color",
+              "type": "string | undefined",
+              "description": "Explicit colour. Falls back to this series' slot in the chart's palette."
+            },
+            {
+              "name": "line-width",
+              "type": "number | undefined",
+              "description": "Stroke width in pixels. Falls back to `--c2-chart__line--width`."
+            },
+            {
+              "name": "axis",
+              "type": "'left' | 'right'",
+              "default": "'left'",
+              "description": "Which y axis the series is drawn against."
+            },
+            {
+              "name": "span-gaps",
+              "type": "boolean",
+              "default": "false",
+              "description": "Joins across gaps instead of breaking the line."
+            },
+            {
+              "name": "hidden",
+              "type": "boolean",
+              "default": "false",
+              "description": "Leaves the series out of the chart without removing the definition."
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "cssParts": [],
+          "cssProperties": []
+        },
+        {
+          "tag": "c2-chart-legend",
+          "className": "ChartLegend",
+          "modulePath": "@c2n/chart/chart-legend.js",
+          "description": "A legend linked to a chart by id. Place it anywhere in the document to control the legend's layout\nindependently from the chart.",
+          "attributes": [
+            {
+              "name": "for",
+              "type": "string",
+              "default": "''",
+              "description": "Id of the chart this element presents."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Replaces the generated legend. Use `renderLegend` or `renderLegendItem` for data-driven custom content."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "item",
+              "description": "One interactive legend entry."
+            },
+            {
+              "name": "marker",
+              "description": "The colour swatch inside an entry."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-chart__legend--gap",
+              "type": "pixel",
+              "default": "12px",
+              "part": "legend",
+              "property": "gap",
+              "description": "Gap between legend entries."
+            },
+            {
+              "name": "--c2-chart__legend--padding",
+              "type": "padding",
+              "default": "0",
+              "part": "legend",
+              "property": "padding",
+              "description": "Padding around the legend."
+            },
+            {
+              "name": "--c2-chart__legend--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "legend",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant",
+              "description": "Legend text colour."
+            },
+            {
+              "name": "--c2-chart__legend--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "legend",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm",
+              "description": "Legend font size."
+            },
+            {
+              "name": "--c2-chart__legend__disabled--opacity",
+              "type": "opacity",
+              "default": "0.38",
+              "part": "legend",
+              "state": "disabled",
+              "property": "opacity",
+              "token": "--c2-theme--disabled-opacity",
+              "description": "Opacity of a disabled entry."
+            },
+            {
+              "name": "--c2-chart__legend-marker--size",
+              "type": "pixel",
+              "default": "10px",
+              "part": "legend-marker",
+              "property": "size",
+              "description": "Size of the colour swatch."
+            },
+            {
+              "name": "--c2-chart__legend-marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "legend-marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Radius of the colour swatch."
+            }
+          ]
+        },
+        {
+          "tag": "c2-chart-tooltip",
+          "className": "ChartTooltip",
+          "modulePath": "@c2n/chart/chart-tooltip.js",
+          "description": "A tooltip linked to a chart by id. It can float beside the hovered point or render inline wherever it is\nplaced in the document.",
+          "attributes": [
+            {
+              "name": "position",
+              "type": "'floating' | 'inline'",
+              "default": "'floating'",
+              "description": "Whether the tooltip follows the hovered point or occupies its authored HTML position."
+            },
+            {
+              "name": "placement",
+              "type": "'top' | 'bottom' | 'start' | 'end'",
+              "default": "'top'",
+              "description": "Preferred side of the hovered point when `position=\"floating\"`. Flips at viewport edges."
+            },
+            {
+              "name": "for",
+              "type": "string",
+              "default": "''",
+              "description": "Id of the chart this element presents."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Replaces the generated tooltip body. Use `renderTooltip` for data-driven custom content."
+            }
+          ],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "bubble",
+              "description": "The tooltip surface."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-chart__tooltip--background-color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "tooltip",
+              "property": "background-color",
+              "token": "--c2-theme--color-inverse-surface",
+              "description": "Tooltip background."
+            },
+            {
+              "name": "--c2-chart__tooltip--color",
+              "type": "color",
+              "default": "#fafafa",
+              "part": "tooltip",
+              "property": "color",
+              "token": "--c2-theme--color-on-inverse-surface",
+              "description": "Tooltip text colour."
+            },
+            {
+              "name": "--c2-chart__tooltip--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "tooltip",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm",
+              "description": "Tooltip font size."
+            },
+            {
+              "name": "--c2-chart__tooltip--padding",
+              "type": "padding",
+              "default": "8px 10px",
+              "part": "tooltip",
+              "property": "padding",
+              "description": "Tooltip padding."
+            },
+            {
+              "name": "--c2-chart__tooltip--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "tooltip",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md",
+              "description": "Tooltip corner radius."
+            },
+            {
+              "name": "--c2-chart__tooltip--box-shadow",
+              "type": "box-shadow",
+              "default": "0 8px 24px rgba(24, 24, 27, 0.08)",
+              "part": "tooltip",
+              "property": "box-shadow",
+              "token": "--c2-theme--shadow-md",
+              "description": "Tooltip shadow."
+            },
+            {
+              "name": "--c2-chart__tooltip--gap",
+              "type": "pixel",
+              "default": "6px",
+              "part": "tooltip",
+              "property": "gap",
+              "description": "Gap between tooltip rows."
+            },
             {
               "name": "--c2-chart__legend-marker--size",
               "type": "pixel",
               "default": "10px",
               "part": "legend-marker",
               "property": "size",
-              "description": "Size of the colour swatch."
+              "description": "Size of the colour swatch in a tooltip row."
             },
             {
               "name": "--c2-chart__legend-marker--border-radius",
@@ -39386,109 +40508,7 @@
               "part": "legend-marker",
               "property": "border-radius",
               "token": "--c2-theme--radius-full",
-              "description": "Radius of the colour swatch."
-            }
-          ]
-        },
-        {
-          "tag": "c2-chart-tooltip",
-          "className": "ChartTooltip",
-          "modulePath": "@c2n/chart/chart-tooltip.js",
-          "description": "A tooltip linked to a chart by id. It can float beside the hovered point or render inline wherever it is\nplaced in the document.",
-          "attributes": [
-            {
-              "name": "position",
-              "type": "'floating' | 'inline'",
-              "default": "'floating'",
-              "description": "Whether the tooltip follows the hovered point or occupies its authored HTML position."
-            },
-            {
-              "name": "placement",
-              "type": "'top' | 'bottom' | 'start' | 'end'",
-              "default": "'top'",
-              "description": "Preferred side of the hovered point when `position=\"floating\"`. Flips at viewport edges."
-            },
-            {
-              "name": "for",
-              "type": "string",
-              "default": "''",
-              "description": "Id of the chart this element presents."
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Replaces the generated tooltip body. Use `renderTooltip` for data-driven custom content."
-            }
-          ],
-          "events": [],
-          "cssParts": [
-            {
-              "name": "bubble",
-              "description": "The tooltip surface."
-            }
-          ],
-          "cssProperties": [
-            {
-              "name": "--c2-chart__tooltip--background-color",
-              "type": "color",
-              "default": "#18181b",
-              "part": "tooltip",
-              "property": "background-color",
-              "token": "--c2-theme--color-inverse-surface",
-              "description": "Tooltip background."
-            },
-            {
-              "name": "--c2-chart__tooltip--color",
-              "type": "color",
-              "default": "#fafafa",
-              "part": "tooltip",
-              "property": "color",
-              "token": "--c2-theme--color-on-inverse-surface",
-              "description": "Tooltip text colour."
-            },
-            {
-              "name": "--c2-chart__tooltip--font-size",
-              "type": "font-size",
-              "default": "12px",
-              "part": "tooltip",
-              "property": "font-size",
-              "token": "--c2-theme--font-size-sm",
-              "description": "Tooltip font size."
-            },
-            {
-              "name": "--c2-chart__tooltip--padding",
-              "type": "padding",
-              "default": "8px 10px",
-              "part": "tooltip",
-              "property": "padding",
-              "description": "Tooltip padding."
-            },
-            {
-              "name": "--c2-chart__tooltip--border-radius",
-              "type": "border-radius",
-              "default": "6px",
-              "part": "tooltip",
-              "property": "border-radius",
-              "token": "--c2-theme--radius-md",
-              "description": "Tooltip corner radius."
-            },
-            {
-              "name": "--c2-chart__tooltip--box-shadow",
-              "type": "box-shadow",
-              "default": "0 8px 24px rgba(24, 24, 27, 0.08)",
-              "part": "tooltip",
-              "property": "box-shadow",
-              "token": "--c2-theme--shadow-md",
-              "description": "Tooltip shadow."
-            },
-            {
-              "name": "--c2-chart__tooltip--gap",
-              "type": "pixel",
-              "default": "6px",
-              "part": "tooltip",
-              "property": "gap",
-              "description": "Gap between tooltip rows."
+              "description": "Corner radius of a tooltip row's colour swatch."
             }
           ]
         }
@@ -41128,7 +42148,7 @@
             {
               "name": "--c2-step__row--indent",
               "type": "pixel",
-              "default": "marker size + row gap",
+              "default": "calc(var(--c2-step__marker--size, 16px) + var(--c2-step__row--gap, 10px))",
               "part": "row",
               "property": "indent",
               "description": "Extra inset per level of nesting. The default puts a sub-step's marker under its parent's label, which is what makes the nesting read without drawing anything."
@@ -42004,9 +43024,10 @@
             {
               "name": "--c2-switch__thumb--size",
               "type": "pixel",
-              "default": "16px",
+              "default": "calc(var(--c2-switch__track--height,20px)-2*var(--c2-switch__thumb--offset,2px))",
               "part": "thumb",
-              "property": "size"
+              "property": "size",
+              "description": "Defaults to the track height minus the offset on both edges."
             },
             {
               "name": "--c2-switch__thumb--offset",
@@ -43892,6 +44913,12 @@
           "modulePath": "@c2n/tabs",
           "description": "Tab strip that shows one content panel at a time.\n\nLight-DOM children are split in two groups: every `<c2-tab for=\"…\">` becomes a tab in the header\n(they slot themselves into `tab`), every other child is a panel whose `id` matches a tab's `for`.\nOnly the panel of the selected tab is rendered. The header is a `tablist`: Arrow keys, Home and\nEnd move between tabs, Enter and Space activate the focused one.",
           "attributes": [
+            {
+              "name": "aria-label",
+              "type": "string | null",
+              "default": "null",
+              "description": "Accessible name for the tab list."
+            },
             {
               "name": "selected-tab",
               "type": "string",
@@ -43921,7 +44948,7 @@
             {
               "name": "--c2-tabs--box-shadow",
               "type": "box-shadow",
-              "default": "inset 0px -2px 0px 0px rgb(230, 230, 230)",
+              "default": "inset 0px -2px 0px 0px rgb(213, 213, 213)",
               "part": "",
               "property": "box-shadow",
               "token": "--c2-theme--color-outline-variant"
@@ -49969,7 +50996,8 @@
       ],
       "composition": {
         "internal": [
-          "c2-attachment, c2-button"
+          "c2-attachment",
+          "c2-button"
         ],
         "slotted": [],
         "usedBy": []
@@ -50853,6 +51881,9 @@
     "c2-link-button": "link-button",
     "c2-list": "list",
     "c2-list-item": "list-item",
+    "c2-log-viewer": "log-viewer",
+    "c2-masonry": "masonry",
+    "c2-masonry-item": "masonry",
     "c2-mat-icon": "mat-icon",
     "c2-menu": "menu",
     "c2-menu-item": "menu",
@@ -50937,6 +51968,8 @@
     "@c2n/link-button": "link-button",
     "@c2n/list": "list",
     "@c2n/list-item": "list-item",
+    "@c2n/log-viewer": "log-viewer",
+    "@c2n/masonry": "masonry",
     "@c2n/mat-icon": "mat-icon",
     "@c2n/menu": "menu",
     "@c2n/modal": "modal",
@@ -50990,7 +52023,7 @@
         "light": "#0265dc",
         "dark": "#5aa3ff",
         "description": "Accent colour: filled buttons, selected states, focused borders, links.",
-        "usedBy": 57
+        "usedBy": 59
       },
       {
         "name": "--c2-theme--color-primary-hover",
@@ -51038,7 +52071,7 @@
         "light": "#ffffff",
         "dark": "#18181b",
         "description": "Default surface of inputs, lists, cards, dialogs.",
-        "usedBy": 49
+        "usedBy": 47
       },
       {
         "name": "--c2-theme--color-surface-container-low",
@@ -51046,7 +52079,7 @@
         "light": "#fafafa",
         "dark": "#1f1f23",
         "description": "Slightly raised surface: side navigation, read-only fields, subtle hover.",
-        "usedBy": 13
+        "usedBy": 14
       },
       {
         "name": "--c2-theme--color-surface-container",
@@ -51062,7 +52095,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "Primary text colour.",
-        "usedBy": 63
+        "usedBy": 64
       },
       {
         "name": "--c2-theme--color-on-surface-variant",
@@ -51086,7 +52119,7 @@
         "light": "#e4e4e7",
         "dark": "#27272a",
         "description": "Hairline dividers and light borders.",
-        "usedBy": 79
+        "usedBy": 74
       },
       {
         "name": "--c2-theme--color-outline-strong",
@@ -51175,14 +52208,14 @@
         "category": "radius",
         "light": "6px",
         "description": "Default radius: buttons, inputs, list items, tooltips.",
-        "usedBy": 51
+        "usedBy": 53
       },
       {
         "name": "--c2-theme--radius-lg",
         "category": "radius",
         "light": "8px",
         "description": "Large radius: cards, panels, popovers.",
-        "usedBy": 72
+        "usedBy": 71
       },
       {
         "name": "--c2-theme--radius-xl",
@@ -51210,7 +52243,7 @@
         "category": "border",
         "light": null,
         "description": "Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.",
-        "usedBy": 48
+        "usedBy": 50
       },
       {
         "name": "--c2-theme--focus-ring",
@@ -51218,7 +52251,7 @@
         "light": "2px solid rgba(2, 101, 220, 0.4)",
         "dark": "2px solid rgba(90, 163, 255, 0.5)",
         "description": "Focus-visible outline of every component.",
-        "usedBy": 39
+        "usedBy": 40
       },
       {
         "name": "--c2-theme--disabled-opacity",
@@ -51240,7 +52273,7 @@
         "light": "0 8px 24px rgba(24, 24, 27, 0.08)",
         "dark": "0 8px 24px rgba(0, 0, 0, 0.45)",
         "description": "Shadow of popovers, menus and tooltips.",
-        "usedBy": 10
+        "usedBy": 11
       },
       {
         "name": "--c2-theme--shadow-lg",
@@ -51537,12 +52570,12 @@
       "--c2-chatbot--border-top-right-radius": "--c2-theme--radius-lg",
       "--c2-chatbot--border-bottom-left-radius": "--c2-theme--radius-lg",
       "--c2-chatbot--border-bottom-right-radius": "--c2-theme--radius-lg",
-      "--c2-chatbot--border-top": "--c2-theme--color-outline-variant",
-      "--c2-chatbot--border-right": "--c2-theme--color-outline-variant",
-      "--c2-chatbot--border-bottom": "--c2-theme--color-outline-variant",
-      "--c2-chatbot--border-left": "--c2-theme--color-outline-variant",
-      "--c2-chatbot__header--background": "--c2-theme--color-surface",
-      "--c2-chatbot__header--border-bottom": "--c2-theme--color-outline-variant",
+      "--c2-chatbot--border-top": "--c2-theme--border",
+      "--c2-chatbot--border-right": "--c2-theme--border",
+      "--c2-chatbot--border-bottom": "--c2-theme--border",
+      "--c2-chatbot--border-left": "--c2-theme--border",
+      "--c2-chatbot__header--background": "--c2-theme--color-surface-container-low",
+      "--c2-chatbot__header--border-bottom": "--c2-theme--border",
       "--c2-checkbox__container--border-top-left-radius": "--c2-theme--radius-sm",
       "--c2-checkbox__container--border-top-right-radius": "--c2-theme--radius-sm",
       "--c2-checkbox__container--border-bottom-left-radius": "--c2-theme--radius-sm",
@@ -51593,7 +52626,6 @@
       "--c2-code-viewer--border-bottom-right-radius": "--c2-theme--radius-lg",
       "--c2-code-viewer__header--font-size": "--c2-theme--font-size-sm",
       "--c2-code-viewer__copy--border-radius": "--c2-theme--radius-md",
-      "--c2-color-select__popover--background-color": "--c2-theme--color-surface",
       "--c2-color-select__popover--border-top": "--c2-theme--border",
       "--c2-color-select__popover--border-right": "--c2-theme--border",
       "--c2-color-select__popover--border-bottom": "--c2-theme--border",
@@ -51607,15 +52639,11 @@
       "--c2-color-select__color__sample--border-bottom": "--c2-theme--border",
       "--c2-color-select__color__sample--border-left": "--c2-theme--border",
       "--c2-color-select__color__sample--border-radius": "--c2-theme--radius-sm",
-      "--c2-color-slider--border-radius": "--c2-theme--radius-lg",
       "--c2-color-slider--border-top-left-radius": "--c2-theme--radius-lg",
       "--c2-color-slider--border-top-right-radius": "--c2-theme--radius-lg",
       "--c2-color-slider--border-bottom-left-radius": "--c2-theme--radius-lg",
       "--c2-color-slider--border-bottom-right-radius": "--c2-theme--radius-lg",
-      "--c2-color-slider--border-top": "--c2-theme--border",
-      "--c2-color-slider--border-right": "--c2-theme--border",
-      "--c2-color-slider--border-bottom": "--c2-theme--border",
-      "--c2-color-slider--borde-leftr": "--c2-theme--border",
+      "--c2-color-slider--border-left": "--c2-theme--border",
       "--c2-color-slider__color-handle--border-top-left-radius": "--c2-theme--radius-md",
       "--c2-color-slider__color-handle--border-top-right-radius": "--c2-theme--radius-md",
       "--c2-color-slider__color-handle--border-bottom-left-radius": "--c2-theme--radius-md",
@@ -51744,6 +52772,13 @@
       "--c2-list-item__selected__hover--background": "--c2-theme--color-primary-container",
       "--c2-list-item__focus--outline": "--c2-theme--focus-ring",
       "--c2-list-item__disabled--opacity": "--c2-theme--disabled-opacity",
+      "--c2-masonry__placeholder--background": "--c2-theme--color-primary",
+      "--c2-masonry__placeholder--border": "--c2-theme--color-primary",
+      "--c2-masonry__placeholder--border-radius": "--c2-theme--radius-md",
+      "--c2-masonry-item__handle--color": "--c2-theme--color-on-surface",
+      "--c2-masonry-item__handle--border-radius": "--c2-theme--radius-md",
+      "--c2-masonry-item__handle__focus--outline": "--c2-theme--focus-ring",
+      "--c2-masonry-item__dragging--box-shadow": "--c2-theme--shadow-md",
       "--c2-menu--background": "--c2-theme--color-surface",
       "--c2-menu--border-top": "--c2-theme--color-outline-variant",
       "--c2-menu--border-right": "--c2-theme--color-outline-variant",