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

package/dist/index.css

@@ -1,3 +1,61 @@
+/* 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);
+  --control-padding-block: var(--control-sm-padding-block);
+  --control-padding-inline: var(--control-sm-padding-inline);
+  --control-icon-size: var(--control-sm-icon-size);
+}
+[data-control-size=md] {
+  --control-font-size: var(--control-md-font-size);
+  --control-line-height: var(--control-md-line-height);
+  --control-padding-block: var(--control-md-padding-block);
+  --control-padding-inline: var(--control-md-padding-inline);
+  --control-icon-size: var(--control-md-icon-size);
+}
+[data-control-size=lg] {
+  --control-font-size: var(--control-lg-font-size);
+  --control-line-height: var(--control-lg-line-height);
+  --control-padding-block: var(--control-lg-padding-block);
+  --control-padding-inline: var(--control-lg-padding-inline);
+  --control-icon-size: var(--control-lg-icon-size);
+}
+[data-control-size=xl] {
+  --control-font-size: var(--control-xl-font-size);
+  --control-line-height: var(--control-xl-line-height);
+  --control-padding-block: var(--control-xl-padding-block);
+  --control-padding-inline: var(--control-xl-padding-inline);
+  --control-icon-size: var(--control-xl-icon-size);
+}
+[data-control-size] {
+  --control-min-block-size: calc(var(--control-line-height) + 2 * var(--control-padding-block) + 2 * var(--control-border-width));
+}
+.fractal-control {
+  box-sizing: border-box;
+  height: auto;
+  min-block-size: var(--control-min-block-size);
+  margin: 0;
+  padding: var(--control-padding-block) var(--control-padding-inline);
+  font-family: var(--font-sans);
+  font-size: var(--control-font-size);
+  font-weight: 400;
+  line-height: var(--control-line-height);
+  letter-spacing: normal;
+}
+.fractal-field {
+  display: grid;
+  align-content: start;
+  gap: var(--control-label-gap);
+  min-inline-size: 0;
+}
+
 /* src/components/Button/Button.css */
 .fractal-button {
   display: inline-flex;
@@ -6,7 +64,6 @@
   white-space: nowrap;
   font-weight: 400;
   font-family: var(--font-sans);
-  line-height: 1;
   text-decoration: none;
   box-sizing: border-box;
   transform: scale(1);
@@ -31,6 +88,18 @@
     transition-duration: 0.01ms;
   }
 }
+.fractal-button {
+  gap: var(--control-icon-gap);
+}
+.fractal-button svg {
+  inline-size: var(--control-icon-size);
+  block-size: var(--control-icon-size);
+  flex-shrink: 0;
+}
+.fractal-button[data-icon-only] {
+  inline-size: var(--control-min-block-size);
+  padding-inline: 0;
+}
 
 /* src/components/CodeBlock/CodeBlock.css */
 .fractal-code-block {
@@ -199,7 +268,7 @@
   border: 1px solid var(--border-subtle);
   background-color: var(--bg-surface-1);
   color: var(--fg-primary);
-  box-shadow: var(--shadow-xs);
+  box-shadow: none;
   font-family: var(--font-sans);
 }
 .fractal-card-header {
@@ -495,16 +564,12 @@
 
 /* src/components/Input/Input.css */
 .fractal-input {
-  display: flex;
-  height: 40px;
+  display: block;
+  min-width: 0;
   width: 100%;
   border-radius: var(--radius-sm, 4px);
   border: 1px solid var(--border-default);
   background-color: var(--bg-canvas);
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  font-family: var(--font-sans);
-  line-height: 1.5;
   color: var(--fg-primary);
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   box-sizing: border-box;
@@ -527,6 +592,7 @@
   background: transparent;
   font-size: 0.875rem;
   height: auto;
+  min-block-size: 0;
   padding: 0;
 }
 
@@ -539,13 +605,15 @@
   position: absolute;
   z-index: 1;
   top: 50%;
-  left: var(--space-3, 12px);
+  left: calc(var(--control-padding-inline) + var(--control-border-width));
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
   color: var(--fg-secondary);
   pointer-events: none;
   transform: translateY(-50%);
 }
 .fractal-table-search__input {
-  padding-left: 40px;
+  padding-left: calc(var(--control-padding-inline) + var(--control-icon-size) + var(--control-icon-gap));
 }
 .fractal-table-search__input::-webkit-search-cancel-button {
   display: none;
@@ -557,12 +625,16 @@
 .fractal-number-input {
   position: relative;
   width: 100%;
-  height: 40px;
+  font-family: var(--font-sans);
+  font-size: var(--control-font-size);
+  line-height: var(--control-line-height);
+  font-variant-numeric: tabular-nums;
   align-self: start;
 }
 .fractal-number-input .fractal-input {
-  padding-right: calc(80px + var(--space-3, 12px));
+  padding-right: calc(2 * var(--control-min-block-size) + var(--control-padding-inline));
   appearance: textfield;
+  font-variant-numeric: tabular-nums;
 }
 .fractal-number-input .fractal-input::-webkit-inner-spin-button,
 .fractal-number-input .fractal-input::-webkit-outer-spin-button {
@@ -584,15 +656,16 @@
   position: absolute;
   top: 50%;
   color: var(--fg-secondary);
-  font-size: 0.875rem;
-  line-height: 1;
+  font-size: var(--control-font-size);
+  margin-left: var(--space-1);
+  line-height: var(--control-line-height);
   pointer-events: none;
   transform: translateY(-50%);
   user-select: none;
 }
 .fractal-number-input-step {
   display: grid;
-  width: 40px;
+  width: var(--control-min-block-size);
   place-items: center;
   padding: 0;
   border: 0;
@@ -615,6 +688,10 @@
   color: var(--fg-disabled);
   cursor: not-allowed;
 }
+.fractal-number-input-step svg {
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
+}
 
 /* src/components/Slider/Slider.css */
 .fractal-slider {
@@ -725,19 +802,18 @@
 .fractal-password-input {
   position: relative;
   width: 100%;
-  height: 40px;
   align-self: start;
 }
 .fractal-password-input-field {
-  padding-right: calc(40px + var(--space-2, 8px));
+  padding-right: calc(var(--control-min-block-size) + var(--control-padding-inline));
 }
 .fractal-password-input-toggle {
   position: absolute;
-  top: 4px;
-  right: 4px;
+  top: var(--control-border-width);
+  bottom: var(--control-border-width);
+  right: var(--control-border-width);
   display: grid;
-  width: 32px;
-  height: 32px;
+  width: calc(var(--control-min-block-size) - 2 * var(--control-border-width));
   place-items: center;
   padding: 0;
   border: 0;
@@ -765,12 +841,19 @@
     transition-duration: 0.01ms;
   }
 }
+.fractal-password-input-toggle svg {
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
+}
 
 /* src/components/Label/Label.css */
 .fractal-label {
-  font-size: 0.875rem;
+  display: block;
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--control-font-size);
   font-weight: 500;
-  line-height: 1;
+  line-height: var(--control-line-height);
   color: var(--fg-primary);
 }
 .fractal-label[data-disabled] {
@@ -1326,28 +1409,23 @@
 /* src/components/Dropdown/Dropdown.css */
 .fractal-dropdown {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  vertical-align: top;
+  min-width: 0;
 }
 .fractal-dropdown-trigger {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--control-icon-gap);
   border-radius: var(--radius-md, 6px);
   border: 1px solid var(--border-subtle);
   background: var(--bg-canvas);
-  padding: 8px 12px;
   text-align: left;
-  font-size: 0.875rem;
   font-family: var(--font-sans);
   color: var(--fg-primary);
   cursor: pointer;
   transition: background-color 0.15s;
 }
-.fractal-dropdown-trigger--sm {
-  gap: 6px;
-  padding: 4px 8px;
-  font-size: 0.75rem;
-}
 .fractal-dropdown-trigger--vertical {
   flex-direction: column;
   justify-content: flex-start;
@@ -1365,14 +1443,9 @@
   margin: 0 0 auto;
 }
 .fractal-dropdown-trigger--icon-only {
-  width: 32px;
-  height: 32px;
+  inline-size: var(--control-min-block-size);
   justify-content: center;
-  padding: 0;
-}
-.fractal-dropdown-trigger--icon-only.fractal-dropdown-trigger--sm {
-  width: 28px;
-  height: 28px;
+  padding-inline: 0;
 }
 .fractal-dropdown-trigger--tertiary {
   border-color: transparent;
@@ -1434,7 +1507,7 @@
 }
 .fractal-dropdown-label {
   width: 100%;
-  padding: 6px 8px;
+  padding: var(--space-1) var(--control-padding-inline);
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--fg-secondary);
@@ -1446,9 +1519,10 @@
   box-sizing: border-box;
   align-items: center;
   gap: 8px;
-  padding: 6px 8px;
+  padding: var(--control-padding-block) var(--control-padding-inline);
   text-align: left;
-  font-size: 0.875rem;
+  font-size: var(--control-font-size);
+  line-height: var(--control-line-height);
   font-family: var(--font-sans);
   background: none;
   border: none;
@@ -1457,14 +1531,6 @@
   color: var(--fg-primary);
   transition: background-color 0.1s;
 }
-.fractal-dropdown-panel--sm .fractal-dropdown-label,
-.fractal-dropdown-panel--sm .fractal-dropdown-option {
-  padding: 4px 8px;
-  font-size: 0.75rem;
-}
-.fractal-dropdown-panel--sm .fractal-dropdown-option {
-  gap: 6px;
-}
 .fractal-dropdown-option:hover,
 .fractal-dropdown-option:focus-visible {
   background: var(--hover-surface, var(--bg-surface-2));
@@ -1485,6 +1551,14 @@
   padding-left: 8px;
   color: var(--accent-default);
 }
+.fractal-dropdown-trigger {
+  white-space: nowrap;
+}
+.fractal-dropdown-icon--trigger svg,
+.fractal-dropdown-chevron svg {
+  width: var(--control-icon-size);
+  height: var(--control-icon-size);
+}
 
 /* src/components/Link/Link.css */
 .fractal-link {
@@ -2261,42 +2335,26 @@
   gap: var(--space-2);
 }
 .fractal-ghost-button {
+  height: var(--control-min-block-size);
   border-radius: var(--radius-full);
 }
 .fractal-ghost-button--xs {
   width: 72px;
-  height: 28px;
 }
 .fractal-ghost-button--sm {
   width: 84px;
-  height: 32px;
 }
 .fractal-ghost-button--md {
   width: 96px;
-  height: 40px;
 }
 .fractal-ghost-button--lg {
   width: 108px;
-  height: 44px;
 }
 .fractal-ghost-button--xl {
   width: 128px;
-  height: 56px;
 }
 .fractal-ghost-button--icon-only {
-  width: var(--fractal-ghost-icon-size, 40px);
-}
-.fractal-ghost-button--xs.fractal-ghost-button--icon-only {
-  --fractal-ghost-icon-size: 28px;
-}
-.fractal-ghost-button--sm.fractal-ghost-button--icon-only {
-  --fractal-ghost-icon-size: 32px;
-}
-.fractal-ghost-button--lg.fractal-ghost-button--icon-only {
-  --fractal-ghost-icon-size: 44px;
-}
-.fractal-ghost-button--xl.fractal-ghost-button--icon-only {
-  --fractal-ghost-icon-size: 56px;
+  width: var(--control-min-block-size);
 }
 .fractal-ghost-card {
   display: grid;
@@ -2348,11 +2406,15 @@
 }
 .fractal-ghost-field {
   display: grid;
-  gap: var(--space-2);
+  gap: var(--control-label-gap);
+}
+.fractal-ghost-field > .fractal-ghost-label {
+  height: var(--control-line-height);
 }
 .fractal-ghost-field__control {
+  box-sizing: border-box;
   width: 100%;
-  height: 40px;
+  height: var(--control-min-block-size);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
 }
@@ -2389,9 +2451,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  box-sizing: border-box;
   width: 220px;
-  height: 40px;
-  padding: 0 var(--space-3);
+  height: var(--control-min-block-size);
+  padding: 0 var(--control-padding-inline);
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
 }
@@ -2553,6 +2616,10 @@
 }
 
 /* src/components/Sidebar/Sidebar.css */
+.fractal-sidebar:not([data-fractal-border-surface]) {
+  --border-subtle: var(--border-on-surface-1);
+  --border-default: var(--border-subtle);
+}
 .fractal-sidebar {
   --fractal-sidebar-width: 232px;
   --fractal-sidebar-compact-width: 56px;
@@ -2563,7 +2630,7 @@
   min-height: 100%;
   flex-direction: column;
   background: var(--bg-surface-1);
-  border-right: 1px solid var(--nav-border);
+  border-right: 1px solid var(--border-subtle);
   color: var(--fg-primary);
   font-family: var(--font-sans);
 }
@@ -2767,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;
@@ -2779,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);
@@ -2853,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 {
@@ -2888,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;
   }
 }