@incursa/ui-kit 1.5.0 → 1.7.0

package/dist/inc-design-language.css

@@ -12190,20 +12190,24 @@ 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);
   --inc-surface-primary-rgb: var(--bs-body-bg-rgb);
   --inc-surface-secondary-rgb: var(--bs-secondary-bg-rgb);
   --inc-surface-muted-rgb: var(--bs-tertiary-bg-rgb);
+  --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.56);
+  --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.86);
   --inc-text-primary-rgb: var(--bs-body-color-rgb);
   --inc-text-secondary-rgb: var(--bs-secondary-color-rgb);
   --inc-text-muted-rgb: var(--bs-tertiary-color-rgb);
   --inc-shadow-rgb: var(--bs-black-rgb);
+  --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.05), 0 0.5rem 1.5rem rgba(var(--inc-shadow-rgb), 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.58);
+  --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.06), 0 0.875rem 2rem rgba(var(--inc-shadow-rgb), 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.62);
 }
 
 [data-bs-theme=dark] {
@@ -12212,13 +12216,17 @@ 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);
+  --inc-surface-panel: rgba(var(--inc-surface-secondary-rgb), 0.72);
+  --inc-surface-panel-cap: rgba(var(--inc-surface-secondary-rgb), 0.9);
+  --inc-surface-panel-shadow: 0 0.0625rem 0.125rem rgba(var(--inc-shadow-rgb), 0.22), 0 0.75rem 1.75rem rgba(var(--inc-shadow-rgb), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --inc-surface-panel-shadow-raised: 0 0.125rem 0.25rem rgba(var(--inc-shadow-rgb), 0.28), 0 1rem 2.25rem rgba(var(--inc-shadow-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
   --bs-success-bg-subtle: rgba(0, 151, 67, 0.18);
   --bs-success-border-subtle: rgb(72, 171, 109);
   --bs-form-valid-color: rgb(122, 214, 154);
@@ -12532,6 +12540,7 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   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--secondary {
   --bs-btn-color: var(--inc-surface-contrast-text);
@@ -12539,7 +12548,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);
@@ -12547,6 +12556,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;
@@ -12566,17 +12584,28 @@ 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);
 }
+.inc-btn--outline-primary, .inc-btn--outline-secondary, .inc-btn--outline-success, .inc-btn--outline-danger, .inc-btn--outline-warning, .inc-btn--outline-info {
+  --bs-btn-bg: rgba(var(--inc-surface-secondary-rgb), 0.74);
+  --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;
@@ -12602,6 +12631,17 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   margin-left: -1px;
 }
 
+.inc-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: rgba(var(--inc-surface-secondary-rgb), 0.88);
+  color: var(--inc-text-secondary);
+  border: 1px solid var(--inc-border-subtle);
+  border-radius: 0.5rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.06);
+  font-weight: 600;
+}
 .inc-badge--success {
   background-color: #e6fbef;
   color: #009743;
@@ -12613,18 +12653,38 @@ 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;
   color: #2544f1;
   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;
+}
 .inc-alert:empty {
   display: none;
 }
+.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;
 }
@@ -12669,14 +12729,18 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   padding: 1rem 1rem 0.875rem;
   border: 1px solid var(--inc-border-subtle);
   border-radius: 0.5rem;
-  background: var(--inc-surface-secondary);
+  background: var(--inc-surface-panel);
+  box-shadow: var(--inc-surface-panel-shadow);
 }
 .inc-form__legend {
   float: none;
   width: auto;
   margin: 0;
-  padding: 0 0.375rem;
-  background-color: var(--inc-surface-secondary);
+  padding: 0.125rem 0.625rem;
+  border: 1px solid var(--inc-border-subtle);
+  border-radius: 999px;
+  background-color: var(--inc-surface-panel-cap);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
   color: var(--inc-text-primary);
   font-size: 0.8125rem;
   font-weight: 600;
@@ -12697,6 +12761,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   align-items: center;
   gap: 0.5rem;
   min-width: 0;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--inc-border-subtle);
+  border-radius: 0.5rem;
+  background: var(--inc-surface-secondary);
 }
 .inc-form__field > .inc-form__label {
   margin-bottom: 0;
@@ -12760,6 +12828,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 }
 .inc-form--inline .inc-form__field {
   flex: 0 1 auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
 }
 .inc-form--inline .inc-form__field--grow,
 .inc-form--inline .inc-form__control--expand,
@@ -12825,13 +12897,35 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 }
 
 .inc-readonly-field {
-  background-color: #f6f6f6;
-  cursor: default;
   display: flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--inc-border-subtle);
+  border-radius: 0.5rem;
+  background: var(--inc-surface-secondary);
+  color: var(--inc-text-primary);
+  cursor: default;
   -webkit-user-select: none;
   user-select: none;
 }
+.inc-readonly-field > [part~=label] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--inc-text-muted);
+}
+.inc-readonly-field > [part~=value] {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--inc-text-primary);
+}
+.inc-readonly-field > [part~=meta] {
+  font-size: 0.75rem;
+  color: var(--inc-text-muted);
+}
 
 .inc-empty-state {
   display: flex;
@@ -12842,18 +12936,30 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   padding: 2rem 1.5rem;
   border: 0.0625rem solid var(--inc-border-subtle);
   border-radius: 0.25rem;
-  background-color: var(--inc-surface-secondary);
+  background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.96));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
   color: var(--inc-text-primary);
   min-height: 21.875rem;
 }
 .inc-empty-state__content {
   max-width: 32.5rem;
   width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
 }
 .inc-empty-state__icon {
+  width: 4.5rem;
+  height: 4.5rem;
+  margin: 0 auto 1.5rem;
+  border: 1px solid var(--inc-border-subtle);
+  border-radius: 1.25rem;
+  background: rgba(var(--inc-surface-secondary-rgb), 0.82);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.04);
   font-size: 3.0625rem;
-  margin-bottom: 1.5rem;
   color: var(--inc-text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 .inc-empty-state__form {
   margin-top: 1.5rem;
@@ -12894,13 +13000,16 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   }
 }
 .inc-card {
-  --bs-card-bg: var(--inc-surface-primary);
+  --bs-card-bg: var(--inc-surface-panel);
   --bs-card-color: var(--inc-text-primary);
   --bs-card-title-color: var(--inc-text-primary);
   --bs-card-subtitle-color: var(--inc-text-muted);
   --bs-card-border-color: var(--inc-border-subtle);
-  --bs-card-cap-bg: var(--inc-surface-secondary);
+  --bs-card-cap-bg: var(--inc-surface-panel-cap);
   --bs-card-cap-color: var(--inc-text-primary);
+  background: var(--bs-card-bg);
+  box-shadow: var(--inc-surface-panel-shadow);
+  transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
 }
 .inc-card__header--compact {
   padding: 0.75rem 1rem;
@@ -12908,6 +13017,10 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 .inc-card__body--flush {
   padding: 0;
 }
+.inc-card--elevated {
+  box-shadow: var(--inc-surface-panel-shadow-raised);
+}
+
 .inc-grid {
   display: grid;
   gap: 1rem;
@@ -13171,14 +13284,17 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   border: 1px solid var(--bs-border-color);
   border-radius: var(--bs-border-radius);
   overflow: hidden;
+  background-color: var(--inc-surface-panel);
+  box-shadow: var(--inc-surface-panel-shadow);
 }
 .inc-header-body--card .inc-header-body__header {
   border-top-left-radius: var(--bs-border-radius);
   border-top-right-radius: var(--bs-border-radius);
+  background-color: var(--inc-surface-panel-cap);
 }
 .inc-header-body--panel {
-  background-color: var(--inc-surface-primary);
-  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  background-color: var(--inc-surface-panel);
+  box-shadow: var(--inc-surface-panel-shadow-raised);
   border-radius: var(--bs-border-radius);
 }
 .inc-header-body--panel .inc-header-body__header {
@@ -13266,14 +13382,15 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
 }
 
 .inc-summary-block {
-  background-color: var(--inc-surface-primary);
+  background-color: var(--inc-surface-panel);
   border: 0.0625rem solid var(--inc-border-default);
   border-radius: 0.25rem;
   padding: 1.25rem;
-  transition: box-shadow 0.2s ease-in-out;
+  box-shadow: var(--inc-surface-panel-shadow);
+  transition: box-shadow 0.18s ease-in-out, background-color 0.18s ease-in-out;
 }
 .inc-summary-block:hover {
-  box-shadow: 0 0.125rem 0.25rem rgba(42, 49, 66, 0.075);
+  box-shadow: var(--inc-surface-panel-shadow-raised);
 }
 .inc-summary-block__header {
   display: flex;
@@ -13780,6 +13897,8 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
+  position: relative;
+  z-index: 1;
 }
 .inc-tabs-folder .inc-tabs-nav > li + li {
   margin-left: 0.125rem;
@@ -13793,41 +13912,47 @@ textarea.form-control-lg, textarea.inc-form__control--lg {
   color: var(--inc-text-secondary);
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
-  background-color: var(--inc-surface-secondary);
+  background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-secondary-rgb), 0.82));
   height: 2.5rem;
   text-decoration: none;
   border: 1px solid var(--inc-border-subtle);
   cursor: pointer;
   appearance: none;
+  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 {
   color: var(--bs-primary);
 }
 .inc-tabs-folder .inc-tabs-nav > li > .inc-tab:not(.active):hover {
   color: var(--inc-text-primary);
-  background-color: var(--inc-surface-muted);
+  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);
 }
 .inc-tabs-folder .inc-tabs-nav > li > .inc-tab:not(.active):hover .inc-tab-icon {
   color: var(--bs-primary);
 }
 .inc-tabs-folder .inc-tabs-nav > li > .inc-tab.active {
   color: var(--bs-primary-text-emphasis);
-  background-color: var(--inc-surface-primary);
+  background-color: var(--inc-surface-panel);
   font-weight: 600;
   border-color: var(--inc-border-subtle);
-  border-bottom-color: var(--inc-surface-primary);
+  border-bottom-color: var(--inc-surface-panel);
   position: relative;
   z-index: 1;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
+  transform: translateY(-1px);
 }
 .inc-tabs-folder .inc-tab-content {
-  background-color: var(--inc-surface-primary);
+  background: linear-gradient(180deg, var(--inc-surface-panel-cap), rgba(var(--inc-surface-primary-rgb), 0.98));
   border: 1px solid var(--inc-border-subtle);
   padding: 1.5rem;
   border-radius: 0.25rem;
   border-top-left-radius: 0;
   border-top-right-radius: 0.25rem;
   margin-top: -1px;
+  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 {
@@ -14324,12 +14449,14 @@ 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;
-  background: rgba(var(--inc-surface-primary-rgb), 0.96);
+  background: rgba(var(--inc-surface-primary-rgb), 0.92);
   color: var(--inc-text-primary);
-  box-shadow: 0 0.75rem 1.5rem rgba(var(--inc-surface-strong-rgb), 0.12);
+  box-shadow: var(--inc-surface-panel-shadow-raised);
   font-size: 0.75rem;
   line-height: 1.2;
   white-space: nowrap;
@@ -14341,6 +14468,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;
@@ -14364,27 +14492,90 @@ 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;
+  padding: 0;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--inc-text-primary);
+  border-color: var(--inc-border-default);
+  background: linear-gradient(180deg, rgba(var(--inc-surface-secondary-rgb), 0.96), rgba(var(--inc-surface-primary-rgb), 0.94));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.08);
 }
 .inc-auto-refresh__toggle.inc-btn {
-  min-height: 1.625rem;
-  padding: 0.2rem 0.55rem;
+  min-height: 1.875rem;
   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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: var(--inc-text-primary);
+}
+.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 svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  fill: currentColor;
+}
 .inc-auto-refresh__toggle-text {
-  display: inline-block;
-  min-width: 3.25rem;
-  text-align: center;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+.inc-auto-refresh__toggle-text:not(caption) {
+  position: absolute !important;
+}
+.inc-auto-refresh__toggle-text * {
+  overflow: hidden !important;
 }
 .inc-auto-refresh.is-paused {
   border-color: var(--bs-warning-border-subtle);
   box-shadow: 0 0.9rem 1.75rem rgba(var(--bs-warning-rgb), 0.1);
 }
+.inc-auto-refresh.is-paused .inc-auto-refresh__toggle {
+  color: var(--bs-warning-text-emphasis);
+}
+.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 {
+  color: var(--inc-text-primary);
+}
+.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 {
@@ -14457,7 +14648,7 @@ dialog.inc-native-dialog.inc-native-dialog--drawer .inc-native-dialog__body {
 .inc-alert-container .alert,
 .inc-alert-container .inc-alert {
   margin-bottom: 0.5rem;
-  box-shadow: 0 0.125rem 0.25rem rgba(42, 49, 66, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
   border-radius: 0.25rem;
   border-width: 0.0625rem;
   padding: 0.75rem 1rem;
@@ -15162,7 +15353,9 @@ body.inc-offcanvas-open {
   border: 1px solid var(--bs-danger-border-subtle);
   border-left: 0.25rem solid var(--bs-danger-text-emphasis);
   border-radius: 0.5rem;
-  background: var(--bs-danger-bg-subtle);
+  background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.14), rgba(var(--bs-danger-rgb), 0.1));
+  box-shadow: var(--inc-surface-panel-shadow);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0.375rem 1rem rgba(var(--inc-shadow-rgb), 0.05);
 }
 .inc-form__error-summary-title {
   margin: 0;
@@ -15184,7 +15377,8 @@ body.inc-offcanvas-open {
   padding: 1rem 1.125rem;
   border: 1px solid var(--inc-border-subtle);
   border-radius: 0.5rem;
-  background: var(--inc-surface-primary);
+  background: var(--inc-surface-panel);
+  box-shadow: var(--inc-surface-panel-shadow);
 }
 .inc-filter-bar__main {
   display: flex;
@@ -15222,6 +15416,7 @@ body.inc-offcanvas-open {
   border: 1px solid var(--inc-border-subtle);
   border-radius: 999px;
   background: var(--inc-surface-secondary);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 1px 2px rgba(var(--inc-shadow-rgb), 0.05);
   color: var(--inc-text-primary);
   font-size: 0.75rem;
   font-weight: 600;
@@ -15243,6 +15438,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;
@@ -15250,7 +15456,8 @@ body.inc-offcanvas-open {
   padding: 1.5rem;
   border: 1px solid var(--inc-border-subtle);
   border-radius: 0.5rem;
-  background: var(--inc-surface-primary);
+  background: var(--inc-surface-panel);
+  box-shadow: var(--inc-surface-panel-shadow);
 }
 .inc-state-panel__head {
   display: flex;
@@ -15291,10 +15498,10 @@ body.inc-offcanvas-open {
 }
 .inc-state-panel--results {
   border-style: dashed;
-  background: var(--inc-surface-secondary);
+  background: rgba(var(--inc-surface-secondary-rgb), 0.84);
 }
 .inc-state-panel--loading {
-  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.04), var(--inc-surface-primary));
+  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.05), var(--inc-surface-panel));
 }
 .inc-state-panel--error {
   border-color: var(--bs-danger-border-subtle);
@@ -15547,10 +15754,10 @@ body.inc-offcanvas-open {
   --bs-btn-disabled-border-color: var(--inc-surface-contrast-border);
 }
 [data-bs-theme=dark] .inc-form__fieldset {
-  background: var(--inc-surface-secondary);
+  background: var(--inc-surface-panel);
 }
 [data-bs-theme=dark] .inc-form__legend {
-  background-color: var(--inc-surface-secondary);
+  background-color: var(--inc-surface-panel-cap);
 }
 [data-bs-theme=dark] .inc-form__control.is-invalid, [data-bs-theme=dark] .inc-form__control.inc-form--is-invalid,
 [data-bs-theme=dark] .inc-form__control[aria-invalid=true],
@@ -15614,17 +15821,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);
 }
 
@@ -15784,6 +15991,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;
@@ -15804,6 +16015,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;