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

package/dist/index.css

@@ -646,7 +646,6 @@
 }
 .fractal-floating-field:where(:focus-within, [data-filled=true], [data-open=true], [data-always-float=true], :has(input:not(:placeholder-shown)), :has(textarea:not(:placeholder-shown))) > .fractal-floating-field__label {
   transform: translateY(-50%) scale(0.75);
-  background: var(--bg-canvas);
   color: var(--fg-secondary);
 }
 .fractal-floating-field:is(:focus-within, [data-open=true]) > .fractal-floating-field__label {
@@ -692,6 +691,50 @@
 .fractal-floating-field > textarea {
   box-sizing: border-box;
 }
+.fractal-floating-field > :is(.fractal-input, .fractal-textarea, .fractal-dropdown-trigger) {
+  border-color: transparent;
+}
+.fractal-floating-field__border {
+  position: absolute;
+  pointer-events: none;
+  inset: calc(var(--control-line-height) * -0.375) 0 0;
+  min-width: 0;
+  margin: 0;
+  padding: 0 calc(var(--field-label-inset) - 4px);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+}
+.fractal-floating-field--dropdown > .fractal-floating-field__border,
+.fractal-floating-field--textarea > .fractal-floating-field__border {
+  border-color: var(--border-subtle);
+  border-radius: var(--radius-md);
+}
+.fractal-floating-field__border legend {
+  float: none;
+  width: 0;
+  max-width: 100%;
+  height: calc(var(--control-line-height) * 0.75);
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font: 400 calc(var(--control-font-size) * 0.75) / 1 var(--font-sans);
+  visibility: hidden;
+}
+.fractal-floating-field__border legend span {
+  padding-inline: 3px;
+}
+.fractal-floating-field:where(:focus-within, [data-filled=true], [data-open=true], [data-always-float=true], :has(input:not(:placeholder-shown)), :has(textarea:not(:placeholder-shown))) > .fractal-floating-field__border legend {
+  width: auto;
+}
+.fractal-floating-field:has(:is(input, textarea):focus-visible) > .fractal-floating-field__border {
+  border-color: var(--border-focus);
+}
+.fractal-floating-field:has(:is(input, textarea):disabled) > .fractal-floating-field__border {
+  opacity: 0.5;
+}
+.fractal-floating-field:has(.fractal-dropdown-trigger--tertiary) > .fractal-floating-field__border {
+  border-color: transparent;
+}
 
 /* src/components/TableSearch/TableSearch.css */
 .fractal-table-search {
@@ -3865,11 +3908,10 @@
   width: max-content;
   max-width: min(var(--tooltip-max-width), var(--radix-tooltip-content-available-width));
   padding: var(--space-2) var(--space-3);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  background: var(--bg-surface-1);
-  color: var(--fg-primary);
-  box-shadow: var(--shadow-md);
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: var(--bg-inverse);
+  color: var(--fg-inverse);
   font-family: var(--font-sans);
   font-size: 0.75rem;
   font-weight: 400;
@@ -3877,6 +3919,9 @@
   overflow-wrap: anywhere;
   animation: fractal-tooltip-enter var(--duration-normal) var(--ease-out);
 }
+.fractal-tooltip-arrow {
+  fill: var(--bg-inverse);
+}
 .fractal-tooltip[data-state=closed] {
   animation: fractal-tooltip-exit var(--duration-fast) var(--ease-in) forwards;
 }