@flux-ui/components 3.0.0-next.61 → 3.0.0-next.63

package/dist/index.css

@@ -333,178 +333,6 @@
   :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote, img, [data-typography-aware]) + :where([data-typography-aware]) {
     margin-top: 21px;
   }
-}.overlay-view {
-  position: fixed;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-}
-
-.overlay-provider {
-  pointer-events: none;
-  z-index: 10000;
-}
-
-.overlay-shade {
-  background: var(--overlay);
-  backdrop-filter: blur(3px) saturate(180%);
-  pointer-events: none;
-  transition: opacity 600ms var(--swift-out);
-}
-
-.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
-  opacity: 0;
-}
-
-.overlay {
-  position: fixed;
-  display: flex;
-  inset: 0;
-  height: 100dvh;
-  width: 100dvw;
-  outline: 0;
-}
-.overlay > .base-pane-structure {
-  display: flex;
-  margin: auto;
-  max-height: min(840px, 100dvh - 180px);
-  width: calc(100dvw - 90px);
-  flex-flow: column nowrap;
-  box-shadow: var(--shadow-lg);
-  overflow: auto;
-  transition: 420ms var(--swift-out);
-  transition-property: filter, scale;
-}
-.overlay > .base-pane-structure .pane-footer {
-  position: sticky;
-  bottom: 0;
-  margin-top: auto;
-}
-.overlay > .base-pane-structure::after {
-  position: absolute;
-  display: block;
-  inset: 0;
-  content: "";
-  background: var(--overlay-secondary);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 420ms var(--swift-out);
-  z-index: 1;
-}
-.overlay.is-current > .base-pane-structure {
-  pointer-events: auto;
-}
-.overlay:not(.is-current) > .base-pane-structure {
-  filter: blur(3px);
-  scale: 0.95;
-}
-.overlay:not(.is-current) > .base-pane-structure::after {
-  opacity: 1;
-}
-
-.overlay-small {
-}
-.overlay-small > .base-pane-structure {
-  max-width: 420px;
-}
-
-.overlay-medium {
-}
-.overlay-medium > .base-pane-structure {
-  max-width: 540px;
-}
-
-.overlay-large {
-}
-.overlay-large > .base-pane-structure {
-  max-width: 720px;
-}
-
-.slide-over {
-  justify-content: flex-end;
-}
-.slide-over > .base-pane-structure {
-  margin: 9px;
-  max-height: calc(100% - 18px);
-  width: min(100dvw, 720px);
-  contain: paint;
-  overflow: auto;
-}
-.slide-over > .base-pane-structure > .pane-header,
-.slide-over > .base-pane-structure > .pane-footer {
-  position: sticky;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header {
-  top: 0;
-  padding-bottom: 18px;
-  border-bottom: 1px solid var(--gray-100);
-  box-shadow: var(--shadow-xs);
-}
-.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
-  padding-bottom: 0;
-  border-bottom: 0;
-  box-shadow: none;
-}
-.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
-  background: inherit;
-}
-.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
-  position: sticky;
-  top: 45px;
-  z-index: 100;
-}
-.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
-  top: 66px;
-}
-.slide-over > .base-pane-structure > .pane-footer {
-  bottom: 0;
-}
-
-.overlay-transition-enter-active,
-.overlay-transition-leave-active {
-  transition: opacity 420ms var(--swift-out);
-}
-.overlay-transition-enter-active > .base-pane-structure,
-.overlay-transition-leave-active > .base-pane-structure {
-  transition: 420ms var(--swift-out);
-  transition-property: opacity, scale;
-}
-
-.overlay-transition-enter-from {
-  opacity: 0;
-}
-.overlay-transition-enter-from > .base-pane-structure {
-  opacity: 0;
-  scale: 0.9;
-}
-
-.overlay-transition-leave-to {
-  opacity: 0;
-}
-.overlay-transition-leave-to > .base-pane-structure {
-  opacity: 0;
-  scale: 0.95;
-}
-
-.slide-over-transition-enter-active,
-.slide-over-transition-leave-active {
-  transition: opacity 600ms var(--swift-out);
-}
-.slide-over-transition-enter-active > .base-pane-structure,
-.slide-over-transition-leave-active > .base-pane-structure {
-  transition: 600ms var(--swift-out);
-  transition-property: opacity, transform;
-}
-
-.slide-over-transition-enter-from,
-.slide-over-transition-leave-to {
-  opacity: 0;
-  transition-delay: 210ms;
-}
-.slide-over-transition-enter-from > .base-pane-structure,
-.slide-over-transition-leave-to > .base-pane-structure {
-  transform: translate3d(100%, 0, 0);
 }.base-pane {
   background: var(--surface);
   background-clip: padding-box;
@@ -821,6 +649,178 @@
 }
 .action-pane-body.pane-body {
   padding: 0;
+}.overlay-view {
+  position: fixed;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+}
+
+.overlay-provider {
+  pointer-events: none;
+  z-index: 10000;
+}
+
+.overlay-shade {
+  background: var(--overlay);
+  backdrop-filter: blur(3px) saturate(180%);
+  pointer-events: none;
+  transition: opacity 600ms var(--swift-out);
+}
+
+.overlay-provider:not(:has(.overlay:not(.overlay-transition-leave-active):not(.slide-over-transition-leave-active))) .overlay-shade {
+  opacity: 0;
+}
+
+.overlay {
+  position: fixed;
+  display: flex;
+  inset: 0;
+  height: 100dvh;
+  width: 100dvw;
+  outline: 0;
+}
+.overlay > .base-pane-structure {
+  display: flex;
+  margin: auto;
+  max-height: min(840px, 100dvh - 180px);
+  width: calc(100dvw - 90px);
+  flex-flow: column nowrap;
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  transition: 420ms var(--swift-out);
+  transition-property: filter, scale;
+}
+.overlay > .base-pane-structure .pane-footer {
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
+}
+.overlay > .base-pane-structure::after {
+  position: absolute;
+  display: block;
+  inset: 0;
+  content: "";
+  background: var(--overlay-secondary);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 420ms var(--swift-out);
+  z-index: 1;
+}
+.overlay.is-current > .base-pane-structure {
+  pointer-events: auto;
+}
+.overlay:not(.is-current) > .base-pane-structure {
+  filter: blur(3px);
+  scale: 0.95;
+}
+.overlay:not(.is-current) > .base-pane-structure::after {
+  opacity: 1;
+}
+
+.overlay-small {
+}
+.overlay-small > .base-pane-structure {
+  max-width: 420px;
+}
+
+.overlay-medium {
+}
+.overlay-medium > .base-pane-structure {
+  max-width: 540px;
+}
+
+.overlay-large {
+}
+.overlay-large > .base-pane-structure {
+  max-width: 720px;
+}
+
+.slide-over {
+  justify-content: flex-end;
+}
+.slide-over > .base-pane-structure {
+  margin: 9px;
+  max-height: calc(100% - 18px);
+  width: min(100dvw, 720px);
+  contain: paint;
+  overflow: auto;
+}
+.slide-over > .base-pane-structure > .pane-header,
+.slide-over > .base-pane-structure > .pane-footer {
+  position: sticky;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header {
+  top: 0;
+  padding-bottom: 18px;
+  border-bottom: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-xs);
+}
+.slide-over > .base-pane-structure > .pane-header:has(+ :where(.tabs, .tab-bar-default)) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  box-shadow: none;
+}
+.slide-over > .base-pane-structure > .pane-header:not(:has(+ :where(.tabs, .tab-bar-default))) {
+  background: inherit;
+}
+.slide-over > .base-pane-structure > .pane-header + .tab-bar-default {
+  position: sticky;
+  top: 45px;
+  z-index: 100;
+}
+.slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar-default {
+  top: 66px;
+}
+.slide-over > .base-pane-structure > .pane-footer {
+  bottom: 0;
+}
+
+.overlay-transition-enter-active,
+.overlay-transition-leave-active {
+  transition: opacity 420ms var(--swift-out);
+}
+.overlay-transition-enter-active > .base-pane-structure,
+.overlay-transition-leave-active > .base-pane-structure {
+  transition: 420ms var(--swift-out);
+  transition-property: opacity, scale;
+}
+
+.overlay-transition-enter-from {
+  opacity: 0;
+}
+.overlay-transition-enter-from > .base-pane-structure {
+  opacity: 0;
+  scale: 0.9;
+}
+
+.overlay-transition-leave-to {
+  opacity: 0;
+}
+.overlay-transition-leave-to > .base-pane-structure {
+  opacity: 0;
+  scale: 0.95;
+}
+
+.slide-over-transition-enter-active,
+.slide-over-transition-leave-active {
+  transition: opacity 600ms var(--swift-out);
+}
+.slide-over-transition-enter-active > .base-pane-structure,
+.slide-over-transition-leave-active > .base-pane-structure {
+  transition: 600ms var(--swift-out);
+  transition-property: opacity, transform;
+}
+
+.slide-over-transition-enter-from,
+.slide-over-transition-leave-to {
+  opacity: 0;
+  transition-delay: 210ms;
+}
+.slide-over-transition-enter-from > .base-pane-structure,
+.slide-over-transition-leave-to > .base-pane-structure {
+  transform: translate3d(100%, 0, 0);
 }.primary-button {
   background: var(--primary-600);
   border-color: var(--primary-700);
@@ -1089,6 +1089,86 @@
     opacity: 0;
     translate: 0 -512px;
   }
+}.flex {
+  --gap: 0;
+  display: flex;
+  gap: var(--gap);
+}
+
+.flex-inline {
+  display: inline-flex;
+}
+
+.flex-direction-horizontal {
+  flex-direction: row;
+}
+
+.flex-direction-vertical {
+  flex-direction: column;
+}
+
+.flex-align-start {
+  align-items: flex-start;
+}
+
+.flex-align-center {
+  align-items: center;
+}
+
+.flex-align-end {
+  align-items: flex-end;
+}
+
+.flex-align-stretch {
+  align-items: stretch;
+}
+
+.flex-align-baseline {
+  align-items: baseline;
+}
+
+.flex-justify-start {
+  justify-content: flex-start;
+}
+
+.flex-justify-center {
+  justify-content: center;
+}
+
+.flex-justify-end {
+  justify-content: flex-end;
+}
+
+.flex-justify-between {
+  justify-content: space-between;
+}
+
+.flex-justify-around {
+  justify-content: space-around;
+}
+
+.flex-justify-evenly {
+  justify-content: space-evenly;
+}
+
+.flex-wrap-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-wrap-nowrap {
+  flex-wrap: nowrap;
+}
+
+.flex-wrap-wrap-reverse {
+  flex-wrap: wrap-reverse;
+}
+
+.flex-fill {
+  width: 100%;
+}
+
+.flex-item {
+  min-width: 0;
 }.pane {
 }
 
@@ -1100,7 +1180,7 @@
 }
 
 .pane-well {
-  --surface: var(--background);
+  background-color: var(--gray-50);
 }
 
 :is(.pane-default, .pane-flat, .pane-well):is(a) {
@@ -1324,6 +1404,7 @@
 
 .flyout-pane {
   max-height: calc(100dvh - 120px);
+  width: max-content;
   box-shadow: var(--shadow-md);
   overflow: auto;
   transform: translate3d(var(--pane-mx), var(--pane-my), 0);
@@ -1400,42 +1481,8 @@
   }
 }
 
-.column {
-  display: flex;
-  flex-flow: column;
-  gap: var(--gap, 0);
-}
-
-.row {
-  display: flex;
-  gap: var(--gap, 0);
-}
-
 .spacer {
   flex-grow: 1;
-}
-
-.stack {
-  gap: var(--gap, 0);
-}
-.stack.is-centered {
-  place-content: center;
-  place-items: center;
-}
-.stack.is-fill {
-  width: 100%;
-}
-.stack.is-wrapping {
-  flex-wrap: wrap;
-}
-
-.stack-horizontal {
-  display: flex;
-}
-
-.stack-vertical {
-  display: flex;
-  flex-flow: column;
 }.adaptive-group {
   display: flex;
   min-width: 0;
@@ -1972,11 +2019,14 @@
 
 .tag-warning {
 }.calendar {
+  flex-grow: 1;
+}
+
+.calendar-view {
+  contain: paint;
   display: flex;
   flex-flow: column;
   flex-grow: 1;
-  box-shadow: var(--shadow-sm);
-  contain: paint;
 }
 
 .calendar-item-registry {
@@ -2053,15 +2103,14 @@
   outline-offset: 2px;
 }
 
-/* region Month view */
 .calendar-cells {
   display: grid;
   flex-grow: 1;
   gap: 1px;
   grid-template-columns: repeat(7, minmax(180px, 1fr));
-  grid-auto-rows: auto;
-  overflow-x: auto;
+  grid-template-rows: min-content repeat(6, auto);
   background: var(--gray-100);
+  overflow-x: auto;
 }
 
 .calendar-cell {
@@ -2073,9 +2122,9 @@
   padding-left: 0;
   padding-right: 0;
   color: var(--foreground-secondary);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1em;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 30px;
   text-align: center;
   text-transform: capitalize;
 }
@@ -2085,7 +2134,7 @@
   min-height: 90px;
   padding-top: 33px;
   outline: 2px dashed transparent;
-  outline-offset: 2px;
+  outline-offset: -2px;
   transition: 210ms var(--swift-out);
   transition-property: background, outline-color, z-index;
   z-index: 0;
@@ -2131,8 +2180,6 @@
   gap: 3px;
 }
 
-/* endregion */
-/* region Time-grid view */
 .time-grid {
   display: flex;
   flex-flow: column;
@@ -2326,9 +2373,7 @@
   background: var(--primary-500);
   z-index: 5;
   pointer-events: none;
-}
-
-/* endregion */.date-picker {
+}.date-picker {
   display: flex;
   max-height: 420px;
   flex-flow: column;
@@ -2459,37 +2504,81 @@
   position: relative;
 }
 
-.date-picker-dates-grid {
-  display: grid;
-  gap: 3px 0;
-  grid-template-columns: repeat(7, 1fr);
+.date-picker-dates-grid {
+  display: grid;
+  gap: 3px 0;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.date-picker-day {
+  margin-bottom: 6px;
+  color: var(--foreground-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+.date-picker-months,
+.date-picker-years {
+  display: grid;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 300px;
+  width: 100%;
+  gap: 9px;
+  grid-template-columns: repeat(3, 1fr);
+}
+.date-picker-months .button,
+.date-picker-years .button {
+  contain: size layout;
+  contain-intrinsic-size: 0 42px;
+  content-visibility: auto;
+  text-transform: capitalize;
+}.layer-pane {
+  display: flex;
+  flex-flow: column;
+  border: 1px solid var(--surface-stroke-out);
+  border-radius: var(--radius);
+  background: var(--gray-50);
+  background-clip: padding-box;
+}
+
+.layer-pane > .base-pane-structure {
+  border-right-width: 0;
+  border-left-width: 0;
+}
+
+.layer-pane > .base-pane-structure:first-child {
+  border-top-width: 0;
+}
+
+.layer-pane > .base-pane-structure:last-child {
+  border-bottom-width: 0;
+}
+
+.layer-pane > .base-pane-structure + .base-pane-structure {
+  border-top-width: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.layer-pane > .base-pane-structure:has(+ .base-pane-structure) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.date-picker-day {
-  margin-bottom: 6px;
-  color: var(--foreground-secondary);
-  font-size: 12px;
-  font-weight: 500;
-  text-align: center;
-  text-transform: uppercase;
+.layer-pane > .pane-footer {
+  background: unset;
+  border: 0;
 }
 
-.date-picker-months,
-.date-picker-years {
-  display: grid;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 300px;
-  width: 100%;
+.layer-pane-secondary {
+  display: flex;
+  align-items: center;
   gap: 9px;
-  grid-template-columns: repeat(3, 1fr);
-}
-.date-picker-months .button,
-.date-picker-years .button {
-  contain: size layout;
-  contain-intrinsic-size: 0 42px;
-  content-visibility: auto;
-  text-transform: capitalize;
+  padding: 12px 18px;
+  color: var(--foreground-prominent);
 }.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
   height: 100%;
   min-height: unset;
@@ -3685,8 +3774,8 @@
 .comment-content {
   min-width: 0;
   padding: 12px 18px;
-  background: linear-gradient(to bottom, var(--gray-25), var(--gray-50));
-  border: 1px solid var(--gray-200);
+  background: var(--primary-50);
+  border: 1px solid var(--primary-200);
   border-radius: calc(var(--radius) * 2);
   box-shadow: var(--shadow-xs);
 }
@@ -3696,7 +3785,7 @@
 }
 
 .comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-50), var(--gray-100));
+  background: var(--gray-50);
   border-color: var(--gray-200);
   border-bottom-left-radius: var(--radius);
 }
@@ -3729,14 +3818,6 @@
   color: var(--foreground-secondary);
 }
 
-[dark] .comment-content {
-  background: linear-gradient(to bottom, var(--gray-50), var(--gray-25));
-}
-
-[dark] .comment.is-received .comment-content {
-  background: linear-gradient(to bottom, var(--gray-100), var(--gray-50));
-}
-
 @keyframes comment-typing {
   0%, 80%, 100% {
     background: var(--gray-200);
@@ -3885,7 +3966,7 @@
   max-height: 50dvh;
   max-width: 100%;
   padding: 9px;
-  width: 270px;
+  width: 300px;
   overflow: auto;
   scrollbar-width: none;
   transition: height 150ms var(--deceleration-curve);
@@ -3956,11 +4037,15 @@
   flex-grow: 1;
 }
 
-.filter-reset {
+.filter-action {
   width: 42px;
   justify-content: center;
 }
 
+.filter-header-actions {
+  justify-content: flex-end;
+}
+
 .filter-date-picker {
   margin: -9px;
 }
@@ -4023,6 +4108,7 @@
   box-shadow: none;
   color: var(--foreground);
   text-align: left;
+  transition-duration: 0s;
 }
 @media (hover: hover) {
   .menu-item:hover {
@@ -4685,7 +4771,7 @@
 @media (max-width: 767.98px) {
   .pagination-bar {
     flex-flow: column;
-    gap: 15px;
+    gap: 9px;
   }
 }.table {
   position: relative;
@@ -4813,6 +4899,7 @@ tfoot .table-cell {
 
 .table-pagination {
   position: sticky;
+  left: 0;
   bottom: 0;
   margin-top: auto;
   margin-bottom: -1px;
@@ -5464,8 +5551,6 @@ tfoot .table-cell {
   grid-auto-flow: column;
   grid-auto-columns: minmax(300px, 1fr);
   grid-template-rows: auto 1fr auto;
-  margin: -9px;
-  padding: 9px;
   gap: 0 15px;
   overflow-x: auto;
 }
@@ -5492,7 +5577,7 @@ tfoot .table-cell {
   border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
   outline: 2px dashed transparent;
-  outline-offset: 2px;
+  outline-offset: -2px;
   overflow: hidden;
   transition: 210ms var(--swift-out);
   transition-property: background, border, outline-color, opacity, z-index;
@@ -5526,6 +5611,19 @@ tfoot .table-cell {
   outline-offset: -2;
 }
 
+.kanban-column-header-caption {
+  display: flex;
+  padding-left: 9px;
+  align-items: center;
+  gap: 9px;
+}
+.kanban-column-header-caption .icon {
+  font-size: 16px;
+}
+.kanban-column-header-caption span {
+  font-weight: 500;
+}
+
 .kanban-column.is-reorderable .kanban-column-header {
   cursor: grab;
 }
@@ -5534,14 +5632,6 @@ tfoot .table-cell {
   cursor: grabbing;
 }
 
-.kanban-column-label {
-  flex: 1;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--foreground);
-  text-transform: uppercase;
-}
-
 .kanban-column-body {
   position: relative;
   display: flex;
@@ -5577,9 +5667,7 @@ tfoot .table-cell {
   flex: 1;
   align-items: center;
   justify-content: center;
-  padding: 18px 12px;
-  font-size: 0.8125rem;
-  color: var(--gray-500);
+  color: var(--foreground-secondary);
   text-align: center;
 }
 
@@ -5590,9 +5678,9 @@ tfoot .table-cell {
 
 .kanban-drop-indicator {
   position: absolute;
-  top: -3px;
+  top: -2px;
   inset-inline: 15px;
-  height: 4px;
+  height: 2px;
   border-radius: 999px;
   background: var(--primary-500);
   opacity: 0;
@@ -5629,25 +5717,23 @@ tfoot .table-cell {
 .kanban-item:active {
   cursor: grabbing;
 }
-
-.kanban-item.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-.kanban-item.is-disabled:active {
-  cursor: not-allowed;
-}
-
-.is-dragging {
+.kanban-item.is-dragging {
   opacity: 0.4;
   cursor: grabbing;
 }
-
-.is-grabbed {
+.kanban-item.is-grabbed {
   transform: scale(1.04);
   outline: 2px solid var(--primary-500);
   outline-offset: 2px;
   z-index: 1;
+}
+
+.kanban-item.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+.kanban-item.is-disabled:active {
+  cursor: not-allowed;
 }.item {
   display: flex;
   flex-flow: row nowrap;
@@ -5717,50 +5803,14 @@ tfoot .table-cell {
 
 .base-pane-structure:is(a, button):hover:has(> .item) {
   background-color: color-mix(in srgb, rgb(from var(--surface-hover) r g b/0.125), var(--surface));
-}.layer-pane {
-  display: flex;
-  flex-flow: column;
-  border: 1px solid var(--surface-stroke-out);
-  border-radius: var(--radius);
-  background: var(--gray-50);
-  background-clip: padding-box;
-}
-
-.layer-pane > .base-pane-structure {
-  border-right-width: 0;
-  border-left-width: 0;
-}
-
-.layer-pane > .base-pane-structure:first-child {
-  border-top-width: 0;
-}
-
-.layer-pane > .base-pane-structure:last-child {
-  border-bottom-width: 0;
-}
-
-.layer-pane > .base-pane-structure + .base-pane-structure {
-  border-top-width: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
-.layer-pane > .base-pane-structure:has(+ .base-pane-structure) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.layer-pane-secondary {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 12px 18px;
-  color: var(--foreground-prominent);
 }.legend-horizontal {
+  display: flex;
   gap: 12px 18px;
 }
 
 .legend-vertical {
+  display: flex;
+  flex-flow: column;
   gap: 12px;
 }
 
@@ -6061,7 +6111,7 @@ tfoot .table-cell {
 }
 
 .progress-bar-value-incomplete {
-  background: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 80%);
+  background: var(--primary-600) linear-gradient(-45deg, transparent 20%, rgb(from var(--primary-500) r g b/0.5), transparent 80%);
   background-size: 150px 100%;
   animation: progress-bar-value 1s linear infinite;
 }
@@ -6069,7 +6119,7 @@ tfoot .table-cell {
 .progress-bar-track-indeterminate {
 }
 .progress-bar-track-indeterminate .progress-bar-value {
-  background: linear-gradient(to right, var(--primary-600) 20%, var(--primary-500), var(--primary-600) 80%);
+  background: var(--primary-600) linear-gradient(-45deg, transparent 20%, rgb(from var(--primary-500) r g b/0.5), transparent 80%);
   background-size: 90px 100%;
   animation: progress-bar-indeterminate 1s linear infinite;
 }
@@ -6317,7 +6367,21 @@ tfoot .table-cell {
   scale: 0.95;
   translate: 0 -15px;
   z-index: -1;
-}.tooltip {
+}.tooltip-host {
+  position: fixed;
+  inset: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.tooltip {
   position: fixed;
   display: flex;
   top: 0;
@@ -6376,6 +6440,103 @@ tfoot .table-cell {
 .root.is-locked {
   cursor: default;
   overflow: hidden;
+}.scroller {
+  position: relative;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-color: var(--surface-stroke) transparent;
+  scrollbar-width: thin;
+}
+.scroller::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.scroller::-webkit-scrollbar-track {
+  background: transparent;
+}
+.scroller::-webkit-scrollbar-thumb {
+  background-color: var(--surface-stroke);
+  border-radius: 4px;
+}
+.scroller:hover::-webkit-scrollbar-thumb {
+  background-color: var(--gray-400);
+}
+
+.scroller-direction-vertical {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.scroller-direction-horizontal {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroller-direction-both {
+  overflow: auto;
+}
+
+.scroller-snap-mandatory-horizontal {
+  scroll-snap-type: x mandatory;
+}
+
+.scroller-snap-mandatory-vertical {
+  scroll-snap-type: y mandatory;
+}
+
+.scroller-snap-mandatory-both {
+  scroll-snap-type: both mandatory;
+}
+
+.scroller-snap-proximity-horizontal {
+  scroll-snap-type: x proximity;
+}
+
+.scroller-snap-proximity-vertical {
+  scroll-snap-type: y proximity;
+}
+
+.scroller-snap-proximity-both {
+  scroll-snap-type: both proximity;
+}
+
+.scroller-snap-align-start > * {
+  scroll-snap-align: start;
+}
+
+.scroller-snap-align-center > * {
+  scroll-snap-align: center;
+}
+
+.scroller-snap-align-end > * {
+  scroll-snap-align: end;
+}
+
+.scroller-fade {
+  --fade-mask-vertical: linear-gradient(
+      to bottom,
+      transparent 0,
+      black var(--fade-start, 0px),
+      black calc(100% - var(--fade-end, 0px)),
+      transparent 100%
+  );
+  --fade-mask-horizontal: linear-gradient(
+      to right,
+      transparent 0,
+      black var(--fade-start, 0px),
+      black calc(100% - var(--fade-end, 0px)),
+      transparent 100%
+  );
+}
+
+.scroller-fade-vertical {
+  -webkit-mask-image: var(--fade-mask-vertical);
+  mask-image: var(--fade-mask-vertical);
+}
+
+.scroller-fade-horizontal {
+  -webkit-mask-image: var(--fade-mask-horizontal);
+  mask-image: var(--fade-mask-horizontal);
 }.segmented-control {
   position: relative;
   align-items: center;
@@ -6450,6 +6611,69 @@ tfoot .table-cell {
 }
 .segmented-control-separator.is-active {
   opacity: 0;
+}.split-view {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.split-view-horizontal {
+  grid-auto-flow: column;
+}
+
+.split-view-vertical {
+  grid-auto-flow: row;
+}
+
+.split-view-dragging {
+  user-select: none;
+}
+.split-view-dragging * {
+  pointer-events: none;
+}
+
+.split-view-pane {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+.split-view-handle {
+  appearance: none;
+  position: relative;
+  display: block;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  cursor: col-resize;
+}
+.split-view-handle::before {
+  position: absolute;
+  top: 0;
+  left: calc(50% - 1px);
+  height: 100%;
+  width: 2px;
+  content: "";
+  background: var(--surface-stroke);
+  transition: background 0.15s var(--swift-out);
+}
+.split-view-handle:hover::before, .split-view-handle:focus-visible::before {
+  background: var(--primary-500);
+}
+.split-view-handle:focus-visible {
+  outline: none;
+}
+
+.split-view-handle-vertical {
+  cursor: row-resize;
+}
+.split-view-handle-vertical::before {
+  top: calc(50% - 1px);
+  left: 0;
+  height: 2px;
+  width: 100%;
 }.statistic {
   padding: 18px;
   flex-basis: 0;
@@ -6694,11 +6918,39 @@ tfoot .table-cell {
 }
 
 .stepper-steps-item-particles {
+}.sticky-sentinel {
+  position: relative;
+  height: 1px;
+  width: 100%;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.sticky {
+  position: sticky;
+  z-index: 1;
+}
+
+.sticky-top {
+  top: var(--offset, 0);
+}
+
+.sticky-bottom {
+  bottom: var(--offset, 0);
+}
+
+.has-shadow {
+  transition: box-shadow 0.15s var(--swift-out);
+}
+
+.has-shadow[data-stuck=true] {
+  box-shadow: var(--surface-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
 }.tab {
   position: relative;
   display: flex;
   flex-flow: column;
   flex-grow: 1;
+  gap: 18px;
 }
 
 .base-tab-bar {