@mirror-physics/fractal-ui 0.2.0-next.78 → 0.2.0-next.80

package/dist/index.css

@@ -1,11 +1,4 @@
 /* src/styles/control.css */
-[data-control-size=xs] {
-  --control-font-size: var(--control-xs-font-size);
-  --control-line-height: var(--control-xs-line-height);
-  --control-padding-block: var(--control-xs-padding-block);
-  --control-padding-inline: var(--control-xs-padding-inline);
-  --control-icon-size: var(--control-xs-icon-size);
-}
 [data-control-size=sm] {
   --control-font-size: var(--control-sm-font-size);
   --control-line-height: var(--control-sm-line-height);
@@ -100,6 +93,16 @@
   inline-size: var(--control-min-block-size);
   padding-inline: 0;
 }
+.fractal-button--primary:not(:disabled) {
+  background-color: var(--button-primary-bg, var(--fg-primary));
+  color: var(--button-primary-fg, var(--fg-inverse));
+}
+.fractal-button--primary:not(:disabled):hover {
+  background-color: var(--button-primary-hover, var(--fg-secondary));
+}
+.fractal-button--primary:not(:disabled):active {
+  background-color: var(--button-primary-active, var(--fg-primary));
+}
 
 /* src/components/CodeBlock/CodeBlock.css */
 .fractal-code-block {
@@ -596,6 +599,82 @@
   padding: 0;
 }
 
+/* src/styles/floating-field.css */
+.fractal-floating-field {
+  position: relative;
+  min-width: 0;
+  width: 100%;
+  --field-label-inset: var(--control-padding-inline);
+}
+.fractal-floating-field__label {
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: calc(var(--field-label-inset, var(--control-padding-inline)) - 4px);
+  max-width: calc(100% - var(--field-label-inset, var(--control-padding-inline)) - var(--control-padding-inline));
+  padding-inline: 4px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  font-family: var(--font-sans);
+  font-size: var(--control-font-size);
+  line-height: var(--control-line-height);
+  font-weight: 400;
+  color: var(--fg-primary);
+  transform-origin: left center;
+  transform: translateY(calc((var(--control-min-block-size) - 100%) / 2));
+  transition: transform var(--duration-normal) var(--ease-out), color var(--duration-fast) var(--ease-out);
+  cursor: text;
+}
+.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 {
+  color: var(--fg-primary);
+}
+.fractal-floating-field:has(:disabled) > .fractal-floating-field__label {
+  color: var(--fg-disabled);
+  cursor: not-allowed;
+}
+.fractal-floating-field:not(:focus-within) input:placeholder-shown::placeholder,
+.fractal-floating-field:not(:focus-within) textarea:placeholder-shown::placeholder {
+  color: transparent;
+}
+.fractal-floating-field[data-always-float=true] input::placeholder {
+  color: var(--fg-placeholder);
+}
+.fractal-floating-field--dropdown:not(:focus-within):not([data-open=true]):not([data-filled=true]) .fractal-dropdown-field-value {
+  opacity: 0;
+}
+.fractal-dropdown-field-value {
+  display: flex;
+  align-items: center;
+  gap: var(--control-icon-gap);
+  min-width: 0;
+  overflow: hidden;
+}
+.fractal-floating-field--dropdown > .fractal-floating-field__label {
+  cursor: pointer;
+  max-width: calc(100% - 2 * var(--control-padding-inline) - var(--control-icon-size) - var(--control-icon-gap));
+}
+.fractal-floating-field--textarea {
+  --control-min-block-size: calc(var(--control-line-height) + 2 * var(--space-3) + 2px);
+  --field-label-inset: var(--space-3);
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-floating-field__label {
+    transition: none;
+  }
+}
+.fractal-floating-field--dropdown > .fractal-dropdown-trigger {
+  width: 100%;
+}
+.fractal-floating-field > textarea {
+  box-sizing: border-box;
+}
+
 /* src/components/TableSearch/TableSearch.css */
 .fractal-table-search {
   position: relative;
@@ -620,6 +699,9 @@
   -webkit-appearance: none;
   appearance: none;
 }
+.fractal-table-search .fractal-floating-field {
+  --field-label-inset: calc(var(--control-padding-inline) + var(--control-icon-size) + var(--control-icon-gap));
+}
 
 /* src/components/NumberInput/NumberInput.css */
 .fractal-number-input {
@@ -692,6 +774,12 @@
   width: var(--control-icon-size);
   height: var(--control-icon-size);
 }
+.fractal-number-input:has(.fractal-floating-field input:placeholder-shown):not(:focus-within) .fractal-number-input-unit {
+  visibility: hidden;
+}
+.fractal-number-input .fractal-floating-field__label {
+  max-width: calc(100% - 2 * var(--control-min-block-size) - 2 * var(--control-padding-inline));
+}
 
 /* src/components/Slider/Slider.css */
 .fractal-slider {
@@ -845,6 +933,9 @@
   width: var(--control-icon-size);
   height: var(--control-icon-size);
 }
+.fractal-password-input .fractal-floating-field__label {
+  max-width: calc(100% - var(--control-min-block-size) - 2 * var(--control-padding-inline));
+}
 
 /* src/components/Label/Label.css */
 .fractal-label {
@@ -1794,6 +1885,60 @@
   width: var(--control-icon-size);
   height: var(--control-icon-size);
 }
+.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);
+}
+.fractal-dropdown-search > svg {
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
+  flex-shrink: 0;
+  color: var(--fg-secondary);
+}
+.fractal-dropdown-search input {
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  background: transparent;
+  color: var(--fg-primary);
+  font: inherit;
+  font-size: var(--control-font-size);
+  line-height: var(--control-line-height);
+}
+.fractal-dropdown-search input::placeholder {
+  color: var(--fg-placeholder);
+}
+.fractal-dropdown-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  border: 1px solid var(--fg-secondary);
+  border-radius: var(--radius-sm);
+}
+.fractal-dropdown-checkbox[data-checked=true] {
+  background: var(--fg-primary);
+  border-color: var(--fg-primary);
+  color: var(--bg-canvas);
+}
+.fractal-dropdown-checkbox svg {
+  width: 14px;
+  height: 14px;
+}
 
 /* src/components/Link/Link.css */
 .fractal-link {
@@ -2583,9 +2728,6 @@
   height: var(--control-min-block-size);
   border-radius: var(--radius-full);
 }
-.fractal-ghost-button--xs {
-  width: 72px;
-}
 .fractal-ghost-button--sm {
   width: 84px;
 }
@@ -3254,7 +3396,7 @@
   width: 100%;
   min-height: 120px;
   resize: vertical;
-  border: 1px solid var(--border-default);
+  border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   background: var(--bg-canvas);
   padding: var(--space-3);
@@ -3264,9 +3406,6 @@
 .fractal-textarea::placeholder {
   color: var(--fg-placeholder);
 }
-.fractal-textarea:hover {
-  border-color: var(--fg-tertiary);
-}
 .fractal-textarea:focus-visible {
   outline: none;
   border-color: var(--border-focus);
@@ -3277,6 +3416,17 @@
   opacity: 0.5;
   background: var(--bg-surface-1);
 }
+.fractal-textarea[data-text-style=prose] {
+  font-family: var(--font-sans);
+  font-size: var(--control-md-font-size);
+  line-height: var(--control-md-line-height);
+}
+.fractal-floating-field--textarea > .fractal-floating-field__label {
+  transform: translateY(calc(var(--space-3) + 1px));
+}
+.fractal-floating-field--textarea:where(:focus-within, :has(textarea:not(:placeholder-shown))) > .fractal-floating-field__label {
+  transform: translateY(-50%) scale(0.75);
+}
 
 /* src/components/TextButton/TextButton.css */
 .fractal-text-button {