@incursa/ui-kit 0.4.1 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/LLMS.txt +19 -5
  2. package/README.md +16 -2
  3. package/dist/inc-design-language.css +47 -54
  4. package/dist/inc-design-language.css.map +1 -1
  5. package/dist/inc-design-language.js +27 -0
  6. package/dist/inc-design-language.min.css +1 -1
  7. package/dist/inc-design-language.min.css.map +1 -1
  8. package/package.json +1 -1
  9. package/src/_inc-tokens.scss +12 -0
  10. package/src/inc-design-language.js +27 -0
  11. package/src/inc-design-language.scss +27 -131
package/LLMS.txt CHANGED
@@ -10,32 +10,46 @@ Package identity:
10
10
 
11
11
  Fast path:
12
12
  - Use `dist/inc-design-language.css` if the target app already has working HTML and mainly needs the visual language.
13
- - Use `dist/inc-design-language.js` only for stateful primitives such as menus, tabs, and collapsible sections.
13
+ - 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.
14
14
  - Use `src/inc-design-language.scss` if the consumer needs to tune tokens, theme variables, density, or Bootstrap defaults.
15
15
 
16
16
  Primary files:
17
17
  - `dist/inc-design-language.css`: compiled standalone CSS output.
18
- - `dist/inc-design-language.js`: optional dependency-free helper for menus, tabs, and collapsible sections.
18
+ - `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.
19
19
  - `src/inc-design-language.scss`: main SCSS entrypoint.
20
20
  - `src/_inc-theme.scss`: brand-facing fonts, palette, semantic surfaces, and text colors.
21
21
  - `src/_inc-tokens.scss`: deeper token and Bootstrap-facing overrides.
22
22
  - `reference.html`: copy/paste catalog for standard controls and markup patterns.
23
+ - `specs/requirements/ui-kit/_index.md`: first-pass Spec Trace suite for the UI kit.
24
+ - `specs/requirements/ui-kit/REQUIREMENT-GAPS.md`: unresolved requirement gaps and follow-up questions.
25
+ - `specs/requirements/ui-kit/SPEC-UIK-STD.md`: public surface standards for `inc-` naming and accessible interactive behavior.
26
+ - `specs/requirements/ui-kit/SPEC-UIK-CNV.md`: shared control conventions for base-plus-modifier surfaces, density suffixes, and state hooks.
27
+ - `specs/verification/ui-kit/_index.md`: auditable source-review verification baseline for the UI kit surface.
23
28
  - `states.html`, `forms-and-validation.html`, `data-grid-advanced.html`, `overlay-workflows.html`: workflow-heavy composition patterns.
24
29
  - `demo.html`, `work-queue.html`, `record-detail.html`, `native-patterns.html`: fuller page examples.
25
30
 
26
31
  Public naming rules:
27
32
  - Use the `inc-` prefix for public classes.
28
33
  - Keep the existing BEM structure: `inc-block`, `inc-block__element`, `inc-block--modifier`.
34
+ - Use the shared control modifier grammar for density, expansion, and state hooks instead of inventing one-off suffixes.
35
+ - Avoid nested element names such as `inc-form__check__input`; keep public element names one level deep.
36
+ - Preserve native semantics and accessible focus/disabled/hidden states for interactive surfaces.
37
+ - Treat light and dark as global theme concerns activated through `data-bs-theme` on the root scope, not public component-class modifiers.
29
38
 
30
39
  Core primitives:
40
+ - Typography: use `inc-text`, `inc-heading`, `inc-data`, `inc-button-text`, `inc-form-text`, and `inc-table-text` for public text helpers.
31
41
  - 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`.
32
- - Buttons: use `inc-btn` with semantic modifiers such as `inc-btn--primary`, `inc-btn--secondary`, and `inc-btn--danger`. Use `inc-btn--micro` for in-row actions.
33
- - Forms: use `inc-form--inline`, `inc-form__field`, `inc-form__group`, `inc-input-group`, `inc-form__hint`, `inc-form__feedback--error`, `inc-form__feedback--success`, and `inc-form__error-summary`.
42
+ - 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.
43
+ - 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`.
44
+ - 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.
45
+ - Control conventions: use the shared base-plus-modifier patterns from `SPEC-UIK-CNV.md` for density, expansion, and state hooks.
46
+ - Control density: use the shared `inc-control-density-micro-*` tokens for compact buttons, inputs, selects, and input groups instead of hard-coded micro values.
34
47
  - Filter bars: use `inc-filter-bar`, `inc-filter-chip`, and `inc-bulk-bar`.
35
48
  - 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.
36
49
  - App layout: use `inc-app-shell`, `inc-footer-bar`, `inc-navbar`, `inc-breadcrumb`, `inc-nav-triad`, and `inc-sidebar-menu`.
50
+ - 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.
37
51
  - States and workflow: use `inc-state-panel`, `inc-permission-banner`, `inc-toast-card`, `inc-timeline`, `inc-file-dropzone`, `inc-file-row`, and `inc-key-value`.
38
- - 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.
52
+ - 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>`.
39
53
  - Native interaction: use `details.inc-disclosure`, `details.inc-native-menu`, and `dialog.inc-native-dialog`.
40
54
  - Status: use `inc-badge--success|warning|danger|info`.
41
55
  - Metrics: use `inc-summary-overview` and `inc-summary-block`.
package/README.md CHANGED
@@ -27,8 +27,9 @@ Licensed under Apache 2.0.
27
27
  - Operational states such as empty, no-results, loading, error, permission, lock, toast, live-region, auto-refresh, and activity timeline surfaces.
28
28
  - Bulk-action, sticky-header, and row-state table patterns for operator-facing grids.
29
29
  - File/document dropzones, file rows, read-only description-list grids, progress/meter surfaces, and drawer-style side panels.
30
- - A small overlay/navigation layer for tabs, pagination, dropdown actions, modals, and offcanvas panels.
30
+ - A small overlay/navigation layer for tabs, pagination, dropdown actions, native details/dialog patterns, and compatibility modals/offcanvas panels.
31
31
  - Opinionated app-shell pieces for navbar/topbar, breadcrumb/nav-triad, sticky footer, user menu, and common two/three-column page layouts.
32
+ - A public-surface standards layer for `inc-` prefixing, BEM naming, and accessible interactive behavior.
32
33
 
33
34
  ## What was intentionally left out
34
35
 
@@ -36,6 +37,12 @@ Licensed under Apache 2.0.
36
37
  - App-specific background art and report/print-only styling.
37
38
  - Feature-specific one-off classes that do not generalize cleanly across products.
38
39
 
40
+ ## Specification Baseline
41
+
42
+ - First-pass Spec Trace suite: [specs/requirements/ui-kit/_index.md](./specs/requirements/ui-kit/_index.md)
43
+ - Open requirement gaps and follow-up questions: [specs/requirements/ui-kit/REQUIREMENT-GAPS.md](./specs/requirements/ui-kit/REQUIREMENT-GAPS.md)
44
+ - Verification baseline: [specs/verification/ui-kit/_index.md](./specs/verification/ui-kit/_index.md)
45
+
39
46
  ## Files
40
47
 
41
48
  - `assets/brand/`
@@ -64,6 +71,10 @@ Licensed under Apache 2.0.
64
71
  Modal and offcanvas workflow example with validation and assignment flows.
65
72
  - `reference.html`
66
73
  Copy/paste catalog for the standard controls and markup patterns.
74
+ - `specs/requirements/ui-kit/`
75
+ First-pass Spec Trace specification suite for the UI kit, including the gap log for unresolved questions.
76
+ - `specs/verification/ui-kit/`
77
+ Auditable verification baseline for the current UI kit public surface.
67
78
  - `states.html`
68
79
  Empty, no-results, loading, error, permission, timeline, file, and notification patterns.
69
80
  - `forms-and-validation.html`
@@ -85,6 +96,9 @@ Examples:
85
96
 
86
97
  - `inc-table`
87
98
  - `inc-btn`
99
+ - `inc-text`
100
+ - `inc-heading`
101
+ - `inc-data`
88
102
  - `inc-card`
89
103
  - `inc-header-body`
90
104
  - `inc-summary-block`
@@ -112,7 +126,7 @@ For titled sections that wrap tables, use `inc-header-body--table-body` to keep
112
126
  - Stateful controls still need behavior:
113
127
  tabs, collapsible sections, menus/dropdowns, modals, offcanvas panels, dismissible alerts, toasts, and auto-refresh countdowns with pause/resume behavior.
114
128
  - This package now includes an optional dependency-free helper at `dist/inc-design-language.js` for:
115
- user-menu dropdowns, tab switching, collapse/accordion toggles, and page auto-refresh countdown widgets.
129
+ user-menu dropdowns, tab switching, collapse/accordion toggles, legacy modal/offcanvas shells, and page auto-refresh countdown widgets.
116
130
  - This package also includes native-styled patterns for:
117
131
  `details.inc-disclosure`, `details.inc-native-menu`, `dialog.inc-native-dialog`, and `dialog.inc-native-dialog--drawer`.
118
132
  - If you prefer native HTML behavior where possible, use browser primitives like `<details>` and `<dialog>` for product-specific implementations. The helper exists for places where the design language is intentionally Bootstrap-like and needs matching interaction behavior.
package/dist/inc-design-language.css CHANGED
@@ -2000,8 +2000,7 @@ progress {
2000
2000
  border-color: var(--bs-table-border-color);
2001
2001
  }
2002
2002
 
2003
- .table-light, .inc-table__cell--light, .inc-table__row--light, .inc-table__header--light,
2004
- .inc-table__header th.inc-table__header--light, .inc-table--light {
2003
+ .table-light {
2005
2004
  --bs-table-color: #121316;
2006
2005
  --bs-table-bg: #f6f6f6;
2007
2006
  --bs-table-border-color: rgb(200.4, 200.6, 201.2);
@@ -2015,8 +2014,7 @@ progress {
2015
2014
  border-color: var(--bs-table-border-color);
2016
2015
  }
2017
2016
 
2018
- .table-dark, .inc-table__cell--dark, .inc-table__row--dark, .inc-table__header--dark,
2019
- .inc-table__header th.inc-table__header--dark, .inc-table--dark {
2017
+ .table-dark {
2020
2018
  --bs-table-color: #ffffff;
2021
2019
  --bs-table-bg: #121316;
2022
2020
  --bs-table-border-color: rgb(65.4, 66.2, 68.6);
@@ -2313,7 +2311,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2313
2311
  padding-left: 1.5em;
2314
2312
  margin-bottom: 0.125rem;
2315
2313
  }
2316
- .form-check .form-check-input, .form-check .inc-form__check__input, .inc-form__check .form-check-input, .inc-form__check .inc-form__check__input {
2314
+ .form-check .form-check-input, .form-check .inc-form__check-input, .inc-form__check .form-check-input, .inc-form__check .inc-form__check-input {
2317
2315
  float: left;
2318
2316
  margin-left: -1.5em;
2319
2317
  }
@@ -2323,13 +2321,13 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2323
2321
  padding-left: 0;
2324
2322
  text-align: right;
2325
2323
  }
2326
- .form-check-reverse .form-check-input, .form-check-reverse .inc-form__check__input {
2324
+ .form-check-reverse .form-check-input, .form-check-reverse .inc-form__check-input {
2327
2325
  float: right;
2328
2326
  margin-right: -1.5em;
2329
2327
  margin-left: 0;
2330
2328
  }
2331
2329
 
2332
- .form-check-input, .inc-form__check__input {
2330
+ .form-check-input, .inc-form__check-input {
2333
2331
  --bs-form-check-bg: #ffffff;
2334
2332
  flex-shrink: 0;
2335
2333
  width: 1em;
@@ -2345,41 +2343,41 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2345
2343
  border: var(--bs-border-width) solid var(--bs-border-color);
2346
2344
  print-color-adjust: exact;
2347
2345
  }
2348
- .form-check-input[type=checkbox], [type=checkbox].inc-form__check__input {
2346
+ .form-check-input[type=checkbox], [type=checkbox].inc-form__check-input {
2349
2347
  border-radius: 0.25em;
2350
2348
  }
2351
- .form-check-input[type=radio], [type=radio].inc-form__check__input {
2349
+ .form-check-input[type=radio], [type=radio].inc-form__check-input {
2352
2350
  border-radius: 50%;
2353
2351
  }
2354
- .form-check-input:active, .inc-form__check__input:active {
2352
+ .form-check-input:active, .inc-form__check-input:active {
2355
2353
  filter: brightness(90%);
2356
2354
  }
2357
- .form-check-input:focus, .inc-form__check__input:focus {
2355
+ .form-check-input:focus, .inc-form__check-input:focus {
2358
2356
  border-color: #b9c5ff;
2359
2357
  outline: 0;
2360
2358
  box-shadow: 0 0 0 0.25rem rgba(68, 89, 198, 0.25);
2361
2359
  }
2362
- .form-check-input:checked, .inc-form__check__input:checked {
2360
+ .form-check-input:checked, .inc-form__check-input:checked {
2363
2361
  background-color: #4459c6;
2364
2362
  border-color: #4459c6;
2365
2363
  }
2366
- .form-check-input:checked[type=checkbox], .inc-form__check__input:checked[type=checkbox] {
2364
+ .form-check-input:checked[type=checkbox], .inc-form__check-input:checked[type=checkbox] {
2367
2365
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
2368
2366
  }
2369
- .form-check-input:checked[type=radio], .inc-form__check__input:checked[type=radio] {
2367
+ .form-check-input:checked[type=radio], .inc-form__check-input:checked[type=radio] {
2370
2368
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
2371
2369
  }
2372
- .form-check-input[type=checkbox]:indeterminate, [type=checkbox].inc-form__check__input:indeterminate {
2370
+ .form-check-input[type=checkbox]:indeterminate, [type=checkbox].inc-form__check-input:indeterminate {
2373
2371
  background-color: #4459c6;
2374
2372
  border-color: #4459c6;
2375
2373
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
2376
2374
  }
2377
- .form-check-input:disabled, .inc-form__check__input:disabled {
2375
+ .form-check-input:disabled, .inc-form__check-input:disabled {
2378
2376
  pointer-events: none;
2379
2377
  filter: none;
2380
2378
  opacity: 0.5;
2381
2379
  }
2382
- .form-check-input[disabled] ~ .form-check-label, .form-check-input[disabled] ~ .inc-form__check__label, [disabled].inc-form__check__input ~ .form-check-label, [disabled].inc-form__check__input ~ .inc-form__check__label, .form-check-input:disabled ~ .form-check-label, .form-check-input:disabled ~ .inc-form__check__label, .inc-form__check__input:disabled ~ .form-check-label, .inc-form__check__input:disabled ~ .inc-form__check__label {
2380
+ .form-check-input[disabled] ~ .form-check-label, .form-check-input[disabled] ~ .inc-form__check-label, [disabled].inc-form__check-input ~ .form-check-label, [disabled].inc-form__check-input ~ .inc-form__check-label, .form-check-input:disabled ~ .form-check-label, .form-check-input:disabled ~ .inc-form__check-label, .inc-form__check-input:disabled ~ .form-check-label, .inc-form__check-input:disabled ~ .inc-form__check-label {
2383
2381
  cursor: default;
2384
2382
  opacity: 0.5;
2385
2383
  }
@@ -2387,7 +2385,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2387
2385
  .form-switch, .inc-form__switch {
2388
2386
  padding-left: 2.5em;
2389
2387
  }
2390
- .form-switch .form-check-input, .inc-form__switch .form-check-input, .form-switch .inc-form__check__input, .inc-form__switch .inc-form__check__input {
2388
+ .form-switch .form-check-input, .inc-form__switch .form-check-input, .form-switch .inc-form__check-input, .inc-form__switch .inc-form__check-input {
2391
2389
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%2842, 49, 66, 0.25%29'/%3e%3c/svg%3e");
2392
2390
  width: 2em;
2393
2391
  margin-left: -2.5em;
@@ -2397,14 +2395,14 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2397
2395
  transition: background-position 0.15s ease-in-out;
2398
2396
  }
2399
2397
  @media (prefers-reduced-motion: reduce) {
2400
- .form-switch .form-check-input, .inc-form__switch .form-check-input, .form-switch .inc-form__check__input, .inc-form__switch .inc-form__check__input {
2398
+ .form-switch .form-check-input, .inc-form__switch .form-check-input, .form-switch .inc-form__check-input, .inc-form__switch .inc-form__check-input {
2401
2399
  transition: none;
2402
2400
  }
2403
2401
  }
2404
- .form-switch .form-check-input:focus, .inc-form__switch .form-check-input:focus, .form-switch .inc-form__check__input:focus, .inc-form__switch .inc-form__check__input:focus {
2402
+ .form-switch .form-check-input:focus, .inc-form__switch .form-check-input:focus, .form-switch .inc-form__check-input:focus, .inc-form__switch .inc-form__check-input:focus {
2405
2403
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b9c5ff'/%3e%3c/svg%3e");
2406
2404
  }
2407
- .form-switch .form-check-input:checked, .inc-form__switch .form-check-input:checked, .form-switch .inc-form__check__input:checked, .inc-form__switch .inc-form__check__input:checked {
2405
+ .form-switch .form-check-input:checked, .inc-form__switch .form-check-input:checked, .form-switch .inc-form__check-input:checked, .inc-form__switch .inc-form__check-input:checked {
2408
2406
  background-position: right center;
2409
2407
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
2410
2408
  }
@@ -2412,7 +2410,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2412
2410
  padding-right: 2.5em;
2413
2411
  padding-left: 0;
2414
2412
  }
2415
- .form-switch.form-check-reverse .form-check-input, .form-check-reverse.inc-form__switch .form-check-input, .form-switch.form-check-reverse .inc-form__check__input, .form-check-reverse.inc-form__switch .inc-form__check__input {
2413
+ .form-switch.form-check-reverse .form-check-input, .form-check-reverse.inc-form__switch .form-check-input, .form-switch.form-check-reverse .inc-form__check-input, .form-check-reverse.inc-form__switch .inc-form__check-input {
2416
2414
  margin-right: -2.5em;
2417
2415
  margin-left: 0;
2418
2416
  }
@@ -2433,7 +2431,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2433
2431
  opacity: 0.65;
2434
2432
  }
2435
2433
 
2436
- [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus), [data-bs-theme=dark] .inc-form__switch .form-check-input:not(:checked):not(:focus), [data-bs-theme=dark] .form-switch .inc-form__check__input:not(:checked):not(:focus), [data-bs-theme=dark] .inc-form__switch .inc-form__check__input:not(:checked):not(:focus) {
2434
+ [data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus), [data-bs-theme=dark] .inc-form__switch .form-check-input:not(:checked):not(:focus), [data-bs-theme=dark] .form-switch .inc-form__check-input:not(:checked):not(:focus), [data-bs-theme=dark] .inc-form__switch .inc-form__check-input:not(:checked):not(:focus) {
2437
2435
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
2438
2436
  }
2439
2437
 
@@ -2878,20 +2876,20 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2878
2876
  width: calc(3rem + calc(1.5em + 0.75rem));
2879
2877
  }
2880
2878
 
2881
- .was-validated .form-check-input:valid, .was-validated .inc-form__check__input:valid, .form-check-input.is-valid, .form-check-input.inc-form--is-valid, .is-valid.inc-form__check__input, .inc-form__check__input.inc-form--is-valid {
2879
+ .was-validated .form-check-input:valid, .was-validated .inc-form__check-input:valid, .form-check-input.is-valid, .form-check-input.inc-form--is-valid, .is-valid.inc-form__check-input, .inc-form__check-input.inc-form--is-valid {
2882
2880
  border-color: var(--bs-form-valid-border-color);
2883
2881
  }
2884
- .was-validated .form-check-input:valid:checked, .was-validated .inc-form__check__input:valid:checked, .form-check-input.is-valid:checked, .form-check-input.inc-form--is-valid:checked, .is-valid.inc-form__check__input:checked, .inc-form__check__input.inc-form--is-valid:checked {
2882
+ .was-validated .form-check-input:valid:checked, .was-validated .inc-form__check-input:valid:checked, .form-check-input.is-valid:checked, .form-check-input.inc-form--is-valid:checked, .is-valid.inc-form__check-input:checked, .inc-form__check-input.inc-form--is-valid:checked {
2885
2883
  background-color: var(--bs-form-valid-color);
2886
2884
  }
2887
- .was-validated .form-check-input:valid:focus, .was-validated .inc-form__check__input:valid:focus, .form-check-input.is-valid:focus, .form-check-input.inc-form--is-valid:focus, .is-valid.inc-form__check__input:focus, .inc-form__check__input.inc-form--is-valid:focus {
2885
+ .was-validated .form-check-input:valid:focus, .was-validated .inc-form__check-input:valid:focus, .form-check-input.is-valid:focus, .form-check-input.inc-form--is-valid:focus, .is-valid.inc-form__check-input:focus, .inc-form__check-input.inc-form--is-valid:focus {
2888
2886
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
2889
2887
  }
2890
- .was-validated .form-check-input:valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .inc-form__check__label, .was-validated .inc-form__check__input:valid ~ .form-check-label, .was-validated .inc-form__check__input:valid ~ .inc-form__check__label, .form-check-input.is-valid ~ .form-check-label, .form-check-input.inc-form--is-valid ~ .form-check-label, .form-check-input.is-valid ~ .inc-form__check__label, .form-check-input.inc-form--is-valid ~ .inc-form__check__label, .is-valid.inc-form__check__input ~ .form-check-label, .inc-form__check__input.inc-form--is-valid ~ .form-check-label, .is-valid.inc-form__check__input ~ .inc-form__check__label, .inc-form__check__input.inc-form--is-valid ~ .inc-form__check__label {
2888
+ .was-validated .form-check-input:valid ~ .form-check-label, .was-validated .form-check-input:valid ~ .inc-form__check-label, .was-validated .inc-form__check-input:valid ~ .form-check-label, .was-validated .inc-form__check-input:valid ~ .inc-form__check-label, .form-check-input.is-valid ~ .form-check-label, .form-check-input.inc-form--is-valid ~ .form-check-label, .form-check-input.is-valid ~ .inc-form__check-label, .form-check-input.inc-form--is-valid ~ .inc-form__check-label, .is-valid.inc-form__check-input ~ .form-check-label, .inc-form__check-input.inc-form--is-valid ~ .form-check-label, .is-valid.inc-form__check-input ~ .inc-form__check-label, .inc-form__check-input.inc-form--is-valid ~ .inc-form__check-label {
2891
2889
  color: var(--bs-form-valid-color);
2892
2890
  }
2893
2891
 
2894
- .form-check-inline .form-check-input ~ .valid-feedback, .form-check-inline .form-check-input ~ .inc-form__valid-feedback, .form-check-inline .inc-form__check__input ~ .valid-feedback, .form-check-inline .inc-form__check__input ~ .inc-form__valid-feedback {
2892
+ .form-check-inline .form-check-input ~ .valid-feedback, .form-check-inline .form-check-input ~ .inc-form__valid-feedback, .form-check-inline .inc-form__check-input ~ .valid-feedback, .form-check-inline .inc-form__check-input ~ .inc-form__valid-feedback {
2895
2893
  margin-left: 0.5em;
2896
2894
  }
2897
2895
 
@@ -2995,20 +2993,20 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
2995
2993
  width: calc(3rem + calc(1.5em + 0.75rem));
2996
2994
  }
2997
2995
 
2998
- .was-validated .form-check-input:invalid, .was-validated .inc-form__check__input:invalid, .form-check-input.is-invalid, .form-check-input.inc-form--is-invalid, .is-invalid.inc-form__check__input, .inc-form__check__input.inc-form--is-invalid {
2996
+ .was-validated .form-check-input:invalid, .was-validated .inc-form__check-input:invalid, .form-check-input.is-invalid, .form-check-input.inc-form--is-invalid, .is-invalid.inc-form__check-input, .inc-form__check-input.inc-form--is-invalid {
2999
2997
  border-color: var(--bs-form-invalid-border-color);
3000
2998
  }
3001
- .was-validated .form-check-input:invalid:checked, .was-validated .inc-form__check__input:invalid:checked, .form-check-input.is-invalid:checked, .form-check-input.inc-form--is-invalid:checked, .is-invalid.inc-form__check__input:checked, .inc-form__check__input.inc-form--is-invalid:checked {
2999
+ .was-validated .form-check-input:invalid:checked, .was-validated .inc-form__check-input:invalid:checked, .form-check-input.is-invalid:checked, .form-check-input.inc-form--is-invalid:checked, .is-invalid.inc-form__check-input:checked, .inc-form__check-input.inc-form--is-invalid:checked {
3002
3000
  background-color: var(--bs-form-invalid-color);
3003
3001
  }
3004
- .was-validated .form-check-input:invalid:focus, .was-validated .inc-form__check__input:invalid:focus, .form-check-input.is-invalid:focus, .form-check-input.inc-form--is-invalid:focus, .is-invalid.inc-form__check__input:focus, .inc-form__check__input.inc-form--is-invalid:focus {
3002
+ .was-validated .form-check-input:invalid:focus, .was-validated .inc-form__check-input:invalid:focus, .form-check-input.is-invalid:focus, .form-check-input.inc-form--is-invalid:focus, .is-invalid.inc-form__check-input:focus, .inc-form__check-input.inc-form--is-invalid:focus {
3005
3003
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
3006
3004
  }
3007
- .was-validated .form-check-input:invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .inc-form__check__label, .was-validated .inc-form__check__input:invalid ~ .form-check-label, .was-validated .inc-form__check__input:invalid ~ .inc-form__check__label, .form-check-input.is-invalid ~ .form-check-label, .form-check-input.inc-form--is-invalid ~ .form-check-label, .form-check-input.is-invalid ~ .inc-form__check__label, .form-check-input.inc-form--is-invalid ~ .inc-form__check__label, .is-invalid.inc-form__check__input ~ .form-check-label, .inc-form__check__input.inc-form--is-invalid ~ .form-check-label, .is-invalid.inc-form__check__input ~ .inc-form__check__label, .inc-form__check__input.inc-form--is-invalid ~ .inc-form__check__label {
3005
+ .was-validated .form-check-input:invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .inc-form__check-label, .was-validated .inc-form__check-input:invalid ~ .form-check-label, .was-validated .inc-form__check-input:invalid ~ .inc-form__check-label, .form-check-input.is-invalid ~ .form-check-label, .form-check-input.inc-form--is-invalid ~ .form-check-label, .form-check-input.is-invalid ~ .inc-form__check-label, .form-check-input.inc-form--is-invalid ~ .inc-form__check-label, .is-invalid.inc-form__check-input ~ .form-check-label, .inc-form__check-input.inc-form--is-invalid ~ .form-check-label, .is-invalid.inc-form__check-input ~ .inc-form__check-label, .inc-form__check-input.inc-form--is-invalid ~ .inc-form__check-label {
3008
3006
  color: var(--bs-form-invalid-color);
3009
3007
  }
3010
3008
 
3011
- .form-check-inline .form-check-input ~ .invalid-feedback, .form-check-inline .form-check-input ~ .inc-form__invalid-feedback, .form-check-inline .inc-form__check__input ~ .invalid-feedback, .form-check-inline .inc-form__check__input ~ .inc-form__invalid-feedback {
3009
+ .form-check-inline .form-check-input ~ .invalid-feedback, .form-check-inline .form-check-input ~ .inc-form__invalid-feedback, .form-check-inline .inc-form__check-input ~ .invalid-feedback, .form-check-inline .inc-form__check-input ~ .inc-form__invalid-feedback {
3012
3010
  margin-left: 0.5em;
3013
3011
  }
3014
3012
 
@@ -3224,7 +3222,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3224
3222
  --bs-btn-disabled-border-color: #d11a2a;
3225
3223
  }
3226
3224
 
3227
- .btn-light, .inc-btn--light {
3225
+ .btn-light {
3228
3226
  --bs-btn-color: #121316;
3229
3227
  --bs-btn-bg: #f6f6f6;
3230
3228
  --bs-btn-border-color: #f6f6f6;
@@ -3241,7 +3239,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3241
3239
  --bs-btn-disabled-border-color: #f6f6f6;
3242
3240
  }
3243
3241
 
3244
- .btn-dark, .inc-btn--dark {
3242
+ .btn-dark {
3245
3243
  --bs-btn-color: #ffffff;
3246
3244
  --bs-btn-bg: #121316;
3247
3245
  --bs-btn-border-color: #121316;
@@ -3275,7 +3273,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3275
3273
  --bs-gradient: none;
3276
3274
  }
3277
3275
 
3278
- .btn-outline-secondary, .inc-btn--outline-secondary {
3276
+ .btn-outline-secondary, .inc-user-menu__toggle, .inc-btn--outline-secondary {
3279
3277
  --bs-btn-color: #3a4358;
3280
3278
  --bs-btn-border-color: #3a4358;
3281
3279
  --bs-btn-hover-color: #ffffff;
@@ -3360,7 +3358,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3360
3358
  --bs-gradient: none;
3361
3359
  }
3362
3360
 
3363
- .btn-outline-light, .inc-user-menu__toggle, .inc-btn--outline-light {
3361
+ .btn-outline-light {
3364
3362
  --bs-btn-color: #f6f6f6;
3365
3363
  --bs-btn-border-color: #f6f6f6;
3366
3364
  --bs-btn-hover-color: #121316;
@@ -3377,7 +3375,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3377
3375
  --bs-gradient: none;
3378
3376
  }
3379
3377
 
3380
- .btn-outline-dark, .inc-btn--outline-dark {
3378
+ .btn-outline-dark {
3381
3379
  --bs-btn-color: #121316;
3382
3380
  --bs-btn-border-color: #121316;
3383
3381
  --bs-btn-hover-color: #ffffff;
@@ -3771,7 +3769,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
3771
3769
  color: var(--bs-dropdown-link-color);
3772
3770
  }
3773
3771
 
3774
- .dropdown-menu-dark, .inc-dropdown__menu--dark {
3772
+ .dropdown-menu-dark {
3775
3773
  --bs-dropdown-color: #f1f1f1;
3776
3774
  --bs-dropdown-bg: #525355;
3777
3775
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
@@ -4554,7 +4552,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
4554
4552
  overflow-y: visible;
4555
4553
  }
4556
4554
 
4557
- .navbar-dark, .inc-navbar--dark,
4555
+ .navbar-dark,
4558
4556
  .navbar[data-bs-theme=dark],
4559
4557
  [data-bs-theme=dark].inc-navbar {
4560
4558
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
@@ -5160,14 +5158,14 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
5160
5158
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
5161
5159
  }
5162
5160
 
5163
- .alert-light, .inc-alert--light {
5161
+ .alert-light {
5164
5162
  --bs-alert-color: var(--bs-light-text-emphasis);
5165
5163
  --bs-alert-bg: var(--bs-light-bg-subtle);
5166
5164
  --bs-alert-border-color: var(--bs-light-border-subtle);
5167
5165
  --bs-alert-link-color: var(--bs-light-text-emphasis);
5168
5166
  }
5169
5167
 
5170
- .alert-dark, .inc-alert--dark {
5168
+ .alert-dark {
5171
5169
  --bs-alert-color: var(--bs-dark-text-emphasis);
5172
5170
  --bs-alert-bg: var(--bs-dark-bg-subtle);
5173
5171
  --bs-alert-border-color: var(--bs-dark-border-subtle);
@@ -5554,7 +5552,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
5554
5552
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
5555
5553
  }
5556
5554
 
5557
- .list-group-item-light, .inc-list-group__item--light {
5555
+ .list-group-item-light {
5558
5556
  --bs-list-group-color: var(--bs-light-text-emphasis);
5559
5557
  --bs-list-group-bg: var(--bs-light-bg-subtle);
5560
5558
  --bs-list-group-border-color: var(--bs-light-border-subtle);
@@ -5567,7 +5565,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
5567
5565
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
5568
5566
  }
5569
5567
 
5570
- .list-group-item-dark, .inc-list-group__item--dark {
5568
+ .list-group-item-dark {
5571
5569
  --bs-list-group-color: var(--bs-dark-text-emphasis);
5572
5570
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
5573
5571
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
@@ -8725,12 +8723,12 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
8725
8723
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
8726
8724
  }
8727
8725
 
8728
- .text-light, .inc-spinner--grow--light, .inc-spinner--border--light {
8726
+ .text-light {
8729
8727
  --bs-text-opacity: 1;
8730
8728
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
8731
8729
  }
8732
8730
 
8733
- .text-dark, .inc-spinner--grow--dark, .inc-spinner--border--dark, .inc-form__select--warning, .inc-form__control--warning {
8731
+ .text-dark, .inc-form__select--warning, .inc-form__control--warning {
8734
8732
  --bs-text-opacity: 1;
8735
8733
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
8736
8734
  }
@@ -9020,12 +9018,12 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
9020
9018
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
9021
9019
  }
9022
9020
 
9023
- .bg-light, .inc-badge--light {
9021
+ .bg-light {
9024
9022
  --bs-bg-opacity: 1;
9025
9023
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
9026
9024
  }
9027
9025
 
9028
- .bg-dark, .inc-badge--dark {
9026
+ .bg-dark {
9029
9027
  --bs-bg-opacity: 1;
9030
9028
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
9031
9029
  }
@@ -14298,11 +14296,6 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
14298
14296
  border-top-right-radius: 0.25rem;
14299
14297
  border-right: none;
14300
14298
  }
14301
- .inc-table--light thead th {
14302
- background-color: #ffffff !important;
14303
- color: #121316 !important;
14304
- border-color: #c4c4c5 !important;
14305
- }
14306
14299
  .inc-table tbody td,
14307
14300
  .inc-table tbody th,
14308
14301
  .inc-table tfoot td,
@@ -14907,7 +14900,7 @@ body.inc-offcanvas-open {
14907
14900
  border-color: #009743;
14908
14901
  box-shadow: 0 0 0 0.1875rem rgba(0, 151, 67, 0.12);
14909
14902
  }
14910
- .inc-form__check.is-invalid .inc-form__check__label, .inc-form__check.inc-form--is-invalid .inc-form__check__label {
14903
+ .inc-form__check.is-invalid .inc-form__check-label, .inc-form__check.inc-form--is-invalid .inc-form__check-label {
14911
14904
  color: #d11a2a;
14912
14905
  }
14913
14906
  .inc-form__error-summary {