@flux-ui/components 3.0.0-next.35 → 3.0.0-next.39

package/dist/index.css

@@ -55,8 +55,10 @@
     --font-size: 15px;
     --radius: 12px;
     --radius-double: 24px;
+    --radius-full: 9999px;
     --radius-half: 6px;
-    --background: var(--gray-50);
+    --transition-default: 180ms var(--swift-out);
+    --background: var(--gray-25);
     --foreground: var(--gray-700);
     --foreground-prominent: var(--gray-900);
     --foreground-secondary: var(--gray-500);
@@ -69,8 +71,9 @@
     --surface-hover: var(--gray-50);
     --surface-active: var(--gray-100);
     --surface-disabled: var(--gray-100);
-    --overlay: rgb(from var(--gray-950) r g b / .3);
+    --overlay: rgb(from var(--gray-950) r g b / .5);
     --overlay-secondary: rgb(from var(--gray-950) r g b / .15);
+    --overlay-strong: rgb(from var(--gray-950) r g b / .9);
   }
   :root, [light] {
     --gray-25: #ffffff;
@@ -156,6 +159,7 @@
   [dark] {
     --overlay: rgb(0 0 0 / .6);
     --overlay-secondary: rgb(0 0 0 / .4);
+    --overlay-strong: rgb(0 0 0 / .9);
     --gray-25: #0c0d12;
     --gray-50: #121419;
     --gray-100: #1a1d24;
@@ -252,7 +256,7 @@
 }
 @layer flux-base {
   h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
+    font-weight: 600;
     line-height: 1.6;
     text-wrap: balance;
   }
@@ -278,9 +282,10 @@
     font-size: 14px;
   }
   a:not([class]), a[class=""] {
+    align-self: start;
     color: var(--primary-600);
     text-decoration: underline;
-    text-decoration-color: var(--primary-400);
+    text-decoration-color: currentColor;
     text-decoration-skip: auto;
     text-decoration-thickness: 1px;
     text-underline-offset: 2px;
@@ -432,7 +437,7 @@
 }
 .slide-over > .base-pane-structure > .pane-header {
   top: 0;
-  padding-bottom: 21px;
+  padding-bottom: 18px;
   border-bottom: 1px solid var(--gray-100);
   box-shadow: var(--shadow-xs);
 }
@@ -450,7 +455,7 @@
   z-index: 100;
 }
 .slide-over > .base-pane-structure > .pane-header:has(.pane-header-caption > :is(span)) + .tab-bar {
-  top: 69px;
+  top: 66px;
 }
 .slide-over > .base-pane-structure > .pane-footer {
   bottom: 0;
@@ -641,8 +646,6 @@
 }@layer flux-base {
   .button {
     display: inline-flex;
-    height: 42px;
-    padding: 0 12px;
     align-items: center;
     flex-grow: 0;
     flex-shrink: 0;
@@ -655,7 +658,7 @@
     cursor: pointer;
     font: inherit;
     text-decoration: none;
-    transition: 180ms var(--swift-out);
+    transition: var(--transition-default);
     transition-property: background, border, box-shadow, color, scale, outline-color, outline-offset;
     user-select: none;
     outline: 2px solid rgb(from var(--primary-600) r g b/0);
@@ -696,12 +699,13 @@
     align-self: stretch;
   }
   .button-icon {
+    margin: 1px;
     flex-shrink: 0;
-    font-size: 20px;
+    font-size: 18px;
   }
   .button-icon:only-child {
-    margin-left: -2px;
-    margin-right: -2px;
+    margin-left: -1px;
+    margin-right: -1px;
   }
   .button-label {
     display: inline-block;
@@ -713,10 +717,10 @@
     margin-right: 6px;
     min-width: 42px;
   }
-  .badge:first-child {
+  .button .badge:first-child {
     margin-left: -6px;
   }
-  .badge:last-child {
+  .button .badge:last-child {
     margin-right: -6px;
   }
 }.action {
@@ -767,7 +771,7 @@
 }
 
 .base-pane-structure > .action-bar {
-  padding: 15px 21px;
+  padding: 12px 18px;
   background: var(--gray-50);
   border: 1px solid var(--gray-100);
   border-left: 0;
@@ -785,7 +789,7 @@
 }
 
 .pane-header + .action-bar {
-  margin-top: 21px;
+  margin-top: 18px;
 }
 
 .action-pane {
@@ -1111,14 +1115,14 @@
 
 .pane-header {
   display: flex;
-  padding: 21px 21px 0;
+  padding: 18px 18px 0;
   gap: 15px;
 }
 .pane-header:only-child {
-  padding: 21px;
+  padding: 18px;
 }
 .pane-header:has(+ .base-pane-element:not(.pane-body)) {
-  padding: 21px;
+  padding: 18px;
 }
 
 .pane-header-caption {
@@ -1144,7 +1148,7 @@
 }
 
 .pane-body {
-  padding: 21px;
+  padding: 18px;
 }
 
 .pane-body + .pane-body {
@@ -1153,7 +1157,7 @@
 
 .pane-footer {
   display: flex;
-  padding: 21px;
+  padding: 18px;
   gap: 9px;
   background: var(--gray-50);
   border-top: 1px solid var(--gray-100);
@@ -1190,21 +1194,24 @@
   border-radius: inherit;
   z-index: 1;
 }
-.pane-media:first-child {
+
+.pane-media-default {
+}
+.pane-media-default:first-child {
   margin: -1px;
   margin-bottom: 0;
   border-top-left-radius: var(--radius);
   border-top-right-radius: var(--radius);
 }
-.pane-media:not(:first-child)::after {
+.pane-media-default:not(:first-child)::after {
   border-top: 0;
 }
-.pane-media:not(:last-child)::after {
+.pane-media-default:not(:last-child)::after {
   border-bottom: 0;
 }
 
 .pane-media-inset {
-  margin: 21px;
+  margin: 18px;
   border-radius: var(--radius-half);
 }
 .pane-media-inset:not(:first-child) {
@@ -1224,19 +1231,6 @@
   object-position: center;
 }
 
-.pane-deck {
-  overflow: hidden;
-}
-.pane-deck > .base-auto-grid {
-  margin-right: -1px;
-  margin-bottom: -1px;
-}
-.pane-deck > .base-auto-grid > .pane {
-  border-top: 0;
-  border-left: 0;
-  border-radius: 0;
-}
-
 .pane-group {
   position: relative;
 }
@@ -1302,7 +1296,7 @@
   top: var(--pane-y);
   left: var(--pane-x);
   margin: 0;
-  padding: 24px;
+  padding: 30px;
   background: unset;
   border: 0;
   font-size: 1rem;
@@ -1349,12 +1343,6 @@
     opacity: 0;
     transform: translate3d(0, 100%, 0);
   }
-}@layer flux-base {
-  .base-auto-grid {
-    --min-column-width: 0;
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(calc(var(--min-column-width) * 1px), 1fr));
-  }
 }.aspect-ratio {
   position: relative;
   flex-shrink: 0;
@@ -1367,9 +1355,6 @@
   object-position: center;
 }
 
-.auto-grid {
-}
-
 .container {
   margin-left: auto;
   margin-right: auto;
@@ -1398,6 +1383,17 @@
   }
 }
 
+.column {
+  display: flex;
+  flex-flow: column;
+  gap: var(--gap, 0);
+}
+
+.row {
+  display: flex;
+  gap: var(--gap, 0);
+}
+
 .spacer {
   flex-grow: 1;
 }
@@ -1423,6 +1419,30 @@
 .stack-vertical {
   display: flex;
   flex-flow: column;
+}.adaptive-group {
+  display: flex;
+  overflow: hidden;
+  flex-flow: row nowrap;
+  gap: var(--gap, 9px);
+  min-width: 0;
+}
+
+.adaptive-slot {
+  display: flex;
+  overflow: hidden;
+  flex-flow: row nowrap;
+  min-width: 0;
+}
+
+.adaptive-slot-measurer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  visibility: hidden;
+  flex-flow: row nowrap;
+  width: max-content;
+  pointer-events: none;
 }@property --shine-degrees {
   syntax: "<angle>";
   initial-value: 0deg;
@@ -1515,7 +1535,7 @@
 
 .fade-transition-enter-active,
 .fade-transition-leave-active {
-  transition: opacity 180ms var(--swift-out) !important;
+  transition: opacity var(--transition-default) !important;
 }
 
 .fade-transition-enter-from,
@@ -1628,7 +1648,7 @@
   height: 1em;
   width: 1em;
   flex: 0 0 1em;
-  border-radius: 0.5em;
+  border-radius: 0.3em;
   user-select: none;
 }
 
@@ -1684,18 +1704,17 @@
   backdrop-filter: blur(3px) saturate(180%);
 }
 .avatar-loading .spinner {
-  --track: rgb(0 0 0 / .12);
+  --track: rgb(from var(--gray-950) r g b / .12);
 }
 
 .avatar-status {
   position: absolute;
   display: block;
-  right: 0.0238095238em;
-  bottom: 0.0238095238em;
-  height: 0.285714286em;
-  width: 0.285714286em;
-  background: black;
-  border-radius: 99px;
+  right: 0.021em;
+  bottom: 0.021em;
+  height: 0.27em;
+  width: 0.27em;
+  border-radius: var(--radius-full);
 }
 
 .avatar-status-gray {
@@ -1737,8 +1756,8 @@
 
 .status-avatar .avatar-fallback,
 .status-avatar .avatar-image {
-  mask: url("./0db98648.svg") no-repeat center center/cover;
-  -webkit-mask: url("./0db98648.svg") no-repeat center center/cover;
+  mask: radial-gradient(circle 0.18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
+  -webkit-mask: radial-gradient(circle 0.18em at calc(100% - 0.16em) calc(100% - 0.16em), transparent 100%, #000 100%);
 }
 
 .persona {
@@ -1751,7 +1770,7 @@
   border-radius: var(--radius);
   cursor: pointer;
   text-align: left;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: background, outline-color, outline-offset;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
@@ -1792,7 +1811,7 @@
   gap: 6px;
   background: var(--surface);
   border: 1px solid var(--surface-stroke);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--foreground-prominent);
   font-size: 13px;
   font-weight: 500;
@@ -1802,7 +1821,7 @@
   color: var(--foreground-prominent);
   cursor: pointer;
   text-decoration: none;
-  transition: background 180ms var(--swift-out);
+  transition: background var(--transition-default);
 }
 @media (hover: hover) {
   .badge:is(a):hover {
@@ -1824,7 +1843,7 @@
   justify-content: center;
   background: unset;
   border: 0;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--foreground-secondary);
   cursor: pointer;
 }
@@ -1847,7 +1866,7 @@
   height: 9px;
   width: 9px;
   background: var(--color);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
 }
 
 .badge-icon {
@@ -2073,7 +2092,6 @@
 .menu-item {
   height: unset;
   min-height: 42px;
-  padding: 6px 12px;
   gap: 15px;
   justify-content: flex-start;
   border: 0;
@@ -2094,10 +2112,6 @@
 }
 
 .menu-item-icon {
-  margin-left: 2px;
-  margin-right: 2px;
-  color: var(--foreground-prominent);
-  font-size: 16px;
 }
 
 .menu-item-label {
@@ -2157,6 +2171,47 @@
   margin-left: 33px;
 }
 
+.menu-collapsible {
+  display: flex;
+  flex-flow: column;
+}
+
+.menu-collapsible-opened {
+}
+
+.menu-collapsible-body {
+  position: relative;
+  min-height: 0;
+  transition: height 300ms var(--swift-out), opacity 200ms var(--swift-out);
+}
+.menu-collapsible-body::before {
+  content: "";
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 21px;
+  width: 2px;
+  background: var(--surface-stroke);
+}
+.menu-collapsible-body.v-enter-from, .menu-collapsible-body.v-leave-to {
+  opacity: 0;
+}
+.menu-collapsible-body.v-enter-to, .menu-collapsible-body.v-leave-from {
+  opacity: 1;
+}
+.menu-collapsible-body.v-enter-active, .menu-collapsible-body.v-leave-active {
+  overflow: hidden;
+}
+
+.menu-collapsible-content {
+  display: flex;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  padding-left: 35px;
+  flex-flow: column;
+  gap: 3px;
+}
+
 .menu-item-selectable-icon {
 }
 
@@ -2199,6 +2254,11 @@
   border-radius: 3px;
 }
 
+.menu-item .avatar {
+  margin: -3px;
+  font-size: 24px;
+}
+
 .menu-group-horizontal .menu-item {
   flex-basis: 0;
   flex-grow: 1;
@@ -2224,7 +2284,6 @@
   align-items: center;
   gap: 9px;
   background: linear-gradient(to bottom, var(--surface) 75%, transparent);
-  font-size: 14px;
   pointer-events: none;
   z-index: 1;
 }
@@ -2240,6 +2299,7 @@
 
 .menu-sub-header-label {
   flex-grow: 1;
+  font-size: 14px;
 }
 
 .menu-item + .menu-sub-header {
@@ -2260,9 +2320,9 @@
   width: 4px;
   content: "";
   background: var(--primary-600);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   opacity: 0;
-  transition: opacity 180ms var(--swift-out);
+  transition: opacity var(--transition-default);
 }
 
 .menu-large .menu-item:not(.menu-item-indented) {
@@ -2305,8 +2365,8 @@
   margin-bottom: 9px;
 }
 .expandable-body > .menu > :where(.divider, .separator) {
-  margin-left: 21px;
-  margin-right: 21px;
+  margin-left: 18px;
+  margin-right: 18px;
 }.form-input-group > .button-group > .button, .form-input-group > :is(.form-input, .form-select, .button) {
   height: 100%;
   min-height: unset;
@@ -2448,24 +2508,33 @@
   height: 42px;
   width: 100%;
   padding: 0 12px;
-  align-self: start;
   background: var(--surface);
   background-clip: padding-box;
   border: 1px solid var(--surface-stroke);
   border-radius: var(--radius);
   box-shadow: var(--shadow-px);
   color: var(--foreground);
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: background, border-color, outline-color, outline-offset;
 }
 .form-input::placeholder {
   color: var(--foreground-secondary);
 }
 .form-input.is-secondary {
-  background: var(--background);
+  background: var(--gray-100);
   border-color: transparent;
   box-shadow: none;
 }
+.form-input.is-condensed {
+  height: 34px;
+}
+.form-input.is-invalid {
+  border-color: var(--danger-500);
+}
+
+.form .form-input {
+  align-self: start;
+}
 
 .form-input-disabled {
   background: var(--surface-disabled);
@@ -2724,12 +2793,13 @@
   outline: 0 !important;
 }
 .form-select-input .form-input-icon {
+  right: 0;
   margin: 15px;
   font-size: 18px;
 }
 .form-select-input .form-input-native {
-  padding-left: 21px;
-  padding-right: 21px;
+  padding-left: 18px;
+  padding-right: 18px;
 }
 
 .form-select-placeholder {
@@ -2810,6 +2880,26 @@
   gap: 12px;
   outline: 0;
 }
+.checkbox.is-disabled {
+  cursor: not-allowed;
+}
+.checkbox.is-disabled .checkbox-element {
+  background: var(--surface-disabled);
+  border-color: var(--surface-stroke);
+  color: var(--foreground-secondary);
+}
+.checkbox.is-disabled .checkbox-label {
+  color: var(--foreground-secondary);
+}
+.checkbox.is-readonly {
+  cursor: default;
+}
+.checkbox.is-readonly .checkbox-native {
+  pointer-events: none;
+}
+.checkbox.is-invalid .checkbox-element {
+  border-color: var(--danger-500);
+}
 
 .checkbox-element,
 .checkbox-native {
@@ -2881,7 +2971,7 @@
   border-radius: var(--radius);
   box-shadow: var(--shadow-px);
   overflow: hidden;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: border-color, outline-color, outline-offset;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
@@ -2955,7 +3045,7 @@
   line-height: 3.3ch;
   outline: 0;
   text-align: center;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: border-color, outline-color, outline-offset;
 }
 
@@ -2988,7 +3078,7 @@
   flex: 0 0 auto;
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   contain: paint;
 }
 .toggle.is-checked {
@@ -3016,6 +3106,12 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+.toggle.is-readonly .toggle-input {
+  pointer-events: none;
+}
+.toggle.is-invalid {
+  border-color: var(--danger-500);
+}
 
 .toggle-icon {
   position: absolute;
@@ -3063,7 +3159,7 @@
   content: "";
   background: var(--surface);
   border: 1px solid var(--surface-stroke);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   box-shadow: var(--shadow-sm);
 }
 
@@ -3097,12 +3193,12 @@
   background: var(--surface);
   background-clip: padding-box;
   border: 1px solid var(--surface-stroke-out);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   box-shadow: var(--shadow-sm);
   cursor: grab;
   outline: 0;
   translate: -50% -50%;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: outline-color, outline-offset;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
   outline-offset: 0;
@@ -3130,8 +3226,9 @@
   position: relative;
   height: 12px;
   background: var(--gray-50);
+  background-clip: padding-box;
   border-radius: var(--radius-half);
-  box-shadow: inset 0 0 0 1px var(--surface-stroke);
+  box-shadow: inset 0 0 0 1px var(--surface-stroke-out);
 }
 
 .slider-track-value {
@@ -3154,7 +3251,7 @@
   height: 9px;
   width: 2px;
   background: var(--gray-300);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--foreground-prominent);
   font-size: 10px;
   font-weight: 600;
@@ -3178,6 +3275,103 @@
   position: relative;
   display: block;
   height: 21px;
+}.tree-node {
+  display: flex;
+  width: 100%;
+  min-height: 36px;
+  padding: 0 8px;
+  align-items: center;
+  border-radius: var(--radius-half);
+  color: var(--foreground);
+  font-size: 14px;
+  gap: 8px;
+  outline: 0;
+  transition: 150ms var(--swift-out);
+  transition-property: background, color;
+  user-select: none;
+}
+
+.tree-node-line-area {
+  display: flex;
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+.tree-indent {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-indent.has-line::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+
+.tree-connector {
+  position: relative;
+  width: 20px;
+  align-self: stretch;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.tree-connector:not(.is-last)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 9px;
+  width: 1px;
+  background: var(--surface-stroke);
+}
+.tree-connector::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 50%;
+  left: 9px;
+  right: 0;
+  border-left: 1px solid var(--surface-stroke);
+  border-bottom: 1px solid var(--surface-stroke);
+  border-bottom-left-radius: 6px;
+}
+
+.tree-node-expand {
+  display: flex;
+  width: 16px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground-secondary);
+}
+.tree-node-expand:not(:empty) {
+  cursor: pointer;
+}
+
+.tree-node-color-dot {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.tree-node-icon {
+  color: var(--foreground-secondary);
+  flex-shrink: 0;
+}
+
+.tree-node-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }.divider {
   position: relative;
   display: grid;
@@ -3296,7 +3490,7 @@
 }
 
 .calendar-cell {
-  padding: 12px 21px;
+  padding: 12px 18px;
   background: var(--gray-25);
 }
 
@@ -3331,7 +3525,7 @@
 
 .calendar-entry-date {
   position: absolute;
-  right: 21px;
+  right: 18px;
   bottom: 15px;
   color: var(--foreground);
   font-size: 15px;
@@ -3370,12 +3564,12 @@
   margin-right: -22px;
 }
 .calendar-event.is-start {
-  margin-right: -21px;
+  margin-right: -18px;
   border-top-left-radius: var(--radius-half);
   border-bottom-left-radius: var(--radius-half);
 }
 .calendar-event.is-end {
-  margin-left: -21px;
+  margin-left: -18px;
   border-top-right-radius: var(--radius-half);
   border-bottom-right-radius: var(--radius-half);
 }
@@ -3456,7 +3650,7 @@
   cursor: pointer;
   font-size: 14px;
   outline: 0;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: background, border-radius, color, opacity;
 }
 @media (hover: hover) {
@@ -3557,9 +3751,9 @@
   gap: 9px;
   background: var(--gray-50);
   border: 1px solid var(--gray-200);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--foreground);
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: background, border, color, outline-color, outline-offset;
 }
 .chip.is-selectable {
@@ -4034,7 +4228,7 @@
 }.color-picker {
   --transparent: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC);
   display: flex;
-  padding: 21px;
+  padding: 18px;
   flex-flow: column;
   gap: 15px;
 }
@@ -4423,11 +4617,11 @@ tfoot .table-cell {
 }
 
 .base-pane-structure > .table .table-cell:first-child .table-cell-content {
-  padding-left: 21px;
+  padding-left: 18px;
 }
 
 .base-pane-structure > .table .table-cell:last-child .table-cell-content {
-  padding-right: 21px;
+  padding-right: 18px;
 }
 
 .base-pane-structure > .table .table-actions {
@@ -4435,7 +4629,7 @@ tfoot .table-cell {
 }
 
 .base-pane-structure > .table :is(caption) {
-  padding: 12px 21px;
+  padding: 12px 18px;
   border-top: 1px solid var(--gray-100);
 }
 
@@ -4552,9 +4746,9 @@ tfoot .table-cell {
 
 .expandable-header {
   display: flex;
-  height: 60px;
-  padding-left: 21px;
-  padding-right: 21px;
+  height: 54px;
+  padding-left: 18px;
+  padding-right: 18px;
   align-items: center;
   gap: 12px;
   background: unset;
@@ -4562,7 +4756,7 @@ tfoot .table-cell {
   color: var(--foreground-prominent);
   cursor: pointer;
   text-align: left;
-  transition: background 180ms var(--swift-out);
+  transition: background var(--transition-default);
   transition-property: background, outline-color, outline-offset;
   z-index: 1;
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
@@ -4603,7 +4797,7 @@ tfoot .table-cell {
 }
 
 .expandable-content {
-  padding: 0 21px 21px;
+  padding: 0 18px 18px;
 }
 
 .base-pane > .expandable {
@@ -4726,7 +4920,7 @@ tfoot .table-cell {
   width: 42px;
   background: rgba(0, 0, 0, 0.1);
   border: 4px solid white;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   box-shadow: var(--shadow-md);
   cursor: move;
   transform: translate3d(-50%, -50%, 0);
@@ -4805,19 +4999,6 @@ tfoot .table-cell {
 }
 
 .tree-node {
-  display: flex;
-  width: 100%;
-  min-height: 36px;
-  padding: 0 8px;
-  align-items: center;
-  border-radius: var(--radius-half);
-  color: var(--foreground);
-  font-size: 14px;
-  gap: 8px;
-  outline: 0;
-  transition: 150ms var(--swift-out);
-  transition-property: background, color;
-  user-select: none;
 }
 .tree-node.is-selectable, .tree-node.is-expandable {
   cursor: pointer;
@@ -4847,89 +5028,6 @@ tfoot .table-cell {
 .tree-node-check {
   color: var(--primary-600);
   flex-shrink: 0;
-}
-
-.tree-node-line-area {
-  display: flex;
-  align-self: stretch;
-  flex-shrink: 0;
-}
-
-.tree-indent {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-indent.has-line::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
-}
-
-.tree-connector {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-connector:not(.is-last)::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
-}
-.tree-connector::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 50%;
-  left: 9px;
-  right: 0;
-  border-left: 1px solid var(--surface-stroke);
-  border-bottom: 1px solid var(--surface-stroke);
-  border-bottom-left-radius: 6px;
-}
-
-.tree-node-expand {
-  display: flex;
-  width: 16px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  color: var(--foreground-secondary);
-}
-.tree-node-expand:not(:empty) {
-  cursor: pointer;
-}
-
-.tree-node-color-dot {
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.tree-node-icon {
-  color: var(--foreground-secondary);
-  flex-shrink: 0;
-}
-
-.tree-node-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }.remove {
   position: absolute;
   display: flex;
@@ -4941,7 +5039,7 @@ tfoot .table-cell {
   justify-content: center;
   background: var(--danger-600);
   border: 3px solid var(--surface);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--danger-25);
   cursor: pointer;
   transition: 300ms var(--swift-out);
@@ -5134,7 +5232,7 @@ tfoot .table-cell {
 }.item {
   display: flex;
   flex-flow: row nowrap;
-  gap: 21px;
+  gap: 18px;
   text-align: left;
 }
 
@@ -5184,14 +5282,14 @@ tfoot .table-cell {
   position: relative;
 }
 .item-stack .item + .item {
-  margin-top: 21px;
-  padding-top: 21px;
+  margin-top: 18px;
+  padding-top: 18px;
   border-top: 1px solid var(--surface-stroke);
 }
 
 .base-pane-structure > .item,
 .base-pane-structure > .item-stack > .item {
-  padding: 21px;
+  padding: 18px;
 }
 
 .base-pane-structure > .item-stack > .item {
@@ -5200,8 +5298,47 @@ 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 {
-  gap: 12px 21px;
+  gap: 12px 18px;
 }
 
 .legend-vertical {
@@ -5223,7 +5360,7 @@ tfoot .table-cell {
   content: "";
   flex: 0 0 12px;
   background: var(--color);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
 }.notice {
   display: flex;
   padding: 12px 15px;
@@ -5342,7 +5479,7 @@ tfoot .table-cell {
 }
 .notice-primary .notice-prefix,
 .notice-primary .notice-title {
-  color: var(--primary-600);
+  color: var(--primary-800);
 }
 .notice-primary .button {
   border-color: var(--primary-300);
@@ -5365,7 +5502,7 @@ tfoot .table-cell {
 }
 .notice-danger .notice-prefix,
 .notice-danger .notice-title {
-  color: var(--danger-600);
+  color: var(--danger-800);
 }
 .notice-danger .button {
   border-color: var(--danger-300);
@@ -5388,7 +5525,7 @@ tfoot .table-cell {
 }
 .notice-info .notice-prefix,
 .notice-info .notice-title {
-  color: var(--info-600);
+  color: var(--info-800);
 }
 .notice-info .button {
   border-color: var(--info-300);
@@ -5411,7 +5548,7 @@ tfoot .table-cell {
 }
 .notice-success .notice-prefix,
 .notice-success .notice-title {
-  color: var(--success-600);
+  color: var(--success-800);
 }
 .notice-success .button {
   border-color: var(--success-300);
@@ -5434,7 +5571,7 @@ tfoot .table-cell {
 }
 .notice-warning .notice-prefix,
 .notice-warning .notice-title {
-  color: var(--warning-600);
+  color: var(--warning-800);
 }
 .notice-warning .button {
   border-color: var(--warning-300);
@@ -5448,8 +5585,8 @@ tfoot .table-cell {
 }
 
 .base-pane > .notice {
-  padding-left: 21px;
-  padding-right: 21px;
+  padding-left: 18px;
+  padding-right: 18px;
 }.percentage-bar {
   display: flex;
   flex-flow: column;
@@ -5459,7 +5596,7 @@ tfoot .table-cell {
 .percentage-bar-segment {
   height: 12px;
   border-radius: calc(var(--radius) / 3);
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: height, margin, flex-grow;
 }
 .percentage-bar-segment:hover {
@@ -5626,7 +5763,7 @@ tfoot .table-cell {
   font-weight: 500;
   outline: 0;
   text-align: center;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: background, color;
 }
 .snackbar-action:hover {
@@ -5769,8 +5906,8 @@ tfoot .table-cell {
   max-width: 360px;
   padding: 9px 15px;
   flex-flow: column;
-  background: rgb(from var(--gray-950) r g b/0.9);
-  backdrop-filter: blur(6px) saturate(180%);
+  background: var(--overlay-strong);
+  backdrop-filter: blur(3px) saturate(180%);
   border-radius: var(--radius);
   color: var(--gray-25);
   font-size: 14px;
@@ -5797,8 +5934,7 @@ tfoot .table-cell {
 }
 
 [dark] .tooltip {
-  background: rgba(0, 0, 0, 0.9);
-  color: white;
+  color: var(--gray-700);
 }
 
 .tooltip-above {
@@ -5850,6 +5986,7 @@ tfoot .table-cell {
   pointer-events: none;
   transition: 300ms var(--swift-out);
   transition-property: left, width;
+  translate: -1px 0;
 }
 
 .segmented-control-item {
@@ -5895,10 +6032,10 @@ tfoot .table-cell {
 .segmented-control-separator.is-active {
   opacity: 0;
 }.statistic {
-  padding: 21px;
+  padding: 18px;
   flex-basis: 0;
   flex-grow: 1;
-  gap: 21px;
+  gap: 18px;
 }
 
 .statistic-change {
@@ -6100,7 +6237,7 @@ tfoot .table-cell {
   justify-content: center;
   background: var(--gray-100);
   border: 0;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   color: var(--foreground);
   cursor: default;
   font-size: 14px;
@@ -6163,7 +6300,7 @@ tfoot .table-cell {
   color: var(--foreground);
   cursor: pointer;
   outline: 0;
-  transition: background 180ms var(--swift-out);
+  transition: background var(--transition-default);
   z-index: 1;
 }
 @media (hover: hover) {
@@ -6189,8 +6326,8 @@ tfoot .table-cell {
   margin-right: -3px;
   padding-left: 3px;
   padding-right: 3px;
-  align-items: flex-end;
-  gap: 30px;
+  align-items: center;
+  gap: 27px;
   overflow: auto;
   scrollbar-width: none;
   -webkit-mask-image: var(--mask);
@@ -6216,7 +6353,7 @@ tfoot .table-cell {
   cursor: pointer;
   font-weight: 500;
   outline: 0;
-  transition: 180ms var(--swift-out);
+  transition: var(--transition-default);
   transition-property: border-color, color;
   white-space: nowrap;
 }
@@ -6226,7 +6363,7 @@ tfoot .table-cell {
   content: "";
   border-radius: var(--radius);
   pointer-events: none;
-  transition: 180ms var(--swift-out) outline-color, outline-offset;
+  transition: var(--transition-default) outline-color, outline-offset;
 }
 .tab-bar-item::before {
   outline: 2px solid rgb(from var(--primary-600) r g b/0);
@@ -6267,8 +6404,8 @@ tfoot .table-cell {
 .base-pane-structure > .form > .tab-bar,
 .base-pane-structure > .form > .tabs > .tab-bar {
   --tab-padding: 18px;
-  padding-left: 21px;
-  padding-right: 21px;
+  padding-left: 18px;
+  padding-right: 18px;
   background: var(--gray-50);
 }
 .base-pane-structure > .tab-bar:first-child,
@@ -6323,7 +6460,7 @@ tfoot .table-cell {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 99px;
+  border-radius: var(--radius-full);
   outline: 6px solid var(--surface);
 }
 
@@ -6348,7 +6485,7 @@ tfoot .table-cell {
   align-items: center;
   justify-content: center;
   background: var(--gray-25);
-  border-radius: 99px;
+  border-radius: var(--radius-full);
 }
 
 .timeline-item-photo-image {
@@ -6489,10 +6626,10 @@ tfoot .table-cell {
   translate: 0 50%;
 }
 .toolbar-floating.is-top-end, .toolbar-floating.is-bottom-end {
-  right: 21px;
+  right: 18px;
 }
 .toolbar-floating.is-top-start, .toolbar-floating.is-bottom-start {
-  left: 21px;
+  left: 18px;
 }
 
 .base-pane-structure > .toolbar-flat {
@@ -6520,7 +6657,7 @@ tfoot .table-cell {
 }
 
 .pane-header + .toolbar-flat {
-  margin-top: 21px;
+  margin-top: 18px;
 }.tree-view {
   display: flex;
   flex-flow: column;
@@ -6528,20 +6665,7 @@ tfoot .table-cell {
 }
 
 .tree-node {
-  display: flex;
-  width: 100%;
-  min-height: 36px;
-  padding: 0 8px;
-  align-items: center;
-  border-radius: var(--radius-half);
-  color: var(--foreground);
   cursor: pointer;
-  font-size: 14px;
-  gap: 8px;
-  outline: 0;
-  transition: 150ms var(--swift-out);
-  transition-property: background, color;
-  user-select: none;
 }
 @media (hover: hover) {
   .tree-node:hover {
@@ -6550,87 +6674,4 @@ tfoot .table-cell {
 }
 .tree-node.is-highlighted {
   background: var(--surface-hover);
-}
-
-.tree-node-line-area {
-  display: flex;
-  align-self: stretch;
-  flex-shrink: 0;
-}
-
-.tree-indent {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-indent.has-line::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
-}
-
-.tree-connector {
-  position: relative;
-  width: 20px;
-  align-self: stretch;
-  flex-shrink: 0;
-  pointer-events: none;
-}
-.tree-connector:not(.is-last)::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 9px;
-  width: 1px;
-  background: var(--surface-stroke);
-}
-.tree-connector::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 50%;
-  left: 9px;
-  right: 0;
-  border-left: 1px solid var(--surface-stroke);
-  border-bottom: 1px solid var(--surface-stroke);
-  border-bottom-left-radius: 6px;
-}
-
-.tree-node-expand {
-  display: flex;
-  width: 16px;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  color: var(--foreground-secondary);
-}
-.tree-node-expand:not(:empty) {
-  cursor: pointer;
-}
-
-.tree-node-color-dot {
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.tree-node-icon {
-  color: var(--foreground-secondary);
-  flex-shrink: 0;
-}
-
-.tree-node-label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }/*$vite$:1*/