@incursa/ui-kit 1.2.0 → 1.4.0

package/AI-AGENT-INSTRUCTIONS.md

@@ -4,12 +4,20 @@ Use this package as a reusable data-heavy UI baseline.
 
 Repository brand assets live under [`assets/brand/`](assets/brand). Prefer those local files when adding logos, favicons, or README imagery.
 
+## Surface selection
+
+- Start with the highest-level public surface that already fits the job.
+- 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.
+- 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.
+- Use native `<button>`, `<input>`, `<details>`, and `<dialog>` before adding helper wiring or custom elements.
+- Drop into `src/*` or token files only when the public surface cannot express the needed layout or behavior.
+
 ## Fast path
 
 - Prefer [`dist/inc-design-language.css`](dist/inc-design-language.css) if the target app already has working HTML and only needs the look.
 - Prefer [`src/inc-design-language.scss`](src/inc-design-language.scss) if you need to tune tokens, density, or Bootstrap defaults.
 - Prefer [`dist/inc-design-language.js`](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.
-- Prefer the optional [`web-components.html`](web-components.html) landing page and the same-package `./web-components` entrypoint when you need browser-native custom elements for the approved v1 families and want declarative slots, attributes, and DOM events from plain HTML.
+- Prefer the optional [`web-components.html`](web-components.html) landing page and the same-package [`./web-components`](./web-components) entrypoint when you want declarative browser-native components for the approved v1 families from plain HTML/JS.
 - Prefer [`reference.html`](reference.html) when you need copy/paste starter markup for a supported control or page-frame primitive before composing a full page.
 - Prefer [`states.html`](states.html), [`forms-and-validation.html`](forms-and-validation.html), and [`data-grid-advanced.html`](data-grid-advanced.html) when the target screen is workflow-heavy and you need realistic composition patterns, not isolated snippets.
 
@@ -50,7 +58,7 @@ Repository brand assets live under [`assets/brand/`](assets/brand). Prefer those
 - Native interaction:
   Use [`details.inc-disclosure`](reference.html) for section stacks, [`details.inc-native-menu`](reference.html) for lightweight menus, and [`dialog.inc-native-dialog`](reference.html) for native modal surfaces.
 - Web Components:
-  Keep the CSS class surface canonical, use the optional layered entrypoint for the approved v1 component families, and prefer native HTML primitives when they already satisfy the semantic and interaction contract.
+  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.
 - Status:
   Use [`inc-badge--success|warning|danger|info`](reference.html) for compact status signals.
 - Metrics:

package/LLMS.txt

@@ -1,17 +1,18 @@
 Incursa UI Kit
 
 Short description:
-Reusable UI kit for data-heavy business applications. The public surface stays CSS-first through [`inc-*`](reference.html) classes, with optional vanilla-JS helpers, SCSS source entrypoints, and a layered `./web-components` entrypoint for browser-native components.
+Reusable UI kit for data-heavy business applications. Start from the highest-level public surface that already fits: raw HTML plus [`inc-*`](reference.html) classes for existing markup and CSS-only families, the optional [`./web-components`](./web-components) entrypoint for supported v1 browser-native components when declarative markup is the better fit, and [`dist/inc-design-language.js`](dist/inc-design-language.js) only for helper-managed state.
 
 Package identity:
 - npm package: `@incursa/ui-kit`
 - license: Apache-2.0
 - repository: https://github.com/incursa/ui-kit
 
-Fast path:
+Surface selection:
 - Use [`dist/inc-design-language.css`](dist/inc-design-language.css) if the target app already has working HTML and mainly needs the visual language.
+- Use [`web-components.html`](web-components.html) and the same-package [`./web-components`](./web-components) entrypoint when you are building from plain HTML/JS and the capability exists in the approved v1 component set.
+- Use raw HTML plus [`inc-*`](reference.html) classes when the markup already exists, the family is CSS-only, or the job is styling rather than composition.
 - Use [`dist/inc-design-language.js`](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.
-- Use [`web-components.html`](web-components.html) and the same-package `./web-components` entrypoint when you want declarative custom elements for the approved v1 component families.
 - Use [`src/inc-design-language.scss`](src/inc-design-language.scss) if the consumer needs to tune tokens, theme variables, density, or Bootstrap defaults.
 
 Primary files:
@@ -32,6 +33,7 @@ Primary files:
 - [`states.html`](states.html), [`forms-and-validation.html`](forms-and-validation.html), [`data-grid-advanced.html`](data-grid-advanced.html), [`overlay-workflows.html`](overlay-workflows.html): workflow-heavy composition patterns.
 - [`demo.html`](demo.html), [`work-queue.html`](work-queue.html), [`record-detail.html`](record-detail.html), [`native-patterns.html`](native-patterns.html): fuller page examples.
 - 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, and disclosure/dialog/drawer.
+- 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.
 - Tables, utilities, filter/bulk/file workflows, permission banners, toasts, and compatibility overlay shells stay CSS-only or deferred in v1.
 
 Markdown links:

package/dist/inc-design-language.css

@@ -12185,6 +12185,18 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --inc-text-inverse-rgb: 255, 255, 255;
   --inc-text-link: var(--bs-link-color);
   --inc-text-link-hover: var(--bs-link-hover-color);
+  --inc-control-surface: var(--inc-surface-primary);
+  --inc-control-surface-text: var(--inc-text-primary);
+  --inc-control-surface-border: var(--inc-border-default);
+  --inc-surface-contrast: var(--bs-secondary);
+  --inc-surface-contrast-rgb: var(--bs-secondary-rgb);
+  --inc-surface-contrast-hover: #31384a;
+  --inc-surface-contrast-hover-rgb: 49, 56, 74;
+  --inc-surface-contrast-active: #2e3542;
+  --inc-surface-contrast-active-rgb: 46, 53, 66;
+  --inc-surface-contrast-text: var(--inc-text-inverse);
+  --inc-surface-contrast-text-rgb: var(--inc-text-inverse-rgb);
+  --inc-surface-contrast-border: var(--bs-secondary);
   --inc-surface-primary-rgb: var(--bs-body-bg-rgb);
   --inc-surface-secondary-rgb: var(--bs-secondary-bg-rgb);
   --inc-surface-muted-rgb: var(--bs-tertiary-bg-rgb);
@@ -12194,6 +12206,31 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --inc-shadow-rgb: var(--bs-black-rgb);
 }
 
+[data-bs-theme=dark] {
+  --inc-control-surface: var(--inc-surface-secondary);
+  --inc-control-surface-text: var(--inc-text-primary);
+  --inc-control-surface-border: var(--inc-border-default);
+  --inc-surface-contrast: var(--bs-gray-100);
+  --inc-surface-contrast-rgb: 253, 253, 253;
+  --inc-surface-contrast-hover: var(--bs-gray-200);
+  --inc-surface-contrast-hover-rgb: 246, 246, 246;
+  --inc-surface-contrast-active: var(--bs-gray-300);
+  --inc-surface-contrast-active-rgb: 241, 241, 241;
+  --inc-surface-contrast-text: var(--bs-dark);
+  --inc-surface-contrast-text-rgb: 18, 19, 22;
+  --inc-surface-contrast-border: var(--bs-gray-400);
+  --bs-success-bg-subtle: rgba(0, 151, 67, 0.18);
+  --bs-success-border-subtle: rgb(72, 171, 109);
+  --bs-form-valid-color: rgb(122, 214, 154);
+  --bs-form-valid-border-color: rgb(122, 214, 154);
+  --bs-danger-bg-subtle: rgba(209, 26, 42, 0.18);
+  --bs-danger-border-subtle: rgb(219, 89, 105);
+  --bs-form-invalid-color: rgb(248, 126, 143);
+  --bs-form-invalid-border-color: rgb(248, 126, 143);
+  --bs-warning-bg-subtle: rgba(200, 138, 0, 0.18);
+  --bs-warning-border-subtle: rgb(214, 160, 41);
+}
+
 .inc-text {
   font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   color: var(--inc-text-primary);
@@ -12496,6 +12533,21 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   gap: 0.375rem;
   vertical-align: middle;
 }
+.inc-btn--secondary {
+  --bs-btn-color: var(--inc-surface-contrast-text);
+  --bs-btn-bg: var(--inc-surface-contrast);
+  --bs-btn-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-hover-color: var(--inc-surface-contrast-text);
+  --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
+  --bs-btn-hover-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
+  --bs-btn-active-color: var(--inc-surface-contrast-text);
+  --bs-btn-active-bg: var(--inc-surface-contrast-active);
+  --bs-btn-active-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-disabled-color: var(--inc-surface-contrast-text);
+  --bs-btn-disabled-bg: var(--inc-surface-contrast);
+  --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
+}
 .inc-btn--success {
   color: #ffffff;
 }
@@ -12512,6 +12564,19 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-btn--info {
   color: #ffffff;
 }
+.inc-btn--outline-secondary {
+  --bs-btn-color: var(--inc-text-primary);
+  --bs-btn-border-color: var(--inc-border-default);
+  --bs-btn-hover-color: var(--inc-text-primary);
+  --bs-btn-hover-bg: var(--inc-surface-secondary);
+  --bs-btn-hover-border-color: var(--inc-border-default);
+  --bs-btn-focus-shadow-rgb: var(--inc-surface-strong-rgb);
+  --bs-btn-active-color: var(--inc-text-primary);
+  --bs-btn-active-bg: var(--inc-surface-muted);
+  --bs-btn-active-border-color: var(--inc-border-default);
+  --bs-btn-disabled-color: var(--inc-text-muted);
+  --bs-btn-disabled-border-color: var(--inc-border-subtle);
+}
 .inc-btn--micro {
   padding: 0.15rem 0.4rem;
   font-size: 0.7rem;
@@ -12564,6 +12629,11 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   display: none;
 }
 
+.inc-form__control {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+  border-color: var(--inc-control-surface-border);
+}
 .inc-form__control--micro {
   padding: 0.15rem 0.4rem;
   font-size: 0.7rem;
@@ -12577,6 +12647,11 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-form__control--error {
   border-color: #dc3545 !important;
 }
+.inc-form__select {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+  border-color: var(--inc-control-surface-border);
+}
 .inc-form__select--micro {
   padding: 0.15rem 0.4rem 0.15rem 0.75rem;
   font-size: 0.7rem;
@@ -12594,13 +12669,14 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   padding: 1rem 1rem 0.875rem;
   border: 1px solid var(--inc-border-subtle);
   border-radius: 0.5rem;
-  background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.72), var(--inc-surface-primary) 3rem);
+  background: var(--inc-surface-secondary);
 }
 .inc-form__legend {
   float: none;
   width: auto;
   margin: 0;
   padding: 0 0.375rem;
+  background-color: var(--inc-surface-secondary);
   color: var(--inc-text-primary);
   font-size: 0.8125rem;
   font-weight: 600;
@@ -12764,9 +12840,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   justify-content: center;
   text-align: center;
   padding: 2rem 1.5rem;
-  border: 0.0625rem solid #949596;
+  border: 0.0625rem solid var(--inc-border-subtle);
   border-radius: 0.25rem;
-  background-color: #fdfdfd;
+  background-color: var(--inc-surface-secondary);
+  color: var(--inc-text-primary);
   min-height: 21.875rem;
 }
 .inc-empty-state__content {
@@ -12776,7 +12853,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-empty-state__icon {
   font-size: 3.0625rem;
   margin-bottom: 1.5rem;
-  color: #c4c4c5;
+  color: var(--inc-text-muted);
 }
 .inc-empty-state__form {
   margin-top: 1.5rem;
@@ -13056,7 +13133,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-header-body__header {
   padding: 1rem;
   border-bottom: 1px solid var(--bs-border-color);
-  background-color: var(--bs-light);
+  background-color: var(--inc-surface-secondary);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -13942,10 +14019,10 @@ details.inc-native-menu.inc-native-menu--navbar > .inc-native-menu__panel {
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
-  background-color: rgba(68, 89, 198, 0.14);
-  color: #4459c6;
+  background-color: var(--bs-primary-bg-subtle);
+  color: var(--bs-primary-text-emphasis);
   font-size: 0.75rem;
-  font-weight: 600;
+  font-weight: 700;
   line-height: 1;
 }
 .inc-native-menu__summary .inc-user-menu__meta {
@@ -13994,7 +14071,7 @@ details.inc-native-menu.inc-native-menu--block > .inc-native-menu__summary {
   justify-content: flex-start;
   min-height: 3rem;
   padding: 0.625rem 0.75rem;
-  background: linear-gradient(180deg, var(--inc-surface-primary), var(--inc-surface-secondary));
+  background-color: var(--inc-surface-secondary);
 }
 
 details.inc-native-menu.inc-native-menu--block > .inc-native-menu__panel {
@@ -15379,6 +15456,17 @@ body.inc-offcanvas-open {
 .inc-btn.is-loading:has(> .inc-spinner)::after, .inc-btn.is-loading:has(> .inc-loading-dots)::after {
   display: none;
 }
+.inc-btn.is-loading > .inc-spinner {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  margin: -0.5rem 0 0 -0.5rem;
+  transform: none;
+}
+.inc-btn.is-loading > .inc-loading-dots {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate(-50%, -50%);
+}
 .inc-btn.is-loading::after {
   content: "";
   position: absolute;
@@ -15391,11 +15479,153 @@ body.inc-offcanvas-open {
   border-right-color: transparent;
   animation: inc-loading-spin 0.8s linear infinite;
 }
-.inc-btn.is-loading > .inc-spinner,
-.inc-btn.is-loading > .inc-loading-dots {
-  position: absolute;
-  inset: 50% auto auto 50%;
-  transform: translate(-50%, -50%);
+
+[data-bs-theme=dark] .form-control,
+[data-bs-theme=dark] .inc-readonly-field,
+[data-bs-theme=dark] .inc-form__control {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+  border-color: var(--inc-control-surface-border);
+}
+[data-bs-theme=dark] .form-control:focus,
+[data-bs-theme=dark] .inc-readonly-field:focus,
+[data-bs-theme=dark] .inc-form__control:focus {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+}
+[data-bs-theme=dark] .form-control::placeholder,
+[data-bs-theme=dark] .inc-readonly-field::placeholder,
+[data-bs-theme=dark] .inc-form__control::placeholder {
+  color: var(--bs-secondary-color);
+}
+[data-bs-theme=dark] .form-control::file-selector-button,
+[data-bs-theme=dark] .inc-readonly-field::file-selector-button,
+[data-bs-theme=dark] .inc-form__control::file-selector-button {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-surface-muted);
+}
+[data-bs-theme=dark] .form-control:hover:not(:disabled):not([readonly])::file-selector-button,
+[data-bs-theme=dark] .inc-readonly-field:hover:not(:disabled):not([readonly])::file-selector-button,
+[data-bs-theme=dark] .inc-form__control:hover:not(:disabled):not([readonly])::file-selector-button {
+  background-color: var(--inc-surface-secondary);
+}
+[data-bs-theme=dark] .form-select,
+[data-bs-theme=dark] .inc-form__select {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+  border-color: var(--inc-control-surface-border);
+}
+[data-bs-theme=dark] .form-select:focus,
+[data-bs-theme=dark] .inc-form__select:focus {
+  color: var(--inc-control-surface-text);
+  background-color: var(--inc-control-surface);
+}
+[data-bs-theme=dark] .form-select:-moz-focusring,
+[data-bs-theme=dark] .inc-form__select:-moz-focusring {
+  color: transparent;
+  text-shadow: 0 0 0 var(--inc-control-surface-text);
+}
+[data-bs-theme=dark] .input-group-text,
+[data-bs-theme=dark] .inc-input-group__text {
+  color: var(--inc-surface-contrast-text);
+  background-color: var(--inc-surface-contrast);
+  border-color: var(--inc-surface-contrast-border);
+}
+[data-bs-theme=dark] .inc-btn--secondary {
+  --bs-btn-color: var(--inc-surface-contrast-text);
+  --bs-btn-bg: var(--inc-surface-contrast);
+  --bs-btn-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-hover-color: var(--inc-surface-contrast-text);
+  --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
+  --bs-btn-hover-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
+  --bs-btn-active-color: var(--inc-surface-contrast-text);
+  --bs-btn-active-bg: var(--inc-surface-contrast-active);
+  --bs-btn-active-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-disabled-color: var(--inc-surface-contrast-text);
+  --bs-btn-disabled-bg: var(--inc-surface-contrast);
+  --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
+}
+[data-bs-theme=dark] .inc-form__fieldset {
+  background: var(--inc-surface-secondary);
+}
+[data-bs-theme=dark] .inc-form__legend {
+  background-color: var(--inc-surface-secondary);
+}
+[data-bs-theme=dark] .inc-form__control.is-invalid, [data-bs-theme=dark] .inc-form__control.inc-form--is-invalid,
+[data-bs-theme=dark] .inc-form__control[aria-invalid=true],
+[data-bs-theme=dark] .inc-form__select.is-invalid,
+[data-bs-theme=dark] .inc-form__select.inc-form--is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+}
+[data-bs-theme=dark] .inc-form__control.is-valid, [data-bs-theme=dark] .inc-form__control.inc-form--is-valid,
+[data-bs-theme=dark] .inc-form__select.is-valid,
+[data-bs-theme=dark] .inc-form__select.inc-form--is-valid {
+  border-color: var(--bs-form-valid-border-color);
+}
+[data-bs-theme=dark] .was-validated .form-control:invalid,
+[data-bs-theme=dark] .was-validated .inc-readonly-field:invalid,
+[data-bs-theme=dark] .was-validated .inc-form__control:invalid,
+[data-bs-theme=dark] .form-control.is-invalid,
+[data-bs-theme=dark] .is-invalid.inc-readonly-field,
+[data-bs-theme=dark] .form-control.inc-form--is-invalid,
+[data-bs-theme=dark] .inc-form--is-invalid.inc-readonly-field,
+[data-bs-theme=dark] .is-invalid.inc-form__control,
+[data-bs-theme=dark] .inc-form__control.inc-form--is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+}
+[data-bs-theme=dark] .was-validated .form-select:invalid,
+[data-bs-theme=dark] .was-validated .inc-form__select:invalid,
+[data-bs-theme=dark] .form-select.is-invalid,
+[data-bs-theme=dark] .form-select.inc-form--is-invalid,
+[data-bs-theme=dark] .is-invalid.inc-form__select,
+[data-bs-theme=dark] .inc-form__select.inc-form--is-invalid {
+  border-color: var(--bs-form-invalid-border-color);
+}
+[data-bs-theme=dark] .was-validated .form-control:invalid:focus,
+[data-bs-theme=dark] .was-validated .inc-readonly-field:invalid:focus,
+[data-bs-theme=dark] .was-validated .inc-form__control:invalid:focus,
+[data-bs-theme=dark] .form-control.is-invalid:focus,
+[data-bs-theme=dark] .is-invalid.inc-readonly-field:focus,
+[data-bs-theme=dark] .form-control.inc-form--is-invalid:focus,
+[data-bs-theme=dark] .inc-form--is-invalid.inc-readonly-field:focus,
+[data-bs-theme=dark] .is-invalid.inc-form__control:focus,
+[data-bs-theme=dark] .inc-form__control.inc-form--is-invalid:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+[data-bs-theme=dark] .was-validated .form-select:invalid:focus,
+[data-bs-theme=dark] .was-validated .inc-form__select:invalid:focus,
+[data-bs-theme=dark] .form-select.is-invalid:focus,
+[data-bs-theme=dark] .form-select.inc-form--is-invalid:focus,
+[data-bs-theme=dark] .is-invalid.inc-form__select:focus,
+[data-bs-theme=dark] .inc-form__select.inc-form--is-invalid:focus {
+  border-color: var(--bs-form-invalid-border-color);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
+}
+[data-bs-theme=dark] .inc-table__row--selected,
+[data-bs-theme=dark] .inc-table__row--warning,
+[data-bs-theme=dark] .inc-table__row--danger {
+  --bs-table-color: var(--inc-text-primary);
+}
+[data-bs-theme=dark] .inc-table__row--locked {
+  --bs-table-color: var(--inc-text-secondary);
+}
+[data-bs-theme=dark] .inc-table__row--selected > *,
+[data-bs-theme=dark] .inc-table__row--warning > *,
+[data-bs-theme=dark] .inc-table__row--danger > * {
+  background: rgba(var(--bs-primary-rgb), 0.14) !important;
+  color: var(--inc-text-primary);
+}
+[data-bs-theme=dark] .inc-table__row--warning > * {
+  background: rgba(var(--bs-warning-rgb), 0.14) !important;
+}
+[data-bs-theme=dark] .inc-table__row--danger > * {
+  background: rgba(var(--bs-danger-rgb), 0.14) !important;
+}
+[data-bs-theme=dark] .inc-table__row--locked > * {
+  background: rgba(var(--bs-secondary-rgb), 0.22) !important;
+  color: var(--inc-text-secondary);
 }
 
 .inc-bulk-bar {