@tmorrow/cre8-wc 2.0.7 → 2.1.0

package/mcp-manifest.json

@@ -1,9 +1,16 @@
 {
-  "version": "2.0.7",
+  "version": "2.1.0",
   "library": "@tmorrow/cre8-wc",
   "tagPrefix": "cre8",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "framework": "Lit 3.3.1",
+  "internalElements": [
+    "cre8-calendar",
+    "cre8-calendar-month-modal",
+    "cre8-calendar-navigation",
+    "cre8-calendar-year-modal",
+    "cre8-page-counter"
+  ],
   "components": [
     {
       "name": "cre8-button",
@@ -387,11 +394,13 @@
         }
       },
       "events": {
-        "text-click": {
-          "detail": {}
+        "split-button-text-click": {
+          "detail": {},
+          "description": "Fires when the main text button is clicked."
         },
-        "dropdown-click": {
-          "detail": {}
+        "split-button-dropdown-click": {
+          "detail": {},
+          "description": "Fires when the dropdown toggle is clicked."
         }
       },
       "cssProperties": {},
@@ -479,15 +488,15 @@
       },
       "slots": {},
       "events": {
-        "cre8-chart-click": {
+        "chart-click": {
           "detail": {},
           "description": "Fired when a chart element is clicked"
         },
-        "cre8-chart-hover": {
+        "chart-hover": {
           "detail": {},
           "description": "Fired when hovering over chart elements"
         },
-        "cre8-chart-ready": {
+        "chart-ready": {
           "detail": {},
           "description": "Fired when the chart is initialized"
         }
@@ -511,6 +520,10 @@
             "padded"
           ],
           "description": "Spacing variants\n<cre8-text-passage size=\"sm\">\n<ul>\n<li>**padded** applies more padding in between list items compared to the default</li>\n<li>**condensed** reduces padding in between list items compared to the default</li>\n</ul>\n</cre8-text-passage>"
+        },
+        "items": {
+          "type": "Cre8ListItemData[]",
+          "description": "Items for a data-driven list. Set this and the list builds its own\n`cre8-list-item` children in the light DOM — the same composition you would\nwrite by hand. Leave it unset to compose the list yourself."
         }
       },
       "properties": {},
@@ -565,7 +578,7 @@
       "properties": {},
       "slots": {},
       "events": {
-        "removeTagClicked": {
+        "remove-tag-click": {
           "detail": {},
           "description": "Fires when the remove tag is clicked."
         }
@@ -583,6 +596,14 @@
       "category": "Data",
       "description": "Table component.",
       "attributes": {
+        "columns": {
+          "type": "Cre8TableColumn[]",
+          "description": "Columns for a data-driven table. Set this with `rows` and the table builds\nits own header, body, rows and cells — the same composition you would write\nby hand, generated into the light DOM, so nothing about styling or\nbehaviour changes.\n\nLeave both unset to compose the table yourself with `cre8-table-header`,\n`cre8-table-body` and friends. Do not do both on one table."
+        },
+        "rows": {
+          "type": "Cre8TableRowData[]",
+          "description": "Rows for a data-driven table. Each row is either an object keyed by the\ncolumns' `key`, or an array of values positioned to match `columns`."
+        },
         "caption": {
           "type": "string",
           "description": "Specifies the caption/title of the table, visible to all users.\nIncreases accessibility of table."
@@ -855,6 +876,10 @@
         "label": {
           "type": "string",
           "description": "Tag list legend label"
+        },
+        "tags": {
+          "type": "Cre8TagData[]",
+          "description": "Tags for a data-driven tag list. Set this and the list builds its own\n`cre8-tag` children in the light DOM. Leave it unset to compose them\nyourself."
         }
       },
       "properties": {
@@ -876,7 +901,12 @@
       "name": "cre8-accordion",
       "category": "Disclosure",
       "description": "The component is a vertically stacked list of headers that reveal or hide sections of related content on a page.\nThe header title gives the user a high level overview of the content allowing the user to decide\nwhich sections to expand for the information.\n\nAccordion contains Accordion Items as children. This component is the wrapper for grouping related accordion items.\n\nUsers can select different border types: default (no border), rectangle, rounded bottom, and rounded.",
-      "attributes": {},
+      "attributes": {
+        "items": {
+          "type": "Cre8AccordionItemData[]",
+          "description": "Panels for a data-driven accordion. Each becomes a `cre8-accordion-item`\nwith its heading as a prop and its content in the default slot."
+        }
+      },
       "properties": {
         "borderType": {
           "type": "string",
@@ -974,7 +1004,12 @@
       "name": "cre8-dropdown",
       "category": "Disclosure",
       "description": "The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list",
-      "attributes": {},
+      "attributes": {
+        "items": {
+          "type": "Cre8DropdownItemData[]",
+          "description": "Items for a data-driven dropdown. Set this and the dropdown builds its own\n`cre8-dropdown-item` children in the light DOM."
+        }
+      },
       "properties": {
         "buttonText": {
           "type": "string",
@@ -1022,7 +1057,7 @@
         }
       },
       "events": {
-        "dropdown-item-selected": {
+        "dropdown-item-select": {
           "detail": {},
           "description": "Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`."
         }
@@ -1091,7 +1126,7 @@
         }
       },
       "events": {
-        "close-modal": {
+        "modal-close": {
           "detail": {},
           "description": "Fires when the modal is dismissed via the close button, overlay click, or Escape key."
         }
@@ -1110,7 +1145,12 @@
         },
         "position": {
           "type": "string",
-          "description": "Positions the popover panel absolutely to the trigger\n- **default** positions the popover panel below the trigger\n- **top** positions the popover panel below the trigger\n- **left** positions the popover panel below the trigger\n- **right** positions the popover panel below the trigger"
+          "values": [
+            "top",
+            "left",
+            "right"
+          ],
+          "description": "Positions the popover panel absolutely to the trigger\n- Omitting this prop positions the popover panel below the trigger\n- **top** positions the popover panel above the trigger\n- **left** positions the popover panel to the left of the trigger\n- **right** positions the popover panel to the right of the trigger"
         }
       },
       "properties": {
@@ -1162,11 +1202,11 @@
         }
       },
       "events": {
-        "open": {
+        "popover-open": {
           "detail": {},
           "description": "Fires when the popover opens. `event.detail.isActive` is `true`."
         },
-        "close": {
+        "popover-close": {
           "detail": {},
           "description": "Fires when the popover closes. `event.detail.isActive` is `false`."
         }
@@ -1277,11 +1317,11 @@
         }
       },
       "events": {
-        "open": {
+        "tooltip-open": {
           "detail": {},
           "description": "Fires when the tooltip is shown. `event.detail.isActive` is `true`."
         },
-        "close": {
+        "tooltip-close": {
           "detail": {},
           "description": "Fires when the tooltip is hidden. `event.detail.isActive` is `false`."
         }
@@ -1384,11 +1424,22 @@
         },
         "status": {
           "type": "string",
-          "description": "Status (a color variant prop)\n- **neutral** (default) renders a badge with a neutral state treatment\n- **success** renders a badge with success state treatment\n- **warning** renders a badge with warning state treatment\n- **error** renders a badge with error state treatment\n- **info** renders a badge with information state treatment\n- **attention** renders a badge with attention state treatment"
+          "values": [
+            "error",
+            "info",
+            "warning",
+            "success",
+            "attention"
+          ],
+          "description": "Status (a color variant prop)\n- Omitting this prop renders a badge with the neutral state treatment\n- **success** renders a badge with success state treatment\n- **warning** renders a badge with warning state treatment\n- **error** renders a badge with error state treatment\n- **info** renders a badge with information state treatment\n- **attention** renders a badge with attention state treatment"
         },
         "variant": {
           "type": "string",
-          "description": "Background Style Variant\n\n- **dark|undefined** (default) renders a badge with a dark background\n- **light** renders a badge with a light background\n- **white** renders a badge with a white background"
+          "values": [
+            "light",
+            "white"
+          ],
+          "description": "Background Style Variant\n\n- Omitting this prop renders a badge with a dark background\n- **light** renders a badge with a light background\n- **white** renders a badge with a white background"
         },
         "svg": {
           "type": "string",
@@ -1399,7 +1450,12 @@
       "slots": {},
       "events": {},
       "cssProperties": {},
-      "examples": []
+      "examples": [
+        {
+          "description": "Light badge",
+          "html": "<cre8-badge variant=\"light\" text=\"Badge\"></cre8-badge>"
+        }
+      ]
     },
     {
       "name": "cre8-inline-alert",
@@ -1532,8 +1588,9 @@
       },
       "slots": {},
       "events": {
-        "leftActionButtonClick": {
-          "detail": {}
+        "percent-bar-left-action-click": {
+          "detail": {},
+          "description": "Fires when the left action button is clicked."
         }
       },
       "cssProperties": {},
@@ -1545,7 +1602,12 @@
       "description": "A progress meter provides feedback that the system is working and gives\nthe user an indication of how much time they will wait.\nThis indicator should be used when the system response time is longer and determinable.",
       "attributes": {
         "status": {
-          "type": "status",
+          "type": "string",
+          "values": [
+            "error",
+            "warning",
+            "success"
+          ],
           "description": "Progress Status\n- **Default** renders a meter with default status fill\n- **Error** renders a meter with an error status fill\n- **Warning** renders a meter with a warning status\n- **Success** renders a meter with a success status fill"
         },
         "knockout": {
@@ -1586,6 +1648,17 @@
       "category": "Feedback",
       "description": "The Progress Steps Item component is used to display a single step in a multi-step process.\nIt should be used as a child component of `cre8-progress-steps`.\nThese Components serve a contextual purpose and don't provide any functionality.",
       "attributes": {
+        "state": {
+          "type": "string",
+          "values": [
+            "error",
+            "warning",
+            "complete",
+            "current",
+            "incomplete"
+          ],
+          "description": "The state of the step."
+        },
         "message": {
           "type": "string",
           "description": "Optional message to display under the step name."
@@ -1594,10 +1667,6 @@
           "type": "string",
           "description": "The name of the step."
         },
-        "state": {
-          "type": "string",
-          "description": "The state of the step: 'complete', 'current', 'error',' incomplete', 'warning';"
-        },
         "svg": {
           "type": "string",
           "description": "An SVG string to use as the step icon."
@@ -1656,6 +1725,14 @@
         "label": {
           "type": "string",
           "description": "Checkbox container legend label"
+        },
+        "items": {
+          "type": "Cre8CheckboxItemData[]",
+          "description": "Checkboxes for a data-driven field. Each becomes a\n`cre8-checkbox-field-item`, sharing the field's `name` so they submit as a\ngroup."
+        },
+        "name": {
+          "type": "string",
+          "description": "Form control name shared by every generated item."
         }
       },
       "properties": {
@@ -2075,7 +2152,7 @@
     {
       "name": "cre8-multi-select",
       "category": "Forms",
-      "description": "Multiselect is used when multiple options can be chosen from a static dropdown\nThis component has a list of items in the dropdown that can be added as \"selected tags\"\nThe checkbox will always reflect the selected nature of the item and is not removed\nfrom the dropdown when clicked, the tags will be added and removed based on their state.\n\nEvent `selectedItemsChange` emits whenever a tag is added or remove from the list and the\ncurrent list after the change is given in the detail.",
+      "description": "Multiselect is used when multiple options can be chosen from a static dropdown\nThis component has a list of items in the dropdown that can be added as \"selected tags\"\nThe checkbox will always reflect the selected nature of the item and is not removed\nfrom the dropdown when clicked, the tags will be added and removed based on their state.\n\nEvent `multi-select-change` emits whenever a tag is added or remove from the list and the\ncurrent list after the change is given in the detail.",
       "attributes": {
         "items": {
           "type": "string[]",
@@ -2141,7 +2218,7 @@
         }
       },
       "events": {
-        "selectedItemsChange": {
+        "multi-select-change": {
           "detail": {},
           "description": "Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection."
         }
@@ -2157,6 +2234,14 @@
         "label": {
           "type": "string",
           "description": "Radio field legend label"
+        },
+        "items": {
+          "type": "Cre8RadioItemData[]",
+          "description": "Options for a data-driven radio field. Each becomes a\n`cre8-radio-field-item` sharing the field's `name`, which is what the form\nsubmits under. Exclusivity is enforced by the field itself — see\n`enforceSingleSelection`, and do not assume `name` alone does it."
+        },
+        "name": {
+          "type": "string",
+          "description": "Form control name shared by every generated option."
         }
       },
       "properties": {
@@ -2633,6 +2718,10 @@
         },
         "status": {
           "type": "string",
+          "values": [
+            "brand",
+            "knockout"
+          ],
           "description": "Status (a color variant prop)\n- By default, the divider has gray color.\n- **brand**, the divider has blue color.\n- **knockout**, the divider has white color."
         }
       },
@@ -2995,7 +3084,12 @@
       "name": "cre8-breadcrumbs",
       "category": "Navigation",
       "description": "The breadcrumbs component is a secondary navigation pattern that helps a user understand where the user is located.\nThe breadcrumbs component shows the users their current location relative to the information architecture\nIt enables the users to quickly move up to a parent level or previous location.\n\n## How to Use\n\n- Import 'Breadcrumbs' component.\n- Add the pages in the path of the breadcrumbs using `cre8-breadcrumbs-item`.\nAll the pages in the breadcrumbs component should be interactive.\n- All the page should link to their respective pages (except the current page) using `cre8-link`.\n- The current page is included in the breadcrumbs trail.\n- The current page is always the last text listed and is not an interactive link.",
-      "attributes": {},
+      "attributes": {
+        "items": {
+          "type": "Cre8BreadcrumbData[]",
+          "description": "Crumbs for a data-driven trail. Each becomes a `cre8-breadcrumbs-item`,\nwrapping a `cre8-text-link` when it has an `href`."
+        }
+      },
       "properties": {
         "navAriaLabel": {
           "type": "string",
@@ -3276,6 +3370,10 @@
             "display"
           ],
           "description": "Style variants\n- **secondary** renders a link list with a more subtle visual treatment\n- **display** renders a link list with a display treatment (e.g. article title)"
+        },
+        "items": {
+          "type": "Cre8LinkData[]",
+          "description": "Links for a data-driven list. Each becomes a `cre8-link-list-item`.\n\nWorth knowing if you compose these by hand: the label goes in the item's\ndefault slot, *not* its `text` prop. That prop is declared and documented\nbut never rendered, so setting it produces an empty link that passes every\ncheck — see the drift ledger in `docs/kb/07-research.md`. This API routes\naround it."
         }
       },
       "properties": {},
@@ -3403,7 +3501,7 @@
         }
       },
       "events": {
-        "pagination.click": {
+        "pagination-change": {
           "detail": {},
           "description": "Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page."
         }
@@ -3532,7 +3630,7 @@
         }
       },
       "events": {
-        "tabSelected": {
+        "tab-select": {
           "detail": {},
           "description": "Fires when the tab is clicked. `event.detail.index` is the tab's index."
         }
@@ -3577,6 +3675,10 @@
         "size": {
           "type": "\"sm\"",
           "description": "Tab sizes\n- **default** displays the cre8-tab text with cre8-typography-label-default\n- **sm** displays the cre8-tab text with cre8-typography-label-small"
+        },
+        "items": {
+          "type": "Cre8TabItemData[]",
+          "description": "Tabs for a data-driven tab set. Each entry becomes a `cre8-tab` in the\ndefault slot *and* a `cre8-tab-panel` in the `panel` slot, with matching\nindices — two slots kept in step, which is the part that goes wrong when\nthese are written by hand."
         }
       },
       "properties": {
@@ -3636,8 +3738,9 @@
         }
       },
       "events": {
-        "tabChange": {
-          "detail": {}
+        "tab-change": {
+          "detail": {},
+          "description": "Fires when the active tab changes. `event.detail` is `{ value, activeTabIndex }`."
         }
       },
       "cssProperties": {},
@@ -3766,7 +3869,12 @@
       "name": "cre8-progress-steps",
       "category": "Other",
       "description": "The Progress Steps component is used to display where a user is in a multistep process.\nIt clearly indicates the total number of steps, which steps are complete and incomplete,\nand which step you’re currently on. They help users estimate how long a task will take and can be\nused to track status on orders.\n\nThe Progress Steps component should be used as a parent component for `cre8-progress-steps-item` components.\nThese Components serve a contextual purpose and don't provide any functionality.\n\n# How to Use\n\nProgress Steps is used when there is ample horizontal space and two to six steps. It displays each step by name\nand number to help users understand exactly where they are in a process. It is the preferred option for desktop.\nProgress Steps should change to Compact Steps on mobile web to conserve space.\n\nProgress Steps can also be used to track order status. It provides a quick visual of how an order is progressing\nwith options to alert users of any problems along the way. When used for order status, Progress Steps should\nchange to Vertical Steps on mobile web to conserve space while allowing alerts and messages to remain visible.",
-      "attributes": {},
+      "attributes": {
+        "steps": {
+          "type": "Cre8ProgressStepData[]",
+          "description": "Steps for a data-driven progress indicator. Note that the visible label is\neach item's `name` prop rather than its content — `cre8-progress-steps-item`\ndoes not render children, which is easy to get wrong by hand."
+        }
+      },
       "properties": {},
       "slots": {
         "default": {
@@ -3784,7 +3892,7 @@
       "attributes": {
         "type": {
           "type": "\"display-default\" | \"display-small\" | \"headline-large\" | \"headline-default\" | \"headline-small\" | \"title-xlarge\" | \"title-large\" | \"title-default\" | \"title-small\" | \"label-large\" | ... 5 more ...",
-          "description": "Heading type\n<cre8-text-passage size=\"small\">\n<ul>\n<li>**display-default** renders a heading with the heading display-default preset treatment</li>\n<li>**display-small** renders a heading with the heading display-small preset treatment</li>\n<li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n<li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n<li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n<li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n<li>**title-large** renders a heading with the heading title-large preset treatment</li>\n<li>**title-default** renders a heading with the heading title-default preset treatment</li>\n<li>**title-small** renders a heading with the heading title-small preset treatment</li>\n<li>**label-large** renders a heading with the label-large preset treatment</li>\n<li>**label** renders a heading with the label preset treatment</li>\n<li>**label-small** renders a heading with the label-small preset treatment</li>\n<li>**meta-large** renders a heading with the meta-large preset treatment</li>\n<li>**meta-default** renders a heading with the meta-default preset treatment</li>\n<li>**meta-small** renders a heading with the meta-small preset treatment</li>\n</ul>\n</cre8-text-passage>"
+          "description": "Heading type\n<cre8-text-passage size=\"small\">\n<ul>\n<li>**display-default** renders a heading with the heading display-default preset treatment</li>\n<li>**display-small** renders a heading with the heading display-small preset treatment</li>\n<li>**headline-large** renders a heading with the heading headline-large preset treatment</li>\n<li>**headline-default** renders a heading with the heading headline-default preset treatment</li>\n<li>**headline-small** renders a heading with the heading headline-small preset treatment</li>\n<li>**title-xlarge** renders a heading with the heading title-xlarge preset treatment</li>\n<li>**title-large** renders a heading with the heading title-large preset treatment</li>\n<li>**title-default** renders a heading with the heading title-default preset treatment</li>\n<li>**title-small** renders a heading with the heading title-small preset treatment</li>\n<li>**label-large** renders a heading with the label-large preset treatment</li>\n<li>**label-default** renders a heading with the label-default preset treatment</li>\n<li>**label-small** renders a heading with the label-small preset treatment</li>\n<li>**meta-large** renders a heading with the meta-large preset treatment</li>\n<li>**meta-default** renders a heading with the meta-default preset treatment</li>\n<li>**meta-small** renders a heading with the meta-small preset treatment</li>\n</ul>\n</cre8-text-passage>"
         },
         "inverted": {
           "type": "boolean",
@@ -3794,8 +3902,16 @@
       "properties": {
         "tagVariant": {
           "type": "string",
+          "values": [
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6"
+          ],
           "default": "h5",
-          "description": "Dynamic tag name for the component\n1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n<cre8-text-passage size=\"small\">\n<ul>\n<li>**h1** renders an `h1` tag</li>\n<li>**h2** renders an `h2` tag. This is the default</li>\n<li>**h3** renders an `h3` tag</li>\n<li>**h4** renders an `h4` tag</li>\n<li>**h5** renders an `h5` tag</li>\n<li>**h6** renders an `h6` tag</li>\n</ul>\n</cre8-text-passage>"
+          "description": "Dynamic tag name for the component\n1) This is needed to use proper semantic heading treatments depending on where the banner lives on the page\n<cre8-text-passage size=\"small\">\n<ul>\n<li>**h1** renders an `h1` tag</li>\n<li>**h2** renders an `h2` tag</li>\n<li>**h3** renders an `h3` tag</li>\n<li>**h4** renders an `h4` tag</li>\n<li>**h5** renders an `h5` tag. This is the default</li>\n<li>**h6** renders an `h6` tag</li>\n</ul>\n</cre8-text-passage>"
         },
         "brandColor": {
           "type": "boolean",
@@ -3925,13 +4041,13 @@
           "type": "boolean",
           "description": "Required state"
         },
-        "is-error": {
+        "isError": {
           "type": "boolean",
-          "description": "Error state indicator"
+          "description": "Error state indicator. Lit lowercases property names to derive attribute names, so the attribute is isError/iserror — is-error does not bind."
         },
-        "is-success": {
+        "isSuccess": {
           "type": "boolean",
-          "description": "Success state indicator"
+          "description": "Success state indicator. Attribute is isSuccess/issuccess, not is-success."
         }
       },
       "properties": {
@@ -3951,25 +4067,26 @@
           "checkValidity()",
           "reportValidity()",
           "setCustomValidity(message)"
-        ]
+        ],
+        "constraintValidation": "setValidity() is only ever called from setCustomValidity(). required, pattern, min, max and type=\"email\" are stored as props but never mapped into the validity state, so they do not block submission on their own — an empty required field still submits. Enforce constraints with setCustomValidity() or in the form's submit handler."
       }
     }
   ],
   "patterns": [
     {
       "name": "Login Form",
-      "description": "Standard login form with email and password",
-      "template": "<cre8-card>\n  <cre8-heading tag-variant=\"h2\" type=\"headline-default\">Sign In</cre8-heading>\n  <cre8-field label=\"Email\" type=\"email\"></cre8-field>\n  <cre8-field label=\"Password\" type=\"password\"></cre8-field>\n  <cre8-button text=\"Sign In\" variant=\"primary\" full-width></cre8-button>\n</cre8-card>"
+      "description": "Standard login form with email and password. Three things make it submit rather than merely look right: a real <form> wrapper (cre8 form components participate via ElementInternals, which is inert outside one), type=\"submit\" on the button (cre8-button defaults to type=\"button\"), and a name on every field (setFormValue contributes nothing to FormData without one). Note that required does not block submission on its own — cre8 form elements never map constraint attributes into setValidity, so enforce it with setCustomValidity() or a submit handler.",
+      "template": "<form>\n  <cre8-card>\n    <cre8-heading tagVariant=\"h2\" type=\"headline-default\">Sign In</cre8-heading>\n    <cre8-field label=\"Email\" name=\"email\" type=\"email\" autocomplete=\"email\" required></cre8-field>\n    <cre8-field label=\"Password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required></cre8-field>\n    <cre8-button text=\"Sign In\" variant=\"primary\" fullWidth type=\"submit\"></cre8-button>\n  </cre8-card>\n</form>"
     },
     {
       "name": "Data Table",
       "description": "Table with header and data rows",
-      "template": "<cre8-table variant=\"striped\" is-hoverable>\n  <cre8-table-header>\n    <cre8-table-row>\n      <cre8-table-header-cell>Name</cre8-table-header-cell>\n      <cre8-table-header-cell>Status</cre8-table-header-cell>\n    </cre8-table-row>\n  </cre8-table-header>\n  <cre8-table-body>\n    <cre8-table-row>\n      <cre8-table-cell>Item 1</cre8-table-cell>\n      <cre8-table-cell><cre8-badge text=\"Active\" status=\"success\"></cre8-badge></cre8-table-cell>\n    </cre8-table-row>\n  </cre8-table-body>\n</cre8-table>"
+      "template": "<cre8-table variant=\"striped\" isHoverable>\n  <cre8-table-header>\n    <cre8-table-row>\n      <cre8-table-header-cell>Name</cre8-table-header-cell>\n      <cre8-table-header-cell>Status</cre8-table-header-cell>\n    </cre8-table-row>\n  </cre8-table-header>\n  <cre8-table-body>\n    <cre8-table-row>\n      <cre8-table-cell>Item 1</cre8-table-cell>\n      <cre8-table-cell><cre8-badge text=\"Active\" status=\"success\"></cre8-badge></cre8-table-cell>\n    </cre8-table-row>\n  </cre8-table-body>\n</cre8-table>"
     },
     {
       "name": "Page Layout",
-      "description": "Standard page with header, main content, and footer",
-      "template": "<cre8-layout>\n  <cre8-header>\n    <cre8-global-nav>\n      <span slot=\"logo\"><cre8-logo></cre8-logo></span>\n      <cre8-global-nav-item href=\"/\">Home</cre8-global-nav-item>\n    </cre8-global-nav>\n  </cre8-header>\n  <cre8-main>\n    <cre8-layout-container>\n      <!-- Page content -->\n    </cre8-layout-container>\n  </cre8-main>\n  <cre8-footer>\n    <span slot=\"copyright\">2024 Company Name</span>\n  </cre8-footer>\n</cre8-layout>"
+      "description": "Standard page with header, main content, and footer. cre8-global-nav and cre8-footer expose no logo or copyright slot; content addressed to a slot that does not exist is never assigned and renders nowhere, so both go in the default slot.",
+      "template": "<cre8-layout>\n  <cre8-header>\n    <cre8-logo></cre8-logo>\n    <cre8-global-nav>\n      <cre8-global-nav-item href=\"/\">Home</cre8-global-nav-item>\n    </cre8-global-nav>\n  </cre8-header>\n  <cre8-main>\n    <cre8-layout-container>\n      <!-- Page content -->\n    </cre8-layout-container>\n  </cre8-main>\n  <cre8-footer>\n    <span>2024 Company Name</span>\n  </cre8-footer>\n</cre8-layout>"
     },
     {
       "name": "Alert Banner",
@@ -3978,13 +4095,13 @@
     },
     {
       "name": "Tabbed Content",
-      "description": "Content organized in tabs",
-      "template": "<cre8-tabs>\n  <cre8-tab label=\"Tab 1\" tab-id=\"tab1\" selected></cre8-tab>\n  <cre8-tab label=\"Tab 2\" tab-id=\"tab2\"></cre8-tab>\n  <cre8-tab-panel tab-id=\"tab1\" slot=\"panel\">Content for Tab 1</cre8-tab-panel>\n  <cre8-tab-panel tab-id=\"tab2\" slot=\"panel\">Content for Tab 2</cre8-tab-panel>\n</cre8-tabs>"
+      "description": "Content organized in tabs. cre8-tab has no label, tab-id or selected prop: the label is slotted text content, and cre8-tabs pairs each tab with the panel at the same position and assigns index/isActive itself. Set activeIndex on cre8-tabs to choose the initial tab (defaults to 0).",
+      "template": "<cre8-tabs>\n  <cre8-tab>Tab 1</cre8-tab>\n  <cre8-tab>Tab 2</cre8-tab>\n  <cre8-tab-panel slot=\"panel\">Content for Tab 1</cre8-tab-panel>\n  <cre8-tab-panel slot=\"panel\">Content for Tab 2</cre8-tab-panel>\n</cre8-tabs>"
     },
     {
       "name": "Modal Dialog",
-      "description": "Modal with header, body, and footer actions",
-      "template": "<cre8-modal is-active aria-label=\"Confirmation\">\n  <span slot=\"header\">Confirm Action</span>\n  <p>Are you sure you want to proceed?</p>\n  <div slot=\"footer\">\n    <cre8-button text=\"Cancel\" variant=\"secondary\"></cre8-button>\n    <cre8-button text=\"Confirm\" variant=\"primary\"></cre8-button>\n  </div>\n</cre8-modal>"
+      "description": "Modal with header, body, and footer actions. These buttons are deliberately type=\"button\": they are not in a form, so they do nothing until the app attaches click handlers. Wire both before shipping. If the modal instead collects input, wrap the body and footer in a <form> and give Confirm type=\"submit\" — see the Login Form pattern. Use ariaLabel, not aria-label: the modal renders its inner role=\"dialog\" label from the ariaLabel property, and a host aria-label attribute leaves that dialog unlabelled.",
+      "template": "<cre8-modal isActive ariaLabel=\"Confirmation\">\n  <span slot=\"header\">Confirm Action</span>\n  <p>Are you sure you want to proceed?</p>\n  <div slot=\"footer\">\n    <!-- Both require a click handler; type=\"button\" is correct only because there is no form. -->\n    <cre8-button text=\"Cancel\" variant=\"secondary\" type=\"button\"></cre8-button>\n    <cre8-button text=\"Confirm\" variant=\"primary\" type=\"button\"></cre8-button>\n  </div>\n</cre8-modal>"
     }
   ],
   "designTokens": {

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "license": "BSD-3-Clause",
   "scripts": {
     "start": "pnpm run build:custom-elements.json && pnpm run storybook",
     "compile-styles": "npx tsx scripts/convert-scss-to-ts.ts",
     "build": "rm -rf lib && pnpm run compile-styles && pnpm build:cdn && vite build && tsc && cp .storybook/custom-elements.json custom-elements.json && pnpm run build:react && pnpm run build:mcp-manifest && pnpm run build:react-manifest",
-    "build:mcp-manifest": "npx web-component-analyzer analyze \"components/*/*.ts\" --format json --outFile /tmp/wca-raw.json && npx tsx scripts/generate-mcp-manifest.ts",
+    "build:mcp-manifest": "npx web-component-analyzer analyze \"components/**/*.ts\" --format json --outFile /tmp/wca-raw.json && npx tsx scripts/generate-mcp-manifest.ts",
     "build:react-manifest": "npx tsx scripts/generate-react-manifest.ts",
     "build:cdn": "rm -rf cdn && vite build --config vite.config.cdn.ts",
     "build:react": "rm -rf react-wrappers/components react-wrappers/dist react-wrappers/index.ts && npx tsx scripts/generate-react-wrappers.ts && cd react-wrappers && npx tsc",
     "build:a2ui": "pnpm run build:a2ui:catalog && pnpm run build:a2ui:compile",
     "build:a2ui:catalog": "node a2ui/generate-catalog.mjs",
-    "build:a2ui:compile": "tsc --module esnext --moduleResolution bundler --target es2022 --lib es2022,dom,dom.iterable --strict --skipLibCheck --declaration --outDir a2ui a2ui/types.ts a2ui/registry.ts a2ui/renderer.ts a2ui/index.ts",
+    "build:a2ui:compile": "tsc --module esnext --moduleResolution bundler --target es2022 --lib es2022,dom,dom.iterable --strict --skipLibCheck --declaration --outDir a2ui a2ui/types.ts a2ui/registry.ts a2ui/renderer.ts a2ui/index.ts a2ui/stream/types.ts a2ui/stream/pointer.ts a2ui/stream/model.ts a2ui/stream/renderer.ts a2ui/stream/diff.ts a2ui/stream/index.ts",
     "a2ui:demo": "python3 -m http.server 8765",
     "storybook:react": "pnpm run build:react && cd react-wrappers && npx storybook dev -p 9009",
     "build-storybook:react": "pnpm run build:react && cd react-wrappers && npx storybook build -o dist-storybook",
@@ -33,7 +33,11 @@
     "format": "eslint-config --ext .ts,.html . --fix --ignore-path ../../.eslintignore",
     "publish:react": "cd react-wrappers && npm publish --access public",
     "release:publish": "node scripts/release.cjs --skip-lint --skip-tests --publish",
-    "version:bump": "node scripts/version-bump.cjs"
+    "version:bump": "node scripts/version-bump.cjs",
+    "test:a2ui": "npx tsx a2ui/smoke-test.mjs && npx tsx a2ui/stream/stream-test.mjs && npx tsx a2ui/stream/diff-test.mjs && node a2ui/render-audit.mjs --check && node a2ui/check-layer-parity.mjs",
+    "audit:render": "node a2ui/render-audit.mjs",
+    "audit:render:check": "node a2ui/render-audit.mjs --check",
+    "check:parity": "node a2ui/check-layer-parity.mjs"
   },
   "type": "module",
   "module": "lib/index.js",
@@ -91,12 +95,17 @@
       "types": "./a2ui/index.d.ts"
     },
     "./a2ui/catalog.json": "./a2ui/catalog.json",
+    "./a2ui/catalog.compact.json": "./a2ui/catalog.compact.json",
     "./a2ui/catalog-kg.json": "./a2ui/catalog-kg.json",
     "./a2ui/*": {
       "import": "./a2ui/*",
       "types": "./a2ui/*"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./a2ui/stream": {
+      "import": "./a2ui/stream/index.js",
+      "types": "./a2ui/stream/index.d.ts"
+    }
   },
   "repository": {
     "url": "https://github.com/tmorrowdev/Cre8-Components.git"