@incursa/ui-kit 1.6.1 → 1.8.0

package/dist/inc-design-language.css

@@ -12190,10 +12190,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --inc-control-surface-border: var(--inc-border-default);
   --inc-surface-contrast: var(--bs-secondary);
   --inc-surface-contrast-rgb: var(--bs-secondary-rgb);
-  --inc-surface-contrast-hover: #31384a;
-  --inc-surface-contrast-hover-rgb: 49, 56, 74;
-  --inc-surface-contrast-active: #2e3542;
-  --inc-surface-contrast-active-rgb: 46, 53, 66;
+  --inc-surface-contrast-hover: #273042;
+  --inc-surface-contrast-hover-rgb: 39, 48, 66;
+  --inc-surface-contrast-active: #1f2737;
+  --inc-surface-contrast-active-rgb: 31, 39, 55;
   --inc-surface-contrast-text: var(--inc-text-inverse);
   --inc-surface-contrast-text-rgb: var(--inc-text-inverse-rgb);
   --inc-surface-contrast-border: var(--bs-secondary);
@@ -12216,10 +12216,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --inc-control-surface-border: var(--inc-border-default);
   --inc-surface-contrast: var(--bs-gray-100);
   --inc-surface-contrast-rgb: 253, 253, 253;
-  --inc-surface-contrast-hover: var(--bs-gray-200);
-  --inc-surface-contrast-hover-rgb: 246, 246, 246;
-  --inc-surface-contrast-active: var(--bs-gray-300);
-  --inc-surface-contrast-active-rgb: 241, 241, 241;
+  --inc-surface-contrast-hover: #dfe3e8;
+  --inc-surface-contrast-hover-rgb: 223, 227, 232;
+  --inc-surface-contrast-active: #c8d0d9;
+  --inc-surface-contrast-active-rgb: 200, 208, 217;
   --inc-surface-contrast-text: var(--bs-dark);
   --inc-surface-contrast-text-rgb: 18, 19, 22;
   --inc-surface-contrast-border: var(--bs-gray-400);
@@ -12534,12 +12534,27 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   overflow: hidden !important;
 }
 
+.inc-icon {
+  display: block;
+  flex: 0 0 auto;
+  stroke: currentColor;
+}
+
 .inc-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.375rem;
   vertical-align: middle;
+  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+.inc-btn__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
 }
 .inc-btn--secondary {
   --bs-btn-color: var(--inc-surface-contrast-text);
@@ -12547,7 +12562,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --bs-btn-border-color: var(--inc-surface-contrast-border);
   --bs-btn-hover-color: var(--inc-surface-contrast-text);
   --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
-  --bs-btn-hover-border-color: var(--inc-surface-contrast-border);
+  --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
   --bs-btn-focus-shadow-rgb: var(--inc-surface-contrast-rgb);
   --bs-btn-active-color: var(--inc-surface-contrast-text);
   --bs-btn-active-bg: var(--inc-surface-contrast-active);
@@ -12555,6 +12570,15 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --bs-btn-disabled-color: var(--inc-surface-contrast-text);
   --bs-btn-disabled-bg: var(--inc-surface-contrast);
   --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+}
+.inc-btn--secondary:hover, .inc-btn--secondary:focus-visible {
+  --bs-btn-hover-bg: var(--inc-surface-contrast-hover);
+  --bs-btn-hover-border-color: var(--inc-surface-contrast-hover);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.1);
+}
+.inc-btn--secondary:active, .inc-btn--secondary.active, .inc-btn--secondary:focus:active {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12);
 }
 .inc-btn--success {
   color: #ffffff;
@@ -12574,14 +12598,14 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 }
 .inc-btn--outline-secondary {
   --bs-btn-color: var(--inc-text-primary);
-  --bs-btn-border-color: var(--inc-border-default);
+  --bs-btn-border-color: var(--inc-border-subtle);
   --bs-btn-hover-color: var(--inc-text-primary);
-  --bs-btn-hover-bg: var(--inc-surface-secondary);
-  --bs-btn-hover-border-color: var(--inc-border-default);
+  --bs-btn-hover-bg: rgba(var(--inc-surface-strong-rgb), 0.12);
+  --bs-btn-hover-border-color: rgba(var(--inc-surface-strong-rgb), 0.32);
   --bs-btn-focus-shadow-rgb: var(--inc-surface-strong-rgb);
   --bs-btn-active-color: var(--inc-text-primary);
-  --bs-btn-active-bg: var(--inc-surface-muted);
-  --bs-btn-active-border-color: var(--inc-border-default);
+  --bs-btn-active-bg: rgba(var(--inc-surface-strong-rgb), 0.18);
+  --bs-btn-active-border-color: rgba(var(--inc-surface-strong-rgb), 0.4);
   --bs-btn-disabled-color: var(--inc-text-muted);
   --bs-btn-disabled-border-color: var(--inc-border-subtle);
 }
@@ -12590,6 +12614,12 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   --bs-btn-disabled-bg: rgba(var(--inc-surface-secondary-rgb), 0.54);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
 }
+.inc-btn--outline-primary:hover, .inc-btn--outline-primary:focus-visible, .inc-btn--outline-secondary:hover, .inc-btn--outline-secondary:focus-visible, .inc-btn--outline-success:hover, .inc-btn--outline-success:focus-visible, .inc-btn--outline-danger:hover, .inc-btn--outline-danger:focus-visible, .inc-btn--outline-warning:hover, .inc-btn--outline-warning:focus-visible, .inc-btn--outline-info:hover, .inc-btn--outline-info:focus-visible {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+}
+.inc-btn--outline-primary:active, .inc-btn--outline-primary.active, .inc-btn--outline-primary:focus:active, .inc-btn--outline-secondary:active, .inc-btn--outline-secondary.active, .inc-btn--outline-secondary:focus:active, .inc-btn--outline-success:active, .inc-btn--outline-success.active, .inc-btn--outline-success:focus:active, .inc-btn--outline-danger:active, .inc-btn--outline-danger.active, .inc-btn--outline-danger:focus:active, .inc-btn--outline-warning:active, .inc-btn--outline-warning.active, .inc-btn--outline-warning:focus:active, .inc-btn--outline-info:active, .inc-btn--outline-info.active, .inc-btn--outline-info:focus:active {
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+}
 .inc-btn--micro {
   padding: 0.15rem 0.4rem;
   font-size: 0.7rem;
@@ -12637,9 +12667,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border: 1px solid #d11a2a;
 }
 .inc-badge--warning {
-  background-color: #fff4d4;
-  color: #c88a00;
-  border: 1px solid #c88a00;
+  background-color: #fff8df;
+  color: #765000;
+  border: 1px solid #b67b00;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 1px 2px rgba(182, 123, 0, 0.12);
 }
 .inc-badge--info {
   background-color: #e9ecfe;
@@ -12647,6 +12678,8 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border: 1px solid #2544f1;
 }
 .inc-alert {
+  position: relative;
+  overflow: hidden;
   border-radius: 0.5rem;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
   background-clip: padding-box;
@@ -12654,6 +12687,28 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-alert:empty {
   display: none;
 }
+.inc-alert__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin-inline-end: 0.5rem;
+  vertical-align: -0.2em;
+  color: currentColor;
+}
+.inc-alert__progress {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  height: 0.1875rem;
+  background: currentColor;
+  opacity: 0.2;
+  transform-origin: left center;
+  transform: scaleX(1);
+  pointer-events: none;
+}
+
 .alert:empty, .inc-alert:empty {
   display: none;
 }
@@ -12930,6 +12985,11 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   align-items: center;
   justify-content: center;
 }
+.inc-empty-state__icon svg {
+  display: block;
+  width: 2.125rem;
+  height: 2.125rem;
+}
 .inc-empty-state__form {
   margin-top: 1.5rem;
   width: 100%;
@@ -13887,7 +13947,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border: 1px solid var(--inc-border-subtle);
   cursor: pointer;
   appearance: none;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
   transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 .inc-tabs-folder .inc-tabs-nav > li > .inc-tab .inc-tab-icon {
@@ -13897,7 +13957,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   color: var(--inc-text-primary);
   background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 1), rgba(var(--inc-surface-muted-rgb), 0.9));
   border-color: var(--inc-border-default);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46), 0 2px 4px rgba(var(--inc-shadow-rgb), 0.07);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.46);
 }
 .inc-tabs-folder .inc-tabs-nav > li > .inc-tab:not(.active):hover .inc-tab-icon {
   color: var(--bs-primary);
@@ -13910,7 +13970,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border-bottom-color: var(--inc-surface-panel);
   position: relative;
   z-index: 1;
-  box-shadow: var(--inc-surface-panel-shadow-raised);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
   transform: translateY(-1px);
 }
 .inc-tabs-folder .inc-tab-content {
@@ -13921,7 +13981,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border-top-left-radius: 0;
   border-top-right-radius: 0.25rem;
   margin-top: -1px;
-  box-shadow: var(--inc-surface-panel-shadow-raised);
+  box-shadow: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06);
 }
 
 .inc-tabs-line {
@@ -14418,6 +14478,8 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
   display: inline-flex;
   align-items: center;
   gap: 0.625rem;
+  width: max-content;
+  max-width: calc(100vw - 2rem);
   padding: 0.5rem 0.75rem;
   border: 1px solid var(--inc-border-subtle);
   border-radius: 999px;
@@ -14435,6 +14497,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
   bottom: auto;
   z-index: auto;
   vertical-align: middle;
+  max-width: 100%;
 }
 .inc-auto-refresh__countdown, .inc-auto-refresh__status {
   display: inline-flex;
@@ -14458,6 +14521,10 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
   color: var(--bs-primary);
 }
 .inc-auto-refresh__toggle {
+  --bs-btn-color: var(--inc-text-primary);
+  --bs-btn-hover-color: var(--inc-text-primary);
+  --bs-btn-active-color: var(--inc-text-primary);
+  order: -1;
   flex: 0 0 auto;
   width: 1.875rem;
   height: 1.875rem;
@@ -14476,26 +14543,24 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
   font-size: 0.6875rem;
   line-height: 1;
 }
+.inc-auto-refresh__toggle:hover, .inc-auto-refresh__toggle:focus-visible, .inc-auto-refresh__toggle:active {
+  color: var(--inc-text-primary);
+}
 .inc-auto-refresh__toggle-icon {
-  position: relative;
   display: inline-flex;
-  width: 0.75rem;
-  height: 0.75rem;
-  color: currentColor;
-}
-.inc-auto-refresh__toggle-icon::before, .inc-auto-refresh__toggle-icon::after {
-  content: "";
-  position: absolute;
-  inset-block: 0.0625rem;
-  width: 0.1875rem;
-  border-radius: 999px;
-  background: currentColor;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--inc-text-primary);
 }
-.inc-auto-refresh__toggle-icon::before {
-  left: 0.125rem;
+.inc-auto-refresh__toggle:hover .inc-auto-refresh__toggle-icon, .inc-auto-refresh__toggle:focus-visible .inc-auto-refresh__toggle-icon, .inc-auto-refresh__toggle:active .inc-auto-refresh__toggle-icon {
+  color: var(--inc-text-primary);
 }
-.inc-auto-refresh__toggle-icon::after {
-  right: 0.125rem;
+.inc-auto-refresh__toggle-icon svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
 }
 .inc-auto-refresh__toggle-text {
   width: 1px !important;
@@ -14520,23 +14585,25 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
 .inc-auto-refresh.is-paused .inc-auto-refresh__toggle {
   color: var(--bs-warning-text-emphasis);
 }
-.inc-auto-refresh.is-paused .inc-auto-refresh__toggle-icon {
-  width: 0.7rem;
-  height: 0.7rem;
+.inc-auto-refresh.is-paused .inc-auto-refresh__toggle:hover, .inc-auto-refresh.is-paused .inc-auto-refresh__toggle:focus-visible, .inc-auto-refresh.is-paused .inc-auto-refresh__toggle:active {
+  color: var(--bs-warning-text-emphasis);
 }
-.inc-auto-refresh.is-paused .inc-auto-refresh__toggle-icon::before {
-  inset: 0;
-  width: 100%;
-  background: currentColor;
-  clip-path: polygon(14% 8%, 14% 92%, 86% 50%);
+.inc-auto-refresh.is-paused .inc-auto-refresh__toggle-icon {
+  color: var(--inc-text-primary);
 }
-.inc-auto-refresh.is-paused .inc-auto-refresh__toggle-icon::after {
-  display: none;
+.inc-auto-refresh.is-paused .inc-auto-refresh__toggle-icon svg {
+  transform: translateX(0.03125rem);
 }
 .inc-auto-refresh.is-loading {
   border-color: var(--bs-primary-border-subtle);
   box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-primary-rgb), 0.14);
 }
+.inc-auto-refresh.is-loading .inc-auto-refresh__toggle {
+  color: var(--inc-text-primary);
+}
+.inc-auto-refresh.is-loading .inc-auto-refresh__toggle:hover, .inc-auto-refresh.is-loading .inc-auto-refresh__toggle:focus-visible, .inc-auto-refresh.is-loading .inc-auto-refresh__toggle:active {
+  color: var(--inc-text-primary);
+}
 
 .inc-progress,
 .inc-meter {
@@ -15399,6 +15466,17 @@ body.inc-offcanvas-open {
   color: var(--bs-primary);
 }
 
+[data-bs-theme=dark] .inc-filter-chip--accent {
+  border-color: rgba(var(--bs-primary-rgb), 0.5);
+  background: rgba(var(--bs-primary-rgb), 0.4);
+  color: var(--bs-white);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.12);
+}
+[data-bs-theme=dark] .inc-filter-chip--accent .inc-filter-chip__remove {
+  color: currentColor;
+  opacity: 0.88;
+}
+
 .inc-state-panel {
   display: flex;
   flex-direction: column;
@@ -15427,6 +15505,11 @@ body.inc-offcanvas-open {
   font-weight: 700;
   flex: 0 0 auto;
 }
+.inc-state-panel__icon svg {
+  display: block;
+  width: 1.375rem;
+  height: 1.375rem;
+}
 .inc-state-panel__title {
   margin: 0;
   font-size: 1.125rem;
@@ -15771,17 +15854,17 @@ body.inc-offcanvas-open {
 [data-bs-theme=dark] .inc-table__row--selected > *,
 [data-bs-theme=dark] .inc-table__row--warning > *,
 [data-bs-theme=dark] .inc-table__row--danger > * {
-  background: rgba(var(--bs-primary-rgb), 0.14) !important;
+  background: rgba(var(--bs-primary-rgb), 0.26) !important;
   color: var(--inc-text-primary);
 }
 [data-bs-theme=dark] .inc-table__row--warning > * {
-  background: rgba(var(--bs-warning-rgb), 0.14) !important;
+  background: rgba(var(--bs-warning-rgb), 0.24) !important;
 }
 [data-bs-theme=dark] .inc-table__row--danger > * {
-  background: rgba(var(--bs-danger-rgb), 0.14) !important;
+  background: rgba(var(--bs-danger-rgb), 0.24) !important;
 }
 [data-bs-theme=dark] .inc-table__row--locked > * {
-  background: rgba(var(--bs-secondary-rgb), 0.22) !important;
+  background: rgba(var(--bs-secondary-rgb), 0.32) !important;
   color: var(--inc-text-secondary);
 }
 
@@ -15941,6 +16024,10 @@ body.inc-offcanvas-open {
   border: 1.5px dashed #949596;
   border-radius: 0.5rem;
   background: linear-gradient(180deg, var(--inc-surface-secondary), var(--inc-surface-primary));
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+.inc-file-dropzone[role=button] {
+  cursor: pointer;
 }
 .inc-file-dropzone__content {
   display: flex;
@@ -15961,6 +16048,12 @@ body.inc-offcanvas-open {
   border-color: var(--bs-primary);
   background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
 }
+.inc-file-dropzone.is-drag-over, .inc-file-dropzone:focus-visible {
+  border-color: var(--bs-primary);
+  background: linear-gradient(180deg, var(--bs-primary-bg-subtle), var(--inc-surface-primary));
+  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.14);
+  outline: 0;
+}
 @media (max-width: 767.98px) {
   .inc-file-dropzone {
     flex-direction: column;