@tmorrow/cre8-wc 2.0.7 → 2.0.8

package/a2ui/catalog.json

@@ -1,12 +1,12 @@
 {
   "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.0.6",
+  "$id": "https://cre8.dev/a2ui/catalogs/cre8-wc/2.0.7",
   "title": "cre8-wc A2UI Catalog",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
   "x-a2ui": {
     "catalogId": "cre8-wc",
     "library": "@tmorrow/cre8-wc",
-    "libraryVersion": "2.0.6",
+    "libraryVersion": "2.0.7",
     "tagPrefix": "cre8",
     "framework": "Lit 3.3.1"
   },
@@ -776,10 +776,10 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "text-click": {
+          "split-button-text-click": {
             "detail": {}
           },
-          "dropdown-click": {
+          "split-button-dropdown-click": {
             "detail": {}
           }
         }
@@ -893,11 +893,11 @@
                 "x-kind": "property"
               },
               "colors": {
+                "description": "Default colors for datasets (uses cre8 design token colors).",
                 "type": "array",
                 "items": {
                   "type": "string"
                 },
-                "description": "Default colors for datasets (uses cre8 design token colors).",
                 "x-kind": "property"
               }
             }
@@ -905,13 +905,13 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "cre8-chart-click": {
+          "chart-click": {
             "detail": {}
           },
-          "cre8-chart-hover": {
+          "chart-hover": {
             "detail": {}
           },
-          "cre8-chart-ready": {
+          "chart-ready": {
             "detail": {}
           }
         }
@@ -947,6 +947,23 @@
                   "padded"
                 ],
                 "x-kind": "attribute"
+              },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "text": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "text"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
               }
             }
           },
@@ -1041,7 +1058,7 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "removeTagClicked": {
+          "remove-tag-click": {
             "detail": {}
           }
         }
@@ -1063,6 +1080,56 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
+              "columns": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "key": {
+                      "type": "string"
+                    },
+                    "width": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "label"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
+              "rows": {
+                "type": "array",
+                "items": {
+                  "oneOf": [
+                    {
+                      "type": "object",
+                      "additionalProperties": {
+                        "type": [
+                          "string",
+                          "number"
+                        ]
+                      }
+                    },
+                    {
+                      "type": "array",
+                      "items": {
+                        "type": [
+                          "string",
+                          "number"
+                        ]
+                      }
+                    }
+                  ]
+                },
+                "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`.",
+                "x-kind": "attribute"
+              },
               "caption": {
                 "description": "Specifies the caption/title of the table, visible to all users.\nIncreases accessibility of table.",
                 "type": "string",
@@ -1495,6 +1562,48 @@
                 "type": "string",
                 "x-kind": "attribute"
               },
+              "tags": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "text": {
+                      "type": "string"
+                    },
+                    "variant": {
+                      "type": "string",
+                      "enum": [
+                        "neutral",
+                        "branded",
+                        "neutral-hybrid"
+                      ]
+                    },
+                    "shape": {
+                      "type": "string",
+                      "enum": [
+                        "square",
+                        "round"
+                      ]
+                    },
+                    "type": {
+                      "type": "string",
+                      "enum": [
+                        "checkbox",
+                        "radio"
+                      ]
+                    },
+                    "disabled": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "text"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
               "fieldId": {
                 "description": "The unique id of the select",
                 "type": "string",
@@ -1529,6 +1638,39 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "heading": {
+                      "type": "string"
+                    },
+                    "content": {
+                      "type": "string"
+                    },
+                    "isActive": {
+                      "type": "boolean"
+                    },
+                    "headingTagVariant": {
+                      "type": "string",
+                      "enum": [
+                        "h1",
+                        "h2",
+                        "h3",
+                        "h4"
+                      ]
+                    }
+                  },
+                  "required": [
+                    "heading",
+                    "content"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
               "borderType": {
                 "description": "borderType",
                 "type": "string",
@@ -1677,6 +1819,26 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "text": {
+                      "type": "string"
+                    },
+                    "ariaLabel": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "text"
+                  ],
+                  "additionalProperties": false
+                },
+                "description": "Items for a data-driven dropdown. Set this and the dropdown builds its own\n`cre8-dropdown-item` children in the light DOM.",
+                "x-kind": "attribute"
+              },
               "buttonText": {
                 "description": "Dropdown header",
                 "type": "string",
@@ -1748,7 +1910,7 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "dropdown-item-selected": {
+          "dropdown-item-select": {
             "detail": {}
           }
         }
@@ -1858,7 +2020,7 @@
           "footer": "Custom footer content for the modal"
         },
         "x-events": {
-          "close-modal": {
+          "modal-close": {
             "detail": {}
           }
         }
@@ -1886,8 +2048,13 @@
                 "x-kind": "attribute"
               },
               "position": {
-                "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",
+                "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",
                 "type": "string",
+                "enum": [
+                  "top",
+                  "left",
+                  "right"
+                ],
                 "x-kind": "attribute"
               },
               "isVisibleOnScroll": {
@@ -1979,10 +2146,10 @@
           "footer": "Custom footer content for the popover panel"
         },
         "x-events": {
-          "open": {
+          "popover-open": {
             "detail": {}
           },
-          "close": {
+          "popover-close": {
             "detail": {}
           }
         }
@@ -2159,10 +2326,10 @@
           "trigger": "Named slot container for Tooltip element to trigger showing/hiding the Tooltip text"
         },
         "x-events": {
-          "open": {
+          "tooltip-open": {
             "detail": {}
           },
-          "close": {
+          "tooltip-close": {
             "detail": {}
           }
         }
@@ -2305,13 +2472,24 @@
                 "x-kind": "attribute"
               },
               "status": {
-                "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",
+                "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",
                 "type": "string",
+                "enum": [
+                  "error",
+                  "info",
+                  "warning",
+                  "success",
+                  "attention"
+                ],
                 "x-kind": "attribute"
               },
               "variant": {
-                "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",
+                "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",
                 "type": "string",
+                "enum": [
+                  "light",
+                  "white"
+                ],
                 "x-kind": "attribute"
               },
               "svg": {
@@ -2498,7 +2676,7 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "leftActionButtonClick": {
+          "percent-bar-left-action-click": {
             "detail": {}
           }
         }
@@ -2521,13 +2699,13 @@
             "additionalProperties": false,
             "properties": {
               "status": {
+                "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",
                 "type": "string",
                 "enum": [
                   "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",
                 "x-kind": "attribute"
               },
               "knockout": {
@@ -2583,6 +2761,18 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
+              "state": {
+                "description": "The state of the step.",
+                "type": "string",
+                "enum": [
+                  "error",
+                  "warning",
+                  "complete",
+                  "current",
+                  "incomplete"
+                ],
+                "x-kind": "attribute"
+              },
               "message": {
                 "description": "Optional message to display under the step name.",
                 "type": "string",
@@ -2593,11 +2783,6 @@
                 "type": "string",
                 "x-kind": "attribute"
               },
-              "state": {
-                "description": "The state of the step: 'complete', 'current', 'error',' incomplete', 'warning';",
-                "type": "string",
-                "x-kind": "attribute"
-              },
               "svg": {
                 "description": "An SVG string to use as the step icon.",
                 "type": "string",
@@ -2680,6 +2865,40 @@
                 "type": "string",
                 "x-kind": "attribute"
               },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "value": {
+                      "type": "string"
+                    },
+                    "checked": {
+                      "type": "boolean"
+                    },
+                    "disabled": {
+                      "type": "boolean"
+                    },
+                    "required": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "label"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
+              "name": {
+                "description": "Form control name shared by every generated item.",
+                "type": "string",
+                "x-kind": "attribute"
+              },
               "fieldNote": {
                 "description": "Checkbox container fieldnote",
                 "type": "string",
@@ -3264,7 +3483,7 @@
         "type": "object",
         "title": "cre8-multi-select",
         "x-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.",
         "required": [
           "component"
         ],
@@ -3377,7 +3596,7 @@
           "fieldNote": "Container for optional field note content"
         },
         "x-events": {
-          "selectedItemsChange": {
+          "multi-select-change": {
             "detail": {}
           }
         }
@@ -3404,6 +3623,40 @@
                 "type": "string",
                 "x-kind": "attribute"
               },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "value": {
+                      "type": "string"
+                    },
+                    "checked": {
+                      "type": "boolean"
+                    },
+                    "disabled": {
+                      "type": "boolean"
+                    },
+                    "required": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "label"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
+              "name": {
+                "description": "Form control name shared by every generated option.",
+                "type": "string",
+                "x-kind": "attribute"
+              },
               "fieldNote": {
                 "description": "Radio Field Note",
                 "type": "string",
@@ -4132,6 +4385,10 @@
               "status": {
                 "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.",
                 "type": "string",
+                "enum": [
+                  "brand",
+                  "knockout"
+                ],
                 "x-kind": "attribute"
               }
             }
@@ -4714,6 +4971,26 @@
             "type": "object",
             "additionalProperties": false,
             "properties": {
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "text": {
+                      "type": "string"
+                    },
+                    "href": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "text"
+                  ],
+                  "additionalProperties": false
+                },
+                "description": "Crumbs for a data-driven trail. Each becomes a `cre8-breadcrumbs-item`,\nwrapping a `cre8-text-link` when it has an `href`.",
+                "x-kind": "attribute"
+              },
               "navAriaLabel": {
                 "description": "aria-label attribute to designate at name for the nav. Can be override by user",
                 "default": "breadcrumbs",
@@ -5183,6 +5460,30 @@
                   "display"
                 ],
                 "x-kind": "attribute"
+              },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "text": {
+                      "type": "string"
+                    },
+                    "href": {
+                      "type": "string"
+                    },
+                    "isActive": {
+                      "type": "boolean"
+                    }
+                  },
+                  "required": [
+                    "text",
+                    "href"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
               }
             }
           },
@@ -5376,7 +5677,7 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "pagination.click": {
+          "pagination-change": {
             "detail": {}
           }
         }
@@ -5560,7 +5861,7 @@
         },
         "additionalProperties": false,
         "x-events": {
-          "tabSelected": {
+          "tab-select": {
             "detail": {}
           }
         }
@@ -5632,6 +5933,26 @@
                 "const": "sm",
                 "x-kind": "attribute"
               },
+              "items": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "label": {
+                      "type": "string"
+                    },
+                    "content": {
+                      "type": "string"
+                    }
+                  },
+                  "required": [
+                    "label"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              },
               "fullWidth": {
                 "description": "Displays a set of tabs with a spanning the width of the element",
                 "type": "boolean",
@@ -5721,7 +6042,7 @@
           "panel": "Container for each `cre8-tab-panel` content item"
         },
         "x-events": {
-          "tabChange": {
+          "tab-change": {
             "detail": {}
           }
         }
@@ -5913,7 +6234,37 @@
           "props": {
             "type": "object",
             "additionalProperties": false,
-            "properties": {}
+            "properties": {
+              "steps": {
+                "type": "array",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "name": {
+                      "type": "string"
+                    },
+                    "message": {
+                      "type": "string"
+                    },
+                    "state": {
+                      "type": "string",
+                      "enum": [
+                        "error",
+                        "warning",
+                        "complete",
+                        "current"
+                      ]
+                    }
+                  },
+                  "required": [
+                    "name"
+                  ],
+                  "additionalProperties": false
+                },
+                "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.",
+                "x-kind": "attribute"
+              }
+            }
           },
           "children": {
             "type": "array",
@@ -5955,13 +6306,13 @@
                   "title-default",
                   "title-small",
                   "label-large",
-                  "label",
+                  "label-default",
                   "label-small",
                   "meta-large",
                   "meta-default",
                   "meta-small"
                 ],
-                "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>",
                 "x-kind": "attribute"
               },
               "inverted": {
@@ -5970,9 +6321,17 @@
                 "x-kind": "attribute"
               },
               "tagVariant": {
-                "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>",
                 "default": "h5",
                 "type": "string",
+                "enum": [
+                  "h1",
+                  "h2",
+                  "h3",
+                  "h4",
+                  "h5",
+                  "h6"
+                ],
                 "x-kind": "property"
               },
               "brandColor": {