@c2n/mcp 0.0.13 → 0.0.15

package/data/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "c2nVersion": "0.0.13",
+  "c2nVersion": "0.0.15",
   "categories": [
     "Inputs",
     "Buttons",
@@ -561,7 +561,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -569,11 +569,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -1550,7 +1550,28 @@
               "description": "Fired when the image preview cannot be loaded; the file fallback is shown."
             }
           ],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "media",
+              "description": "Media region wrapping the `media` slot and thumbnail or file-icon fallback."
+            },
+            {
+              "name": "content",
+              "description": "Text and status region containing the name and metadata."
+            },
+            {
+              "name": "name",
+              "description": "File-name region wrapping the `name` slot and fallback name."
+            },
+            {
+              "name": "metadata",
+              "description": "Metadata region wrapping the `metadata` slot and type/size fallback."
+            },
+            {
+              "name": "actions",
+              "description": "Actions region wrapping the `actions` slot and built-in action fallback."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-attachment--min-height",
@@ -1804,7 +1825,12 @@
             }
           ],
           "events": [],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "list",
+              "description": "List region wrapping the default attachment slot."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-attachment-group--gap",
@@ -3616,7 +3642,7 @@
           "cssParts": [
             {
               "name": "badge",
-              "description": "Shadow DOM styling hook for the badge element."
+              "description": "The visible badge pill or dot, including its anchored overlay positioning."
             }
           ],
           "cssProperties": [
@@ -4358,7 +4384,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -4366,11 +4392,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -5514,19 +5540,19 @@
           "cssParts": [
             {
               "name": "separator",
-              "description": "Shadow DOM styling hook for the separator element."
+              "description": "Component-owned region containing the `separator` slot or its fallback between breadcrumb items."
             },
             {
               "name": "item",
-              "description": "Shadow DOM styling hook for the item element."
+              "description": "A list item containing one breadcrumb and its following separator."
             },
             {
               "name": "ellipsis",
-              "description": "Shadow DOM styling hook for the ellipsis element."
+              "description": "The control that reveals breadcrumb items hidden by overflow or `max-items`."
             },
             {
               "name": "list",
-              "description": "Shadow DOM styling hook for the list element."
+              "description": "The ordered list containing the complete breadcrumb trail."
             }
           ],
           "cssProperties": [
@@ -5926,6 +5952,24 @@
               "type": "boolean",
               "default": "false",
               "description": "Declares a toggle button: `aria-pressed` is announced as `false` while not selected. Set by `c2-button-group` in selection modes."
+            },
+            {
+              "name": "type",
+              "type": "'button' | 'submit' | 'reset'",
+              "default": "'button'",
+              "description": "Native button behavior. `submit` submits the nearest form and `reset` restores it."
+            },
+            {
+              "name": "value",
+              "type": "string",
+              "default": "''",
+              "description": "Stable identity used by `c2-button-group` and included in submitted form data when `name` is set."
+            },
+            {
+              "name": "name",
+              "type": "string",
+              "default": "''",
+              "description": "Form field name used with `value` when the button is the control that submits the form."
             }
           ],
           "slots": [
@@ -5950,11 +5994,11 @@
           "cssParts": [
             {
               "name": "button",
-              "description": "Shadow DOM styling hook for the button element."
+              "description": "The native button that provides the interactive surface."
             },
             {
               "name": "running-icon",
-              "description": "Shadow DOM styling hook for the running icon element."
+              "description": "Wrapper containing the `running-icon` slot or spinner fallback while `running` is set."
             }
           ],
           "cssProperties": [
@@ -7026,7 +7070,7 @@
               "part": "indicator",
               "property": "transition-duration",
               "token": "--c2-theme--motion-scale",
-              "description": "Sliding selection indicator animation duration."
+              "description": "Sliding selection indicator animation duration. In the segmented appearance the group owns its children's surface variables with an important cascade layer. Theme the control through the `segmented-*` and `indicator-*` variables above; app-wide `c2-button` defaults will not leak into the segmented surface."
             }
           ]
         }
@@ -7522,7 +7566,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -7530,11 +7574,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -8386,7 +8430,24 @@
             }
           ],
           "events": [],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "media",
+              "description": "Wrapper around the `media` slot; present when media content is assigned and clipped by the card surface."
+            },
+            {
+              "name": "header",
+              "description": "Wrapper around the `header` slot; present when header content is assigned."
+            },
+            {
+              "name": "body",
+              "description": "Wrapper around the default slot; present when body content is assigned."
+            },
+            {
+              "name": "footer",
+              "description": "Wrapper around the `footer` slot; present when footer content is assigned."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-card--padding-top",
@@ -9586,13 +9647,13 @@
               "description": "Requires a nonempty message for form validation."
             },
             {
-              "name": "maxLength",
+              "name": "maxlength",
               "type": "number",
               "default": "-1",
               "description": "Maximum message length; -1 means unlimited."
             },
             {
-              "name": "minLength",
+              "name": "minlength",
               "type": "number",
               "default": "-1",
               "description": "Minimum message length; -1 means no minimum."
@@ -9657,23 +9718,23 @@
           "cssParts": [
             {
               "name": "container",
-              "description": "Shadow DOM styling hook for the container element."
+              "description": "Outer composer surface containing the textarea and actions."
             },
             {
               "name": "textarea",
-              "description": "Shadow DOM styling hook for the textarea element."
+              "description": "The native auto-growing textarea."
             },
             {
               "name": "actions",
-              "description": "Shadow DOM styling hook for the actions element."
+              "description": "Row containing the toolbar and send button."
             },
             {
               "name": "toolbar",
-              "description": "Shadow DOM styling hook for the toolbar element."
+              "description": "Container for the `toolbar` slot."
             },
             {
               "name": "send-button",
-              "description": "Shadow DOM styling hook for the send button element."
+              "description": "The native button that submits the current message."
             }
           ],
           "cssProperties": [
@@ -10066,11 +10127,11 @@
             },
             {
               "name": "avatar",
-              "description": "Avatar region."
+              "description": "Component-owned region wrapping the assigned `avatar` slot."
             },
             {
               "name": "body",
-              "description": "Header, content and footer column."
+              "description": "Component-owned column wrapping the default slot between the header and footer."
             },
             {
               "name": "header",
@@ -10466,7 +10527,7 @@
       "package": "@c2n/chatbot",
       "title": "Chatbot",
       "description": "",
-      "intro": "npm install @c2n/chatbot",
+      "intro": "`c2-chatbot` provides a minimal support-chat shell. Application-owned conversation content goes in the default slot; use ordinary classes for those assigned messages and the public `messages` part for the component-owned conversation region.",
       "category": "Layout",
       "status": "stable",
       "docsUrl": "https://code2nguyen.github.io/web-components/components/chatbot",
@@ -10486,13 +10547,106 @@
           ],
           "slots": [
             {
-              "name": "default",
+              "name": "",
               "description": "Conversation content rendered inside the chatbot shell."
             }
           ],
           "events": [],
-          "cssParts": [],
-          "cssProperties": []
+          "cssParts": [
+            {
+              "name": "messages",
+              "description": "Always-present conversation container around the default slot; controls assigned-content placement, has no fallback, and does not style inside assigned nodes."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-chatbot--border-top-left-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "",
+              "property": "border-top-left-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-chatbot--border-top-right-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "",
+              "property": "border-top-right-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-chatbot--border-bottom-left-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "",
+              "property": "border-bottom-left-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-chatbot--border-bottom-right-radius",
+              "type": "border-radius",
+              "default": "8px",
+              "part": "",
+              "property": "border-bottom-right-radius",
+              "token": "--c2-theme--radius-lg"
+            },
+            {
+              "name": "--c2-chatbot--border-top",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "",
+              "property": "border-top",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-chatbot--border-right",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "",
+              "property": "border-right",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-chatbot--border-bottom",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "",
+              "property": "border-bottom",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-chatbot--border-left",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "",
+              "property": "border-left",
+              "token": "--c2-theme--color-outline-variant"
+            },
+            {
+              "name": "--c2-chatbot__header--padding",
+              "type": "padding",
+              "default": "16px",
+              "part": "header",
+              "property": "padding"
+            },
+            {
+              "name": "--c2-chatbot__header--background",
+              "type": "color",
+              "default": "#ffffff",
+              "part": "header",
+              "property": "background",
+              "token": "--c2-theme--color-surface"
+            },
+            {
+              "name": "--c2-chatbot__header--border-bottom",
+              "type": "border",
+              "default": "1px solid #e4e4e7",
+              "part": "header",
+              "property": "border-bottom",
+              "token": "--c2-theme--color-outline-variant"
+            }
+          ]
         }
       ],
       "composition": {
@@ -10600,15 +10754,15 @@
           "cssParts": [
             {
               "name": "checkmark",
-              "description": "Shadow DOM styling hook for the checkmark element."
+              "description": "Wrapper containing the `checkmark` slot or fallback mark while checked."
             },
             {
               "name": "mixedmark",
-              "description": "Shadow DOM styling hook for the mixedmark element."
+              "description": "Wrapper containing the `mixedmark` slot or fallback mark while indeterminate."
             },
             {
               "name": "uncheckmark",
-              "description": "Shadow DOM styling hook for the uncheckmark element."
+              "description": "Wrapper containing the optional `uncheckmark` slot while unchecked."
             }
           ],
           "cssProperties": [
@@ -11548,7 +11702,7 @@
             },
             {
               "name": "label",
-              "description": "The label above the editor."
+              "description": "Component-owned text region containing the `label` slot above the editor."
             },
             {
               "name": "editor",
@@ -11556,11 +11710,7 @@
             },
             {
               "name": "supporting-text",
-              "description": "The help / error row under the editor."
-            },
-            {
-              "name": "ready",
-              "description": "Shadow DOM styling hook for the ready element."
+              "description": "Help and error row containing the `supporting-text` slot or generated fallback."
             }
           ],
           "cssProperties": [
@@ -12193,7 +12343,24 @@
               "description": "Fired after the copy button put the code on the clipboard."
             }
           ],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "header",
+              "description": "Header region containing the title, terminal controls, and copy action."
+            },
+            {
+              "name": "title",
+              "description": "Title boundary exposing the `title` slot."
+            },
+            {
+              "name": "body",
+              "description": "Code body region containing the default slot or rendered-source fallback and inline copy action."
+            },
+            {
+              "name": "copy-button",
+              "description": "Copy action containing the `copy-icon` or `copied-icon` fallback."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-code-viewer--background",
@@ -12967,7 +13134,14 @@
         {
           "kind": "usage",
           "label": "Default",
-          "html": "<c2-color-area></c2-color-area>"
+          "html": "<c2-color-area></c2-color-area>",
+          "css": ".wide-color-area {\n  --c2-color-area--width: 280px;\n  --c2-color-area--height: 180px;\n  --c2-color-area__color-handle--size: 16px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Wide landscape",
+          "html": "<c2-color-area class=\"wide-color-area\"></c2-color-area>",
+          "css": ".wide-color-area {\n  --c2-color-area--width: 280px;\n  --c2-color-area--height: 180px;\n  --c2-color-area__color-handle--size: 16px;\n}"
         },
         {
           "kind": "gallery",
@@ -13268,7 +13442,14 @@
         {
           "kind": "usage",
           "label": "Default",
-          "html": "<c2-color-select color=\"#ff726b\"></c2-color-select>"
+          "html": "<c2-color-select color=\"#ff726b\"></c2-color-select>",
+          "css": ".large-swatch {\n  --c2-color-select--width: 32px;\n  --c2-color-select--height: 32px;\n  --c2-color-select--border-top-left-radius: 8px;\n  --c2-color-select--border-top-right-radius: 8px;\n  --c2-color-select--border-bottom-left-radius: 8px;\n  --c2-color-select--border-bottom-right-radius: 8px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Large swatch",
+          "html": "<c2-color-select class=\"large-swatch\" color=\"#2563eb\"></c2-color-select>",
+          "css": ".large-swatch {\n  --c2-color-select--width: 32px;\n  --c2-color-select--height: 32px;\n  --c2-color-select--border-top-left-radius: 8px;\n  --c2-color-select--border-top-right-radius: 8px;\n  --c2-color-select--border-bottom-left-radius: 8px;\n  --c2-color-select--border-bottom-right-radius: 8px;\n}"
         },
         {
           "kind": "gallery",
@@ -13496,7 +13677,14 @@
         {
           "kind": "usage",
           "label": "Default",
-          "html": "<c2-color-slider></c2-color-slider>"
+          "html": "<c2-color-slider></c2-color-slider>",
+          "css": ".compact-hue-slider {\n  --c2-color-slider--width: 180px;\n  --c2-color-slider--height: 12px;\n  --c2-color-slider__color-handle--width: 16px;\n  --c2-color-slider__color-handle--height: 16px;\n}"
+        },
+        {
+          "kind": "usage",
+          "label": "Compact",
+          "html": "<c2-color-slider class=\"compact-hue-slider\"></c2-color-slider>",
+          "css": ".compact-hue-slider {\n  --c2-color-slider--width: 180px;\n  --c2-color-slider--height: 12px;\n  --c2-color-slider__color-handle--width: 16px;\n  --c2-color-slider__color-handle--height: 16px;\n}"
         },
         {
           "kind": "gallery",
@@ -13620,11 +13808,11 @@
           "cssParts": [
             {
               "name": "button",
-              "description": "Shadow DOM styling hook for the button element."
+              "description": "The native button that performs the copy action."
             },
             {
               "name": "icon",
-              "description": "Shadow DOM styling hook for the icon element."
+              "description": "Wrapper that switches between the copy and copied icons."
             }
           ],
           "cssProperties": [
@@ -14076,7 +14264,7 @@
           "tag": "c2-dashboard",
           "className": "Dashboard",
           "modulePath": "@c2n/dashboard",
-          "description": "Grid of resizable panes. The children are `c2-dash-card` elements, placed by their `col`/`row` attributes; each\none draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the\ncards on either side stay aligned. `columns` and `rows` take a track count (`columns=\"3\"` is three equal columns)\nor an explicit track list (`columns=\"320px 1fr\"`); a track is switched to pixels the first time it is dragged, and\nthe `fr` tracks around it give up the space in proportion to their weight, down to the minimums. With a\n`storage-key` the sizes survive a reload.\n\n`layouts` makes the grid responsive without a remount: each entry names a media query and the tracks and card\nplacements to use while it matches, the first match wins, and every entry keeps its own stored sizes under\n`<storage-key>@<media>`.\n\nPlacement is the application's: the grid never re-places cards on its own. A pane removed or hidden at runtime\nleaves its cells empty and its neighbours where they were, and a pane added at runtime lands exactly where its\n`col`/`row` say, on top of whatever is already there if that cell is taken. To close a gap, or to make room, set\nthe cards' `col`/`row`/`col-span`/`row-span` or hand the grid a `layout` record — both are applied in place.\n\nThe grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a\nflex/grid parent that does) whenever the rows use `fr`, since the row tracks divide the host's height.",
+          "description": "Grid of resizable panes. The children are `c2-dash-card` elements, placed by their `col`/`row` attributes; each\none draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the\ncards on either side stay aligned. `columns` and `rows` take a track count (`columns=\"3\"` is three equal columns)\nor an explicit track list (`columns=\"320px 1fr\"`); a track is switched to pixels the first time it is dragged, and\nthe `fr` tracks around it give up the space in proportion to their weight, down to the minimums. With a\n`storage-key` the sizes survive a reload.\n\n`layouts` makes the grid responsive without a remount: each entry names a media query and the tracks and card\nplacements to use while it matches, the first match wins, and every entry keeps its own stored sizes under\n`<storage-key>@<media>`. Stored payloads are versioned and include stable card order; `serializeLayout` and\n`deserializeLayout` can preserve application metadata such as named sizes without coupling it to the component.\n\nPlacement is the application's: the grid never re-places cards on its own. A pane removed or hidden at runtime\nleaves its cells empty and its neighbours where they were, and a pane added at runtime lands exactly where its\n`col`/`row` say, on top of whatever is already there if that cell is taken. To close a gap, or to make room, set\nthe cards' `col`/`row`/`col-span`/`row-span` or hand the grid a `layout` record — both are applied in place.\n\nThe grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a\nflex/grid parent that does) whenever the rows use `fr`, since the row tracks divide the host's height.",
           "attributes": [
             {
               "name": "columns",
@@ -14106,7 +14294,7 @@
               "name": "storage-key",
               "type": "string | undefined",
               "default": "undefined",
-              "description": "`localStorage` key the track sizes are stored under. Without it the grid starts from the authored tracks."
+              "description": "`localStorage` key the track sizes and stable card order are stored under. Without it the grid starts from the authored layout."
             }
           ],
           "slots": [
@@ -14119,7 +14307,7 @@
             {
               "name": "layout-change",
               "type": "CustomEvent<DashboardLayoutChangeDetail>",
-              "description": "The track sizes changed: a gesture ended, `reset()` was called, or another entry of `layouts` took over. Does not bubble: listen on the element."
+              "description": "The tracks or stable card order changed: a gesture ended, `setPanelOrder()`/`reset()` was called, or another entry of `layouts` took over. Includes the active breakpoint. Does not bubble: listen on the element."
             }
           ],
           "cssParts": [],
@@ -14298,7 +14486,7 @@
           "cssParts": [
             {
               "name": "header",
-              "description": "The header row, or the floating control group when the header and actions slots are empty."
+              "description": "Conditional row containing the `header` and `actions` slots, or the floating controls when both are empty."
             },
             {
               "name": "body",
@@ -14306,11 +14494,11 @@
             },
             {
               "name": "footer",
-              "description": "The footer row."
+              "description": "Conditional row wrapping the assigned `footer` slot."
             },
             {
               "name": "controls",
-              "description": "The group holding the `controls` slot and the built-in expand buttons."
+              "description": "Component-owned group containing the `controls` slot and built-in expand-button fallbacks."
             },
             {
               "name": "control",
@@ -14947,7 +15135,7 @@
               "description": "Requires a date before the form can be submitted."
             },
             {
-              "name": "readOnly",
+              "name": "readonly",
               "type": "boolean",
               "default": "false",
               "description": "Prevents editing while keeping the value in form submission."
@@ -15778,7 +15966,28 @@
               "description": "Re-dispatched from the native details after it opens or closes (`newState` is `open` or `closed`)."
             }
           ],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "summary",
+              "description": "Interactive summary containing the title, icon, and optional header content."
+            },
+            {
+              "name": "title",
+              "description": "Component-owned title region wrapping the `title` slot or label fallback."
+            },
+            {
+              "name": "icon",
+              "description": "Icon region containing the `icon` and `expanded-icon` slots and fallback chevron."
+            },
+            {
+              "name": "header-content",
+              "description": "Conditional secondary header region wrapping the `header-content` slot."
+            },
+            {
+              "name": "body",
+              "description": "Collapsible body region wrapping the default slot."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-details--border-top",
@@ -16376,51 +16585,6 @@
       ],
       "hasGallery": true
     },
-    "dropdown-list": {
-      "id": "dropdown-list",
-      "package": "@c2n/dropdown-list",
-      "title": "dropdown-list",
-      "description": "",
-      "category": "Layout",
-      "status": "undocumented",
-      "docsUrl": "https://code2nguyen.github.io/web-components/components/dropdown-list",
-      "elements": [
-        {
-          "tag": "c2-dropdown-list",
-          "className": "DropdownList",
-          "modulePath": "@c2n/dropdown-list",
-          "description": "",
-          "attributes": [
-            {
-              "name": "value",
-              "type": "string[]",
-              "default": "[]"
-            }
-          ],
-          "slots": [
-            {
-              "name": "default",
-              "description": "This is a default/unnamed slot"
-            }
-          ],
-          "events": [],
-          "cssParts": [],
-          "cssProperties": []
-        }
-      ],
-      "composition": {
-        "internal": [],
-        "slotted": [],
-        "usedBy": []
-      },
-      "install": {
-        "npm": "npm install @c2n/dropdown-list @c2n/theme",
-        "import": "import '@c2n/dropdown-list'",
-        "importClass": "import { DropdownList } from '@c2n/dropdown-list'"
-      },
-      "examples": [],
-      "hasGallery": false
-    },
     "feather-icons": {
       "id": "feather-icons",
       "package": "@c2n/feather-icons",
@@ -17035,7 +17199,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -17043,11 +17207,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -17921,27 +18085,27 @@
           "cssParts": [
             {
               "name": "header",
-              "description": "Shadow DOM styling hook for the header element."
+              "description": "The outer page-header landmark."
             },
             {
               "name": "content",
-              "description": "Shadow DOM styling hook for the content element."
+              "description": "Inner layout container wrapping and aligning the assigned default slot."
             },
             {
               "name": "brand",
-              "description": "Shadow DOM styling hook for the brand element."
+              "description": "Container for the `brand` slot."
             },
             {
               "name": "navigation",
-              "description": "Shadow DOM styling hook for the navigation element."
+              "description": "Primary navigation landmark containing the default slot."
             },
             {
               "name": "actions",
-              "description": "Shadow DOM styling hook for the actions element."
+              "description": "Container for the trailing `actions` slot."
             },
             {
               "name": "mobile-trigger",
-              "description": "Shadow DOM styling hook for the mobile trigger element."
+              "description": "Container for the responsive `mobile-trigger` slot."
             }
           ],
           "cssProperties": [
@@ -18204,7 +18368,7 @@
           "cssParts": [
             {
               "name": "button",
-              "description": "Shadow DOM styling hook for the button element."
+              "description": "The native button that provides the icon-only interactive surface."
             }
           ],
           "cssProperties": [
@@ -18688,7 +18852,7 @@
           "cssParts": [
             {
               "name": "kbd",
-              "description": "Shadow DOM styling hook for the kbd element."
+              "description": "The native `<kbd>` element containing the key or shortcut."
             }
           ],
           "cssProperties": [
@@ -19084,11 +19248,11 @@
           "cssParts": [
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "The label text and optional required marker."
             },
             {
               "name": "required-indicator",
-              "description": "Shadow DOM styling hook for the required indicator element."
+              "description": "Marker containing the `required-indicator` slot or fallback asterisk while `required` is set."
             }
           ],
           "cssProperties": [
@@ -19676,7 +19840,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -19684,11 +19848,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -20671,11 +20835,11 @@
           "cssParts": [
             {
               "name": "link",
-              "description": "Shadow DOM styling hook for the link element."
+              "description": "The anchor rendered when `href` is set and the control is enabled."
             },
             {
               "name": "button",
-              "description": "Shadow DOM styling hook for the button element."
+              "description": "The native button rendered without `href` or while disabled."
             }
           ],
           "cssProperties": [
@@ -22518,9 +22682,14 @@
           "tag": "c2-mat-icon",
           "className": "MatIcon",
           "modulePath": "@c2n/mat-icon",
-          "description": "",
+          "description": "Renders a Material Symbols ligature supplied as consumer-owned text.",
           "attributes": [],
-          "slots": [],
+          "slots": [
+            {
+              "name": "",
+              "description": "Material Symbols ligature text; style the assigned text through the host's inherited typography."
+            }
+          ],
           "events": [],
           "cssParts": [],
           "cssProperties": [
@@ -23672,7 +23841,32 @@
               "description": "Native, cancelable: fired on Escape before closing."
             }
           ],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "panel",
+              "description": "Dialog panel containing the header, body, and conditional footer regions."
+            },
+            {
+              "name": "header",
+              "description": "Header region containing the title slot and close button."
+            },
+            {
+              "name": "title",
+              "description": "Component-owned title region wrapping the `title` slot."
+            },
+            {
+              "name": "close-button",
+              "description": "Close button containing the `close-icon` slot or its fallback icon."
+            },
+            {
+              "name": "body",
+              "description": "Component-owned body region wrapping the default slot."
+            },
+            {
+              "name": "footer",
+              "description": "Conditional footer region wrapping the `footer` slot."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-modal--width",
@@ -25925,7 +26119,7 @@
               "description": "Requires a number before the form can be submitted."
             },
             {
-              "name": "readOnly",
+              "name": "readonly",
               "type": "boolean",
               "default": "false",
               "description": "Prevents editing while keeping the value in form submission."
@@ -26724,27 +26918,27 @@
           "cssParts": [
             {
               "name": "nav",
-              "description": "Shadow DOM styling hook for the nav element."
+              "description": "A first, previous, next or last page button."
             },
             {
               "name": "item",
-              "description": "Shadow DOM styling hook for the item element."
+              "description": "A numbered page button."
             },
             {
               "name": "ellipsis",
-              "description": "Shadow DOM styling hook for the ellipsis element."
+              "description": "A control that jumps across a hidden range of pages."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "Current-page, item-range or page-size text."
             },
             {
               "name": "page-size",
-              "description": "Shadow DOM styling hook for the page size element."
+              "description": "The `c2-select` used to change the number of items per page."
             },
             {
               "name": "pagination",
-              "description": "Shadow DOM styling hook for the pagination element."
+              "description": "The outer pagination navigation landmark."
             }
           ],
           "cssProperties": [
@@ -29154,7 +29348,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -29162,11 +29356,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -30104,23 +30298,23 @@
           "cssParts": [
             {
               "name": "header",
-              "description": "Shadow DOM styling hook for the header element."
+              "description": "Row containing the label and displayed value."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "Container for the default label slot."
             },
             {
               "name": "value",
-              "description": "Shadow DOM styling hook for the value element."
+              "description": "Text region containing the custom `value` slot or displayed-percentage fallback."
             },
             {
               "name": "track",
-              "description": "Shadow DOM styling hook for the track element."
+              "description": "The full progress track."
             },
             {
               "name": "indicator",
-              "description": "Shadow DOM styling hook for the indicator element."
+              "description": "The filled portion of the progress track."
             }
           ],
           "cssProperties": [
@@ -30829,19 +31023,19 @@
           "cssParts": [
             {
               "name": "previous-button",
-              "description": "Default Previous button, when its slot is not replaced."
+              "description": "Fallback button inside the `previous-button` slot when no assigned replacement is present."
             },
             {
               "name": "skip-button",
-              "description": "Default Skip button, when its slot is not replaced."
+              "description": "Fallback button inside the `skip-button` slot when no assigned replacement is present."
             },
             {
               "name": "next-button",
-              "description": "Default Next button, when its slot is not replaced."
+              "description": "Fallback button inside the `next-button` slot when no assigned replacement is present."
             },
             {
               "name": "submit-button",
-              "description": "Default final submit button, when its slot is not replaced."
+              "description": "Fallback button inside the `submit-button` slot when no assigned replacement is present."
             }
           ],
           "cssProperties": [
@@ -31457,7 +31651,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -31465,11 +31659,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -32276,27 +32470,27 @@
           "cssParts": [
             {
               "name": "control",
-              "description": "Shadow DOM styling hook for the control element."
+              "description": "The default circular radio indicator."
             },
             {
               "name": "dot",
-              "description": "Shadow DOM styling hook for the dot element."
+              "description": "Checked-mark region containing the `dot` slot or fallback inside the default control."
             },
             {
               "name": "icon",
-              "description": "Shadow DOM styling hook for the icon element."
+              "description": "Custom indicator shown from the `icon` slot."
             },
             {
               "name": "checked-icon",
-              "description": "Shadow DOM styling hook for the checked icon element."
+              "description": "Custom indicator shown from the `checked-icon` slot while checked."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "The option label."
             },
             {
               "name": "description",
-              "description": "Shadow DOM styling hook for the description element."
+              "description": "Supporting-text region containing the `description` slot below the label."
             }
           ],
           "cssProperties": [
@@ -33360,43 +33554,277 @@
     "reorder-list": {
       "id": "reorder-list",
       "package": "@c2n/reorder-list",
-      "title": "reorder-list",
-      "description": "",
-      "category": "Layout",
-      "status": "undocumented",
+      "title": "Reorder List",
+      "description": "Reorder a vertical queue with pointer or keyboard input while the application owns persistence.",
+      "intro": "Use `c2-reorder-list` for one vertical queue whose ordinary direct children need pointer and keyboard reordering. The component keeps the committed visual order immediately; listen for `reorder` and persist `event.detail.order` in application state. It never physically moves application-owned light DOM.",
+      "category": "Data display",
+      "status": "stable",
       "docsUrl": "https://code2nguyen.github.io/web-components/components/reorder-list",
       "elements": [
         {
           "tag": "c2-reorder-list",
           "className": "ReorderList",
           "modulePath": "@c2n/reorder-list",
-          "description": "",
+          "description": "Presents consumer-owned direct children as one vertical list and lets users reorder movable items with pointer or\nkeyboard input when `editable`. The component commits visual order immediately without moving consumer-owned light\nDOM. Applications persist the typed `reorder` result and may later reconcile their authored children.\n\nUse `data-fixed` to pin an item at its absolute position, `data-reorder-key` for optional stable application\nidentity, and `data-reorder-label` for announcements. Non-empty keys must be unique. Editable lists need an\naccessible name through `aria-label` or `aria-labelledby`. Whole-row touch reordering owns the vertical gesture;\ninteractive descendants retain their native behavior and never arm a reorder.",
           "attributes": [
             {
               "name": "editable",
               "type": "boolean",
-              "default": "false"
+              "default": "false",
+              "description": "Enables pointer and keyboard reordering."
             },
             {
-              "name": "dragStartThreshold",
+              "name": "dragstartthreshold",
               "type": "number",
-              "default": "10"
+              "default": "10",
+              "description": "Minimum summed pointer movement in CSS pixels before pickup. Invalid values use 10."
             },
             {
-              "name": "autoScrollDisabled",
+              "name": "autoscrolldisabled",
               "type": "boolean",
-              "default": "false"
+              "default": "false",
+              "description": "Prevents component-driven scrolling of the nearest eligible vertical ancestor."
+            }
+          ],
+          "slots": [
+            {
+              "name": "",
+              "description": "Ordinary direct-child items. Numeric or private slot metadata is assigned internally and is not consumer API."
+            },
+            {
+              "name": "placeholder",
+              "description": "Optional destination feedback shown only during pointer reordering."
+            },
+            {
+              "name": "dragging-item",
+              "description": "Optional pointer preview shown only during pointer reordering."
             }
           ],
-          "slots": [],
           "events": [
+            {
+              "name": "reorder",
+              "type": "CustomEvent<ReorderEventDetail>",
+              "description": "Fired once after a real committed user reorder. Bubbles and crosses shadow boundaries; not cancelable."
+            },
             {
               "name": "change",
-              "type": "CustomEvent"
+              "type": "CustomEvent<number[]>",
+              "description": "Deprecated numeric permutation emitted with `reorder` during the compatibility window."
+            },
+            {
+              "name": "reorder-error",
+              "type": "CustomEvent<ReorderErrorEventDetail>",
+              "description": "Fired when duplicate non-empty item keys prevent pickup."
             }
           ],
-          "cssParts": [],
-          "cssProperties": []
+          "cssParts": [
+            {
+              "name": "container",
+              "description": "Ordered-list layout and component-owned spacing boundary."
+            },
+            {
+              "name": "item",
+              "description": "Repeated component-owned placement wrapper around the default slot's assigned ordinary item; styles placement, not assigned content."
+            },
+            {
+              "name": "placeholder",
+              "description": "Component-owned destination marker wrapping the `placeholder` slot or its visible fallback; styles placement, not assigned content."
+            },
+            {
+              "name": "dragging-item",
+              "description": "Fixed-position component-owned preview region wrapping the `dragging-item` slot or its recognizable fallback; styles placement, not assigned content."
+            }
+          ],
+          "cssProperties": [
+            {
+              "name": "--c2-reorder-list--container-border-width",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "container-border-width",
+              "description": "Container border width."
+            },
+            {
+              "name": "--c2-reorder-list--container-border-color",
+              "type": "color",
+              "default": "#bcbcc6",
+              "part": "",
+              "property": "container-border-color",
+              "description": "Container border color."
+            },
+            {
+              "name": "--c2-reorder-list--container-border-radius",
+              "type": "length",
+              "default": "8px",
+              "part": "",
+              "property": "container-border-radius",
+              "description": "Container corner radius."
+            },
+            {
+              "name": "--c2-reorder-list--container-padding",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "container-padding",
+              "description": "Container padding."
+            },
+            {
+              "name": "--c2-reorder-list--container-margin",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "container-margin",
+              "description": "Container margin."
+            },
+            {
+              "name": "--c2-reorder-list--container-gap",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "container-gap",
+              "description": "Space between item placements."
+            },
+            {
+              "name": "--c2-reorder-list--item-background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "item-background",
+              "description": "Item placement background."
+            },
+            {
+              "name": "--c2-reorder-list--item-padding",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "item-padding",
+              "description": "Item placement padding."
+            },
+            {
+              "name": "--c2-reorder-list--divider-height",
+              "type": "length",
+              "default": "0px",
+              "part": "",
+              "property": "divider-height",
+              "description": "Divider thickness."
+            },
+            {
+              "name": "--c2-reorder-list--divider-color",
+              "type": "color",
+              "default": "#bcbcc6",
+              "part": "",
+              "property": "divider-color",
+              "description": "Divider color."
+            },
+            {
+              "name": "--c2-reorder-list--placeholder-background",
+              "type": "color",
+              "default": "rgb(37 99 235 / 8%)",
+              "part": "",
+              "property": "placeholder-background",
+              "description": "Placeholder background."
+            },
+            {
+              "name": "--c2-reorder-list--dragging-item-background",
+              "type": "color",
+              "default": "transparent",
+              "part": "",
+              "property": "dragging-item-background",
+              "description": "Pointer-preview background."
+            },
+            {
+              "name": "--c2-reorder-list__item__focus--outline-width",
+              "type": "length",
+              "default": "2px",
+              "part": "item",
+              "state": "focus",
+              "property": "outline-width",
+              "description": "Keyboard focus-ring width."
+            },
+            {
+              "name": "--c2-reorder-list__item__focus--outline-color",
+              "type": "color",
+              "default": "#2563eb",
+              "part": "item",
+              "state": "focus",
+              "property": "outline-color",
+              "description": "Keyboard focus-ring color."
+            },
+            {
+              "name": "--c2-reorder-list__item__focus--outline-offset",
+              "type": "length",
+              "default": "2px",
+              "part": "item",
+              "state": "focus",
+              "property": "outline-offset",
+              "description": "Keyboard focus-ring offset."
+            },
+            {
+              "name": "--c2-reorder-list__item__active--opacity",
+              "type": "number",
+              "default": "0.45",
+              "part": "item",
+              "state": "active",
+              "property": "opacity",
+              "description": "Active source opacity."
+            },
+            {
+              "name": "--c2-reorder-list__placeholder--border-width",
+              "type": "length",
+              "default": "2px",
+              "part": "placeholder",
+              "property": "border-width",
+              "description": "Destination border width."
+            },
+            {
+              "name": "--c2-reorder-list__placeholder--border-style",
+              "type": "string",
+              "default": "dashed",
+              "part": "placeholder",
+              "property": "border-style",
+              "description": "Destination border style."
+            },
+            {
+              "name": "--c2-reorder-list__placeholder--border-color",
+              "type": "color",
+              "default": "#2563eb",
+              "part": "placeholder",
+              "property": "border-color",
+              "description": "Destination border color."
+            },
+            {
+              "name": "--c2-reorder-list__dragging-item--opacity",
+              "type": "number",
+              "default": "0.92",
+              "part": "dragging-item",
+              "property": "opacity",
+              "description": "Pointer-preview opacity."
+            },
+            {
+              "name": "--c2-reorder-list__dragging-item--box-shadow",
+              "type": "box-shadow",
+              "default": "0 12px 28px rgb(15 23 42 / 24%)",
+              "part": "dragging-item",
+              "property": "box-shadow",
+              "description": "Pointer-preview shadow."
+            },
+            {
+              "name": "--c2-reorder-list__motion--duration",
+              "type": "time",
+              "default": "160ms",
+              "part": "motion",
+              "property": "duration",
+              "description": "Decorative transition duration; zero under reduced motion."
+            },
+            {
+              "name": "--c2-reorder-list__motion--timing-function",
+              "type": "easing-function",
+              "default": "ease",
+              "part": "motion",
+              "property": "timing-function",
+              "description": "Decorative transition easing."
+            }
+          ]
         }
       ],
       "composition": {
@@ -33409,8 +33837,50 @@
         "import": "import '@c2n/reorder-list'",
         "importClass": "import { ReorderList } from '@c2n/reorder-list'"
       },
-      "examples": [],
-      "hasGallery": false
+      "examples": [
+        {
+          "kind": "usage",
+          "label": "Deployment queue",
+          "html": "\n<c2-reorder-list client:only=\"lit\" class=\"release-queue\" editable aria-label=\"Deployment queue\">\n  <div class=\"release-task\" data-reorder-key=\"scope\">Confirm scope</div>\n  <div class=\"release-task\" data-reorder-key=\"changelog\">Update changelog</div>\n  <div class=\"release-task\" data-reorder-key=\"test\">Run tests</div>\n  <div class=\"release-task\" data-reorder-key=\"build\">Build packages</div>\n  <div class=\"release-task\" data-reorder-key=\"publish\">Publish packages</div>\n  <div class=\"release-task\" data-reorder-key=\"verify\">Verify deployment</div>\n</c2-reorder-list>",
+          "css": ".release-queue {\n  --c2-reorder-list--container-gap: 6px;\n}\n.release-task {\n  padding: 12px;\n  border: 1px solid #d4d4d8;\n  border-radius: 8px;\n  background: white;\n  color: #18181b;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Default",
+          "section": "Presets",
+          "description": "Default Presets example for c2-reorder-list.",
+          "isDefault": true,
+          "tags": [
+            "c2-reorder-list"
+          ],
+          "html": "<c2-reorder-list client:only=\"lit\" editable aria-label=\"Release queue\">\n  <div data-reorder-key=\"verify\" data-reorder-label=\"Verify release\">Verify release</div>\n  <div data-fixed data-reorder-key=\"approval\" data-reorder-label=\"Required approval\">Required approval · pinned</div>\n  <div data-reorder-key=\"publish\" data-reorder-label=\"Publish package\">Publish package</div>\n</c2-reorder-list>"
+        },
+        {
+          "kind": "gallery",
+          "label": "Operations queue",
+          "section": "Presets",
+          "description": "Operations queue Presets example for c2-reorder-list.",
+          "isDefault": false,
+          "tags": [
+            "c2-reorder-list"
+          ],
+          "html": "<c2-reorder-list client:only=\"lit\" class=\"operations-queue\" editable aria-label=\"Incident response queue\">\n  <article class=\"operation\" data-reorder-key=\"triage\" data-reorder-label=\"Triage incident\"><strong>Triage incident</strong><span>Now</span></article>\n  <article class=\"operation\" data-fixed data-reorder-key=\"review\" data-reorder-label=\"Security review\">\n    <strong>Security review</strong><span>Pinned</span>\n  </article>\n  <article class=\"operation\" data-reorder-key=\"notify\" data-reorder-label=\"Notify customers\"><strong>Notify customers</strong><span>Waiting</span></article>\n  <div class=\"operation\" slot=\"placeholder\">Drop response step here</div>\n  <div class=\"operation\" slot=\"dragging-item\">Moving response step</div>\n</c2-reorder-list>",
+          "css": ".operations-queue {\n  --c2-reorder-list--container-gap: 10px;\n  --c2-reorder-list--container-padding: 12px;\n  --c2-reorder-list__item__focus--outline-color: #7c3aed;\n  --c2-reorder-list__placeholder--border-color: #7c3aed;\n  --c2-reorder-list__dragging-item--box-shadow: 0 18px 40px rgb(76 29 149 / 28%);\n}\n.operations-queue::part(container) {\n  border: 1px solid #ddd6fe;\n  border-radius: 14px;\n  background: #faf5ff;\n}\n.operations-queue::part(item),\n.operations-queue::part(dragging-item) {\n  border-radius: 10px;\n}\n.operation {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 14px;\n  border: 1px solid #ddd6fe;\n  border-radius: 10px;\n  background: white;\n  color: #2e1065;\n}\n.operation[data-fixed] {\n  background: #f3e8ff;\n}"
+        },
+        {
+          "kind": "gallery",
+          "label": "Compact backlog",
+          "section": "Presets",
+          "description": "Compact backlog Presets example for c2-reorder-list.",
+          "isDefault": false,
+          "tags": [
+            "c2-reorder-list"
+          ],
+          "html": "<c2-reorder-list client:only=\"lit\" class=\"compact-backlog\" editable aria-label=\"Compact backlog\">\n  <span data-reorder-key=\"one\">Confirm scope</span>\n  <span data-reorder-key=\"two\">Ship implementation</span>\n  <span data-reorder-key=\"three\">Review metrics</span>\n</c2-reorder-list>",
+          "css": ".compact-backlog {\n  --c2-reorder-list--container-gap: 4px;\n  --c2-reorder-list--item-padding: 8px 10px;\n  --c2-reorder-list__motion--duration: 100ms;\n}\n.compact-backlog::part(item) {\n  border: 1px solid #d4d4d8;\n  border-radius: 7px;\n  background: white;\n}"
+        }
+      ],
+      "hasGallery": true
     },
     "scatter-chart": {
       "id": "scatter-chart",
@@ -33637,7 +34107,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -33645,11 +34115,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -35573,15 +36043,15 @@
           "cssParts": [
             {
               "name": "seperator",
-              "description": "Shadow DOM styling hook for the seperator element."
+              "description": "The outer separator layout container."
             },
             {
               "name": "line",
-              "description": "Shadow DOM styling hook for the line element."
+              "description": "Each line segment on either side of the optional label."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "Container for the optional default slot."
             }
           ],
           "cssProperties": [
@@ -36010,23 +36480,23 @@
           "cssParts": [
             {
               "name": "panel",
-              "description": "Shadow DOM styling hook for the panel element."
+              "description": "The sheet surface positioned over the overlay."
             },
             {
               "name": "header",
-              "description": "Shadow DOM styling hook for the header element."
+              "description": "Header containing the title and optional close button."
             },
             {
               "name": "close",
-              "description": "Shadow DOM styling hook for the close element."
+              "description": "The native close button."
             },
             {
               "name": "body",
-              "description": "Shadow DOM styling hook for the body element."
+              "description": "Scrollable container for the default slot."
             },
             {
               "name": "footer",
-              "description": "Shadow DOM styling hook for the footer element."
+              "description": "Container wrapping the assigned `footer` slot actions."
             }
           ],
           "cssProperties": [
@@ -37150,7 +37620,7 @@
           "cssParts": [
             {
               "name": "block",
-              "description": "Shadow DOM styling hook for the block element."
+              "description": "Each animated placeholder block."
             }
           ],
           "cssProperties": [
@@ -37565,19 +38035,19 @@
           "cssParts": [
             {
               "name": "track",
-              "description": "Shadow DOM styling hook for the track element."
+              "description": "The complete slider track."
             },
             {
               "name": "fill",
-              "description": "Shadow DOM styling hook for the fill element."
+              "description": "The track segment before the current value."
             },
             {
               "name": "thumb",
-              "description": "Shadow DOM styling hook for the thumb element."
+              "description": "The draggable value handle."
             },
             {
               "name": "value",
-              "description": "Shadow DOM styling hook for the value element."
+              "description": "The value bubble shown above the thumb when `show-value` is set."
             }
           ],
           "cssProperties": [
@@ -38259,7 +38729,7 @@
             },
             {
               "name": "tooltip",
-              "description": "The tooltip bubble."
+              "description": "Component-owned bubble containing the `tooltip` slot and its generated fallback content."
             },
             {
               "name": "actions",
@@ -38267,11 +38737,11 @@
             },
             {
               "name": "state",
-              "description": "The empty, loading or error message layer."
+              "description": "Shared message layer containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "legend",
-              "description": "The legend container."
+              "description": "Component-owned container wrapping the `legend` slot and generated legend fallback."
             },
             {
               "name": "legend-item",
@@ -39163,19 +39633,19 @@
           "cssParts": [
             {
               "name": "ring",
-              "description": "Shadow DOM styling hook for the ring element."
+              "description": "The SVG containing the spinner track and animated arc."
             },
             {
               "name": "track",
-              "description": "Shadow DOM styling hook for the track element."
+              "description": "The stationary background circle."
             },
             {
               "name": "arc",
-              "description": "Shadow DOM styling hook for the arc element."
+              "description": "The animated foreground circle."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "Container for the optional loading text."
             }
           ],
           "cssProperties": [
@@ -39549,27 +40019,27 @@
           "cssParts": [
             {
               "name": "container",
-              "description": "Shadow DOM styling hook for the container element."
+              "description": "The outer statistic layout container."
             },
             {
               "name": "icon",
-              "description": "Shadow DOM styling hook for the icon element."
+              "description": "Container wrapping the assigned leading `icon` slot."
             },
             {
               "name": "value",
-              "description": "Shadow DOM styling hook for the value element."
+              "description": "Container wrapping the assigned primary `value` slot."
             },
             {
               "name": "trend",
-              "description": "Shadow DOM styling hook for the trend element."
+              "description": "Container wrapping the assigned `trend` slot badge or text."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "Container wrapping the assigned statistic `label` slot."
             },
             {
               "name": "description",
-              "description": "Shadow DOM styling hook for the description element."
+              "description": "Container wrapping the assigned supporting `description` slot."
             }
           ],
           "cssProperties": [
@@ -39945,7 +40415,28 @@
             }
           ],
           "events": [],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "media",
+              "description": "Container for the `media` slot and its status-icon fallback; always present."
+            },
+            {
+              "name": "title",
+              "description": "Heading region for the `title` slot or `heading` fallback; hidden when both are empty."
+            },
+            {
+              "name": "description",
+              "description": "Supporting-copy region for the `description` slot or attribute fallback; hidden when both are empty."
+            },
+            {
+              "name": "content",
+              "description": "Additional-details region around the `content` slot; hidden while the slot is empty."
+            },
+            {
+              "name": "actions",
+              "description": "Action row around the `actions` slot; hidden while the slot is empty."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-status-panel__container--width",
@@ -40584,11 +41075,11 @@
             },
             {
               "name": "toggle",
-              "description": "The disclosure chevron of a group."
+              "description": "Disclosure region containing the assigned `toggle` slot for a group."
             },
             {
               "name": "marker",
-              "description": "The round marker at the start of the row."
+              "description": "Round marker region containing the `marker` slot or status fallback at the start of the row."
             },
             {
               "name": "rail",
@@ -40596,15 +41087,15 @@
             },
             {
               "name": "label",
-              "description": "The primary text."
+              "description": "Primary-text region containing the `label` slot or property fallback."
             },
             {
               "name": "detail",
-              "description": "The dimmed secondary text."
+              "description": "Secondary-text region containing the `detail` slot or property fallback."
             },
             {
               "name": "trailing",
-              "description": "The text at the end of the row."
+              "description": "End-aligned text region containing the `trailing` slot or property fallback."
             },
             {
               "name": "children",
@@ -41358,31 +41849,31 @@
           "cssParts": [
             {
               "name": "control",
-              "description": "Shadow DOM styling hook for the control element."
+              "description": "The switch control, excluding its label and description."
             },
             {
               "name": "track",
-              "description": "Shadow DOM styling hook for the track element."
+              "description": "The switch track."
             },
             {
               "name": "thumb",
-              "description": "Shadow DOM styling hook for the thumb element."
+              "description": "The movable switch thumb."
             },
             {
               "name": "unchecked-icon",
-              "description": "Shadow DOM styling hook for the unchecked icon element."
+              "description": "Icon region containing the `unchecked-icon` slot inside the thumb while off."
             },
             {
               "name": "checked-icon",
-              "description": "Shadow DOM styling hook for the checked icon element."
+              "description": "Icon region containing the `checked-icon` slot inside the thumb while on."
             },
             {
               "name": "label",
-              "description": "Shadow DOM styling hook for the label element."
+              "description": "The switch label."
             },
             {
               "name": "description",
-              "description": "Shadow DOM styling hook for the description element."
+              "description": "Supporting-text region containing the `description` slot below the label."
             }
           ],
           "cssProperties": [
@@ -42067,6 +42558,10 @@
               "name": "error",
               "description": "Replaces the built-in message shown when `error` is set."
             },
+            {
+              "name": "fallback",
+              "description": "Meaningful server-rendered table content. It remains visible before custom-element upgrade and is retained in the light DOM but hidden after the interactive grid mounts, avoiding duplicate client content."
+            },
             {
               "name": "cell:{rowKey}:{field}",
               "description": "Body of one cell of a column marked `cell-slot`, e.g. `slot=\"cell:AAPL:change\"`. Lets a framework render a cell with its own template language instead of a `renderCell` function; the column's `renderCell` or formatted value stays as the fallback."
@@ -42107,67 +42602,67 @@
           "cssParts": [
             {
               "name": "toolbar",
-              "description": "Shadow DOM styling hook for the toolbar element."
+              "description": "Row above the grid containing the `toolbar` slot."
             },
             {
               "name": "viewport",
-              "description": "Shadow DOM styling hook for the viewport element."
+              "description": "Scrollable container around the grid."
             },
             {
               "name": "grid",
-              "description": "Shadow DOM styling hook for the grid element."
+              "description": "The ARIA grid containing the header and body rows."
             },
             {
               "name": "footer",
-              "description": "Shadow DOM styling hook for the footer element."
+              "description": "Row below the grid containing the `footer` slot."
             },
             {
               "name": "state",
-              "description": "Shadow DOM styling hook for the state element."
+              "description": "Shared cell containing the `empty`, `loading`, or `error` slot and its fallback state."
             },
             {
               "name": "header-row",
-              "description": "Shadow DOM styling hook for the header row element."
+              "description": "The grid header row."
             },
             {
               "name": "header-cell",
-              "description": "Shadow DOM styling hook for the header cell element."
+              "description": "Every column header cell."
             },
             {
               "name": "selection-header-cell",
-              "description": "Shadow DOM styling hook for the selection header cell element."
+              "description": "The header cell containing the select-all checkbox."
             },
             {
               "name": "resizer",
-              "description": "Shadow DOM styling hook for the resizer element."
+              "description": "The pointer target used to resize a column."
             },
             {
               "name": "sort-icon",
-              "description": "Shadow DOM styling hook for the sort icon element."
+              "description": "The sort-direction indicator in a sortable header."
             },
             {
               "name": "cell",
-              "description": "Shadow DOM styling hook for the cell element."
+              "description": "Every body grid cell."
             },
             {
               "name": "selection-cell",
-              "description": "Shadow DOM styling hook for the selection cell element."
+              "description": "A body cell containing a row-selection checkbox."
             },
             {
               "name": "skeleton",
-              "description": "Shadow DOM styling hook for the skeleton element."
+              "description": "Placeholder displayed while a remote row is loading."
             },
             {
               "name": "cell-content",
-              "description": "Shadow DOM styling hook for the cell content element."
+              "description": "The content wrapper inside a body cell."
             },
             {
               "name": "row",
-              "description": "Shadow DOM styling hook for the row element."
+              "description": "Every rendered body row."
             },
             {
               "name": "row-selected",
-              "description": "Shadow DOM styling hook for the row selected element."
+              "description": "A body row while it is selected; exposed in addition to `row`."
             }
           ],
           "cssProperties": [
@@ -42754,12 +43249,12 @@
             {
               "name": "sortable",
               "type": "boolean | undefined",
-              "description": "Lets the user sort by this column. Defaults to the table's `sortable`."
+              "description": "Lets the user sort by this column. Absent inherits the table's `sortable`; `sortable=\"false\"` opts out."
             },
             {
               "name": "resizable",
               "type": "boolean | undefined",
-              "description": "Lets the user drag the column's trailing edge. Defaults to the table's `resizable`."
+              "description": "Lets the user drag the column's trailing edge. Absent inherits the table's `resizable`; `resizable=\"false\"` opts out."
             },
             {
               "name": "pinned",
@@ -44108,7 +44603,7 @@
           "description": "A single-line input wrapped in a themeable field. The native `<input>` keeps its behaviour (`type`, `name`,\n`autocomplete`, `maxlength`, `pattern`, `input`/`change` events); the field adds `prefix-icon` / `suffix-icon` slots\nsized by `--c2-text-field__icon--size`, an optional clear button (`clearable`), helper text (`help`), an error\nmessage (`error` + `error-text`), a character counter when `maxlength` is set, and a `help-icon` slot beside the\nfield. Pair it with `c2-label` for a caption. Give the host a `width`: the field fills it.",
           "attributes": [
             {
-              "name": "readOnly",
+              "name": "readonly",
               "type": "boolean",
               "default": "false",
               "description": "Shows the value but refuses edits. Rendered on a light grey background."
@@ -44126,13 +44621,13 @@
               "description": "Marks the field invalid: red border and, when set, `error-text` replaces the helper text."
             },
             {
-              "name": "maxLength",
+              "name": "maxlength",
               "type": "number",
               "default": "-1",
               "description": "Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field."
             },
             {
-              "name": "minLength",
+              "name": "minlength",
               "type": "number",
               "default": "-1",
               "description": "Minimum number of characters, forwarded to the input."
@@ -44761,7 +45256,7 @@
           "description": "A `c2-text-field` that always shows a clear button while it has a value. Prefer `c2-text-field` with the\n`clearable` attribute; this element remains for markup that cannot toggle attributes. Inherits every attribute,\nslot, event and CSS variable of `c2-text-field`.",
           "attributes": [
             {
-              "name": "readOnly",
+              "name": "readonly",
               "type": "boolean",
               "default": "false",
               "description": "Shows the value but refuses edits. Rendered on a light grey background."
@@ -44779,13 +45274,13 @@
               "description": "Marks the field invalid: red border and, when set, `error-text` replaces the helper text."
             },
             {
-              "name": "maxLength",
+              "name": "maxlength",
               "type": "number",
               "default": "-1",
               "description": "Maximum number of characters. Forwarded to the input and shown as a `n / max` counter under the field."
             },
             {
-              "name": "minLength",
+              "name": "minlength",
               "type": "number",
               "default": "-1",
               "description": "Minimum number of characters, forwarded to the input."
@@ -46130,7 +46625,7 @@
               "description": "Prevents editing and removes the control from keyboard navigation."
             },
             {
-              "name": "readOnly",
+              "name": "readonly",
               "type": "boolean",
               "default": "false",
               "description": "Prevents editing while allowing selection."
@@ -46142,13 +46637,13 @@
               "description": "Requires a nonempty value for native validation."
             },
             {
-              "name": "maxLength",
+              "name": "maxlength",
               "type": "number",
               "default": "-1",
               "description": "Maximum character count; -1 means unlimited."
             },
             {
-              "name": "minLength",
+              "name": "minlength",
               "type": "number",
               "default": "-1",
               "description": "Minimum character count; -1 means no minimum."
@@ -46198,11 +46693,11 @@
           "cssParts": [
             {
               "name": "textarea",
-              "description": "Shadow DOM styling hook for the textarea element."
+              "description": "The native textarea control."
             },
             {
               "name": "supporting-text",
-              "description": "Shadow DOM styling hook for the supporting text element."
+              "description": "Container wrapping the `supporting-text` slot or generated help and validation fallback."
             }
           ],
           "cssProperties": [
@@ -46610,7 +47105,7 @@
             },
             {
               "name": "check",
-              "description": "The mark beside the selected row."
+              "description": "Marker region containing the `check` slot or fallback beside the selected row."
             }
           ],
           "cssProperties": [
@@ -47199,35 +47694,35 @@
           "cssParts": [
             {
               "name": "container",
-              "description": "Shadow DOM styling hook for the container element."
+              "description": "The notification card surface."
             },
             {
               "name": "icon",
-              "description": "Shadow DOM styling hook for the icon element."
+              "description": "Container wrapping the assigned leading `icon` slot."
             },
             {
               "name": "heading",
-              "description": "Shadow DOM styling hook for the heading element."
+              "description": "The optional notification heading."
             },
             {
               "name": "message",
-              "description": "Shadow DOM styling hook for the message element."
+              "description": "Container for the notification message."
             },
             {
               "name": "action",
-              "description": "Shadow DOM styling hook for the action element."
+              "description": "Button region containing the optional assigned `action` slot."
             },
             {
               "name": "close",
-              "description": "Shadow DOM styling hook for the close element."
+              "description": "The dismiss button."
             },
             {
               "name": "progress",
-              "description": "Shadow DOM styling hook for the progress element."
+              "description": "The countdown track shown while progress is enabled."
             },
             {
               "name": "progress-bar",
-              "description": "Shadow DOM styling hook for the progress bar element."
+              "description": "The remaining-time fill inside the countdown track."
             }
           ],
           "cssProperties": [
@@ -47492,7 +47987,7 @@
           "cssParts": [
             {
               "name": "stack",
-              "description": "Shadow DOM styling hook for the stack element."
+              "description": "The live-region container that positions and stacks visible toasts."
             }
           ],
           "cssProperties": [
@@ -48587,11 +49082,11 @@
             },
             {
               "name": "label",
-              "description": "The label box."
+              "description": "Text box containing the `label` slot or label-property fallback."
             },
             {
               "name": "actions",
-              "description": "The trailing actions box."
+              "description": "Trailing box wrapping the assigned `actions` slot."
             },
             {
               "name": "group",
@@ -48599,7 +49094,7 @@
             },
             {
               "name": "checkbox",
-              "description": "Shadow DOM styling hook for the checkbox element."
+              "description": "The selection checkbox rendered when checkbox selection is enabled."
             }
           ],
           "cssProperties": [
@@ -49226,7 +49721,40 @@
               "description": "Fired after an item is removed or an active upload is cancelled."
             }
           ],
-          "cssParts": [],
+          "cssParts": [
+            {
+              "name": "dropzone",
+              "description": "Interactive drop-zone region containing the icon, prompt, and hint."
+            },
+            {
+              "name": "drop-icon",
+              "description": "Icon boundary wrapping the `drop-icon` slot and fallback icon."
+            },
+            {
+              "name": "prompt",
+              "description": "Instruction region wrapping the `prompt` slot and fallback prompt."
+            },
+            {
+              "name": "hint",
+              "description": "Supporting-text region wrapping the `hint` slot and generated fallback hint."
+            },
+            {
+              "name": "action",
+              "description": "Compact picker label boundary wrapping the `action` slot and fallback label."
+            },
+            {
+              "name": "empty",
+              "description": "Empty-state boundary exposing the `empty` slot."
+            },
+            {
+              "name": "errors",
+              "description": "Validation-error status region."
+            },
+            {
+              "name": "list",
+              "description": "Selected-file list region."
+            }
+          ],
           "cssProperties": [
             {
               "name": "--c2-upload--width",
@@ -49769,41 +50297,41 @@
             }
           ],
           "cssParts": [
-            {
-              "name": "highlight",
-              "description": "Shadow DOM styling hook for the highlight element."
-            },
             {
               "name": "search",
-              "description": "Shadow DOM styling hook for the search element."
+              "description": "Header row containing the built-in search field and the `search` and `toolbar` slots."
             },
             {
               "name": "viewport",
-              "description": "Shadow DOM styling hook for the viewport element."
+              "description": "Scroll container that holds the listbox and its empty, loading or error state."
             },
             {
               "name": "items",
-              "description": "Shadow DOM styling hook for the items element."
+              "description": "Inner listbox containing the rendered rows and virtual-scroll spacers."
             },
             {
-              "name": "footer",
-              "description": "Shadow DOM styling hook for the footer element."
+              "name": "item",
+              "description": "Every rendered `c2-list-item`, including loading placeholders."
             },
             {
-              "name": "state",
-              "description": "Shadow DOM styling hook for the state element."
+              "name": "item-selected",
+              "description": "A rendered item while it is selected; exposed in addition to `item`."
             },
             {
-              "name": "item",
-              "description": "Shadow DOM styling hook for the item element."
+              "name": "skeleton",
+              "description": "Placeholder shown inside an item while its remote data block is loading."
             },
             {
-              "name": "skeleton",
-              "description": "Shadow DOM styling hook for the skeleton element."
+              "name": "state",
+              "description": "Shared container for the `empty`, `loading`, or `error` slot and its fallback message."
             },
             {
-              "name": "item-selected",
-              "description": "Shadow DOM styling hook for the item selected element."
+              "name": "highlight",
+              "description": "A `<mark>` around text that matches the active search query."
+            },
+            {
+              "name": "footer",
+              "description": "Footer row containing the `footer` slot."
             }
           ],
           "cssProperties": [
@@ -50316,7 +50844,6 @@
     "c2-date-input": "date-input",
     "c2-date-selector": "date-selector",
     "c2-details": "details",
-    "c2-dropdown-list": "dropdown-list",
     "c2-gauge-chart": "gauge-chart",
     "c2-header": "header",
     "c2-icon-button": "icon-button",
@@ -50402,7 +50929,6 @@
     "@c2n/date-input": "date-input",
     "@c2n/date-selector": "date-selector",
     "@c2n/details": "details",
-    "@c2n/dropdown-list": "dropdown-list",
     "@c2n/feather-icons": "feather-icons",
     "@c2n/header": "header",
     "@c2n/icon-button": "icon-button",
@@ -50512,7 +51038,7 @@
         "light": "#ffffff",
         "dark": "#18181b",
         "description": "Default surface of inputs, lists, cards, dialogs.",
-        "usedBy": 48
+        "usedBy": 49
       },
       {
         "name": "--c2-theme--color-surface-container-low",
@@ -50560,7 +51086,7 @@
         "light": "#e4e4e7",
         "dark": "#27272a",
         "description": "Hairline dividers and light borders.",
-        "usedBy": 74
+        "usedBy": 79
       },
       {
         "name": "--c2-theme--color-outline-strong",
@@ -50656,7 +51182,7 @@
         "category": "radius",
         "light": "8px",
         "description": "Large radius: cards, panels, popovers.",
-        "usedBy": 68
+        "usedBy": 72
       },
       {
         "name": "--c2-theme--radius-xl",
@@ -51007,6 +51533,16 @@
       "--c2-chat-message__header__title--font-weight": "--c2-theme--font-weight-semibold",
       "--c2-chat-message__time--color": "--c2-theme--color-on-surface-variant",
       "--c2-chat-message__time--font-size": "--c2-theme--font-size-sm",
+      "--c2-chatbot--border-top-left-radius": "--c2-theme--radius-lg",
+      "--c2-chatbot--border-top-right-radius": "--c2-theme--radius-lg",
+      "--c2-chatbot--border-bottom-left-radius": "--c2-theme--radius-lg",
+      "--c2-chatbot--border-bottom-right-radius": "--c2-theme--radius-lg",
+      "--c2-chatbot--border-top": "--c2-theme--color-outline-variant",
+      "--c2-chatbot--border-right": "--c2-theme--color-outline-variant",
+      "--c2-chatbot--border-bottom": "--c2-theme--color-outline-variant",
+      "--c2-chatbot--border-left": "--c2-theme--color-outline-variant",
+      "--c2-chatbot__header--background": "--c2-theme--color-surface",
+      "--c2-chatbot__header--border-bottom": "--c2-theme--color-outline-variant",
       "--c2-checkbox__container--border-top-left-radius": "--c2-theme--radius-sm",
       "--c2-checkbox__container--border-top-right-radius": "--c2-theme--radius-sm",
       "--c2-checkbox__container--border-bottom-left-radius": "--c2-theme--radius-sm",
@@ -51751,6 +52287,6 @@
     "workflow": "# The c2n application workflow\n\nBuild screens from `@c2n/*` web components with as little code as possible. Three layers, applied in this order.\n\n## 1. Theme once\n\n- Install `@c2n/theme` next to the component packages you use.\n- Import `@c2n/theme/theme.css` once at the application root (tokens + base theme). If the app already owns a token system, import only `@c2n/theme/base.css` and bridge your tokens onto the `--c2-theme--*` names.\n- Override the tokens that differ from the defaults on `:root` (light) and under your dark-mode selector. About 35 tokens (`--c2-theme--color-primary`, `--c2-theme--radius-md`, `--c2-theme--font-family`, `--c2-theme--focus-ring`, …) drive every component.\n- Never set component variables globally when a token exists for the job.\n\n## 2. Use the tags directly\n\n- Register an element with a side-effect import (`import '@c2n/button'`) at the application entry, or in the module that renders it.\n- Write plain markup: `<c2-button>Save</c2-button>`. Attributes, slots and events come from the component API (MCP `get_component`, or `node_modules/@c2n/<name>/custom-elements.json`).\n- Retrieve `get_examples` next: begin from the unmodified Default sample, then select gallery examples by use case. Use `get_presets` when structured values are more useful than a complete pattern.\n- Icons are components: `c2-feather-<name>` from `@c2n/feather-icons/icons/<name>.js`, sized and coloured through `--c2-feather-icon--size|color|stroke-width`.\n- A component that appears once with the themed default look needs nothing else.\n\n## 3. Name what repeats\n\nThe decision rule, cheapest first:\n\n| Situation                                                                         | Do this                                                                                                      |\n| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |\n| The element appears once, default look is fine                                    | plain tag                                                                                                    |\n| Same look repeats, markup is otherwise plain                                      | **CSS-class variant**: a class that sets `--c2-<component>__…` variables                                     |\n| Same look **and** the same attributes / slots / accessible name repeat            | **wrapper component** in your framework (Astro/React/Vue/Lit) that renders the c2 element                    |\n| The variant must be its own tag (used from strings, other Lit templates, shipped) | **Lit subclass** of the component with the variables baked into `static styles`                              |\n| Several c2 components plus some logic repeat                                      | **composed component**: children's variables set on `:host`/a class, attributes forwarded, events re-emitted |\n| No c2 component fits                                                              | app-level component styled with the same `--c2-theme--*` tokens; avoid patching installed packages locally   |\n\nEvery variant lives in one directory (`src/components/ui/`, `src/ui/`…), one file per variant, under the app's own prefix (`app-*`, `site-*`, `my-*`), never `c2-*`.\n\n## 4. Verify\n\n- Every element used is registered (no `HTMLUnknownElement`, no empty tags).\n- `@c2n/theme` is imported exactly once; tokens overridden on `:root` and the dark selector.\n- Prefer CSS custom properties. Every `::part()` selector must name a CSS part documented by `get_component`; no repeated inline `style=\"--c2-…\"`.\n- Every variable, attribute, slot and event name exists in the component API.\n- Variant tags contain a hyphen and do not start with `c2-`.\n- Light and dark both look right; build, lint and type-check pass.\n",
     "theming": "# Theming c2n components\n\n## Layers\n\n1. **Tokens** `--c2-theme--<name>` (from `@c2n/theme/tokens.css`, ~35 of them). Set by the application.\n2. **Base theme** `@c2n/theme/base.css`: `--c2-<component>__<part>--<prop>: var(--c2-theme--<token>, <component default>)` on `:root`/`:host` for every mapped component variable. Generated from the component manifests.\n3. **Component variables** `--c2-<component>__<part>[__<state>]--<property>`: the fine-grained escape hatch. Set on an element, a class or any ancestor; they always win over the base theme.\n4. **Variant components** built from 2 and 3.\n\n## Install\n\n```ts\nimport '@c2n/theme/theme.css' // tokens + base theme, once\n```\n\n```css\n:root {\n  --c2-theme--color-primary: #7c3aed;\n  --c2-theme--color-primary-hover: #6d28d9;\n  --c2-theme--radius-md: 10px;\n  --c2-theme--font-family: 'Inter', system-ui, sans-serif;\n}\n```\n\n## Bring your own tokens\n\n```css\n@import '@c2n/theme/base.css';\n:root {\n  --c2-theme--color-primary: var(--brand-600);\n  --c2-theme--color-on-primary: var(--brand-on-600);\n  --c2-theme--color-surface: var(--surface);\n  --c2-theme--color-on-surface: var(--text);\n  --c2-theme--color-outline: var(--border);\n  --c2-theme--radius-md: var(--radius);\n  --c2-theme--font-family: var(--font-sans);\n  --c2-theme--focus-ring: 2px solid var(--brand-600);\n}\n```\n\nDark mode then follows the app's own switch because the bridged values flip.\n\n## Dark mode with the shipped tokens\n\n`tokens.css` sets light values on `:root` and dark values under `[data-theme='dark']` and `.c2-dark`, with `prefers-color-scheme: dark` as the fallback when no `data-theme` attribute is present. `data-theme=\"light\"` / `.c2-light` opts a subtree out. Selectors are not tied to the root element, so any subtree can be inverted.\n\n## Token groups\n\n- Colour roles: `color-primary`, `color-primary-hover`, `color-primary-active`, `color-on-primary`, `color-primary-container`, `color-surface`, `color-surface-container-low`, `color-surface-container`, `color-on-surface`, `color-on-surface-variant`, `color-outline`, `color-outline-variant`, `color-outline-strong`, `color-error`, `color-scrim`, `color-inverse-surface`, `color-on-inverse-surface`.\n- Typography: `font-family` (unset by default: components inherit the page font), `font-size-sm|md`, `font-weight-medium|semibold`.\n- Shape: `radius-sm|md|lg|xl|full`.\n- Borders: `border-width`, `border` (composite: the whole resting border shorthand; falls back to `border-width solid color-outline`).\n- Interaction: `focus-ring` (outline shorthand), `disabled-opacity`, `motion-scale` (multiplies every duration; `0` disables motion).\n- Elevation: `shadow-md`, `shadow-lg`.\n\nComposite tokens wrap their primitives: `var(--c2-theme--border, var(--c2-theme--border-width, 1px) solid var(--c2-theme--color-outline, #bcbcc6))`, so set the shorthand or just the colour.\n\n## What the base theme does not cover\n\nSizes, paddings, gaps, identity colours (avatar fallbacks), status colours, the code viewer's syntax theme, and variables without a default (they inherit). Use component variables or a variant for those. `@c2n/theme/report.json` lists what is mapped per package; MCP `get_theme` with a `tag` shows the mapping of one component.\n\n## Grammar and states\n\n`--c2-<component>__<part>[__<state>]--<property>`: `__` separates component / part / state, `--` separates the CSS property. States: `hover`, `active`, `focus`, `selected`, `disabled`, `open`, `error`, `read-only`. Example: `--c2-checkbox__container__selected--background-color`.\n",
     "variant-components": "# Variant and composed components\n\nA variant is one c2 component with a fixed look (CSS variables) and, sometimes, fixed attributes, slots or accessible name. A composed component is several c2 components plus glue. Both normally set children's CSS variables on the host element or a class. Use `::part()` only for a part documented by `get_component` and only when the public variables cannot express the change.\n\n## Shape 1: CSS-class variant\n\n```css\n.danger-button {\n  --c2-button__container--background-color: var(--c2-theme--color-error);\n  --c2-button__container__hover--background-color: color-mix(in srgb, var(--c2-theme--color-error), black 12%);\n}\n```\n\n```html\n<c2-button class=\"danger-button\">Delete</c2-button>\n```\n\nUse when only the look differs. Keep variant classes in one stylesheet (`ui/variants.css`). Read variable names from the component API; do not invent them.\n\n## Shape 2: wrapper component\n\nWhen attributes, slots or the accessible name repeat as well. Framework-native, zero runtime cost beyond the c2 element. Example (Astro; the same idea in React/Vue/Svelte):\n\n```astro\n---\n// SiteIconButton.astro — c2-icon-button with the app's size and a tooltip that defaults to the label.\ninterface Props {\n  label: string\n  size?: 'sm' | 'md'\n  class?: string\n  [attr: string]: unknown\n}\nconst { label, size = 'md', class: className = '', ...rest } = Astro.props\n---\n\n<c2-icon-button class={`site-icon-button site-icon-button--${size} ${className}`} aria-label={label} tooltip={label} {...rest}>\n  <slot />\n</c2-icon-button>\n<style is:global>\n  .site-icon-button {\n    --c2-icon-button--border-radius: var(--c2-theme--radius-sm);\n    --c2-icon-button__hover--background-color: var(--c2-theme--color-surface-container);\n  }\n  .site-icon-button--sm {\n    --c2-icon-button__state-layer--size: 30px;\n    --c2-icon-button__icon--width: 16px;\n    --c2-icon-button__icon--height: 16px;\n  }\n  .site-icon-button--md {\n    --c2-icon-button__state-layer--size: 36px;\n    --c2-icon-button__icon--width: 18px;\n    --c2-icon-button__icon--height: 18px;\n  }\n</style>\n```\n\nForward unknown props as attributes (`{...rest}`) so callers keep the full c2 API (`disabled`, `data-*`, `aria-*`).\n\n## Shape 3: Lit subclass\n\nWhen the variant must be a tag of its own. The docs studio's Code tab and MCP `generate_variant` produce this:\n\n```ts\nimport { css } from 'lit'\nimport { Button } from '@c2n/button'\n\nexport class DangerButton extends Button {\n  static override styles = [\n    Button.styles,\n    css`\n      :host {\n        --c2-button__container--background-color: var(--c2-theme--color-error);\n      }\n    `,\n  ]\n  override connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('running', '') // fixed attributes go here\n  }\n}\nif (!customElements.get('app-danger-button')) customElements.define('app-danger-button', DangerButton)\n```\n\nImport the class from the module that defines the element (`@c2n/tabs/tab.js` for `c2-tab`, `@c2n/feather-icons/icons/<name>.js` for icons). Importing it also registers the original `c2-*` tag, which is fine. Never `customElements.define` a `c2-` name.\nGuard registration with `customElements.get()` so development HMR or repeated module evaluation cannot define the same tag twice.\n\n## Composed components\n\nSeveral c2 components and some logic repeat: a search field (`c2-text-field` + `c2-list`), a settings dialog (`c2-modal` + form controls), a toolbar (`c2-icon-button`s + `c2-tooltip`s).\n\n- Set the children's variables on the composed component's class or `:host` (custom properties inherit through shadow boundaries): `.search-palette__field { --c2-text-field--border-top: none; }`.\n- Forward the attributes callers should control as properties/attributes of the composed component.\n- Re-emit the child events callers need. In Lit use `redispatchEvent(this, event)` from `@c2n/core/dom-helper.js`; elsewhere `dispatchEvent(new CustomEvent(...))`.\n- Let the primitives keep their responsibilities (a `c2-modal` already traps focus, closes on Escape and backdrop click, locks scrolling and restores focus): write only the glue.\n- Declare composition in JSDoc (`@internalcomponent c2-list`, `@slotcomponent c2-list-item`) when the composed component is itself a Lit element with a manifest.\n\n## Naming and placement\n\n- Own prefix: `app-*`, `site-*`, `my-*`. A custom element name must contain a hyphen.\n- One file per variant, one directory (`src/components/ui/`), exported from a barrel.\n- Three-line header comment: what it wraps, which variables it fixes, where it is used.\n",
-    "frameworks": "# Using c2n components per framework\n\nAll components are standard custom elements (Lit 3). Register with a side-effect import; then they are plain HTML.\n\n## Events (every framework)\n\nEach component that fires events exports an event map (`TableEventMap`, `SelectEventMap`, …) from the same module as its class, and declares typed `addEventListener` overloads, so the detail narrows with no cast:\n\n```ts\ntable.addEventListener('selection-change', (event) => event.detail.rows) // TableRow[]\n```\n\n`EventMapOf<T>` from `@c2n/core/event-helper.js` recovers a component's map for code that is generic over elements. Use the map type instead of hand-writing `CustomEvent<{ value: string[] }>`.\n\n`selection-change` **does not bubble** — `c2-list`, `c2-select`, `c2-table`, `c2-tabs` and `c2-virtual-list` all fire it, so a listener goes on the element itself, never on an ancestor. `c2-tabs` fires `selection-change`, not `change`.\n\nEvery form-associated component fires plain `input` and `change` alongside its semantic event, which is what generic two-way bindings listen for.\n\nA duplicate `customElements.define` warns and keeps the first definition instead of throwing.\n\n## Plain HTML / Vite / any bundler\n\n```html\n<script type=\"module\">\n  import '@c2n/theme/theme.css'\n  import '@c2n/button'\n</script>\n<c2-button>Save</c2-button>\n```\n\nWith a bundler, put the imports in the entry module (`main.ts`). CSS imports work through the bundler's CSS handling.\n\n## Lit\n\nImport what you render at the top of the component module (`import '@c2n/text-field'`). Extend a component for a tag variant (`class AppField extends TextField`). Re-emit child events with `redispatchEvent` from `@c2n/core/dom-helper.js`. Set child variables in your `static styles` on `:host` or on a class.\n\n## Astro\n\n- Islands (`@astrojs/lit`): `import { Button } from '@c2n/button'` in the frontmatter, `<Button client:load>` in the template. SSR'd with declarative shadow DOM, hydrated on load. Pass **kebab-case attributes** only (a prop whose name matches an element property is set as a property and forces `defer-hydration`). A `client:only` island must not contain islands: its children end up in a `<template>` and nothing hydrates; the parent module registers the children instead.\n- Plain tags + client script: `<c2-button>` in the template and `import '@c2n/button'` inside a `<script>`. Cheaper for repeated markup (no shadow-DOM copy per instance); guard the flash with `c2-button:not(:defined) { visibility: hidden }`.\n- Scoped `<style>` does not reach elements rendered by child components; use `is:global` (or `:global()`) for variant classes.\n\n## React 19\n\nCustom elements work as JSX tags. React 19 passes primitive props as attributes and functions as event listeners for `on*` names; for custom events attach listeners with a `ref` (`ref.current.addEventListener('selection-change', …)`).\n\nTypes: `import '@c2n/<name>/react'` — one line per package, in any `.d.ts` — declares the tags in `JSX.IntrinsicElements` with props derived from the element class, plus each kebab-case attribute name (`row-key` next to `rowKey`). Do not hand-write the mapping. React 18 and older: pass attributes as strings and use refs for events and properties.\n\n**Server-rendered React (Next.js, React Router SSR):** write a camelCase property by its kebab-case attribute name — `min-width`, `expand-full`, `storage-key`, not `minWidth`. The server writes a custom element's props into the HTML verbatim, the parser lowercases them (`minwidth`) and hydration does not set properties, so the camelCase spelling reaches the element as an attribute it does not declare. The component forwards that lookalike to the real attribute and logs a warning, so the value is not lost, but the kebab-case name is what the types list and what needs no forwarding. Object and array props (`rows`) stringify on the server: set them in an effect through a ref.\n\n## Vue 3\n\nTell the compiler about the tags: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')` (in `@vitejs/plugin-vue`'s `template.compilerOptions`); without it every `c2-*` tag is treated as a Vue component and renders nothing. Register the elements at module scope before `mount()`: Vue chooses between a property and an attribute with `key in el`, so a binding on an element that has not upgraded yet falls back to an attribute.\n\nTypes: `import '@c2n/<name>/vue'` registers the tags with Volar, and `\"extends\": [..., \"@c2n/framework-types/tsconfig.vue.json\"]` supplies the matching `vueCompilerOptions` (`strictTemplates`, plus the `v-model` prop mapping so `v-model` binds `value`/`checked` rather than `modelValue`). Declare no local `vueCompilerOptions` next to it — a local one replaces the inherited object rather than merging.\n\n- Events: `@selection-change`, `@submit-message` bind by their real kebab-case name — Vue calls `addEventListener` with the name as written. The handler gets a plain `Event`, so narrow it (`(event as CustomEvent<{ value: string[] }>).detail`).\n- `v-model` works on `c2-text-field` / `c2-textarea`: on a custom element Vue compiles it to the plain-text model directive, which sets `el.value` and listens for `input`, and both components expose `value` and re-emit the native `input` event.\n- `.prop` forces a DOM property (`:value.prop=\"selected\"` for array/object values); `.attr` forces an attribute (`:align.attr=\"side\"`), needed when a property is not reflected but the component styles it with `:host([attr])` — `c2-chat-message`'s `align` is the case to know.\n- A static attribute stays an attribute, so spell it the way the component declares it (`row-key`, not `rowKey`).\n\n## Angular\n\n`CUSTOM_ELEMENTS_SCHEMA` on the component is the only required configuration. `[rows]=\"…\"` writes a property with `setProperty`; `(selection-change)` binds the event by its real name. A **static** attribute stays an attribute, so a camelCase property needs `[rowKey]=\"'id'\"` or the real attribute name (`row-key`) — the lowercase spelling `rowkey` is forwarded to `row-key` with a warning.\n\nForms: Angular's built-in value accessors match `input`/`select`/`textarea` only, so `ngModel` and `formControlName` do nothing on a c2 control without `@c2n/angular`. Add `imports: [FormsModule, ...C2_FORM_ACCESSORS]`.\n\nThe schema turns off template type checking, so `$event` is a bare `Event`: take the component's event-map type in the handler rather than `$any` at the call site.\n\n## Svelte\n\nSvelte binds attributes and `on:` events directly.\n\n## Table cells\n\n`renderCell` cannot return framework markup (it is handed to Lit). Mark the column `cell-slot` and render one light-DOM child per row into `slot=\"cell:<row key>:<field>\"`; the children stay in the document, so ordinary CSS reaches them. Requires `row-key`; `renderCell`/the column format is the fallback.\n\n## Editor support outside TypeScript\n\n`@c2n/framework-types` ships `dist/html-custom-data.json` (point `html.customData` at it for VS Code / Volar) and `dist/web-types.json` (picked up automatically by the JetBrains IDEs). Both are generated from the custom-elements manifests, and cover plain HTML, Angular templates and Vue SFCs.\n\n## Server-side rendering and static HTML\n\n- Components must not touch `document`/`window` at module scope; the c2 components guard with `isServer`.\n- Without SSR of the shadow DOM, hide unregistered tags until they upgrade: `c2-modal:not(:defined) { display: none }` (dialogs, lists) or `visibility: hidden` (layout-stable chrome).\n- Server-rendered markup only carries attributes, so spell camelCase properties as their kebab-case attribute (`row-key`); see the React section for why the camelCase spelling is lost on the way.\n- Theme CSS is plain CSS; load it in the document head so the first paint is themed.\n- \"Lit is in dev mode. Not recommended for production!\" in a dev server (Next.js, Vite) is expected: Lit publishes a `development` export condition with extra checks and warnings, and dev servers resolve it. A production build resolves the default condition and the message is gone; nothing to configure.\n"
+    "frameworks": "# Using c2n components per framework\n\nAll components are standard custom elements (Lit 3). Register with a side-effect import; then they are plain HTML.\n\n## Slots and bare text\n\nStyle elements assigned to slots with consumer-owned classes and style component-owned placement or fallback regions through documented CSS parts or custom properties. Bare text nodes cannot receive a class or be targeted directly: use inherited host styling or a documented host property, or wrap the text in an element you own. A parent part never reaches inside an assigned custom element's shadow root.\n\n## Events (every framework)\n\nEach component that fires events exports an event map (`TableEventMap`, `SelectEventMap`, …) from the same module as its class, and declares typed `addEventListener` overloads, so the detail narrows with no cast:\n\n```ts\ntable.addEventListener('selection-change', (event) => event.detail.rows) // TableRow[]\n```\n\n`EventMapOf<T>` from `@c2n/core/event-helper.js` recovers a component's map for code that is generic over elements. Use the map type instead of hand-writing `CustomEvent<{ value: string[] }>`.\n\n`selection-change` **does not bubble** — `c2-list`, `c2-select`, `c2-table`, `c2-tabs` and `c2-virtual-list` all fire it, so a listener goes on the element itself, never on an ancestor. `c2-tabs` fires `selection-change`, not `change`.\n\nEvery form-associated component fires plain `input` and `change` alongside its semantic event, which is what generic two-way bindings listen for.\n\nA duplicate `customElements.define` warns and keeps the first definition instead of throwing.\n\n## Attributes and properties (every framework)\n\nTwo conversions differ from stock Lit, and both exist so one binding is correct on the server and on the client.\n\n**A boolean attribute written as `\"false\"` is false.** Lit's default is presence-based, so `disabled=\"false\"`\nwould _enable_ the flag. Every c2n boolean reads the literal strings `\"false\"` and `\"0\"` as false; a bare\n`disabled`, or `disabled=\"\"`, is still true. This matters wherever a framework stringifies a non-boolean\nattribute name — Svelte 5 does it for every name outside the HTML boolean list, and so does any server renderer.\n\nIt also gives the table's column flags a third state: `sortable` and `resizable` on `c2-table-column` inherit the\ntable's setting when absent, and `sortable=\"false\"` is how a single column opts out.\n\n**An array or object property accepts a JSON string.** `rows`, `columns`, `items`, `options`, `series` and\n`steps` parse JSON from their attribute _and_ from a string assigned straight to the property, so\n`JSON.stringify(rows)` is a single binding that works both ways: the server writes it as an attribute, the\nclient sets it as a property, both parse. Pass the array itself where the framework can write a property. A\nstring that is not valid JSON is left untouched rather than silently becoming `undefined`.\n\nMulti-value string properties (`value` on `c2-list`, `c2-select`, `c2-tree`, `c2-virtual-list`) work the same\nway with their `;`-separated attribute form: `value=\"a;b\"` and `el.value = 'a;b'` both yield `['a', 'b']`.\n\n**camelCase properties are not attributes.** Lit derives an attribute by lowercasing the property, so `readOnly`\nis the attribute `readonly` and `maxLength` is `maxlength`; where the component renamed one it is kebab-case\n(`row-key`). The manifests list the real attribute name under `name` and the property under `fieldName`. A\nlookalike such as `rowkey` is forwarded to the real attribute with a warning rather than dropped.\n\n## Plain HTML / Vite / any bundler\n\n```html\n<script type=\"module\">\n  import '@c2n/theme/theme.css'\n  import '@c2n/button'\n</script>\n<c2-button>Save</c2-button>\n```\n\nWith a bundler, put the imports in the entry module (`main.ts`). CSS imports work through the bundler's CSS handling.\n\n## Lit\n\nImport what you render at the top of the component module (`import '@c2n/text-field'`). Extend a component for a tag variant (`class AppField extends TextField`). Re-emit child events with `redispatchEvent` from `@c2n/core/dom-helper.js`. Set child variables in your `static styles` on `:host` or on a class.\n\n## Astro\n\n- Islands (`@astrojs/lit`): `import { Button } from '@c2n/button'` in the frontmatter, `<Button client:load>` in the template. SSR'd with declarative shadow DOM, hydrated on load. Pass **kebab-case attributes** only (a prop whose name matches an element property is set as a property and forces `defer-hydration`). A `client:only` island must not contain islands: its children end up in a `<template>` and nothing hydrates; the parent module registers the children instead.\n- Plain tags + client script: `<c2-button>` in the template and `import '@c2n/button'` inside a `<script>`. Cheaper for repeated markup (no shadow-DOM copy per instance); guard the flash with `c2-button:not(:defined) { visibility: hidden }`.\n- Scoped `<style>` does not reach elements rendered by child components; use `is:global` (or `:global()`) for variant classes.\n\n## React 19\n\nCustom elements work as JSX tags. React 19 passes primitive props as attributes and functions as event listeners for `on*` names; for custom events attach listeners with a `ref` (`ref.current.addEventListener('selection-change', …)`).\n\nTypes: `import '@c2n/<name>/react'` — one line per package, in any `.d.ts` — declares the tags in `JSX.IntrinsicElements` with props derived from the element class, plus each kebab-case attribute name (`row-key` next to `rowKey`). Do not hand-write the mapping. React 18 and older: pass attributes as strings and use refs for events and properties.\n\n**Server-rendered React (Next.js, React Router SSR):** write a camelCase property by its kebab-case attribute name — `min-width`, `expand-full`, `storage-key`, not `minWidth`. The server writes a custom element's props into the HTML verbatim, the parser lowercases them (`minwidth`) and hydration does not set properties, so the camelCase spelling reaches the element as an attribute it does not declare. The component forwards that lookalike to the real attribute and logs a warning, so the value is not lost, but the kebab-case name is what the types list and what needs no forwarding. Object and array props (`rows`) stringify on the server: pass `JSON.stringify(rows)`, which parses from the attribute the server writes and from the property the client sets, or assign the array in an effect through a ref.\n\n## Vue 3\n\n### Scoped slot styling\n\nTreat assigned nodes and component-owned regions separately. A slotted node remains in application light DOM, so a Vue scoped class can style it. Use only a documented host `::part(name)` selector for the shadow-owned wrapper or fallback, and place that rule in a global stylesheet because Vue's scoped attribute is not present inside the shadow root. Parts stop at nested custom-element shadow roots; consult the nested component's own manifest instead of chaining private selectors.\n\nTell the compiler about the tags: `compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-')` (in `@vitejs/plugin-vue`'s `template.compilerOptions`); without it every `c2-*` tag is treated as a Vue component and renders nothing. Register the elements at module scope before `mount()`: Vue chooses between a property and an attribute with `key in el`, so a binding on an element that has not upgraded yet falls back to an attribute.\n\nTypes: `import '@c2n/<name>/vue'` registers the tags with Volar, and `\"extends\": [..., \"@c2n/framework-types/tsconfig.vue.json\"]` supplies the matching `vueCompilerOptions` (`strictTemplates`, plus the `v-model` prop mapping so `v-model` binds `value`/`checked` rather than `modelValue`). Declare no local `vueCompilerOptions` next to it — a local one replaces the inherited object rather than merging.\n\n- Events: `@selection-change`, `@submit-message` bind by their real kebab-case name — Vue calls `addEventListener` with the name as written. The handler gets a plain `Event`, so narrow it (`(event as CustomEvent<{ value: string[] }>).detail`).\n- `v-model` works on `c2-text-field` / `c2-textarea`: on a custom element Vue compiles it to the plain-text model directive, which sets `el.value` and listens for `input`, and both components expose `value` and re-emit the native `input` event.\n- `.prop` forces a DOM property (`:value.prop=\"selected\"` for array/object values); `.attr` forces an attribute (`:align.attr=\"side\"`), needed when a property is not reflected but the component styles it with `:host([attr])` — `c2-chat-message`'s `align` is the case to know.\n- A static attribute stays an attribute, so spell it the way the component declares it (`row-key`, not `rowKey`).\n\n## Angular\n\nWith Emulated encapsulation, keep host `::part(name)` rules in a global stylesheet (or use `ViewEncapsulation.None` for the owning stylesheet); Angular's generated scope attribute cannot appear on nodes inside a custom element's shadow root. Classes on consumer-owned assigned nodes can remain component-local. Never use deep/private selectors to cross a nested custom-element boundary.\n\n`CUSTOM_ELEMENTS_SCHEMA` on the component is the only required configuration. `[rows]=\"…\"` writes a property with `setProperty`; `(selection-change)` binds the event by its real name. A **static** attribute stays an attribute, so a camelCase property needs `[rowKey]=\"'id'\"` or the real attribute name (`row-key`) — the lowercase spelling `rowkey` is forwarded to `row-key` with a warning.\n\nForms: Angular's built-in value accessors match `input`/`select`/`textarea` only, so `ngModel` and `formControlName` do nothing on a c2 control without `@c2n/angular`. Add `imports: [FormsModule, ...C2_FORM_ACCESSORS]`.\n\nThe schema turns off template type checking, so `$event` is a bare `Event`: take the component's event-map type in the handler rather than `$any` at the call site.\n\n## Svelte 5 / SvelteKit\n\nRegister the elements at module scope before anything renders — a root `+layout.svelte` script, or\n`src/lib/c2n.ts` imported from it. Svelte picks between a property and an attribute with `key in element`, so a\nbinding on a tag that has not upgraded yet silently falls back to an attribute.\n\n```svelte\n<script lang=\"ts\">\n  import '@c2n/table'\n  import '@c2n/table/table-column.js'\n  import type { TableEventMap } from '@c2n/table'\n\n  let { rows } = $props()\n  let selected = $state<string[]>([])\n</script>\n\n<c2-table\n  row-key=\"id\"\n  rows={rows}\n  sortable\n  onselection-change={(event: TableEventMap['selection-change']) => (selected = event.detail.rows.map((r) => r.id))}\n>\n  <c2-table-column field=\"name\" header=\"Name\"></c2-table-column>\n</c2-table>\n```\n\n- **Events** use the `on` prefix and the event's real name, no colon: `onclick`, `onselection-change`,\n  `oninput`. (Svelte 4's `on:selection-change` still works but is deprecated.) `selection-change` does not\n  bubble, so the handler goes on the element itself.\n- **Booleans**: Svelte writes `running=\"false\"` rather than omitting the attribute for any name outside the HTML\n  boolean list. That reads as false — see \"Attributes and properties\" above — so `disabled={isDisabled}` behaves.\n- **Arrays and objects**: on the client `rows={rows}` lands as a property because `rows in element` is true.\n  Server rendering writes attributes only, and `String(rows)` is `[object Object]`, so a route that\n  server-renders its data passes `rows={JSON.stringify(rows)}` — parsed as an attribute on the server and as a\n  property on the client.\n- **camelCase properties**: spell the attribute the component declares (`row-key`, not `rowKey`).\n- **Two-way binding**: `bind:value` applies to form elements and Svelte components, not to a custom element, so\n  bind by hand. Every c2n form control re-emits the inner control's native `input` and `change`, which is what\n  makes `value={draft} oninput={(event) => (draft = event.currentTarget.value)}` enough.\n- **Types**: there is no JSX-style declaration file to maintain. Svelte accepts unknown elements; point the\n  editor at `@c2n/framework-types`' `dist/html-custom-data.json` for attribute completion, and take event detail\n  types from each package's event map.\n\n## Table cells\n\n`renderCell` cannot return framework markup (it is handed to Lit). To build one with a Lit template, take `html`\nfrom `@c2n/core/lit-helper.js` rather than adding `lit` to the application: it is the same instance the\ncomponents render with, so there is no version to pin by hand and no second copy of Lit in the bundle.\nMark the column `cell-slot` and render one light-DOM child per row into `slot=\"cell:<row key>:<field>\"`; the children stay in the document, so ordinary CSS reaches them. Requires `row-key`; `renderCell`/the column format is the fallback.\n\n## Editor support outside TypeScript\n\n`@c2n/framework-types` ships `dist/html-custom-data.json` (point `html.customData` at it for VS Code / Volar) and `dist/web-types.json` (picked up automatically by the JetBrains IDEs). Both are generated from the custom-elements manifests, and cover plain HTML, Angular templates and Vue SFCs.\n\n## Server-side rendering and static HTML\n\n- Components must not touch `document`/`window` at module scope; the c2 components guard with `isServer`.\n- Without SSR of the shadow DOM, hide unregistered tags until they upgrade: `c2-modal:not(:defined) { display: none }` (dialogs, lists) or `visibility: hidden` (layout-stable chrome).\n- Server-rendered markup only carries attributes, so spell camelCase properties as their kebab-case attribute (`row-key`); see the React section for why the camelCase spelling is lost on the way.\n- Theme CSS is plain CSS; load it in the document head so the first paint is themed.\n- \"Lit is in dev mode. Not recommended for production!\" in a dev server (Next.js, Vite) is expected: Lit publishes a `development` export condition with extra checks and warnings, and dev servers resolve it. A production build resolves the default condition and the message is gone; nothing to configure.\n"
   }
 }