@incursa/ui-kit 1.5.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/LLMS.txt +4 -4
  2. package/README.md +46 -6
  3. package/dist/inc-design-language.css +192 -35
  4. package/dist/inc-design-language.css.map +1 -1
  5. package/dist/inc-design-language.min.css +1 -1
  6. package/dist/inc-design-language.min.css.map +1 -1
  7. package/dist/mcp/ai/agent-instructions.json +21 -0
  8. package/dist/mcp/ai/llms-txt.json +21 -0
  9. package/dist/mcp/components/buttons.json +29 -0
  10. package/dist/mcp/components/cards.json +29 -0
  11. package/dist/mcp/components/filter-bars.json +28 -0
  12. package/dist/mcp/components/form-choices.json +29 -0
  13. package/dist/mcp/components/forms.json +29 -0
  14. package/dist/mcp/components/interaction.json +28 -0
  15. package/dist/mcp/components/layout.json +28 -0
  16. package/dist/mcp/components/metrics.json +28 -0
  17. package/dist/mcp/components/states.json +28 -0
  18. package/dist/mcp/components/status.json +28 -0
  19. package/dist/mcp/components/tables.json +32 -0
  20. package/dist/mcp/components/utilities.json +28 -0
  21. package/dist/mcp/examples/data-grid-advanced.json +22 -0
  22. package/dist/mcp/examples/demo.json +24 -0
  23. package/dist/mcp/examples/forms-and-validation.json +21 -0
  24. package/dist/mcp/examples/native-patterns.json +21 -0
  25. package/dist/mcp/examples/overlay-workflows.json +22 -0
  26. package/dist/mcp/examples/record-detail.json +21 -0
  27. package/dist/mcp/examples/reference.json +23 -0
  28. package/dist/mcp/examples/states.json +21 -0
  29. package/dist/mcp/examples/web-components.json +24 -0
  30. package/dist/mcp/examples/work-queue.json +21 -0
  31. package/dist/mcp/guides/allowed-web-component-families.json +19 -0
  32. package/dist/mcp/guides/choose-css-vs-scss-vs-js-vs-web-components.json +20 -0
  33. package/dist/mcp/guides/customization-order.json +20 -0
  34. package/dist/mcp/guides/decision-tree.json +28 -0
  35. package/dist/mcp/guides/guardrails.json +20 -0
  36. package/dist/mcp/guides/install.json +31 -0
  37. package/dist/mcp/guides/latest.json +25 -0
  38. package/dist/mcp/guides/overview.json +26 -0
  39. package/dist/mcp/guides/package-metadata.json +25 -0
  40. package/dist/mcp/guides/update.json +26 -0
  41. package/dist/mcp/guides/when-to-use-css-first.json +20 -0
  42. package/dist/mcp/install.json +36 -0
  43. package/dist/mcp/patterns/data-grid-advanced.json +22 -0
  44. package/dist/mcp/patterns/demo.json +24 -0
  45. package/dist/mcp/patterns/forms-and-validation.json +21 -0
  46. package/dist/mcp/patterns/native-patterns.json +21 -0
  47. package/dist/mcp/patterns/overlay-workflows.json +22 -0
  48. package/dist/mcp/patterns/record-detail.json +21 -0
  49. package/dist/mcp/patterns/reference.json +24 -0
  50. package/dist/mcp/patterns/states.json +21 -0
  51. package/dist/mcp/patterns/web-components.json +24 -0
  52. package/dist/mcp/patterns/work-queue.json +21 -0
  53. package/dist/mcp/resources.json +2100 -0
  54. package/dist/mcp/search-index.json +827 -0
  55. package/dist/mcp/specs/control-conventions.json +21 -0
  56. package/dist/mcp/specs/public-surface.json +21 -0
  57. package/dist/mcp/specs/requirements-index.json +21 -0
  58. package/dist/mcp/specs/verification-index.json +21 -0
  59. package/dist/mcp/update.json +24 -0
  60. package/dist/mcp/worker.mjs +59959 -0
  61. package/dist/mcp/worker.mjs.map +7 -0
  62. package/dist/web-components/README.md +10 -4
  63. package/dist/web-components/RUNTIME-NOTES.md +7 -2
  64. package/dist/web-components/components/actions.js +557 -0
  65. package/dist/web-components/components/collections.js +272 -0
  66. package/dist/web-components/components/dom-helpers.js +46 -0
  67. package/dist/web-components/components/feedback.js +165 -0
  68. package/dist/web-components/index.js +4350 -813
  69. package/package.json +19 -8
  70. package/src/inc-design-language.scss +193 -35
  71. package/src/mcp/worker.ts +858 -0
  72. package/src/web-components/README.md +10 -4
  73. package/src/web-components/RUNTIME-NOTES.md +7 -2
  74. package/src/web-components/components/actions.js +557 -0
  75. package/src/web-components/components/collections.js +272 -0
  76. package/src/web-components/components/dom-helpers.js +46 -0
  77. package/src/web-components/components/feedback.js +165 -0
  78. package/src/web-components/index.js +53 -847
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/filter-bars",
3
+ "title": "Filter bars",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Dense filter toolbars, chips, and bulk-action bars.",
7
+ "body": "Dense filter toolbars, chips, and bulk-action bars.\n\nValidation And Filter Toolbars\n\n There are 2 issues to fix\n\n Contract number is required.\n Billing period must be selected.\n\n Contract number\n\n Contract number is required.\n\n Export contact\n\n Email looks valid.\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Status: Needs review ×\n Owner: AP Team ×\n\n Save View\n Apply\n\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n\nCanonical markup:\n\n```html\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "filters",
14
+ "filter bar",
15
+ "bulk bar",
16
+ "filter bars"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/forms"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>"
26
+ },
27
+ "searchText": "Filter bars\nDense filter toolbars, chips, and bulk-action bars.\nDense filter toolbars, chips, and bulk-action bars.\n\nValidation And Filter Toolbars\n\n There are 2 issues to fix\n\n Contract number is required.\n Billing period must be selected.\n\n Contract number\n\n Contract number is required.\n\n Export contact\n\n Email looks valid.\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Status: Needs review ×\n Owner: AP Team ×\n\n Save View\n Apply\n\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n\nCanonical markup:\n\n```html\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n```\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\nfilters\nfilter bar\nbulk bar\nfilter bars\nreference.html"
28
+ }
@@ -0,0 +1,29 @@
1
+ {
2
+ "uri": "ui-kit://components/form-choices",
3
+ "title": "Form choices",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Checkbox, radio, and switch choice groups.",
7
+ "body": "Checkbox, radio, and switch choice groups.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "choices",
14
+ "checkboxes",
15
+ "radios",
16
+ "switches",
17
+ "form choices"
18
+ ],
19
+ "relatedUris": [
20
+ "ui-kit://components/forms"
21
+ ],
22
+ "group": "components",
23
+ "priority": 85,
24
+ "includeInSearch": true,
25
+ "canonicalMarkup": {
26
+ "default": "<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>"
27
+ },
28
+ "searchText": "Form choices\nCheckbox, radio, and switch choice groups.\nCheckbox, radio, and switch choice groups.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n```\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\nchoices\ncheckboxes\nradios\nswitches\nform choices\nreference.html"
29
+ }
@@ -0,0 +1,29 @@
1
+ {
2
+ "uri": "ui-kit://components/forms",
3
+ "title": "Forms",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Form fields, selects, textareas, input groups, and validation basics.",
7
+ "body": "Form fields, selects, textareas, input groups, and validation basics.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "form fields",
14
+ "inputs",
15
+ "form",
16
+ "forms"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/form-choices",
20
+ "ui-kit://components/filter-bars"
21
+ ],
22
+ "group": "components",
23
+ "priority": 85,
24
+ "includeInSearch": true,
25
+ "canonicalMarkup": {
26
+ "default": "<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>"
27
+ },
28
+ "searchText": "Forms\nForm fields, selects, textareas, input groups, and validation basics.\nForm fields, selects, textareas, input groups, and validation basics.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n```\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\nform fields\ninputs\nform\nforms\nreference.html"
29
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/interaction",
3
+ "title": "Interaction",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Native controls, disclosure, menu, progress, and dialog launch hooks.",
7
+ "body": "Native controls, disclosure, menu, progress, and dialog launch hooks.\n\nNative Controls\n\n Billing summary\n 3 items\n\n Native details\n\n Example disclosure body.\n\n AP\n\n Queue Actions\n Summary-based menu\n\n Quick actions\n Export current view\n Save filter preset\n\n Import completion\n 72%\n\n Data quality\n 74%\n\n Launch Native Dialog\n Launch Native Drawer\n\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n\nCanonical markup:\n\n```html\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "native controls",
14
+ "dialogs",
15
+ "interaction hooks",
16
+ "interaction"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://patterns/overlay-workflows"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>"
26
+ },
27
+ "searchText": "Interaction\nNative controls, disclosure, menu, progress, and dialog launch hooks.\nNative controls, disclosure, menu, progress, and dialog launch hooks.\n\nNative Controls\n\n Billing summary\n 3 items\n\n Native details\n\n Example disclosure body.\n\n AP\n\n Queue Actions\n Summary-based menu\n\n Quick actions\n Export current view\n Save filter preset\n\n Import completion\n 72%\n\n Data quality\n 74%\n\n Launch Native Dialog\n Launch Native Drawer\n\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n\nCanonical markup:\n\n```html\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n```\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\nnative controls\ndialogs\ninteraction hooks\ninteraction\nreference.html"
28
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/layout",
3
+ "title": "Layout",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Page framing, breadcrumbs, and shell wrappers.",
7
+ "body": "Page framing, breadcrumbs, and shell wrappers.\n\nPage Framing\n\n Examples\n Reference\n\n Breadcrumb body wrapper\n Use the canonical page wrapper when you want a breadcrumb strip and body stack without introducing another bespoke shell.\n\n Secondary action\n Primary action\n\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "page framing",
14
+ "shell",
15
+ "breadcrumb body",
16
+ "layout"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/cards"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>"
26
+ },
27
+ "searchText": "Layout\nPage framing, breadcrumbs, and shell wrappers.\nPage framing, breadcrumbs, and shell wrappers.\n\nPage Framing\n\n Examples\n Reference\n\n Breadcrumb body wrapper\n Use the canonical page wrapper when you want a breadcrumb strip and body stack without introducing another bespoke shell.\n\n Secondary action\n Primary action\n\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n```\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\npage framing\nshell\nbreadcrumb body\nlayout\nreference.html"
28
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/metrics",
3
+ "title": "Metrics",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Summary overview and summary block metrics.",
7
+ "body": "Summary overview and summary block metrics.\n\nCards, Metrics, And Empty States\n\n Total Revenue\n\n $247,832\n\n Active Projects\n\n 12\n In Progress\n\n Exceptions\n\n 4\n\n Open Items\n Updated 10m ago\n\n 18\n\n Queue Health\n\n 92%\n On track\n\n Approvals\n\n 7\n Waiting\n\n Exceptions\n\n 4\n Needs review\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<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>\n\nCanonical markup:\n\n```html\n<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "summary overview",
14
+ "summary block",
15
+ "dashboard metrics",
16
+ "metrics"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/cards"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>"
26
+ },
27
+ "searchText": "Metrics\nSummary overview and summary block metrics.\nSummary overview and summary block metrics.\n\nCards, Metrics, And Empty States\n\n Total Revenue\n\n $247,832\n\n Active Projects\n\n 12\n In Progress\n\n Exceptions\n\n 4\n\n Open Items\n Updated 10m ago\n\n 18\n\n Queue Health\n\n 92%\n On track\n\n Approvals\n\n 7\n Waiting\n\n Exceptions\n\n 4\n Needs review\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<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>\n\nCanonical markup:\n\n```html\n<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>\n```\n<section class=\"inc-summary-overview inc-summary-overview--3-col\">\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<section class=\"inc-summary-overview inc-summary-overview--4-col\">\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header inc-summary-block__header--with-action\">\n <span>Open Items</span>\n <span class=\"inc-summary-block__header-action\">Updated 10m ago</span>\n </div>\n <div class=\"inc-summary-block__body inc-summary-block__body--left\">\n <div class=\"inc-summary-block__value inc-summary-block__value--large\">18</div>\n </div>\n </article>\n <article class=\"inc-summary-block\">\n <div class=\"inc-summary-block__header\">Queue Health</div>\n <div class=\"inc-summary-block__body inc-summary-block__body--right\">\n <div class=\"inc-summary-block__value inc-summary-block__value--small\">92%</div>\n <span class=\"inc-summary-block__status-badge inc-summary-block__status-badge--approved\">On track</span>\n </div>\n </article>\n <article class=\"inc-summary-block\">...</article>\n <article class=\"inc-summary-block\">...</article>\n</section>\n\n<div class=\"inc-empty-state\">\n <div class=\"inc-empty-state__content\">\n <div class=\"inc-empty-state__icon\">+</div>\n <h3 class=\"inc-heading inc-heading--h3\">No saved views</h3>\n <p class=\"inc-text inc-text--regular inc-text--muted\">Create a named filter set...</p>\n <div class=\"inc-empty-state__actions\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Dismiss</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Create View</button>\n </div>\n </div>\n</div>\nsummary overview\nsummary block\ndashboard metrics\nmetrics\nreference.html"
28
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/states",
3
+ "title": "States",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Operational states, permission banners, and toast feedback surfaces.",
7
+ "body": "Operational states, permission banners, and toast feedback surfaces.\n\nOperational States And Feedback\n\n ?\n\n No results matched\n Distinct from the create-first empty state.\n\n !\n\n Export failed\n Use a proper failure surface, not just a muted paragraph.\n\n #\n\n Finance Manager role required\n Show when an action is visible but intentionally unavailable.\n\n i\n\n View saved\n Use for asynchronous success or background-status messages.\n\n<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "state panel",
14
+ "feedback",
15
+ "operational states",
16
+ "states"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/status"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>"
26
+ },
27
+ "searchText": "States\nOperational states, permission banners, and toast feedback surfaces.\nOperational states, permission banners, and toast feedback surfaces.\n\nOperational States And Feedback\n\n ?\n\n No results matched\n Distinct from the create-first empty state.\n\n !\n\n Export failed\n Use a proper failure surface, not just a muted paragraph.\n\n #\n\n Finance Manager role required\n Show when an action is visible but intentionally unavailable.\n\n i\n\n View saved\n Use for asynchronous success or background-status messages.\n\n<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\n```\n<div class=\"inc-state-panel inc-state-panel--results\">...</div>\n<div class=\"inc-state-panel inc-state-panel--error\">...</div>\n\n<div class=\"inc-permission-banner\">\n <div class=\"inc-permission-banner__icon\">#</div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\nstate panel\nfeedback\noperational states\nstates\nreference.html"
28
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/status",
3
+ "title": "Status",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Status badges and alert surfaces.",
7
+ "body": "Status badges and alert surfaces.\n\nBadges And Alerts\n\n Approved\n Pending\n Rejected\n Imported\n\n Information alert text.\n Warning alert text.\n Danger alert text.\n\n<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>\n\nCanonical markup:\n\n```html\n<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "badge",
14
+ "alert",
15
+ "feedback status",
16
+ "status"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/states"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>"
26
+ },
27
+ "searchText": "Status\nStatus badges and alert surfaces.\nStatus badges and alert surfaces.\n\nBadges And Alerts\n\n Approved\n Pending\n Rejected\n Imported\n\n Information alert text.\n Warning alert text.\n Danger alert text.\n\n<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>\n\nCanonical markup:\n\n```html\n<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>\n```\n<span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span>\n<span class=\"inc-badge inc-badge--warning inc-badge--pill\">Pending</span>\n<span class=\"inc-badge inc-badge--danger inc-badge--pill\">Rejected</span>\n<span class=\"inc-badge inc-badge--info inc-badge--pill\">Imported</span>\n\n<div class=\"inc-alert inc-alert--info\">Information alert text.</div>\n<div class=\"inc-alert inc-alert--warning\">Warning alert text.</div>\n<div class=\"inc-alert inc-alert--danger\">Danger alert text.</div>\nbadge\nalert\nfeedback status\nstatus\nreference.html"
28
+ }
@@ -0,0 +1,32 @@
1
+ {
2
+ "uri": "ui-kit://components/tables",
3
+ "title": "Tables",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Dense tables, list groups, and row-oriented collection markup.",
7
+ "body": "Dense tables, list groups, and row-oriented collection markup.\n\nTables And Lists\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 Needs Review\n March Closeout\n Projects Missing Billing Period\n\n Inbox\n Assigned to me\n\n First review pass\n Secondary approval\n Final export\n\n Lien Waiver Package\n Last updated 14 minutes ago\n\n Open\n\n Compliance Exceptions\n 2 unresolved items\n\n Review\n\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "table",
14
+ "data table",
15
+ "lists",
16
+ "tables"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/utilities",
20
+ "ui-kit://components/layout"
21
+ ],
22
+ "group": "components",
23
+ "priority": 85,
24
+ "includeInSearch": true,
25
+ "canonicalMarkup": {
26
+ "default": "<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>",
27
+ "variants": {
28
+ "families": "<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>"
29
+ }
30
+ },
31
+ "searchText": "Tables\nDense tables, list groups, and row-oriented collection markup.\nDense tables, list groups, and row-oriented collection markup.\n\nTables And Lists\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 Needs Review\n March Closeout\n Projects Missing Billing Period\n\n Inbox\n Assigned to me\n\n First review pass\n Secondary approval\n Final export\n\n Lien Waiver Package\n Last updated 14 minutes ago\n\n Open\n\n Compliance Exceptions\n 2 unresolved items\n\n Review\n\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n```\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\ntable\ndata table\nlists\ntables\nreference.html"
32
+ }
@@ -0,0 +1,28 @@
1
+ {
2
+ "uri": "ui-kit://components/utilities",
3
+ "title": "Utilities",
4
+ "kind": "component",
5
+ "searchKind": "component",
6
+ "summary": "Spacing, gap, padding, and visibility helpers.",
7
+ "body": "Spacing, gap, padding, and visibility helpers.\n\nSpacing And Visibility Utilities\n\n inc-u-stack-sm\n Use the utility layer when you need a light spacing or visibility adjustment without pulling in Bootstrap utility classes.\n\n Secondary\n Primary\n\n This alert uses inc-u-hidden-mobile and disappears on smaller screens.\n Common helpers now include stack spacing, gap, padding, hidden/mobile-hidden/desktop-hidden, and visually hidden text.\n\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n```",
8
+ "sourcePaths": [
9
+ "reference.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "utility classes",
14
+ "spacing utilities",
15
+ "visibility utilities",
16
+ "utilities"
17
+ ],
18
+ "relatedUris": [
19
+ "ui-kit://components/layout"
20
+ ],
21
+ "group": "components",
22
+ "priority": 85,
23
+ "includeInSearch": true,
24
+ "canonicalMarkup": {
25
+ "default": "<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>"
26
+ },
27
+ "searchText": "Utilities\nSpacing, gap, padding, and visibility helpers.\nSpacing, gap, padding, and visibility helpers.\n\nSpacing And Visibility Utilities\n\n inc-u-stack-sm\n Use the utility layer when you need a light spacing or visibility adjustment without pulling in Bootstrap utility classes.\n\n Secondary\n Primary\n\n This alert uses inc-u-hidden-mobile and disappears on smaller screens.\n Common helpers now include stack spacing, gap, padding, hidden/mobile-hidden/desktop-hidden, and visually hidden text.\n\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n```\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\nutility classes\nspacing utilities\nvisibility utilities\nutilities\nreference.html"
28
+ }
@@ -0,0 +1,22 @@
1
+ {
2
+ "uri": "ui-kit://example/data-grid-advanced",
3
+ "title": "Bulk actions, sticky headers, row states, and a side drawer",
4
+ "kind": "example",
5
+ "searchKind": "example",
6
+ "summary": "Bulk actions, sticky headers, row states, and a side drawer.",
7
+ "body": "Bulk actions, sticky headers, row states, and a side drawer.\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 Advanced Data Grid\n\n Advanced Grid\n Bulk actions, sticky headers, row states, and a side drawer\n This page is aimed squarely at operator workflows: select many rows, keep context visible, and use a drawer for secondary work instead of leaving the grid.\n\n Search grid\n\n Assigned team\n\n AP Team\n Legal Review\n\n Row state\n\n All rows\n Selected and exceptions\n\n Period: March 2026 ×\n Team: AP Team ×\n\n Export Visible Rows\n Refresh Grid\n\n 3 rows selected\n 1 needs review\n\n Assign\n Download\n Reject Selected\n\n Review Queue Grid\n Sticky header plus row states for selected, warning, danger, and locked rows.\n\n Record\n Vendor\n Status\n Amount\n Owner\n Notes\n\n AP-2026-00142\n OpenPay Electric\n Needs Review\n $18,240.22\n AP Team\n Missing W-9 verification.\n\n AP-2026-00148\n North Range Concrete\n Expiring Docs\n $7,882.00\n Legal Review\n Insurance certificate expires in 14 days.\n\n AP-2026-00151\n Highline Framing\n Blocked\n $21,180.00\n Compliance\n Lien waiver mismatch against prior billing.\n\n AP-2026-00155\n SitePro Mechanical\n Locked\n $4,210.15\n Nightly Sync\n Owned by background import until 4:05 PM.\n\n AP-2026-00157\n Summit Roofing\n Ready\n $9,447.60\n AP Team\n Ready for export batch.\n\n AP-2026-00160\n Apex Drywall\n Imported\n $12,778.44\n Routing Pending\n Awaiting business-unit assignment.\n\n Review Drawer\n Use a side drawer when the operator should keep table context visible.\n\n Close\n\n Record\n AP-2026-00142\n\n Owner\n AP Team\n\n Export batch\n March Closeout 2\n\n Current request\n $18,240.22\n\n Missing W-9 verification. Approval routing is blocked until this is resolved.\n\n Operator note\n Vendor profile needs an updated W-9 before export.\n\n i\n\n Helpful drawer pattern\n This same surface works for assignment, quick edit, exception review, or preview actions.\n\n Assign Owner\n Request Document\n Approve\n\n Grid families\n The table surface now has explicit review, analytics, and spreadsheet variants so the grid can evolve without every page inventing its own table rules.\n\n Review\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n Analytics\n\n Week\n Approved\n Variance\n\n W11\n 447\n +4.4%\n\n Spreadsheet\n\n Line\n Code\n Hours\n\n 001\n FRM-043\n 8.25\n\n Busy Actions\n\n Publishing\n Refreshing\n Idle Button\n\n Advanced grid workflows for operators and reviewers.",
8
+ "sourcePaths": [
9
+ "data-grid-advanced.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "data grid",
14
+ "grid advanced",
15
+ "bulk actions"
16
+ ],
17
+ "relatedUris": [],
18
+ "group": "examples",
19
+ "priority": 55,
20
+ "includeInSearch": true,
21
+ "searchText": "Bulk actions, sticky headers, row states, and a side drawer\nBulk actions, sticky headers, row states, and a side drawer.\nBulk actions, sticky headers, row states, and a side drawer.\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 Advanced Data Grid\n\n Advanced Grid\n Bulk actions, sticky headers, row states, and a side drawer\n This page is aimed squarely at operator workflows: select many rows, keep context visible, and use a drawer for secondary work instead of leaving the grid.\n\n Search grid\n\n Assigned team\n\n AP Team\n Legal Review\n\n Row state\n\n All rows\n Selected and exceptions\n\n Period: March 2026 ×\n Team: AP Team ×\n\n Export Visible Rows\n Refresh Grid\n\n 3 rows selected\n 1 needs review\n\n Assign\n Download\n Reject Selected\n\n Review Queue Grid\n Sticky header plus row states for selected, warning, danger, and locked rows.\n\n Record\n Vendor\n Status\n Amount\n Owner\n Notes\n\n AP-2026-00142\n OpenPay Electric\n Needs Review\n $18,240.22\n AP Team\n Missing W-9 verification.\n\n AP-2026-00148\n North Range Concrete\n Expiring Docs\n $7,882.00\n Legal Review\n Insurance certificate expires in 14 days.\n\n AP-2026-00151\n Highline Framing\n Blocked\n $21,180.00\n Compliance\n Lien waiver mismatch against prior billing.\n\n AP-2026-00155\n SitePro Mechanical\n Locked\n $4,210.15\n Nightly Sync\n Owned by background import until 4:05 PM.\n\n AP-2026-00157\n Summit Roofing\n Ready\n $9,447.60\n AP Team\n Ready for export batch.\n\n AP-2026-00160\n Apex Drywall\n Imported\n $12,778.44\n Routing Pending\n Awaiting business-unit assignment.\n\n Review Drawer\n Use a side drawer when the operator should keep table context visible.\n\n Close\n\n Record\n AP-2026-00142\n\n Owner\n AP Team\n\n Export batch\n March Closeout 2\n\n Current request\n $18,240.22\n\n Missing W-9 verification. Approval routing is blocked until this is resolved.\n\n Operator note\n Vendor profile needs an updated W-9 before export.\n\n i\n\n Helpful drawer pattern\n This same surface works for assignment, quick edit, exception review, or preview actions.\n\n Assign Owner\n Request Document\n Approve\n\n Grid families\n The table surface now has explicit review, analytics, and spreadsheet variants so the grid can evolve without every page inventing its own table rules.\n\n Review\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n Analytics\n\n Week\n Approved\n Variance\n\n W11\n 447\n +4.4%\n\n Spreadsheet\n\n Line\n Code\n Hours\n\n 001\n FRM-043\n 8.25\n\n Busy Actions\n\n Publishing\n Refreshing\n Idle Button\n\n Advanced grid workflows for operators and reviewers.\ndata grid\ngrid advanced\nbulk actions\ndata-grid-advanced.html"
22
+ }
@@ -0,0 +1,24 @@
1
+ {
2
+ "uri": "ui-kit://example/demo",
3
+ "title": "Data-heavy home screen",
4
+ "kind": "example",
5
+ "searchKind": "example",
6
+ "summary": "Data-heavy home screen preview of the extracted patterns.",
7
+ "body": "Data-heavy home screen preview of the extracted patterns.\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 Dashboard\n\n Dashboard Pattern\n Data-heavy home screen\n Summary blocks, filter toolbar, alerts, tabs, tables, and a trimmed vertical list with normal breathing room.\n\n Optional Layer\n Browser-native Web Components are available\n\n Open showcase\n\n This dashboard stays CSS-first and helper-driven. Use the dedicated Web Components page when you want the same design language in plain HTML and JavaScript.\n\n Plain HTML / CSS-first\n Direct class markup\n This page keeps the HTML explicit: the structure, classes, and native table markup are all visible at a glance.\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 counterpart\n Same result, less wiring\n The Web Component layer keeps the same visual language but moves the repeated wrapping into slots and attributes.\n <inc-card>\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 Color Surfaces\n\n Primary\n Action color\n var(--bs-primary)\n\n Secondary\n Muted action\n var(--bs-secondary)\n\n Success\n Positive state\n var(--bs-success)\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 Total Revenue\n Last 30 days\n\n $247,832\n Across all active projects and pay app packages.\n\n Active Projects\n\n 12\n In Progress\n\n Exceptions\n\n 4\n Needs Review\n\n Filters And Actions\n Inline field wrappers keep labels and controls stable while still allowing the toolbar to wrap cleanly.\n\n Reset\n Run\n\n Search\n\n Status\n\n All statuses\n In progress\n Approved\n Rejected\n\n Owner\n\n All operators\n AP Team\n Legal review\n\n Minimum\n\n $\n\n Save View\n Apply\n\n Approved\n Pending\n Rejected\n Imported\n\n Alert Styles\n\n Info Alert\n Data imports completed successfully. Two records need manual review.\n\n Four projects are missing billing periods.\n\n Sync failed for one vendor integration.\n\n Empty State\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 Overview\n Aging\n Documents\n\n Open Pay Apps\n Tight table chrome, mono-friendly IDs, and compact action cells.\n\n Export\n Create\n\n Project\n Period\n Amount\n Status\n Actions\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n View\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n View\n\n AP-2026-00150\n April 2026\n $1,201.19\n Rejected\n\n View\n\n 0-30 days\n\n $74,220\n\n 31-60 days\n\n $19,882\n\n 60+ days\n\n $4,225\n\n March waivers package\n OpenPay import log\n Operator exception report\n\n Vertical List\n\n Lien Waiver Package\n Last updated 14 minutes ago\n\n Open\n\n Compliance Exceptions\n 2 unresolved items\n\n Review\n\n Vendor Import Queue\n Next sync at 4:00 PM\n\n Inspect\n\n Saved Views\n\n Needs Review Today\n March Closeout\n Projects Missing Billing Period\n\n Dashboard example for the extracted Incursa design language. Open web-components.html beside this page to compare the CSS-first baseline with the layered Web Components view.\n\nExample markup:\n\n```html\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```",
8
+ "sourcePaths": [
9
+ "demo.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "homepage demo",
14
+ "showcase demo"
15
+ ],
16
+ "relatedUris": [],
17
+ "group": "examples",
18
+ "priority": 55,
19
+ "includeInSearch": true,
20
+ "canonicalMarkup": {
21
+ "default": "<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>"
22
+ },
23
+ "searchText": "Data-heavy home screen\nData-heavy home screen preview of the extracted patterns.\nData-heavy home screen preview of the extracted patterns.\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 Dashboard\n\n Dashboard Pattern\n Data-heavy home screen\n Summary blocks, filter toolbar, alerts, tabs, tables, and a trimmed vertical list with normal breathing room.\n\n Optional Layer\n Browser-native Web Components are available\n\n Open showcase\n\n This dashboard stays CSS-first and helper-driven. Use the dedicated Web Components page when you want the same design language in plain HTML and JavaScript.\n\n Plain HTML / CSS-first\n Direct class markup\n This page keeps the HTML explicit: the structure, classes, and native table markup are all visible at a glance.\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 counterpart\n Same result, less wiring\n The Web Component layer keeps the same visual language but moves the repeated wrapping into slots and attributes.\n <inc-card>\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 Color Surfaces\n\n Primary\n Action color\n var(--bs-primary)\n\n Secondary\n Muted action\n var(--bs-secondary)\n\n Success\n Positive state\n var(--bs-success)\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 Total Revenue\n Last 30 days\n\n $247,832\n Across all active projects and pay app packages.\n\n Active Projects\n\n 12\n In Progress\n\n Exceptions\n\n 4\n Needs Review\n\n Filters And Actions\n Inline field wrappers keep labels and controls stable while still allowing the toolbar to wrap cleanly.\n\n Reset\n Run\n\n Search\n\n Status\n\n All statuses\n In progress\n Approved\n Rejected\n\n Owner\n\n All operators\n AP Team\n Legal review\n\n Minimum\n\n $\n\n Save View\n Apply\n\n Approved\n Pending\n Rejected\n Imported\n\n Alert Styles\n\n Info Alert\n Data imports completed successfully. Two records need manual review.\n\n Four projects are missing billing periods.\n\n Sync failed for one vendor integration.\n\n Empty State\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 Overview\n Aging\n Documents\n\n Open Pay Apps\n Tight table chrome, mono-friendly IDs, and compact action cells.\n\n Export\n Create\n\n Project\n Period\n Amount\n Status\n Actions\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n View\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n View\n\n AP-2026-00150\n April 2026\n $1,201.19\n Rejected\n\n View\n\n 0-30 days\n\n $74,220\n\n 31-60 days\n\n $19,882\n\n 60+ days\n\n $4,225\n\n March waivers package\n OpenPay import log\n Operator exception report\n\n Vertical List\n\n Lien Waiver Package\n Last updated 14 minutes ago\n\n Open\n\n Compliance Exceptions\n 2 unresolved items\n\n Review\n\n Vendor Import Queue\n Next sync at 4:00 PM\n\n Inspect\n\n Saved Views\n\n Needs Review Today\n March Closeout\n Projects Missing Billing Period\n\n Dashboard example for the extracted Incursa design language. Open web-components.html beside this page to compare the CSS-first baseline with the layered Web Components view.\n\nExample markup:\n\n```html\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<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>\nhomepage demo\nshowcase demo\ndemo.html"
24
+ }
@@ -0,0 +1,21 @@
1
+ {
2
+ "uri": "ui-kit://example/forms-and-validation",
3
+ "title": "Validation, dense toolbars, and edit-friendly detail blocks",
4
+ "kind": "example",
5
+ "searchKind": "example",
6
+ "summary": "Validation, dense toolbars, and edit-friendly detail blocks.",
7
+ "body": "Validation, dense toolbars, and edit-friendly detail blocks.\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 Forms And Validation\n\n Forms And Filters\n Validation, dense toolbars, and edit-friendly detail blocks\n This page covers required labels, help text, validation messaging, error summaries, saved-filter chips, and mixed read-only/edit surfaces.\n\n Validation Summary\n\n There are 3 issues to fix before approval\n\n Contract number is required.\n Billing period must be selected.\n Export contact email is not valid.\n\n Project name\n\n Use the legal project name from the ERP contract.\n Looks good.\n\n Contract number\n\n Visible to AP and legal reviewers.\n Contract number is required.\n\n Billing period\n\n Select a period\n March 2026\n April 2026\n\n Choose the period that will appear on export.\n\n Export contact\n\n Optional. Used only for exception emails.\n\n Approval options\n\n Include related contract documents\n\n Send notifications after approval\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Dense Filter Toolbar\n\n Search\n\n Status\n\n All statuses\n Needs review\n Ready\n\n Owner\n\n AP Team\n Legal Review\n\n Minimum amount\n\n $\n\n Status: Needs review ×\n Owner: AP Team ×\n Amount: $10,000+ ×\n\n Clear All\n Save View\n Apply Filters\n\n This is the pattern to reuse for search-heavy B2B screens: fields above, active chips and actions below.\n\n Read-Only Detail Grid\n\n Project\n North Campus Expansion\n\n Record Id\n AP-2026-00142\n\n Current Request\n $18,240.22\n\n Status\n Needs Review\n\n Inline Edit Pattern\n\n Default review owner\n AP Team\n\n Edit\n\n Default review owner\n\n AP Team\n Legal Review\n Regional Controllers\n\n Cancel\n Save Change\n\n Validation states, filter bars, and read-only/edit detail patterns.",
8
+ "sourcePaths": [
9
+ "forms-and-validation.html"
10
+ ],
11
+ "mimeType": "text/markdown; charset=utf-8",
12
+ "aliases": [
13
+ "forms validation",
14
+ "validation"
15
+ ],
16
+ "relatedUris": [],
17
+ "group": "examples",
18
+ "priority": 55,
19
+ "includeInSearch": true,
20
+ "searchText": "Validation, dense toolbars, and edit-friendly detail blocks\nValidation, dense toolbars, and edit-friendly detail blocks.\nValidation, dense toolbars, and edit-friendly detail blocks.\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 Forms And Validation\n\n Forms And Filters\n Validation, dense toolbars, and edit-friendly detail blocks\n This page covers required labels, help text, validation messaging, error summaries, saved-filter chips, and mixed read-only/edit surfaces.\n\n Validation Summary\n\n There are 3 issues to fix before approval\n\n Contract number is required.\n Billing period must be selected.\n Export contact email is not valid.\n\n Project name\n\n Use the legal project name from the ERP contract.\n Looks good.\n\n Contract number\n\n Visible to AP and legal reviewers.\n Contract number is required.\n\n Billing period\n\n Select a period\n March 2026\n April 2026\n\n Choose the period that will appear on export.\n\n Export contact\n\n Optional. Used only for exception emails.\n\n Approval options\n\n Include related contract documents\n\n Send notifications after approval\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Dense Filter Toolbar\n\n Search\n\n Status\n\n All statuses\n Needs review\n Ready\n\n Owner\n\n AP Team\n Legal Review\n\n Minimum amount\n\n $\n\n Status: Needs review ×\n Owner: AP Team ×\n Amount: $10,000+ ×\n\n Clear All\n Save View\n Apply Filters\n\n This is the pattern to reuse for search-heavy B2B screens: fields above, active chips and actions below.\n\n Read-Only Detail Grid\n\n Project\n North Campus Expansion\n\n Record Id\n AP-2026-00142\n\n Current Request\n $18,240.22\n\n Status\n Needs Review\n\n Inline Edit Pattern\n\n Default review owner\n AP Team\n\n Edit\n\n Default review owner\n\n AP Team\n Legal Review\n Regional Controllers\n\n Cancel\n Save Change\n\n Validation states, filter bars, and read-only/edit detail patterns.\nforms validation\nvalidation\nforms-and-validation.html"
21
+ }