@incursa/ui-kit 1.7.0 → 1.8.0

package/dist/mcp/patterns/web-components.json

@@ -4,7 +4,7 @@
   "kind": "pattern",
   "searchKind": "pattern",
   "summary": "Browser-native components that stay inside the same CSS kit.",
-  "body": "Browser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n +\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```",
+  "body": "Browser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```",
   "sourcePaths": [
     "web-components.html"
   ],
@@ -20,5 +20,5 @@
   "canonicalMarkup": {
     "default": "<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>"
   },
-  "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n +\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html"
+  "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html"
 }