@tmorrow/cre8-wc 2.0.6 → 2.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "2.0.6",
+  "version": "2.0.8",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "license": "BSD-3-Clause",
   "scripts": {
@@ -13,7 +13,7 @@
     "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,10 @@
     "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",
+    "audit:render": "node a2ui/render-audit.mjs",
+    "audit:render:check": "node a2ui/render-audit.mjs --check"
   },
   "type": "module",
   "module": "lib/index.js",
@@ -96,7 +99,11 @@
       "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"

package/react-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.6",
+  "version": "2.0.8",
   "library": "@tmorrow/cre8-react",
   "componentPrefix": "Cre8",
   "description": "React wrappers for cre8 Web Components (@tmorrow/cre8-wc)",
@@ -368,11 +368,13 @@
           "type": "React.ReactNode",
           "description": "Slotted content."
         },
-        "onTextClick": {
-          "type": "(event: CustomEvent) => void"
+        "onSplitButtonTextClick": {
+          "type": "(event: CustomEvent) => void",
+          "description": "Fires when the main text button is clicked."
         },
-        "onDropdownClick": {
-          "type": "(event: CustomEvent) => void"
+        "onSplitButtonDropdownClick": {
+          "type": "(event: CustomEvent) => void",
+          "description": "Fires when the dropdown toggle is clicked."
         }
       },
       "examples": []
@@ -455,15 +457,15 @@
           "type": "string[]",
           "description": "Default colors for datasets (uses cre8 design token colors)."
         },
-        "onCre8ChartClick": {
+        "onChartClick": {
           "type": "(event: CustomEvent) => void",
           "description": "Fired when a chart element is clicked"
         },
-        "onCre8ChartHover": {
+        "onChartHover": {
           "type": "(event: CustomEvent) => void",
           "description": "Fired when hovering over chart elements"
         },
-        "onCre8ChartReady": {
+        "onChartReady": {
           "type": "(event: CustomEvent) => void",
           "description": "Fired when the chart is initialized"
         }
@@ -488,6 +490,10 @@
           ],
           "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."
+        },
         "children": {
           "type": "React.ReactNode",
           "description": "Slotted content."
@@ -532,7 +538,7 @@
           "type": "boolean",
           "description": "Disabled state for remove tag"
         },
-        "onRemoveTagClicked": {
+        "onRemoveTagClick": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the remove tag is clicked."
         }
@@ -550,6 +556,14 @@
       "category": "Data",
       "description": "Table component.",
       "props": {
+        "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."
@@ -788,6 +802,10 @@
           "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."
+        },
         "fieldId": {
           "type": "string",
           "description": "The unique id of the select"
@@ -805,6 +823,10 @@
       "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.",
       "props": {
+        "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."
+        },
         "borderType": {
           "type": "string",
           "values": [
@@ -893,6 +915,10 @@
       "category": "Disclosure",
       "description": "The Dropdown menu itself is a container that can host multiple interactive items, commonly formatted as a list",
       "props": {
+        "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."
+        },
         "buttonText": {
           "type": "string",
           "description": "Dropdown header"
@@ -933,7 +959,7 @@
           "type": "React.ReactNode",
           "description": "Slotted content."
         },
-        "onDropdownItemSelected": {
+        "onDropdownItemSelect": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`."
         }
@@ -991,7 +1017,7 @@
           "type": "React.ReactNode",
           "description": "Slotted content. Named slots (set slot=\"...\" on the child): header, footer"
         },
-        "onCloseModal": {
+        "onModalClose": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the modal is dismissed via the close button, overlay click, or Escape key."
         }
@@ -1010,7 +1036,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"
         },
         "isVisibleOnScroll": {
           "type": "boolean",
@@ -1048,11 +1079,11 @@
           "type": "React.ReactNode",
           "description": "Slotted content. Named slots (set slot=\"...\" on the child): trigger, header, footer"
         },
-        "onOpen": {
+        "onPopoverOpen": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the popover opens. `event.detail.isActive` is `true`."
         },
-        "onClose": {
+        "onPopoverClose": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the popover closes. `event.detail.isActive` is `false`."
         }
@@ -1150,11 +1181,11 @@
           "type": "React.ReactNode",
           "description": "Slotted content. Named slots (set slot=\"...\" on the child): trigger"
         },
-        "onOpen": {
+        "onTooltipOpen": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the tooltip is shown. `event.detail.isActive` is `true`."
         },
-        "onClose": {
+        "onTooltipClose": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the tooltip is hidden. `event.detail.isActive` is `false`."
         }
@@ -1250,18 +1281,34 @@
         },
         "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",
-          "description": "SVG as a raw string\n- For badges with icons, the icon is defined by this prop\n- Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n- Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`\n- [cre8-icons Github repo](https://git.express-scripts.com/ExpressScripts/cre8-icons) This is the Github\nrepo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons"
+          "description": "SVG as a raw string\n- For badges with icons, the icon is defined by this prop\n- Pass in a raw svg as a String. We use raw string loader for this but any method of getting raw svgs will do\n- Import example:`import svgFeedback from '@tmorrow/cre8-wc/icons/Feedback.svg?raw';`\n- [cre8-icons Github repo](https://github.com/tmorrowdev/cre8-icons) This is the Github\nrepo for Cre8 icons, which includes a link to the storybook as well as relavant information for new icons"
         }
       },
-      "examples": []
+      "examples": [
+        {
+          "description": "Light badge",
+          "jsx": "<Cre8Badge variant=\"light\" text=\"Badge\" />"
+        }
+      ]
     },
     {
       "name": "Cre8InlineAlert",
@@ -1382,8 +1429,9 @@
           "type": "boolean",
           "description": "The action-left icon-only tertiary button in the percent bar controls can be disabled."
         },
-        "onLeftActionButtonClick": {
-          "type": "(event: CustomEvent) => void"
+        "onPercentBarLeftActionClick": {
+          "type": "(event: CustomEvent) => void",
+          "description": "Fires when the left action button is clicked."
         }
       },
       "examples": []
@@ -1395,7 +1443,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.",
       "props": {
         "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": {
@@ -1432,6 +1485,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.",
       "props": {
+        "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."
@@ -1440,10 +1504,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."
@@ -1497,6 +1557,14 @@
           "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."
+        },
         "fieldNote": {
           "type": "string",
           "description": "Checkbox container fieldnote"
@@ -1891,7 +1959,7 @@
       "name": "Cre8MultiSelect",
       "tagName": "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.",
       "props": {
         "items": {
           "type": "string[]",
@@ -1952,7 +2020,7 @@
           "type": "React.ReactNode",
           "description": "Slotted content. Named slots (set slot=\"...\" on the child): fieldNote"
         },
-        "onSelectedItemsChange": {
+        "onMultiSelectChange": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection."
         }
@@ -1969,6 +2037,14 @@
           "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."
+        },
         "fieldNote": {
           "type": "string",
           "description": "Radio Field Note"
@@ -2393,6 +2469,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."
         }
       },
@@ -2707,6 +2787,10 @@
       "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.",
       "props": {
+        "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`."
+        },
         "navAriaLabel": {
           "type": "string",
           "default": "breadcrumbs",
@@ -2945,6 +3029,10 @@
           ],
           "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."
+        },
         "children": {
           "type": "React.ReactNode",
           "description": "Slotted content."
@@ -3051,7 +3139,7 @@
           "type": "React.ReactNode",
           "description": "Slotted content."
         },
-        "onPaginationClick": {
+        "onPaginationChange": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page."
         }
@@ -3151,7 +3239,7 @@
           "type": "React.ReactNode",
           "description": "Slotted content."
         },
-        "onTabSelected": {
+        "onTabSelect": {
           "type": "(event: CustomEvent) => void",
           "description": "Fires when the tab is clicked. `event.detail.index` is the tab's index."
         }
@@ -3193,6 +3281,10 @@
           "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."
+        },
         "fullWidth": {
           "type": "boolean",
           "description": "Displays a set of tabs with a spanning the width of the element"
@@ -3244,7 +3336,8 @@
           "description": "Slotted content. Named slots (set slot=\"...\" on the child): panel"
         },
         "onTabChange": {
-          "type": "(event: CustomEvent) => void"
+          "type": "(event: CustomEvent) => void",
+          "description": "Fires when the active tab changes. `event.detail` is `{ value, activeTabIndex }`."
         }
       },
       "examples": []
@@ -3359,6 +3452,10 @@
       "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.",
       "props": {
+        "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."
+        },
         "children": {
           "type": "React.ReactNode",
           "description": "Slotted content."
@@ -3374,7 +3471,7 @@
       "props": {
         "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",
@@ -3382,8 +3479,16 @@
         },
         "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",
@@ -3501,13 +3606,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": {
@@ -3527,15 +3632,16 @@
           "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": "<Cre8Card>\n  <Cre8Heading tagVariant=\"h2\" type=\"headline-default\">Sign In</Cre8Heading>\n  <Cre8Field label=\"Email\" type=\"email\" />\n  <Cre8Field label=\"Password\" type=\"password\" />\n  <Cre8Button text=\"Sign In\" variant=\"primary\" fullWidth />\n</Cre8Card>"
+      "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  <Cre8Card>\n    <Cre8Heading tagVariant=\"h2\" type=\"headline-default\">Sign In</Cre8Heading>\n    <Cre8Field label=\"Email\" name=\"email\" type=\"email\" autocomplete=\"email\" required />\n    <Cre8Field label=\"Password\" name=\"password\" type=\"password\" autocomplete=\"current-password\" required />\n    <Cre8Button text=\"Sign In\" variant=\"primary\" fullWidth type=\"submit\" />\n  </Cre8Card>\n</form>"
     },
     {
       "name": "Data Table",
@@ -3544,8 +3650,8 @@
     },
     {
       "name": "Page Layout",
-      "description": "Standard page with header, main content, and footer",
-      "template": "<Cre8Layout>\n  <Cre8Header>\n    <Cre8GlobalNav>\n      <span slot=\"logo\"><Cre8Logo /></span>\n      <Cre8GlobalNavItem href=\"/\">Home</Cre8GlobalNavItem>\n    </Cre8GlobalNav>\n  </Cre8Header>\n  <Cre8Main>\n    <Cre8LayoutContainer>\n      {/* Page content */}\n    </Cre8LayoutContainer>\n  </Cre8Main>\n  <Cre8Footer>\n    <span slot=\"copyright\">2024 Company Name</span>\n  </Cre8Footer>\n</Cre8Layout>"
+      "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": "<Cre8Layout>\n  <Cre8Header>\n    <Cre8Logo />\n    <Cre8GlobalNav>\n      <Cre8GlobalNavItem href=\"/\">Home</Cre8GlobalNavItem>\n    </Cre8GlobalNav>\n  </Cre8Header>\n  <Cre8Main>\n    <Cre8LayoutContainer>\n      {/* Page content */}\n    </Cre8LayoutContainer>\n  </Cre8Main>\n  <Cre8Footer>\n    <span>2024 Company Name</span>\n  </Cre8Footer>\n</Cre8Layout>"
     },
     {
       "name": "Alert Banner",
@@ -3554,13 +3660,13 @@
     },
     {
       "name": "Tabbed Content",
-      "description": "Content organized in tabs",
-      "template": "<Cre8Tabs>\n  <Cre8Tab label=\"Tab 1\" tabId=\"tab1\" selected />\n  <Cre8Tab label=\"Tab 2\" tabId=\"tab2\" />\n  <Cre8TabPanel tabId=\"tab1\" slot=\"panel\">Content for Tab 1</Cre8TabPanel>\n  <Cre8TabPanel tabId=\"tab2\" slot=\"panel\">Content for Tab 2</Cre8TabPanel>\n</Cre8Tabs>"
+      "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": "<Cre8Tabs>\n  <Cre8Tab>Tab 1</Cre8Tab>\n  <Cre8Tab>Tab 2</Cre8Tab>\n  <Cre8TabPanel slot=\"panel\">Content for Tab 1</Cre8TabPanel>\n  <Cre8TabPanel slot=\"panel\">Content for Tab 2</Cre8TabPanel>\n</Cre8Tabs>"
     },
     {
       "name": "Modal Dialog",
-      "description": "Modal with header, body, and footer actions",
-      "template": "<Cre8Modal 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    <Cre8Button text=\"Cancel\" variant=\"secondary\" />\n    <Cre8Button text=\"Confirm\" variant=\"primary\" />\n  </div>\n</Cre8Modal>"
+      "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": "<Cre8Modal 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    <Cre8Button text=\"Cancel\" variant=\"secondary\" type=\"button\" />\n    <Cre8Button text=\"Confirm\" variant=\"primary\" type=\"button\" />\n  </div>\n</Cre8Modal>"
     }
   ],
   "designTokens": {
@@ -3587,7 +3693,7 @@
   },
   "dependencies": {
     "@lit/react": "^1.0.8",
-    "@tmorrow/cre8-wc": "^2.0.6",
+    "@tmorrow/cre8-wc": "^2.0.8",
     "react": ">=18",
     "react-dom": ">=18"
   }

package/dist/assets/if-defined-HKKhGupN.js

@@ -1 +0,0 @@
-import{A as r}from"./iframe-dHvya7sk.js";const m=o=>o??r;export{m as o};

package/dist/assets/iframe-CWwoGI65.css

@@ -1 +0,0 @@
-:root{--size-base-unit: .5rem;--cre8-l-max-width: 82.5rem;--cre8-l-linelength-width: 42rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}

package/dist/assets/state-CfuknrX8.js

@@ -1 +0,0 @@
-import{n as r}from"./cre8-element-DfmMtHJO.js";function n(t){return r({...t,state:!0,attribute:!1})}export{n as r};

package/dist/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 130 512 252" role="img" aria-label="Cre8"><path d="M256 256 C 200 168 78 172 78 256 C 78 340 200 344 256 256 C 312 168 434 172 434 256 C 434 340 312 344 256 256 Z" fill="none" stroke="#1F2BEC" stroke-width="66" stroke-linejoin="round" stroke-linecap="round"/></svg>

package/dist/sb-addons/storybook-4/manager-bundle.js

@@ -1,8 +0,0 @@
-try{
-(()=>{var y=__STORYBOOK_API__,{ActiveTabs:_,Consumer:g,ManagerContext:k,Provider:f,RequestResponseError:h,Tag:j,addons:o,combineParameters:v,controlOrMetaKey:x,controlOrMetaSymbol:w,eventMatchesShortcut:S,eventToShortcut:C,experimental_MockUniversalStore:B,experimental_UniversalStore:P,experimental_getStatusStore:T,experimental_getTestProviderStore:F,experimental_requestResponse:O,experimental_useStatusStore:E,experimental_useTestProviderStore:U,experimental_useUniversalStore:A,getService:D,internal_checklistStore:M,internal_fullStatusStore:R,internal_fullTestProviderStore:z,internal_universalChecklistStore:I,internal_universalStatusStore:K,internal_universalTestProviderStore:G,isMacLike:N,isShortcutTaken:H,keyToSymbol:Y,merge:L,mockChannel:q,optionOrAltSymbol:J,registerService:V,shortcutMatchesShortcut:W,shortcutToAriaKeyshortcuts:$,shortcutToHumanString:Q,types:Z,useAddonState:X,useArgTypes:ee,useArgs:te,useChannel:se,useGlobalTypes:oe,useGlobals:re,useParameter:ne,useServiceCommand:ie,useServiceQuery:ae,useSharedState:le,useStoryPrepared:pe,useStorybookApi:ce,useStorybookState:me}=__STORYBOOK_API__;var _e=__STORYBOOK_THEMING__,{CacheProvider:ge,ClassNames:ke,Global:fe,ThemeProvider:he,background:je,color:ve,convert:xe,create:r,createCache:we,createGlobal:Se,createReset:Ce,css:Be,darken:Pe,ensure:Te,getPreferredColorScheme:Fe,ignoreSsrWarning:Oe,isPropValid:Ee,jsx:Ue,keyframes:Ae,lighten:De,srOnlyStyles:Me,srOnlyUnsetStyles:Re,styled:ze,themes:Ie,tokens:Ke,typography:Ge,useTheme:Ne,withTheme:He}=__STORYBOOK_THEMING__;var n={name:"@tmorrow/cre8-wc",version:"2.0.6",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: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","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","build:all":"pnpm run build:cdn && pnpm run build","build:watch":"vite build --watch","build:custom-elements.json":'npx @custom-elements-manifest/analyzer analyze --litelement --globs "components/*/*.ts" --outdir .storybook',test:"jest --verbose","test:jenkins":"jest --coverage=false --ci --runInBand --silent --bail","storybook-docs":"storybook dev --docs",storybook:"storybook dev -p 6006","build-storybook":"del-cli dist && storybook build -o dist",plop:"plop component","convert-scss-to-ts":"npx tsx ./scripts/convert-scss-to-ts.ts","plop:page":"plop page","plop:recipe":"plop recipe",lint:"eslint-config --ext .ts,.html . --ignore-path ../../.eslintignore",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"},type:"module",module:"lib/index.js",types:"lib/index.d.ts",keywords:["web-components","lit-element","typescript","lit"],author:"",files:["dist","lib","cdn","a2ui","mcp-manifest.json","react-manifest.json"],exports:{".":{import:"./lib/index.js",types:"./lib/index.d.ts"},"./cdn":{import:"./cdn/cre8-wc.esm.js",default:"./cdn/cre8-wc.min.js"},"./cdn/cre8-wc.esm.js":"./cdn/cre8-wc.esm.js","./cdn/cre8-wc.min.js":"./cdn/cre8-wc.min.js","./lib/components/*":{import:"./lib/components/*",types:"./lib/components/*",default:"./lib/components/*"},"./icons/*":{import:"./lib/icons/*",types:"./lib/icons/*",default:"./lib/icons/*"},"./themes/*":"./lib/design-tokens/brands/*/css/tokens_*.css","./themes/tmorrow-frost":"./lib/design-tokens/brands/tmorrow/css/tokens_tmorrow-frost.css","./themes/tmorrow-neon":"./lib/design-tokens/brands/tmorrow/css/tokens_tmorrow-neon.css","./styles/*":"./lib/design-tokens/core/scss/theming/*","./design-tokens/*":{import:"./lib/design-tokens/*",types:"./lib/design-tokens/*",default:"./lib/design-tokens/*"},"./global.d.ts":"./global.d.ts","./mcp-manifest.json":"./mcp-manifest.json","./react-manifest.json":"./react-manifest.json","./a2ui":{import:"./a2ui/index.js",types:"./a2ui/index.d.ts"},"./a2ui/catalog.json":"./a2ui/catalog.json","./a2ui/catalog-kg.json":"./a2ui/catalog-kg.json","./a2ui/*":{import:"./a2ui/*",types:"./a2ui/*"},"./package.json":"./package.json"},repository:{url:"https://github.com/tmorrowdev/Cre8-Components.git"},dependencies:{"@a11y/focus-trap":"^1.0.5","@lit/context":"^1.1.6","@lit/react":"^1.0.8","chart.js":"^4.5.1",classnames:"2.5.1",lit:"3.3.1","lit-html":"^3.3.1",nanoid:"^5.1.6",zod:"^4.1.12"},devDependencies:{"@babel/core":"^7.28.5","@babel/plugin-proposal-class-properties":"^7.18.6","@babel/plugin-proposal-decorators":"^7.28.0","@babel/plugin-transform-typescript":"^7.28.5","@babel/preset-env":"^7.28.5","@babel/preset-typescript":"^7.28.5","@custom-elements-manifest/analyzer":"^0.11.0","@lit-labs/cli":"^0.6.6","@mdx-js/react":"^3.1.1","@mdx-js/rollup":"^3.1.1","@open-wc/testing-helpers":"^3.0.1","@skypack/package-check":"^0.2.2","@storybook/addon-a11y":"10.5.4","@storybook/addon-docs":"10.5.4","@storybook/addon-mcp":"^0.5.0","@storybook/addon-themes":"10.5.4","@storybook/builder-vite":"10.5.4","@storybook/react":"10.5.4","@storybook/react-vite":"10.5.4","@storybook/web-components":"10.5.4","@storybook/web-components-vite":"10.5.4","@testing-library/jest-dom":"^6.9.1","@testing-library/user-event":"^14.6.1","@types/jest":"^30.0.0","@types/jest-axe":"^3.5.9","@types/resize-observer-browser":"^0.1.11","@types/sanitize-html":"^2.16.0","@typescript-eslint/eslint-plugin":"^8.46.3","@typescript-eslint/parser":"^8.46.3","@vitejs/plugin-react":"^5.2.0","@wc-toolkit/storybook-helpers":"^10.5.1","babel-jest":"^30.2.0",clone:"^2.1.2","css-parse":"2.0.0","del-cli":"^7.0.0",dotenv:"^17.2.3","element-internals-polyfill":"^3.0.2",glob:"^11.0.3","identity-obj-proxy":"^3.0.0",jest:"^30.2.0","jest-axe":"^10.0.0","jest-canvas-mock":"^2.5.2","jest-environment-jsdom":"^30.2.0","js-yaml":"^4.1.0",jsdom:"^27.1.0","lint-staged":"^16.2.6","loader-utils":"^3.3.1",marked:"^17.0.0",plop:"^4.0.4",postcss:"^8.5.6",react:"^19.2.0","react-docgen-typescript":"^2.4.0","react-dom":"^19.2.0","sanitize-html":"^2.17.0",sass:"^1.97.2",storybook:"10.5.4","style-dictionary":"^5.1.1","style-loader":"^4.0.0","ts-jest":"^29.4.5","ts-lit-plugin":"^2.0.2","ts-node":"^10.9.2",tsx:"^4.21.0",typescript:"^5.9.3",vite:"^7.2.2"},"lint-staged":{"*.ts":"eslint --cache --fix"},customElements:".storybook/custom-elements.json"};var l="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%20130%20512%20252%22%20role%3D%22img%22%20aria-label%3D%22Cre8%22%3E%3Cpath%20d%3D%22M256%20256%20C%20200%20168%2078%20172%2078%20256%20C%2078%20340%20200%20344%20256%20256%20C%20312%20168%20434%20172%20434%20256%20C%20434%20340%20312%20344%20256%20256%20Z%22%20fill%3D%22none%22%20stroke%3D%22%231F2BEC%22%20stroke-width%3D%2266%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E",i=r({base:"light",colorPrimary:"#3B82F6",colorSecondary:"#EC4899",appBg:"#ffffff",appContentBg:"#F8FAFC",appPreviewBg:"#ffffff",appBorderColor:"#E2E8F0",appBorderRadius:12,fontBase:'"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontCode:'ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace',textColor:"#0F172A",textMutedColor:"#64748B",textInverseColor:"#F8FAFC",barTextColor:"#475569",barSelectedColor:"#3B82F6",barHoverColor:"#EC4899",barBg:"#ffffff",buttonBg:"#F8FAFC",buttonBorder:"#E2E8F0",booleanBg:"#E2E8F0",booleanSelectedBg:"#3B82F6",inputBg:"#ffffff",inputBorder:"#E2E8F0",inputTextColor:"#0F172A",inputBorderRadius:8,brandTitle:`<div class="cre8-brand">
-      <img class="cre8-logo" src="${l}" alt="Cre8" />
-      <span class="cre8-name">Cre8</span>
-      <span class="cre8-sub">design system</span>
-      <span class="cre8-ver">v${n.version}</span>
-    </div>`,brandUrl:"/?path=/docs/documentation-changelog--docs",brandTarget:"_self"});o.setConfig({theme:i,sidebar:{showRoots:!0}});})();
-}catch(e){ console.error("[Storybook] One of your manager-entries failed: " + import.meta.url, e); }