@incursa/ui-kit 1.6.1 → 1.8.0
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.
- package/NOTICE +8 -0
- package/README.md +16 -0
- package/dist/icons/index.js +371 -0
- package/dist/icons/package.json +3 -0
- package/dist/inc-design-language.css +144 -51
- package/dist/inc-design-language.css.map +1 -1
- package/dist/inc-design-language.js +1627 -1206
- package/dist/inc-design-language.min.css +1 -1
- package/dist/inc-design-language.min.css.map +1 -1
- package/dist/mcp/components/buttons.json +3 -3
- package/dist/mcp/components/cards.json +3 -3
- package/dist/mcp/components/metrics.json +3 -3
- package/dist/mcp/components/states.json +3 -3
- package/dist/mcp/components/status.json +3 -3
- package/dist/mcp/examples/data-grid-advanced.json +2 -2
- package/dist/mcp/examples/demo.json +2 -2
- package/dist/mcp/examples/overlay-workflows.json +2 -2
- package/dist/mcp/examples/reference.json +2 -2
- package/dist/mcp/examples/states.json +2 -2
- package/dist/mcp/examples/web-components.json +2 -2
- package/dist/mcp/guides/latest.json +2 -2
- package/dist/mcp/guides/package-metadata.json +2 -2
- package/dist/mcp/guides/update.json +2 -2
- package/dist/mcp/install.json +1 -1
- package/dist/mcp/patterns/data-grid-advanced.json +2 -2
- package/dist/mcp/patterns/demo.json +2 -2
- package/dist/mcp/patterns/overlay-workflows.json +2 -2
- package/dist/mcp/patterns/reference.json +2 -2
- package/dist/mcp/patterns/states.json +2 -2
- package/dist/mcp/patterns/web-components.json +2 -2
- package/dist/mcp/resources.json +83 -80
- package/dist/mcp/search-index.json +25 -25
- package/dist/mcp/update.json +2 -2
- package/dist/mcp/worker.mjs +394 -391
- package/dist/mcp/worker.mjs.map +2 -2
- package/dist/web-components/README.md +4 -0
- package/dist/web-components/components/actions.js +237 -14
- package/dist/web-components/components/feedback.js +71 -7
- package/dist/web-components/index.js +583 -21
- package/package.json +10 -3
- package/src/icons/index.js +229 -0
- package/src/icons/package.json +3 -0
- package/src/inc-design-language.js +327 -1
- package/src/inc-design-language.scss +178 -55
- package/src/web-components/README.md +4 -0
- package/src/web-components/components/actions.js +237 -14
- package/src/web-components/components/feedback.js +71 -7
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "component",
|
|
5
5
|
"searchKind": "component",
|
|
6
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
|
|
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 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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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
8
|
"sourcePaths": [
|
|
9
9
|
"reference.html"
|
|
10
10
|
],
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"priority": 85,
|
|
23
23
|
"includeInSearch": true,
|
|
24
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\"
|
|
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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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
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
|
|
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 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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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\" data-inc-icon=\"empty\" aria-hidden=\"true\"></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
28
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "component",
|
|
5
5
|
"searchKind": "component",
|
|
6
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
|
|
7
|
+
"body": "Operational states, permission banners, and toast feedback surfaces.\n\nOperational States And Feedback\n\n No results matched\n Distinct from the create-first empty state.\n\n Export failed\n Use a proper failure surface, not just a muted paragraph.\n\n Finance Manager role required\n Show when an action is visible but intentionally unavailable.\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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>\n```",
|
|
8
8
|
"sourcePaths": [
|
|
9
9
|
"reference.html"
|
|
10
10
|
],
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"priority": 85,
|
|
23
23
|
"includeInSearch": true,
|
|
24
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\"
|
|
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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></div>\n <div>...</div>\n</div>\n\n<div class=\"inc-toast-stack\">\n <div class=\"inc-toast-card\">...</div>\n</div>"
|
|
26
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
|
|
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 No results matched\n Distinct from the create-first empty state.\n\n Export failed\n Use a proper failure surface, not just a muted paragraph.\n\n Finance Manager role required\n Show when an action is visible but intentionally unavailable.\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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></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\" data-inc-icon=\"permission\" aria-hidden=\"true\"></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
28
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "component",
|
|
5
5
|
"searchKind": "component",
|
|
6
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```",
|
|
7
|
+
"body": "Status badges and alert surfaces.\n\nBadges And Alerts\n\n Approved\n Pending\n Rejected\n Imported\n\n Success alert text.\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--success\">Success alert text.</div>\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--success\">Success alert text.</div>\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
8
|
"sourcePaths": [
|
|
9
9
|
"reference.html"
|
|
10
10
|
],
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"priority": 85,
|
|
23
23
|
"includeInSearch": true,
|
|
24
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>"
|
|
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--success\">Success alert text.</div>\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
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"
|
|
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 Success alert text.\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--success\">Success alert text.</div>\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--success\">Success alert text.</div>\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--success\">Success alert text.</div>\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
28
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "example",
|
|
5
5
|
"searchKind": "example",
|
|
6
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
|
|
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 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
8
|
"sourcePaths": [
|
|
9
9
|
"data-grid-advanced.html"
|
|
10
10
|
],
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
"group": "examples",
|
|
19
19
|
"priority": 55,
|
|
20
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
|
|
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 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
22
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "example",
|
|
5
5
|
"searchKind": "example",
|
|
6
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
|
|
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 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
8
|
"sourcePaths": [
|
|
9
9
|
"demo.html"
|
|
10
10
|
],
|
|
@@ -20,5 +20,5 @@
|
|
|
20
20
|
"canonicalMarkup": {
|
|
21
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
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
|
|
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 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
24
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"kind": "example",
|
|
5
5
|
"searchKind": "example",
|
|
6
6
|
"summary": "Modal and offcanvas examples for operator review flows.",
|
|
7
|
-
"body": "Modal and offcanvas examples for operator review flows.\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 Overlay Workflows\n\n Overlay Workflows\n Modal and offcanvas examples for operator review flows\n These overlays reuse the same validation, status, and detail primitives as the other workflow pages so they feel like part of the product instead of a separate component library.\n\n Open approval modal\n Open assignment drawer\n\n When to use a modal\n\n Use a modal when the user must acknowledge risk, confirm intent, or fix a small amount of blocking information before continuing.\n The approval modal below includes a blocking validation summary and an explicit escalation note.\n\n Short task\n High consequence\n\n When to use offcanvas\n\n Use an offcanvas panel when the operator needs to keep surrounding context in view while editing, assigning, or previewing supporting detail.\n\n
|
|
7
|
+
"body": "Modal and offcanvas examples for operator review flows.\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 Overlay Workflows\n\n Overlay Workflows\n Modal and offcanvas examples for operator review flows\n These overlays reuse the same validation, status, and detail primitives as the other workflow pages so they feel like part of the product instead of a separate component library.\n\n Open approval modal\n Open assignment drawer\n\n When to use a modal\n\n Use a modal when the user must acknowledge risk, confirm intent, or fix a small amount of blocking information before continuing.\n The approval modal below includes a blocking validation summary and an explicit escalation note.\n\n Short task\n High consequence\n\n When to use offcanvas\n\n Use an offcanvas panel when the operator needs to keep surrounding context in view while editing, assigning, or previewing supporting detail.\n\n Keep the grid visible\n Assignment, quick edit, and note-taking generally fit the offcanvas path better than a modal.\n\n Context retained\n Multi-step work\n\n Launchable examples\n Both buttons below are wired through the package helper in dist/inc-design-language.js.\n\n Approve exception\n Assign owner\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Blocking issue\n Missing W-9\n\n Requested amount\n $18,240.22\n\n Overlay patterns for approvals, assignments, and secondary review work.\n\n Approve exception\n Confirm the exception owner and capture the approval rationale before export continues.\n\n ×\n\n There are 2 issues to resolve first\n\n Approval rationale must be entered.\n An escalation owner must be selected.\n\n Finance Manager sign-off required\n Use the modal when the user is about to take a high-consequence action that should pause the surrounding workflow.\n\n Escalation owner\n\n Select an owner\n Finance Manager\n Controller\n\n Select who will own the exception after approval.\n\n Export batch\n\n Approval rationale\n\n A short explanation is required for audit history.\n\n Cancel\n Approve Exception\n\n Assign review owner\n Offcanvas keeps the surrounding queue visible while the operator routes work.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n State\n Needs Review\n\n Requested amount\n $18,240.22\n\n Search owner\n\n Queue\n\n AP Team\n Legal Review\n Compliance\n\n Priority: Exception ×\n SLA: 24 hours ×\n\n Routing note\n Assign to Legal Review so they can validate the incoming W-9 and insurance certificate before export.\n\n Why offcanvas works here\n This task needs context, but it should not block the whole screen the way an approval modal does.\n\n Cancel\n Save Draft\n Assign Owner",
|
|
8
8
|
"sourcePaths": [
|
|
9
9
|
"overlay-workflows.html"
|
|
10
10
|
],
|
|
@@ -18,5 +18,5 @@
|
|
|
18
18
|
"group": "examples",
|
|
19
19
|
"priority": 55,
|
|
20
20
|
"includeInSearch": true,
|
|
21
|
-
"searchText": "Modal and offcanvas examples for operator review flows\nModal and offcanvas examples for operator review flows.\nModal and offcanvas examples for operator review flows.\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 Overlay Workflows\n\n Overlay Workflows\n Modal and offcanvas examples for operator review flows\n These overlays reuse the same validation, status, and detail primitives as the other workflow pages so they feel like part of the product instead of a separate component library.\n\n Open approval modal\n Open assignment drawer\n\n When to use a modal\n\n Use a modal when the user must acknowledge risk, confirm intent, or fix a small amount of blocking information before continuing.\n The approval modal below includes a blocking validation summary and an explicit escalation note.\n\n Short task\n High consequence\n\n When to use offcanvas\n\n Use an offcanvas panel when the operator needs to keep surrounding context in view while editing, assigning, or previewing supporting detail.\n\n
|
|
21
|
+
"searchText": "Modal and offcanvas examples for operator review flows\nModal and offcanvas examples for operator review flows.\nModal and offcanvas examples for operator review flows.\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 Overlay Workflows\n\n Overlay Workflows\n Modal and offcanvas examples for operator review flows\n These overlays reuse the same validation, status, and detail primitives as the other workflow pages so they feel like part of the product instead of a separate component library.\n\n Open approval modal\n Open assignment drawer\n\n When to use a modal\n\n Use a modal when the user must acknowledge risk, confirm intent, or fix a small amount of blocking information before continuing.\n The approval modal below includes a blocking validation summary and an explicit escalation note.\n\n Short task\n High consequence\n\n When to use offcanvas\n\n Use an offcanvas panel when the operator needs to keep surrounding context in view while editing, assigning, or previewing supporting detail.\n\n Keep the grid visible\n Assignment, quick edit, and note-taking generally fit the offcanvas path better than a modal.\n\n Context retained\n Multi-step work\n\n Launchable examples\n Both buttons below are wired through the package helper in dist/inc-design-language.js.\n\n Approve exception\n Assign owner\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Blocking issue\n Missing W-9\n\n Requested amount\n $18,240.22\n\n Overlay patterns for approvals, assignments, and secondary review work.\n\n Approve exception\n Confirm the exception owner and capture the approval rationale before export continues.\n\n ×\n\n There are 2 issues to resolve first\n\n Approval rationale must be entered.\n An escalation owner must be selected.\n\n Finance Manager sign-off required\n Use the modal when the user is about to take a high-consequence action that should pause the surrounding workflow.\n\n Escalation owner\n\n Select an owner\n Finance Manager\n Controller\n\n Select who will own the exception after approval.\n\n Export batch\n\n Approval rationale\n\n A short explanation is required for audit history.\n\n Cancel\n Approve Exception\n\n Assign review owner\n Offcanvas keeps the surrounding queue visible while the operator routes work.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n State\n Needs Review\n\n Requested amount\n $18,240.22\n\n Search owner\n\n Queue\n\n AP Team\n Legal Review\n Compliance\n\n Priority: Exception ×\n SLA: 24 hours ×\n\n Routing note\n Assign to Legal Review so they can validate the incoming W-9 and insurance certificate before export.\n\n Why offcanvas works here\n This task needs context, but it should not block the whole screen the way an approval modal does.\n\n Cancel\n Save Draft\n Assign Owner\noverlays\noverlay workflows\nmodals\noverlay-workflows.html"
|
|
22
22
|
}
|