@dynamic-framework/ui-react 1.31.0 → 1.32.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 (61) hide show
  1. package/dist/css/dynamic-ui-non-root.css +309 -126
  2. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  3. package/dist/css/dynamic-ui-root.css +4 -1
  4. package/dist/css/dynamic-ui-root.min.css +2 -2
  5. package/dist/css/dynamic-ui.css +312 -126
  6. package/dist/css/dynamic-ui.min.css +2 -2
  7. package/dist/index.esm.js +191 -43
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +195 -43
  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/_forms.scss +3 -2
  45. package/src/style/abstracts/variables/_list-group.scss +3 -3
  46. package/src/style/abstracts/variables/_navs.scss +14 -17
  47. package/src/style/abstracts/variables/_options.scss +1 -1
  48. package/src/style/base/_+import.scss +2 -1
  49. package/src/style/base/_alert.scss +20 -0
  50. package/src/style/base/_input-group.scss +4 -1
  51. package/src/style/base/_nav.scss +72 -0
  52. package/src/style/base/_pagination.scss +7 -5
  53. package/src/style/base/_placeholder.scss +3 -0
  54. package/src/style/components/_+import.scss +1 -1
  55. package/src/style/components/_d-avatar.scss +85 -0
  56. package/src/style/components/_d-input-pin.scss +11 -5
  57. package/src/style/components/_d-select.scss +15 -6
  58. package/src/style/root/_root.scss +7 -0
  59. package/src/style/base/_avatar.scss +0 -61
  60. package/src/style/components/_d-tabs.scss +0 -44
  61. /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.0
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
  */
@@ -4246,20 +4246,40 @@ textarea.form-control-lg {
4246
4246
 
4247
4247
  .was-validated .form-control:valid, .form-control.is-valid {
4248
4248
  border-color: var(--bs-form-valid-border-color);
4249
+ padding-right: calc(1.5em + 1.5rem);
4250
+ background-image: var(--bs-form-feedback-icon-valid);
4251
+ background-repeat: no-repeat;
4252
+ background-position: right calc(0.375em + 0.375rem) center;
4253
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4249
4254
  }
4250
4255
  .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
4251
4256
  border-color: var(--bs-form-valid-border-color);
4252
4257
  box-shadow: 0 0 0 transparent, 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
4253
4258
  }
4254
4259
 
4260
+ .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
4261
+ padding-right: calc(1.5em + 1.5rem);
4262
+ background-position: top calc(0.375em + 0.375rem) right calc(0.375em + 0.375rem);
4263
+ }
4264
+
4255
4265
  .was-validated .form-select:valid, .form-select.is-valid {
4256
4266
  border-color: var(--bs-form-valid-border-color);
4257
4267
  }
4268
+ .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"] {
4269
+ --bs-form-select-bg-icon: var(--bs-form-feedback-icon-valid);
4270
+ padding-right: 5.5rem;
4271
+ background-position: right 1rem center, center right 3rem;
4272
+ background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4273
+ }
4258
4274
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
4259
4275
  border-color: var(--bs-form-valid-border-color);
4260
4276
  box-shadow: none, 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
4261
4277
  }
4262
4278
 
4279
+ .was-validated .form-control-color:valid, .form-control-color.is-valid {
4280
+ width: calc(3rem + calc(1.5em + 1.5rem));
4281
+ }
4282
+
4263
4283
  .was-validated .form-check-input:valid, .form-check-input.is-valid {
4264
4284
  border-color: var(--bs-form-valid-border-color);
4265
4285
  }
@@ -4316,20 +4336,40 @@ textarea.form-control-lg {
4316
4336
 
4317
4337
  .was-validated .form-control:invalid, .form-control.is-invalid {
4318
4338
  border-color: var(--bs-form-invalid-border-color);
4339
+ padding-right: calc(1.5em + 1.5rem);
4340
+ background-image: var(--bs-form-feedback-icon-invalid);
4341
+ background-repeat: no-repeat;
4342
+ background-position: right calc(0.375em + 0.375rem) center;
4343
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4319
4344
  }
4320
4345
  .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
4321
4346
  border-color: var(--bs-form-invalid-border-color);
4322
4347
  box-shadow: 0 0 0 transparent, 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
4323
4348
  }
4324
4349
 
4350
+ .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
4351
+ padding-right: calc(1.5em + 1.5rem);
4352
+ background-position: top calc(0.375em + 0.375rem) right calc(0.375em + 0.375rem);
4353
+ }
4354
+
4325
4355
  .was-validated .form-select:invalid, .form-select.is-invalid {
4326
4356
  border-color: var(--bs-form-invalid-border-color);
4327
4357
  }
4358
+ .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"] {
4359
+ --bs-form-select-bg-icon: var(--bs-form-feedback-icon-invalid);
4360
+ padding-right: 5.5rem;
4361
+ background-position: right 1rem center, center right 3rem;
4362
+ background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4363
+ }
4328
4364
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
4329
4365
  border-color: var(--bs-form-invalid-border-color);
4330
4366
  box-shadow: none, 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
4331
4367
  }
4332
4368
 
4369
+ .was-validated .form-control-color:invalid, .form-control-color.is-invalid {
4370
+ width: calc(3rem + calc(1.5em + 1.5rem));
4371
+ }
4372
+
4333
4373
  .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
4334
4374
  border-color: var(--bs-form-invalid-border-color);
4335
4375
  }
@@ -4785,9 +4825,9 @@ textarea.form-control-lg {
4785
4825
  --bs-nav-link-padding-y: 0.5rem;
4786
4826
  --bs-nav-link-font-size: var(--bs-body-font-size);
4787
4827
  --bs-nav-link-font-weight: var(--bs-fw-normal);
4788
- --bs-nav-link-color: var(--bs-gray-500);
4789
- --bs-nav-link-hover-color: var(--bs-secondary-600);
4790
- --bs-nav-link-disabled-color: var(--bs-gray-200);
4828
+ --bs-nav-link-color: var(--bs-gray-900);
4829
+ --bs-nav-link-hover-color: var(--bs-primary-600);
4830
+ --bs-nav-link-disabled-color: var(--bs-gray-300);
4791
4831
  display: flex;
4792
4832
  flex-wrap: wrap;
4793
4833
  padding-left: 0;
@@ -4826,12 +4866,12 @@ textarea.form-control-lg {
4826
4866
 
4827
4867
  .nav-tabs {
4828
4868
  --bs-nav-tabs-border-width: var(--bs-border-width);
4829
- --bs-nav-tabs-border-color: var(--bs-border-color);
4869
+ --bs-nav-tabs-border-color: var(--bs-gray-300);
4830
4870
  --bs-nav-tabs-border-radius: var(--bs-border-radius-sm);
4831
- --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
4832
- --bs-nav-tabs-link-active-color: var(--bs-secondary);
4833
- --bs-nav-tabs-link-active-bg: var(--bs-secondary-100);
4834
- --bs-nav-tabs-link-active-border-color: var(--bs-secondary);
4871
+ --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-gray-300);
4872
+ --bs-nav-tabs-link-active-color: var(--bs-primary);
4873
+ --bs-nav-tabs-link-active-bg: var(--bs-white);
4874
+ --bs-nav-tabs-link-active-border-color: var(--bs-gray-300);
4835
4875
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
4836
4876
  }
4837
4877
  .nav-tabs .nav-link {
@@ -4857,9 +4897,9 @@ textarea.form-control-lg {
4857
4897
  }
4858
4898
 
4859
4899
  .nav-pills {
4860
- --bs-nav-pills-border-radius: 100px;
4900
+ --bs-nav-pills-border-radius: var(--bs-border-radius-sm);
4861
4901
  --bs-nav-pills-link-active-color: var(--bs-white);
4862
- --bs-nav-pills-link-active-bg: var(--bs-secondary);
4902
+ --bs-nav-pills-link-active-bg: var(--bs-primary);
4863
4903
  }
4864
4904
  .nav-pills .nav-link {
4865
4905
  border-radius: var(--bs-nav-pills-border-radius);
@@ -4873,7 +4913,7 @@ textarea.form-control-lg {
4873
4913
  .nav-underline {
4874
4914
  --bs-nav-underline-gap: 1rem;
4875
4915
  --bs-nav-underline-border-width: 0.125rem;
4876
- --bs-nav-underline-link-active-color: var(--bs-secondary);
4916
+ --bs-nav-underline-link-active-color: var(--bs-primary);
4877
4917
  gap: var(--bs-nav-underline-gap);
4878
4918
  }
4879
4919
  .nav-underline .nav-link {
@@ -5962,11 +6002,11 @@ textarea.form-control-lg {
5962
6002
  --bs-list-group-border-radius: var(--bs-border-radius-sm);
5963
6003
  --bs-list-group-item-padding-x: var(--bs-ref-spacer-4);
5964
6004
  --bs-list-group-item-padding-y: var(--bs-ref-spacer-3);
5965
- --bs-list-group-action-color: var(--bs-gray-700);
5966
- --bs-list-group-action-hover-color: var(--bs-gray-700);
5967
- --bs-list-group-action-hover-bg: var(--bs-gray-100);
6005
+ --bs-list-group-action-color: var(--bs-gray-900);
6006
+ --bs-list-group-action-hover-color: var(--bs-gray-900);
6007
+ --bs-list-group-action-hover-bg: var(--bs-surface-primary);
5968
6008
  --bs-list-group-action-active-color: var(--bs-body-color);
5969
- --bs-list-group-action-active-bg: var(--bs-gray-200);
6009
+ --bs-list-group-action-active-bg: var(--bs-primary-100);
5970
6010
  --bs-list-group-disabled-color: var(--bs-gray-600);
5971
6011
  --bs-list-group-disabled-bg: transparent;
5972
6012
  --bs-list-group-active-color: var(--bs-white);
@@ -8065,6 +8105,8 @@ body {
8065
8105
  }
8066
8106
  .input-group:has(.form-control.is-valid, .form-select.is-valid) {
8067
8107
  border-color: var(--bs-form-valid-border-color);
8108
+ }
8109
+ .input-group:has(.form-control.is-valid, .form-select.is-valid):focus-within {
8068
8110
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
8069
8111
  }
8070
8112
  .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
@@ -8075,6 +8117,8 @@ body {
8075
8117
  }
8076
8118
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) {
8077
8119
  border-color: var(--bs-form-invalid-border-color);
8120
+ }
8121
+ .input-group:has(.form-control.is-invalid, .form-select.is-invalid):focus-within {
8078
8122
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
8079
8123
  }
8080
8124
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
@@ -8931,6 +8975,9 @@ body {
8931
8975
  --bs-icon-size: var(--bs-alert-icon-size);
8932
8976
  --bs-icon-color: var(--bs-alert-icon-color);
8933
8977
  }
8978
+ .alert .alert-icon:not(.d-icon) {
8979
+ color: var(--bs-icon-color);
8980
+ }
8934
8981
  .alert.alert-primary {
8935
8982
  --bs-alert-icon-color: var(--bs-primary-500);
8936
8983
  --bs-alert-color: var(--bs-body-color);
@@ -8967,6 +9014,18 @@ body {
8967
9014
  --bs-alert-bg: var(--bs-surface-danger);
8968
9015
  --bs-alert-border-color: var(--bs-surface-danger);
8969
9016
  }
9017
+ .alert.alert-light {
9018
+ --bs-alert-icon-color: var(--bs-gray-500);
9019
+ --bs-alert-color: var(--bs-body-color);
9020
+ --bs-alert-bg: var(--bs-surface-gray);
9021
+ --bs-alert-border-color: var(--bs-surface-gray);
9022
+ }
9023
+ .alert.alert-dark {
9024
+ --bs-alert-icon-color: var(--bs-light);
9025
+ --bs-alert-color: var(--bs-white);
9026
+ --bs-alert-bg: var(--bs-gray-500);
9027
+ --bs-alert-border-color: var(--bs-gray-500);
9028
+ }
8970
9029
 
8971
9030
  .collapse-container {
8972
9031
  --bs-collapse-bg: var(--bs-white);
@@ -9026,10 +9085,10 @@ body {
9026
9085
  min-width: var(--bs-pagination-page-item-size);
9027
9086
  min-height: var(--bs-pagination-page-item-size);
9028
9087
  }
9029
- .pagination :is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
9088
+ .pagination .page-item-arrow:is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
9030
9089
  color: var(--bs-pagination-page-control-color);
9031
9090
  }
9032
- .pagination :is(.page-item:first-child, .page-item:last-child).disabled .page-link {
9091
+ .pagination .page-item-arrow:is(.page-item:first-child, .page-item:last-child).disabled .page-link {
9033
9092
  color: var(--bs-pagination-page-control-disabled-color);
9034
9093
  }
9035
9094
  .pagination .page-link {
@@ -9081,63 +9140,6 @@ label .d-icon {
9081
9140
  --bs-icon-color: var(--bs-focus-ring-color);
9082
9141
  }
9083
9142
 
9084
- .avatar {
9085
- --bs-avatar-size: var(--bs-ref-spacer-8);
9086
- --bs-avatar-title-bg: var(--bs-gray-500);
9087
- --bs-avatar-title-color: var(--bs-white);
9088
- --bs-avatar-radius: var(--bs-border-radius-pill);
9089
- position: relative;
9090
- display: inline-block;
9091
- width: var(--bs-avatar-size);
9092
- height: var(--bs-avatar-size);
9093
- font-size: calc(var(--bs-avatar-size) / 3);
9094
- }
9095
- .avatar .avatar-img {
9096
- width: 100%;
9097
- height: 100%;
9098
- -o-object-fit: cover;
9099
- object-fit: cover;
9100
- border-radius: var(--bs-avatar-radius);
9101
- }
9102
- .avatar .avatar-title {
9103
- display: flex;
9104
- align-items: center;
9105
- justify-content: center;
9106
- width: 100%;
9107
- height: 100%;
9108
- color: var(--bs-avatar-title-color);
9109
- white-space: pre-wrap;
9110
- background-color: var(--bs-avatar-title-bg);
9111
- border-radius: var(--bs-avatar-radius);
9112
- }
9113
-
9114
- .avatar-xs {
9115
- --bs-avatar-size: var(--bs-ref-spacer-4);
9116
- }
9117
-
9118
- .avatar-sm {
9119
- --bs-avatar-size: var(--bs-ref-spacer-6);
9120
- }
9121
-
9122
- .avatar-lg {
9123
- --bs-avatar-size: var(--bs-ref-spacer-10);
9124
- }
9125
-
9126
- .avatar-xl {
9127
- --bs-avatar-size: var(--bs-ref-spacer-12);
9128
- }
9129
-
9130
- .avatar-xxl {
9131
- --bs-avatar-size: var(--bs-ref-spacer-14);
9132
- }
9133
-
9134
- .avatar-group .avatar-img {
9135
- box-shadow: -2px 0 2px rgba(0, 0, 0, 0.1);
9136
- }
9137
- .avatar-group .avatar + .avatar {
9138
- margin-left: calc(var(--bs-avatar-size) * -0.25);
9139
- }
9140
-
9141
9143
  .backdrop {
9142
9144
  --bs-backdrop-zindex: 1055;
9143
9145
  --bs-backdrop-bg: var(--bs-black);
@@ -9343,6 +9345,205 @@ label .d-icon {
9343
9345
  --bs-tooltip-bg: var(--bs-dark);
9344
9346
  }
9345
9347
 
9348
+ .placeholder {
9349
+ background-color: var(--bs-default-placeholder-bg, currentcolor);
9350
+ }
9351
+
9352
+ .nav-pills,
9353
+ .nav-tabs,
9354
+ .nav-underline {
9355
+ --bs-nav-tabs-border-color: var(--bs-gray-300);
9356
+ --bs-nav-tabs-nav-gap: var(--bs-ref-spacer-0);
9357
+ --bs-nav-link-padding-x: 1rem;
9358
+ --bs-nav-link-padding-y: 0.5rem;
9359
+ --bs-nav-tabs-link-border-active-font-weight: var(--bs-fw-bold);
9360
+ --bs-nav-link-hover-bg: var(--bs-surface-primary);
9361
+ --bs-nav-link-hover-color: var(--bs-primary-600);
9362
+ }
9363
+ .nav-pills .nav-link:hover,
9364
+ .nav-tabs .nav-link:hover,
9365
+ .nav-underline .nav-link:hover {
9366
+ background-color: var(--bs-nav-link-hover-bg);
9367
+ }
9368
+
9369
+ .nav-pills,
9370
+ .nav-underline {
9371
+ gap: var(--bs-nav-tabs-nav-gap);
9372
+ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
9373
+ }
9374
+ .nav-pills.flex-column,
9375
+ .nav-underline.flex-column {
9376
+ flex: 1 0 auto;
9377
+ }
9378
+ .nav-pills.flex-column .nav-link,
9379
+ .nav-underline.flex-column .nav-link {
9380
+ width: 100%;
9381
+ }
9382
+
9383
+ .nav-pills .nav-link.active:hover {
9384
+ color: var(--bs-nav-link-hover-color);
9385
+ }
9386
+
9387
+ .nav-underline.flex-column .nav-link {
9388
+ border-right: 1px solid var(--bs-nav-tabs-border-color);
9389
+ border-bottom-color: transparent;
9390
+ }
9391
+ .nav-underline.flex-column .nav-link.active {
9392
+ background-color: var(--bs-nav-link-hover-bg);
9393
+ border-right: 1px solid currentcolor;
9394
+ }
9395
+ .nav-underline .nav-link {
9396
+ padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
9397
+ border-bottom: 1px solid var(--bs-gray-300);
9398
+ }
9399
+
9400
+ .nav-tabs .nav-link.active {
9401
+ border-bottom-color: transparent;
9402
+ }
9403
+ .nav-tabs .nav-link:not(.active):is(:hover, :focus) {
9404
+ border-color: transparent;
9405
+ }
9406
+
9407
+ .nav-link:focus-visible {
9408
+ --bs-focus-ring-opacity: .25;
9409
+ --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
9410
+ }
9411
+
9412
+ .d-avatar {
9413
+ --bs-avatar-border: 1px solid var(--bs-avatar-bg);
9414
+ --bs-avatar-size: var(--bs-ref-spacer-12);
9415
+ --bs-avatar-bg: var(--bs-secondary-100);
9416
+ --bs-avatar-color: var(--bs-secondary-500);
9417
+ --bs-avatar-font-weight: var(--bs-fw-bold);
9418
+ --bs-avatar-border-radius: var(--bs-border-radius-pill);
9419
+ position: relative;
9420
+ display: inline-block;
9421
+ width: var(--bs-avatar-size);
9422
+ height: var(--bs-avatar-size);
9423
+ font-size: calc(var(--bs-avatar-size) / 3);
9424
+ border: var(--bs-avatar-border);
9425
+ border-radius: var(--bs-avatar-border-radius);
9426
+ }
9427
+ .d-avatar .d-avatar-img {
9428
+ width: 100%;
9429
+ height: 100%;
9430
+ -o-object-fit: cover;
9431
+ object-fit: cover;
9432
+ border-radius: var(--bs-avatar-border-radius);
9433
+ }
9434
+ .d-avatar .d-avatar-name {
9435
+ display: flex;
9436
+ align-items: center;
9437
+ justify-content: center;
9438
+ width: 100%;
9439
+ height: 100%;
9440
+ font-weight: var(--bs-avatar-font-weight);
9441
+ color: var(--bs-avatar-color);
9442
+ white-space: pre-wrap;
9443
+ background-color: var(--bs-avatar-bg);
9444
+ border-radius: var(--bs-avatar-border-radius);
9445
+ }
9446
+ .d-avatar.d-avatar-primary {
9447
+ --bs-avatar-color: var(--bs-primary-500);
9448
+ --bs-avatar-bg: var(--bs-primary-100);
9449
+ }
9450
+ .d-avatar.d-avatar-dark-primary {
9451
+ --bs-avatar-color: var(--bs-white);
9452
+ --bs-avatar-bg: var(--bs-primary-500);
9453
+ }
9454
+ .d-avatar.d-avatar-light-primary {
9455
+ --bs-avatar-color: var(--bs-primary-500);
9456
+ --bs-avatar-bg: var(--bs-white);
9457
+ }
9458
+ .d-avatar.d-avatar-secondary {
9459
+ --bs-avatar-color: var(--bs-secondary-500);
9460
+ --bs-avatar-bg: var(--bs-secondary-100);
9461
+ }
9462
+ .d-avatar.d-avatar-dark-secondary {
9463
+ --bs-avatar-color: var(--bs-white);
9464
+ --bs-avatar-bg: var(--bs-secondary-500);
9465
+ }
9466
+ .d-avatar.d-avatar-light-secondary {
9467
+ --bs-avatar-color: var(--bs-secondary-500);
9468
+ --bs-avatar-bg: var(--bs-white);
9469
+ }
9470
+ .d-avatar.d-avatar-success {
9471
+ --bs-avatar-color: var(--bs-success-500);
9472
+ --bs-avatar-bg: var(--bs-success-100);
9473
+ }
9474
+ .d-avatar.d-avatar-dark-success {
9475
+ --bs-avatar-color: var(--bs-white);
9476
+ --bs-avatar-bg: var(--bs-success-500);
9477
+ }
9478
+ .d-avatar.d-avatar-light-success {
9479
+ --bs-avatar-color: var(--bs-success-500);
9480
+ --bs-avatar-bg: var(--bs-white);
9481
+ }
9482
+ .d-avatar.d-avatar-info {
9483
+ --bs-avatar-color: var(--bs-info-500);
9484
+ --bs-avatar-bg: var(--bs-info-100);
9485
+ }
9486
+ .d-avatar.d-avatar-dark-info {
9487
+ --bs-avatar-color: var(--bs-white);
9488
+ --bs-avatar-bg: var(--bs-info-500);
9489
+ }
9490
+ .d-avatar.d-avatar-light-info {
9491
+ --bs-avatar-color: var(--bs-info-500);
9492
+ --bs-avatar-bg: var(--bs-white);
9493
+ }
9494
+ .d-avatar.d-avatar-warning {
9495
+ --bs-avatar-color: var(--bs-warning-500);
9496
+ --bs-avatar-bg: var(--bs-warning-100);
9497
+ }
9498
+ .d-avatar.d-avatar-dark-warning {
9499
+ --bs-avatar-color: var(--bs-white);
9500
+ --bs-avatar-bg: var(--bs-warning-500);
9501
+ }
9502
+ .d-avatar.d-avatar-light-warning {
9503
+ --bs-avatar-color: var(--bs-warning-500);
9504
+ --bs-avatar-bg: var(--bs-white);
9505
+ }
9506
+ .d-avatar.d-avatar-danger {
9507
+ --bs-avatar-color: var(--bs-danger-500);
9508
+ --bs-avatar-bg: var(--bs-danger-100);
9509
+ }
9510
+ .d-avatar.d-avatar-dark-danger {
9511
+ --bs-avatar-color: var(--bs-white);
9512
+ --bs-avatar-bg: var(--bs-danger-500);
9513
+ }
9514
+ .d-avatar.d-avatar-light-danger {
9515
+ --bs-avatar-color: var(--bs-danger-500);
9516
+ --bs-avatar-bg: var(--bs-white);
9517
+ }
9518
+
9519
+ .d-avatar-xs {
9520
+ --bs-avatar-size: var(--bs-ref-spacer-8);
9521
+ }
9522
+
9523
+ .d-avatar-sm {
9524
+ --bs-avatar-size: var(--bs-ref-spacer-10);
9525
+ }
9526
+
9527
+ .d-avatar-lg {
9528
+ --bs-avatar-size: var(--bs-ref-spacer-14);
9529
+ }
9530
+
9531
+ .d-avatar-xl {
9532
+ --bs-avatar-size: var(--bs-ref-spacer-16);
9533
+ }
9534
+
9535
+ .d-avatar-xxl {
9536
+ --bs-avatar-size: var(--bs-ref-spacer-18);
9537
+ }
9538
+
9539
+ .d-avatar-group .d-avatar-img,
9540
+ .d-avatar-group .d-avatar-name {
9541
+ box-shadow: -2px 0 2px rgba(0, 0, 0, 0.1);
9542
+ }
9543
+ .d-avatar-group .d-avatar + .d-avatar {
9544
+ margin-left: calc(var(--bs-avatar-size) * -0.25);
9545
+ }
9546
+
9346
9547
  .d-icon {
9347
9548
  --bs-icon-color: var(--bs-icon-component-color, inherit);
9348
9549
  --bs-icon-bg-color: var(--bs-icon-component-bg-color, inherit);
@@ -9410,26 +9611,36 @@ label .d-icon {
9410
9611
  .d-input-pin:focus-within:has(.form-control:hover) .form-control:not(.is-invalid, .is-valid) {
9411
9612
  border-color: var(--bs-input-pin-form-control-focus-border-color);
9412
9613
  }
9614
+ .d-input-pin:has(.form-control.is-valid) {
9615
+ padding-right: calc(1.5em + 1.5rem);
9616
+ background-image: var(--bs-form-feedback-icon-valid);
9617
+ background-repeat: no-repeat;
9618
+ background-position: right calc(0.375em + 0.375rem) center;
9619
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
9620
+ }
9413
9621
  .d-input-pin:has(.form-control.is-valid) .form-control {
9622
+ background: var(--bs-white);
9414
9623
  border-color: var(--bs-success);
9415
9624
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
9416
9625
  }
9417
9626
  .d-input-pin:has(.form-control.is-valid) .form-text {
9418
9627
  color: var(--bs-form-valid-border-color);
9419
9628
  }
9420
- .d-input-pin:has(.form-control.is-valid) .input-group-validation-icon {
9421
- --bs-icon-color: var(--bs-success);
9629
+ .d-input-pin:has(.form-control.is-invalid) {
9630
+ padding-right: calc(1.5em + 1.5rem);
9631
+ background-image: var(--bs-form-feedback-icon-invalid);
9632
+ background-repeat: no-repeat;
9633
+ background-position: right calc(0.375em + 0.375rem) center;
9634
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
9422
9635
  }
9423
9636
  .d-input-pin:has(.form-control.is-invalid) .form-control {
9637
+ background: var(--bs-white);
9424
9638
  border-color: var(--bs-danger);
9425
9639
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
9426
9640
  }
9427
9641
  .d-input-pin:has(.form-control.is-invalid) .form-text {
9428
9642
  color: var(--bs-form-invalid-border-color);
9429
9643
  }
9430
- .d-input-pin:has(.form-control.is-invalid) .input-group-validation-icon {
9431
- --bs-icon-color: var(--bs-danger);
9432
- }
9433
9644
  .d-input-pin .input-group-text {
9434
9645
  padding-left: var(--bs-input-pin-form-gap);
9435
9646
  background-color: transparent;
@@ -10951,46 +11162,6 @@ label .d-icon {
10951
11162
  background-image: var(--bs-datepicker-calendar-picker-icon);
10952
11163
  }
10953
11164
 
10954
- .nav-pills,
10955
- .nav-tabs,
10956
- .nav-underline {
10957
- --bs-nav-tabs-nav-gap: var(--bs-ref-spacer-6);
10958
- --bs-nav-tabs-nav-padding-x: var(--bs-ref-spacer-6);
10959
- --bs-nav-tabs-nav-padding-y: var(--bs-ref-spacer-4);
10960
- --bs-nav-tabs-link-border-active-font-weight: var(--bs-fw-bold);
10961
- }
10962
-
10963
- .nav-pills,
10964
- .nav-underline {
10965
- gap: var(--bs-nav-tabs-nav-gap);
10966
- padding: var(--bs-nav-tabs-nav-padding-y) var(--bs-nav-tabs-nav-padding-x);
10967
- }
10968
- .nav-pills.flex-column,
10969
- .nav-underline.flex-column {
10970
- flex: 1 0 auto;
10971
- }
10972
- .nav-pills.flex-column .nav-link,
10973
- .nav-underline.flex-column .nav-link {
10974
- width: 100%;
10975
- }
10976
-
10977
- .nav-tabs .nav-link.active {
10978
- font-weight: var(--bs-nav-tabs-link-border-active-font-weight);
10979
- border-bottom-color: transparent;
10980
- }
10981
- .nav-tabs .nav-link:not(.active):is(:hover, :focus) {
10982
- border-color: transparent;
10983
- }
10984
-
10985
- .nav-underline .nav-link:not(.active):hover {
10986
- border-bottom-color: transparent;
10987
- }
10988
-
10989
- .nav-link:focus-visible {
10990
- --bs-focus-ring-opacity: .25;
10991
- --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
10992
- }
10993
-
10994
11165
  .d-close {
10995
11166
  display: flex;
10996
11167
  padding: 0;
@@ -11729,24 +11900,36 @@ label .d-icon {
11729
11900
  }
11730
11901
  .d-select .input-group:has(.d-select-component.is-valid) {
11731
11902
  border-color: var(--bs-form-valid-border-color);
11903
+ }
11904
+ .d-select .input-group:has(.d-select-component.is-valid) .d-select__value-container {
11905
+ padding-right: calc(1.5em + 1.5rem);
11906
+ background-image: var(--bs-form-feedback-icon-valid);
11907
+ background-repeat: no-repeat;
11908
+ background-position: right calc(0.375em + 0.375rem) center;
11909
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
11910
+ }
11911
+ .d-select .input-group:has(.d-select-component.is-valid):focus-within {
11732
11912
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
11733
11913
  }
11734
11914
  .d-select .input-group:has(.d-select-component.is-valid) ~ .form-text {
11735
11915
  color: var(--bs-form-valid-border-color);
11736
11916
  }
11737
- .d-select .input-group:has(.d-select-component.is-valid) .input-group-validation-icon {
11738
- --bs-icon-color: var(--bs-success);
11739
- }
11740
11917
  .d-select .input-group:has(.d-select-component.is-invalid) {
11741
11918
  border-color: var(--bs-form-invalid-border-color);
11919
+ }
11920
+ .d-select .input-group:has(.d-select-component.is-invalid) .d-select__value-container {
11921
+ padding-right: calc(1.5em + 1.5rem);
11922
+ background-image: var(--bs-form-feedback-icon-invalid);
11923
+ background-repeat: no-repeat;
11924
+ background-position: right calc(0.375em + 0.375rem) center;
11925
+ background-size: calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
11926
+ }
11927
+ .d-select .input-group:has(.d-select-component.is-invalid):focus-within {
11742
11928
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
11743
11929
  }
11744
11930
  .d-select .input-group:has(.d-select-component.is-invalid) ~ .form-text {
11745
11931
  color: var(--bs-form-invalid-border-color);
11746
11932
  }
11747
- .d-select .input-group:has(.d-select-component.is-invalid) .input-group-validation-icon {
11748
- --bs-icon-color: var(--bs-danger);
11749
- }
11750
11933
  .d-select .d-select__control {
11751
11934
  width: 100%;
11752
11935
  padding: 0.75rem 1rem;