@incursa/ui-kit 1.7.0 → 1.9.0

package/dist/mcp/patterns/states.json

@@ -4,7 +4,7 @@
   "kind": "pattern",
   "searchKind": "pattern",
   "summary": "The non-happy-path surfaces B2B apps actually need.",
-  "body": "The non-happy-path surfaces B2B apps actually need.\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 Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n +\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n ?\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n ...\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n !\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n #\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n L\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n i\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n !\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.",
+  "body": "The non-happy-path surfaces B2B apps actually need.\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 Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.",
   "sourcePaths": [
     "states.html"
   ],
@@ -17,5 +17,5 @@
   "group": "patterns",
   "priority": 70,
   "includeInSearch": true,
-  "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\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 Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n +\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n ?\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n ...\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n !\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n #\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n L\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n i\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n !\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
+  "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\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 Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
 }

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, sparkline trends, and disclosure/dialog/drawer.\n Tables, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now. Sparklines are promoted because dense metric tables need a reusable accessible trend primitive.\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 Sparkline trend evidence\n\n Static pages can pass simple numeric values. Timestamped benchmark history can use the `points` JSON attribute or the `points` property.\n\n Markers and reference lines remain decorative support. The surrounding cell should still show the current value and delta.\n\n Benchmark\n Current\n History\n Delta\n\n HTTP/3 plaintext\n 5,510 rps\n\n +3.1%\n\n QPACK decode\n 1.42 ms\n\n Best\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, sparkline trends, and disclosure/dialog/drawer.\n Tables, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now. Sparklines are promoted because dense metric tables need a reusable accessible trend primitive.\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 Sparkline trend evidence\n\n Static pages can pass simple numeric values. Timestamped benchmark history can use the `points` JSON attribute or the `points` property.\n\n Markers and reference lines remain decorative support. The surrounding cell should still show the current value and delta.\n\n Benchmark\n Current\n History\n Delta\n\n HTTP/3 plaintext\n 5,510 rps\n\n +3.1%\n\n QPACK decode\n 1.42 ms\n\n Best\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"
 }