@dynamic-framework/ui-react 1.31.0 → 1.32.1

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 (62) hide show
  1. package/dist/css/dynamic-ui-non-root.css +311 -126
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +18 -15
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +328 -140
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +203 -62
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +207 -62
  10. package/dist/index.js.map +1 -1
  11. package/dist/types/components/DAvatar/DAvatar.d.ts +5 -2
  12. package/dist/types/components/DDatePicker/DDatePicker.d.ts +7 -3
  13. package/dist/types/components/DInput/DInput.d.ts +2 -2
  14. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -2
  15. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +1 -1
  16. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +1 -1
  17. package/dist/types/components/DInputMask/DInputMask.d.ts +1 -1
  18. package/dist/types/components/DInputPin/DInputPin.d.ts +3 -3
  19. package/dist/types/components/DInputSearch/DInputSearch.d.ts +1 -1
  20. package/dist/types/components/DInputSelect/DInputSelect.d.ts +3 -3
  21. package/dist/types/components/DList/DList.d.ts +3 -0
  22. package/dist/types/components/DList/components/DListItem.d.ts +3 -0
  23. package/dist/types/components/DListGroup/DListGroup.d.ts +14 -0
  24. package/dist/types/components/DListGroup/components/DListGroupItem.d.ts +13 -0
  25. package/dist/types/components/DListGroup/index.d.ts +3 -0
  26. package/dist/types/components/DModal/components/DModalFooter.d.ts +1 -1
  27. package/dist/types/components/DOffcanvas/components/DOffcanvasFooter.d.ts +3 -3
  28. package/dist/types/components/DPaginator/DPaginator.d.ts +25 -8
  29. package/dist/types/components/DPopover/DPopover.d.ts +3 -0
  30. package/dist/types/components/DQuickActionButton/DQuickActionButton.d.ts +3 -0
  31. package/dist/types/components/DQuickActionCheck/DQuickActionCheck.d.ts +3 -0
  32. package/dist/types/components/DQuickActionSwitch/DQuickActionSwitch.d.ts +3 -0
  33. package/dist/types/components/DSelect/DSelect.d.ts +3 -3
  34. package/dist/types/components/DTabs/DTabs.d.ts +1 -1
  35. package/dist/types/components/index.d.ts +5 -2
  36. package/dist/types/components/interface.d.ts +0 -4
  37. package/dist/types/contexts/index.d.ts +2 -1
  38. package/dist/types/hooks/index.d.ts +1 -0
  39. package/dist/types/hooks/useItemSelection.d.ts +16 -0
  40. package/dist/types/utils/changeQueryString.d.ts +4 -0
  41. package/dist/types/utils/getQueryString.d.ts +4 -0
  42. package/dist/types/utils/index.d.ts +3 -1
  43. package/package.json +17 -16
  44. package/src/style/abstracts/variables/_colors.scss +14 -14
  45. package/src/style/abstracts/variables/_forms.scss +3 -2
  46. package/src/style/abstracts/variables/_list-group.scss +3 -3
  47. package/src/style/abstracts/variables/_navs.scss +14 -17
  48. package/src/style/abstracts/variables/_options.scss +1 -1
  49. package/src/style/base/_+import.scss +2 -1
  50. package/src/style/base/_alert.scss +20 -0
  51. package/src/style/base/_input-group.scss +4 -1
  52. package/src/style/base/_nav.scss +72 -0
  53. package/src/style/base/_pagination.scss +7 -5
  54. package/src/style/base/_placeholder.scss +3 -0
  55. package/src/style/components/_+import.scss +1 -1
  56. package/src/style/components/_d-avatar.scss +85 -0
  57. package/src/style/components/_d-input-pin.scss +12 -5
  58. package/src/style/components/_d-select.scss +15 -6
  59. package/src/style/root/_root.scss +9 -2
  60. package/src/style/base/_avatar.scss +0 -61
  61. package/src/style/components/_d-tabs.scss +0 -44
  62. /package/dist/types/utils/{format-currency.d.ts → formatCurrency.d.ts} +0 -0
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.31.0
2
+ * dynamic-framework 1.32.1
3
3
  * bootstrap ^5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -32,20 +32,20 @@
32
32
  --bs-gray-700-rgb: 65, 65, 78;
33
33
  --bs-gray-800-rgb: 43, 43, 52;
34
34
  --bs-gray-900-rgb: 21, 21, 26;
35
- --bs-surface-gray-rgb: 240, 240, 242;
36
- --bs-surface-primary-rgb: 251, 232, 239;
37
- --bs-surface-secondary-rgb: 237, 237, 248;
38
- --bs-surface-success-rgb: 232, 243, 238;
39
- --bs-surface-info-rgb: 231, 241, 255;
40
- --bs-surface-warning-rgb: 255, 249, 230;
41
- --bs-surface-danger-rgb: 252, 235, 236;
42
- --bs-gray-soft-rgb: 251, 251, 252;
43
- --bs-primary-soft-rgb: 253, 244, 247;
44
- --bs-secondary-soft-rgb: 246, 246, 251;
45
- --bs-success-soft-rgb: 244, 249, 246;
46
- --bs-info-soft-rgb: 243, 248, 255;
47
- --bs-warning-soft-rgb: 255, 252, 243;
48
- --bs-danger-soft-rgb: 253, 245, 246;
35
+ --bs-surface-gray-rgb: var(--bs-gray-50-rgb);
36
+ --bs-surface-primary-rgb: var(--bs-primary-50-rgb);
37
+ --bs-surface-secondary-rgb: var(--bs-secondary-50-rgb);
38
+ --bs-surface-success-rgb: var(--bs-success-50-rgb);
39
+ --bs-surface-info-rgb: var(--bs-info-50-rgb);
40
+ --bs-surface-warning-rgb: var(--bs-warning-50-rgb);
41
+ --bs-surface-danger-rgb: var(--bs-danger-50-rgb);
42
+ --bs-gray-soft-rgb: var(--bs-gray-25-rgb);
43
+ --bs-primary-soft-rgb: var(--bs-primary-25-rgb);
44
+ --bs-secondary-soft-rgb: var(--bs-secondary-25-rgb);
45
+ --bs-success-soft-rgb: var(--bs-success-25-rgb);
46
+ --bs-info-soft-rgb: var(--bs-info-25-rgb);
47
+ --bs-warning-soft-rgb: var(--bs-warning-25-rgb);
48
+ --bs-danger-soft-rgb: var(--bs-danger-25-rgb);
49
49
  --bs-primary-25-rgb: 253, 244, 247;
50
50
  --bs-primary-50-rgb: 251, 232, 239;
51
51
  --bs-primary-100-rgb: 247, 209, 223;
@@ -854,6 +854,9 @@
854
854
  --bs-ref-spacer-28: 7rem;
855
855
  --bs-ref-spacer-29: 7.25rem;
856
856
  --bs-ref-spacer-30: 7.5rem;
857
+ --bs-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23198754' d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/%3e%3c/svg%3e");
858
+ --bs-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
859
+ --bs-default-placeholder-bg: var(--bs-secondary-200);
857
860
  --bs-default-accordion-padding-x: var(--bs-ref-spacer-4);
858
861
  --bs-default-accordion-padding-y: var(--bs-ref-spacer-6);
859
862
  --bs-default-accordion-color: var(--bs-gray-700);
@@ -5189,20 +5192,40 @@ textarea.form-control-lg {
5189
5192
 
5190
5193
  .was-validated .form-control:valid, .form-control.is-valid {
5191
5194
  border-color: var(--bs-form-valid-border-color);
5195
+ padding-right: calc(1.5em + 1.5rem);
5196
+ background-image: var(--bs-form-feedback-icon-valid);
5197
+ background-repeat: no-repeat;
5198
+ background-position: right calc(0.375em + 0.375rem) center;
5199
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5192
5200
  }
5193
5201
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
5194
5202
  border-color: var(--bs-form-valid-border-color);
5195
5203
  box-shadow: 0 0 0 transparent, 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
5196
5204
  }
5197
5205
 
5206
+ .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
5207
+ padding-right: calc(1.5em + 1.5rem);
5208
+ background-position: top calc(0.375em + 0.375rem) right calc(0.375em + 0.375rem);
5209
+ }
5210
+
5198
5211
  .was-validated .form-select:valid, .form-select.is-valid {
5199
5212
  border-color: var(--bs-form-valid-border-color);
5200
5213
  }
5214
+ .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
5215
+ --bs-form-select-bg-icon: var(--bs-form-feedback-icon-valid);
5216
+ padding-right: 5.5rem;
5217
+ background-position: right 1rem center, center right 3rem;
5218
+ background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5219
+ }
5201
5220
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
5202
5221
  border-color: var(--bs-form-valid-border-color);
5203
5222
  box-shadow: none, 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
5204
5223
  }
5205
5224
 
5225
+ .was-validated .form-control-color:valid, .form-control-color.is-valid {
5226
+ width: calc(3rem + calc(1.5em + 1.5rem));
5227
+ }
5228
+
5206
5229
  .was-validated .form-check-input:valid, .form-check-input.is-valid {
5207
5230
  border-color: var(--bs-form-valid-border-color);
5208
5231
  }
@@ -5259,20 +5282,40 @@ textarea.form-control-lg {
5259
5282
 
5260
5283
  .was-validated .form-control:invalid, .form-control.is-invalid {
5261
5284
  border-color: var(--bs-form-invalid-border-color);
5285
+ padding-right: calc(1.5em + 1.5rem);
5286
+ background-image: var(--bs-form-feedback-icon-invalid);
5287
+ background-repeat: no-repeat;
5288
+ background-position: right calc(0.375em + 0.375rem) center;
5289
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5262
5290
  }
5263
5291
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
5264
5292
  border-color: var(--bs-form-invalid-border-color);
5265
5293
  box-shadow: 0 0 0 transparent, 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
5266
5294
  }
5267
5295
 
5296
+ .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
5297
+ padding-right: calc(1.5em + 1.5rem);
5298
+ background-position: top calc(0.375em + 0.375rem) right calc(0.375em + 0.375rem);
5299
+ }
5300
+
5268
5301
  .was-validated .form-select:invalid, .form-select.is-invalid {
5269
5302
  border-color: var(--bs-form-invalid-border-color);
5270
5303
  }
5304
+ .was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
5305
+ --bs-form-select-bg-icon: var(--bs-form-feedback-icon-invalid);
5306
+ padding-right: 5.5rem;
5307
+ background-position: right 1rem center, center right 3rem;
5308
+ background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
5309
+ }
5271
5310
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
5272
5311
  border-color: var(--bs-form-invalid-border-color);
5273
5312
  box-shadow: none, 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
5274
5313
  }
5275
5314
 
5315
+ .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
5316
+ width: calc(3rem + calc(1.5em + 1.5rem));
5317
+ }
5318
+
5276
5319
  .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
5277
5320
  border-color: var(--bs-form-invalid-border-color);
5278
5321
  }
@@ -5728,9 +5771,9 @@ textarea.form-control-lg {
5728
5771
  --bs-nav-link-padding-y: 0.5rem;
5729
5772
  --bs-nav-link-font-size: var(--bs-body-font-size);
5730
5773
  --bs-nav-link-font-weight: var(--bs-fw-normal);
5731
- --bs-nav-link-color: var(--bs-gray-500);
5732
- --bs-nav-link-hover-color: var(--bs-secondary-600);
5733
- --bs-nav-link-disabled-color: var(--bs-gray-200);
5774
+ --bs-nav-link-color: var(--bs-gray-900);
5775
+ --bs-nav-link-hover-color: var(--bs-primary-600);
5776
+ --bs-nav-link-disabled-color: var(--bs-gray-300);
5734
5777
  display: flex;
5735
5778
  flex-wrap: wrap;
5736
5779
  padding-left: 0;
@@ -5769,12 +5812,12 @@ textarea.form-control-lg {
5769
5812
 
5770
5813
  .nav-tabs {
5771
5814
  --bs-nav-tabs-border-width: var(--bs-border-width);
5772
- --bs-nav-tabs-border-color: var(--bs-border-color);
5815
+ --bs-nav-tabs-border-color: var(--bs-gray-300);
5773
5816
  --bs-nav-tabs-border-radius: var(--bs-border-radius-sm);
5774
- --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
5775
- --bs-nav-tabs-link-active-color: var(--bs-secondary);
5776
- --bs-nav-tabs-link-active-bg: var(--bs-secondary-100);
5777
- --bs-nav-tabs-link-active-border-color: var(--bs-secondary);
5817
+ --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-gray-300);
5818
+ --bs-nav-tabs-link-active-color: var(--bs-primary);
5819
+ --bs-nav-tabs-link-active-bg: var(--bs-white);
5820
+ --bs-nav-tabs-link-active-border-color: var(--bs-gray-300);
5778
5821
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
5779
5822
  }
5780
5823
  .nav-tabs .nav-link {
@@ -5800,9 +5843,9 @@ textarea.form-control-lg {
5800
5843
  }
5801
5844
 
5802
5845
  .nav-pills {
5803
- --bs-nav-pills-border-radius: 100px;
5846
+ --bs-nav-pills-border-radius: var(--bs-border-radius-sm);
5804
5847
  --bs-nav-pills-link-active-color: var(--bs-white);
5805
- --bs-nav-pills-link-active-bg: var(--bs-secondary);
5848
+ --bs-nav-pills-link-active-bg: var(--bs-primary);
5806
5849
  }
5807
5850
  .nav-pills .nav-link {
5808
5851
  border-radius: var(--bs-nav-pills-border-radius);
@@ -5816,7 +5859,7 @@ textarea.form-control-lg {
5816
5859
  .nav-underline {
5817
5860
  --bs-nav-underline-gap: 1rem;
5818
5861
  --bs-nav-underline-border-width: 0.125rem;
5819
- --bs-nav-underline-link-active-color: var(--bs-secondary);
5862
+ --bs-nav-underline-link-active-color: var(--bs-primary);
5820
5863
  gap: var(--bs-nav-underline-gap);
5821
5864
  }
5822
5865
  .nav-underline .nav-link {
@@ -6905,11 +6948,11 @@ textarea.form-control-lg {
6905
6948
  --bs-list-group-border-radius: var(--bs-border-radius-sm);
6906
6949
  --bs-list-group-item-padding-x: var(--bs-ref-spacer-4);
6907
6950
  --bs-list-group-item-padding-y: var(--bs-ref-spacer-3);
6908
- --bs-list-group-action-color: var(--bs-gray-700);
6909
- --bs-list-group-action-hover-color: var(--bs-gray-700);
6910
- --bs-list-group-action-hover-bg: var(--bs-gray-100);
6951
+ --bs-list-group-action-color: var(--bs-gray-900);
6952
+ --bs-list-group-action-hover-color: var(--bs-gray-900);
6953
+ --bs-list-group-action-hover-bg: var(--bs-surface-primary);
6911
6954
  --bs-list-group-action-active-color: var(--bs-body-color);
6912
- --bs-list-group-action-active-bg: var(--bs-gray-200);
6955
+ --bs-list-group-action-active-bg: var(--bs-primary-100);
6913
6956
  --bs-list-group-disabled-color: var(--bs-gray-600);
6914
6957
  --bs-list-group-disabled-bg: transparent;
6915
6958
  --bs-list-group-active-color: var(--bs-white);
@@ -9008,6 +9051,8 @@ body {
9008
9051
  }
9009
9052
  .input-group:has(.form-control.is-valid, .form-select.is-valid) {
9010
9053
  border-color: var(--bs-form-valid-border-color);
9054
+ }
9055
+ .input-group:has(.form-control.is-valid, .form-select.is-valid):focus-within {
9011
9056
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
9012
9057
  }
9013
9058
  .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
@@ -9018,6 +9063,8 @@ body {
9018
9063
  }
9019
9064
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) {
9020
9065
  border-color: var(--bs-form-invalid-border-color);
9066
+ }
9067
+ .input-group:has(.form-control.is-invalid, .form-select.is-invalid):focus-within {
9021
9068
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
9022
9069
  }
9023
9070
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
@@ -9874,6 +9921,9 @@ body {
9874
9921
  --bs-icon-size: var(--bs-alert-icon-size);
9875
9922
  --bs-icon-color: var(--bs-alert-icon-color);
9876
9923
  }
9924
+ .alert .alert-icon:not(.d-icon) {
9925
+ color: var(--bs-icon-color);
9926
+ }
9877
9927
  .alert.alert-primary {
9878
9928
  --bs-alert-icon-color: var(--bs-primary-500);
9879
9929
  --bs-alert-color: var(--bs-body-color);
@@ -9910,6 +9960,18 @@ body {
9910
9960
  --bs-alert-bg: var(--bs-surface-danger);
9911
9961
  --bs-alert-border-color: var(--bs-surface-danger);
9912
9962
  }
9963
+ .alert.alert-light {
9964
+ --bs-alert-icon-color: var(--bs-gray-500);
9965
+ --bs-alert-color: var(--bs-body-color);
9966
+ --bs-alert-bg: var(--bs-surface-gray);
9967
+ --bs-alert-border-color: var(--bs-surface-gray);
9968
+ }
9969
+ .alert.alert-dark {
9970
+ --bs-alert-icon-color: var(--bs-light);
9971
+ --bs-alert-color: var(--bs-white);
9972
+ --bs-alert-bg: var(--bs-gray-500);
9973
+ --bs-alert-border-color: var(--bs-gray-500);
9974
+ }
9913
9975
 
9914
9976
  .collapse-container {
9915
9977
  --bs-collapse-bg: var(--bs-white);
@@ -9969,10 +10031,10 @@ body {
9969
10031
  min-width: var(--bs-pagination-page-item-size);
9970
10032
  min-height: var(--bs-pagination-page-item-size);
9971
10033
  }
9972
- .pagination :is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
10034
+ .pagination .page-item-arrow:is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
9973
10035
  color: var(--bs-pagination-page-control-color);
9974
10036
  }
9975
- .pagination :is(.page-item:first-child, .page-item:last-child).disabled .page-link {
10037
+ .pagination .page-item-arrow:is(.page-item:first-child, .page-item:last-child).disabled .page-link {
9976
10038
  color: var(--bs-pagination-page-control-disabled-color);
9977
10039
  }
9978
10040
  .pagination .page-link {
@@ -10024,63 +10086,6 @@ label .d-icon {
10024
10086
  --bs-icon-color: var(--bs-focus-ring-color);
10025
10087
  }
10026
10088
 
10027
- .avatar {
10028
- --bs-avatar-size: var(--bs-ref-spacer-8);
10029
- --bs-avatar-title-bg: var(--bs-gray-500);
10030
- --bs-avatar-title-color: var(--bs-white);
10031
- --bs-avatar-radius: var(--bs-border-radius-pill);
10032
- position: relative;
10033
- display: inline-block;
10034
- width: var(--bs-avatar-size);
10035
- height: var(--bs-avatar-size);
10036
- font-size: calc(var(--bs-avatar-size) / 3);
10037
- }
10038
- .avatar .avatar-img {
10039
- width: 100%;
10040
- height: 100%;
10041
- -o-object-fit: cover;
10042
- object-fit: cover;
10043
- border-radius: var(--bs-avatar-radius);
10044
- }
10045
- .avatar .avatar-title {
10046
- display: flex;
10047
- align-items: center;
10048
- justify-content: center;
10049
- width: 100%;
10050
- height: 100%;
10051
- color: var(--bs-avatar-title-color);
10052
- white-space: pre-wrap;
10053
- background-color: var(--bs-avatar-title-bg);
10054
- border-radius: var(--bs-avatar-radius);
10055
- }
10056
-
10057
- .avatar-xs {
10058
- --bs-avatar-size: var(--bs-ref-spacer-4);
10059
- }
10060
-
10061
- .avatar-sm {
10062
- --bs-avatar-size: var(--bs-ref-spacer-6);
10063
- }
10064
-
10065
- .avatar-lg {
10066
- --bs-avatar-size: var(--bs-ref-spacer-10);
10067
- }
10068
-
10069
- .avatar-xl {
10070
- --bs-avatar-size: var(--bs-ref-spacer-12);
10071
- }
10072
-
10073
- .avatar-xxl {
10074
- --bs-avatar-size: var(--bs-ref-spacer-14);
10075
- }
10076
-
10077
- .avatar-group .avatar-img {
10078
- box-shadow: -2px 0 2px rgba(0, 0, 0, 0.1);
10079
- }
10080
- .avatar-group .avatar + .avatar {
10081
- margin-left: calc(var(--bs-avatar-size) * -0.25);
10082
- }
10083
-
10084
10089
  .backdrop {
10085
10090
  --bs-backdrop-zindex: 1055;
10086
10091
  --bs-backdrop-bg: var(--bs-black);
@@ -10286,6 +10291,205 @@ label .d-icon {
10286
10291
  --bs-tooltip-bg: var(--bs-dark);
10287
10292
  }
10288
10293
 
10294
+ .placeholder {
10295
+ background-color: var(--bs-default-placeholder-bg, currentcolor);
10296
+ }
10297
+
10298
+ .nav-pills,
10299
+ .nav-tabs,
10300
+ .nav-underline {
10301
+ --bs-nav-tabs-border-color: var(--bs-gray-300);
10302
+ --bs-nav-tabs-nav-gap: var(--bs-ref-spacer-0);
10303
+ --bs-nav-link-padding-x: 1rem;
10304
+ --bs-nav-link-padding-y: 0.5rem;
10305
+ --bs-nav-tabs-link-border-active-font-weight: var(--bs-fw-bold);
10306
+ --bs-nav-link-hover-bg: var(--bs-surface-primary);
10307
+ --bs-nav-link-hover-color: var(--bs-primary-600);
10308
+ }
10309
+ .nav-pills .nav-link:hover,
10310
+ .nav-tabs .nav-link:hover,
10311
+ .nav-underline .nav-link:hover {
10312
+ background-color: var(--bs-nav-link-hover-bg);
10313
+ }
10314
+
10315
+ .nav-pills,
10316
+ .nav-underline {
10317
+ gap: var(--bs-nav-tabs-nav-gap);
10318
+ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
10319
+ }
10320
+ .nav-pills.flex-column,
10321
+ .nav-underline.flex-column {
10322
+ flex: 1 0 auto;
10323
+ }
10324
+ .nav-pills.flex-column .nav-link,
10325
+ .nav-underline.flex-column .nav-link {
10326
+ width: 100%;
10327
+ }
10328
+
10329
+ .nav-pills .nav-link.active:hover {
10330
+ color: var(--bs-nav-link-hover-color);
10331
+ }
10332
+
10333
+ .nav-underline.flex-column .nav-link {
10334
+ border-right: 1px solid var(--bs-nav-tabs-border-color);
10335
+ border-bottom-color: transparent;
10336
+ }
10337
+ .nav-underline.flex-column .nav-link.active {
10338
+ background-color: var(--bs-nav-link-hover-bg);
10339
+ border-right: 1px solid currentcolor;
10340
+ }
10341
+ .nav-underline .nav-link {
10342
+ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
10343
+ border-bottom: 1px solid var(--bs-gray-300);
10344
+ }
10345
+
10346
+ .nav-tabs .nav-link.active {
10347
+ border-bottom-color: transparent;
10348
+ }
10349
+ .nav-tabs .nav-link:not(.active):is(:hover, :focus) {
10350
+ border-color: transparent;
10351
+ }
10352
+
10353
+ .nav-link:focus-visible {
10354
+ --bs-focus-ring-opacity: .25;
10355
+ --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
10356
+ }
10357
+
10358
+ .d-avatar {
10359
+ --bs-avatar-border: 1px solid var(--bs-avatar-bg);
10360
+ --bs-avatar-size: var(--bs-ref-spacer-12);
10361
+ --bs-avatar-bg: var(--bs-secondary-100);
10362
+ --bs-avatar-color: var(--bs-secondary-500);
10363
+ --bs-avatar-font-weight: var(--bs-fw-bold);
10364
+ --bs-avatar-border-radius: var(--bs-border-radius-pill);
10365
+ position: relative;
10366
+ display: inline-block;
10367
+ width: var(--bs-avatar-size);
10368
+ height: var(--bs-avatar-size);
10369
+ font-size: calc(var(--bs-avatar-size) / 3);
10370
+ border: var(--bs-avatar-border);
10371
+ border-radius: var(--bs-avatar-border-radius);
10372
+ }
10373
+ .d-avatar .d-avatar-img {
10374
+ width: 100%;
10375
+ height: 100%;
10376
+ -o-object-fit: cover;
10377
+ object-fit: cover;
10378
+ border-radius: var(--bs-avatar-border-radius);
10379
+ }
10380
+ .d-avatar .d-avatar-name {
10381
+ display: flex;
10382
+ align-items: center;
10383
+ justify-content: center;
10384
+ width: 100%;
10385
+ height: 100%;
10386
+ font-weight: var(--bs-avatar-font-weight);
10387
+ color: var(--bs-avatar-color);
10388
+ white-space: pre-wrap;
10389
+ background-color: var(--bs-avatar-bg);
10390
+ border-radius: var(--bs-avatar-border-radius);
10391
+ }
10392
+ .d-avatar.d-avatar-primary {
10393
+ --bs-avatar-color: var(--bs-primary-500);
10394
+ --bs-avatar-bg: var(--bs-primary-100);
10395
+ }
10396
+ .d-avatar.d-avatar-dark-primary {
10397
+ --bs-avatar-color: var(--bs-white);
10398
+ --bs-avatar-bg: var(--bs-primary-500);
10399
+ }
10400
+ .d-avatar.d-avatar-light-primary {
10401
+ --bs-avatar-color: var(--bs-primary-500);
10402
+ --bs-avatar-bg: var(--bs-white);
10403
+ }
10404
+ .d-avatar.d-avatar-secondary {
10405
+ --bs-avatar-color: var(--bs-secondary-500);
10406
+ --bs-avatar-bg: var(--bs-secondary-100);
10407
+ }
10408
+ .d-avatar.d-avatar-dark-secondary {
10409
+ --bs-avatar-color: var(--bs-white);
10410
+ --bs-avatar-bg: var(--bs-secondary-500);
10411
+ }
10412
+ .d-avatar.d-avatar-light-secondary {
10413
+ --bs-avatar-color: var(--bs-secondary-500);
10414
+ --bs-avatar-bg: var(--bs-white);
10415
+ }
10416
+ .d-avatar.d-avatar-success {
10417
+ --bs-avatar-color: var(--bs-success-500);
10418
+ --bs-avatar-bg: var(--bs-success-100);
10419
+ }
10420
+ .d-avatar.d-avatar-dark-success {
10421
+ --bs-avatar-color: var(--bs-white);
10422
+ --bs-avatar-bg: var(--bs-success-500);
10423
+ }
10424
+ .d-avatar.d-avatar-light-success {
10425
+ --bs-avatar-color: var(--bs-success-500);
10426
+ --bs-avatar-bg: var(--bs-white);
10427
+ }
10428
+ .d-avatar.d-avatar-info {
10429
+ --bs-avatar-color: var(--bs-info-500);
10430
+ --bs-avatar-bg: var(--bs-info-100);
10431
+ }
10432
+ .d-avatar.d-avatar-dark-info {
10433
+ --bs-avatar-color: var(--bs-white);
10434
+ --bs-avatar-bg: var(--bs-info-500);
10435
+ }
10436
+ .d-avatar.d-avatar-light-info {
10437
+ --bs-avatar-color: var(--bs-info-500);
10438
+ --bs-avatar-bg: var(--bs-white);
10439
+ }
10440
+ .d-avatar.d-avatar-warning {
10441
+ --bs-avatar-color: var(--bs-warning-500);
10442
+ --bs-avatar-bg: var(--bs-warning-100);
10443
+ }
10444
+ .d-avatar.d-avatar-dark-warning {
10445
+ --bs-avatar-color: var(--bs-white);
10446
+ --bs-avatar-bg: var(--bs-warning-500);
10447
+ }
10448
+ .d-avatar.d-avatar-light-warning {
10449
+ --bs-avatar-color: var(--bs-warning-500);
10450
+ --bs-avatar-bg: var(--bs-white);
10451
+ }
10452
+ .d-avatar.d-avatar-danger {
10453
+ --bs-avatar-color: var(--bs-danger-500);
10454
+ --bs-avatar-bg: var(--bs-danger-100);
10455
+ }
10456
+ .d-avatar.d-avatar-dark-danger {
10457
+ --bs-avatar-color: var(--bs-white);
10458
+ --bs-avatar-bg: var(--bs-danger-500);
10459
+ }
10460
+ .d-avatar.d-avatar-light-danger {
10461
+ --bs-avatar-color: var(--bs-danger-500);
10462
+ --bs-avatar-bg: var(--bs-white);
10463
+ }
10464
+
10465
+ .d-avatar-xs {
10466
+ --bs-avatar-size: var(--bs-ref-spacer-8);
10467
+ }
10468
+
10469
+ .d-avatar-sm {
10470
+ --bs-avatar-size: var(--bs-ref-spacer-10);
10471
+ }
10472
+
10473
+ .d-avatar-lg {
10474
+ --bs-avatar-size: var(--bs-ref-spacer-14);
10475
+ }
10476
+
10477
+ .d-avatar-xl {
10478
+ --bs-avatar-size: var(--bs-ref-spacer-16);
10479
+ }
10480
+
10481
+ .d-avatar-xxl {
10482
+ --bs-avatar-size: var(--bs-ref-spacer-18);
10483
+ }
10484
+
10485
+ .d-avatar-group .d-avatar-img,
10486
+ .d-avatar-group .d-avatar-name {
10487
+ box-shadow: -2px 0 2px rgba(0, 0, 0, 0.1);
10488
+ }
10489
+ .d-avatar-group .d-avatar + .d-avatar {
10490
+ margin-left: calc(var(--bs-avatar-size) * -0.25);
10491
+ }
10492
+
10289
10493
  .d-icon {
10290
10494
  --bs-icon-color: var(--bs-icon-component-color, inherit);
10291
10495
  --bs-icon-bg-color: var(--bs-icon-component-bg-color, inherit);
@@ -10353,26 +10557,38 @@ label .d-icon {
10353
10557
  .d-input-pin:focus-within:has(.form-control:hover) .form-control:not(.is-invalid, .is-valid) {
10354
10558
  border-color: var(--bs-input-pin-form-control-focus-border-color);
10355
10559
  }
10560
+ .d-input-pin:has(.form-control.is-valid) {
10561
+ padding-right: calc(1.5em + 1.5rem);
10562
+ background-image: var(--bs-form-feedback-icon-valid);
10563
+ background-repeat: no-repeat;
10564
+ background-position: right calc(0.375em + 0.375rem) center;
10565
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
10566
+ }
10356
10567
  .d-input-pin:has(.form-control.is-valid) .form-control {
10568
+ padding: 0.75rem 1rem;
10569
+ background: var(--bs-white);
10357
10570
  border-color: var(--bs-success);
10358
10571
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
10359
10572
  }
10360
10573
  .d-input-pin:has(.form-control.is-valid) .form-text {
10361
10574
  color: var(--bs-form-valid-border-color);
10362
10575
  }
10363
- .d-input-pin:has(.form-control.is-valid) .input-group-validation-icon {
10364
- --bs-icon-color: var(--bs-success);
10576
+ .d-input-pin:has(.form-control.is-invalid) {
10577
+ padding-right: calc(1.5em + 1.5rem);
10578
+ background-image: var(--bs-form-feedback-icon-invalid);
10579
+ background-repeat: no-repeat;
10580
+ background-position: right calc(0.375em + 0.375rem) center;
10581
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
10365
10582
  }
10366
10583
  .d-input-pin:has(.form-control.is-invalid) .form-control {
10584
+ padding: 0.75rem 1rem;
10585
+ background: var(--bs-white);
10367
10586
  border-color: var(--bs-danger);
10368
10587
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
10369
10588
  }
10370
10589
  .d-input-pin:has(.form-control.is-invalid) .form-text {
10371
10590
  color: var(--bs-form-invalid-border-color);
10372
10591
  }
10373
- .d-input-pin:has(.form-control.is-invalid) .input-group-validation-icon {
10374
- --bs-icon-color: var(--bs-danger);
10375
- }
10376
10592
  .d-input-pin .input-group-text {
10377
10593
  padding-left: var(--bs-input-pin-form-gap);
10378
10594
  background-color: transparent;
@@ -11894,46 +12110,6 @@ label .d-icon {
11894
12110
  background-image: var(--bs-datepicker-calendar-picker-icon);
11895
12111
  }
11896
12112
 
11897
- .nav-pills,
11898
- .nav-tabs,
11899
- .nav-underline {
11900
- --bs-nav-tabs-nav-gap: var(--bs-ref-spacer-6);
11901
- --bs-nav-tabs-nav-padding-x: var(--bs-ref-spacer-6);
11902
- --bs-nav-tabs-nav-padding-y: var(--bs-ref-spacer-4);
11903
- --bs-nav-tabs-link-border-active-font-weight: var(--bs-fw-bold);
11904
- }
11905
-
11906
- .nav-pills,
11907
- .nav-underline {
11908
- gap: var(--bs-nav-tabs-nav-gap);
11909
- padding: var(--bs-nav-tabs-nav-padding-y) var(--bs-nav-tabs-nav-padding-x);
11910
- }
11911
- .nav-pills.flex-column,
11912
- .nav-underline.flex-column {
11913
- flex: 1 0 auto;
11914
- }
11915
- .nav-pills.flex-column .nav-link,
11916
- .nav-underline.flex-column .nav-link {
11917
- width: 100%;
11918
- }
11919
-
11920
- .nav-tabs .nav-link.active {
11921
- font-weight: var(--bs-nav-tabs-link-border-active-font-weight);
11922
- border-bottom-color: transparent;
11923
- }
11924
- .nav-tabs .nav-link:not(.active):is(:hover, :focus) {
11925
- border-color: transparent;
11926
- }
11927
-
11928
- .nav-underline .nav-link:not(.active):hover {
11929
- border-bottom-color: transparent;
11930
- }
11931
-
11932
- .nav-link:focus-visible {
11933
- --bs-focus-ring-opacity: .25;
11934
- --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
11935
- }
11936
-
11937
12113
  .d-close {
11938
12114
  display: flex;
11939
12115
  padding: 0;
@@ -12672,24 +12848,36 @@ label .d-icon {
12672
12848
  }
12673
12849
  .d-select .input-group:has(.d-select-component.is-valid) {
12674
12850
  border-color: var(--bs-form-valid-border-color);
12851
+ }
12852
+ .d-select .input-group:has(.d-select-component.is-valid) .d-select__value-container {
12853
+ padding-right: calc(1.5em + 1.5rem);
12854
+ background-image: var(--bs-form-feedback-icon-valid);
12855
+ background-repeat: no-repeat;
12856
+ background-position: right calc(0.375em + 0.375rem) center;
12857
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
12858
+ }
12859
+ .d-select .input-group:has(.d-select-component.is-valid):focus-within {
12675
12860
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
12676
12861
  }
12677
12862
  .d-select .input-group:has(.d-select-component.is-valid) ~ .form-text {
12678
12863
  color: var(--bs-form-valid-border-color);
12679
12864
  }
12680
- .d-select .input-group:has(.d-select-component.is-valid) .input-group-validation-icon {
12681
- --bs-icon-color: var(--bs-success);
12682
- }
12683
12865
  .d-select .input-group:has(.d-select-component.is-invalid) {
12684
12866
  border-color: var(--bs-form-invalid-border-color);
12867
+ }
12868
+ .d-select .input-group:has(.d-select-component.is-invalid) .d-select__value-container {
12869
+ padding-right: calc(1.5em + 1.5rem);
12870
+ background-image: var(--bs-form-feedback-icon-invalid);
12871
+ background-repeat: no-repeat;
12872
+ background-position: right calc(0.375em + 0.375rem) center;
12873
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
12874
+ }
12875
+ .d-select .input-group:has(.d-select-component.is-invalid):focus-within {
12685
12876
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
12686
12877
  }
12687
12878
  .d-select .input-group:has(.d-select-component.is-invalid) ~ .form-text {
12688
12879
  color: var(--bs-form-invalid-border-color);
12689
12880
  }
12690
- .d-select .input-group:has(.d-select-component.is-invalid) .input-group-validation-icon {
12691
- --bs-icon-color: var(--bs-danger);
12692
- }
12693
12881
  .d-select .d-select__control {
12694
12882
  width: 100%;
12695
12883
  padding: 0.75rem 1rem;