@tmorrow/cre8-wc 2.0.4 → 2.0.5

package/mcp-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.4",
+  "version": "2.0.5",
   "library": "@tmorrow/cre8-wc",
   "tagPrefix": "cre8",
   "description": "cre8 Web Components is a library of presentational UI web components to be consumed by # web applications.",
@@ -160,7 +160,14 @@
           "description": "Whether the field is in a success state"
         }
       },
-      "slots": {},
+      "slots": {
+        "before": {
+          "description": "Content rendered before the button text, such as an icon"
+        },
+        "after": {
+          "description": "Content rendered after the button text, such as an icon"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": [
@@ -178,9 +185,18 @@
         "orientation": {
           "type": "\"responsive-full-width\"",
           "description": "Responsive Button Group (for modals)"
+        },
+        "gap": {
+          "type": "\"sm\"",
+          "description": "Gap between buttons\n- **sm** reduces gap to 8px (useful in compact contexts)"
+        }
+      },
+      "properties": {
+        "fullWidth": {
+          "type": "boolean",
+          "description": "Stretch button group to fill its container width"
         }
       },
-      "properties": {},
       "slots": {
         "default": {
           "description": "The component content"
@@ -344,7 +360,8 @@
       "description": "Split Button component.",
       "attributes": {
         "disabled": {
-          "type": "boolean"
+          "type": "boolean",
+          "description": "Disables both the main button and the dropdown toggle."
         },
         "size": {
           "type": "string",
@@ -549,7 +566,8 @@
       "slots": {},
       "events": {
         "removeTagClicked": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the remove tag is clicked."
         }
       },
       "cssProperties": {},
@@ -685,6 +703,12 @@
       "slots": {
         "default": {
           "description": "The component content"
+        },
+        "header": {
+          "description": "Content rendered in the table object header"
+        },
+        "footer": {
+          "description": "Content rendered in the table object footer"
         }
       },
       "events": {},
@@ -724,6 +748,9 @@
       "slots": {
         "default": {
           "description": "The component content"
+        },
+        "expandableContent": {
+          "description": "Content revealed when the row is expanded"
         }
       },
       "events": {},
@@ -736,7 +763,8 @@
       "description": "The tag component allows you to make selections, filter content, or trigger actions. While buttons are\nexpected to appear consistently and with familiar calls to actions, tags should appear dynamically\nas a group of multiple interactions elements. It is a flexible\ncomponent that comes in the following types:\n - **radio**  Clicking a Radio Button causes it to change color. These tags only allow\none option to be chosen and can be used in place of radio button when they need to be listed\nhorizontally\n\n - **checkbox** It allows for selecting options, It can be toggled on and off.",
       "attributes": {
         "text": {
-          "type": "string"
+          "type": "string",
+          "description": "The text label displayed inside the tag."
         },
         "variant": {
           "type": "string",
@@ -807,7 +835,8 @@
       "slots": {},
       "events": {
         "change": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the tag is clicked while enabled. `event.detail` is `{ isSelected, type }`."
         }
       },
       "cssProperties": {},
@@ -834,7 +863,11 @@
           "description": "The unique id of the select"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "The `cre8-tag` children of the list"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -861,7 +894,11 @@
           "description": "\nWhen it is true, the inner dividers are displayed;\nif it is false, the inner dividers are not displayed"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "The `cre8-accordion-item` children to group"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -924,6 +961,9 @@
       "slots": {
         "default": {
           "description": "The body of the accordion item will be any valid html\ninserted between the cre8-accordion-item opening and closing tags."
+        },
+        "heading": {
+          "description": "Custom heading content, used when the `heading` property is not set."
         }
       },
       "events": {},
@@ -956,7 +996,11 @@
           "type": "HTMLElement"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "The `cre8-dropdown-item` children of the menu"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -968,13 +1012,19 @@
       "attributes": {},
       "properties": {
         "ariaLabel": {
-          "type": "string"
+          "type": "string",
+          "description": "The accessible label for the item. Falls back to the item's text content when unset."
+        }
+      },
+      "slots": {
+        "default": {
+          "description": "The label content for the dropdown item."
         }
       },
-      "slots": {},
       "events": {
         "dropdown-item-selected": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the item is clicked. `event.detail.originalEvent` holds the source `MouseEvent`."
         }
       },
       "cssProperties": {},
@@ -1032,9 +1082,20 @@
       "slots": {
         "default": {
           "description": "The component content"
+        },
+        "header": {
+          "description": "Custom header content for the modal"
+        },
+        "footer": {
+          "description": "Custom footer content for the modal"
+        }
+      },
+      "events": {
+        "close-modal": {
+          "detail": {},
+          "description": "Fires when the modal is dismissed via the close button, overlay click, or Escape key."
         }
       },
-      "events": {},
       "cssProperties": {},
       "examples": []
     },
@@ -1089,14 +1150,25 @@
       "slots": {
         "default": {
           "description": "The component content"
+        },
+        "trigger": {
+          "description": "The element that toggles the popover open and closed"
+        },
+        "header": {
+          "description": "Custom header content for the popover panel"
+        },
+        "footer": {
+          "description": "Custom footer content for the popover panel"
         }
       },
       "events": {
         "open": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the popover opens. `event.detail.isActive` is `true`."
         },
         "close": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the popover closes. `event.detail.isActive` is `false`."
         }
       },
       "cssProperties": {},
@@ -1206,10 +1278,12 @@
       },
       "events": {
         "open": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the tooltip is shown. `event.detail.isActive` is `true`."
         },
         "close": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the tooltip is hidden. `event.detail.isActive` is `false`."
         }
       },
       "cssProperties": {},
@@ -1248,7 +1322,8 @@
             "subtle",
             "strong"
           ],
-          "default": "subtle"
+          "default": "subtle",
+          "description": "The alert emphasis. `strong` uses a filled background; pair contained buttons/links with their `inverted` prop."
         },
         "dismissed": {
           "type": "boolean",
@@ -1258,7 +1333,8 @@
       "properties": {
         "iconAlert": {
           "type": "string",
-          "default": "undefined"
+          "default": "undefined",
+          "description": "Overrides the default status icon. Accepts a cre8 icon name."
         },
         "iconTitle": {
           "type": "string",
@@ -1266,18 +1342,27 @@
         },
         "headerText": {
           "type": "string",
-          "default": "undefined"
+          "default": "undefined",
+          "description": "The alert heading text."
         },
         "ctaBody": {
           "type": "string",
-          "default": "undefined"
+          "default": "undefined",
+          "description": "Text content for the call-to-action area. Superseded by the `cta` slot when provided."
         },
         "notDismissible": {
           "type": "boolean",
           "description": "Dismissable property\n1) Adds the ability to close when toggled to true"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "The alert body content"
+        },
+        "cta": {
+          "description": "Container for a call-to-action button or link"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": [
@@ -1690,13 +1775,22 @@
           "description": "The type of form control (text, checkbox, radio, etc.)"
         }
       },
-      "slots": {},
+      "slots": {
+        "fieldNote": {
+          "description": "Container for optional field note content"
+        }
+      },
       "events": {
         "change": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the checkbox is toggled. `event.detail` is `{ name, value }`."
+        }
+      },
+      "cssProperties": {
+        "--cre8-border-radius-checkbox": {
+          "description": "border radius of the checkbox box; falls back to --cre8-border-radius-small"
         }
       },
-      "cssProperties": {},
       "examples": []
     },
     {
@@ -1719,7 +1813,7 @@
         "label": {
           "type": "string",
           "default": "Label",
-          "description": "The required label that appears above the input"
+          "description": "The label text for the date picker field."
         },
         "max": {
           "type": "string | number",
@@ -1819,7 +1913,11 @@
           "type": "boolean"
         }
       },
-      "slots": {},
+      "slots": {
+        "fieldNote": {
+          "description": "Container for optional field note content"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -1937,7 +2035,11 @@
           "description": "Changes the component's treatment to represent a success state"
         }
       },
-      "slots": {},
+      "slots": {
+        "fieldNote": {
+          "description": "Container for optional field note content"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -2033,10 +2135,15 @@
           "type": "boolean"
         }
       },
-      "slots": {},
+      "slots": {
+        "fieldNote": {
+          "description": "Container for optional field note content"
+        }
+      },
       "events": {
         "selectedItemsChange": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection."
         }
       },
       "cssProperties": {},
@@ -2238,7 +2345,8 @@
       },
       "events": {
         "change": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the selected option changes. `event.detail` is `{ name, value }`."
         }
       },
       "cssProperties": {},
@@ -2477,6 +2585,7 @@
           "type": "string",
           "values": [
             "bare",
+            "compact",
             "horizontal",
             "horizontal-bare"
           ],
@@ -2633,6 +2742,10 @@
         "imgAlt": {
           "type": "string",
           "description": "Image alt text"
+        },
+        "hasOverlay": {
+          "type": "boolean",
+          "description": "Renders a dark overlay between the background image and the content for legibility."
         }
       },
       "slots": {
@@ -2758,6 +2871,9 @@
       "slots": {
         "default": {
           "description": "The content of the section should go here.\nIt could be a cre8-text-passage, a cre8-card or any other block level html."
+        },
+        "header": {
+          "description": "Custom header content, rendered in place of the `headline` property"
         }
       },
       "events": {},
@@ -2782,6 +2898,10 @@
         "imgAlt": {
           "type": "string",
           "description": "Image alt text"
+        },
+        "aspectRatio": {
+          "type": "string",
+          "description": "CSS aspect-ratio for the image (e.g. \"4/3\", \"16/9\", \"1\"). Defaults to natural image ratio."
         }
       },
       "slots": {
@@ -2808,6 +2928,9 @@
       "slots": {
         "default": {
           "description": "The page header content"
+        },
+        "titleAfter": {
+          "description": "Content rendered after the heading text, inside the title element"
         }
       },
       "events": {},
@@ -2828,7 +2951,8 @@
           "description": "Icon name (this method of passing in svgs is to be deprecated)"
         },
         "svg": {
-          "type": "string"
+          "type": "string",
+          "description": "Raw SVG markup to render. Preferred over `name`/sprite-path icons."
         }
       },
       "properties": {
@@ -2988,6 +3112,12 @@
       "slots": {
         "default": {
           "description": "The label for the navigation item"
+        },
+        "itemBefore": {
+          "description": "Content rendered before the item label, such as an icon"
+        },
+        "itemAfter": {
+          "description": "Content rendered after the item label, such as an icon"
         }
       },
       "events": {},
@@ -3013,6 +3143,12 @@
       "slots": {
         "default": {
           "description": "The header content"
+        },
+        "top": {
+          "description": "Content rendered above the main header row"
+        },
+        "bottom": {
+          "description": "Content rendered below the main header row"
         }
       },
       "events": {},
@@ -3096,7 +3232,14 @@
           "description": "Link with no underline"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "The link text content"
+        },
+        "badge": {
+          "description": "Container for an optional badge displayed alongside the link"
+        }
+      },
       "events": {},
       "cssProperties": {},
       "examples": []
@@ -3173,6 +3316,12 @@
       "slots": {
         "default": {
           "description": "The default slot to put badges or other Components"
+        },
+        "itemBefore": {
+          "description": "Content rendered before the link text, such as an icon"
+        },
+        "itemAfter": {
+          "description": "Content rendered after the link text, such as an icon"
         }
       },
       "events": {},
@@ -3232,7 +3381,8 @@
           "type": "boolean"
         },
         "currentPage": {
-          "type": "number"
+          "type": "number",
+          "description": "The currently active page (1-based). Setting it programmatically navigates the pagination."
         },
         "elementDefinitions": {
           "type": "{ 'cre8-button': typeof Cre8Button; }"
@@ -3247,10 +3397,15 @@
           "type": "number"
         }
       },
-      "slots": {},
+      "slots": {
+        "default": {
+          "description": "Optional content rendered alongside the pagination controls"
+        }
+      },
       "events": {
         "pagination.click": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page."
         }
       },
       "cssProperties": {
@@ -3330,6 +3485,12 @@
       "slots": {
         "default": {
           "description": "The label for the navigation item"
+        },
+        "itemBefore": {
+          "description": "Content rendered before the item label, such as an icon"
+        },
+        "itemAfter": {
+          "description": "Content rendered after the item label, such as an icon"
         }
       },
       "events": {},
@@ -3372,7 +3533,8 @@
       },
       "events": {
         "tabSelected": {
-          "detail": {}
+          "detail": {},
+          "description": "Fires when the tab is clicked. `event.detail.index` is the tab's index."
         }
       },
       "cssProperties": {},
@@ -3679,6 +3841,9 @@
       "slots": {
         "default": {
           "description": "The component content"
+        },
+        "linkAfter": {
+          "description": "Content rendered after the link text, such as an icon"
         }
       },
       "events": {},

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@tmorrow/cre8-wc",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "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",
+    "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",
@@ -49,7 +50,8 @@
     "lib",
     "cdn",
     "a2ui",
-    "mcp-manifest.json"
+    "mcp-manifest.json",
+    "react-manifest.json"
   ],
   "exports": {
     ".": {
@@ -79,11 +81,13 @@
     },
     "./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/*"
@@ -115,6 +119,7 @@
     "@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.0.6",
     "@storybook/addon-docs": "10.0.6",
@@ -134,6 +139,7 @@
     "@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",
@@ -174,4 +180,4 @@
     "*.ts": "eslint --cache --fix"
   },
   "customElements": ".storybook/custom-elements.json"
-}
+}