@incursa/ui-kit 1.6.1 → 1.8.0

package/dist/mcp/search-index.json

@@ -67,7 +67,7 @@
       "latest"
     ],
     "priority": 108,
-    "searchText": "Update\nPackage-manager update commands and release-review guidance.\nUpdate @incursa/ui-kit with your package manager of choice.\n\nnpm: npm install @incursa/ui-kit@latest\npnpm: pnpm up @incursa/ui-kit\nyarn: yarn upgrade @incursa/ui-kit\n\nReview after upgrading:\n- Review the changelog and regenerated MCP manifests after each upgrade.\n- Verify that the compiled CSS, JS helper, and web-components entrypoints still match the package contract.\n\nLatest recorded release notes:\n- Published the expanded Web Components and visual hierarchy updates in a corrected follow-up after the failed v1.6.0 tag run.\n- Regenerated the MCP manifest outputs so release verification and published artifacts stay in sync.\n- Hardened the PowerShell release helper so failed native commands stop the release before any commit, tag, or push.\nupdate\nupgrade\nlatest\nCHANGELOG.md\npackage.json"
+    "searchText": "Update\nPackage-manager update commands and release-review guidance.\nUpdate @incursa/ui-kit with your package manager of choice.\n\nnpm: npm install @incursa/ui-kit@latest\npnpm: pnpm up @incursa/ui-kit\nyarn: yarn upgrade @incursa/ui-kit\n\nReview after upgrading:\n- Review the changelog and regenerated MCP manifests after each upgrade.\n- Verify that the compiled CSS, JS helper, and web-components entrypoints still match the package contract.\n\nLatest recorded release notes:\n- Added a semantic Incursa icon layer with Lucide-backed defaults, a public @incursa/ui-kit/icons entrypoint, and a global renderer override for consumers.\n- Added default semantic icons to alerts, empty states, state panels, buttons, and auto-refresh controls while keeping decorative icons hidden from assistive technology.\n- Replaced placeholder glyphs across the showcase and refreshed generated package, MCP, and browser snapshot artifacts for the new icon standard.\nupdate\nupgrade\nlatest\nCHANGELOG.md\npackage.json"
   },
   {
     "uri": "ui-kit://package-metadata",
@@ -82,7 +82,7 @@
       "package json"
     ],
     "priority": 90,
-    "searchText": "Package metadata\nPackage identity, exports, and packaging surface from package.json.\n{\n \"title\": \"Package metadata\",\n \"summary\": \"Package identity, exports, and packaging surface from package.json.\",\n \"packageName\": \"@incursa/ui-kit\",\n \"version\": \"1.6.1\",\n \"license\": \"Apache-2.0\",\n \"repository\": \"git+https://github.com/incursa/ui-kit.git\",\n \"homepage\": \"https://github.com/incursa/ui-kit#readme\",\n \"exports\": {\n \".\": {\n \"style\": \"./dist/inc-design-language.css\",\n \"sass\": \"./src/inc-design-language.scss\",\n \"default\": \"./dist/inc-design-language.js\"\n },\n \"./web-components\": {\n \"style\": \"./dist/web-components/style.css\",\n \"default\": \"./dist/web-components/index.js\"\n },\n \"./web-components/style.css\": \"./dist/web-components/style.css\",\n \"./dist/inc-design-language.css\": \"./dist/inc-design-language.css\",\n \"./dist/inc-design-language.min.css\": \"./dist/inc-design-language.min.css\",\n \"./src/inc-design-language.scss\": \"./src/inc-design-language.scss\",\n \"./src/_inc-theme.scss\": \"./src/_inc-theme.scss\",\n \"./src/_inc-tokens.scss\": \"./src/_inc-tokens.scss\"\n },\n \"files\": [\n \"dist\",\n \"src\",\n \"README.md\",\n \"LLMS.txt\",\n \"AI-AGENT-INSTRUCTIONS.md\",\n \"NOTICE\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"main\": \"./dist/inc-design-language.js\",\n \"style\": \"./dist/inc-design-language.css\",\n \"sass\": \"./src/inc-design-language.scss\",\n \"notes\": [\n \"The package exposes both the CSS-first surface and the optional same-package web-components layer.\",\n \"The dist/ directory is the public build output root.\"\n ],\n \"relatedUris\": [\n \"ui-kit://install\",\n \"ui-kit://update\",\n \"ui-kit://overview\"\n ]\n}\npackage metadata\npackage json\npackage.json"
+    "searchText": "Package metadata\nPackage identity, exports, and packaging surface from package.json.\n{\n \"title\": \"Package metadata\",\n \"summary\": \"Package identity, exports, and packaging surface from package.json.\",\n \"packageName\": \"@incursa/ui-kit\",\n \"version\": \"1.8.0\",\n \"license\": \"Apache-2.0\",\n \"repository\": \"git+https://github.com/incursa/ui-kit.git\",\n \"homepage\": \"https://github.com/incursa/ui-kit#readme\",\n \"exports\": {\n \".\": {\n \"style\": \"./dist/inc-design-language.css\",\n \"sass\": \"./src/inc-design-language.scss\",\n \"default\": \"./dist/inc-design-language.js\"\n },\n \"./web-components\": {\n \"style\": \"./dist/web-components/style.css\",\n \"default\": \"./dist/web-components/index.js\"\n },\n \"./icons\": {\n \"default\": \"./dist/icons/index.js\"\n },\n \"./web-components/style.css\": \"./dist/web-components/style.css\",\n \"./dist/inc-design-language.css\": \"./dist/inc-design-language.css\",\n \"./dist/inc-design-language.min.css\": \"./dist/inc-design-language.min.css\",\n \"./src/inc-design-language.scss\": \"./src/inc-design-language.scss\",\n \"./src/_inc-theme.scss\": \"./src/_inc-theme.scss\",\n \"./src/_inc-tokens.scss\": \"./src/_inc-tokens.scss\"\n },\n \"files\": [\n \"dist\",\n \"src\",\n \"README.md\",\n \"LLMS.txt\",\n \"AI-AGENT-INSTRUCTIONS.md\",\n \"NOTICE\"\n ],\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"main\": \"./dist/inc-design-language.js\",\n \"style\": \"./dist/inc-design-language.css\",\n \"sass\": \"./src/inc-design-language.scss\",\n \"notes\": [\n \"The package exposes both the CSS-first surface and the optional same-package web-components layer.\",\n \"The dist/ directory is the public build output root.\"\n ],\n \"relatedUris\": [\n \"ui-kit://install\",\n \"ui-kit://update\",\n \"ui-kit://overview\"\n ]\n}\npackage metadata\npackage json\npackage.json"
   },
   {
     "uri": "ui-kit://release-notes/latest",
@@ -98,7 +98,7 @@
       "latest release"
     ],
     "priority": 95,
-    "searchText": "Latest release notes\nThe latest recorded changelog entry.\n- Published the expanded Web Components and visual hierarchy updates in a corrected follow-up after the failed v1.6.0 tag run.\n- Regenerated the MCP manifest outputs so release verification and published artifacts stay in sync.\n- Hardened the PowerShell release helper so failed native commands stop the release before any commit, tag, or push.\nrelease notes\nchangelog\nlatest release\nCHANGELOG.md"
+    "searchText": "Latest release notes\nThe latest recorded changelog entry.\n- Added a semantic Incursa icon layer with Lucide-backed defaults, a public @incursa/ui-kit/icons entrypoint, and a global renderer override for consumers.\n- Added default semantic icons to alerts, empty states, state panels, buttons, and auto-refresh controls while keeping decorative icons hidden from assistive technology.\n- Replaced placeholder glyphs across the showcase and refreshed generated package, MCP, and browser snapshot artifacts for the new icon standard.\nrelease notes\nchangelog\nlatest release\nCHANGELOG.md"
   },
   {
     "uri": "ui-kit://guides/choose-css-vs-scss-vs-js-vs-web-components",
@@ -184,9 +184,9 @@
       "buttons"
     ],
     "priority": 85,
-    "searchText": "Buttons\nPrimary, secondary, outline, danger, warning, info, and loading buttons.\nPrimary, secondary, outline, danger, warning, info, and loading buttons.\n\nButtons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\nCanonical markup:\n\n```html\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n```\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\nbutton\nbtn\nactions\nbuttons\nreference.html",
+    "searchText": "Buttons\nPrimary, secondary, outline, danger, warning, info, and loading buttons.\nPrimary, secondary, outline, danger, warning, info, and loading buttons.\n\nButtons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>\n\nCanonical markup:\n\n```html\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>\n```\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>\nbutton\nbtn\nactions\nbuttons\nreference.html",
     "canonicalMarkup": {
-      "default": "<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>"
+      "default": "<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>"
     }
   },
   {
@@ -268,9 +268,9 @@
       "cards"
     ],
     "priority": 85,
-    "searchText": "Cards\nCards, empty states, summary blocks, and metrics surfaces.\nCards, empty states, summary blocks, and metrics surfaces.\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>\ncard\nsummary blocks\nempty states\ncards\nreference.html",
+    "searchText": "Cards\nCards, empty states, summary blocks, and metrics surfaces.\nCards, empty states, summary blocks, and metrics surfaces.\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>\ncard\nsummary blocks\nempty states\ncards\nreference.html",
     "canonicalMarkup": {
-      "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>"
+      "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>"
     }
   },
   {
@@ -328,9 +328,9 @@
       "states"
     ],
     "priority": 85,
-    "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",
+    "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",
     "canonicalMarkup": {
-      "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>"
+      "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>"
     }
   },
   {
@@ -368,9 +368,9 @@
       "status"
     ],
     "priority": 85,
-    "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",
+    "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",
     "canonicalMarkup": {
-      "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>"
+      "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>"
     }
   },
   {
@@ -388,9 +388,9 @@
       "metrics"
     ],
     "priority": 85,
-    "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",
+    "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",
     "canonicalMarkup": {
-      "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>"
+      "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>"
     }
   },
   {
@@ -426,7 +426,7 @@
       "reference page"
     ],
     "priority": 98,
-    "searchText": "Rendered controls with copyable HTML\nCopy/paste catalog for the standard controls, page framing, metrics, lists, overlays, and markup patterns.\nCopy/paste catalog for the standard controls, page framing, metrics, lists, overlays, and markup 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 Reference\n\n Reference Catalog\n Rendered controls with copyable HTML\n This page is the practical copy/paste surface. Each section shows the rendered result first, then the HTML markup directly below it.\n\n Code View\n Web Components first, HTML + CSS on demand\n\n HTML + CSS\n\n Web Components\n\n Web Components is the default code view on this page. Sections that are still CSS-first are labeled in the viewer so the page stays honest about what exists today.\n\n Theme Switcher\n\n Appearance\n System\n\n Light\n Dark\n System\n\n Cycle\n\n The bundled helper stores the selected mode in localStorage, resolves system against prefers-color-scheme, keeps the root `data-bs-theme` attribute in sync, and can either wire your own controls or mount the packaged switcher into an empty host.\n\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n\n Page 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\n Buttons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n Badges 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\n Form 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\n Cards, 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\n Tabs\n\n Overview\n Aging\n\n Folder tab content.\n\n Second folder tab content.\n\n Needs Review\n Ready\n\n Line tab content.\n\n Second line tab content.\n\n<section class=\"inc-tabs-folder\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-overview\">Overview</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-aging\">Aging</button></li>\n </ul>\n <div class=\"inc-tab-content\">\n <div class=\"inc-tab-pane active\" id=\"ref-folder-overview\" role=\"tabpanel\">...</div>\n <div class=\"inc-tab-pane\" id=\"ref-folder-aging\" role=\"tabpanel\">...</div>\n </div>\n</section>\n\n<section class=\"inc-tabs-line\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-one\">Needs Review</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-two\">Ready</button></li>\n </ul>\n</section>\n\n Tables 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\n Native 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\n Floating Content\n\n Tooltip text for short hover help.\n\n Popover title\n Popover content can hold short guidance, counts, or a compact callout.\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-tooltip show bs-tooltip-auto\" role=\"tooltip\">\n <div class=\"tooltip-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-tooltip__inner\">Tooltip text for short hover help.</div>\n </div>\n</div>\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-popover show bs-popover-auto\" role=\"tooltip\">\n <div class=\"popover-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-popover-header\">Popover title</div>\n <div class=\"inc-popover-body\">Popover content can hold short guidance, counts, or a compact callout.</div>\n </div>\n</div>\n\n Validation 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\n Spacing 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\n Table Families\n\n Review Grid\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n AP-148\n Expiring Docs\n $7,882\n\n Analytics Grid\n\n Week\n Approved\n Variance\n\n W10\n 428\n +6.2%\n\n W11\n 447\n +4.4%\n\n Spreadsheet Grid\n\n Line\n Code\n Hours\n\n 001\n FRM-042\n 12.50\n\n 002\n FRM-043\n 8.25\n\n<table class=\"inc-table inc-table--review-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--analytics-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--spreadsheet-grid inc-table--sm\">...</table>\n\n Overlay Workflows\n\n Modal and offcanvas patterns now have a dedicated showcase page with validation, drawer content, and helper-driven open/close behavior.\n\n Open Overlay Showcase\n Compare With Drawer Grid\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" data-inc-toggle=\"modal\" data-inc-target=\"#approval-modal\">Open modal</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" data-inc-toggle=\"offcanvas\" data-inc-target=\"#assignment-drawer\">Open offcanvas</button>\n\n Operational 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\n Detail, Timeline, Files, And Grid Patterns\n\n Record Id\n AP-2026-00142\n\n Current request\n $18,240.22\n\n Imported from OpenPay\n\n 8:13 AM\n Nightly sync\n\n Timeline entries combine actor, time, event, and state without falling apart visually.\n\n Drop documents here\n For review workflows with waiver or attachment requirements.\n\n Browse Files\n\n 3 rows selected\n\n Reject Selected\n\n<div class=\"inc-key-value-grid\">\n <dl class=\"inc-key-value inc-key-value--card\">\n <dt class=\"inc-key-value__label\">Record Id</dt>\n <dd class=\"inc-key-value__value inc-key-value__value--data\">AP-2026-00142</dd>\n </dl>\n</div>\n\n<div class=\"inc-timeline\">\n <div class=\"inc-timeline__item\">...</div>\n</div>\n\n<div class=\"inc-file-dropzone\">...</div>\n<div class=\"inc-bulk-bar\">...</div>\n\n Auto Refresh Widget\n\n Use the inline modifier inside cards or toolbars, and the base class when you want the widget pinned to the page corner.\n\n Queue refresh in\n 180s\n\n Refreshing queue\n\n Pause\n\n<div class=\"inc-auto-refresh\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"30\"\n data-inc-refresh-label=\"Refresh in\"\n data-inc-refresh-loading-label=\"Refreshing\">\n <span class=\"inc-auto-refresh__countdown\">\n <span class=\"inc-auto-refresh__label\">Refresh in</span>\n <span class=\"inc-auto-refresh__value\">30s</span>\n </span>\n <span class=\"inc-auto-refresh__status\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" hidden>\n <span class=\"inc-auto-refresh__spinner\" aria-hidden=\"true\">\n <span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm inc-spinner--border--primary\"></span>\n <span class=\"inc-spinner inc-spinner--grow inc-spinner--grow--sm inc-spinner--grow--primary\"></span>\n </span>\n <span class=\"inc-auto-refresh__status-text\">Refreshing</span>\n </span>\n <button class=\"inc-btn inc-btn--secondary inc-btn--micro inc-auto-refresh__toggle\"\n type=\"button\"\n data-inc-action=\"auto-refresh-toggle\"\n aria-label=\"Pause\"\n aria-pressed=\"false\">\n <span class=\"inc-auto-refresh__toggle-text\">Pause</span>\n </button>\n</div>\n\n<div class=\"inc-auto-refresh inc-auto-refresh--inline\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"90\">\n ...\n</div>\n\n Copy snippet\n Open docs\n\n Reference page for copy/paste HTML patterns. Web Components are the default code view here, while the class catalog remains authoritative.\n\n Reference Dialog\n Native dialog example for copy/paste use.\n\n ×\n\n This is the minimal dialog shell used on the native page. Copy the outer <dialog>, the surface wrapper, and the form-based footer if you want native close behavior.\n\n Close\n Confirm\n\n Reference Drawer\n Native side sheet example for assignment and note-taking flows.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Routing note\n Route to Legal Review so the W-9 can be validated before export.\n\n Cancel\n Assign\n\nCanonical markup:\n\n```html\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n```\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\nreference catalog\nreference page\nreference.html",
+    "searchText": "Rendered controls with copyable HTML\nCopy/paste catalog for the standard controls, page framing, metrics, lists, overlays, and markup patterns.\nCopy/paste catalog for the standard controls, page framing, metrics, lists, overlays, and markup 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 Reference\n\n Reference Catalog\n Rendered controls with copyable HTML\n This page is the practical copy/paste surface. Each section shows the rendered result first, then the HTML markup directly below it.\n\n Code View\n Web Components first, HTML + CSS on demand\n\n HTML + CSS\n\n Web Components\n\n Web Components is the default code view on this page. Sections that are still CSS-first are labeled in the viewer so the page stays honest about what exists today.\n\n Theme Switcher\n\n Appearance\n System\n\n Light\n Dark\n System\n\n Cycle\n\n The bundled helper stores the selected mode in localStorage, resolves system against prefers-color-scheme, keeps the root `data-bs-theme` attribute in sync, and can either wire your own controls or mount the packaged switcher into an empty host.\n\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n\n Page 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\n Buttons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>\n\n Badges 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\n Form 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\n Cards, 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\n Tabs\n\n Overview\n Aging\n\n Folder tab content.\n\n Second folder tab content.\n\n Needs Review\n Ready\n\n Line tab content.\n\n Second line tab content.\n\n<section class=\"inc-tabs-folder\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-overview\">Overview</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-aging\">Aging</button></li>\n </ul>\n <div class=\"inc-tab-content\">\n <div class=\"inc-tab-pane active\" id=\"ref-folder-overview\" role=\"tabpanel\">...</div>\n <div class=\"inc-tab-pane\" id=\"ref-folder-aging\" role=\"tabpanel\">...</div>\n </div>\n</section>\n\n<section class=\"inc-tabs-line\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-one\">Needs Review</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-two\">Ready</button></li>\n </ul>\n</section>\n\n Tables 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\n Native 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\n Floating Content\n\n Tooltip text for short hover help.\n\n Popover title\n Popover content can hold short guidance, counts, or a compact callout.\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-tooltip show bs-tooltip-auto\" role=\"tooltip\">\n <div class=\"tooltip-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-tooltip__inner\">Tooltip text for short hover help.</div>\n </div>\n</div>\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-popover show bs-popover-auto\" role=\"tooltip\">\n <div class=\"popover-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-popover-header\">Popover title</div>\n <div class=\"inc-popover-body\">Popover content can hold short guidance, counts, or a compact callout.</div>\n </div>\n</div>\n\n Validation 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\n Spacing 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\n Table Families\n\n Review Grid\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n AP-148\n Expiring Docs\n $7,882\n\n Analytics Grid\n\n Week\n Approved\n Variance\n\n W10\n 428\n +6.2%\n\n W11\n 447\n +4.4%\n\n Spreadsheet Grid\n\n Line\n Code\n Hours\n\n 001\n FRM-042\n 12.50\n\n 002\n FRM-043\n 8.25\n\n<table class=\"inc-table inc-table--review-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--analytics-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--spreadsheet-grid inc-table--sm\">...</table>\n\n Overlay Workflows\n\n Modal and offcanvas patterns now have a dedicated showcase page with validation, drawer content, and helper-driven open/close behavior.\n\n Open Overlay Showcase\n Compare With Drawer Grid\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" data-inc-toggle=\"modal\" data-inc-target=\"#approval-modal\">Open modal</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" data-inc-toggle=\"offcanvas\" data-inc-target=\"#assignment-drawer\">Open offcanvas</button>\n\n Operational 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\n Detail, Timeline, Files, And Grid Patterns\n\n Record Id\n AP-2026-00142\n\n Current request\n $18,240.22\n\n Imported from OpenPay\n\n 8:13 AM\n Nightly sync\n\n Timeline entries combine actor, time, event, and state without falling apart visually.\n\n Drop documents here\n For review workflows with waiver or attachment requirements.\n\n Browse Files\n\n No files selected yet.\n\n 3 rows selected\n\n Reject Selected\n\n<div class=\"inc-key-value-grid\">\n <dl class=\"inc-key-value inc-key-value--card\">\n <dt class=\"inc-key-value__label\">Record Id</dt>\n <dd class=\"inc-key-value__value inc-key-value__value--data\">AP-2026-00142</dd>\n </dl>\n</div>\n\n<div class=\"inc-timeline\">\n <div class=\"inc-timeline__item\">...</div>\n</div>\n\n<div class=\"inc-file-dropzone\">...</div>\n<div class=\"inc-bulk-bar\">...</div>\n\n Auto Refresh Widget\n\n Use the inline modifier inside cards or toolbars, and the base class when you want the widget pinned to the page corner.\n\n Pause\n\n Queue refresh in\n 180s\n\n Refreshing queue\n\n<div class=\"inc-auto-refresh\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"30\"\n data-inc-refresh-label=\"Refresh in\"\n data-inc-refresh-loading-label=\"Refreshing\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--micro inc-auto-refresh__toggle\"\n type=\"button\"\n data-inc-action=\"auto-refresh-toggle\"\n aria-label=\"Pause\"\n aria-pressed=\"false\">\n <span class=\"inc-auto-refresh__toggle-icon\" aria-hidden=\"true\"></span>\n <span class=\"inc-auto-refresh__toggle-text\">Pause</span>\n </button>\n <span class=\"inc-auto-refresh__countdown\">\n <span class=\"inc-auto-refresh__label\">Refresh in</span>\n <span class=\"inc-auto-refresh__value\">30s</span>\n </span>\n <span class=\"inc-auto-refresh__status\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" hidden>\n <span class=\"inc-auto-refresh__spinner\" aria-hidden=\"true\">\n <span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm inc-spinner--border--primary\"></span>\n <span class=\"inc-spinner inc-spinner--grow inc-spinner--grow--sm inc-spinner--grow--primary\"></span>\n </span>\n <span class=\"inc-auto-refresh__status-text\">Refreshing</span>\n </span>\n</div>\n\n<div class=\"inc-auto-refresh inc-auto-refresh--inline\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"90\">\n ...\n</div>\n\n Copy snippet\n Open docs\n\n Reference page for copy/paste HTML patterns. Web Components are the default code view here, while the class catalog remains authoritative.\n\n Reference Dialog\n Native dialog example for copy/paste use.\n\n ×\n\n This is the minimal dialog shell used on the native page. Copy the outer <dialog>, the surface wrapper, and the form-based footer if you want native close behavior.\n\n Close\n Confirm\n\n Reference Drawer\n Native side sheet example for assignment and note-taking flows.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Routing note\n Route to Legal Review so the W-9 can be validated before export.\n\n Cancel\n Assign\n\nCanonical markup:\n\n```html\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n```\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\nreference catalog\nreference page\nreference.html",
     "canonicalMarkup": {
       "default": "<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>"
     }
@@ -460,7 +460,7 @@
       "bulk actions"
     ],
     "priority": 70,
-    "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"
+    "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"
   },
   {
     "uri": "ui-kit://patterns/states",
@@ -475,7 +475,7 @@
       "feedback examples"
     ],
     "priority": 70,
-    "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n +\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n ?\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n ...\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n !\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n #\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n L\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n Pause\n\n i\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n !\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
+    "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
   },
   {
     "uri": "ui-kit://patterns/overlay-workflows",
@@ -491,7 +491,7 @@
       "modals"
     ],
     "priority": 70,
-    "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 i\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 !\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 i\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"
+    "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"
   },
   {
     "uri": "ui-kit://patterns/demo",
@@ -506,7 +506,7 @@
       "showcase demo"
     ],
     "priority": 70,
-    "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\nCanonical 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",
+    "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\nCanonical 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",
     "canonicalMarkup": {
       "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>"
     }
@@ -569,7 +569,7 @@
       "components landing page"
     ],
     "priority": 70,
-    "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Information alert text.\n Warning alert text.\n\n +\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html",
+    "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nCanonical markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html",
     "canonicalMarkup": {
       "default": "<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>"
     }
@@ -603,7 +603,7 @@
       "bulk actions"
     ],
     "priority": 55,
-    "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"
+    "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"
   },
   {
     "uri": "ui-kit://example/states",
@@ -618,7 +618,7 @@
       "feedback examples"
     ],
     "priority": 55,
-    "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n +\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n ?\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n ...\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n !\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n #\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n L\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n Pause\n\n i\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n !\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
+    "searchText": "The non-happy-path surfaces B2B apps actually need\nThe non-happy-path surfaces B2B apps actually need.\nThe non-happy-path surfaces B2B apps actually need.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n States\n\n Operational States\n The non-happy-path surfaces B2B apps actually need\n Empty vs no-results, loading, error, permission, activity history, files, and system notifications all in one place.\n\n No saved views\n This is the create-first empty state. Use it when a user has not configured anything yet.\n\n Dismiss\n Create View\n\n No records matched these filters\n This is intentionally quieter than the empty state. The system has data, but this particular query did not find any.\n\n Clear Filters\n Save Search\n\n Refreshing the review queue\n Use a clear loading state for longer-running data refreshes instead of leaving a blank card.\n\n Export failed\n Use this when the workflow broke and the user needs an obvious next step, not a generic alert buried inside the page.\n\n The ERP endpoint returned a validation error for 4 selected records.\n\n Download Error Log\n Retry Export\n\n Permission and Locked States\n\n Finance Manager role required\n This action is available only to users who can approve exports above $50,000.\n\n Record is locked for nightly sync\n Use the locked state for records that are temporarily unavailable because another process owns them.\n\n View Read-Only\n\n Toasts and Side Feedback\n\n An inline auto-refresh widget works well on queue and review pages where fresh data matters but the control should stay out of the main action area.\n\n Pause\n\n Queue refresh in\n 300s\n\n Refreshing queue\n\n View saved\n The shared queue filter is now available to the AP Team.\n\n Background import still running\n Use ephemeral notifications for asynchronous work that succeeded, failed, or is still in motion.\n\n Activity Timeline\n\n Imported from OpenPay\n System\n\n 8:13 AM\n Nightly sync\n Sam McAravey\n\n The payload normalized successfully and routed to the Needs Review queue.\n\n Waiver verification still pending\n Review\n\n 8:19 AM\n Compliance rule\n\n This timeline variant works better than a plain list once actor, timestamp, and status all matter together.\n\n Assigned to AP Team\n Queue\n\n 8:22 AM\n Routing rule\n\n Use this for audit-heavy pages where the sequence of events matters as much as the final state.\n\n Files and Documents\n\n Drop waivers or billing support here\n Use this for document-centric flows where operators collect several files before submission.\n\n Browse Files\n\n conditional-waiver-march.pdf\n PDF • 1.8 MB • uploaded 8:28 AM\n\n Verified\n\n Preview\n Download\n\n insurance-certificate.pdf\n PDF • 420 KB • expires in 14 days\n\n Expiring\n\n Preview\n Replace\n\n Operational states, audit trails, notifications, and file workflows.\nstate examples\nfeedback examples\nstates.html"
   },
   {
     "uri": "ui-kit://example/overlay-workflows",
@@ -634,7 +634,7 @@
       "modals"
     ],
     "priority": 55,
-    "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 i\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 !\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 i\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"
+    "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"
   },
   {
     "uri": "ui-kit://example/demo",
@@ -649,7 +649,7 @@
       "showcase demo"
     ],
     "priority": 55,
-    "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",
+    "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",
     "canonicalMarkup": {
       "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>"
     }
@@ -712,7 +712,7 @@
       "components landing page"
     ],
     "priority": 55,
-    "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Information alert text.\n Warning alert text.\n\n +\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nExample markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html",
+    "searchText": "Browser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\nBrowser-native components that stay inside the same CSS kit.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Menu\n\n Examples\n Web Components\n\n Optional Layer\n Browser-native components that stay inside the same CSS kit.\n Use the class-based UI kit when you only need the language. Use the Web Component layer when you want declarative HTML, attributes, slots, DOM events, and the same design vocabulary from plain browser markup.\n\n Read the package docs\n Read the maintainer notes\n\n Load the entrypoints\n\n The package export is `@incursa/ui-kit/web-components`. Pair it with `@incursa/ui-kit/web-components/style.css` for the default look, then import the runtime once to register the shipped elements.\n <link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n\n The v1 layer covers layouts, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state/live-region/auto-refresh/theme-switcher, button/button-group/button-toolbar/close-button, alert/empty-state/list-group/key-value hosts, badge/spinner atoms, and disclosure/dialog/drawer.\n Tables and the remaining data presentation surfaces, filters, bulk workflows, files, utilities, and most other presentation-only atoms stay CSS-first for now.\n\n Plain HTML equivalent\n Explicit class wiring\n This is the CSS-first version of the same screen shape. It works, but the structure is louder because every wrapper is spelled out by hand.\n <section class=\"inc-card\">\n <div class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div class=\"inc-card__body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</section>\n\n Web Components equivalent\n Shorter markup, same result\n The Web Component layer lets the browser own the semantics while the slots keep the layout contract obvious and reusable.\n <inc-card elevated>\n <div slot=\"header\" class=\"inc-card__header\">\n <h2 class=\"inc-card__title\">Queue summary</h2>\n </div>\n <div slot=\"body\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>...</tbody>\n </table>\n </div>\n</inc-card>\n\n Shell, navigation, and metrics\n\n Queue\n 124\n Pending review\n\n Risks\n 7\n Needs attention\n\n Saved\n $18.2k\n This week\n\n Needs Review\n Ready To Approve\n Recently Exported\n Review queue content.\n Ready-to-approve content.\n Recently exported content.\n\n Atomic controls with stable defaults\n\n Badge hosts standardize tone and pill styling without making you memorize the class suffix chain.\n\n Draft\n Approved\n Pending\n\n Spinner hosts standardize loading variants and accessible labels.\n\n Buttons, alerts, and empty states\n\n Button hosts wrap native controls and standardize tone, size, and loading defaults.\n\n Approve\n Save Draft\n Saving\n\n Publishing\n\n Refreshing\n\n Light\n Dark\n System\n\n Refresh\n Export\n\n Alerts and empty-state shells keep the repeated runtime scaffolding declarative.\n Success alert text.\n Information alert text.\n Warning alert text.\n\n No saved views\n Create a named filter set so your operators can reuse it across screens.\n\n Dismiss\n Create View\n\n List groups and key values\n\n List-group hosts standardize repeated action-row markup without changing list semantics.\n\n Needs review\n March closeout\n Projects missing billing period\n\n First review pass\n Secondary approval\n Final export\n\n Key-value hosts standardize the repeated description-list pair pattern.\n\n Tables, colors, and low-level presentation stay CSS-first\n\n The Web Component layer does not replace the table styling language. It reuses the same class-based table system where that is still the right contract.\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n AP-2026-00144\n March 2026\n $4,992.00\n Pending\n\n The color story and compact action buttons still match the CSS-first kit exactly.\n\n Primary\n Action color\n var(--bs-primary)\n\n Warning\n Attention state\n var(--bs-warning)\n\n Danger\n High-risk state\n var(--bs-danger)\n\n Surface\n Neutral panel\n var(--inc-surface-secondary)\n\n Secondary\n Primary\n Outline\n\n Forms and feedback\n\n Project name\n\n Visible to operators.\n Project name is required.\n\n $\n\n USD\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Project name is required.\n Approval owner missing.\n\n Synced 8:13 AM\n\n Ready for status announcements.\n\n Overlays and disclosures\n\n Open dialog\n Open drawer\n\n Disclosure content stays native-details based in the WC layer.\n\n Copy CSS reference\n Read the architecture\n\n Optional WC layer, same package, same design vocabulary. Open demo.html beside this page to compare the condensed custom-element markup with the CSS-first baseline.\n\n Approve exception\n\n Approval rationale is required.\n\n Approval rationale\n\n Capture an audit-safe explanation.\n\n Cancel\n Approve exception\n\n Assign review owner\n\n Owner\n\n AP Team\n Legal Review\n Compliance\n\n Choose the person responsible.\n\n Cancel\n Assign owner\n\nExample markup:\n\n```html\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\n```\n<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>\nwc\ncomponents landing page\nweb-components.html",
     "canonicalMarkup": {
       "default": "<link rel=\"stylesheet\" href=\"/node_modules/@incursa/ui-kit/web-components/style.css\">\n<script type=\"module\">\n import \"@incursa/ui-kit/web-components\";\n</script>"
     }
@@ -729,7 +729,7 @@
       "reference example"
     ],
     "priority": 55,
-    "searchText": "Rendered controls with copyable HTML\nExample catalog with copy/paste HTML snippets.\nExample catalog with copy/paste HTML snippets.\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 Reference\n\n Reference Catalog\n Rendered controls with copyable HTML\n This page is the practical copy/paste surface. Each section shows the rendered result first, then the HTML markup directly below it.\n\n Code View\n Web Components first, HTML + CSS on demand\n\n HTML + CSS\n\n Web Components\n\n Web Components is the default code view on this page. Sections that are still CSS-first are labeled in the viewer so the page stays honest about what exists today.\n\n Theme Switcher\n\n Appearance\n System\n\n Light\n Dark\n System\n\n Cycle\n\n The bundled helper stores the selected mode in localStorage, resolves system against prefers-color-scheme, keeps the root `data-bs-theme` attribute in sync, and can either wire your own controls or mount the packaged switcher into an empty host.\n\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n\n Page 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\n Buttons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n Badges 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\n Form 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\n Cards, 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\n Tabs\n\n Overview\n Aging\n\n Folder tab content.\n\n Second folder tab content.\n\n Needs Review\n Ready\n\n Line tab content.\n\n Second line tab content.\n\n<section class=\"inc-tabs-folder\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-overview\">Overview</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-aging\">Aging</button></li>\n </ul>\n <div class=\"inc-tab-content\">\n <div class=\"inc-tab-pane active\" id=\"ref-folder-overview\" role=\"tabpanel\">...</div>\n <div class=\"inc-tab-pane\" id=\"ref-folder-aging\" role=\"tabpanel\">...</div>\n </div>\n</section>\n\n<section class=\"inc-tabs-line\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-one\">Needs Review</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-two\">Ready</button></li>\n </ul>\n</section>\n\n Tables 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\n Native 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\n Floating Content\n\n Tooltip text for short hover help.\n\n Popover title\n Popover content can hold short guidance, counts, or a compact callout.\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-tooltip show bs-tooltip-auto\" role=\"tooltip\">\n <div class=\"tooltip-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-tooltip__inner\">Tooltip text for short hover help.</div>\n </div>\n</div>\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-popover show bs-popover-auto\" role=\"tooltip\">\n <div class=\"popover-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-popover-header\">Popover title</div>\n <div class=\"inc-popover-body\">Popover content can hold short guidance, counts, or a compact callout.</div>\n </div>\n</div>\n\n Validation 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\n Spacing 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\n Table Families\n\n Review Grid\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n AP-148\n Expiring Docs\n $7,882\n\n Analytics Grid\n\n Week\n Approved\n Variance\n\n W10\n 428\n +6.2%\n\n W11\n 447\n +4.4%\n\n Spreadsheet Grid\n\n Line\n Code\n Hours\n\n 001\n FRM-042\n 12.50\n\n 002\n FRM-043\n 8.25\n\n<table class=\"inc-table inc-table--review-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--analytics-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--spreadsheet-grid inc-table--sm\">...</table>\n\n Overlay Workflows\n\n Modal and offcanvas patterns now have a dedicated showcase page with validation, drawer content, and helper-driven open/close behavior.\n\n Open Overlay Showcase\n Compare With Drawer Grid\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" data-inc-toggle=\"modal\" data-inc-target=\"#approval-modal\">Open modal</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" data-inc-toggle=\"offcanvas\" data-inc-target=\"#assignment-drawer\">Open offcanvas</button>\n\n Operational 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\n Detail, Timeline, Files, And Grid Patterns\n\n Record Id\n AP-2026-00142\n\n Current request\n $18,240.22\n\n Imported from OpenPay\n\n 8:13 AM\n Nightly sync\n\n Timeline entries combine actor, time, event, and state without falling apart visually.\n\n Drop documents here\n For review workflows with waiver or attachment requirements.\n\n Browse Files\n\n 3 rows selected\n\n Reject Selected\n\n<div class=\"inc-key-value-grid\">\n <dl class=\"inc-key-value inc-key-value--card\">\n <dt class=\"inc-key-value__label\">Record Id</dt>\n <dd class=\"inc-key-value__value inc-key-value__value--data\">AP-2026-00142</dd>\n </dl>\n</div>\n\n<div class=\"inc-timeline\">\n <div class=\"inc-timeline__item\">...</div>\n</div>\n\n<div class=\"inc-file-dropzone\">...</div>\n<div class=\"inc-bulk-bar\">...</div>\n\n Auto Refresh Widget\n\n Use the inline modifier inside cards or toolbars, and the base class when you want the widget pinned to the page corner.\n\n Queue refresh in\n 180s\n\n Refreshing queue\n\n Pause\n\n<div class=\"inc-auto-refresh\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"30\"\n data-inc-refresh-label=\"Refresh in\"\n data-inc-refresh-loading-label=\"Refreshing\">\n <span class=\"inc-auto-refresh__countdown\">\n <span class=\"inc-auto-refresh__label\">Refresh in</span>\n <span class=\"inc-auto-refresh__value\">30s</span>\n </span>\n <span class=\"inc-auto-refresh__status\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" hidden>\n <span class=\"inc-auto-refresh__spinner\" aria-hidden=\"true\">\n <span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm inc-spinner--border--primary\"></span>\n <span class=\"inc-spinner inc-spinner--grow inc-spinner--grow--sm inc-spinner--grow--primary\"></span>\n </span>\n <span class=\"inc-auto-refresh__status-text\">Refreshing</span>\n </span>\n <button class=\"inc-btn inc-btn--secondary inc-btn--micro inc-auto-refresh__toggle\"\n type=\"button\"\n data-inc-action=\"auto-refresh-toggle\"\n aria-label=\"Pause\"\n aria-pressed=\"false\">\n <span class=\"inc-auto-refresh__toggle-text\">Pause</span>\n </button>\n</div>\n\n<div class=\"inc-auto-refresh inc-auto-refresh--inline\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"90\">\n ...\n</div>\n\n Copy snippet\n Open docs\n\n Reference page for copy/paste HTML patterns. Web Components are the default code view here, while the class catalog remains authoritative.\n\n Reference Dialog\n Native dialog example for copy/paste use.\n\n ×\n\n This is the minimal dialog shell used on the native page. Copy the outer <dialog>, the surface wrapper, and the form-based footer if you want native close behavior.\n\n Close\n Confirm\n\n Reference Drawer\n Native side sheet example for assignment and note-taking flows.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Routing note\n Route to Legal Review so the W-9 can be validated before export.\n\n Cancel\n Assign\n\nExample markup:\n\n```html\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n```\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\nreference example\nreference.html",
+    "searchText": "Rendered controls with copyable HTML\nExample catalog with copy/paste HTML snippets.\nExample catalog with copy/paste HTML snippets.\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 Reference\n\n Reference Catalog\n Rendered controls with copyable HTML\n This page is the practical copy/paste surface. Each section shows the rendered result first, then the HTML markup directly below it.\n\n Code View\n Web Components first, HTML + CSS on demand\n\n HTML + CSS\n\n Web Components\n\n Web Components is the default code view on this page. Sections that are still CSS-first are labeled in the viewer so the page stays honest about what exists today.\n\n Theme Switcher\n\n Appearance\n System\n\n Light\n Dark\n System\n\n Cycle\n\n The bundled helper stores the selected mode in localStorage, resolves system against prefers-color-scheme, keeps the root `data-bs-theme` attribute in sync, and can either wire your own controls or mount the packaged switcher into an empty host.\n\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n\n Page 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\n Buttons\n\n Primary\n Secondary\n Outline\n Danger\n Warning\n Info\n\n Small\n Micro\n\n Left\n Right\n\n Publishing\n Refreshing\n\n Publishing\n Refreshing\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\">Primary</button>\n<button class=\"inc-btn inc-btn--secondary\" type=\"button\">Secondary</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\">Outline</button>\n<button class=\"inc-btn inc-btn--danger\" type=\"button\">Danger</button>\n\n<button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Small</button>\n<button class=\"inc-btn inc-btn--secondary inc-btn--micro\" type=\"button\">Micro</button>\n\n<div class=\"inc-button-group inc-button-group--sm\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\">Left</button>\n <button class=\"inc-btn inc-btn--primary\" type=\"button\">Right</button>\n</div>\n\n<button class=\"inc-btn inc-btn--primary is-loading\" type=\"button\">Publishing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n<button class=\"inc-btn inc-btn--secondary is-loading\" type=\"button\">Refreshing<span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span></button>\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Publishing</span></button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" aria-busy=\"true\"><span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm\" aria-hidden=\"true\"></span><span>Refreshing</span></button>\n\n Badges 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\n Form 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\n Cards, 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\n Tabs\n\n Overview\n Aging\n\n Folder tab content.\n\n Second folder tab content.\n\n Needs Review\n Ready\n\n Line tab content.\n\n Second line tab content.\n\n<section class=\"inc-tabs-folder\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-overview\">Overview</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-folder-aging\">Aging</button></li>\n </ul>\n <div class=\"inc-tab-content\">\n <div class=\"inc-tab-pane active\" id=\"ref-folder-overview\" role=\"tabpanel\">...</div>\n <div class=\"inc-tab-pane\" id=\"ref-folder-aging\" role=\"tabpanel\">...</div>\n </div>\n</section>\n\n<section class=\"inc-tabs-line\">\n <ul class=\"inc-tabs-nav\" role=\"tablist\">\n <li><button class=\"inc-tab active\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-one\">Needs Review</button></li>\n <li><button class=\"inc-tab\" type=\"button\" data-inc-toggle=\"tab\" data-inc-target=\"#ref-line-two\">Ready</button></li>\n </ul>\n</section>\n\n Tables 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\n Native 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\n Floating Content\n\n Tooltip text for short hover help.\n\n Popover title\n Popover content can hold short guidance, counts, or a compact callout.\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-tooltip show bs-tooltip-auto\" role=\"tooltip\">\n <div class=\"tooltip-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-tooltip__inner\">Tooltip text for short hover help.</div>\n </div>\n</div>\n\n<div class=\"demo-muted-panel position-relative\">\n <div class=\"inc-popover show bs-popover-auto\" role=\"tooltip\">\n <div class=\"popover-arrow\" aria-hidden=\"true\"></div>\n <div class=\"inc-popover-header\">Popover title</div>\n <div class=\"inc-popover-body\">Popover content can hold short guidance, counts, or a compact callout.</div>\n </div>\n</div>\n\n Validation 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\n Spacing 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\n Table Families\n\n Review Grid\n\n Record\n State\n Amount\n\n AP-142\n Needs Review\n $18,240\n\n AP-148\n Expiring Docs\n $7,882\n\n Analytics Grid\n\n Week\n Approved\n Variance\n\n W10\n 428\n +6.2%\n\n W11\n 447\n +4.4%\n\n Spreadsheet Grid\n\n Line\n Code\n Hours\n\n 001\n FRM-042\n 12.50\n\n 002\n FRM-043\n 8.25\n\n<table class=\"inc-table inc-table--review-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--analytics-grid inc-table--sm\">...</table>\n<table class=\"inc-table inc-table--spreadsheet-grid inc-table--sm\">...</table>\n\n Overlay Workflows\n\n Modal and offcanvas patterns now have a dedicated showcase page with validation, drawer content, and helper-driven open/close behavior.\n\n Open Overlay Showcase\n Compare With Drawer Grid\n\n<button class=\"inc-btn inc-btn--primary\" type=\"button\" data-inc-toggle=\"modal\" data-inc-target=\"#approval-modal\">Open modal</button>\n<button class=\"inc-btn inc-btn--outline-secondary\" type=\"button\" data-inc-toggle=\"offcanvas\" data-inc-target=\"#assignment-drawer\">Open offcanvas</button>\n\n Operational 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\n Detail, Timeline, Files, And Grid Patterns\n\n Record Id\n AP-2026-00142\n\n Current request\n $18,240.22\n\n Imported from OpenPay\n\n 8:13 AM\n Nightly sync\n\n Timeline entries combine actor, time, event, and state without falling apart visually.\n\n Drop documents here\n For review workflows with waiver or attachment requirements.\n\n Browse Files\n\n No files selected yet.\n\n 3 rows selected\n\n Reject Selected\n\n<div class=\"inc-key-value-grid\">\n <dl class=\"inc-key-value inc-key-value--card\">\n <dt class=\"inc-key-value__label\">Record Id</dt>\n <dd class=\"inc-key-value__value inc-key-value__value--data\">AP-2026-00142</dd>\n </dl>\n</div>\n\n<div class=\"inc-timeline\">\n <div class=\"inc-timeline__item\">...</div>\n</div>\n\n<div class=\"inc-file-dropzone\">...</div>\n<div class=\"inc-bulk-bar\">...</div>\n\n Auto Refresh Widget\n\n Use the inline modifier inside cards or toolbars, and the base class when you want the widget pinned to the page corner.\n\n Pause\n\n Queue refresh in\n 180s\n\n Refreshing queue\n\n<div class=\"inc-auto-refresh\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"30\"\n data-inc-refresh-label=\"Refresh in\"\n data-inc-refresh-loading-label=\"Refreshing\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--micro inc-auto-refresh__toggle\"\n type=\"button\"\n data-inc-action=\"auto-refresh-toggle\"\n aria-label=\"Pause\"\n aria-pressed=\"false\">\n <span class=\"inc-auto-refresh__toggle-icon\" aria-hidden=\"true\"></span>\n <span class=\"inc-auto-refresh__toggle-text\">Pause</span>\n </button>\n <span class=\"inc-auto-refresh__countdown\">\n <span class=\"inc-auto-refresh__label\">Refresh in</span>\n <span class=\"inc-auto-refresh__value\">30s</span>\n </span>\n <span class=\"inc-auto-refresh__status\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" hidden>\n <span class=\"inc-auto-refresh__spinner\" aria-hidden=\"true\">\n <span class=\"inc-spinner inc-spinner--border inc-spinner--border--sm inc-spinner--border--primary\"></span>\n <span class=\"inc-spinner inc-spinner--grow inc-spinner--grow--sm inc-spinner--grow--primary\"></span>\n </span>\n <span class=\"inc-auto-refresh__status-text\">Refreshing</span>\n </span>\n</div>\n\n<div class=\"inc-auto-refresh inc-auto-refresh--inline\"\n data-inc-auto-refresh\n data-inc-refresh-seconds=\"90\">\n ...\n</div>\n\n Copy snippet\n Open docs\n\n Reference page for copy/paste HTML patterns. Web Components are the default code view here, while the class catalog remains authoritative.\n\n Reference Dialog\n Native dialog example for copy/paste use.\n\n ×\n\n This is the minimal dialog shell used on the native page. Copy the outer <dialog>, the surface wrapper, and the form-based footer if you want native close behavior.\n\n Close\n Confirm\n\n Reference Drawer\n Native side sheet example for assignment and note-taking flows.\n\n ×\n\n Record\n AP-2026-00142\n\n Current owner\n AP Team\n\n Routing note\n Route to Legal Review so the W-9 can be validated before export.\n\n Cancel\n Assign\n\nExample markup:\n\n```html\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\n```\n<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>\nreference example\nreference.html",
     "canonicalMarkup": {
       "default": "<div class=\"inc-theme-toggle\" data-inc-theme-switcher>\n <div class=\"inc-theme-toggle__label\">\n <p class=\"inc-theme-toggle__title\">Appearance</p>\n <p class=\"inc-theme-toggle__value\" data-inc-theme-label>System</p>\n </div>\n <div class=\"inc-button-group inc-button-group--sm\" role=\"group\" aria-label=\"Theme mode\">\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"light\">Light</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"dark\">Dark</button>\n <button class=\"inc-btn inc-btn--secondary\" type=\"button\" data-inc-theme-mode=\"system\">System</button>\n </div>\n <button class=\"inc-btn inc-btn--outline-secondary inc-btn--sm\" type=\"button\" data-inc-theme-toggle>Cycle</button>\n</div>\n\n<div data-inc-theme-switcher data-inc-theme-switcher-block></div>\n\n<script>\n window.IncTheme.setMode(\"dark\");\n</script>"
     }