@mirror-physics/fractal-ui 0.2.0-next.84 → 0.2.0-next.86

package/dist/index.css

@@ -70,7 +70,7 @@
 }
 .fractal-button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus, var(--blue-500));
+  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus);
 }
 .fractal-button:disabled {
   opacity: 0.5;
@@ -459,7 +459,7 @@
 }
 .fractal-prompt-card:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus, var(--blue-500));
+  box-shadow: 0 0 0 2px var(--bg-canvas, #fff), 0 0 0 4px var(--border-focus);
 }
 .fractal-prompt-card__icon {
   width: 40px;
@@ -592,7 +592,7 @@
   border: 1px solid var(--border-default);
   background-color: var(--bg-canvas);
   color: var(--fg-primary);
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  transition: border-color var(--duration-fast) var(--ease-out);
   box-sizing: border-box;
 }
 .fractal-input::placeholder {
@@ -601,7 +601,7 @@
 .fractal-input:focus-visible {
   outline: none;
   border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--accent-surface);
+  box-shadow: 0 0 0 3px var(--focus-surface);
 }
 .fractal-input:disabled {
   cursor: not-allowed;
@@ -1762,7 +1762,7 @@
   font-family: var(--font-sans);
   color: var(--fg-primary);
   cursor: pointer;
-  transition: background-color 0.15s;
+  transition: background-color var(--duration-fast) var(--ease-out);
 }
 .fractal-dropdown-trigger--vertical {
   flex-direction: column;
@@ -1836,8 +1836,9 @@
   width: max-content;
   max-height: 320px;
   max-width: calc(100vw - 16px);
-  overflow-x: hidden;
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   overscroll-behavior: contain;
   box-sizing: border-box;
   border-radius: var(--radius-md, 6px);
@@ -1872,7 +1873,7 @@
   border-radius: var(--radius-sm, 4px);
   cursor: pointer;
   color: var(--fg-primary);
-  transition: background-color 0.1s;
+  transition: background-color var(--duration-fast) var(--ease-out);
 }
 .fractal-dropdown-option:hover,
 .fractal-dropdown-option:focus-visible {
@@ -1903,17 +1904,47 @@
   width: var(--control-icon-size);
   height: var(--control-icon-size);
 }
+.fractal-dropdown-options {
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.fractal-dropdown-search-container {
+  position: relative;
+  flex-shrink: 0;
+  padding-bottom: var(--space-1);
+  background: var(--bg-canvas);
+}
+.fractal-dropdown-search-container::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: calc(-1 * var(--space-1));
+  right: calc(-1 * var(--space-1));
+  height: 1px;
+  background: var(--border-subtle);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+.fractal-dropdown-search-container[data-scrolled=true]::after {
+  opacity: 1;
+}
 .fractal-dropdown-search {
   display: flex;
   align-items: center;
   gap: var(--space-2);
   padding: var(--control-padding-block) var(--control-padding-inline);
-  border-bottom: 1px solid var(--border-subtle);
-  margin-bottom: var(--space-1);
   border-radius: var(--radius-sm);
 }
 .fractal-dropdown-search:focus-within {
-  box-shadow: inset 0 0 0 2px var(--border-focus);
+  box-shadow: inset 0 0 0 1px var(--border-focus), 0 0 0 3px var(--focus-surface);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-dropdown-search-container::after {
+    transition: none;
+  }
 }
 .fractal-dropdown-search > svg {
   width: var(--control-icon-size);
@@ -3465,7 +3496,7 @@
 .fractal-textarea:focus-visible {
   outline: none;
   border-color: var(--border-focus);
-  box-shadow: 0 0 0 2px var(--accent-surface);
+  box-shadow: 0 0 0 3px var(--focus-surface);
 }
 .fractal-textarea:disabled {
   cursor: not-allowed;