@mirror-physics/fractal-ui 0.2.0-next.10 → 0.2.0-next.15

package/dist/index.css

@@ -778,7 +778,7 @@
 }
 .fractal-dropdown-option:hover,
 .fractal-dropdown-option:focus-visible {
-  background: var(--hover-canvas, var(--bg-surface-2));
+  background: var(--hover-surface, var(--bg-surface-2));
   outline: none;
 }
 .fractal-dropdown-separator {
@@ -874,6 +874,35 @@
   color: var(--accent-default);
 }
 
+/* src/components/Checkbox/Checkbox.css */
+.fractal-checkbox {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-checkbox:hover:not(:disabled) {
+  background: var(--hover-canvas);
+  color: var(--fg-primary);
+}
+.fractal-checkbox--checked {
+  color: var(--fg-primary);
+}
+.fractal-checkbox:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-checkbox:disabled {
+  cursor: not-allowed;
+  color: var(--fg-disabled);
+}
+
 /* src/components/SortableTable/SortableTable.css */
 .fractal-sortable-table {
   font-family: var(--font-sans);
@@ -885,6 +914,11 @@
   border-radius: var(--radius-md, 6px);
   background: var(--bg-canvas);
 }
+.fractal-sortable-table--embedded .fractal-sortable-table-surface {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  border-radius: 0;
+}
 .fractal-sortable-table-header {
   display: flex;
   align-items: center;
@@ -980,6 +1014,44 @@
 .fractal-sortable-table-row--interactive {
   cursor: pointer;
 }
+.fractal-sortable-table-td--row-action {
+  position: relative;
+}
+.fractal-sortable-table-row-action {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: -1px;
+  bottom: 0;
+  display: flex;
+  width: min(280px, calc(200% + 32px));
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: var(--space-4);
+  background:
+    linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--hover-surface) 72%, transparent) 52%,
+      var(--hover-surface) 100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease-out;
+}
+.fractal-sortable-table-row--interactive:hover .fractal-sortable-table-row-action,
+.fractal-sortable-table-row--interactive:focus-visible .fractal-sortable-table-row-action {
+  opacity: 1;
+}
+.fractal-sortable-table-row-action__icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-full);
+  background: var(--bg-canvas);
+  color: var(--fg-primary);
+}
 .fractal-sortable-table-row--interactive:focus-visible {
   position: relative;
   z-index: 1;
@@ -1005,14 +1077,14 @@
 .fractal-sortable-table-td + .fractal-sortable-table-td {
   border-left: 1px solid var(--border-subtle);
 }
-.fractal-sortable-table--sm .fractal-sortable-table-th,
+.fractal-sortable-table--sm .fractal-sortable-table-th:not(.fractal-sortable-table-th--sortable),
 .fractal-sortable-table--sm .fractal-sortable-table-sort-button {
   padding: 8px 12px;
 }
 .fractal-sortable-table--sm .fractal-sortable-table-td {
   padding: 10px 12px;
 }
-.fractal-sortable-table--lg .fractal-sortable-table-th,
+.fractal-sortable-table--lg .fractal-sortable-table-th:not(.fractal-sortable-table-th--sortable),
 .fractal-sortable-table--lg .fractal-sortable-table-sort-button {
   padding: 18px 24px;
 }
@@ -1074,6 +1146,61 @@
   display: none;
 }
 
+/* src/components/ContentSwitcher/ContentSwitcher.css */
+.fractal-content-switcher {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-md);
+  background: var(--bg-inverse);
+  font-family: var(--font-sans);
+}
+.fractal-content-switcher--full-width {
+  display: flex;
+  width: 100%;
+}
+.fractal-content-switcher__item {
+  min-width: 128px;
+  min-height: 40px;
+  padding: 0 var(--space-4);
+  border: 0;
+  background: transparent;
+  color: var(--fg-inverse-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  text-align: center;
+  transition:
+    background-color var(--duration-fast) var(--ease-out),
+    color var(--duration-fast) var(--ease-out),
+    border-radius var(--duration-fast) var(--ease-out);
+}
+.fractal-content-switcher--full-width .fractal-content-switcher__item {
+  flex: 1;
+}
+.fractal-content-switcher__item:hover:not(:disabled):not(.fractal-content-switcher__item--active) {
+  background: var(--bg-inverse-subtle);
+  color: var(--fg-inverse);
+}
+.fractal-content-switcher__item--active {
+  border-radius: var(--radius-sm);
+  background: var(--bg-canvas);
+  color: var(--fg-primary);
+}
+.fractal-content-switcher__item:focus-visible {
+  position: relative;
+  z-index: 1;
+  outline: 2px solid var(--border-focus);
+  outline-offset: -2px;
+}
+.fractal-content-switcher__item:disabled {
+  cursor: not-allowed;
+  color: var(--fg-inverse-secondary);
+  opacity: 0.5;
+}
+
 /* src/components/Disclosure/Disclosure.css */
 .fractal-disclosure {
   font-family: var(--font-sans);
@@ -1104,6 +1231,17 @@
 .fractal-disclosure-trigger:hover {
   background: var(--bg-surface-1);
 }
+.fractal-disclosure--disabled .fractal-disclosure-trigger {
+  color: var(--fg-tertiary);
+  cursor: not-allowed;
+}
+.fractal-disclosure--disabled .fractal-disclosure-trigger:hover {
+  background: transparent;
+}
+.fractal-disclosure--disabled .fractal-disclosure-icon,
+.fractal-disclosure--disabled .fractal-disclosure-meta {
+  color: var(--fg-tertiary);
+}
 .fractal-disclosure-trigger:focus-visible {
   outline: 2px solid var(--border-focus);
   outline-offset: -2px;
@@ -1146,6 +1284,68 @@
   padding: 4px 0 12px 24px;
 }
 
+/* src/components/LatticeLoader/LatticeLoader.css */
+.fractal-lattice-loader {
+  display: grid;
+  grid-template-columns: repeat(48, minmax(0, 1fr));
+  align-items: center;
+  width: 100%;
+  height: 12px;
+  overflow: hidden;
+  color: var(--fg-secondary);
+}
+.fractal-lattice-loader__cell {
+  position: relative;
+  width: min(12px, 80%);
+  aspect-ratio: 4 / 3;
+  justify-self: center;
+  opacity: 0.08;
+  animation: fractal-lattice-wave 2.4s ease-in-out infinite;
+  animation-delay: calc((var(--fractal-lattice-index) * 50ms) - 2.4s);
+}
+.fractal-lattice-loader__cell::before {
+  position: absolute;
+  top: 3px;
+  left: 1px;
+  width: calc(100% - 2px);
+  height: 3px;
+  border-radius: 1px;
+  background: currentColor;
+  content: "";
+  transform: rotate(45deg);
+}
+.fractal-lattice-loader__cell::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 3px;
+  height: 3px;
+  border-radius: 1px;
+  background: currentColor;
+  box-shadow: calc(-100% - 6px) 6px currentColor;
+  content: "";
+}
+@keyframes fractal-lattice-wave {
+  0%, 58%, 100% {
+    opacity: 0.08;
+  }
+  18% {
+    opacity: 0.28;
+  }
+  30% {
+    opacity: 1;
+  }
+  42% {
+    opacity: 0.28;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .fractal-lattice-loader__cell {
+    opacity: 0.35;
+    animation: none;
+  }
+}
+
 /* src/components/Sidebar/Sidebar.css */
 .fractal-sidebar {
   --fractal-sidebar-width: 232px;
@@ -1321,6 +1521,9 @@
 .fractal-side-panel--lg {
   width: min(100vw, 680px);
 }
+.fractal-side-panel--xl {
+  width: min(100vw, 960px);
+}
 .fractal-side-panel__header {
   display: flex;
   min-height: 72px;
@@ -1444,6 +1647,53 @@
   background: var(--bg-surface-1);
 }
 
+/* src/components/TextButton/TextButton.css */
+.fractal-text-button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-weight: 500;
+  line-height: 1.4;
+  padding: 0;
+  text-align: left;
+  transition: color 120ms ease;
+}
+.fractal-text-button--primary {
+  color: var(--fg-primary);
+}
+.fractal-text-button--primary:hover:not(:disabled) {
+  color: var(--fg-secondary);
+}
+.fractal-text-button--secondary {
+  color: var(--fg-secondary);
+}
+.fractal-text-button--secondary:hover:not(:disabled) {
+  color: var(--fg-primary);
+}
+.fractal-text-button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 3px;
+  border-radius: var(--radius-sm);
+}
+.fractal-text-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.fractal-text-button--sm {
+  font-size: 0.8125rem;
+}
+.fractal-text-button--md {
+  font-size: 0.875rem;
+}
+.fractal-text-button__icon {
+  display: inline-grid;
+  place-items: center;
+}
+
 /* src/components/FileDropzone/FileDropzone.css */
 .fractal-file-dropzone {
   display: grid;
@@ -1551,4 +1801,59 @@
   cursor: not-allowed;
   opacity: 0.5;
 }
+
+/* src/components/Pagination/Pagination.css */
+.fractal-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  color: var(--fg-secondary);
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  line-height: 1.4;
+}
+.fractal-pagination__controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+.fractal-pagination__page-size .fractal-dropdown-trigger {
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg-secondary);
+}
+.fractal-pagination__page-size .fractal-dropdown-trigger:hover {
+  background: transparent;
+  color: var(--fg-primary);
+}
+.fractal-pagination__button {
+  display: grid;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  background: var(--bg-canvas);
+  color: var(--fg-secondary);
+  cursor: pointer;
+}
+.fractal-pagination__button:hover:not(:disabled) {
+  background: var(--hover-surface);
+  color: var(--fg-primary);
+}
+.fractal-pagination__button:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+.fractal-pagination__button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.fractal-pagination__page {
+  min-width: 44px;
+  text-align: center;
+  white-space: nowrap;
+}
 /*# sourceMappingURL=index.css.map */