@dynamic-framework/ui-react 1.30.0 → 1.31.0

package/dist/css/dynamic-ui-non-root.css

@@ -1,5 +1,5 @@
 /*!
- * dynamic-framework 1.30.0
+ * dynamic-framework 1.31.0
  * bootstrap ^5.3.3
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
  */
@@ -3528,7 +3528,7 @@ progress {
 }
 
 .form-text {
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-body-color);
 }
@@ -3587,7 +3587,7 @@ progress {
   opacity: 1;
 }
 .form-control:disabled {
-  color: var(--bs-gray-300);
+  color: var(--bs-body-color);
   background-color: var(--bs-gray-100);
   border-color: var(--bs-gray-300);
   opacity: 1;
@@ -3766,7 +3766,7 @@ textarea.form-control-lg {
   background-image: none;
 }
 .form-select:disabled {
-  color: var(--bs-gray-300);
+  color: var(--bs-body-color);
   background-color: var(--bs-gray-100);
   border-color: var(--bs-gray-300);
 }
@@ -4218,7 +4218,7 @@ textarea.form-control-lg {
 .valid-feedback {
   display: none;
   width: 100%;
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-form-valid-color);
 }
@@ -4229,7 +4229,7 @@ textarea.form-control-lg {
   z-index: 5;
   display: none;
   max-width: 100%;
-  padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
+  padding: var(--bs-ref-spacer-2) var(--bs-ref-spacer-1);
   margin-top: 0.1rem;
   font-size: var(--bs-body-font-size);
   color: var(--bs-white);
@@ -4288,7 +4288,7 @@ textarea.form-control-lg {
 .invalid-feedback {
   display: none;
   width: 100%;
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-form-invalid-color);
 }
@@ -4299,7 +4299,7 @@ textarea.form-control-lg {
   z-index: 5;
   display: none;
   max-width: 100%;
-  padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
+  padding: var(--bs-ref-spacer-2) var(--bs-ref-spacer-1);
   margin-top: 0.1rem;
   font-size: var(--bs-body-font-size);
   color: var(--bs-white);
@@ -5676,9 +5676,9 @@ textarea.form-control-lg {
   --bs-breadcrumb-margin-bottom: 1rem;
   --bs-breadcrumb-bg: ;
   --bs-breadcrumb-border-radius: ;
-  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
+  --bs-breadcrumb-divider-color: var(--bs-body-color);
   --bs-breadcrumb-item-padding-x: 0.5rem;
-  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
+  --bs-breadcrumb-item-active-color: var(--bs-body-color);
   display: flex;
   flex-wrap: wrap;
   padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
@@ -5706,21 +5706,21 @@ textarea.form-control-lg {
   --bs-pagination-padding-x: var(--bs-ref-spacer-1);
   --bs-pagination-padding-y: var(--bs-ref-spacer-1);
   --bs-pagination-font-size: 1rem;
-  --bs-pagination-color: var(--bs-gray);
+  --bs-pagination-color: var(--bs-body-color);
   --bs-pagination-bg: transparent;
   --bs-pagination-border-width: 0;
   --bs-pagination-border-color: var(--bs-border-color);
   --bs-pagination-border-radius: var(--bs-border-radius);
-  --bs-pagination-hover-color: var(--bs-secondary);
-  --bs-pagination-hover-bg: var(--bs-secondary-100);
+  --bs-pagination-hover-color: var(--bs-body-color);
+  --bs-pagination-hover-bg: var(--bs-primary-50);
   --bs-pagination-hover-border-color: 0;
-  --bs-pagination-focus-color: var(--bs-secondary);
-  --bs-pagination-focus-bg: var(--bs-secondary-100);
+  --bs-pagination-focus-color: var(--bs-body-color);
+  --bs-pagination-focus-bg: var(--bs-primary-50);
   --bs-pagination-focus-box-shadow: 0;
   --bs-pagination-active-color: var(--bs-white);
   --bs-pagination-active-bg: var(--bs-primary);
   --bs-pagination-active-border-color: var(--bs-primary);
-  --bs-pagination-disabled-color: var(--bs-gray-400);
+  --bs-pagination-disabled-color: var(--bs-body-color);
   --bs-pagination-disabled-bg: var(--bs-transparent);
   --bs-pagination-disabled-border-color: var(--bs-border-color);
   display: flex;
@@ -5900,11 +5900,11 @@ textarea.form-control-lg {
 .progress-stacked {
   --bs-progress-height: 1rem;
   --bs-progress-font-size: var(--bs-fs-small);
-  --bs-progress-bg: var(--bs-secondary-100);
+  --bs-progress-bg: var(--bs-gray-200);
   --bs-progress-border-radius: var(--bs-border-radius-pill);
   --bs-progress-box-shadow: none;
   --bs-progress-bar-color: var(--bs-white);
-  --bs-progress-bar-bg: var(--bs-secondary);
+  --bs-progress-bar-bg: var(--bs-primary);
   --bs-progress-bar-transition: width 0.6s ease;
   display: flex;
   height: var(--bs-progress-height);
@@ -6409,7 +6409,7 @@ textarea.form-control-lg {
 .modal {
   --bs-modal-zindex: 1055;
   --bs-modal-width: 500px;
-  --bs-modal-padding: var(--bs-ref-spacer-6);
+  --bs-modal-padding: var(--bs-ref-spacer-4);
   --bs-modal-margin: 0.5rem;
   --bs-modal-color: ;
   --bs-modal-bg: var(--bs-white);
@@ -6418,9 +6418,9 @@ textarea.form-control-lg {
   --bs-modal-border-radius: var(--bs-border-radius);
   --bs-modal-box-shadow: var(--bs-box-shadow-sm);
   --bs-modal-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
-  --bs-modal-header-padding-x: var(--bs-ref-spacer-6);
+  --bs-modal-header-padding-x: var(--bs-ref-spacer-4);
   --bs-modal-header-padding-y: var(--bs-ref-spacer-4);
-  --bs-modal-header-padding: var(--bs-ref-spacer-8) var(--bs-ref-spacer-6) var(--bs-ref-spacer-4);
+  --bs-modal-header-padding: var(--bs-ref-spacer-4);
   --bs-modal-header-border-color: transparent;
   --bs-modal-header-border-width: var(--bs-border-width);
   --bs-modal-title-line-height: 1.5;
@@ -6701,8 +6701,8 @@ textarea.form-control-lg {
 .tooltip {
   --bs-tooltip-zindex: 1080;
   --bs-tooltip-max-width: 300px;
-  --bs-tooltip-padding-x: var(--bs-ref-spacer-2);
-  --bs-tooltip-padding-y: var(--bs-ref-spacer-1);
+  --bs-tooltip-padding-x: var(--bs-ref-spacer-1);
+  --bs-tooltip-padding-y: var(--bs-ref-spacer-2);
   --bs-tooltip-margin: ;
   --bs-tooltip-font-size: var(--bs-body-font-size);
   --bs-tooltip-color: var(--bs-body-bg);
@@ -7219,8 +7219,8 @@ textarea.form-control-lg {
   --bs-offcanvas-zindex: 1055;
   --bs-offcanvas-width: 400px;
   --bs-offcanvas-height: 30vh;
-  --bs-offcanvas-padding-x: var(--bs-ref-spacer-6);
-  --bs-offcanvas-padding-y: var(--bs-ref-spacer-6);
+  --bs-offcanvas-padding-x: var(--bs-ref-spacer-4);
+  --bs-offcanvas-padding-y: var(--bs-ref-spacer-4);
   --bs-offcanvas-color: var(--bs-body-color);
   --bs-offcanvas-bg: var(--bs-white);
   --bs-offcanvas-border-width: var(--bs-border-width);
@@ -7956,6 +7956,10 @@ body {
   --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='%23dc3545'/%3e%3c/svg%3e");
 }
 
+.form-check-label {
+  --bs-label-padding-x: var(--bs-ref-spacer-2);
+}
+
 .form-check-input {
   --bs-form-check-input-focus-border-color: var(--bs-focus-ring-border-color);
   --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
@@ -7985,7 +7989,7 @@ body {
 }
 
 .form-text {
-  --bs-form-text-padding: 0 0.5rem;
+  --bs-form-text-padding: 0 0;
   --bs-form-text-gap: var(--bs-ref-spacer-1);
   --bs-form-text-color: var(--bs-body-color);
   display: inline-flex;
@@ -8051,7 +8055,7 @@ body {
   --bs-input-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
   --bs-input-disabled-border-color: var(--bs-gray-300);
   --bs-input-disabled-bg: var(--bs-gray-100);
-  --bs-input-disabled-color: var(--bs-gray-300);
+  --bs-input-disabled-color: var(--bs-body-color);
   border: var(--bs-input-border-width) solid var(--bs-input-border-color);
   border-radius: var(--bs-input-border-radius);
 }
@@ -8904,7 +8908,7 @@ body {
 }
 
 .progress {
-  --bs-progress-bar-font-weight: var(--bs-fw-bold);
+  --bs-progress-bar-font-weight: var(--bs-fw-normal);
   font-weight: var(--bs-progress-bar-font-weight);
 }
 .progress .progress-bar:not(:empty) {
@@ -8932,42 +8936,36 @@ body {
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-primary);
   --bs-alert-border-color: var(--bs-surface-primary);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-secondary {
   --bs-alert-icon-color: var(--bs-secondary-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-secondary);
   --bs-alert-border-color: var(--bs-surface-secondary);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-success {
   --bs-alert-icon-color: var(--bs-success-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-success);
   --bs-alert-border-color: var(--bs-surface-success);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-info {
   --bs-alert-icon-color: var(--bs-info-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-info);
   --bs-alert-border-color: var(--bs-surface-info);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-warning {
   --bs-alert-icon-color: var(--bs-warning-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-warning);
   --bs-alert-border-color: var(--bs-surface-warning);
-  --bs-alert-link-color: var(--bs-gray-700);
 }
 .alert.alert-danger {
   --bs-alert-icon-color: var(--bs-danger-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-danger);
   --bs-alert-border-color: var(--bs-surface-danger);
-  --bs-alert-link-color: var(--bs-white);
 }
 
 .collapse-container {
@@ -9020,12 +9018,20 @@ body {
 .pagination {
   --bs-pagination-page-item-size: 2rem;
   --bs-pagination-border-radius: 2rem;
+  --bs-pagination-page-control-color: var(--bs-primary);
+  --bs-pagination-page-control-disabled-color: var(--bs-primary-200);
   margin: 0;
 }
 .pagination .page-item {
   min-width: var(--bs-pagination-page-item-size);
   min-height: var(--bs-pagination-page-item-size);
 }
+.pagination :is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
+  color: var(--bs-pagination-page-control-color);
+}
+.pagination :is(.page-item:first-child, .page-item:last-child).disabled .page-link {
+  color: var(--bs-pagination-page-control-disabled-color);
+}
 .pagination .page-link {
   display: flex;
   align-items: center;
@@ -9065,6 +9071,7 @@ label {
   gap: var(--bs-ref-spacer-1);
   align-items: center;
   padding: var(--bs-label-padding-y) var(--bs-label-padding-x);
+  margin-bottom: var(--bs-label-margin-bottom);
   font-size: var(--bs-label-font-size);
   font-weight: var(--bs-label-font-weight);
   color: var(--bs-label-color);
@@ -9293,8 +9300,8 @@ label .d-icon {
 }
 
 .tooltip {
-  --bs-tooltip-sm-font-size: var(--bs-fs-small);
-  --bs-tooltip-lg-font-size: var(--bs-fs-6);
+  --bs-tooltip-sm-font-size: var(--bs-fs-body-small);
+  --bs-tooltip-lg-font-size: var(--bs-fs-body-medium);
   fill: var(--bs-tooltip-bg);
 }
 .tooltip.tooltip-sm {
@@ -9779,11 +9786,11 @@ label .d-icon {
 }
 
 .modal {
-  --bs-modal-header-gap: var(--bs-ref-spacer-6);
-  --bs-modal-footer-padding: var(--bs-ref-spacer-6);
-  --bs-modal-separator-margin-x: var(--bs-ref-spacer-6);
+  --bs-modal-header-gap: var(--bs-ref-spacer-4);
+  --bs-modal-footer-padding: var(--bs-ref-spacer-4);
+  --bs-modal-separator-margin-x: var(--bs-ref-spacer-4);
   --bs-modal-separator-height: 1px;
-  --bs-modal-separator-bg: var(--bs-gray-200);
+  --bs-modal-separator-bg: var(--bs-gray-100);
 }
 .modal .modal-header {
   flex-direction: row;
@@ -9821,8 +9828,11 @@ label .d-icon {
 }
 
 .offcanvas {
-  --bs-offcanvas-header-gap: var(--bs-ref-spacer-6);
-  --bs-offcanvas-footer-gap: var(--bs-ref-spacer-6);
+  --bs-offcanvas-header-gap: var(--bs-ref-spacer-4);
+  --bs-offcanvas-footer-gap: var(--bs-ref-spacer-4);
+  --bs-offcanvas-separator-margin-x: var(--bs-ref-spacer-4);
+  --bs-offcanvas-separator-height: 1px;
+  --bs-offcanvas-separator-bg: var(--bs-gray-100);
 }
 .offcanvas .offcanvas-header {
   flex-direction: row;
@@ -9833,8 +9843,13 @@ label .d-icon {
 .offcanvas .offcanvas-header:has(.d-offcanvas-close:only-child) {
   justify-content: flex-end;
 }
+.offcanvas .d-offcanvas-separator {
+  height: var(--bs-offcanvas-separator-height);
+  margin: 0 var(--bs-offcanvas-separator-margin-x);
+  background: var(--bs-offcanvas-separator-bg);
+}
 .offcanvas .offcanvas-body {
-  padding: 0 var(--bs-offcanvas-padding-x);
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas .d-offcanvas-footer {
   display: flex;
@@ -11457,12 +11472,12 @@ label .d-icon {
   --bs-step-icon-container-border-width: 1px;
   --bs-step-icon-container-border-color: var(--bs-secondary);
   --bs-step-icon-container-border-radius: 100%;
-  --bs-step-icon-container-z-index: 3;
+  --bs-step-icon-container-z-index: 1;
   /* Base step */
   --bs-step-label-height: var(--bs-ref-spacer-12);
   --bs-step-icon-size: var(--bs-ref-spacer-6);
   --bs-step-gap: var(--bs-ref-spacer-2);
-  --bs-step-z-index: 2;
+  --bs-step-z-index: 0;
   /* Checked step */
   --bs-step-check-text-color: var(--bs-white);
   --bs-step-check-background-color: var(--bs-success);
@@ -11474,8 +11489,10 @@ label .d-icon {
   --bs-step-line-stroke: 1px;
   --bs-step-line-color: var(--bs-secondary);
   /* Step label */
-  --bs-step-label-padding: var(--bs-ref-spacer-6);
+  --bs-step-label-padding: var(--bs-ref-spacer-4);
   --bs-step-vertical-label-padding: var(--bs-ref-spacer-4);
+  --bs-step-label-font-size: var(--bs-body-font-size);
+  --bs-step-description-font-size: var(--bs-fs-body-tiny);
   position: relative;
   display: flex;
 }
@@ -11533,11 +11550,21 @@ label .d-icon {
   z-index: var(--bs-step-z-index);
   width: 50%;
 }
-.d-stepper-desktop .d-step .d-step-label {
+.d-stepper-desktop .d-step .d-step-text-container {
   padding-right: var(--bs-step-label-padding);
   padding-left: var(--bs-step-label-padding);
   text-align: center;
 }
+.d-stepper-desktop .d-step .d-step-text-container .d-step-label {
+  font-size: var(--bs-step-label-font-size);
+}
+.d-stepper-desktop .d-step .d-step-text-container .d-step-description {
+  font-size: var(--bs-step-description-font-size);
+}
+.d-stepper-desktop.is-align-start .d-step-text-container {
+  text-align: left;
+  transform: translateX(calc(50% - var(--bs-step-icon-container-size) / 2 - var(--bs-step-label-padding)));
+}
 .d-stepper-desktop.is-vertical {
   flex-direction: column;
 }
@@ -11549,12 +11576,15 @@ label .d-icon {
   align-items: center;
   height: 100%;
 }
-.d-stepper-desktop.is-vertical .d-step .d-step-label {
+.d-stepper-desktop.is-vertical .d-step .d-step-text-container {
   display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  align-items: center;
+  align-items: flex-start;
   min-height: var(--bs-step-label-height);
   padding: var(--bs-step-vertical-label-padding);
+}
+.d-stepper-desktop.is-vertical .d-step .d-step-label {
   text-align: left;
 }
 .d-stepper-desktop.is-vertical .d-step .d-step-value::after {
@@ -11591,20 +11621,20 @@ label .d-icon {
   --bs-step-progress-outter-size: 62px;
   --bs-step-progress-outter-z-index: 1;
   --bs-step-progress-outter-fill-background-color: var(--bs-secondary-500);
-  --bs-step-progress-outter-background-color: var(--bs-gray-300);
+  --bs-step-progress-outter-background-color: var(--bs-secondary-100);
   /* Inner circle */
   --bs-step-progress-inner-size: 50px;
   --bs-step-progress-inner-z-index: 2;
   --bs-step-progress-inner-background-color: var(--bs-white);
   /* Current step */
   --bs-step-current-step-z-index: 3;
-  --bs-step-current-step-font-weight: var(--bs-fw-bold);
-  --bs-step-current-step-color: var(--bs-gray-700);
+  --bs-step-current-step-font-weight: var(--bs-fw-normal);
+  --bs-step-current-step-color: var(--bs-secondary-500);
   /* Info circle */
   --bs-step-info-max-width: 12rem;
-  --bs-step-info-label-font-size: var(--bs-fs-6);
-  --bs-step-info-description-font-size: var(--bs-fs-small);
-  --bs-step-info-description-color: var(--bs-gray-500);
+  --bs-step-info-label-font-size: var(--bs-body-font-size);
+  --bs-step-info-description-font-size: var(--bs-fs-body-tiny);
+  --bs-step-info-description-color: var(--bs-body-color);
   display: flex;
   gap: var(--bs-step-container-gap);
   align-items: center;
@@ -11663,7 +11693,7 @@ label .d-icon {
 
 .d-select {
   --bs-select-gap: 0.5rem;
-  --bs-select-menu-shadow: 0 8px 12px 0 rgba(21, 21, 26, 0.05);
+  --bs-select-menu-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   --bs-select-menu-z-index: 1000;
   --bs-select-option-focus-bg: var(--bs-gray-100);
   --bs-select-option-selected-color: var(--bs-secondary);