@c2n/mcp 0.0.9 → 0.0.10

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.9",
+  "c2nVersion": "0.0.10",
   "categories": [
     "Inputs",
     "Buttons",
@@ -1309,7 +1309,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -2657,7 +2659,7 @@
       "package": "@c2n/avatar",
       "title": "Avatar",
       "description": "Image, initials or icon for a person, with status dot and badge.",
-      "intro": "`c2-avatar` shows a person or entity. It resolves its content in order: the `src` image (a broken image fires `error` and falls back to the initials), then slotted content such as an icon or emoji, then the initials computed from `name`. `initial-count=\"2\"` picks the first and last word of a longer name, and `initials` overrides the computation. `auto-color` derives a stable background hue from the name, `status` adds a presence dot, and the `badge` slot replaces the dot with your own element. One `--c2-avatar--size` token drives the width, height and font size.",
+      "intro": "`c2-avatar` shows a person or entity. It resolves its content in order: the `src` image (a broken image fires `error` and falls back to the initials), then slotted content such as an icon or emoji, then the initials computed from `name`. `initial-count=\"2\"` picks the first and last word of a longer name, and `initials` overrides the computation. `auto-color` derives a stable background hue from the name, `status` adds a presence dot, and the `badge` slot replaces the dot with your own element. One `--c2-avatar--size` token drives the width, height and font size. The same package also exports `c2-avatar-group`, which stacks avatars responsively and replaces those that no longer fit with an automatic count.",
       "category": "Data display",
       "status": "stable",
       "docsUrl": "https://code2nguyen.github.io/web-components/components/avatar",
@@ -3070,12 +3072,148 @@
               "property": "color"
             }
           ]
+        },
+        {
+          "tag": "c2-avatar-group",
+          "className": "AvatarGroup",
+          "modulePath": "@c2n/avatar",
+          "description": "Responsive stack of `c2-avatar` elements. It observes its rendered width and each avatar's actual size, then hides\nthe avatars that no longer fit and replaces them with a count. The host fills the available inline space up to\n`--c2-avatar-group--max-width`, so it also reacts when its parent becomes narrower.",
+          "attributes": [
+            {
+              "name": "max-visible",
+              "type": "number",
+              "default": "0",
+              "description": "Optional hard cap in addition to the automatically calculated responsive limit. Zero means no hard cap."
+            },
+            {
+              "name": "count-mode",
+              "type": "AvatarGroupCountMode",
+              "default": "'hidden'",
+              "description": "Whether the overflow indicator shows `+hidden` or the total number of avatars."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "default": "'Avatar group'",
+              "description": "Accessible name for the group."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "`c2-avatar` elements displayed in source order."
+            }
+          ],
+          "events": [
+            {
+              "name": "overflow-change",
+              "type": "CustomEvent<AvatarGroupOverflowDetail>",
+              "description": "Fired when resizing changes the visible or hidden counts."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "overflow",
+              "description": "Count shown after the visible avatars."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-avatar-group--max-width",
+              "type": "pixel",
+              "default": "320px",
+              "part": "",
+              "property": "max-width",
+              "description": "Maximum responsive width of the group."
+            },
+            {
+              "name": "--c2-avatar-group--overlap",
+              "type": "pixel",
+              "default": "10px",
+              "part": "",
+              "property": "overlap",
+              "description": "Amount that adjacent avatars overlap."
+            },
+            {
+              "name": "--c2-avatar-group__avatar--box-shadow",
+              "type": "box-shadow",
+              "default": "0 0 0 2px #ffffff",
+              "part": "avatar",
+              "property": "box-shadow",
+              "description": "Ring applied to slotted avatars so overlaps stay distinct."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--size",
+              "type": "pixel",
+              "default": "32px",
+              "part": "overflow",
+              "property": "size",
+              "description": "Width and height of the overflow count."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--background",
+              "type": "color",
+              "default": "#52525b",
+              "part": "overflow",
+              "property": "background",
+              "token": "--c2-theme--color-inverse-surface",
+              "description": "Overflow count background."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--color",
+              "type": "color",
+              "default": "#ffffff",
+              "part": "overflow",
+              "property": "color",
+              "token": "--c2-theme--color-on-inverse-surface",
+              "description": "Overflow count text colour."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--border",
+              "type": "border",
+              "default": "2px solid #ffffff",
+              "part": "overflow",
+              "property": "border",
+              "token": "--c2-theme--color-surface",
+              "description": "Ring around the overflow count."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "overflow",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full",
+              "description": "Overflow count corner radius."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "overflow",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm",
+              "description": "Overflow count text size."
+            },
+            {
+              "name": "--c2-avatar-group__overflow--font-weight",
+              "type": "font-weight",
+              "default": "600",
+              "part": "overflow",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-semibold",
+              "description": "Overflow count text weight."
+            }
+          ]
         }
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-avatar"
+        ],
         "usedBy": [
+          "c2-avatar",
           "c2-chat-message"
         ]
       },
@@ -3147,43 +3285,49 @@
           "kind": "usage",
           "label": "Initials",
           "html": "<c2-avatar name=\"Nguyen Thai Vinh\"></c2-avatar>\n<c2-avatar name=\"Nguyen Thai Vinh\" initial-count=\"2\"></c2-avatar>\n<c2-avatar name=\"Nguyen Thai Vinh\" initials=\"TV\"></c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
           "label": "Sizes",
           "html": "<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" style=\"--c2-avatar--size: 20px\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" style=\"--c2-avatar--size: 48px\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" style=\"--c2-avatar--size: 64px\"></c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
           "label": "Image and fallbacks",
           "html": "<c2-avatar name=\"Elisa Jasmin\" src=\"/web-components/chat.avif\" style=\"--c2-avatar--size: 48px\"></c2-avatar>\n<c2-avatar name=\"Elisa Jasmin\" initial-count=\"2\" src=\"/web-components/missing.png\" style=\"--c2-avatar--size: 48px\"></c2-avatar>\n<c2-avatar name=\"Assistant\" style=\"--c2-avatar--size: 48px; --c2-avatar--background: #18181b\">\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"8\" width=\"18\" height=\"12\" rx=\"2\"></rect><path d=\"M12 8V4M8 14h.01M16 14h.01\"></path></svg>\n</c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
           "label": "Auto color",
           "html": "<c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n<c2-avatar auto-color name=\"Grace Hopper\" initial-count=\"2\"></c2-avatar>\n<c2-avatar auto-color name=\"Alan Turing\" initial-count=\"2\"></c2-avatar>\n<c2-avatar auto-color name=\"Katherine Johnson\" initial-count=\"2\"></c2-avatar>\n<c2-avatar auto-color name=\"Linus Torvalds\" initial-count=\"2\"></c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
           "label": "Status and badge",
           "html": "<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" status=\"online\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" status=\"away\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" status=\"busy\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" status=\"offline\"></c2-avatar>\n<c2-avatar name=\"Ada Lovelace\" initial-count=\"2\" style=\"--c2-avatar--size: 40px\"><span slot=\"badge\" class=\"badge\">3</span></c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
           "label": "Editable",
           "html": "<c2-avatar class=\"editable-avatar\" editable name=\"Elisa Jasmin\" src=\"/web-components/chat.avif\"></c2-avatar>\n<c2-avatar class=\"editable-avatar\" editable auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "usage",
-          "label": "Stacked group",
-          "html": "<div class=\"stack\" style=\"display: flex\">\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Grace Hopper\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Alan Turing\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar initials=\"+4\" style=\"--c2-avatar--background: #e4e4e7; --c2-avatar--color: #52525b; --c2-avatar--font-size: 11px\"></c2-avatar>\n</div>",
-          "css": ".stack c2-avatar {\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stack c2-avatar + c2-avatar {\n  margin-left: -10px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+          "label": "Responsive group",
+          "html": "<c2-avatar-group class=\"responsive-group\" aria-label=\"Project contributors\" client:only=\"lit\">\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Grace Hopper\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Alan Turing\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Katherine Johnson\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Margaret Hamilton\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Radia Perlman\" initial-count=\"2\"></c2-avatar>\n</c2-avatar-group>",
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Total count",
+          "html": "<c2-avatar-group class=\"responsive-group\" count-mode=\"total\" max-visible=\"3\" aria-label=\"Design team\" client:only=\"lit\">\n  <c2-avatar auto-color name=\"Dieter Rams\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Susan Kare\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Paula Scher\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Don Norman\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Irene Au\" initial-count=\"2\"></c2-avatar>\n</c2-avatar-group>",
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 150px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}\n.badge {\n  background: #dc2626;\n  color: #ffffff;\n  font-size: 10px;\n  font-weight: 700;\n  line-height: 1;\n  padding: 2px 5px;\n}\n.editable-avatar {\n  --c2-avatar--size: 72px;\n}"
         },
         {
           "kind": "gallery",
@@ -3345,15 +3489,29 @@
         },
         {
           "kind": "gallery",
-          "label": "Stacked group",
+          "label": "Responsive group",
+          "section": "Presets",
+          "description": "Responsive group Presets example for c2-avatar.",
+          "isDefault": false,
+          "tags": [
+            "c2-avatar-group",
+            "c2-avatar"
+          ],
+          "html": "<c2-avatar-group class=\"responsive-group\" aria-label=\"Project contributors\" client:only=\"lit\">\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Grace Hopper\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Alan Turing\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Katherine Johnson\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Margaret Hamilton\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Radia Perlman\" initial-count=\"2\"></c2-avatar>\n</c2-avatar-group>",
+          "css": ".responsive-group {\n  --c2-avatar-group--max-width: 152px;\n  --c2-avatar-group--overlap: 12px;\n}\n.responsive-group c2-avatar {\n  --c2-avatar--size: 36px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Total count",
           "section": "Presets",
-          "description": "Stacked group Presets example for c2-avatar.",
+          "description": "Total count Presets example for c2-avatar.",
           "isDefault": false,
           "tags": [
+            "c2-avatar-group",
             "c2-avatar"
           ],
-          "html": "<div class=\"stacked-row\">\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\" class=\"stacked\" client:only=\"lit\"></c2-avatar>\n  <c2-avatar auto-color name=\"Grace Hopper\" initial-count=\"2\" class=\"stacked\" client:only=\"lit\"></c2-avatar>\n  <c2-avatar auto-color name=\"Alan Turing\" initial-count=\"2\" class=\"stacked\" client:only=\"lit\"></c2-avatar>\n  <c2-avatar initials=\"+6\" class=\"stacked\" style=\"--c2-avatar--background: #e4e4e7; --c2-avatar--color: #52525b; --c2-avatar--font-size: 12px\" client:only=\"lit\"></c2-avatar>\n</div>",
-          "css": ".stacked {\n  --c2-avatar--size: 36px;\n  --c2-avatar--box-shadow: 0 0 0 2px #ffffff;\n}\n.stacked-row {\n  display: flex;\n}\n.stacked-row c2-avatar + c2-avatar {\n  margin-left: -12px;\n}"
+          "html": "<c2-avatar-group class=\"total-group\" count-mode=\"total\" max-visible=\"3\" aria-label=\"Design team\" client:only=\"lit\">\n  <c2-avatar auto-color name=\"Dieter Rams\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Susan Kare\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Paula Scher\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Don Norman\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Irene Au\" initial-count=\"2\"></c2-avatar>\n</c2-avatar-group>",
+          "css": ".total-group {\n  --c2-avatar-group--max-width: 132px;\n  --c2-avatar-group--overlap: 8px;\n  --c2-avatar-group__overflow--background: #18181b;\n}\n.total-group c2-avatar {\n  --c2-avatar--size: 32px;\n}"
         },
         {
           "kind": "gallery",
@@ -3370,7 +3528,7 @@
         {
           "kind": "preview",
           "label": "Preview",
-          "html": "<div class=\"preview-row\">\n  <c2-avatar name=\"Nguyen Thai Vinh\" status=\"online\"></c2-avatar>\n  <c2-avatar auto-color name=\"Elisa Jasmin\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar name=\"Grace Hopper\" src=\"/web-components/chat.avif\"></c2-avatar>\n</div>"
+          "html": "<c2-avatar-group aria-label=\"Project contributors\" style=\"--c2-avatar-group--max-width:150px\">\n  <c2-avatar name=\"Nguyen Thai Vinh\" status=\"online\"></c2-avatar>\n  <c2-avatar auto-color name=\"Elisa Jasmin\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Ada Lovelace\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar name=\"Grace Hopper\" src=\"/web-components/chat.avif\"></c2-avatar>\n  <c2-avatar auto-color name=\"Katherine Johnson\" initial-count=\"2\"></c2-avatar>\n  <c2-avatar auto-color name=\"Margaret Hamilton\" initial-count=\"2\"></c2-avatar>\n</c2-avatar-group>"
         }
       ],
       "hasGallery": true
@@ -4948,7 +5106,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -5066,6 +5226,252 @@
       ],
       "hasGallery": true
     },
+    "border-beam": {
+      "id": "border-beam",
+      "package": "@c2n/border-beam",
+      "title": "Border Beam",
+      "description": "A decorative beam that travels around the border of any positioned container.",
+      "intro": "`c2-border-beam` is a pointer-transparent decorative overlay for cards, panels and callouts. Place it inside a container with `position: relative`; a masked gradient follows the real border and inherits its corner radius without drawing a second outline. The default `side=\"all\"` loops around the full perimeter. Set one edge, such as `side=\"top\"`, and the beam travels forward then backward along only that border. Geometry and timing are presentation concerns configured with CSS variables; `side`, `count`, `reverse` and `paused` remain behavioral attributes. Reduced-motion preferences hide the decorative effect automatically.",
+      "category": "Layout",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/border-beam",
+      "elements": [
+        {
+          "tag": "c2-border-beam",
+          "className": "BorderBeam",
+          "modulePath": "@c2n/border-beam",
+          "description": "Decorative overlay that sends one or more soft highlights around the border of its containing block. Place it as\na direct child of a positioned container. The component inherits the container radius and uses a border mask, so\nthe highlight sits on the real border instead of drawing a second, offset outline.",
+          "attributes": [
+            {
+              "name": "count",
+              "type": "number",
+              "default": "1",
+              "description": "Number of beams distributed evenly around the perimeter."
+            },
+            {
+              "name": "side",
+              "type": "BorderBeamSide",
+              "default": "'all'",
+              "description": "Border followed by the beam. `all` loops around the perimeter; one edge moves forward then backward."
+            },
+            {
+              "name": "reverse",
+              "type": "boolean",
+              "default": "false",
+              "description": "Sends the beams around the perimeter in the opposite direction."
+            },
+            {
+              "name": "paused",
+              "type": "boolean",
+              "default": "false",
+              "description": "Freezes the beams at their current positions."
+            }
+          ],
+          "slots": [],
+          "events": [],
+          "cssParts": [
+            {
+              "name": "beam",
+              "description": "Each animated gradient beam."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-border-beam--outset",
+              "type": "pixel",
+              "default": "0px",
+              "part": "",
+              "property": "outset",
+              "description": "Distance between the beam layer and the container edge."
+            },
+            {
+              "name": "--c2-border-beam__beam--size",
+              "type": "pixel",
+              "default": "100px",
+              "part": "beam",
+              "property": "size",
+              "description": "Length of the visible highlight."
+            },
+            {
+              "name": "--c2-border-beam__beam--width",
+              "type": "pixel",
+              "default": "1px",
+              "part": "beam",
+              "property": "width",
+              "description": "Width of the border channel that reveals the beam."
+            },
+            {
+              "name": "--c2-border-beam__beam--radius",
+              "type": "border-radius",
+              "default": "12px",
+              "part": "beam",
+              "property": "radius",
+              "token": "--c2-theme--radius-lg",
+              "description": "Corner radius of the motion path."
+            },
+            {
+              "name": "--c2-border-beam__beam--color-from",
+              "type": "color",
+              "default": "#0265dc",
+              "part": "beam",
+              "property": "color-from",
+              "token": "--c2-theme--color-primary",
+              "description": "Leading gradient colour."
+            },
+            {
+              "name": "--c2-border-beam__beam--color-to",
+              "type": "color",
+              "default": "#60a5fa",
+              "part": "beam",
+              "property": "color-to",
+              "description": "Trailing gradient colour."
+            },
+            {
+              "name": "--c2-border-beam__beam--opacity",
+              "type": "opacity",
+              "default": "0.95",
+              "part": "beam",
+              "property": "opacity",
+              "description": "Opacity of each beam."
+            },
+            {
+              "name": "--c2-border-beam__beam--filter",
+              "type": "filter",
+              "default": "drop-shadow(0 0 3px rgba(2, 101, 220, 0.35))",
+              "part": "beam",
+              "property": "filter",
+              "description": "Glow or other filter applied to each beam."
+            },
+            {
+              "name": "--c2-border-beam__beam--duration",
+              "type": "time",
+              "default": "6s",
+              "part": "beam",
+              "property": "duration",
+              "description": "Time taken to travel once around the perimeter."
+            },
+            {
+              "name": "--c2-border-beam__beam--delay",
+              "type": "time",
+              "default": "0s",
+              "part": "beam",
+              "property": "delay",
+              "description": "Delay before animation; a negative value starts partway around."
+            },
+            {
+              "name": "--c2-border-beam--z-index",
+              "type": "integer",
+              "default": "1",
+              "part": "",
+              "property": "z-index",
+              "description": "Stacking level of the decorative overlay."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/border-beam @c2n/theme",
+        "import": "import '@c2n/border-beam'",
+        "importClass": "import { BorderBeam } from '@c2n/border-beam'"
+      },
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "Default",
+          "html": "<div class=\"beam-card\">\n  <strong>Workspace overview</strong>\n  <p>Review task status, deployment health, and recent automation activity.</p>\n  <c2-border-beam></c2-border-beam>\n</div>",
+          "css": ".beam-card {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 420px);\n  overflow: hidden;\n  padding: 22px;\n  border: 1px solid #e4e4e7;\n  border-radius: 12px;\n  background: #ffffff;\n}\n.beam-card strong {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 15px;\n}\n.beam-card p {\n  margin: 0;\n  color: #71717a;\n  font-size: 14px;\n  line-height: 1.5;\n}\n.violet-beam {\n  --c2-border-beam__beam--color-from: #7c3aed;\n  --c2-border-beam__beam--color-to: #ec4899;\n  --c2-border-beam__beam--size: 120px;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));\n  --c2-border-beam__beam--duration: 4s;\n}\n.slow-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 7s;\n}\n.single-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 5s;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Reverse",
+          "html": "<div class=\"beam-card\">\n  <strong>Protected checkout</strong>\n  <p>The beam can travel in either direction without changing the layout.</p>\n  <c2-border-beam class=\"slow-beam\" reverse></c2-border-beam>\n</div>",
+          "css": ".beam-card {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 420px);\n  overflow: hidden;\n  padding: 22px;\n  border: 1px solid #e4e4e7;\n  border-radius: 12px;\n  background: #ffffff;\n}\n.beam-card strong {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 15px;\n}\n.beam-card p {\n  margin: 0;\n  color: #71717a;\n  font-size: 14px;\n  line-height: 1.5;\n}\n.violet-beam {\n  --c2-border-beam__beam--color-from: #7c3aed;\n  --c2-border-beam__beam--color-to: #ec4899;\n  --c2-border-beam__beam--size: 120px;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));\n  --c2-border-beam__beam--duration: 4s;\n}\n.slow-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 7s;\n}\n.single-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 5s;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Themed",
+          "html": "<div class=\"beam-card\">\n  <strong>New automation</strong>\n  <p>Use CSS variables to create a stronger accent for important content.</p>\n  <c2-border-beam class=\"violet-beam\" count=\"2\"></c2-border-beam>\n</div>",
+          "css": ".beam-card {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 420px);\n  overflow: hidden;\n  padding: 22px;\n  border: 1px solid #e4e4e7;\n  border-radius: 12px;\n  background: #ffffff;\n}\n.beam-card strong {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 15px;\n}\n.beam-card p {\n  margin: 0;\n  color: #71717a;\n  font-size: 14px;\n  line-height: 1.5;\n}\n.violet-beam {\n  --c2-border-beam__beam--color-from: #7c3aed;\n  --c2-border-beam__beam--color-to: #ec4899;\n  --c2-border-beam__beam--size: 120px;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));\n  --c2-border-beam__beam--duration: 4s;\n}\n.slow-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 7s;\n}\n.single-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 5s;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Single border",
+          "html": "<div class=\"beam-card\">\n  <strong>Active workspace</strong>\n  <p>The highlight moves forward and backward along the top edge.</p>\n  <c2-border-beam class=\"single-beam\" side=\"top\"></c2-border-beam>\n</div>",
+          "css": ".beam-card {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 420px);\n  overflow: hidden;\n  padding: 22px;\n  border: 1px solid #e4e4e7;\n  border-radius: 12px;\n  background: #ffffff;\n}\n.beam-card strong {\n  display: block;\n  margin-bottom: 8px;\n  font-size: 15px;\n}\n.beam-card p {\n  margin: 0;\n  color: #71717a;\n  font-size: 14px;\n  line-height: 1.5;\n}\n.violet-beam {\n  --c2-border-beam__beam--color-from: #7c3aed;\n  --c2-border-beam__beam--color-to: #ec4899;\n  --c2-border-beam__beam--size: 120px;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.55));\n  --c2-border-beam__beam--duration: 4s;\n}\n.slow-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 7s;\n}\n.single-beam {\n  --c2-border-beam__beam--size: 72px;\n  --c2-border-beam__beam--duration: 5s;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-border-beam.",
+          "isDefault": true,
+          "tags": [
+            "c2-border-beam"
+          ],
+          "html": "<div class=\"beam-panel-default\">\n  <strong>Workspace overview</strong>\n  <p>Review tasks, deployment health, and recent automation activity.</p>\n  <c2-border-beam></c2-border-beam>\n</div>",
+          "css": ".beam-panel-default {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 380px);\n  overflow: hidden;\n  padding: 24px;\n  border: 1px solid #e4e4e7;\n  border-radius: 12px;\n  background: #ffffff;\n}\n.beam-panel-default strong {\n  display: block;\n  margin-bottom: 8px;\n}\n.beam-panel-default p {\n  margin: 0;\n  color: #71717a;\n  font-size: 14px;\n  line-height: 1.5;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Electric violet",
+          "section": "Presets",
+          "description": "Electric violet Presets example for c2-border-beam.",
+          "isDefault": false,
+          "tags": [
+            "c2-border-beam"
+          ],
+          "html": "<div class=\"beam-panel-violet\">\n  <strong>AI workflow is live</strong>\n  <p>Three agents are coordinating the release.</p>\n  <c2-border-beam class=\"beam-violet\"></c2-border-beam>\n</div>",
+          "css": ".beam-panel-violet {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 380px);\n  overflow: hidden;\n  padding: 24px;\n  border: 1px solid #2e1065;\n  border-radius: 16px;\n  color: #faf5ff;\n  background: linear-gradient(145deg, #1e1235, #0f0b18);\n}\n.beam-panel-violet p {\n  margin: 8px 0 0;\n  color: #c4b5fd;\n  font-size: 14px;\n}\n.beam-violet {\n  --c2-border-beam__beam--radius: 14px;\n  --c2-border-beam__beam--width: 2px;\n  --c2-border-beam__beam--size: 120px;\n  --c2-border-beam__beam--color-from: #8b5cf6;\n  --c2-border-beam__beam--color-to: #f0abfc;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 7px rgba(192, 132, 252, 0.7));\n  --c2-border-beam__beam--duration: 3.8s;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Warm signal",
+          "section": "Presets",
+          "description": "Warm signal Presets example for c2-border-beam.",
+          "isDefault": false,
+          "tags": [
+            "c2-border-beam"
+          ],
+          "html": "<div class=\"beam-panel-warm\">\n  <strong>Deployment needs attention</strong>\n  <p>One environment is waiting for approval.</p>\n  <c2-border-beam class=\"beam-warm\" reverse></c2-border-beam>\n</div>",
+          "css": ".beam-panel-warm {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 380px);\n  overflow: hidden;\n  padding: 24px;\n  border: 1px solid #fed7aa;\n  border-radius: 14px;\n  background: #fffaf5;\n}\n.beam-panel-warm p {\n  margin: 8px 0 0;\n  color: #9a3412;\n  font-size: 14px;\n}\n.beam-warm {\n  --c2-border-beam__beam--radius: 12px;\n  --c2-border-beam__beam--size: 88px;\n  --c2-border-beam__beam--color-from: #f97316;\n  --c2-border-beam__beam--color-to: #facc15;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.45));\n  --c2-border-beam__beam--duration: 6s;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Dual orbit",
+          "section": "Presets",
+          "description": "Dual orbit Presets example for c2-border-beam.",
+          "isDefault": false,
+          "tags": [
+            "c2-border-beam"
+          ],
+          "html": "<div class=\"beam-panel-dual\">\n  <strong>Realtime sync</strong>\n  <p>Multiple beams can be distributed evenly around the same perimeter.</p>\n  <c2-border-beam class=\"beam-dual\" count=\"2\"></c2-border-beam>\n</div>",
+          "css": ".beam-panel-dual {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 380px);\n  overflow: hidden;\n  padding: 24px;\n  border: 1px solid #dbeafe;\n  border-radius: 18px;\n  background: linear-gradient(145deg, #eff6ff, #ffffff);\n}\n.beam-panel-dual p {\n  margin: 8px 0 0;\n  color: #475569;\n  font-size: 14px;\n}\n.beam-dual {\n  --c2-border-beam__beam--radius: 16px;\n  --c2-border-beam__beam--size: 70px;\n  --c2-border-beam__beam--filter: drop-shadow(0 0 5px rgba(14, 165, 233, 0.5));\n  --c2-border-beam__beam--duration: 7s;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Single border",
+          "section": "Presets",
+          "description": "Single border Presets example for c2-border-beam.",
+          "isDefault": false,
+          "tags": [
+            "c2-border-beam"
+          ],
+          "html": "<div class=\"beam-panel-sides\">\n  <strong>Selective emphasis</strong>\n  <p>This beam moves forward and backward along only the top border.</p>\n  <c2-border-beam class=\"beam-single\" side=\"top\"></c2-border-beam>\n</div>",
+          "css": ".beam-panel-sides {\n  position: relative;\n  box-sizing: border-box;\n  width: min(100%, 380px);\n  overflow: hidden;\n  padding: 24px;\n  border: 1px solid #dbeafe;\n  border-radius: 12px;\n  background: #f8fbff;\n}\n.beam-panel-sides p {\n  margin: 8px 0 0;\n  color: #64748b;\n  font-size: 14px;\n}\n.beam-single {\n  --c2-border-beam__beam--size: 76px;\n  --c2-border-beam__beam--duration: 5s;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<div style=\"position:relative;box-sizing:border-box;width:270px;overflow:hidden;padding:20px;border:1px solid #e4e4e7;border-radius:12px;background:#fff\"><strong style=\"display:block;margin-bottom:7px;font-size:14px\">Workspace overview</strong><span style=\"color:#71717a;font-size:12px;line-height:1.45\">Review task status and deployment health.</span><c2-border-beam></c2-border-beam></div>"
+        }
+      ],
+      "hasGallery": true
+    },
     "breadcrumb": {
       "id": "breadcrumb",
       "package": "@c2n/breadcrumb",
@@ -7855,7 +8261,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -10695,6 +11103,20 @@
           "html": "<c2-checkbox checked class=\"soft-tint\"></c2-checkbox>",
           "css": ".soft-tint {\n  --c2-checkbox__container--background-color: #f4f4f5;\n  --c2-checkbox__container--border-top: 1px solid transparent;\n  --c2-checkbox__container--border-right: 1px solid transparent;\n  --c2-checkbox__container--border-bottom: 1px solid transparent;\n  --c2-checkbox__container--border-left: 1px solid transparent;\n  --c2-checkbox__container__selected--background-color: #dbeafe;\n  --c2-checkbox__checkmark--color: #1d4ed8;\n  --c2-checkbox__mixedmark--color: #1d4ed8;\n}"
         },
+        {
+          "kind": "gallery",
+          "label": "Notification toggle",
+          "section": "Toggle button",
+          "description": "Notification toggle Toggle button example for c2-checkbox.",
+          "isDefault": false,
+          "tags": [
+            "c2-checkbox",
+            "c2-feather-bell",
+            "c2-feather-bell-off"
+          ],
+          "html": "<c2-checkbox class=\"notification-toggle\" aria-label=\"Toggle notifications\">\n  <c2-feather-bell slot=\"checkmark\"></c2-feather-bell>\n  <c2-feather-bell-off slot=\"uncheckmark\"></c2-feather-bell-off>\n</c2-checkbox>\n<c2-checkbox class=\"notification-toggle\" aria-label=\"Toggle notifications\" checked>\n  <c2-feather-bell slot=\"checkmark\"></c2-feather-bell>\n  <c2-feather-bell-off slot=\"uncheckmark\"></c2-feather-bell-off>\n</c2-checkbox>",
+          "css": ".notification-toggle {\n  --c2-checkbox__container--width: 40px;\n  --c2-checkbox__container--height: 40px;\n  --c2-checkbox__state-layer--size: 40px;\n  --c2-checkbox__container--border-top-left-radius: 10px;\n  --c2-checkbox__container--border-top-right-radius: 10px;\n  --c2-checkbox__container--border-bottom-left-radius: 10px;\n  --c2-checkbox__container--border-bottom-right-radius: 10px;\n  --c2-checkbox__container--border-top: 1px solid #d4d4d8;\n  --c2-checkbox__container--border-right: 1px solid #d4d4d8;\n  --c2-checkbox__container--border-bottom: 1px solid #d4d4d8;\n  --c2-checkbox__container--border-left: 1px solid #d4d4d8;\n  --c2-checkbox__container--background-color: #ffffff;\n  --c2-checkbox__container__selected--background-color: #18181b;\n  --c2-checkbox__container__selected--border-top: 1px solid #18181b;\n  --c2-checkbox__container__selected--border-right: 1px solid #18181b;\n  --c2-checkbox__container__selected--border-bottom: 1px solid #18181b;\n  --c2-checkbox__container__selected--border-left: 1px solid #18181b;\n  --c2-checkbox__checkmark--size: 18px;\n  --c2-checkbox__checkmark--color: #ffffff;\n  --c2-checkbox__uncheckmark--size: 18px;\n  --c2-checkbox__uncheckmark--color: #3f3f46;\n  --c2-checkbox__state-layer--border-top-left-radius: 10px;\n  --c2-checkbox__state-layer--border-top-right-radius: 10px;\n  --c2-checkbox__state-layer--border-bottom-left-radius: 10px;\n  --c2-checkbox__state-layer--border-bottom-right-radius: 10px;\n  --c2-checkbox__state-layer__hover__unselected--color: #18181b;\n  --c2-checkbox__state-layer__hover__selected--color: #ffffff;\n  --c2-checkbox__container__focus--outline: 2px solid rgba(24, 24, 27, 0.3);\n}"
+        },
         {
           "kind": "gallery",
           "label": "Square hover tint",
@@ -10979,6 +11401,684 @@
       ],
       "hasGallery": true
     },
+    "code-editor": {
+      "id": "code-editor",
+      "package": "@c2n/code-editor",
+      "title": "Code Editor",
+      "description": "Editable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables.",
+      "intro": "`c2-code-editor` is a form control for source code: highlighting, a line-number gutter, bracket matching, undo,",
+      "category": "Inputs",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/code-editor",
+      "elements": [
+        {
+          "tag": "c2-code-editor",
+          "className": "CodeEditor",
+          "modulePath": "@c2n/code-editor",
+          "description": "Source-code field built on CodeMirror 6, which is an **optional peer dependency**: nothing is imported until an\neditor mounts, and when the peer is absent the element degrades to a plain `<textarea>` carrying the same value,\nthe same events and the same form behaviour — only without highlighting. Install what you need alongside it:\n\n```sh\nnpm install",
+          "attributes": [
+            {
+              "name": "value",
+              "type": "string",
+              "default": "''",
+              "description": "The source code. Assigning it replaces the document without losing scroll position or undo history."
+            },
+            {
+              "name": "language",
+              "type": "string",
+              "default": "''",
+              "description": "Language id: one of `BUILT_IN_LANGUAGES`, anything `languageLoader` resolves, or empty for no highlighting."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "default": "''",
+              "description": "Form field name."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "default": "''",
+              "description": "Label above the editor, when the `label` slot is empty."
+            },
+            {
+              "name": "aria-label",
+              "type": "string | null",
+              "default": "null",
+              "description": "Accessible name when nothing visible labels the editor."
+            },
+            {
+              "name": "placeholder",
+              "type": "string",
+              "default": "''",
+              "description": "Text shown while the document is empty."
+            },
+            {
+              "name": "readonly",
+              "type": "boolean",
+              "default": "false",
+              "description": "The document cannot be edited, but is still selectable and focusable."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "false",
+              "description": "Blocks interaction entirely and dims the editor."
+            },
+            {
+              "name": "required",
+              "type": "boolean",
+              "default": "false",
+              "description": "The form is invalid while the value is empty."
+            },
+            {
+              "name": "line-numbers",
+              "type": "boolean",
+              "default": "false",
+              "description": "Show the line-number gutter."
+            },
+            {
+              "name": "wrap",
+              "type": "boolean",
+              "default": "false",
+              "description": "Wrap long lines instead of scrolling horizontally."
+            },
+            {
+              "name": "autocomplete",
+              "type": "boolean",
+              "default": "false",
+              "description": "Offer completions while typing (identifiers, and whatever the grammar contributes)."
+            },
+            {
+              "name": "tab-size",
+              "type": "number",
+              "default": "2",
+              "description": "Width of a tab stop, in characters."
+            },
+            {
+              "name": "error",
+              "type": "boolean",
+              "default": "false",
+              "description": "Renders the error styling; `error-text` replaces the supporting text."
+            },
+            {
+              "name": "error-text",
+              "type": "string",
+              "default": "''",
+              "description": "Message shown in place of the supporting text while `error` is set."
+            },
+            {
+              "name": "help",
+              "type": "string",
+              "default": "''",
+              "description": "Help text under the editor, when the `supporting-text` slot is empty."
+            }
+          ],
+          "slots": [
+            {
+              "name": "label",
+              "description": "Label shown above the editor. Falls back to the `label` attribute."
+            },
+            {
+              "name": "supporting-text",
+              "description": "Help text under the editor. Replaced by `error-text` while `error` is set."
+            }
+          ],
+          "events": [
+            {
+              "name": "ready",
+              "type": "CustomEvent<{ engine: 'codemirror' | 'basic' }>",
+              "description": "The engine settled, so tests and hosts can wait for it. Does not bubble."
+            },
+            {
+              "name": "input",
+              "type": "Event",
+              "description": "The document changed. Fires on every edit."
+            },
+            {
+              "name": "change",
+              "type": "Event",
+              "description": "The value was committed: the editor lost focus after an edit, as a native control does."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "container",
+              "description": "The box around the label, editor and supporting text."
+            },
+            {
+              "name": "label",
+              "description": "The label above the editor."
+            },
+            {
+              "name": "editor",
+              "description": "The element CodeMirror renders into, or the fallback textarea."
+            },
+            {
+              "name": "supporting-text",
+              "description": "The help / error row under the editor."
+            },
+            {
+              "name": "ready",
+              "description": "Shadow DOM styling hook for the ready element."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-code-editor--background",
+              "type": "color",
+              "default": "#ffffff",
+              "part": "",
+              "property": "background",
+              "token": "--c2-theme--color-surface"
+            },
+            {
+              "name": "--c2-code-editor--color",
+              "type": "color",
+              "default": "#24292e",
+              "part": "",
+              "property": "color",
+              "description": "Foreground of text no token class matched."
+            },
+            {
+              "name": "--c2-code-editor--border",
+              "type": "border",
+              "default": "1px solid #bcbcc6",
+              "part": "",
+              "property": "border",
+              "token": "--c2-theme--border"
+            },
+            {
+              "name": "--c2-code-editor__focus--border",
+              "type": "border",
+              "default": "1px solid rgb(2, 101, 220)",
+              "part": "",
+              "state": "focus",
+              "property": "border",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-code-editor__focus--outline",
+              "type": "outline",
+              "default": "2px solid rgba(2, 101, 220, 0.4)",
+              "part": "",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring"
+            },
+            {
+              "name": "--c2-code-editor--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md"
+            },
+            {
+              "name": "--c2-code-editor--box-shadow",
+              "type": "box-shadow",
+              "part": "",
+              "property": "box-shadow"
+            },
+            {
+              "name": "--c2-code-editor__disabled--opacity",
+              "type": "opacity",
+              "default": "0.38",
+              "part": "",
+              "state": "disabled",
+              "property": "opacity",
+              "token": "--c2-theme--disabled-opacity"
+            },
+            {
+              "name": "--c2-code-editor--font-family",
+              "type": "font-family",
+              "default": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+              "part": "",
+              "property": "font-family",
+              "token": "--c2-theme--font-family"
+            },
+            {
+              "name": "--c2-code-editor--font-size",
+              "type": "font-size",
+              "default": "13px",
+              "part": "",
+              "property": "font-size"
+            },
+            {
+              "name": "--c2-code-editor--line-height",
+              "type": "line-height",
+              "default": "1.6",
+              "part": "",
+              "property": "line-height"
+            },
+            {
+              "name": "--c2-code-editor--min-height",
+              "type": "pixel",
+              "default": "120px",
+              "part": "",
+              "property": "min-height"
+            },
+            {
+              "name": "--c2-code-editor--max-height",
+              "type": "pixel",
+              "default": "420px",
+              "part": "",
+              "property": "max-height",
+              "description": "The editor scrolls past this height."
+            },
+            {
+              "name": "--c2-code-editor--padding-block",
+              "type": "padding",
+              "default": "10px",
+              "part": "",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-code-editor--padding-inline",
+              "type": "padding",
+              "default": "12px",
+              "part": "",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-code-editor__gutter--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "gutter",
+              "property": "background"
+            },
+            {
+              "name": "--c2-code-editor__gutter--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "gutter",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-code-editor__gutter__active--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "gutter",
+              "state": "active",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-code-editor__gutter--border-right",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "gutter",
+              "property": "border-right",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-code-editor__gutter--min-width",
+              "type": "pixel",
+              "default": "32px",
+              "part": "gutter",
+              "property": "min-width"
+            },
+            {
+              "name": "--c2-code-editor__active-line--background",
+              "type": "color",
+              "default": "rgba(2, 101, 220, 0.04)",
+              "part": "active-line",
+              "property": "background",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-code-editor__selection--background",
+              "type": "color",
+              "default": "rgba(2, 101, 220, 0.18)",
+              "part": "selection",
+              "property": "background",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-code-editor__cursor--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "cursor",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-code-editor__matching-bracket--background",
+              "type": "color",
+              "default": "rgba(2, 101, 220, 0.16)",
+              "part": "matching-bracket",
+              "property": "background",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-code-editor__placeholder--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "placeholder",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-keyword",
+              "type": "color",
+              "default": "#cf222e",
+              "part": "theme",
+              "property": "token-keyword"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-string",
+              "type": "color",
+              "default": "#032f62",
+              "part": "theme",
+              "property": "token-string"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-comment",
+              "type": "color",
+              "default": "#636c76",
+              "part": "theme",
+              "property": "token-comment"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-constant",
+              "type": "color",
+              "default": "#0550ae",
+              "part": "theme",
+              "property": "token-constant"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-function",
+              "type": "color",
+              "default": "#6f42c1",
+              "part": "theme",
+              "property": "token-function"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-type",
+              "type": "color",
+              "default": "#953800",
+              "part": "theme",
+              "property": "token-type"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-property",
+              "type": "color",
+              "default": "#0550ae",
+              "part": "theme",
+              "property": "token-property"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-variable",
+              "type": "color",
+              "default": "#24292e",
+              "part": "theme",
+              "property": "token-variable"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-tag",
+              "type": "color",
+              "default": "#116329",
+              "part": "theme",
+              "property": "token-tag"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-punctuation",
+              "type": "color",
+              "default": "#24292e",
+              "part": "theme",
+              "property": "token-punctuation"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-link",
+              "type": "color",
+              "default": "#032f62",
+              "part": "theme",
+              "property": "token-link"
+            },
+            {
+              "name": "--c2-code-editor__theme--token-invalid",
+              "type": "color",
+              "default": "#cf222e",
+              "part": "theme",
+              "property": "token-invalid"
+            },
+            {
+              "name": "--c2-code-editor__label--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "label",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-code-editor__label--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "label",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm"
+            },
+            {
+              "name": "--c2-code-editor__label--font-weight",
+              "type": "font-weight",
+              "default": "500",
+              "part": "label",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-medium"
+            },
+            {
+              "name": "--c2-code-editor__supporting-text--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "supporting-text",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-code-editor__supporting-text--font-size",
+              "type": "font-size",
+              "default": "12px",
+              "part": "supporting-text",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-sm"
+            },
+            {
+              "name": "--c2-code-editor__error--color",
+              "type": "color",
+              "default": "#dc2626",
+              "part": "",
+              "state": "error",
+              "property": "color",
+              "token": "--c2-theme--color-error"
+            },
+            {
+              "name": "--c2-code-editor__error--border",
+              "type": "border",
+              "default": "1px solid #dc2626",
+              "part": "",
+              "state": "error",
+              "property": "border",
+              "token": "--c2-theme--color-error"
+            },
+            {
+              "name": "--c2-code-editor--gap",
+              "type": "pixel",
+              "default": "6px",
+              "part": "",
+              "property": "gap",
+              "description": "Space between the label, the editor and the supporting text."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/code-editor @c2n/theme",
+        "import": "import '@c2n/code-editor'",
+        "importClass": "import { CodeEditor } from '@c2n/code-editor'"
+      },
+      "presets": {
+        "html": "<c2-code-editor language=\"javascript\" line-numbers aria-label=\"Example editor\" value=\"const greet = (name) => `hello ${name}`\"></c2-code-editor>",
+        "items": [
+          {
+            "name": "Midnight",
+            "description": "A dark editor built only from variables — there is no JavaScript theme to switch.",
+            "css": {
+              "--c2-code-editor--background": "#0d1117",
+              "--c2-code-editor--color": "#c9d1d9",
+              "--c2-code-editor--border": "1px solid #30363d",
+              "--c2-code-editor__gutter--color": "#6e7681",
+              "--c2-code-editor__gutter--border-right": "1px solid #21262d",
+              "--c2-code-editor__gutter__active--color": "#c9d1d9",
+              "--c2-code-editor__active-line--background": "rgba(110, 118, 129, 0.1)",
+              "--c2-code-editor__cursor--color": "#c9d1d9",
+              "--c2-code-editor__theme--token-keyword": "#ff7b72",
+              "--c2-code-editor__theme--token-string": "#a5d6ff",
+              "--c2-code-editor__theme--token-comment": "#8b949e",
+              "--c2-code-editor__theme--token-constant": "#79c0ff",
+              "--c2-code-editor__theme--token-function": "#d2a8ff",
+              "--c2-code-editor__theme--token-variable": "#c9d1d9",
+              "--c2-code-editor__theme--token-punctuation": "#c9d1d9"
+            }
+          },
+          {
+            "name": "Borderless",
+            "description": "A tinted panel with no frame, for an editor embedded in a card.",
+            "css": {
+              "--c2-code-editor--border": "1px solid transparent",
+              "--c2-code-editor--background": "#f8f8f8",
+              "--c2-code-editor--border-radius": "10px",
+              "--c2-code-editor__active-line--background": "transparent"
+            }
+          },
+          {
+            "name": "Dense",
+            "description": "Smaller type and tighter padding for a code field in a form.",
+            "css": {
+              "--c2-code-editor--font-size": "11px",
+              "--c2-code-editor--line-height": "1.4",
+              "--c2-code-editor--min-height": "84px",
+              "--c2-code-editor--padding-block": "6px",
+              "--c2-code-editor--padding-inline": "8px",
+              "--c2-code-editor__gutter--min-width": "24px"
+            }
+          },
+          {
+            "name": "Accented frame",
+            "description": "A focused-looking frame with a soft ring, for the primary field on a page.",
+            "css": {
+              "--c2-code-editor--border": "1px solid #0265dc",
+              "--c2-code-editor--border-radius": "8px",
+              "--c2-code-editor--box-shadow": "0 0 0 4px rgba(2, 101, 220, 0.08)",
+              "--c2-code-editor__gutter--background": "rgba(2, 101, 220, 0.04)",
+              "--c2-code-editor__gutter--border-right": "1px solid rgba(2, 101, 220, 0.16)"
+            }
+          }
+        ]
+      },
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "JavaScript with a gutter and completion",
+          "html": "  <c2-code-editor\n    label=\"Handler\"\n    language=\"javascript\"\n    line-numbers\n    autocomplete\n    help=\"Tab indents, ⌘F searches.\"\n    value=\"const greeting = 'hello'\n\n// Click the button to count.\nexport function counter(host) {\n  let count = 0\n  host.addEventListener('click', () => (count += 1))\n  return () => count\n}\"\n  ></c2-code-editor>",
+          "css": ".midnight {\n  --c2-code-editor--background: #0d1117;\n  --c2-code-editor--color: #c9d1d9;\n  --c2-code-editor--border: 1px solid #30363d;\n  --c2-code-editor__gutter--color: #6e7681;\n  --c2-code-editor__gutter--border-right: 1px solid #21262d;\n  --c2-code-editor__gutter__active--color: #c9d1d9;\n  --c2-code-editor__active-line--background: rgba(110, 118, 129, 0.1);\n  --c2-code-editor__cursor--color: #c9d1d9;\n  --c2-code-editor__theme--token-keyword: #ff7b72;\n  --c2-code-editor__theme--token-string: #a5d6ff;\n  --c2-code-editor__theme--token-comment: #8b949e;\n  --c2-code-editor__theme--token-constant: #79c0ff;\n  --c2-code-editor__theme--token-function: #d2a8ff;\n  --c2-code-editor__theme--token-property: #79c0ff;\n  --c2-code-editor__theme--token-variable: #c9d1d9;\n  --c2-code-editor__theme--token-punctuation: #c9d1d9;\n}\n.compact {\n  --c2-code-editor--min-height: 84px;\n  --c2-code-editor--font-size: 12px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "The same component, a dark palette — CSS variables only",
+          "html": "<c2-code-editor\n  class=\"midnight\"\n  label=\"Configuration\"\n  language=\"json\"\n  line-numbers\n  wrap\n  value='{ \"name\": \"@c2n/code-editor\", \"engine\": \"codemirror\", \"themed\": \"with css variables\" }'\n></c2-code-editor>",
+          "css": ".midnight {\n  --c2-code-editor--background: #0d1117;\n  --c2-code-editor--color: #c9d1d9;\n  --c2-code-editor--border: 1px solid #30363d;\n  --c2-code-editor__gutter--color: #6e7681;\n  --c2-code-editor__gutter--border-right: 1px solid #21262d;\n  --c2-code-editor__gutter__active--color: #c9d1d9;\n  --c2-code-editor__active-line--background: rgba(110, 118, 129, 0.1);\n  --c2-code-editor__cursor--color: #c9d1d9;\n  --c2-code-editor__theme--token-keyword: #ff7b72;\n  --c2-code-editor__theme--token-string: #a5d6ff;\n  --c2-code-editor__theme--token-comment: #8b949e;\n  --c2-code-editor__theme--token-constant: #79c0ff;\n  --c2-code-editor__theme--token-function: #d2a8ff;\n  --c2-code-editor__theme--token-property: #79c0ff;\n  --c2-code-editor__theme--token-variable: #c9d1d9;\n  --c2-code-editor__theme--token-punctuation: #c9d1d9;\n}\n.compact {\n  --c2-code-editor--min-height: 84px;\n  --c2-code-editor--font-size: 12px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Read-only, and an error state",
+          "html": "<c2-code-editor class=\"compact\" language=\"css\" readonly label=\"Generated\" value=\".card { border-radius: 8px }\"></c2-code-editor>\n<c2-code-editor class=\"compact\" language=\"css\" error error-text=\"Unexpected token at line 1.\" value=\".a { color }\"></c2-code-editor>",
+          "css": ".midnight {\n  --c2-code-editor--background: #0d1117;\n  --c2-code-editor--color: #c9d1d9;\n  --c2-code-editor--border: 1px solid #30363d;\n  --c2-code-editor__gutter--color: #6e7681;\n  --c2-code-editor__gutter--border-right: 1px solid #21262d;\n  --c2-code-editor__gutter__active--color: #c9d1d9;\n  --c2-code-editor__active-line--background: rgba(110, 118, 129, 0.1);\n  --c2-code-editor__cursor--color: #c9d1d9;\n  --c2-code-editor__theme--token-keyword: #ff7b72;\n  --c2-code-editor__theme--token-string: #a5d6ff;\n  --c2-code-editor__theme--token-comment: #8b949e;\n  --c2-code-editor__theme--token-constant: #79c0ff;\n  --c2-code-editor__theme--token-function: #d2a8ff;\n  --c2-code-editor__theme--token-property: #79c0ff;\n  --c2-code-editor__theme--token-variable: #c9d1d9;\n  --c2-code-editor__theme--token-punctuation: #c9d1d9;\n}\n.compact {\n  --c2-code-editor--min-height: 84px;\n  --c2-code-editor--font-size: 12px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-code-editor.",
+          "isDefault": true,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  language=\"javascript\"\n  line-numbers\n  value=\"// The default palette, on the default surface.\nexport function debounce(fn, wait = 200) {\n  let timer\n  return (...args) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => fn(...args), wait)\n  }\n}\"\n></c2-code-editor>"
+        },
+        {
+          "kind": "gallery",
+          "label": "Midnight",
+          "section": "Presets",
+          "description": "Midnight Presets example for c2-code-editor.",
+          "isDefault": false,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  class=\"midnight\"\n  language=\"javascript\"\n  line-numbers\n  value=\"// Dark is a different set of variable values — no JavaScript theme.\nconst palette = {\n  keyword: '#ff7b72',\n  string: '#a5d6ff',\n  comment: '#8b949e',\n}\nexport default palette\"\n></c2-code-editor>",
+          "css": ".midnight {\n  --c2-code-editor--background: #0d1117;\n  --c2-code-editor--color: #c9d1d9;\n  --c2-code-editor--border: 1px solid #30363d;\n  --c2-code-editor__gutter--color: #6e7681;\n  --c2-code-editor__gutter--border-right: 1px solid #21262d;\n  --c2-code-editor__gutter__active--color: #c9d1d9;\n  --c2-code-editor__active-line--background: rgba(110, 118, 129, 0.1);\n  --c2-code-editor__selection--background: rgba(56, 139, 253, 0.3);\n  --c2-code-editor__cursor--color: #c9d1d9;\n  --c2-code-editor__theme--token-keyword: #ff7b72;\n  --c2-code-editor__theme--token-string: #a5d6ff;\n  --c2-code-editor__theme--token-comment: #8b949e;\n  --c2-code-editor__theme--token-constant: #79c0ff;\n  --c2-code-editor__theme--token-function: #d2a8ff;\n  --c2-code-editor__theme--token-variable: #c9d1d9;\n  --c2-code-editor__theme--token-punctuation: #c9d1d9;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Terminal",
+          "section": "Presets",
+          "description": "Terminal Presets example for c2-code-editor.",
+          "isDefault": false,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  class=\"terminal\"\n  language=\"javascript\"\n  line-numbers\n  value=\"const log = (msg) => process.stdout.write(`${msg}\\n`)\n\n// Green on near-black, the way a terminal reads.\nfor (const step of ['build', 'test', 'deploy']) {\n  log(`→ ${step}`)\n}\"\n></c2-code-editor>",
+          "css": ".terminal {\n  --c2-code-editor--background: #10100e;\n  --c2-code-editor--color: #d8d8c0;\n  --c2-code-editor--border: 1px solid #2c2c26;\n  --c2-code-editor--border-radius: 4px;\n  --c2-code-editor--font-size: 12px;\n  --c2-code-editor__gutter--color: #55554a;\n  --c2-code-editor__gutter--border-right: 1px solid #2c2c26;\n  --c2-code-editor__gutter__active--color: #d8d8c0;\n  --c2-code-editor__cursor--color: #8fc46b;\n  --c2-code-editor__active-line--background: rgba(143, 196, 107, 0.07);\n  --c2-code-editor__theme--token-keyword: #8fc46b;\n  --c2-code-editor__theme--token-string: #e6c384;\n  --c2-code-editor__theme--token-comment: #6a6a5a;\n  --c2-code-editor__theme--token-constant: #7fb4ca;\n  --c2-code-editor__theme--token-function: #e6c384;\n  --c2-code-editor__theme--token-variable: #d8d8c0;\n  --c2-code-editor__theme--token-punctuation: #938f79;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Borderless",
+          "section": "Presets",
+          "description": "Borderless Presets example for c2-code-editor.",
+          "isDefault": false,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  class=\"borderless\"\n  language=\"css\"\n  value=\".card {\n  border-radius: 10px;\n  padding: 16px;\n  background: var(--surface);\n  box-shadow: 0 8px 24px rgb(24 24 27 / 8%);\n}\"\n></c2-code-editor>",
+          "css": ".borderless {\n  --c2-code-editor--border: 1px solid transparent;\n  --c2-code-editor--background: #f8f8f8;\n  --c2-code-editor--border-radius: 10px;\n  --c2-code-editor--min-height: 96px;\n  --c2-code-editor__active-line--background: transparent;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Dense",
+          "section": "Presets",
+          "description": "Dense Presets example for c2-code-editor.",
+          "isDefault": false,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  class=\"dense\"\n  language=\"json\"\n  line-numbers\n  value='{\n  \"name\": \"@c2n/code-editor\",\n  \"engine\": \"codemirror\",\n  \"dense\": true,\n  \"rows\": 24\n}'\n></c2-code-editor>",
+          "css": ".dense {\n  --c2-code-editor--font-size: 11px;\n  --c2-code-editor--line-height: 1.4;\n  --c2-code-editor--min-height: 84px;\n  --c2-code-editor--padding-block: 6px;\n  --c2-code-editor--padding-inline: 8px;\n  --c2-code-editor--border-radius: 4px;\n  --c2-code-editor__gutter--min-width: 24px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Accented frame",
+          "section": "Presets",
+          "description": "Accented frame Presets example for c2-code-editor.",
+          "isDefault": false,
+          "tags": [
+            "c2-code-editor"
+          ],
+          "html": "<c2-code-editor\n  class=\"accented\"\n  language=\"html\"\n  line-numbers\n  value=\"&lt;form&gt;\n  &lt;c2-text-field name=&quot;title&quot; label=&quot;Title&quot;&gt;&lt;/c2-text-field&gt;\n  &lt;c2-button type=&quot;submit&quot;&gt;Save&lt;/c2-button&gt;\n&lt;/form&gt;\"\n></c2-code-editor>",
+          "css": ".accented {\n  --c2-code-editor--border: 1px solid #0265dc;\n  --c2-code-editor--border-radius: 8px;\n  --c2-code-editor--box-shadow: 0 0 0 4px rgba(2, 101, 220, 0.08);\n  --c2-code-editor__gutter--background: rgba(2, 101, 220, 0.04);\n  --c2-code-editor__gutter--border-right: 1px solid rgba(2, 101, 220, 0.16);\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-code-editor style=\"width:300px;--c2-code-editor--min-height:132px;--c2-code-editor--font-size:12px\" language=\"javascript\" line-numbers aria-label=\"Example editor\" value=\"const greet = (name) =>\n  `hello ${name}`\n\n// editable, highlighted\ngreet('world')\"></c2-code-editor>"
+        }
+      ],
+      "hasGallery": true
+    },
     "code-viewer": {
       "id": "code-viewer",
       "package": "@c2n/code-viewer",
@@ -15848,7 +16948,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -18496,8 +19598,20 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
-        "usedBy": []
+        "slotted": [
+          "c2-chart-series"
+        ],
+        "usedBy": [
+          "c2-line-chart",
+          "c2-area-chart",
+          "c2-bar-chart",
+          "c2-sparkline",
+          "c2-pie-chart",
+          "c2-gauge-chart",
+          "c2-radar-chart",
+          "c2-scatter-chart",
+          "c2-candlestick-chart"
+        ]
       },
       "install": {
         "npm": "npm install @c2n/chart @c2n/theme",
@@ -27962,7 +29076,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -30152,7 +31268,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -32432,7 +33550,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -37066,7 +38186,9 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
+        "slotted": [
+          "c2-chart-series"
+        ],
         "usedBy": []
       },
       "install": {
@@ -38429,6 +39551,878 @@
       ],
       "hasGallery": true
     },
+    "steps": {
+      "id": "steps",
+      "package": "@c2n/steps",
+      "title": "Steps",
+      "description": "A vertical trace of a task as it runs: statuses, durations, and stages that open while they work and close when they are done.",
+      "intro": "`c2-steps` is a vertical list of `c2-step` rows. Each row is a marker, a label, an optional dimmed `detail` beside",
+      "category": "Data display",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/steps",
+      "elements": [
+        {
+          "tag": "c2-steps",
+          "className": "Steps",
+          "modulePath": "@c2n/steps",
+          "description": "A vertical list of steps: the trace of a task as it runs, or a wizard's progress. Each row is a marker, a label,\nan optional dimmed `detail` beside it and `trailing` text at the end — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group**, and a group is a disclosure: its own row is the summary and its sub-steps\nare the detail. **Every step is a row, and every row is visible** — a group starts expanded and nothing ever\nfolds one away on its own. The chevron is there for the reader, `collapsed` in the markup starts a stage folded,\nand the run only ever brings a folded stage *back* into view when it starts running or something in it fails.\n\nAuthor it either way, and mix them freely:\n\n- **Declarative** — slot `c2-step` children and nest them for sub-steps.\n- **Data-driven** — hand it a `steps` array of `{ id, label, detail, trailing, status, children }` and it renders\n  the tree itself. The array wins when both are present. During a run, `updateStep(id, patch)` changes one step\n  without rebuilding the array.\n\nEverything the markup fills with a slot, the data-driven mode fills with a renderer: `renderMarker` for the\n`marker` slot, `renderToggle` for `toggle`, `renderLabel` / `renderDetail` / `renderTrailing` for the text, and\n`renderItem` for that text all at once. Each is handed the node, its depth, its position, its dotted path and\nthe status actually in effect.\n\nA parent step that does not author a `status` takes one from its children: the most urgent thing inside wins, so\na stage reports that it is running, or that something under it failed, without you setting it.\n\n`current` is the shortcut a wizard wants: set it to the index of the active step and every top-level step that\nhas neither an explicit `status` nor sub-steps becomes `success` before it, `current` at it and `pending` after.\n\nA step that arrives while the list is already on screen grows into place rather than appearing, and a marker\ngives one beat as its status settles — which is what a trace being written in front of you should look like.\n`--c2-step--enter-duration: 0s` turns the first off, and `prefers-reduced-motion` turns both off.\n\nThe connector rail between markers is drawn by CSS and off by default, because a trace does not want one — give\n`--c2-step__rail--width` a width and a stepper gets its rail.\n\nNumbering follows the tree: `marker=\"number\"` draws a dotted path, so the first child of the third step reads\n`3.1` rather than a second `1`.",
+          "attributes": [
+            {
+              "name": "marker",
+              "type": "StepsMarker",
+              "default": "'icon'",
+              "description": "How each marker is drawn: a status glyph, the step's number, or nothing."
+            },
+            {
+              "name": "current",
+              "type": "number",
+              "default": "-1",
+              "description": "Index of the active step, for a wizard. `-1` (the default) leaves every status alone; otherwise a top-level\nstep with neither an explicit `status` nor sub-steps becomes `success` before this index, `current` at it and\n`pending` after it."
+            },
+            {
+              "name": "steps",
+              "type": "StepNode[] | undefined",
+              "default": "undefined",
+              "description": "The steps as data, instead of `c2-step` children. Takes precedence over the slot."
+            },
+            {
+              "name": "aria-label",
+              "type": "string | null",
+              "default": "null",
+              "description": "Accessible name for the list."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "The `c2-step` children. Ignored when `steps` is set."
+            }
+          ],
+          "events": [
+            {
+              "name": "step-toggle",
+              "type": "CustomEvent<StepToggleEventDetail>",
+              "description": "Fired by a `c2-step` when a group opens or closes, and bubbling to here. `event.target` is the step; `detail.path` says where it sits."
+            }
+          ],
+          "cssParts": [],
+          "cssProperties": [
+            {
+              "name": "--c2-steps--gap",
+              "type": "pixel",
+              "default": "0px",
+              "part": "",
+              "property": "gap",
+              "description": "Space between rows. A stepper usually wants some; a trace does not."
+            },
+            {
+              "name": "--c2-steps--background",
+              "type": "color",
+              "part": "",
+              "property": "background"
+            },
+            {
+              "name": "--c2-steps--border",
+              "type": "border",
+              "part": "",
+              "property": "border"
+            },
+            {
+              "name": "--c2-steps--border-radius",
+              "type": "border-radius",
+              "part": "",
+              "property": "border-radius"
+            },
+            {
+              "name": "--c2-steps--padding-block",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-steps--padding-inline",
+              "type": "padding",
+              "default": "0px",
+              "part": "",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-steps--overflow-y",
+              "type": "overflow",
+              "default": "visible",
+              "part": "",
+              "property": "overflow-y",
+              "description": "`auto` with a `max-height` keeps a long run in its own scroller."
+            },
+            {
+              "name": "--c2-steps--max-height",
+              "type": "max-height",
+              "default": "none",
+              "part": "",
+              "property": "max-height"
+            }
+          ]
+        },
+        {
+          "tag": "c2-step",
+          "className": "Step",
+          "modulePath": "@c2n/steps/step.js",
+          "description": "One row of a Steps list: a marker, a label with optional dimmed `detail`, and `trailing` text at the end\nof the row — a duration, a count, a timestamp.\n\n**A step with sub-steps is a group.** Nest `c2-step` children and the row becomes the summary of a disclosure\nand the children its detail, so a long run collapses to the shape of the task rather than to a wall of lines.\nThere is no second element to learn: the same tag is a leaf or a group depending on what is inside it.\n\n**Every step is a row, and every row is visible.** A group starts expanded and nothing ever folds one away on\nits own: the chevron is there for the reader, and `collapsed` in the markup starts a stage folded. The run only\never brings a stage *back* into view — a folded one reopens when it starts running (`running`, `current`) or\nwhen something in it goes wrong (`error`, `warning`).\n\n**A step is one row.** Label, detail and trailing text sit on a single line and truncate with an ellipsis rather\nthan wrapping, so a hundred-step trace stays scannable, and a sub-step is indented far enough that its marker\nlands under its parent's label. `--c2-step__text--flex-direction: column` still stacks the detail under the\nlabel, which a wizard's descriptions want — that is two lines on purpose, and each of them is still one line.\n\nThe step never sets its own depth, position or marker mode: the parent `c2-steps` writes them on every pass, so\na step used on its own renders as a single root-level row.",
+          "attributes": [
+            {
+              "name": "status",
+              "type": "StepStatus",
+              "default": "'pending'",
+              "description": "State of the step. Drives the marker glyph and the accent colour, and reopens a folded group."
+            },
+            {
+              "name": "label",
+              "type": "string",
+              "default": "''",
+              "description": "Primary text, when the `label` slot is empty."
+            },
+            {
+              "name": "detail",
+              "type": "string",
+              "default": "''",
+              "description": "Dimmed secondary text beside the label, when the `detail` slot is empty."
+            },
+            {
+              "name": "trailing",
+              "type": "string",
+              "default": "''",
+              "description": "Text at the end of the row, when the `trailing` slot is empty."
+            },
+            {
+              "name": "collapsed",
+              "type": "boolean",
+              "default": "false",
+              "description": "Whether this group is folded away. A group is expanded by default — every step in the list is a row you can\nsee — and only the reader, the markup or a reopening status ever changes that."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Sub-steps. A step that has them is a group."
+            },
+            {
+              "name": "label",
+              "description": "Primary text. Falls back to the `label` attribute."
+            },
+            {
+              "name": "detail",
+              "description": "Secondary text beside the label. Falls back to the `detail` attribute."
+            },
+            {
+              "name": "trailing",
+              "description": "Content at the end of the row. Falls back to the `trailing` attribute."
+            },
+            {
+              "name": "marker",
+              "description": "Replaces the whole marker: a custom icon, an avatar, a number of your own."
+            },
+            {
+              "name": "toggle",
+              "description": "A disclosure affordance of your own — a chevron, a caret. Empty by default: a trace is a list of rows, and the row is already clickable. It is filled per step, so give a leaf an empty `<span slot=\"toggle\"></span>` to keep its rows lined up with the groups above them."
+            }
+          ],
+          "events": [
+            {
+              "name": "step-toggle",
+              "type": "CustomEvent<StepToggleEventDetail>",
+              "description": "A group was folded away or brought back. Bubbles."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "frame",
+              "description": "The box around the whole step, which is what grows when a new step arrives."
+            },
+            {
+              "name": "row",
+              "description": "The row itself: toggle, marker, text and trailing content. A group's row is its `<summary>`."
+            },
+            {
+              "name": "toggle",
+              "description": "The disclosure chevron of a group."
+            },
+            {
+              "name": "marker",
+              "description": "The round marker at the start of the row."
+            },
+            {
+              "name": "rail",
+              "description": "The connector between this marker and the next."
+            },
+            {
+              "name": "label",
+              "description": "The primary text."
+            },
+            {
+              "name": "detail",
+              "description": "The dimmed secondary text."
+            },
+            {
+              "name": "trailing",
+              "description": "The text at the end of the row."
+            },
+            {
+              "name": "children",
+              "description": "The box holding the sub-steps."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-step__row--gap",
+              "type": "pixel",
+              "default": "10px",
+              "part": "row",
+              "property": "gap",
+              "description": "Space between the marker, the text and the trailing content."
+            },
+            {
+              "name": "--c2-step__row--padding-block",
+              "type": "padding",
+              "default": "7px",
+              "part": "row",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-step__row--padding-inline",
+              "type": "padding",
+              "default": "12px",
+              "part": "row",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-step__row--indent",
+              "type": "pixel",
+              "default": "marker size + row gap",
+              "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."
+            },
+            {
+              "name": "--c2-step__row--border-radius",
+              "type": "border-radius",
+              "part": "row",
+              "property": "border-radius"
+            },
+            {
+              "name": "--c2-step__row--background",
+              "type": "color",
+              "part": "row",
+              "property": "background"
+            },
+            {
+              "name": "--c2-step__row__hover--background",
+              "type": "color",
+              "part": "row",
+              "state": "hover",
+              "property": "background",
+              "description": "Set it to make the rows respond to the pointer."
+            },
+            {
+              "name": "--c2-step__row--border-bottom",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "row",
+              "property": "border-bottom",
+              "token": "--c2-theme--color-outline-variant",
+              "description": "The hairline under each row."
+            },
+            {
+              "name": "--c2-step__row--outline",
+              "type": "border",
+              "default": "2px solid rgb(2, 101, 220)",
+              "part": "row",
+              "property": "outline",
+              "description": "Focus ring of a group's row, which is a button."
+            },
+            {
+              "name": "--c2-step__toggle--size",
+              "type": "pixel",
+              "default": "14px",
+              "part": "toggle",
+              "property": "size",
+              "description": "Width of the `toggle` slot's column, when it is filled."
+            },
+            {
+              "name": "--c2-step__toggle--gap",
+              "type": "pixel",
+              "default": "4px",
+              "part": "toggle",
+              "property": "gap",
+              "description": "Space between that column and the marker."
+            },
+            {
+              "name": "--c2-step__toggle--color",
+              "type": "color",
+              "default": "#a1a1aa",
+              "part": "toggle",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-step__guide--color",
+              "type": "color",
+              "default": "#e4e4e7",
+              "part": "guide",
+              "property": "color",
+              "token": "--c2-theme--color-outline-variant",
+              "description": "A vertical rule at each ancestor's depth, for a file-tree look. Off by default."
+            },
+            {
+              "name": "--c2-step__guide--width",
+              "type": "pixel",
+              "default": "0px",
+              "part": "guide",
+              "property": "width",
+              "description": "Width of that rule. `1px` turns the guides on."
+            },
+            {
+              "name": "--c2-step__marker--size",
+              "type": "pixel",
+              "default": "16px",
+              "part": "marker",
+              "property": "size"
+            },
+            {
+              "name": "--c2-step__marker--font-size",
+              "type": "font-size",
+              "default": "10px",
+              "part": "marker",
+              "property": "font-size",
+              "description": "Size of the dotted path in `marker=\"number\"`."
+            },
+            {
+              "name": "--c2-step__marker--padding-inline",
+              "type": "padding",
+              "default": "3px",
+              "part": "marker",
+              "property": "padding-inline",
+              "description": "Breathing room either side of a dotted path, which is what turns the circle into a pill when the number is long. Only `marker=\"number\"` uses it."
+            },
+            {
+              "name": "--c2-step__marker--font-weight",
+              "type": "font-weight",
+              "default": "600",
+              "part": "marker",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-semibold"
+            },
+            {
+              "name": "--c2-step__marker--border-radius",
+              "type": "border-radius",
+              "default": "999px",
+              "part": "marker",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-full"
+            },
+            {
+              "name": "--c2-step__marker--border",
+              "type": "border",
+              "default": "1px solid #bcbcc6",
+              "part": "marker",
+              "property": "border",
+              "token": "--c2-theme--border",
+              "description": "The ring, drawn for the states that have no glyph of their own (`pending`, `current`, `running`) and for every `marker=\"number\"` step. A finished step is its glyph, so it has no ring."
+            },
+            {
+              "name": "--c2-step__marker--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "marker",
+              "property": "background"
+            },
+            {
+              "name": "--c2-step__marker--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "marker",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-step__rail--width",
+              "type": "pixel",
+              "default": "0px",
+              "part": "rail",
+              "property": "width",
+              "description": "Width of the connector. `0px` is the trace look; `2px` gives a stepper its rail."
+            },
+            {
+              "name": "--c2-step__rail--color",
+              "type": "color",
+              "default": "#e4e4e7",
+              "part": "rail",
+              "property": "color",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-step__rail--gap",
+              "type": "pixel",
+              "default": "4px",
+              "part": "rail",
+              "property": "gap",
+              "description": "Space between the marker and the rail."
+            },
+            {
+              "name": "--c2-step__label--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "label",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-step__label--font-size",
+              "type": "font-size",
+              "default": "13px",
+              "part": "label",
+              "property": "font-size"
+            },
+            {
+              "name": "--c2-step__label--font-weight",
+              "type": "font-weight",
+              "default": "500",
+              "part": "label",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-medium"
+            },
+            {
+              "name": "--c2-step__label--font-family",
+              "type": "font-family",
+              "default": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
+              "part": "label",
+              "property": "font-family",
+              "token": "--c2-theme--font-family"
+            },
+            {
+              "name": "--c2-step__detail--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "detail",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-step__detail--font-size",
+              "type": "font-size",
+              "part": "detail",
+              "property": "font-size",
+              "description": "Falls back to the label size."
+            },
+            {
+              "name": "--c2-step__detail--font-weight",
+              "type": "font-weight",
+              "default": "400",
+              "part": "detail",
+              "property": "font-weight"
+            },
+            {
+              "name": "--c2-step__detail--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "detail",
+              "property": "gap",
+              "description": "Space between the label and the detail when they share a line."
+            },
+            {
+              "name": "--c2-step__detail--row-gap",
+              "type": "pixel",
+              "default": "2px",
+              "part": "detail",
+              "property": "row-gap",
+              "description": "Space between them when they are stacked."
+            },
+            {
+              "name": "--c2-step__text--flex-direction",
+              "type": "flex-direction-row",
+              "default": "row",
+              "part": "text",
+              "property": "flex-direction",
+              "description": "`column` puts the detail on its own line under the label, which a wizard's descriptions want. It is the only variable that switch needs: the gap and the alignment follow it."
+            },
+            {
+              "name": "--c2-step__text--align-items",
+              "type": "align-items",
+              "default": "baseline",
+              "part": "text",
+              "property": "align-items",
+              "description": "How the label and the detail line up across the row. Stacked, they are flush left whatever this says."
+            },
+            {
+              "name": "--c2-step__trailing--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "trailing",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant"
+            },
+            {
+              "name": "--c2-step__trailing--font-size",
+              "type": "font-size",
+              "part": "trailing",
+              "property": "font-size",
+              "description": "Falls back to the label size."
+            },
+            {
+              "name": "--c2-step__trailing--font-weight",
+              "type": "font-weight",
+              "default": "400",
+              "part": "trailing",
+              "property": "font-weight"
+            },
+            {
+              "name": "--c2-step__success--color",
+              "type": "color",
+              "default": "#16a34a",
+              "part": "success",
+              "property": "color",
+              "description": "Marker colour when the step succeeded."
+            },
+            {
+              "name": "--c2-step__error--color",
+              "type": "color",
+              "default": "#dc2626",
+              "part": "",
+              "state": "error",
+              "property": "color",
+              "token": "--c2-theme--color-error"
+            },
+            {
+              "name": "--c2-step__warning--color",
+              "type": "color",
+              "default": "#d97706",
+              "part": "warning",
+              "property": "color"
+            },
+            {
+              "name": "--c2-step__running--color",
+              "type": "color",
+              "default": "rgb(2, 101, 220)",
+              "part": "",
+              "state": "running",
+              "property": "color",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-step__current--color",
+              "type": "color",
+              "default": "rgb(2, 101, 220)",
+              "part": "current",
+              "property": "color",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-step__skipped--color",
+              "type": "color",
+              "default": "#71717a",
+              "part": "skipped",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface-variant",
+              "description": "Marker and label colour when the step was skipped."
+            },
+            {
+              "name": "--c2-step--transition-duration",
+              "type": "time",
+              "default": "150ms",
+              "part": "",
+              "property": "transition-duration",
+              "token": "--c2-theme--motion-scale",
+              "description": "Colour transitions, and the beat a marker gives when its status settles."
+            },
+            {
+              "name": "--c2-step--enter-duration",
+              "type": "time",
+              "default": "260ms",
+              "part": "",
+              "property": "enter-duration",
+              "description": "How long a step arriving in a running trace takes to grow into place. `0s` turns the animation off."
+            },
+            {
+              "name": "--c2-step--enter-translate",
+              "type": "translate",
+              "default": "-4px",
+              "part": "",
+              "property": "enter-translate",
+              "description": "How far it slides while it does."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [
+          "c2-step"
+        ],
+        "usedBy": [
+          "c2-steps"
+        ]
+      },
+      "install": {
+        "npm": "npm install @c2n/steps @c2n/theme",
+        "import": "import '@c2n/steps'",
+        "importClass": "import { Steps } from '@c2n/steps'"
+      },
+      "presets": {
+        "html": "<c2-steps aria-label=\"Pipeline\"><c2-step label=\"build\" trailing=\"24 s\"><c2-step status=\"success\" label=\"install dependencies\" trailing=\"19 s\"></c2-step><c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"></c2-step></c2-step><c2-step label=\"test\"><c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step><c2-step status=\"running\" label=\"e2e\"></c2-step></c2-step><c2-step status=\"pending\" label=\"ship\"></c2-step></c2-steps>",
+        "items": [
+          {
+            "name": "Run log",
+            "description": "The warm panel of a task runner: hairlines between rows, a monospace label and a muted check.",
+            "css": {
+              "--c2-steps--background": "#faf9f5",
+              "--c2-steps--border": "1px solid #e8e6dd",
+              "--c2-steps--border-radius": "8px",
+              "--c2-steps--padding-block": "4px",
+              "--c2-step__row--border-bottom": "1px solid #ecebe3",
+              "--c2-step__row__hover--background": "#f3f1e8",
+              "--c2-step__marker--size": "13px",
+              "--c2-step__success--color": "#3f3f46",
+              "--c2-step__label--font-weight": "400"
+            }
+          },
+          {
+            "name": "Numbered stages",
+            "description": "Roomier numbered markers on a cool panel, with the hairlines dropped.",
+            "attributes": {
+              "marker": "number"
+            },
+            "css": {
+              "--c2-steps--background": "#f8fafc",
+              "--c2-steps--border": "1px solid #e2e8f0",
+              "--c2-steps--border-radius": "10px",
+              "--c2-steps--padding-block": "6px",
+              "--c2-step__row--border-bottom": "none",
+              "--c2-step__row--padding-block": "5px",
+              "--c2-step__marker--size": "20px",
+              "--c2-step__marker--font-size": "10px",
+              "--c2-step__marker--background": "#ffffff",
+              "--c2-step__label--font-family": "inherit",
+              "--c2-step__label--font-size": "13px"
+            }
+          },
+          {
+            "name": "Vertical wizard",
+            "description": "A rail down the markers, the body font, and the detail stacked under the label.",
+            "attributes": {
+              "marker": "number"
+            },
+            "css": {
+              "--c2-step__rail--width": "2px",
+              "--c2-step__rail--color": "#e4e4e7",
+              "--c2-step__rail--gap": "6px",
+              "--c2-step__marker--size": "26px",
+              "--c2-step__marker--font-size": "12px",
+              "--c2-step__marker--background": "#ffffff",
+              "--c2-step__row--border-bottom": "none",
+              "--c2-step__row--padding-block": "6px",
+              "--c2-step__row--padding-inline": "0px",
+              "--c2-step__row--gap": "14px",
+              "--c2-step__label--font-family": "inherit",
+              "--c2-step__label--font-size": "14px",
+              "--c2-step__label--font-weight": "600",
+              "--c2-step__text--flex-direction": "column"
+            }
+          },
+          {
+            "name": "Timeline",
+            "description": "Small dots joined by a rail, for events rather than tasks.",
+            "css": {
+              "--c2-step__rail--width": "2px",
+              "--c2-step__rail--color": "#e4e4e7",
+              "--c2-step__rail--gap": "5px",
+              "--c2-step__marker--size": "10px",
+              "--c2-step__marker--background": "#ffffff",
+              "--c2-step__row--border-bottom": "none",
+              "--c2-step__row--padding-block": "5px",
+              "--c2-step__row--gap": "12px",
+              "--c2-step__label--font-family": "inherit",
+              "--c2-step__label--font-size": "13px",
+              "--c2-step__toggle--size": "12px"
+            }
+          },
+          {
+            "name": "Dark panel",
+            "description": "The trace on a dark surface, with the status colours lifted to carry on it.",
+            "css": {
+              "--c2-steps--background": "#18181b",
+              "--c2-steps--border": "1px solid #27272a",
+              "--c2-steps--border-radius": "8px",
+              "--c2-steps--padding-block": "4px",
+              "--c2-step__row--border-bottom": "1px solid #27272a",
+              "--c2-step__row__hover--background": "#232326",
+              "--c2-step__marker--size": "13px",
+              "--c2-step__marker--border": "1px solid #52525b",
+              "--c2-step__label--color": "#e4e4e7",
+              "--c2-step__label--font-weight": "400",
+              "--c2-step__detail--color": "#a1a1aa",
+              "--c2-step__trailing--color": "#a1a1aa",
+              "--c2-step__guide--color": "#3f3f46",
+              "--c2-step__guide--width": "1px",
+              "--c2-step__success--color": "#4ade80",
+              "--c2-step__error--color": "#f87171",
+              "--c2-step__running--color": "#60a5fa"
+            }
+          }
+        ]
+      },
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "A task mid-run — every step is a row, indented under the stage it belongs to",
+          "html": "<c2-steps class=\"trace\" aria-label=\"Pipeline\">\n  <c2-step label=\"build\" trailing=\"24 s\">\n    <c2-step status=\"success\" label=\"install dependencies\" trailing=\"19 s\"></c2-step>\n    <c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"></c2-step>\n  </c2-step>\n  <c2-step label=\"test\">\n    <c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step>\n    <c2-step status=\"running\" label=\"e2e\"></c2-step>\n    <c2-step status=\"pending\" label=\"visual\"></c2-step>\n  </c2-step>\n  <c2-step label=\"ship\">\n    <c2-step status=\"pending\" label=\"upload\"></c2-step>\n  </c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "A failure, rolled up to the stage that contains it",
+          "html": "<c2-steps class=\"trace\" aria-label=\"Failed run\">\n  <c2-step label=\"build\" trailing=\"24 s\">\n    <c2-step status=\"success\" label=\"install dependencies\" trailing=\"19 s\"></c2-step>\n    <c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"></c2-step>\n  </c2-step>\n  <c2-step label=\"test\" trailing=\"11 s\">\n    <c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step>\n    <c2-step status=\"error\" label=\"e2e\" detail=\"2 of 40 failed\" trailing=\"3 s\"></c2-step>\n  </c2-step>\n  <c2-step status=\"skipped\" label=\"ship\"></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Nested stages, numbered through the tree",
+          "html": "<c2-steps class=\"trace\" marker=\"number\" aria-label=\"Numbered trace\">\n  <c2-step status=\"success\" label=\"goto\" detail=\"[0].goto\" trailing=\"500 ms\"></c2-step>\n  <c2-step label=\"pagination\" detail=\"[2].pagination\" trailing=\"1.53 s\">\n    <c2-step status=\"success\" label=\"collect\" trailing=\"1 ms\"></c2-step>\n    <c2-step label=\"page 2\" trailing=\"620 ms\">\n      <c2-step status=\"success\" label=\"collect\" trailing=\"2 ms\"></c2-step>\n      <c2-step status=\"warning\" label=\"append\" detail=\"1 duplicate\" trailing=\"1 ms\"></c2-step>\n    </c2-step>\n  </c2-step>\n  <c2-step status=\"skipped\" label=\"notify\" detail=\"[5].notify\"></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "An icon of your own in the marker slot",
+          "html": "<c2-steps class=\"trace icons\" aria-label=\"Release\">\n  <c2-step status=\"success\" label=\"checkout\" detail=\"main@8f2c1d\" trailing=\"1.2 s\">\n    <c2-feather-git-branch slot=\"marker\"></c2-feather-git-branch>\n  </c2-step>\n  <c2-step status=\"success\" label=\"build\" detail=\"3 packages\" trailing=\"24 s\">\n    <c2-feather-package slot=\"marker\"></c2-feather-package>\n  </c2-step>\n  <c2-step status=\"running\" label=\"publish\" detail=\"registry.npmjs.org\">\n    <c2-feather-upload-cloud slot=\"marker\"></c2-feather-upload-cloud>\n  </c2-step>\n  <c2-step status=\"pending\" label=\"smoke test\">\n    <c2-feather-terminal slot=\"marker\"></c2-feather-terminal>\n  </c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Anything in the label and trailing slots — a badge, a link, a number of your own",
+          "html": "<c2-steps class=\"trace rich\" aria-label=\"Pull request checks\">\n  <c2-step status=\"success\">\n    <span slot=\"marker\">1</span>\n    <span slot=\"label\"><a href=\"#usage\">lint</a></span>\n    <c2-badge slot=\"trailing\" tone=\"success\">passed</c2-badge>\n  </c2-step>\n  <c2-step status=\"error\">\n    <span slot=\"marker\">2</span>\n    <span slot=\"label\"><a href=\"#usage\">type-check</a></span>\n    <span slot=\"detail\">tsconfig.lib.json</span>\n    <c2-badge slot=\"trailing\" tone=\"danger\" count=\"3\"></c2-badge>\n  </c2-step>\n  <c2-step status=\"pending\">\n    <span slot=\"marker\">3</span>\n    <span slot=\"label\"><a href=\"#usage\">test</a></span>\n    <c2-badge slot=\"trailing\" tone=\"neutral\">queued</c2-badge>\n  </c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "A chevron in the toggle slot — the disclosure affordance, which is off by default",
+          "html": "<c2-steps class=\"trace chevrons\" aria-label=\"Pipeline with chevrons\">\n  <c2-step label=\"build\" trailing=\"24 s\">\n    <svg slot=\"toggle\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m9 6 6 6-6 6\"></path></svg>\n    <c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"><span slot=\"toggle\"></span></c2-step>\n    <c2-step status=\"success\" label=\"bundle\" trailing=\"19 s\"><span slot=\"toggle\"></span></c2-step>\n  </c2-step>\n  <c2-step status=\"running\" label=\"test\"><span slot=\"toggle\"></span></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Label and detail on two lines — one variable switches it",
+          "html": "<c2-steps class=\"trace stacked\" aria-label=\"Deployment stages\">\n  <c2-step status=\"success\" label=\"Provision\" detail=\"Three nodes in eu-west-1\" trailing=\"1 m 12 s\"></c2-step>\n  <c2-step status=\"running\" label=\"Migrate\" detail=\"Schema, then backfill 2.1 M rows\"></c2-step>\n  <c2-step status=\"pending\" label=\"Cut over\" detail=\"Drain connections and promote the replica\"></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "A wizard — no groups, so no chevron column",
+          "html": "<c2-steps class=\"wizard\" marker=\"number\" current=\"1\" aria-label=\"Checkout\">\n  <c2-step label=\"Account\" detail=\"Signed in as ada@example.com\"></c2-step>\n  <c2-step label=\"Plan\" detail=\"Team, billed yearly\"></c2-step>\n  <c2-step label=\"Payment\" detail=\"Card or invoice\"></c2-step>\n  <c2-step label=\"Confirm\" detail=\"Review and place the order\"></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Every status",
+          "html": "<c2-steps class=\"wizard\" aria-label=\"Statuses\">\n  <c2-step status=\"success\" label=\"Completed\"></c2-step>\n  <c2-step status=\"warning\" label=\"Completed with warnings\"></c2-step>\n  <c2-step status=\"error\" label=\"Failed\"></c2-step>\n  <c2-step status=\"running\" label=\"Running\"></c2-step>\n  <c2-step status=\"current\" label=\"Current\"></c2-step>\n  <c2-step status=\"pending\" label=\"Pending\"></c2-step>\n  <c2-step status=\"skipped\" label=\"Skipped\"></c2-step>\n</c2-steps>",
+          "css": ".trace {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}\n/* A marker slot holding an icon wants room and no ring around it. */\n.icons {\n  --c2-step__marker--size: 16px;\n  --c2-step__marker--border: 1px solid transparent;\n  --c2-feather-icon--size: 16px;\n  --c2-feather-icon--stroke-width: 2;\n}\n/* Slotted content sets its own type, so the row only has to make space for it. */\n.rich {\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--border: 1px solid #d6d3c4;\n}\n/* The chevron rotates on its own; the slot only says what to draw. */\n.chevrons {\n  --c2-step__toggle--size: 12px;\n  --c2-step__toggle--color: #a8a29a;\n}\n/* The detail on its own line under the label. Nothing else to set: the gap follows the direction. */\n.stacked {\n  --c2-step__text--flex-direction: column;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__detail--font-size: 13px;\n}\n/* A wizard: a rail, roomier markers, and the body font instead of the trace's monospace. */\n.wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n  --c2-step__current--color: #0265dc;\n  --c2-step__success--color: #16a34a;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-steps.",
+          "isDefault": true,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps aria-label=\"Pipeline\">\n  <c2-step label=\"build\" trailing=\"24 s\">\n    <c2-step status=\"success\" label=\"install dependencies\" trailing=\"19 s\"></c2-step>\n    <c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"></c2-step>\n  </c2-step>\n  <c2-step label=\"test\">\n    <c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step>\n    <c2-step status=\"running\" label=\"e2e\"></c2-step>\n  </c2-step>\n</c2-steps>"
+        },
+        {
+          "kind": "gallery",
+          "label": "Run log",
+          "section": "Presets",
+          "description": "Run log Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"run-log\" aria-label=\"Run trace\">\n  <c2-step status=\"success\" label=\"goto\" detail=\"[0].goto\" trailing=\"500 ms\"></c2-step>\n  <c2-step status=\"success\" label=\"set\" detail=\"[1].set\" trailing=\"0 ms\"></c2-step>\n  <c2-step label=\"pagination\" detail=\"[2].pagination\" trailing=\"1.53 s\">\n    <c2-step status=\"success\" label=\"collect\" detail=\"[2].pagination[1][0].collect\" trailing=\"1 ms\"></c2-step>\n    <c2-step status=\"success\" label=\"append\" detail=\"[2].pagination[1][1].append\" trailing=\"1 ms\"></c2-step>\n    <c2-step status=\"success\" label=\"collect\" detail=\"[2].pagination[2][0].collect\" trailing=\"2 ms\"></c2-step>\n    <c2-step status=\"success\" label=\"append\" detail=\"[2].pagination[2][1].append\" trailing=\"1 ms\"></c2-step>\n    <c2-step status=\"success\" label=\"collect\" detail=\"[2].pagination[3][0].collect\" trailing=\"2 ms\"></c2-step>\n    <c2-step status=\"success\" label=\"append\" detail=\"[2].pagination[3][1].append\" trailing=\"1 ms\"></c2-step>\n  </c2-step>\n</c2-steps>",
+          "css": ".run-log {\n  --c2-steps--background: #faf9f5;\n  --c2-steps--border: 1px solid #e8e6dd;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #ecebe3;\n  --c2-step__row__hover--background: #f3f1e8;\n  --c2-step__marker--size: 13px;\n  --c2-step__success--color: #3f3f46;\n  --c2-step__label--font-weight: 400;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Failed run",
+          "section": "Presets",
+          "description": "Failed run Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"failed\" aria-label=\"Failed run\">\n  <c2-step label=\"build\" trailing=\"24 s\">\n    <c2-step status=\"success\" label=\"compile\" trailing=\"5 s\"></c2-step>\n  </c2-step>\n  <c2-step label=\"test\" trailing=\"11 s\">\n    <c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step>\n    <c2-step status=\"error\" label=\"e2e\" detail=\"2 of 40 failed\" trailing=\"3 s\"></c2-step>\n  </c2-step>\n  <c2-step status=\"skipped\" label=\"ship\"></c2-step>\n</c2-steps>",
+          "css": ".failed {\n  --c2-steps--background: #fffbfb;\n  --c2-steps--border: 1px solid #f3d6d6;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #f7e6e6;\n  --c2-step__marker--size: 13px;\n  --c2-step__label--font-weight: 400;\n  --c2-step__toggle--color: #c98b8b;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Numbered stages",
+          "section": "Presets",
+          "description": "Numbered stages Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"numbered\" marker=\"number\" aria-label=\"Numbered trace\">\n  <c2-step status=\"success\" label=\"Prepare\" trailing=\"24 s\">\n    <c2-step status=\"success\" label=\"Install dependencies\"></c2-step>\n    <c2-step status=\"success\" label=\"Configure\"></c2-step>\n  </c2-step>\n  <c2-step label=\"Migrate\">\n    <c2-step status=\"success\" label=\"Schema\"></c2-step>\n    <c2-step status=\"running\" label=\"Backfill\"></c2-step>\n    <c2-step status=\"pending\" label=\"Verify\"></c2-step>\n  </c2-step>\n</c2-steps>",
+          "css": ".numbered {\n  --c2-steps--background: #f8fafc;\n  --c2-steps--border: 1px solid #e2e8f0;\n  --c2-steps--border-radius: 10px;\n  --c2-steps--padding-block: 6px;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__marker--size: 20px;\n  --c2-step__marker--font-size: 10px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Vertical wizard",
+          "section": "Presets",
+          "description": "Vertical wizard Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"wizard\" marker=\"number\" current=\"1\" aria-label=\"Checkout\">\n  <c2-step label=\"Account\" detail=\"Signed in as ada@example.com\"></c2-step>\n  <c2-step label=\"Plan\" detail=\"Team, billed yearly\"></c2-step>\n  <c2-step label=\"Payment\" detail=\"Card or invoice\"></c2-step>\n  <c2-step label=\"Confirm\" detail=\"Review and place the order\"></c2-step>\n</c2-steps>",
+          "css": ".wizard {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 6px;\n  --c2-step__marker--size: 26px;\n  --c2-step__marker--font-size: 12px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 6px;\n  --c2-step__row--padding-inline: 0px;\n  --c2-step__row--gap: 14px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 14px;\n  --c2-step__label--font-weight: 600;\n  --c2-step__detail--font-size: 13px;\n  --c2-step__text--flex-direction: column;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Timeline",
+          "section": "Presets",
+          "description": "Timeline Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"timeline\" aria-label=\"Deployment\">\n  <c2-step status=\"success\" label=\"Queued\" detail=\"09:14\" trailing=\"2 s\"></c2-step>\n  <c2-step label=\"Build\" detail=\"09:14\" trailing=\"1 m 20 s\">\n    <c2-step status=\"success\" label=\"Restore cache\" trailing=\"4 s\"></c2-step>\n    <c2-step status=\"success\" label=\"Compile\" trailing=\"1 m 16 s\"></c2-step>\n  </c2-step>\n  <c2-step status=\"running\" label=\"Deploy\" detail=\"09:17\"></c2-step>\n  <c2-step status=\"pending\" label=\"Smoke tests\"></c2-step>\n</c2-steps>",
+          "css": ".timeline {\n  --c2-step__rail--width: 2px;\n  --c2-step__rail--color: #e4e4e7;\n  --c2-step__rail--gap: 5px;\n  --c2-step__marker--size: 10px;\n  --c2-step__marker--background: #ffffff;\n  --c2-step__row--border-bottom: none;\n  --c2-step__row--padding-block: 5px;\n  --c2-step__row--gap: 12px;\n  --c2-step__label--font-family: inherit;\n  --c2-step__label--font-size: 13px;\n  --c2-step__toggle--size: 12px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Dark panel",
+          "section": "Presets",
+          "description": "Dark panel Presets example for c2-steps.",
+          "isDefault": false,
+          "tags": [
+            "c2-steps",
+            "c2-step"
+          ],
+          "html": "<c2-steps class=\"dark-steps\" aria-label=\"Run trace\">\n  <c2-step status=\"success\" label=\"goto\" detail=\"[0].goto\" trailing=\"500 ms\"></c2-step>\n  <c2-step label=\"pagination\" detail=\"[2].pagination\" trailing=\"1.53 s\">\n    <c2-step status=\"success\" label=\"collect\" trailing=\"1 ms\"></c2-step>\n    <c2-step status=\"error\" label=\"append\" trailing=\"1 ms\"></c2-step>\n  </c2-step>\n  <c2-step status=\"skipped\" label=\"notify\" detail=\"[5].notify\"></c2-step>\n</c2-steps>",
+          "css": ".dark-steps {\n  --c2-steps--background: #18181b;\n  --c2-steps--border: 1px solid #27272a;\n  --c2-steps--border-radius: 8px;\n  --c2-steps--padding-block: 4px;\n  --c2-step__row--border-bottom: 1px solid #27272a;\n  --c2-step__row__hover--background: #232326;\n  --c2-step__marker--size: 13px;\n  --c2-step__marker--border: 1px solid #52525b;\n  --c2-step__label--color: #e4e4e7;\n  --c2-step__label--font-weight: 400;\n  --c2-step__detail--color: #a1a1aa;\n  --c2-step__trailing--color: #a1a1aa;\n  --c2-step__guide--color: #3f3f46;\n  --c2-step__guide--width: 1px;\n  --c2-step__success--color: #4ade80;\n  --c2-step__error--color: #f87171;\n  --c2-step__running--color: #60a5fa;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<c2-steps style=\"width:300px;--c2-steps--background:#faf9f5;--c2-steps--border:1px solid #e8e6dd;--c2-steps--border-radius:8px;--c2-steps--padding-block:2px;--c2-step__row--border-bottom:1px solid #ecebe3;--c2-step__marker--size:12px;--c2-step__row--padding-block:5px;--c2-step__label--font-size:12px;--c2-step__label--font-weight:400;--c2-step__success--color:#3f3f46\" aria-label=\"Run trace\">\n  <c2-step status=\"success\" label=\"build\" trailing=\"24 s\"></c2-step>\n  <c2-step label=\"test\">\n    <c2-step status=\"success\" label=\"unit\" trailing=\"8 s\"></c2-step>\n    <c2-step status=\"running\" label=\"e2e\"></c2-step>\n  </c2-step>\n  <c2-step status=\"pending\" label=\"ship\"></c2-step>\n</c2-steps>"
+        }
+      ],
+      "hasGallery": true
+    },
     "switch": {
       "id": "switch",
       "package": "@c2n/switch",
@@ -40902,8 +42896,12 @@
       ],
       "composition": {
         "internal": [],
-        "slotted": [],
-        "usedBy": []
+        "slotted": [
+          "c2-tab"
+        ],
+        "usedBy": [
+          "c2-tabs"
+        ]
       },
       "install": {
         "npm": "npm install @c2n/tabs @c2n/theme",
@@ -43631,6 +45629,627 @@
       ],
       "hasGallery": true
     },
+    "theme-select": {
+      "id": "theme-select",
+      "package": "@c2n/theme-select",
+      "title": "Theme Select",
+      "description": "Colour-theme switcher: click to step to the next mode, hover for the full menu.",
+      "intro": "`c2-theme-select` shows the icon of the theme currently in effect. Clicking it steps to the next mode and wraps",
+      "category": "Inputs",
+      "status": "stable",
+      "docsUrl": "https://code2nguyen.github.io/web-components/components/theme-select",
+      "elements": [
+        {
+          "tag": "c2-theme-select",
+          "className": "ThemeSelect",
+          "modulePath": "@c2n/theme-select",
+          "description": "Colour-theme switcher. The trigger shows the icon of the mode currently in effect and clicking it steps to the next\none, wrapping around — a two-state control is therefore a plain light/dark toggle. With three or more modes the\ntrigger also opens a menu on hover (or focus, or ArrowDown) so any mode can be picked directly, while the click-to-\nadvance behaviour keeps working.\n\nBy default the component owns the page theme: it writes the resolved scheme to `data-theme` on `<html>`, remembers\nthe choice in `localStorage` under `storage-key`, restores it on load, follows the OS preference live while the\n`system` mode is selected, and stays in sync with other tabs and with other instances on the page. Set `manual` to\ntake that over yourself and only listen for `theme-change`.",
+          "attributes": [
+            {
+              "name": "modes",
+              "type": "Array<string | ThemeSelectMode>",
+              "default": "['system', 'light', 'dark']",
+              "description": "The states to cycle through: `\"system,light,dark\"`, a JSON array, or objects from script."
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "default": "''",
+              "description": "The mode in effect. Assigning it selects that mode silently; `select()` and `next()` report the change."
+            },
+            {
+              "name": "menu",
+              "type": "'auto' | 'always' | 'never'",
+              "default": "'auto'",
+              "description": "When to offer the dropdown: `auto` (three or more modes), `always`, or `never`."
+            },
+            {
+              "name": "placement",
+              "type": "Placement",
+              "default": "'bottom'",
+              "description": "Preferred placement of the menu (floating-ui names)."
+            },
+            {
+              "name": "show-label",
+              "type": "boolean",
+              "default": "false",
+              "description": "Show the current mode's label beside its icon."
+            },
+            {
+              "name": "disabled",
+              "type": "boolean",
+              "default": "false",
+              "description": "Blocks interaction and dims the control."
+            },
+            {
+              "name": "manual",
+              "type": "boolean",
+              "default": "false",
+              "description": "Do not touch the document or storage; the host applies the theme itself from `theme-change`."
+            },
+            {
+              "name": "target",
+              "type": "string | HTMLElement | undefined",
+              "default": "undefined",
+              "description": "Element the scheme is written to, or the id of one. Defaults to `<html>`."
+            },
+            {
+              "name": "theme-attribute",
+              "type": "string",
+              "default": "'data-theme'",
+              "description": "Attribute written on the target, `data-theme` by default."
+            },
+            {
+              "name": "storage-key",
+              "type": "string",
+              "default": "'c2n-theme'",
+              "description": "`localStorage` key the chosen mode is remembered under. Empty disables persistence."
+            },
+            {
+              "name": "open-delay",
+              "type": "number",
+              "default": "150",
+              "description": "Milliseconds the pointer must rest on the trigger before the menu opens."
+            },
+            {
+              "name": "close-delay",
+              "type": "number",
+              "default": "200",
+              "description": "Milliseconds the menu stays open after the pointer leaves, so it can be crossed into."
+            },
+            {
+              "name": "aria-label",
+              "type": "string",
+              "description": "Accessible name of the trigger. Defaults to `Theme: <current label>`."
+            }
+          ],
+          "slots": [
+            {
+              "name": "system-icon",
+              "description": "Replaces the built-in monitor icon of the `system` mode, in the trigger and in its menu row. Every mode takes its icon from `<value>-icon`, so a custom mode brings its own."
+            },
+            {
+              "name": "light-icon",
+              "description": "Replaces the built-in sun icon of the `light` mode."
+            },
+            {
+              "name": "dark-icon",
+              "description": "Replaces the built-in moon icon of the `dark` mode."
+            },
+            {
+              "name": "check",
+              "description": "Mark shown beside the selected row in the menu. Defaults to a check."
+            }
+          ],
+          "events": [
+            {
+              "name": "theme-change",
+              "type": "CustomEvent<ThemeSelectChangeDetail>",
+              "description": "The scheme in effect changed: a mode was picked, or the OS preference moved while `system` was selected. `detail.value` is the mode, `detail.theme` the scheme it resolves to. Does not bubble; assigning `value` from script is silent."
+            }
+          ],
+          "cssParts": [
+            {
+              "name": "trigger",
+              "description": "The button that shows the current mode and advances to the next one."
+            },
+            {
+              "name": "icon",
+              "description": "The icon box inside the trigger and inside every menu row."
+            },
+            {
+              "name": "label",
+              "description": "The trigger's text, rendered only with `show-label`."
+            },
+            {
+              "name": "menu",
+              "description": "The dropdown surface."
+            },
+            {
+              "name": "menu-item",
+              "description": "One row of the dropdown."
+            },
+            {
+              "name": "check",
+              "description": "The mark beside the selected row."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-theme-select__trigger--size",
+              "type": "pixel",
+              "default": "32px",
+              "part": "trigger",
+              "property": "size",
+              "description": "Height of the trigger, and its width while icon-only."
+            },
+            {
+              "name": "--c2-theme-select__trigger--padding-inline",
+              "type": "pixel",
+              "default": "8px",
+              "part": "trigger",
+              "property": "padding-inline",
+              "description": "Side padding, used only with `show-label`."
+            },
+            {
+              "name": "--c2-theme-select__trigger--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "trigger",
+              "property": "gap",
+              "description": "Space between the icon and the label."
+            },
+            {
+              "name": "--c2-theme-select__trigger--border-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "trigger",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-theme-select__trigger--border",
+              "type": "border",
+              "default": "1px solid transparent",
+              "part": "trigger",
+              "property": "border"
+            },
+            {
+              "name": "--c2-theme-select__trigger--background",
+              "type": "color",
+              "default": "transparent",
+              "part": "trigger",
+              "property": "background"
+            },
+            {
+              "name": "--c2-theme-select__trigger--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "trigger",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-theme-select__trigger__hover--background",
+              "type": "color",
+              "default": "#f4f4f5",
+              "part": "trigger",
+              "state": "hover",
+              "property": "background",
+              "token": "--c2-theme--color-surface-container"
+            },
+            {
+              "name": "--c2-theme-select__trigger__hover--color",
+              "type": "color",
+              "part": "trigger",
+              "state": "hover",
+              "property": "color",
+              "description": "Falls back to the resting colour."
+            },
+            {
+              "name": "--c2-theme-select__trigger__active--background",
+              "type": "color",
+              "default": "#e4e4e7",
+              "part": "trigger",
+              "state": "active",
+              "property": "background"
+            },
+            {
+              "name": "--c2-theme-select__trigger__open--background",
+              "type": "color",
+              "part": "trigger",
+              "state": "open",
+              "property": "background",
+              "description": "Trigger fill while the menu is open; falls back to the hover fill."
+            },
+            {
+              "name": "--c2-theme-select__trigger__focus--outline",
+              "type": "outline",
+              "default": "2px solid rgba(2, 101, 220, 0.4)",
+              "part": "trigger",
+              "state": "focus",
+              "property": "outline",
+              "token": "--c2-theme--focus-ring"
+            },
+            {
+              "name": "--c2-theme-select__trigger__focus--outline-offset",
+              "type": "pixel",
+              "default": "2px",
+              "part": "trigger",
+              "state": "focus",
+              "property": "outline-offset"
+            },
+            {
+              "name": "--c2-theme-select__trigger__disabled--opacity",
+              "type": "opacity",
+              "default": "0.38",
+              "part": "trigger",
+              "state": "disabled",
+              "property": "opacity",
+              "token": "--c2-theme--disabled-opacity"
+            },
+            {
+              "name": "--c2-theme-select__icon--size",
+              "type": "pixel",
+              "default": "16px",
+              "part": "icon",
+              "property": "size",
+              "description": "Side of the icon square, in the trigger and in the menu rows."
+            },
+            {
+              "name": "--c2-theme-select__label--font-size",
+              "type": "font-size",
+              "default": "14px",
+              "part": "label",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-md"
+            },
+            {
+              "name": "--c2-theme-select__label--font-weight",
+              "type": "font-weight",
+              "default": "500",
+              "part": "label",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-medium"
+            },
+            {
+              "name": "--c2-theme-select__menu--background",
+              "type": "color",
+              "default": "#ffffff",
+              "part": "menu",
+              "property": "background",
+              "token": "--c2-theme--color-surface"
+            },
+            {
+              "name": "--c2-theme-select__menu--border",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "menu",
+              "property": "border",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-theme-select__menu--border-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "menu",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-theme-select__menu--box-shadow",
+              "type": "box-shadow",
+              "default": "0 8px 24px rgba(24, 24, 27, 0.08)",
+              "part": "menu",
+              "property": "box-shadow",
+              "token": "--c2-theme--shadow-md"
+            },
+            {
+              "name": "--c2-theme-select__menu--padding",
+              "type": "pixel",
+              "default": "4px",
+              "part": "menu",
+              "property": "padding"
+            },
+            {
+              "name": "--c2-theme-select__menu--min-width",
+              "type": "pixel",
+              "default": "148px",
+              "part": "menu",
+              "property": "min-width"
+            },
+            {
+              "name": "--c2-theme-select__menu--gap",
+              "type": "pixel",
+              "default": "2px",
+              "part": "menu",
+              "property": "gap",
+              "description": "Space between rows."
+            },
+            {
+              "name": "--c2-theme-select__menu--offset",
+              "type": "pixel",
+              "default": "6px",
+              "part": "menu",
+              "property": "offset",
+              "description": "Distance between the trigger and the menu."
+            },
+            {
+              "name": "--c2-theme-select__menu-item--gap",
+              "type": "pixel",
+              "default": "8px",
+              "part": "menu-item",
+              "property": "gap"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--padding-block",
+              "type": "pixel",
+              "default": "6px",
+              "part": "menu-item",
+              "property": "padding-block"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--padding-inline",
+              "type": "pixel",
+              "default": "8px",
+              "part": "menu-item",
+              "property": "padding-inline"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--border-radius",
+              "type": "border-radius",
+              "default": "6px",
+              "part": "menu-item",
+              "property": "border-radius",
+              "token": "--c2-theme--radius-md"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--color",
+              "type": "color",
+              "default": "#18181b",
+              "part": "menu-item",
+              "property": "color",
+              "token": "--c2-theme--color-on-surface"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--font-size",
+              "type": "font-size",
+              "default": "14px",
+              "part": "menu-item",
+              "property": "font-size",
+              "token": "--c2-theme--font-size-md"
+            },
+            {
+              "name": "--c2-theme-select__menu-item--font-weight",
+              "type": "font-weight",
+              "default": "500",
+              "part": "menu-item",
+              "property": "font-weight",
+              "token": "--c2-theme--font-weight-medium"
+            },
+            {
+              "name": "--c2-theme-select__menu-item__hover--background",
+              "type": "color",
+              "default": "#f4f4f5",
+              "part": "menu-item",
+              "state": "hover",
+              "property": "background",
+              "token": "--c2-theme--color-surface-container"
+            },
+            {
+              "name": "--c2-theme-select__menu-item__selected--color",
+              "type": "color",
+              "default": "rgb(2, 101, 220)",
+              "part": "menu-item",
+              "state": "selected",
+              "property": "color",
+              "token": "--c2-theme--color-primary"
+            },
+            {
+              "name": "--c2-theme-select__menu-item__selected--background",
+              "type": "color",
+              "part": "menu-item",
+              "state": "selected",
+              "property": "background",
+              "description": "Fill of the selected row; transparent by default."
+            },
+            {
+              "name": "--c2-theme-select__check--size",
+              "type": "pixel",
+              "default": "14px",
+              "part": "check",
+              "property": "size"
+            },
+            {
+              "name": "--c2-theme-select__check--color",
+              "type": "color",
+              "part": "check",
+              "property": "color",
+              "description": "Falls back to the selected row's colour."
+            },
+            {
+              "name": "--c2-theme-select--transition-duration",
+              "type": "time",
+              "default": "150ms",
+              "part": "",
+              "property": "transition-duration",
+              "token": "--c2-theme--motion-scale",
+              "description": "Icon cross-fade and trigger colour change."
+            }
+          ]
+        }
+      ],
+      "composition": {
+        "internal": [],
+        "slotted": [],
+        "usedBy": []
+      },
+      "install": {
+        "npm": "npm install @c2n/theme-select @c2n/theme",
+        "import": "import '@c2n/theme-select'",
+        "importClass": "import { ThemeSelect } from '@c2n/theme-select'"
+      },
+      "presets": {
+        "html": "<c2-theme-select manual show-label></c2-theme-select>",
+        "items": [
+          {
+            "name": "Outlined",
+            "description": "A framed trigger that reads as a control rather than as bare chrome.",
+            "css": {
+              "--c2-theme-select__trigger--border": "1px solid #bcbcc6",
+              "--c2-theme-select__trigger--border-radius": "6px"
+            }
+          },
+          {
+            "name": "Pill",
+            "description": "Round tinted trigger with a larger icon, for a site header.",
+            "css": {
+              "--c2-theme-select__trigger--size": "36px",
+              "--c2-theme-select__trigger--border-radius": "999px",
+              "--c2-theme-select__trigger--background": "#f4f4f5",
+              "--c2-theme-select__trigger__hover--background": "#e4e4e7",
+              "--c2-theme-select__icon--size": "18px"
+            }
+          },
+          {
+            "name": "Solid",
+            "description": "Accent-filled trigger for a primary placement.",
+            "css": {
+              "--c2-theme-select__trigger--background": "rgb(2, 101, 220)",
+              "--c2-theme-select__trigger--color": "#ffffff",
+              "--c2-theme-select__trigger__hover--background": "rgb(1, 84, 184)",
+              "--c2-theme-select__trigger--padding-inline": "12px",
+              "--c2-theme-select__trigger--border-radius": "6px"
+            }
+          },
+          {
+            "name": "Dark menu",
+            "description": "Keeps the trigger light and drops the dropdown to a dark surface.",
+            "css": {
+              "--c2-theme-select__menu--background": "#18181b",
+              "--c2-theme-select__menu--border": "1px solid #27272a",
+              "--c2-theme-select__menu--border-radius": "12px",
+              "--c2-theme-select__menu-item--color": "#fafafa",
+              "--c2-theme-select__menu-item__hover--background": "#27272a",
+              "--c2-theme-select__menu-item__selected--color": "#fafafa",
+              "--c2-theme-select__menu-item__selected--background": "#3f3f46"
+            }
+          },
+          {
+            "name": "Compact",
+            "description": "Small square trigger for a dense toolbar.",
+            "css": {
+              "--c2-theme-select__trigger--size": "24px",
+              "--c2-theme-select__trigger--border-radius": "4px",
+              "--c2-theme-select__icon--size": "14px"
+            }
+          }
+        ]
+      },
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "Three modes — click cycles, hover opens the menu",
+          "html": "<c2-theme-select manual></c2-theme-select>\n<c2-theme-select manual show-label></c2-theme-select>\n<c2-theme-select manual class=\"boxed\" placement=\"bottom-end\"></c2-theme-select>",
+          "css": ".boxed {\n  --c2-theme-select__trigger--border: 1px solid #bcbcc6;\n}\n.pill {\n  --c2-theme-select__trigger--border-radius: 999px;\n  --c2-theme-select__trigger--background: #f4f4f5;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Two modes — a plain toggle, no menu",
+          "html": "<c2-theme-select manual modes=\"light,dark\" class=\"pill\"></c2-theme-select>\n<c2-theme-select manual modes=\"light,dark\" show-label></c2-theme-select>",
+          "css": ".boxed {\n  --c2-theme-select__trigger--border: 1px solid #bcbcc6;\n}\n.pill {\n  --c2-theme-select__trigger--border-radius: 999px;\n  --c2-theme-select__trigger--background: #f4f4f5;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Menu for two modes, and disabled",
+          "html": "<c2-theme-select manual modes=\"light,dark\" menu=\"always\" show-label></c2-theme-select>\n<c2-theme-select manual disabled></c2-theme-select>",
+          "css": ".boxed {\n  --c2-theme-select__trigger--border: 1px solid #bcbcc6;\n}\n.pill {\n  --c2-theme-select__trigger--border-radius: 999px;\n  --c2-theme-select__trigger--background: #f4f4f5;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Own icons — each one shows in the trigger and in its menu row",
+          "html": "<c2-theme-select manual show-label>\n  <svg slot=\"system-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n    <path d=\"M12 3v18\"></path>\n  </svg>\n  <svg slot=\"light-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n  </svg>\n  <svg slot=\"dark-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\">\n    <circle cx=\"12\" cy=\"12\" r=\"9\"></circle>\n  </svg>\n</c2-theme-select>",
+          "css": ".boxed {\n  --c2-theme-select__trigger--border: 1px solid #bcbcc6;\n}\n.pill {\n  --c2-theme-select__trigger--border-radius: 999px;\n  --c2-theme-select__trigger--background: #f4f4f5;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-theme-select.",
+          "isDefault": true,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select manual></c2-theme-select>"
+        },
+        {
+          "kind": "gallery",
+          "label": "Outlined",
+          "section": "Presets",
+          "description": "Outlined Presets example for c2-theme-select.",
+          "isDefault": false,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select class=\"outlined\" manual show-label></c2-theme-select>",
+          "css": ".outlined {\n  --c2-theme-select__trigger--border: 1px solid #bcbcc6;\n  --c2-theme-select__trigger--border-radius: 6px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Pill",
+          "section": "Presets",
+          "description": "Pill Presets example for c2-theme-select.",
+          "isDefault": false,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select class=\"pill\" manual></c2-theme-select>",
+          "css": ".pill {\n  --c2-theme-select__trigger--size: 36px;\n  --c2-theme-select__trigger--border-radius: 999px;\n  --c2-theme-select__trigger--background: #f4f4f5;\n  --c2-theme-select__trigger__hover--background: #e4e4e7;\n  --c2-theme-select__icon--size: 18px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Solid",
+          "section": "Presets",
+          "description": "Solid Presets example for c2-theme-select.",
+          "isDefault": false,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select class=\"solid\" manual show-label></c2-theme-select>",
+          "css": ".solid {\n  --c2-theme-select__trigger--background: rgb(2, 101, 220);\n  --c2-theme-select__trigger--color: #ffffff;\n  --c2-theme-select__trigger__hover--background: rgb(1, 84, 184);\n  --c2-theme-select__trigger--padding-inline: 12px;\n  --c2-theme-select__trigger--border-radius: 6px;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Dark menu",
+          "section": "Presets",
+          "description": "Dark menu Presets example for c2-theme-select.",
+          "isDefault": false,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select class=\"dark-menu\" manual></c2-theme-select>",
+          "css": ".dark-menu {\n  --c2-theme-select__menu--background: #18181b;\n  --c2-theme-select__menu--border: 1px solid #27272a;\n  --c2-theme-select__menu--border-radius: 12px;\n  --c2-theme-select__menu-item--color: #fafafa;\n  --c2-theme-select__menu-item__hover--background: #27272a;\n  --c2-theme-select__menu-item__selected--color: #fafafa;\n  --c2-theme-select__menu-item__selected--background: #3f3f46;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Compact toggle",
+          "section": "Presets",
+          "description": "Compact toggle Presets example for c2-theme-select.",
+          "isDefault": false,
+          "tags": [
+            "c2-theme-select"
+          ],
+          "html": "<c2-theme-select class=\"compact\" manual modes=\"light,dark\"></c2-theme-select>",
+          "css": ".compact {\n  --c2-theme-select__trigger--size: 24px;\n  --c2-theme-select__trigger--border-radius: 4px;\n  --c2-theme-select__icon--size: 14px;\n}"
+        },
+        {
+          "kind": "preview",
+          "label": "Preview",
+          "html": "<div class=\"preview-row\"><c2-theme-select manual></c2-theme-select><c2-theme-select manual show-label style=\"--c2-theme-select__trigger--border:1px solid #bcbcc6;--c2-theme-select__trigger--border-radius:6px\"></c2-theme-select><c2-theme-select manual modes=\"light,dark\" style=\"--c2-theme-select__trigger--border-radius:999px;--c2-theme-select__trigger--background:#f4f4f5\"></c2-theme-select></div>"
+        }
+      ],
+      "hasGallery": true
+    },
     "toast": {
       "id": "toast",
       "package": "@c2n/toast",
@@ -46830,8 +49449,10 @@
     "c2-attachment-group": "attachment",
     "c2-autocomplete": "autocomplete",
     "c2-avatar": "avatar",
+    "c2-avatar-group": "avatar",
     "c2-badge": "badge",
     "c2-bar-chart": "bar-chart",
+    "c2-border-beam": "border-beam",
     "c2-breadcrumb": "breadcrumb",
     "c2-button": "button",
     "c2-button-group": "button-group",
@@ -46845,6 +49466,7 @@
     "c2-chat-message": "chat-message",
     "c2-chatbot": "chatbot",
     "c2-checkbox": "checkbox",
+    "c2-code-editor": "code-editor",
     "c2-code-viewer": "code-viewer",
     "c2-color-area": "color-area",
     "c2-color-select": "color-select",
@@ -46893,6 +49515,8 @@
     "c2-spinner": "spinner",
     "c2-stat": "stat",
     "c2-status-panel": "status-panel",
+    "c2-step": "steps",
+    "c2-steps": "steps",
     "c2-switch": "switch",
     "c2-tab": "tabs",
     "c2-table": "table",
@@ -46901,6 +49525,7 @@
     "c2-text-field": "text-field",
     "c2-text-field-clear": "text-field",
     "c2-textarea": "textarea",
+    "c2-theme-select": "theme-select",
     "c2-toast": "toast",
     "c2-toast-region": "toast",
     "c2-tooltip": "tooltip",
@@ -46915,6 +49540,7 @@
     "@c2n/autocomplete": "autocomplete",
     "@c2n/avatar": "avatar",
     "@c2n/badge": "badge",
+    "@c2n/border-beam": "border-beam",
     "@c2n/breadcrumb": "breadcrumb",
     "@c2n/button": "button",
     "@c2n/button-group": "button-group",
@@ -46925,6 +49551,7 @@
     "@c2n/chat-message": "chat-message",
     "@c2n/chatbot": "chatbot",
     "@c2n/checkbox": "checkbox",
+    "@c2n/code-editor": "code-editor",
     "@c2n/code-viewer": "code-viewer",
     "@c2n/color-area": "color-area",
     "@c2n/color-select": "color-select",
@@ -46965,11 +49592,13 @@
     "@c2n/spinner": "spinner",
     "@c2n/stat": "stat",
     "@c2n/status-panel": "status-panel",
+    "@c2n/steps": "steps",
     "@c2n/switch": "switch",
     "@c2n/table": "table",
     "@c2n/tabs": "tabs",
     "@c2n/text-field": "text-field",
     "@c2n/textarea": "textarea",
+    "@c2n/theme-select": "theme-select",
     "@c2n/toast": "toast",
     "@c2n/tooltip": "tooltip",
     "@c2n/tree": "tree",
@@ -46993,7 +49622,7 @@
         "light": "#0265dc",
         "dark": "#5aa3ff",
         "description": "Accent colour: filled buttons, selected states, focused borders, links.",
-        "usedBy": 48
+        "usedBy": 56
       },
       {
         "name": "--c2-theme--color-primary-hover",
@@ -47041,7 +49670,7 @@
         "light": "#ffffff",
         "dark": "#18181b",
         "description": "Default surface of inputs, lists, cards, dialogs.",
-        "usedBy": 44
+        "usedBy": 47
       },
       {
         "name": "--c2-theme--color-surface-container-low",
@@ -47057,7 +49686,7 @@
         "light": "#f4f4f5",
         "dark": "#27272a",
         "description": "Hover surface for rows and icon buttons.",
-        "usedBy": 32
+        "usedBy": 34
       },
       {
         "name": "--c2-theme--color-on-surface",
@@ -47065,7 +49694,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "Primary text colour.",
-        "usedBy": 55
+        "usedBy": 61
       },
       {
         "name": "--c2-theme--color-on-surface-variant",
@@ -47073,7 +49702,7 @@
         "light": "#71717a",
         "dark": "#a1a1aa",
         "description": "Secondary text, placeholders, icons, supporting text.",
-        "usedBy": 86
+        "usedBy": 94
       },
       {
         "name": "--c2-theme--color-outline",
@@ -47089,7 +49718,7 @@
         "light": "#e4e4e7",
         "dark": "#27272a",
         "description": "Hairline dividers and light borders.",
-        "usedBy": 69
+        "usedBy": 74
       },
       {
         "name": "--c2-theme--color-outline-strong",
@@ -47105,7 +49734,7 @@
         "light": "#dc2626",
         "dark": "#f87171",
         "description": "Error borders, error text, required indicators.",
-        "usedBy": 22
+        "usedBy": 25
       },
       {
         "name": "--c2-theme--color-scrim",
@@ -47121,7 +49750,7 @@
         "light": "#18181b",
         "dark": "#f4f4f5",
         "description": "High-contrast surface, e.g. tooltips.",
-        "usedBy": 5
+        "usedBy": 6
       },
       {
         "name": "--c2-theme--color-on-inverse-surface",
@@ -47129,42 +49758,42 @@
         "light": "#fafafa",
         "dark": "#18181b",
         "description": "Text drawn on the inverse surface.",
-        "usedBy": 4
+        "usedBy": 5
       },
       {
         "name": "--c2-theme--font-family",
         "category": "font",
         "light": null,
         "description": "Font family of every component. Unset by default so components inherit the page font.",
-        "usedBy": 1
+        "usedBy": 3
       },
       {
         "name": "--c2-theme--font-size-sm",
         "category": "font",
         "light": "12px",
         "description": "Small text: supporting text, tooltips, descriptions, timestamps.",
-        "usedBy": 31
+        "usedBy": 34
       },
       {
         "name": "--c2-theme--font-size-md",
         "category": "font",
         "light": "14px",
         "description": "Body text: buttons, inputs, list items, dialog content.",
-        "usedBy": 42
+        "usedBy": 44
       },
       {
         "name": "--c2-theme--font-weight-medium",
         "category": "font",
         "light": "500",
         "description": "Medium weight: buttons, headers, tooltips.",
-        "usedBy": 20
+        "usedBy": 24
       },
       {
         "name": "--c2-theme--font-weight-semibold",
         "category": "font",
         "light": "600",
         "description": "Semibold weight: dialog titles, list headings, avatars.",
-        "usedBy": 19
+        "usedBy": 21
       },
       {
         "name": "--c2-theme--radius-sm",
@@ -47178,14 +49807,14 @@
         "category": "radius",
         "light": "6px",
         "description": "Default radius: buttons, inputs, list items, tooltips.",
-        "usedBy": 48
+        "usedBy": 50
       },
       {
         "name": "--c2-theme--radius-lg",
         "category": "radius",
         "light": "8px",
         "description": "Large radius: cards, panels, popovers.",
-        "usedBy": 65
+        "usedBy": 68
       },
       {
         "name": "--c2-theme--radius-xl",
@@ -47199,7 +49828,7 @@
         "category": "radius",
         "light": "999px",
         "description": "Pill / circle radius: avatars, icon buttons.",
-        "usedBy": 17
+        "usedBy": 19
       },
       {
         "name": "--c2-theme--border-width",
@@ -47213,7 +49842,7 @@
         "category": "border",
         "light": null,
         "description": "Complete resting border shorthand. Unset by default: it falls back to `border-width solid color-outline`.",
-        "usedBy": 46
+        "usedBy": 48
       },
       {
         "name": "--c2-theme--focus-ring",
@@ -47221,21 +49850,21 @@
         "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": 35
+        "usedBy": 37
       },
       {
         "name": "--c2-theme--disabled-opacity",
         "category": "disabled",
         "light": "0.38",
         "description": "Opacity of disabled components.",
-        "usedBy": 37
+        "usedBy": 39
       },
       {
         "name": "--c2-theme--motion-scale",
         "category": "motion",
         "light": "1",
         "description": "Multiplier applied to every transition and animation duration (0 disables motion).",
-        "usedBy": 17
+        "usedBy": 19
       },
       {
         "name": "--c2-theme--shadow-md",
@@ -47243,7 +49872,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": 9
+        "usedBy": 10
       },
       {
         "name": "--c2-theme--shadow-lg",
@@ -47394,6 +50023,12 @@
       "--c2-avatar__remove--border": "--c2-theme--color-outline-variant",
       "--c2-avatar__remove--box-shadow": "--c2-theme--shadow-sm",
       "--c2-avatar__badge--border": "--c2-theme--color-surface",
+      "--c2-avatar-group__overflow--background": "--c2-theme--color-inverse-surface",
+      "--c2-avatar-group__overflow--color": "--c2-theme--color-on-inverse-surface",
+      "--c2-avatar-group__overflow--border": "--c2-theme--color-surface",
+      "--c2-avatar-group__overflow--border-radius": "--c2-theme--radius-full",
+      "--c2-avatar-group__overflow--font-size": "--c2-theme--font-size-sm",
+      "--c2-avatar-group__overflow--font-weight": "--c2-theme--font-weight-semibold",
       "--c2-badge--border-radius": "--c2-theme--radius-full",
       "--c2-badge--font-size": "--c2-theme--font-size-sm",
       "--c2-badge--font-weight": "--c2-theme--font-weight-medium",
@@ -47404,6 +50039,8 @@
       "--c2-badge__danger--color": "--c2-theme--color-error",
       "--c2-badge__pulse--animation-duration": "--c2-theme--motion-scale",
       "--c2-badge__anchor--border": "--c2-theme--color-surface",
+      "--c2-border-beam__beam--radius": "--c2-theme--radius-lg",
+      "--c2-border-beam__beam--color-from": "--c2-theme--color-primary",
       "--c2-breadcrumb__separator--color": "--c2-theme--color-on-surface-variant",
       "--c2-breadcrumb__item--color": "--c2-theme--color-on-surface-variant",
       "--c2-breadcrumb__item--font-size": "--c2-theme--font-size-md",
@@ -47546,6 +50183,28 @@
       "--c2-checkbox__state-layer--border-top-right-radius": "--c2-theme--radius-md",
       "--c2-checkbox__state-layer--border-bottom-left-radius": "--c2-theme--radius-md",
       "--c2-checkbox__state-layer--border-bottom-right-radius": "--c2-theme--radius-md",
+      "--c2-code-editor--background": "--c2-theme--color-surface",
+      "--c2-code-editor--border": "--c2-theme--border",
+      "--c2-code-editor__focus--border": "--c2-theme--color-primary",
+      "--c2-code-editor__focus--outline": "--c2-theme--focus-ring",
+      "--c2-code-editor--border-radius": "--c2-theme--radius-md",
+      "--c2-code-editor__disabled--opacity": "--c2-theme--disabled-opacity",
+      "--c2-code-editor--font-family": "--c2-theme--font-family",
+      "--c2-code-editor__gutter--color": "--c2-theme--color-on-surface-variant",
+      "--c2-code-editor__gutter__active--color": "--c2-theme--color-on-surface",
+      "--c2-code-editor__gutter--border-right": "--c2-theme--color-outline-variant",
+      "--c2-code-editor__active-line--background": "--c2-theme--color-primary",
+      "--c2-code-editor__selection--background": "--c2-theme--color-primary",
+      "--c2-code-editor__cursor--color": "--c2-theme--color-on-surface",
+      "--c2-code-editor__matching-bracket--background": "--c2-theme--color-primary",
+      "--c2-code-editor__placeholder--color": "--c2-theme--color-on-surface-variant",
+      "--c2-code-editor__label--color": "--c2-theme--color-on-surface",
+      "--c2-code-editor__label--font-size": "--c2-theme--font-size-sm",
+      "--c2-code-editor__label--font-weight": "--c2-theme--font-weight-medium",
+      "--c2-code-editor__supporting-text--color": "--c2-theme--color-on-surface-variant",
+      "--c2-code-editor__supporting-text--font-size": "--c2-theme--font-size-sm",
+      "--c2-code-editor__error--color": "--c2-theme--color-error",
+      "--c2-code-editor__error--border": "--c2-theme--color-error",
       "--c2-code-viewer--border-top": "--c2-theme--border",
       "--c2-code-viewer--border-right": "--c2-theme--border",
       "--c2-code-viewer--border-bottom": "--c2-theme--border",
@@ -48002,6 +50661,24 @@
       "--c2-status-panel__description--font-size": "--c2-theme--font-size-md",
       "--c2-status-panel__content--border-radius": "--c2-theme--radius-lg",
       "--c2-status-panel__content--background-color": "--c2-theme--color-surface-container",
+      "--c2-step__row--border-bottom": "--c2-theme--color-outline-variant",
+      "--c2-step__toggle--color": "--c2-theme--color-on-surface-variant",
+      "--c2-step__guide--color": "--c2-theme--color-outline-variant",
+      "--c2-step__marker--font-weight": "--c2-theme--font-weight-semibold",
+      "--c2-step__marker--border-radius": "--c2-theme--radius-full",
+      "--c2-step__marker--border": "--c2-theme--border",
+      "--c2-step__marker--color": "--c2-theme--color-on-surface-variant",
+      "--c2-step__rail--color": "--c2-theme--color-outline-variant",
+      "--c2-step__label--color": "--c2-theme--color-on-surface",
+      "--c2-step__label--font-weight": "--c2-theme--font-weight-medium",
+      "--c2-step__label--font-family": "--c2-theme--font-family",
+      "--c2-step__detail--color": "--c2-theme--color-on-surface-variant",
+      "--c2-step__trailing--color": "--c2-theme--color-on-surface-variant",
+      "--c2-step__error--color": "--c2-theme--color-error",
+      "--c2-step__running--color": "--c2-theme--color-primary",
+      "--c2-step__current--color": "--c2-theme--color-primary",
+      "--c2-step__skipped--color": "--c2-theme--color-on-surface-variant",
+      "--c2-step--transition-duration": "--c2-theme--motion-scale",
       "--c2-switch__container__disabled--opacity": "--c2-theme--disabled-opacity",
       "--c2-switch__track--border-radius": "--c2-theme--radius-full",
       "--c2-switch__track--color": "--c2-theme--color-outline-variant",
@@ -48114,6 +50791,24 @@
       "--c2-textarea__supporting-text--font-size": "--c2-theme--font-size-sm",
       "--c2-textarea__supporting-text--color": "--c2-theme--color-on-surface-variant",
       "--c2-textarea__supporting-text__error--color": "--c2-theme--color-error",
+      "--c2-theme-select__trigger--border-radius": "--c2-theme--radius-lg",
+      "--c2-theme-select__trigger--color": "--c2-theme--color-on-surface",
+      "--c2-theme-select__trigger__hover--background": "--c2-theme--color-surface-container",
+      "--c2-theme-select__trigger__focus--outline": "--c2-theme--focus-ring",
+      "--c2-theme-select__trigger__disabled--opacity": "--c2-theme--disabled-opacity",
+      "--c2-theme-select__label--font-size": "--c2-theme--font-size-md",
+      "--c2-theme-select__label--font-weight": "--c2-theme--font-weight-medium",
+      "--c2-theme-select__menu--background": "--c2-theme--color-surface",
+      "--c2-theme-select__menu--border": "--c2-theme--color-outline-variant",
+      "--c2-theme-select__menu--border-radius": "--c2-theme--radius-lg",
+      "--c2-theme-select__menu--box-shadow": "--c2-theme--shadow-md",
+      "--c2-theme-select__menu-item--border-radius": "--c2-theme--radius-md",
+      "--c2-theme-select__menu-item--color": "--c2-theme--color-on-surface",
+      "--c2-theme-select__menu-item--font-size": "--c2-theme--font-size-md",
+      "--c2-theme-select__menu-item--font-weight": "--c2-theme--font-weight-medium",
+      "--c2-theme-select__menu-item__hover--background": "--c2-theme--color-surface-container",
+      "--c2-theme-select__menu-item__selected--color": "--c2-theme--color-primary",
+      "--c2-theme-select--transition-duration": "--c2-theme--motion-scale",
       "--c2-toast__container--background": "--c2-theme--color-surface",
       "--c2-toast__container--color": "--c2-theme--color-on-surface",
       "--c2-toast__container--border": "--c2-theme--color-outline-variant",