@mirror-physics/fractal-ui 0.2.0-next.76 → 0.2.0-next.77

package/dist/index.css

@@ -2834,7 +2834,7 @@
   display: flex;
   justify-content: flex-end;
   background: color-mix(in srgb, var(--fg-primary) 16%, transparent);
-  animation: fractal-side-panel-overlay-in 180ms ease-out both;
+  animation: fractal-side-panel-overlay-in var(--duration-normal) var(--ease-out) both;
 }
 .fractal-side-panel {
   display: flex;
@@ -2846,7 +2846,7 @@
   box-shadow: var(--shadow-lg);
   color: var(--fg-primary);
   font-family: var(--font-sans);
-  animation: fractal-side-panel-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: fractal-side-panel-in var(--duration-normal) var(--ease-out) both;
 }
 .fractal-side-panel--sm {
   width: min(100vw, 420px);
@@ -2920,7 +2920,33 @@
   justify-content: flex-end;
   gap: var(--space-2);
   padding: var(--space-4) var(--space-6);
-  border-top: 1px solid var(--border-subtle);
+  border-top: 1px solid transparent;
+}
+.fractal-side-panel__header,
+.fractal-side-panel__footer {
+  position: relative;
+  flex-shrink: 0;
+}
+.fractal-side-panel__header::after,
+.fractal-side-panel__footer::before {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  height: 1px;
+  background: var(--border-subtle);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+.fractal-side-panel__header::after {
+  bottom: 0;
+}
+.fractal-side-panel__footer::before {
+  top: -1px;
+}
+.fractal-side-panel__header[data-scroll-divider=true]::after,
+.fractal-side-panel__footer[data-scroll-divider=true]::before {
+  opacity: 1;
 }
 @media (max-width: 640px) {
   .fractal-side-panel {
@@ -2955,7 +2981,11 @@
 @media (prefers-reduced-motion: reduce) {
   .fractal-side-panel-overlay,
   .fractal-side-panel {
-    animation-duration: 0.01ms;
+    animation: none;
+  }
+  .fractal-side-panel__header::after,
+  .fractal-side-panel__footer::before {
+    transition: none;
   }
 }