@incursa/ui-kit 1.4.0 → 1.6.1

package/dist/mcp/search-index.json

@@ -0,0 +1,827 @@
+[
+  {
+    "uri": "ui-kit://overview",
+    "title": "Overview",
+    "kind": "guide",
+    "summary": "Repository-level overview of the UI kit and its canonical public surface.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt"
+    ],
+    "aliases": [
+      "ui kit overview",
+      "overview"
+    ],
+    "priority": 100,
+    "searchText": "Overview\nRepository-level overview of the UI kit and its canonical public surface.\n[![CI](https://github.com/incursa/ui-kit/actions/workflows/ci.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/ci.yml)\n[![Pages](https://github.com/incursa/ui-kit/actions/workflows/pages.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/pages.yml)\n[![npm publish](https://github.com/incursa/ui-kit/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/incursa/ui-kit/actions/workflows/npm-publish.yml)\n\nThis folder contains a distilled, reusable UI kit for data-heavy business applications. The goal is to keep the recurring visual patterns that define the UI language and expose them consistently through the [`inc-*`](reference.html) class surface. The CSS classes remain the canonical public API; the optional Web Component layer adds a browser-native entrypoint without replacing the existing class-based usage model. The Web Component layer also ships a companion stylesheet entrypoint so the default look is one import away.\n\nIncursa UI Kit\n\nShort description:\nReusable UI kit for data-heavy business applications. Start from the highest-level public surface that already fits: raw HTML plus inc-* classes for existing markup and CSS-only families, the optional ./web-components entrypoint for supported v1 browser-native components when declarative markup is the better fit, and dist/inc-design-language.js only for helper-managed state.\n\nPackage identity:\n- npm package: @incursa/ui-kit\n- license: Apache-2.0\n- repository: https://github.com/incursa/ui-kit\n\nSurface selection:\n- Use dist/inc-design-language.css if the target app already has working HTML and mainly needs the visual language.\nui kit overview\noverview\nREADME.md\nLLMS.txt"
+  },
+  {
+    "uri": "ui-kit://install",
+    "title": "Install",
+    "kind": "install",
+    "summary": "Install guidance for compiled CSS, SCSS, JS helper, and web-components entrypoints.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt",
+      "AI-AGENT-INSTRUCTIONS.md",
+      "package.json"
+    ],
+    "aliases": [
+      "install",
+      "installation",
+      "setup"
+    ],
+    "priority": 110,
+    "searchText": "Install\nInstall guidance for compiled CSS, SCSS, JS helper, and web-components entrypoints.\nInstall @incursa/ui-kit with npm, pnpm, or yarn.\n\nnpm: npm install @incursa/ui-kit\npnpm: pnpm add @incursa/ui-kit\nyarn: yarn add @incursa/ui-kit\n\nInstall decision tree:\n- Existing HTML and mostly visual work: use the compiled CSS surface.\n- Token, density, or Bootstrap-default tuning: use the SCSS source entrypoint.\n- Stateful primitives like menus, tabs, collapses, auto-refresh, or dialog launch hooks: use the JS helper.\n- Approved v1 browser-native families: use the same-package web-components entrypoint.\n\nCSS-only import: import \"@incursa/ui-kit/dist/inc-design-language.css\";\nJS helper import: import \"@incursa/ui-kit/dist/inc-design-language.js\";\nWeb components import:\nimport \"@incursa/ui-kit/web-components/style.css\";\nimport \"@incursa/ui-kit/web-components\";\nSCSS import: @import \"@incursa/ui-kit/src/inc-design-language\";\n\n- The compiled CSS already includes the Bootstrap layer it was built on.\n- The SCSS source path requires Bootstrap Sass at build time because it imports bootstrap/scss/bootstrap.\n- The same-package web-components entrypoint is additive and keeps the CSS-first surface intact.\n- Use the JS helper only for stateful primitives such as menus, tabs, collapsible sections, auto-refresh widgets, and dialog launch hooks.\ninstall\ninstallation\nsetup\nREADME.md\nLLMS.txt\nAI-AGENT-INSTRUCTIONS.md\npackage.json"
+  },
+  {
+    "uri": "ui-kit://install/decision-tree",
+    "title": "Install decision tree",
+    "kind": "install",
+    "summary": "Choose compiled CSS, SCSS, JS helper, or web-components based on the consumer scenario.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt",
+      "AI-AGENT-INSTRUCTIONS.md"
+    ],
+    "aliases": [
+      "install decision tree",
+      "decision tree",
+      "surface selection"
+    ],
+    "priority": 109,
+    "searchText": "Install decision tree\nChoose compiled CSS, SCSS, JS helper, or web-components based on the consumer scenario.\nDecision tree:\n- Existing HTML and mostly visual work: use the compiled CSS surface.\n- Token, density, or Bootstrap-default tuning: use the SCSS source entrypoint.\n- Stateful primitives like menus, tabs, collapses, auto-refresh, or dialog launch hooks: use the JS helper.\n- Approved v1 browser-native families: use the same-package web-components entrypoint.\n\nRelated entrypoints:\n- Compiled CSS: `dist/inc-design-language.css`\n- JS helper: `dist/inc-design-language.js`\n- Web components: `@incursa/ui-kit/web-components`\n- SCSS source: `src/inc-design-language.scss`\ninstall decision tree\ndecision tree\nsurface selection\nREADME.md\nLLMS.txt\nAI-AGENT-INSTRUCTIONS.md"
+  },
+  {
+    "uri": "ui-kit://update",
+    "title": "Update",
+    "kind": "install",
+    "summary": "Package-manager update commands and release-review guidance.",
+    "sourcePaths": [
+      "CHANGELOG.md",
+      "package.json"
+    ],
+    "aliases": [
+      "update",
+      "upgrade",
+      "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"
+  },
+  {
+    "uri": "ui-kit://package-metadata",
+    "title": "Package metadata",
+    "kind": "guide",
+    "summary": "Package identity, exports, and packaging surface from package.json.",
+    "sourcePaths": [
+      "package.json"
+    ],
+    "aliases": [
+      "package metadata",
+      "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"
+  },
+  {
+    "uri": "ui-kit://release-notes/latest",
+    "title": "Latest release notes",
+    "kind": "guide",
+    "summary": "The latest recorded changelog entry.",
+    "sourcePaths": [
+      "CHANGELOG.md"
+    ],
+    "aliases": [
+      "release notes",
+      "changelog",
+      "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"
+  },
+  {
+    "uri": "ui-kit://guides/choose-css-vs-scss-vs-js-vs-web-components",
+    "title": "Choose CSS vs SCSS vs JS vs web components",
+    "kind": "guide",
+    "summary": "Decision tree for the package entrypoints and helper surfaces.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt",
+      "AI-AGENT-INSTRUCTIONS.md"
+    ],
+    "aliases": [],
+    "priority": 80,
+    "searchText": "Choose CSS vs SCSS vs JS vs web components\nDecision tree for the package entrypoints and helper surfaces.\nDecision tree:\n- Existing HTML and mostly visual work: use the compiled CSS.\n- Token, density, or Bootstrap-default tuning: use the SCSS source entrypoint.\n- Stateful primitives like menus, tabs, collapses, auto-refresh, or dialog launch hooks: use the JS helper.\n- Approved v1 browser-native families: use the same-package web-components entrypoint.\n- Start with the highest-level public surface that already fits the job.\n- Prefer [`web-components.html`](web-components.html) and the same-package [`./web-components`](./web-components) entrypoint when you are building new UI from plain HTML/JS and the capability exists in the approved v1 component set.\n- Prefer [`dist/inc-design-language.css`](dist/inc-design-language.css) with raw HTML plus [`inc-*`](reference.html) classes when the markup already exists, the family is CSS-only, or you only need styling.\n- Use native `<button>`, `<input>`, `<details>`, and `<dialog>` before adding helper wiring or custom elements.\n- Drop into `src/*` or token files only when the public surface cannot express the needed layout or behavior.\nREADME.md\nLLMS.txt\nAI-AGENT-INSTRUCTIONS.md"
+  },
+  {
+    "uri": "ui-kit://guides/when-to-use-css-first",
+    "title": "When to use CSS first",
+    "kind": "guide",
+    "summary": "Use the compiled CSS when markup already exists or the family is CSS-only.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt",
+      "AI-AGENT-INSTRUCTIONS.md"
+    ],
+    "aliases": [],
+    "priority": 80,
+    "searchText": "When to use CSS first\nUse the compiled CSS when markup already exists or the family is CSS-only.\n- Start with the highest-level public surface that already fits the job.\n- Prefer [`web-components.html`](web-components.html) and the same-package [`./web-components`](./web-components) entrypoint when you are building new UI from plain HTML/JS and the capability exists in the approved v1 component set.\n- Prefer [`dist/inc-design-language.css`](dist/inc-design-language.css) with raw HTML plus [`inc-*`](reference.html) classes when the markup already exists, the family is CSS-only, or you only need styling.\n- Use native `<button>`, `<input>`, `<details>`, and `<dialog>` before adding helper wiring or custom elements.\n- Drop into `src/*` or token files only when the public surface cannot express the needed layout or behavior.\nREADME.md\nLLMS.txt\nAI-AGENT-INSTRUCTIONS.md"
+  },
+  {
+    "uri": "ui-kit://guides/allowed-web-component-families",
+    "title": "Allowed web component families",
+    "kind": "guide",
+    "summary": "The approved v1 browser-native families and the surfaces that stay CSS-first.",
+    "sourcePaths": [
+      "README.md",
+      "LLMS.txt"
+    ],
+    "aliases": [],
+    "priority": 80,
+    "searchText": "Allowed web component families\nThe approved v1 browser-native families and the surfaces that stay CSS-first.\nApproved v1 browser-native families from the repo guidance:\n- layouts and shells\n- navbar, tabs, and user menu\n- field, input group, choice group, readonly field, and validation summary\n- state panel, live region, auto-refresh, and theme switcher\n- disclosure, dialog, and drawer\nUse the CSS classes by default. Use Web Components when you want the same design language from plain HTML, JavaScript, and slots rather than hand-wired class markup. Use native HTML primitives first when `<button>`, `<input>`, `<details>`, or `<dialog>` already satisfy the interaction and accessibility contract.\n\nLoad the optional layered entrypoints from the same package:\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\nThe module auto-defines the shipped elements on load. If you prefer explicit registration control, import the same entrypoint in your module graph and call the exported registration helper from your own bootstrap code.\n\nThe v1 Web Component scope covers:\n\n- layouts and shells: [`inc-app-shell`](reference.html), [`inc-page`](reference.html), [`inc-page-header`](reference.html), [`inc-section`](reference.html), [`inc-card`](reference.html), [`inc-summary-overview`](reference.html), [`inc-summary-block`](reference.html), [`inc-footer-bar`](reference.html)\n- navigation: [`inc-navbar`](reference.html), [`inc-tabs`](reference.html), [`inc-user-menu`](reference.html)\n- forms and inputs: [`inc-field`](reference.html), [`inc-input-group`](reference.html), [`inc-choice-group`](reference.html), [`inc-readonly-field`](reference.html), [`inc-validation-summary`](reference.html)\n- feedback and status: [`inc-state-panel`](reference.html), [`inc-live-region`](reference.html), [`inc-auto-refresh`](reference.html), [`inc-theme-switcher`](reference.html), [`inc-badge`](reference.html), [`inc-spinner`](reference.html)\n- actions and detail shells: [`inc-button`](reference.html), [`inc-button-group`](reference.html), [`inc-button-toolbar`](reference.html), [`inc-close-button`](reference.html), [`inc-alert`](reference.html), [`inc-empty-state`](reference.html), [`inc-list-group`](reference.html), [`inc-key-value-grid`](reference.html), [`inc-key-value`](reference.html)\n- overlays and disclosures: [`inc-disclosure`](reference.html), [`inc-dialog`](reference.html), [`inc-drawer`](reference.html)\n\nThe intentionally deferred surfaces stay CSS-first in v1, including tables and the remaining data presentation surfaces, filter and bulk toolbars, file workflows, permission banners, toasts, utility helpers, and the remaining compatibility overlay shells.\n\nFor maintainers, treat the Web Component layer as an additive wrapper over the same design language: one package, one token system, one naming vocabulary, and the same helper behavior where it already exists.\n\nLicensed under Apache 2.0.\nREADME.md\nLLMS.txt"
+  },
+  {
+    "uri": "ui-kit://guides/customization-order",
+    "title": "Customization order",
+    "kind": "guide",
+    "summary": "The supported order for theme, token, rebuild, and component-rule changes.",
+    "sourcePaths": [
+      "AI-AGENT-INSTRUCTIONS.md",
+      "LLMS.txt",
+      "README.md"
+    ],
+    "aliases": [],
+    "priority": 80,
+    "searchText": "Customization order\nThe supported order for theme, token, rebuild, and component-rule changes.\nCustomization order:\n1. Change fonts and colors in src/_inc-theme.scss.\n2. Use src/_inc-tokens.scss only for deeper token or Bootstrap-level tuning.\n3. Rebuild the CSS.\n4. Only add new component rules after checking whether an existing inc-* block already fits.\n1. Change fonts and colors in [`src/_inc-theme.scss`](src/_inc-theme.scss).\n2. Use [`src/_inc-tokens.scss`](src/_inc-tokens.scss) only for deeper token or Bootstrap-level tuning.\n3. Rebuild the CSS.\n4. Only add new component rules after checking whether an existing [`inc-*`](reference.html) block already fits.\nAI-AGENT-INSTRUCTIONS.md\nLLMS.txt\nREADME.md"
+  },
+  {
+    "uri": "ui-kit://guides/guardrails",
+    "title": "Guardrails",
+    "kind": "guide",
+    "summary": "Repository guardrails for naming, accessibility, and component scope.",
+    "sourcePaths": [
+      "AI-AGENT-INSTRUCTIONS.md",
+      "LLMS.txt",
+      "README.md"
+    ],
+    "aliases": [],
+    "priority": 80,
+    "searchText": "Guardrails\nRepository guardrails for naming, accessibility, and component scope.\n- Keep the typography stack split:\n sans for UI text, mono for data.\n- Preserve explicit alignment classes for numeric table data.\n- Avoid adding product-specific shell/background styles to this package.\n- Keep new components generic enough to drop into another admin/data app.\n- If you add a new block, prefer names like [`inc-filter-bar`](reference.html), [`inc-stat-card`](reference.html), or [`inc-data-toolbar`](reference.html) over feature-specific names.\n- Keep border radius consistent across panels, tabs, tables, and cards unless there is a deliberate reason to differentiate them.\n- Prefer native browser behavior first for disclosures and dialogs when it fits the product; use the helper only when the Bootstrap-like component contract needs custom state handling.\n- Keep the CSS-first class API canonical and treat the Web Component layer as additive, not a replacement.\nAI-AGENT-INSTRUCTIONS.md\nLLMS.txt\nREADME.md"
+  },
+  {
+    "uri": "ui-kit://components/buttons",
+    "title": "Buttons",
+    "kind": "component",
+    "summary": "Primary, secondary, outline, danger, warning, info, and loading buttons.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "button",
+      "btn",
+      "actions",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/forms",
+    "title": "Forms",
+    "kind": "component",
+    "summary": "Form fields, selects, textareas, input groups, and validation basics.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "form fields",
+      "inputs",
+      "form",
+      "forms"
+    ],
+    "priority": 85,
+    "searchText": "Forms\nForm fields, selects, textareas, input groups, and validation basics.\nForm fields, selects, textareas, input groups, and validation basics.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n```\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\nform fields\ninputs\nform\nforms\nreference.html",
+    "canonicalMarkup": {
+      "default": "<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/form-choices",
+    "title": "Form choices",
+    "kind": "component",
+    "summary": "Checkbox, radio, and switch choice groups.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "choices",
+      "checkboxes",
+      "radios",
+      "switches",
+      "form choices"
+    ],
+    "priority": 85,
+    "searchText": "Form choices\nCheckbox, radio, and switch choice groups.\nCheckbox, radio, and switch choice groups.\n\nForm Fields\n\n Text input\n\n Select\n\n Draft\n In Progress\n Approved\n\n Textarea\n Operator notes go here.\n\n Start date\n\n Attachment\n\n $\n\n Workflow options\n\n Include related documents\n\n Send notifications\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Apply\n\n<label class=\"inc-form__label\" for=\"ref-name\">Text input</label>\n<input id=\"ref-name\" class=\"inc-form__control\" type=\"text\">\n\n<label class=\"inc-form__label\" for=\"ref-status\">Select</label>\n<select id=\"ref-status\" class=\"inc-form__select\">\n <option>Draft</option>\n <option selected>In Progress</option>\n</select>\n\n<label class=\"inc-form__label\" for=\"ref-notes\">Textarea</label>\n<textarea id=\"ref-notes\" class=\"inc-form__control\" rows=\"3\"></textarea>\n\n<label class=\"inc-form__label\" for=\"ref-start-date\">Start date</label>\n<input id=\"ref-start-date\" class=\"inc-form__control\" type=\"date\">\n\n<label class=\"inc-form__label\" for=\"ref-attachment\">Attachment</label>\n<input id=\"ref-attachment\" class=\"inc-form__control\" type=\"file\">\n\n<div class=\"inc-input-group\">\n <span class=\"inc-input-group__text\">$</span>\n <input class=\"inc-form__control\" type=\"text\">\n</div>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Approval route</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-fast\" name=\"ref-route\" checked>\n <label class=\"inc-form__check-label\" for=\"ref-route-fast\">Fast approval</label>\n </div>\n <div class=\"inc-form__check\">\n <input class=\"inc-form__check-input\" type=\"radio\" id=\"ref-route-standard\" name=\"ref-route\">\n <label class=\"inc-form__check-label\" for=\"ref-route-standard\">Standard approval</label>\n </div>\n </div>\n</fieldset>\n\nCanonical markup:\n\n```html\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\n```\n<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>\nchoices\ncheckboxes\nradios\nswitches\nform choices\nreference.html",
+    "canonicalMarkup": {
+      "default": "<fieldset class=\"inc-form__fieldset\">\n <legend class=\"inc-form__legend\">Workflow options</legend>\n <div class=\"inc-form__choices\">\n <div class=\"inc-form__check\">...</div>\n <div class=\"inc-form__check inc-form__switch\">...</div>\n </div>\n</fieldset>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/tables",
+    "title": "Tables",
+    "kind": "component",
+    "summary": "Dense tables, list groups, and row-oriented collection markup.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "table",
+      "data table",
+      "lists",
+      "tables"
+    ],
+    "priority": 85,
+    "searchText": "Tables\nDense tables, list groups, and row-oriented collection markup.\nDense tables, list groups, and row-oriented collection markup.\n\nTables And Lists\n\n Project\n Period\n Amount\n Status\n\n AP-2026-00142\n March 2026\n $18,240.22\n Approved\n\n Needs Review\n March Closeout\n Projects Missing Billing Period\n\n Inbox\n Assigned to me\n\n First review pass\n Secondary approval\n Final export\n\n Lien Waiver Package\n Last updated 14 minutes ago\n\n Open\n\n Compliance Exceptions\n 2 unresolved items\n\n Review\n\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n```\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\n<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>\ntable\ndata table\nlists\ntables\nreference.html",
+    "canonicalMarkup": {
+      "default": "<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>",
+      "variants": {
+        "families": "<div class=\"inc-table-responsive\">\n <table class=\"inc-table inc-table--sm inc-table--data-table\">\n <thead>...</thead>\n <tbody>\n <tr>\n <td class=\"inc-table__cell inc-table__cell--data\">AP-2026-00142</td>\n <td class=\"inc-table__cell\">March 2026</td>\n <td class=\"inc-table__cell inc-table__cell--numeric\">$18,240.22</td>\n <td class=\"inc-table__cell\"><span class=\"inc-badge inc-badge--success inc-badge--pill\">Approved</span></td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"inc-list-group\">\n <a class=\"inc-list-group__item inc-list-group__item--action active\" href=\"#\">Needs Review</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">March Closeout</a>\n</div>\n\n<div class=\"inc-list-group inc-list-group--flush\">\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Inbox</a>\n <a class=\"inc-list-group__item inc-list-group__item--action\" href=\"#\">Assigned to me</a>\n</div>\n\n<ol class=\"inc-list-group inc-list-group--numbered\">\n <li class=\"inc-list-group__item\">First review pass</li>\n <li class=\"inc-list-group__item\">Secondary approval</li>\n <li class=\"inc-list-group__item\">Final export</li>\n</ol>\n\n<div class=\"inc-vertical-list inc-vertical-list--compact inc-vertical-list--trim inc-vertical-list--inset\">\n <div class=\"inc-vertical-list__item inc-flex-between\">...</div>\n</div>"
+      }
+    }
+  },
+  {
+    "uri": "ui-kit://components/cards",
+    "title": "Cards",
+    "kind": "component",
+    "summary": "Cards, empty states, summary blocks, and metrics surfaces.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "card",
+      "summary blocks",
+      "empty states",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/filter-bars",
+    "title": "Filter bars",
+    "kind": "component",
+    "summary": "Dense filter toolbars, chips, and bulk-action bars.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "filters",
+      "filter bar",
+      "bulk bar",
+      "filter bars"
+    ],
+    "priority": 85,
+    "searchText": "Filter bars\nDense filter toolbars, chips, and bulk-action bars.\nDense filter toolbars, chips, and bulk-action bars.\n\nValidation And Filter Toolbars\n\n There are 2 issues to fix\n\n Contract number is required.\n Billing period must be selected.\n\n Contract number\n\n Contract number is required.\n\n Export contact\n\n Email looks valid.\n\n Search\n\n Owner\n\n AP Team\n Legal Review\n\n Status: Needs review ×\n Owner: AP Team ×\n\n Save View\n Apply\n\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n\nCanonical markup:\n\n```html\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\n```\n<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>\nfilters\nfilter bar\nbulk bar\nfilter bars\nreference.html",
+    "canonicalMarkup": {
+      "default": "<div class=\"inc-form__error-summary\">\n <h3 class=\"inc-form__error-summary-title\">There are 2 issues to fix</h3>\n <ul class=\"inc-form__error-summary-list\">\n <li>Contract number is required.</li>\n <li>Billing period must be selected.</li>\n </ul>\n</div>\n\n<div class=\"inc-form__group\">\n <label class=\"inc-form__label inc-form__label--required\" for=\"ref-contract\">Contract number</label>\n <input id=\"ref-contract\" class=\"inc-form__control is-invalid\" type=\"text\" aria-invalid=\"true\">\n <p class=\"inc-form__feedback inc-form__feedback--error\">Contract number is required.</p>\n</div>\n\n<section class=\"inc-filter-bar\">\n <div class=\"inc-filter-bar__main\">...</div>\n <div class=\"inc-filter-bar__actions\">\n <div class=\"inc-filter-bar__chips\">\n <span class=\"inc-filter-chip\">Owner: AP Team</span>\n </div>\n </div>\n</section>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/layout",
+    "title": "Layout",
+    "kind": "component",
+    "summary": "Page framing, breadcrumbs, and shell wrappers.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "page framing",
+      "shell",
+      "breadcrumb body",
+      "layout"
+    ],
+    "priority": 85,
+    "searchText": "Layout\nPage framing, breadcrumbs, and shell wrappers.\nPage framing, breadcrumbs, and shell wrappers.\n\nPage Framing\n\n Examples\n Reference\n\n Breadcrumb body wrapper\n Use the canonical page wrapper when you want a breadcrumb strip and body stack without introducing another bespoke shell.\n\n Secondary action\n Primary action\n\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\n```\n<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>\npage framing\nshell\nbreadcrumb body\nlayout\nreference.html",
+    "canonicalMarkup": {
+      "default": "<div class=\"inc-page inc-breadcrumb-body\">\n <div class=\"inc-page__breadcrumbs inc-breadcrumb-body__breadcrumb\">\n <ol class=\"inc-breadcrumb\">\n <li class=\"inc-breadcrumb__item\"><a href=\"./index.html\">Examples</a></li>\n <li class=\"inc-breadcrumb__item active\"><span>Reference</span></li>\n </ol>\n </div>\n <div class=\"inc-page__body inc-breadcrumb-body__body\">\n <div class=\"inc-section-container demo-stack\">\n <section class=\"inc-page-header\">...</section>\n </div>\n </div>\n</div>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/states",
+    "title": "States",
+    "kind": "component",
+    "summary": "Operational states, permission banners, and toast feedback surfaces.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "state panel",
+      "feedback",
+      "operational states",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/interaction",
+    "title": "Interaction",
+    "kind": "component",
+    "summary": "Native controls, disclosure, menu, progress, and dialog launch hooks.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "native controls",
+      "dialogs",
+      "interaction hooks",
+      "interaction"
+    ],
+    "priority": 85,
+    "searchText": "Interaction\nNative controls, disclosure, menu, progress, and dialog launch hooks.\nNative controls, disclosure, menu, progress, and dialog launch hooks.\n\nNative Controls\n\n Billing summary\n 3 items\n\n Native details\n\n Example disclosure body.\n\n AP\n\n Queue Actions\n Summary-based menu\n\n Quick actions\n Export current view\n Save filter preset\n\n Import completion\n 72%\n\n Data quality\n 74%\n\n Launch Native Dialog\n Launch Native Drawer\n\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n\nCanonical markup:\n\n```html\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\n```\n<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>\nnative controls\ndialogs\ninteraction hooks\ninteraction\nreference.html",
+    "canonicalMarkup": {
+      "default": "<details class=\"inc-disclosure\" open>\n <summary class=\"inc-disclosure__summary\">\n <span class=\"demo-disclosure-title\">\n <span class=\"inc-disclosure__title\">Billing summary</span>\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">3 items</span>\n </span>\n <span class=\"inc-disclosure__meta\">Native details</span>\n </summary>\n <div class=\"inc-disclosure__content\">...</div>\n</details>\n\n<details class=\"inc-native-menu inc-native-menu--block\">\n <summary class=\"inc-native-menu__summary\">\n <span class=\"inc-user-menu__avatar\">AP</span>\n <span class=\"inc-native-menu__section-title\">\n <span class=\"inc-user-menu__name\">Queue Actions</span>\n <span class=\"inc-user-menu__detail\">Summary-based menu</span>\n </span>\n </summary>\n <div class=\"inc-native-menu__panel\">...</div>\n</details>\n\n<progress class=\"inc-progress inc-progress--success\" max=\"100\" value=\"72\">72%</progress>\n<meter class=\"inc-meter inc-meter--warning\" min=\"0\" max=\"100\" low=\"65\" high=\"90\" optimum=\"100\" value=\"74\">74%</meter>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/status",
+    "title": "Status",
+    "kind": "component",
+    "summary": "Status badges and alert surfaces.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "badge",
+      "alert",
+      "feedback status",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/metrics",
+    "title": "Metrics",
+    "kind": "component",
+    "summary": "Summary overview and summary block metrics.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "summary overview",
+      "summary block",
+      "dashboard metrics",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://components/utilities",
+    "title": "Utilities",
+    "kind": "component",
+    "summary": "Spacing, gap, padding, and visibility helpers.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "utility classes",
+      "spacing utilities",
+      "visibility utilities",
+      "utilities"
+    ],
+    "priority": 85,
+    "searchText": "Utilities\nSpacing, gap, padding, and visibility helpers.\nSpacing, gap, padding, and visibility helpers.\n\nSpacing And Visibility Utilities\n\n inc-u-stack-sm\n Use the utility layer when you need a light spacing or visibility adjustment without pulling in Bootstrap utility classes.\n\n Secondary\n Primary\n\n This alert uses inc-u-hidden-mobile and disappears on smaller screens.\n Common helpers now include stack spacing, gap, padding, hidden/mobile-hidden/desktop-hidden, and visually hidden text.\n\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n\nCanonical markup:\n\n```html\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\n```\n<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>\nutility classes\nspacing utilities\nvisibility utilities\nutilities\nreference.html",
+    "canonicalMarkup": {
+      "default": "<div class=\"inc-u-stack-sm\">\n <span class=\"inc-badge inc-badge--info inc-badge--pill\">inc-u-stack-sm</span>\n <p class=\"inc-text inc-text--regular\">Light spacing without Bootstrap utilities.</p>\n <div class=\"demo-chip-row inc-u-gap-sm\">\n <button class=\"inc-btn inc-btn--secondary inc-btn--sm\" type=\"button\">Secondary</button>\n <button class=\"inc-btn inc-btn--primary inc-btn--sm\" type=\"button\">Primary</button>\n </div>\n</div>\n\n<div class=\"inc-alert inc-alert--info inc-u-hidden-mobile\">Hidden on smaller screens.</div>"
+    }
+  },
+  {
+    "uri": "ui-kit://patterns/reference",
+    "title": "Rendered controls with copyable HTML",
+    "kind": "pattern",
+    "summary": "Copy/paste catalog for the standard controls, page framing, metrics, lists, overlays, and markup patterns.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "reference catalog",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://patterns/forms-and-validation",
+    "title": "Validation, dense toolbars, and edit-friendly detail blocks",
+    "kind": "pattern",
+    "summary": "Validation, dense toolbars, and edit-friendly detail blocks.",
+    "sourcePaths": [
+      "forms-and-validation.html"
+    ],
+    "aliases": [
+      "forms validation",
+      "validation"
+    ],
+    "priority": 70,
+    "searchText": "Validation, dense toolbars, and edit-friendly detail blocks\nValidation, dense toolbars, and edit-friendly detail blocks.\nValidation, dense toolbars, and edit-friendly detail blocks.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n Forms And Validation\n\n Forms And Filters\n Validation, dense toolbars, and edit-friendly detail blocks\n This page covers required labels, help text, validation messaging, error summaries, saved-filter chips, and mixed read-only/edit surfaces.\n\n Validation Summary\n\n There are 3 issues to fix before approval\n\n Contract number is required.\n Billing period must be selected.\n Export contact email is not valid.\n\n Project name\n\n Use the legal project name from the ERP contract.\n Looks good.\n\n Contract number\n\n Visible to AP and legal reviewers.\n Contract number is required.\n\n Billing period\n\n Select a period\n March 2026\n April 2026\n\n Choose the period that will appear on export.\n\n Export contact\n\n Optional. Used only for exception emails.\n\n Approval options\n\n Include related contract documents\n\n Send notifications after approval\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Dense Filter Toolbar\n\n Search\n\n Status\n\n All statuses\n Needs review\n Ready\n\n Owner\n\n AP Team\n Legal Review\n\n Minimum amount\n\n $\n\n Status: Needs review ×\n Owner: AP Team ×\n Amount: $10,000+ ×\n\n Clear All\n Save View\n Apply Filters\n\n This is the pattern to reuse for search-heavy B2B screens: fields above, active chips and actions below.\n\n Read-Only Detail Grid\n\n Project\n North Campus Expansion\n\n Record Id\n AP-2026-00142\n\n Current Request\n $18,240.22\n\n Status\n Needs Review\n\n Inline Edit Pattern\n\n Default review owner\n AP Team\n\n Edit\n\n Default review owner\n\n AP Team\n Legal Review\n Regional Controllers\n\n Cancel\n Save Change\n\n Validation states, filter bars, and read-only/edit detail patterns.\nforms validation\nvalidation\nforms-and-validation.html"
+  },
+  {
+    "uri": "ui-kit://patterns/data-grid-advanced",
+    "title": "Bulk actions, sticky headers, row states, and a side drawer",
+    "kind": "pattern",
+    "summary": "Bulk actions, sticky headers, row states, and a side drawer.",
+    "sourcePaths": [
+      "data-grid-advanced.html"
+    ],
+    "aliases": [
+      "data grid",
+      "grid advanced",
+      "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"
+  },
+  {
+    "uri": "ui-kit://patterns/states",
+    "title": "The non-happy-path surfaces B2B apps actually need",
+    "kind": "pattern",
+    "summary": "The non-happy-path surfaces B2B apps actually need.",
+    "sourcePaths": [
+      "states.html"
+    ],
+    "aliases": [
+      "state examples",
+      "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"
+  },
+  {
+    "uri": "ui-kit://patterns/overlay-workflows",
+    "title": "Modal and offcanvas examples for operator review flows",
+    "kind": "pattern",
+    "summary": "Modal and offcanvas examples for operator review flows.",
+    "sourcePaths": [
+      "overlay-workflows.html"
+    ],
+    "aliases": [
+      "overlays",
+      "overlay workflows",
+      "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"
+  },
+  {
+    "uri": "ui-kit://patterns/demo",
+    "title": "Data-heavy home screen",
+    "kind": "pattern",
+    "summary": "Data-heavy home screen preview of the extracted patterns.",
+    "sourcePaths": [
+      "demo.html"
+    ],
+    "aliases": [
+      "homepage demo",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://patterns/work-queue",
+    "title": "Operator work queue",
+    "kind": "pattern",
+    "summary": "Operator work queue with sidebar navigation and table-heavy composition.",
+    "sourcePaths": [
+      "work-queue.html"
+    ],
+    "aliases": [
+      "queue",
+      "operator queue"
+    ],
+    "priority": 70,
+    "searchText": "Operator work queue\nOperator work queue with sidebar navigation and table-heavy composition.\nOperator work queue with sidebar navigation and table-heavy composition.\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 Work Queue\n\n Queue Menu\n\n Operations\n\n Open pay apps\n 32\n\n Exceptions\n 4\n\n Vendor imports\n 9\n\n Management\n\n Approvals\n 7\n\n Audit trail\n\n Saved Views\n\n Needs review\n Ready to export\n Sync failures\n\n Queue Pattern\n Operator work queue\n Sidebar navigation, line tabs, alerts, filter toolbars, and a dense table with pagination.\n\n 12 imported pay apps were normalized overnight. Two need operator review before approval routing.\n\n Four queued items are missing billing periods and will not export until corrected.\n\n Needs Review\n Ready To Approve\n Recently Exported\n\n Queue Filters\n The toolbar uses the new field wrapper so labels stay attached to controls as the row wraps.\n\n Search\n\n Status\n\n All statuses\n Needs review\n Approved\n Rejected\n\n Period\n\n All periods\n March 2026\n April 2026\n\n Minimum\n\n $\n\n Save View\n Apply Filters\n\n Open Pay Apps\n Dense queue layout with explicit status, right-aligned numerics, and small actions.\n\n Project\n Vendor\n Period\n Amount\n Status\n Owner\n Actions\n\n AP-2026-00142\n OpenPay Electric\n March 2026\n $18,240.22\n Needs Review\n AP Team\n Open\n\n AP-2026-00144\n ACME Siteworks\n March 2026\n $11,908.12\n Ready\n A. Johnson\n Open\n\n AP-2026-00147\n SitePro Mechanical\n March 2026\n $7,244.00\n Blocked\n Legal Review\n Open\n\n AP-2026-00152\n North Range Concrete\n April 2026\n $5,665.80\n Needs Review\n AP Team\n Open\n\n AP-2026-00158\n Highline Framing\n April 2026\n $21,180.00\n Ready\n A. Johnson\n Open\n\n Showing 1-5 of 32 items\n\n Previous\n 1\n 2\n 3\n Next\n\n This pane shows how the same page shell can switch to a lighter approval-ready view without changing the surrounding layout.\n\n Recently exported items can live in a quieter pane with the same toolbar, table, and pagination primitives reused as needed.\n\n Queue example for sidebar navigation, tables, and filter density.\nqueue\noperator queue\nwork-queue.html"
+  },
+  {
+    "uri": "ui-kit://patterns/record-detail",
+    "title": "Project pay app record",
+    "kind": "pattern",
+    "summary": "Three-column detail example with action rail and section stack.",
+    "sourcePaths": [
+      "record-detail.html"
+    ],
+    "aliases": [
+      "detail",
+      "record detail"
+    ],
+    "priority": 70,
+    "searchText": "Project pay app record\nThree-column detail example with action rail and section stack.\nThree-column detail example with action rail and section stack.\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 Record Detail\n\n Detail Pattern\n Project pay app record\n Three-column detail screens, right-rail actions, secondary menus, accordion sections, and a nested two-column content area.\n\n Sections\n\n Project Record\n\n Overview\n\n Billing details\n\n Waivers\n\n Notes\n\n Related Items\n\n North Campus contract\n Vendor profile\n Prior month pay app\n\n AP-2026-00142\n North Campus Expansion / OpenPay Electric / March 2026\n\n Needs Review\n Imported\n\n This detail pattern is intended for entity or case review screens where the center column does the heavy lifting and the right rail stays action-oriented.\n\n Amounts\n\n Current request\n $18,240.22\n\n Previous billed\n $112,994.03\n\n Remaining contract\n $48,202.55\n\n Review Notes\n\n Use the nested two-column layout when a detail page needs a compact numeric summary beside a broader narrative or notes area. This keeps dense metadata visible without collapsing everything into one long card.\n For downstream products, this same pattern can hold case details, audit reasoning, configuration context, or document annotations.\n\n Section Stack\n\n Billing summary\n\n Billing period: March 2026\n Percent complete: 64%\n Retention held: 10%\n\n Required documents\n\n Conditional waiver received\n Insurance certificate current\n W-9 verification pending\n\n Actions\n\n Approve Record\n Request Changes\n Send To Legal\n\n Status\n\n Needs Review\n Imported 8:13 AM\n Vendor matched\n\n Activity Feed\n\n Imported from OpenPay\n 8:13 AM by nightly sync\n\n Routing rule matched\n Assigned to AP Team for first-pass review\n\n Waiver check flagged\n W-9 verification still missing from vendor profile\n\n Detail example for three-column layout, side rails, and accordion sections.\ndetail\nrecord detail\nrecord-detail.html"
+  },
+  {
+    "uri": "ui-kit://patterns/native-patterns",
+    "title": "Patterns built on browser elements",
+    "kind": "pattern",
+    "summary": "Patterns built on browser elements with minimal helper wiring.",
+    "sourcePaths": [
+      "native-patterns.html"
+    ],
+    "aliases": [
+      "native controls",
+      "browser elements"
+    ],
+    "priority": 70,
+    "searchText": "Patterns built on browser elements\nPatterns built on browser elements with minimal helper wiring.\nPatterns built on browser elements with minimal helper wiring.\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 Native details menu\n Profile\n Preferences\n Sign out\n\n Examples\n Native Patterns\n\n Native First\n Patterns built on browser elements\n This page shows a tasteful native path: <details> for disclosures and lightweight menus, <dialog> for modal surfaces, and only a minimal showModal() hook where the browser element still needs an opener.\n\n Open Native Dialog\n\n When Native Fits\n\n Use native controls when the interaction is simple, local to the page, and maps well to browser semantics. That usually gives you better baseline accessibility and less JS to maintain.\n\n <details> for section stacks, inspector trays, and lightweight menus\n <dialog> for modal review, confirmation, and quick-create flows\n Helper-driven patterns only when the component contract needs more Bootstrap-like state management\n\n Tradeoff\n\n The disclosure and menu examples below are fully native. The dialog itself is native too, but opening it still typically wants one small showModal() call unless you rely on newer command attributes or a framework.\n\n This page intentionally does not load the helper script. The menu is <details> and the dialog opener is a few lines of vanilla JS only for the modal launch. If you want browser-native custom elements instead of helper-managed DOM, use the optional Web Components showcase.\n\n Native Disclosure Stack\n\n Billing summary\n 3 items\n\n Native details\n\n Billing period: March 2026\n Percent complete: 64%\n Retention held: 10%\n\n Required documents\n No helper\n\n Conditional waiver received\n Insurance certificate current\n W-9 verification pending\n\n Reviewer notes\n Good for local state\n\n This is the cleanest replacement for a lightweight accordion when you do not need coordinated multi-panel state or more custom animation logic.\n\n Native Menu\n\n AP\n\n Queue Actions\n Summary-based menu\n\n Quick actions\n Export current view\n Save filter preset\n Assign to operator\n\n This works well for compact menus where a <summary> trigger is acceptable and you do not need richer keyboard choreography than the browser already provides.\n\n Native Dialog\n\n The dialog below uses the browser backdrop, focus handling, and close semantics. The only JS here is the call to showModal() on the launcher button.\n If you use <form method=\"dialog\"> for the footer controls, closing stays fully native too. The same primitive also works for side sheets when you anchor the dialog to the viewport edge.\n\n Launch Review Dialog\n Launch Review Drawer\n\n Native details and dialog patterns styled with the same design language. The Web Components layer follows the same vocabulary when you need it.\n\n Review Native Dialog\n This surface is <dialog> with package styling, not the helper modal.\n\n ×\n\n Use this path when you want the browser to own modal semantics. The page supplies only a tiny opener and lets the dialog itself handle focus scope, backdrop, and closing via method=\"dialog\" buttons.\n\n The same surface styling can be reused for quick-create, approval confirmation, or record-preview dialogs.\n\n Cancel\n Approve\n\n Review Drawer\n This uses the same native dialog element, but styled as a right-side sheet.\n\n ×\n\n Record\n AP-2026-00142\n\n Status\n Needs Review\n\n Assignment note\n Assign to Legal Review so the W-9 and certificate of insurance can be verified.\n\n Cancel\n Assign owner\nnative controls\nbrowser elements\nnative-patterns.html"
+  },
+  {
+    "uri": "ui-kit://patterns/web-components",
+    "title": "Browser-native components that stay inside the same CSS kit.",
+    "kind": "pattern",
+    "summary": "Browser-native components that stay inside the same CSS kit.",
+    "sourcePaths": [
+      "web-components.html"
+    ],
+    "aliases": [
+      "wc",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://example/forms-and-validation",
+    "title": "Validation, dense toolbars, and edit-friendly detail blocks",
+    "kind": "example",
+    "summary": "Validation, dense toolbars, and edit-friendly detail blocks.",
+    "sourcePaths": [
+      "forms-and-validation.html"
+    ],
+    "aliases": [
+      "forms validation",
+      "validation"
+    ],
+    "priority": 55,
+    "searchText": "Validation, dense toolbars, and edit-friendly detail blocks\nValidation, dense toolbars, and edit-friendly detail blocks.\nValidation, dense toolbars, and edit-friendly detail blocks.\n\nIncursa\n\n Examples\n Dashboard\n Work Queue\n Record Detail\n Native Patterns\n Overlays\n States\n Forms\n Data Grid\n Web Components\n Reference\n\n SM\n\n Sam McAravey\n Administrator\n\n Signed in as Sam McAravey\n Profile\n Preferences\n Sign out\n\n Examples\n Forms And Validation\n\n Forms And Filters\n Validation, dense toolbars, and edit-friendly detail blocks\n This page covers required labels, help text, validation messaging, error summaries, saved-filter chips, and mixed read-only/edit surfaces.\n\n Validation Summary\n\n There are 3 issues to fix before approval\n\n Contract number is required.\n Billing period must be selected.\n Export contact email is not valid.\n\n Project name\n\n Use the legal project name from the ERP contract.\n Looks good.\n\n Contract number\n\n Visible to AP and legal reviewers.\n Contract number is required.\n\n Billing period\n\n Select a period\n March 2026\n April 2026\n\n Choose the period that will appear on export.\n\n Export contact\n\n Optional. Used only for exception emails.\n\n Approval options\n\n Include related contract documents\n\n Send notifications after approval\n\n Approval route\n\n Fast approval\n\n Standard approval\n\n Dense Filter Toolbar\n\n Search\n\n Status\n\n All statuses\n Needs review\n Ready\n\n Owner\n\n AP Team\n Legal Review\n\n Minimum amount\n\n $\n\n Status: Needs review ×\n Owner: AP Team ×\n Amount: $10,000+ ×\n\n Clear All\n Save View\n Apply Filters\n\n This is the pattern to reuse for search-heavy B2B screens: fields above, active chips and actions below.\n\n Read-Only Detail Grid\n\n Project\n North Campus Expansion\n\n Record Id\n AP-2026-00142\n\n Current Request\n $18,240.22\n\n Status\n Needs Review\n\n Inline Edit Pattern\n\n Default review owner\n AP Team\n\n Edit\n\n Default review owner\n\n AP Team\n Legal Review\n Regional Controllers\n\n Cancel\n Save Change\n\n Validation states, filter bars, and read-only/edit detail patterns.\nforms validation\nvalidation\nforms-and-validation.html"
+  },
+  {
+    "uri": "ui-kit://example/data-grid-advanced",
+    "title": "Bulk actions, sticky headers, row states, and a side drawer",
+    "kind": "example",
+    "summary": "Bulk actions, sticky headers, row states, and a side drawer.",
+    "sourcePaths": [
+      "data-grid-advanced.html"
+    ],
+    "aliases": [
+      "data grid",
+      "grid advanced",
+      "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"
+  },
+  {
+    "uri": "ui-kit://example/states",
+    "title": "The non-happy-path surfaces B2B apps actually need",
+    "kind": "example",
+    "summary": "The non-happy-path surfaces B2B apps actually need.",
+    "sourcePaths": [
+      "states.html"
+    ],
+    "aliases": [
+      "state examples",
+      "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"
+  },
+  {
+    "uri": "ui-kit://example/overlay-workflows",
+    "title": "Modal and offcanvas examples for operator review flows",
+    "kind": "example",
+    "summary": "Modal and offcanvas examples for operator review flows.",
+    "sourcePaths": [
+      "overlay-workflows.html"
+    ],
+    "aliases": [
+      "overlays",
+      "overlay workflows",
+      "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"
+  },
+  {
+    "uri": "ui-kit://example/demo",
+    "title": "Data-heavy home screen",
+    "kind": "example",
+    "summary": "Data-heavy home screen preview of the extracted patterns.",
+    "sourcePaths": [
+      "demo.html"
+    ],
+    "aliases": [
+      "homepage demo",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://example/work-queue",
+    "title": "Operator work queue",
+    "kind": "example",
+    "summary": "Operator work queue with sidebar navigation and table-heavy composition.",
+    "sourcePaths": [
+      "work-queue.html"
+    ],
+    "aliases": [
+      "queue",
+      "operator queue"
+    ],
+    "priority": 55,
+    "searchText": "Operator work queue\nOperator work queue with sidebar navigation and table-heavy composition.\nOperator work queue with sidebar navigation and table-heavy composition.\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 Work Queue\n\n Queue Menu\n\n Operations\n\n Open pay apps\n 32\n\n Exceptions\n 4\n\n Vendor imports\n 9\n\n Management\n\n Approvals\n 7\n\n Audit trail\n\n Saved Views\n\n Needs review\n Ready to export\n Sync failures\n\n Queue Pattern\n Operator work queue\n Sidebar navigation, line tabs, alerts, filter toolbars, and a dense table with pagination.\n\n 12 imported pay apps were normalized overnight. Two need operator review before approval routing.\n\n Four queued items are missing billing periods and will not export until corrected.\n\n Needs Review\n Ready To Approve\n Recently Exported\n\n Queue Filters\n The toolbar uses the new field wrapper so labels stay attached to controls as the row wraps.\n\n Search\n\n Status\n\n All statuses\n Needs review\n Approved\n Rejected\n\n Period\n\n All periods\n March 2026\n April 2026\n\n Minimum\n\n $\n\n Save View\n Apply Filters\n\n Open Pay Apps\n Dense queue layout with explicit status, right-aligned numerics, and small actions.\n\n Project\n Vendor\n Period\n Amount\n Status\n Owner\n Actions\n\n AP-2026-00142\n OpenPay Electric\n March 2026\n $18,240.22\n Needs Review\n AP Team\n Open\n\n AP-2026-00144\n ACME Siteworks\n March 2026\n $11,908.12\n Ready\n A. Johnson\n Open\n\n AP-2026-00147\n SitePro Mechanical\n March 2026\n $7,244.00\n Blocked\n Legal Review\n Open\n\n AP-2026-00152\n North Range Concrete\n April 2026\n $5,665.80\n Needs Review\n AP Team\n Open\n\n AP-2026-00158\n Highline Framing\n April 2026\n $21,180.00\n Ready\n A. Johnson\n Open\n\n Showing 1-5 of 32 items\n\n Previous\n 1\n 2\n 3\n Next\n\n This pane shows how the same page shell can switch to a lighter approval-ready view without changing the surrounding layout.\n\n Recently exported items can live in a quieter pane with the same toolbar, table, and pagination primitives reused as needed.\n\n Queue example for sidebar navigation, tables, and filter density.\nqueue\noperator queue\nwork-queue.html"
+  },
+  {
+    "uri": "ui-kit://example/record-detail",
+    "title": "Project pay app record",
+    "kind": "example",
+    "summary": "Three-column detail example with action rail and section stack.",
+    "sourcePaths": [
+      "record-detail.html"
+    ],
+    "aliases": [
+      "detail",
+      "record detail"
+    ],
+    "priority": 55,
+    "searchText": "Project pay app record\nThree-column detail example with action rail and section stack.\nThree-column detail example with action rail and section stack.\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 Record Detail\n\n Detail Pattern\n Project pay app record\n Three-column detail screens, right-rail actions, secondary menus, accordion sections, and a nested two-column content area.\n\n Sections\n\n Project Record\n\n Overview\n\n Billing details\n\n Waivers\n\n Notes\n\n Related Items\n\n North Campus contract\n Vendor profile\n Prior month pay app\n\n AP-2026-00142\n North Campus Expansion / OpenPay Electric / March 2026\n\n Needs Review\n Imported\n\n This detail pattern is intended for entity or case review screens where the center column does the heavy lifting and the right rail stays action-oriented.\n\n Amounts\n\n Current request\n $18,240.22\n\n Previous billed\n $112,994.03\n\n Remaining contract\n $48,202.55\n\n Review Notes\n\n Use the nested two-column layout when a detail page needs a compact numeric summary beside a broader narrative or notes area. This keeps dense metadata visible without collapsing everything into one long card.\n For downstream products, this same pattern can hold case details, audit reasoning, configuration context, or document annotations.\n\n Section Stack\n\n Billing summary\n\n Billing period: March 2026\n Percent complete: 64%\n Retention held: 10%\n\n Required documents\n\n Conditional waiver received\n Insurance certificate current\n W-9 verification pending\n\n Actions\n\n Approve Record\n Request Changes\n Send To Legal\n\n Status\n\n Needs Review\n Imported 8:13 AM\n Vendor matched\n\n Activity Feed\n\n Imported from OpenPay\n 8:13 AM by nightly sync\n\n Routing rule matched\n Assigned to AP Team for first-pass review\n\n Waiver check flagged\n W-9 verification still missing from vendor profile\n\n Detail example for three-column layout, side rails, and accordion sections.\ndetail\nrecord detail\nrecord-detail.html"
+  },
+  {
+    "uri": "ui-kit://example/native-patterns",
+    "title": "Patterns built on browser elements",
+    "kind": "example",
+    "summary": "Patterns built on browser elements with minimal helper wiring.",
+    "sourcePaths": [
+      "native-patterns.html"
+    ],
+    "aliases": [
+      "native controls",
+      "browser elements"
+    ],
+    "priority": 55,
+    "searchText": "Patterns built on browser elements\nPatterns built on browser elements with minimal helper wiring.\nPatterns built on browser elements with minimal helper wiring.\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 Native details menu\n Profile\n Preferences\n Sign out\n\n Examples\n Native Patterns\n\n Native First\n Patterns built on browser elements\n This page shows a tasteful native path: <details> for disclosures and lightweight menus, <dialog> for modal surfaces, and only a minimal showModal() hook where the browser element still needs an opener.\n\n Open Native Dialog\n\n When Native Fits\n\n Use native controls when the interaction is simple, local to the page, and maps well to browser semantics. That usually gives you better baseline accessibility and less JS to maintain.\n\n <details> for section stacks, inspector trays, and lightweight menus\n <dialog> for modal review, confirmation, and quick-create flows\n Helper-driven patterns only when the component contract needs more Bootstrap-like state management\n\n Tradeoff\n\n The disclosure and menu examples below are fully native. The dialog itself is native too, but opening it still typically wants one small showModal() call unless you rely on newer command attributes or a framework.\n\n This page intentionally does not load the helper script. The menu is <details> and the dialog opener is a few lines of vanilla JS only for the modal launch. If you want browser-native custom elements instead of helper-managed DOM, use the optional Web Components showcase.\n\n Native Disclosure Stack\n\n Billing summary\n 3 items\n\n Native details\n\n Billing period: March 2026\n Percent complete: 64%\n Retention held: 10%\n\n Required documents\n No helper\n\n Conditional waiver received\n Insurance certificate current\n W-9 verification pending\n\n Reviewer notes\n Good for local state\n\n This is the cleanest replacement for a lightweight accordion when you do not need coordinated multi-panel state or more custom animation logic.\n\n Native Menu\n\n AP\n\n Queue Actions\n Summary-based menu\n\n Quick actions\n Export current view\n Save filter preset\n Assign to operator\n\n This works well for compact menus where a <summary> trigger is acceptable and you do not need richer keyboard choreography than the browser already provides.\n\n Native Dialog\n\n The dialog below uses the browser backdrop, focus handling, and close semantics. The only JS here is the call to showModal() on the launcher button.\n If you use <form method=\"dialog\"> for the footer controls, closing stays fully native too. The same primitive also works for side sheets when you anchor the dialog to the viewport edge.\n\n Launch Review Dialog\n Launch Review Drawer\n\n Native details and dialog patterns styled with the same design language. The Web Components layer follows the same vocabulary when you need it.\n\n Review Native Dialog\n This surface is <dialog> with package styling, not the helper modal.\n\n ×\n\n Use this path when you want the browser to own modal semantics. The page supplies only a tiny opener and lets the dialog itself handle focus scope, backdrop, and closing via method=\"dialog\" buttons.\n\n The same surface styling can be reused for quick-create, approval confirmation, or record-preview dialogs.\n\n Cancel\n Approve\n\n Review Drawer\n This uses the same native dialog element, but styled as a right-side sheet.\n\n ×\n\n Record\n AP-2026-00142\n\n Status\n Needs Review\n\n Assignment note\n Assign to Legal Review so the W-9 and certificate of insurance can be verified.\n\n Cancel\n Assign owner\nnative controls\nbrowser elements\nnative-patterns.html"
+  },
+  {
+    "uri": "ui-kit://example/web-components",
+    "title": "Browser-native components that stay inside the same CSS kit.",
+    "kind": "example",
+    "summary": "Browser-native components that stay inside the same CSS kit.",
+    "sourcePaths": [
+      "web-components.html"
+    ],
+    "aliases": [
+      "wc",
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://example/reference",
+    "title": "Rendered controls with copyable HTML",
+    "kind": "example",
+    "summary": "Example catalog with copy/paste HTML snippets.",
+    "sourcePaths": [
+      "reference.html"
+    ],
+    "aliases": [
+      "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",
+    "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>"
+    }
+  },
+  {
+    "uri": "ui-kit://specs/public-surface",
+    "title": "Public surface",
+    "kind": "spec",
+    "summary": "Public surface standards and accessible interaction behavior.",
+    "sourcePaths": [
+      "specs/requirements/ui-kit/SPEC-UIK-STD.md"
+    ],
+    "aliases": [
+      "std",
+      "surface standards"
+    ],
+    "priority": 88,
+    "searchText": "Public surface\nPublic surface standards and accessible interaction behavior.\n---\nartifact_id: SPEC-UIK-STD\nartifact_type: specification\ntitle: Public Surface Standards\ndomain: ui-kit\ncapability: public-surface-standards\nstatus: draft\nowner: ui-kit-maintainers\ntags:\n- ui-kit\n- standards\n- naming\n---\n\nSPEC-UIK-STD - Public Surface Standards\n\nPurpose\n\nDefine the naming baseline that applies to every public inc-* surface in the UI kit.\n\nScope\n\nThis specification covers public class naming, BEM structure, compatibility aliases, and the reserved utility prefix. It does not define component-specific visuals or layouts.\n\nContext\n\nThe component specs stay more useful when they inherit one explicit baseline for naming instead of repeating the same assumptions in every file.\n\nREQ-UIK-STD-0001 Use stable public naming\nThe UI kit MUST use the inc- prefix for all public CSS classes and BEM-style naming with __ for elements and -- for modifiers.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- README.md\n- LLMS.txt\n- reference.html\n- demo.html\n- forms-and-validation.html\n- data-grid-advanced.html\n- overlay-workflows.html\n- native-patterns.html\n- work-queue.html\n- record-detail.html\n- states.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-STD-0002 Allow compatibility aliases\nCompatibility aliases MAY remain when they map to an existing canonical public surface and do not introduce a second contract.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-STD-0003 Reserve the utility prefix\nAtomic utility classes MUST use the inc-u- prefix.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- AI-AGENT-INSTRUCTIONS.md\n- states.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-STD-0004 Forbid element-of-element names\nPublic BEM element names MUST NOT use nested element separators such as inc-block__element__child.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- forms-and-validation.html\n- LLMS.txt\n- Verified By:\n- VER-UIK-0001\nstd\nsurface standards\nspecs/requirements/ui-kit/SPEC-UIK-STD.md"
+  },
+  {
+    "uri": "ui-kit://specs/control-conventions",
+    "title": "Control conventions",
+    "kind": "spec",
+    "summary": "Shared control conventions and modifier grammar.",
+    "sourcePaths": [
+      "specs/requirements/ui-kit/SPEC-UIK-CNV.md"
+    ],
+    "aliases": [
+      "cnv",
+      "conventions"
+    ],
+    "priority": 88,
+    "searchText": "Control conventions\nShared control conventions and modifier grammar.\n---\nartifact_id: SPEC-UIK-CNV\nartifact_type: specification\ntitle: Control Surface Conventions\ndomain: ui-kit\ncapability: control-surface-conventions\nstatus: draft\nowner: ui-kit-maintainers\ntags:\n- ui-kit\n- controls\n- conventions\n- modifiers\n---\n\nSPEC-UIK-CNV - Control Surface Conventions\n\nPurpose\n\nDefine the shared class, modifier, and state conventions used by interactive and entry controls.\n\nScope\n\nThis specification covers layered base classes, shared density suffixes, inline-growth modifiers, and visual state hooks used across shipped control surfaces. It does not define the button, text-entry, select, or group surfaces themselves.\n\nContext\n\nThe SCSS keeps action buttons, text-entry controls, selects, input groups, and refresh toggles aligned by reusing the same modifier grammar instead of inventing a separate convention for each surface.\n\nREQ-UIK-CNV-0001 Keep control surfaces layered\nPublic control surfaces MUST express a stable base class plus explicit modifier classes for semantic, density, layout, or state changes instead of replacing the base class name.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- overlay-workflows.html\n- states.html\n- work-queue.html\n- record-detail.html\n- data-grid-advanced.html\n- native-patterns.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-CNV-0002 Reuse density modifier names\nPublic control surfaces that ship compact sizes MUST reuse the --sm, --lg, and --micro modifier names across related controls.\n\nNotes:\n- The repo intentionally allows --micro on supported control surfaces instead of reserving it for a touch-only tier.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- overlay-workflows.html\n- states.html\n- work-queue.html\n- record-detail.html\n- data-grid-advanced.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-CNV-0003 Reuse inline expansion modifiers\nPublic control surfaces that need to grow inside inline compositions MUST reuse --expand as the flex-growth modifier.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- overlay-workflows.html\n- work-queue.html\n- data-grid-advanced.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-CNV-0004 Keep visual state hooks separate from native semantics\nVisual state hooks such as is-loading, is-valid, is-invalid, and is-paused MUST change presentation without changing the underlying native role, label association, or focus target.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- overlay-workflows.html\n- states.html\n- work-queue.html\n- data-grid-advanced.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-CNV-0005 Express control emphasis as modifiers\nThe UI kit MUST express public control emphasis such as primary, secondary, warning, error, or outline treatment as explicit modifiers on the control surface rather than by changing the base block or the native element meaning.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- overlay-workflows.html\n- states.html\n- work-queue.html\n- data-grid-advanced.html\n- native-patterns.html\n- Verified By:\n- VER-UIK-0001\n\nREQ-UIK-CNV-0006 Allow mixed public surfaces\nPublic surfaces MAY share a DOM node when the combined classes each remain independently meaningful.\n\nTrace:\n- Code Refs:\n- src/inc-design-language.scss\n- reference.html\n- demo.html\n- forms-and-validation.html\n- native-patterns.html\n- overlay-workflows.html\n- states.html\n- work-queue.html\n- data-grid-advanced.html\n- Verified By:\n- VER-UIK-0001\ncnv\nconventions\nspecs/requirements/ui-kit/SPEC-UIK-CNV.md"
+  },
+  {
+    "uri": "ui-kit://specs/requirements-index",
+    "title": "Requirements index",
+    "kind": "spec",
+    "summary": "Index for the UI kit requirement specs and gap tracker.",
+    "sourcePaths": [
+      "specs/requirements/ui-kit/_index.md"
+    ],
+    "aliases": [
+      "requirements",
+      "specs index"
+    ],
+    "priority": 88,
+    "searchText": "Requirements index\nIndex for the UI kit requirement specs and gap tracker.\nUI Kit Spec Suite\n\nThis folder contains the current Spec Trace pass for the Incursa UI kit.\n\nThe suite is organized by shared foundations first, then by stable UI concern rather than by page example:\n\n- SPEC-UIK-STD - public surface standards\n- SPEC-UIK-TOK - theme tokens and value contract\n- SPEC-UIK-A11Y - accessibility baseline and semantic behavior\n- SPEC-UIK-CNV - control surface conventions and shared modifiers\n- SPEC-UIK-WC - optional Web Component layer scope and parity\n- SPEC-UIK-LAY - layout primitives and shell\n- SPEC-UIK-BTN - button and action controls\n- SPEC-UIK-TXT - typography and text helpers\n- SPEC-UIK-FRM - form layout and grouping\n- SPEC-UIK-INP - editable form controls\n- SPEC-UIK-SEL - select controls\n- SPEC-UIK-GRP - input group composition\n- SPEC-UIK-RO - read-only field display\n- SPEC-UIK-CHO - binary choice controls\n- SPEC-UIK-VAL - validation and error feedback\n- SPEC-UIK-FLT - filter and bulk action bars\n- SPEC-UIK-CARD - card and section surfaces\n- SPEC-UIK-LIST - list and collection rows\n- SPEC-UIK-TBL - tables and data grids\n- SPEC-UIK-UTL - public utility and helper classes\n- SPEC-UIK-NAV - navigation shell and menus\n- SPEC-UIK-FDBK - feedback and operational states\n- SPEC-UIK-OVL - overlays and disclosures\n- SPEC-UIK-MET - metrics and status surfaces\n- SPEC-UIK-FILE - file review surfaces\n- SPEC-UIK-INT - interaction helper contract\n\nOpen issues and follow-up questions live in REQUIREMENT-GAPS.\n\nUI Kit Requirement Gaps\n\nThis file tracks unresolved questions and assumptions after the shared-foundation split and the current source/dist alignment pass.\n\n| Gap ID | Affected Specs | Question or ambiguity | Current assumption |\n| --- | --- | --- | --- |\n| GAP-UIK-0002 | SPEC-UIK-OVL, SPEC-UIK-INT | Should inc-modal and inc-offcanvas remain in the public surface as compatibility shells once native dialog and disclosure workflows cover more products? | This pass keeps them as compatibility surfaces while preferring native <dialog> and <details> where possible. |\n| GAP-UIK-0003 | SPEC-UIK-UTL, SPEC-UIK-TXT | Should additional public utility families be split into separate specs if the shipped class set grows further? | This pass keeps layout utilities in SPEC-UIK-UTL and public text helpers in SPEC-UIK-TXT, and leaves the future family split question open until there is a clear usage need. |\n| GAP-UIK-0005 | All verified specs | Should the verification layer stay source-review only, or should future passes add executable browser or visual verification? | This pass records a source-review verification baseline in VER-UIK-0001, adds a repo-local smoke gate in VER-UIK-0002, and still leaves runtime browser or visual automation as a future option. |\n\nIf you want the next pass to split or merge any of the current family-level specs, record that here before changing the file set so the trace history stays explicit.\nrequirements\nspecs index\nspecs/requirements/ui-kit/_index.md"
+  },
+  {
+    "uri": "ui-kit://specs/verification-index",
+    "title": "Verification index",
+    "kind": "spec",
+    "summary": "Auditable verification baseline for the spec suite.",
+    "sourcePaths": [
+      "specs/verification/ui-kit/_index.md"
+    ],
+    "aliases": [
+      "verification",
+      "ver index"
+    ],
+    "priority": 88,
+    "searchText": "Verification index\nAuditable verification baseline for the spec suite.\nUI Kit Verification Index\n\nThis folder contains the auditable verification layer for the Incursa UI kit spec suite, including the shared foundation specs and the component conformance baseline.\n\n- VER-UIK-0001 - source-review baseline for the revised public UI kit surface\n- VER-UIK-0002 - repo-local smoke validation for the packaged public surface\n- VER-UIK-0003 - browser automation baseline for the existing helper-managed surface\n- VER-UIK-0004 - browser automation coverage for the Web Component layer\nverification\nver index\nspecs/verification/ui-kit/_index.md"
+  },
+  {
+    "uri": "ui-kit://ai/agent-instructions",
+    "title": "Agent instructions",
+    "kind": "guide",
+    "summary": "Canonical AI guidance for using the package surfaces.",
+    "sourcePaths": [
+      "AI-AGENT-INSTRUCTIONS.md"
+    ],
+    "aliases": [
+      "ai instructions",
+      "agent instructions"
+    ],
+    "priority": 86,
+    "searchText": "Agent instructions\nCanonical AI guidance for using the package surfaces.\nAI Agent Instructions\n\nUse this package as a reusable data-heavy UI baseline.\n\nRepository brand assets live under assets/brand/. Prefer those local files when adding logos, favicons, or README imagery.\n\nSurface selection\n\n- Start with the highest-level public surface that already fits the job.\n- Prefer web-components.html and the same-package ./web-components entrypoint when you are building new UI from plain HTML/JS and the capability exists in the approved v1 component set.\n- Prefer dist/inc-design-language.css with raw HTML plus inc-* classes when the markup already exists, the family is CSS-only, or you only need styling.\n- Use native <button>, <input>, <details>, and <dialog> before adding helper wiring or custom elements.\n- Drop into src/* or token files only when the public surface cannot express the needed layout or behavior.\n\nFast path\n\n- Prefer dist/inc-design-language.css if the target app already has working HTML and only needs the look.\n- Prefer src/inc-design-language.scss if you need to tune tokens, density, or Bootstrap defaults.\n- Prefer dist/inc-design-language.js only for stateful UI primitives such as menus, tabs, collapsible sections, modal/offcanvas shells, native dialog launch hooks, and auto-refresh widgets.\n- Prefer the optional web-components.html landing page and the same-package ./web-components entrypoint when you want declarative browser-native components for the approved v1 families from plain HTML/JS.\n- Prefer reference.html when you need copy/paste starter markup for a supported control or page-frame primitive before composing a full page.\n- Prefer states.html, forms-and-validation.html, and data-grid-advanced.html when the target screen is workflow-heavy and you need realistic composition patterns, not isolated snippets.\n\nMarkdown links\n\n- Use relative links for repo-local references in markdown, and keep the visible label code-formatted, for example README.md, SPEC-UIK-CNV, or src/inc-design-language.scss.\n- Use absolute URLs only for external documentation, hosted examples, package registry pages, or other non-repo targets.\n- When a reference has a clear local target, prefer linking it instead of leaving it as a plain code span.\n- Run node scripts/linkify-markdown-docs.mjs --check after markdown edits to confirm the repo-local reference policy still holds.\n\nNaming rules\n\n- Use the inc- prefix for all public classes.\n- Keep the existing BEM pattern:\n inc-block, inc-block__element, inc-block--modifier.\n\nCore primitives\n\n- Tables:\n Start with inc-table and add cell modifiers such as inc-table__cell--numeric, inc-table__cell--action, inc-table__cell--min, and inc-table__cell--expand.\n- Buttons:\n Use inc-btn plus a semantic modifier such as inc-btn--primary, inc-btn--secondary, or inc-btn--danger.\n Use inc-btn--micro for in-row or in-cell actions.\n- Forms:\n Use inc-form--inline for toolbar/filter layouts, wrap each label/control pair in inc-form__field or inc-form__group, and use inc-input-group for composed inputs.\n Use inc-form__hint, inc-form__feedback--error, inc-form__feedback--success, and inc-form__error-summary for validation.\n- Filter bars:\n Use inc-filter-bar, inc-filter-chip, and inc-bulk-bar for search-heavy or multi-select operator screens.\n- Cards and shells:\n Use inc-card for plain cards and inc-header-body inc-header-body--card for titled sections with actions.\n Use inc-header-body--table-body when the body contains a table and should keep section padding without adding extra bottom table margin.\n- App layout:\n Use inc-app-shell, inc-page, inc-breadcrumb-body, inc-footer-bar, inc-footer-bar__menu, inc-footer-bar__meta, inc-navbar, inc-breadcrumb, inc-nav-triad, and inc-sidebar-menu when you need an opinionated application frame instead of isolated components.\n- States and workflow:\n Use inc-state-panel, inc-permission-banner, inc-toast-card, inc-timeline, inc-file-dropzone, inc-file-row, and inc-key-value for non-happy-path and detail-heavy B2B flows.\n- Interaction:\n Use data-inc-toggle=\"menu\", data-inc-toggle=\"tab\", and data-inc-toggle=\"collapse\" with data-inc-target=\"#target-id\" when you want the optional vanilla-JS helper to wire behavior. Use data-inc-toggle=\"modal\", data-inc-toggle=\"offcanvas\", data-inc-dismiss=\"modal\", data-inc-dismiss=\"offcanvas\", and data-inc-native-dialog-open only when the helper-managed or launch-hook contract is the intended path.\n- Native interaction:\n Use details.inc-disclosure for section stacks, details.inc-native-menu for lightweight menus, and dialog.inc-native-dialog for native modal surfaces.\n- Web Components:\n Keep the CSS class surface canonical, use the optional layered entrypoint for the approved v1 component families when declarative markup is the better fit, and fall back to raw HTML/CSS for CSS-first surfaces or when the markup already exists.\n- Status:\n Use inc-badge--success|warning|danger|info for compact status signals.\n- Metrics:\n Use inc-summary-overview and inc-summary-block for dashboard and header metrics.\n\nCustomization order\n\n1. Change fonts and colors in src/_inc-theme.scss.\n2. Use src/_inc-tokens.scss only for deeper token or Bootstrap-level tuning.\n3. Rebuild the CSS.\n4. Only add new component rules after checking whether an existing inc-* block already fits.\n\nPackaging\n\n- Use npm run verify before versioning when you want to rebuild, smoke-test, and dry-run the package.\n- Use npm run build to rebuild distributables.\n- Use npm pack or npm run package to produce a local installable tarball.\n- The repository is licensed under Apache 2.0.\n- The compiled dist/inc-design-language.css already includes the Bootstrap layer it was built from, so consumers do not need Bootstrap CSS at runtime when they use the compiled assets.\n- The source src/inc-design-language.scss does require Bootstrap Sass at build time because it imports bootstrap/scss/bootstrap.\n- The optional Web Component layer lives in the same package as a layered entrypoint so the CSS-first surface and browser-native surface stay aligned.\n- The Web Component source tree lives under src/web-components/; keep consumer-facing guidance in web-components.html and maintainer notes alongside the runtime source tree.\n\nGuardrails\n\n- Keep the typography stack split:\n sans for UI text, mono for data.\n- Preserve explicit alignment classes for numeric table data.\n- Avoid adding product-specific shell/background styles to this package.\n- Keep new components generic enough to drop into another admin/data app.\n- If you add a new block, prefer names like inc-filter-bar, inc-stat-card, or inc-data-toolbar over feature-specific names.\n- Keep border radius consistent across panels, tabs, tables, and cards unless there is a deliberate reason to differentiate them.\n- Prefer native browser behavior first for disclosures and dialogs when it fits the product; use the helper only when the Bootstrap-like component contract needs custom state handling.\n- Keep the CSS-first class API canonical and treat the Web Component layer as additive, not a replacement.\n\nBuild\n\nIf Bootstrap and Sass are installed in the package folder:\n\n``bash\nnpm run build\n`\n\nIf you are compiling from somewhere else, make sure Sass can resolve bootstrap/scss/*`.\nai instructions\nagent instructions\nAI-AGENT-INSTRUCTIONS.md"
+  },
+  {
+    "uri": "ui-kit://ai/llms-txt",
+    "title": "LLMS text",
+    "kind": "guide",
+    "summary": "Concise AI-facing package guidance and surface selection.",
+    "sourcePaths": [
+      "LLMS.txt"
+    ],
+    "aliases": [
+      "llms",
+      "llms.txt"
+    ],
+    "priority": 86,
+    "searchText": "LLMS text\nConcise AI-facing package guidance and surface selection.\nIncursa UI Kit\n\nShort description:\nReusable UI kit for data-heavy business applications. Start from the highest-level public surface that already fits: raw HTML plus inc-* classes for existing markup and CSS-only families, the optional ./web-components entrypoint for supported v1 browser-native components when declarative markup is the better fit, and dist/inc-design-language.js only for helper-managed state.\n\nPackage identity:\n- npm package: @incursa/ui-kit\n- license: Apache-2.0\n- repository: https://github.com/incursa/ui-kit\n\nSurface selection:\n- Use dist/inc-design-language.css if the target app already has working HTML and mainly needs the visual language.\n- Use web-components.html and the same-package ./web-components entrypoint when you are building from plain HTML/JS and the capability exists in the approved v1 component set.\n- Use raw HTML plus inc-* classes when the markup already exists, the family is CSS-only, or the job is styling rather than composition.\n- Use dist/inc-design-language.js only for stateful primitives such as menus, tabs, collapsible sections, auto-refresh widgets, the native dialog launch hook, and legacy modal/offcanvas shells.\n- Use src/inc-design-language.scss if the consumer needs to tune tokens, theme variables, density, or Bootstrap defaults.\n\nPrimary files:\n- dist/inc-design-language.css: compiled standalone CSS output.\n- dist/inc-design-language.js: optional dependency-free helper for menus, tabs, collapsible sections, auto-refresh widgets, the native dialog launch hook, and legacy modal/offcanvas shells.\n- dist/web-components/index.js: optional custom-element entrypoint for the same-package Web Component layer.\n- src/inc-design-language.scss: main SCSS entrypoint.\n- src/_inc-theme.scss: brand-facing fonts, palette, semantic surfaces, and text colors.\n- src/_inc-tokens.scss: deeper token and Bootstrap-facing overrides.\n- web-components.html: public landing page for the optional Web Component entrypoint and the CSS-first versus Web Component usage split.\n- reference.html: copy/paste catalog for standard controls, page-frame primitives, metric variants, and overlay shells.\n- specs/architecture/_index.md: design-rationale layer for token boundaries, helper scope, and package intent.\n- specs/requirements/ui-kit/_index.md: first-pass Spec Trace suite for the UI kit.\n- specs/requirements/ui-kit/REQUIREMENT-GAPS.md: unresolved requirement gaps and follow-up questions.\n- specs/requirements/ui-kit/SPEC-UIK-STD.md: public surface standards for inc- naming and accessible interactive behavior.\n- specs/requirements/ui-kit/SPEC-UIK-CNV.md: shared control conventions for base-plus-modifier surfaces, density suffixes, and state hooks.\n- specs/verification/ui-kit/_index.md: auditable source-review, smoke-validation, and Playwright browser-automation baseline for the UI kit surface.\n- states.html, forms-and-validation.html, data-grid-advanced.html, overlay-workflows.html: workflow-heavy composition patterns.\n- demo.html, work-queue.html, record-detail.html, native-patterns.html: fuller page examples.\n- The v1 Web Component families are layouts and shells, navbar/tabs/user-menu, field/input-group/choice-group/readonly-field/validation-summary, state-panel/live-region/auto-refresh/theme-switcher, badge/spinner atoms, button/button-group/button-toolbar/close-button hosts, alert/empty-state/list-group/key-value hosts, and disclosure/dialog/drawer.\n- Prefer those browser-native components for supported v1 surfaces when the consumer wants declarative markup from plain HTML/JS; keep CSS-first HTML for surfaces that are intentionally outside the WC layer.\n- Tables, utilities, filter/bulk/file workflows, permission banners, toasts, and compatibility overlay shells stay CSS-only or deferred in v1.\n\nMarkdown links:\n- Use relative links for repo-local references in markdown, and keep the visible label code-formatted.\n- Use absolute URLs only for external documentation, hosted examples, package registry pages, or other non-repo targets.\n- When a reference has a clear local target, link it instead of leaving it as a bare code span.\n\nPublic naming rules:\n- Use the inc- prefix for public classes.\n- Keep the existing BEM structure: inc-block, inc-block__element, inc-block--modifier.\n- Use the shared control modifier grammar for density, expansion, and state hooks instead of inventing one-off suffixes.\n- Avoid nested element names such as inc-form__check__input; keep public element names one level deep.\n- Preserve native semantics and accessible focus/disabled/hidden states for interactive surfaces.\n- Treat light and dark as global theme concerns activated through data-bs-theme on the root scope, not public component-class modifiers.\n\nCore primitives:\n- Typography: use inc-text, inc-heading, inc-data, inc-button-text, inc-form-text, and inc-table-text for public text helpers.\n- Tables: start with inc-table; use modifiers such as inc-table__cell--numeric, inc-table__cell--action, inc-table__cell--min, and inc-table__cell--expand.\n- Buttons: use inc-btn with semantic modifiers such as inc-btn--primary, inc-btn--secondary, and inc-btn--danger. Keep the visual treatment identical on <button> and <a> markup, use <button> for in-place actions, use <a> for navigation, and use inc-btn--micro for in-row actions.\n- Forms: use inc-form--inline, inc-form__field, inc-form__fieldset, inc-form__legend, inc-form__control, inc-form__select, inc-input-group, inc-readonly-field, inc-form-text, inc-form__feedback--error, inc-form__feedback--success, and inc-form__error-summary.\n- Form choices: use inc-form__check, inc-form__check-input, inc-form__check-label, inc-form__switch, and inc-form__choices for checkbox and radio groups.\n- Control conventions: use the shared base-plus-modifier patterns from SPEC-UIK-CNV.md for density, expansion, and state hooks.\n- Control density: use the shared inc-control-density-micro-* tokens for compact buttons, inputs, selects, and input groups instead of hard-coded micro values.\n- Filter bars: use inc-filter-bar, inc-filter-chip, and inc-bulk-bar.\n- Cards and shells: use inc-card for plain cards. Use inc-header-body for titled sections with actions. Use inc-header-body--table-body when the body contains a table and should keep body padding without extra bottom table margin.\n- App layout: use inc-app-shell, inc-page, inc-breadcrumb-body, inc-footer-bar, inc-footer-bar__menu, inc-footer-bar__meta, inc-navbar, inc-breadcrumb, inc-nav-triad, and inc-sidebar-menu.\n- Utilities: use inc-u-stack-*, inc-u-gap-*, inc-grid, inc-row, inc-col, inc-stack, and inc-flex-* when composition needs a public helper class.\n- States and workflow: use inc-state-panel, inc-permission-banner, inc-toast-card, inc-empty-state, inc-list-group, inc-key-value, inc-timeline, inc-file-dropzone, and inc-file-row.\n- Interaction: use data-inc-toggle=\"menu\", data-inc-toggle=\"tab\", and data-inc-toggle=\"collapse\" with data-inc-target=\"#target-id\" when you want the helper to wire behavior. Use data-inc-dismiss=\"modal\" / data-inc-dismiss=\"offcanvas\", data-inc-accordion, data-inc-backdrop-for, data-inc-initial-focus, data-inc-auto-refresh, and the data-inc-refresh-seconds, data-inc-refresh-label, data-inc-refresh-loading-label, data-inc-refresh-paused-label, data-inc-refresh-pause-action-label, and data-inc-refresh-resume-action-label hooks when you need the rest of the helper contract. Use data-inc-native-dialog-open=\"dialog-id\" when you want the helper to open a native <dialog>.\n- Web Components: prefer the same-package entrypoint for layouts, navbar/tabs/user-menu, field/input wrappers, badge/spinner atoms, button/action/detail/collection hosts, state/live-region/auto-refresh/theme switcher, and disclosure/dialog/drawer shells. Keep tables, utilities, filter/bulk/file workflows, and the remaining presentation-only atoms CSS-first in v1.\n- Native interaction: use details.inc-disclosure, details.inc-native-menu, and dialog.inc-native-dialog.\n- Status: use inc-badge with tone values such as success, warning, danger, or info; use inc-spinner with variant=\"border|grow\", optional tone, size=\"sm\", and a label for accessible loading state.\n- Metrics: use inc-summary-overview and inc-summary-block.\n\nCustomization order:\n1. Change fonts and colors in src/_inc-theme.scss.\n2. Use src/_inc-tokens.scss only for deeper token or Bootstrap-level tuning.\n3. Rebuild the CSS.\n4. Only add new component rules after checking whether an existing inc-* block already fits.\n\nPackaging and build:\n- npm run verify rebuilds distributables, runs the smoke gate, and dry-runs the package.\n- npm run test:browser runs the Playwright browser suite for tabs, overlays, native dialogs, and auto-refresh; use npm run test:browser:install once if Chromium is not already installed.\n- npm run build rebuilds distributables.\n- npm pack or npm run package produces a local installable tarball.\n- The compiled CSS already includes the Bootstrap layer it was built from, so consumers do not need Bootstrap CSS at runtime when using compiled assets.\n- The SCSS source path does require Bootstrap Sass at build time because it imports bootstrap/scss/bootstrap.\n- The Web Component layer ships as a layered entrypoint in the same package, not as a second package or separate design system.\n\nGuardrails:\n- Keep typography split: sans for UI text, mono for data.\n- Preserve explicit alignment classes for numeric table data.\n- Avoid product-specific shell or background styles in this package.\n- Keep new components generic enough to reuse across admin/data apps.\n- Prefer native browser behavior first for disclosures and dialogs when it fits the product.\n- Keep the CSS-first class API canonical and treat the Web Component layer as additive, not a replacement.\n\nSee also:\n- README.md for package usage, release flow, and repository structure.\n- AI-AGENT-INSTRUCTIONS.md for the same guidance in markdown form.\nllms\nllms.txt\nLLMS.txt"
+  }
+]