@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/styles/components/chart-container.css

@@ -7,6 +7,11 @@
   overflow: hidden;
 }
 
+/* Dark --border-light equals --bg-card; header hairline and Plotly grid need --border-color there. */
+:where(html.dark) .mint-chart {
+  --border-light: var(--border-color);
+}
+
 .mint-chart--frame {
   display: flex;
   flex-direction: column;
@@ -17,81 +22,119 @@
   background: var(--bg-card);
 }
 
+/* One header for both variants (9a): 13px 600 title + 12px description on one line,
+   legend items, then tools. */
 .mint-chart__header {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border-color);
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--border-light);
+  flex-shrink: 0;
 }
 
 .mint-chart__header-text {
+  display: flex;
   flex: 1;
+  align-items: baseline;
+  gap: 0.5rem;
   min-width: 0;
 }
 
 .mint-chart__title {
-  font-size: 1rem;
+  overflow: hidden;
+  font-size: 0.8125rem;
   font-weight: 600;
   color: var(--text-primary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   padding: 0 !important;
 }
 
 .mint-chart__description {
-  font-size: 0.8125rem;
-  color: var(--text-muted);
-  margin-top: 0.25rem !important;
+  overflow: hidden;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 0 !important;
   margin-bottom: 0 !important;
-  line-height: 1.4;
   padding: 0 !important;
 }
 
-.mint-chart__toolbar {
+/* Header legend: each item toggles its series. */
+.mint-chart__header-legend {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
+  gap: 0.125rem;
 }
 
-.mint-chart__body {
-  position: relative;
-  min-height: 12rem;
+.mint-chart__legend-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 1.5rem;
+  padding: 0 0.5rem;
+  border: none;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-secondary-strong);
+  font-family: inherit;
+  font-size: 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.15s ease;
 }
 
-.mint-chart--frame .mint-chart__header {
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 0.875rem;
+.mint-chart__legend-item:hover {
+  background-color: var(--bg-hover);
+}
+
+.mint-chart__legend-item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-chart__legend-item--hidden {
+  opacity: 0.45;
+}
+
+.mint-chart__legend-swatch {
   flex-shrink: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 3px;
 }
 
-.mint-chart--frame .mint-chart__header-text {
+.mint-chart__toolbar {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.25rem;
+  flex-shrink: 0;
 }
 
-.mint-chart--frame .mint-chart__title {
-  overflow: hidden;
-  font-size: 0.8125rem;
-  letter-spacing: -0.005em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+/* Legend and tools stay right-aligned when a custom #header slot replaces the flex:1 title block. */
+.mint-chart__header-legend,
+.mint-chart__toolbar {
+  margin-left: auto;
 }
 
-.mint-chart--frame .mint-chart__description {
-  margin-top: 0 !important;
-  overflow: hidden;
-  font-size: 0.75rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.mint-chart__header-legend + .mint-chart__toolbar {
+  margin-left: 0;
 }
 
-.mint-chart--frame .mint-chart__toolbar {
-  gap: 0.375rem;
+/* Tools are 28px IconButtons (ghost). */
+.mint-chart__toolbar .mint-icon-button {
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0.375rem;
+}
+
+.mint-chart__body {
+  position: relative;
+  min-height: 12rem;
 }
 
 .mint-chart--frame .mint-chart__body {
@@ -154,8 +197,8 @@
   gap: 0.75rem;
   padding: 0.4375rem 0.875rem;
   background: var(--bg-primary);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-family: var(--font-mono);
-  font-size: 0.65625rem;
+  font-size: 0.6875rem;
   flex-shrink: 0;
 }

package/src/styles/components/checkbox.css

@@ -17,7 +17,7 @@
   min-height: 2rem;
   gap: 0.5rem;
   padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm, 0.375rem);
+  border-radius: var(--radius-sm);
   background: transparent;
   box-sizing: border-box;
   transition:
@@ -111,21 +111,22 @@
   justify-content: center;
   flex-shrink: 0;
   border-radius: 0.25rem;
-  border: 1.5px solid var(--border-color);
+  border: 1.5px solid var(--_control-border-strong);
   background-color: var(--bg-card);
   color: var(--color-primary); /* SVG checkmark inherits currentColor */
-  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
+  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
   cursor: pointer;
 }
 
-.mint-checkbox__box--checked {
+.mint-checkbox__box--checked,
+.mint-checkbox__box--indeterminate {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: #FFFFFF;
 }
 
 .mint-checkbox__native:focus-visible + .mint-checkbox__box {
-  box-shadow: var(--focus-ring-soft);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-checkbox__native:disabled + .mint-checkbox__box {
@@ -134,7 +135,8 @@
   cursor: not-allowed;
 }
 
-.mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--checked {
+.mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--checked,
+.mint-checkbox__native:disabled + .mint-checkbox__box.mint-checkbox__box--indeterminate {
   background-color: var(--text-muted);
   border-color: var(--text-muted);
   color: #FFFFFF;

package/src/styles/components/chemical-formula.css

@@ -18,7 +18,7 @@
   padding: 0.25rem 0;
 }
 
-.mint-chem-formula--xs { font-size: 0.625rem; line-height: 1rem; }
+.mint-chem-formula--xs { font-size: 0.6875rem; line-height: 1rem; }
 .mint-chem-formula--sm { font-size: 0.75rem; line-height: 1rem; }
 .mint-chem-formula--primary { color: var(--text-primary); }
 .mint-chem-formula--secondary { color: var(--text-secondary); }
@@ -27,14 +27,14 @@
 
 .mint-chem-formula--pill {
   padding: 0.125rem 0.375rem;
-  border-radius: 0.375rem;
+  border-radius: var(--radius);
   background: var(--bg-tertiary);
 }
 
 .mint-chem-formula--pill.mint-chem-formula--sm {
   padding: 0.125rem 0.625rem;
   border: 1px solid var(--border-color);
-  border-radius: 999px;
+  border-radius: var(--radius);
 }
 
 .mint-chem-formula__formula {
@@ -69,8 +69,10 @@
 }
 
 .mint-chem-formula__charge {
-  vertical-align: super;
-  font-size: 0.75em;
+  position: relative;
+  top: -0.5em;
+  font-size: 0.72em;
   line-height: 0;
-  color: var(--text-secondary);
+  vertical-align: baseline;
+  color: inherit;
 }

package/src/styles/components/collapsible-card.css

@@ -197,21 +197,19 @@
   cursor: pointer;
   transition:
     color 150ms ease,
-    background-color 150ms ease,
-    transform 150ms ease;
+    background-color 150ms ease;
 }
 
 .mint-collapsible-card__action:hover,
 .mint-collapsible-card__chevron-button:hover {
   color: var(--mint-sidebar-badge-color, var(--text-secondary));
   background: color-mix(in srgb, var(--mint-sidebar-badge-color, var(--text-secondary)) 10%, transparent);
-  transform: translateY(-1px);
 }
 
 .mint-collapsible-card__action:focus-visible,
 .mint-collapsible-card__chevron-button:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-collapsible-card__action:disabled,
@@ -219,7 +217,6 @@
 .mint-collapsible-card__chevron-button:disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
-  transform: none;
 }
 
 .mint-collapsible-card__action-icon {
@@ -237,40 +234,9 @@
   align-items: center;
 }
 
-.mint-collapsible-card__toggle-track {
-  position: relative;
-  width: 2.25rem;
-  height: 1.25rem;
-  background-color: var(--bg-tertiary);
-  border-radius: 9999px;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.mint-collapsible-card__toggle-track:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
-}
-
-.mint-collapsible-card__toggle-track--on {
-  background-color: var(--color-primary);
-}
-
-.mint-collapsible-card__toggle-knob {
-  position: absolute;
-  top: 50%;
-  margin-top: -0.5rem;
-  left: 0.125rem;
-  width: 1rem;
-  height: 1rem;
-  background-color: white;
-  border-radius: 9999px;
-  transition: left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
-}
-
-.mint-collapsible-card__toggle-knob--on {
-  left: 1.125rem;
+/* `toggleColor` reaches the BaseToggle track through this private property (10a). */
+.mint-collapsible-card__toggle .mint-toggle__track--on {
+  background-color: var(--_cc-toggle-on, var(--color-primary));
 }
 
 .mint-collapsible-card__chevron {
@@ -376,16 +342,10 @@
   }
 
   .mint-collapsible-card:hover,
-  .mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge,
-  .mint-collapsible-card__action:hover,
-  .mint-collapsible-card__chevron-button:hover {
+  .mint-collapsible-card__header-shell:hover .mint-collapsible-card__icon-badge {
     transform: none;
   }
 
-  .mint-collapsible-card__toggle-knob {
-    transition: none;
-  }
-
   .collapse-enter-active,
   .collapse-leave-active {
     transition: none;

package/src/styles/components/concentration-input.css

@@ -1,4 +1,4 @@
-/* ConcentrationInput composes UnitInput and keeps concentration-specific hint spacing. */
+/* ConcentrationInput composes UnitInput; the hint is UnitInput's nearest-unit hint (4b). */
 
 .mint-concentration-input {
   display: flex;
@@ -6,12 +6,3 @@
   gap: 0.25rem;
 }
 
-.mint-concentration-input__conversion {
-  padding-left: 0.125rem;
-  color: var(--text-muted);
-  font-size: 0.75rem;
-}
-
-.mint-concentration-input__conversion::before {
-  content: '≈ ';
-}

package/src/styles/components/dataframe.css

@@ -1,11 +1,16 @@
 /* DataFrame Component Styles */
 
 .mint-dataframe {
-  background-color: var(--bg-primary);
+  background-color: var(--bg-card);
   border-radius: var(--radius-md);
   overflow: hidden;
 }
 
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-dataframe {
+  --border-light: var(--border-color);
+}
+
 .mint-dataframe--bordered {
   border: 1px solid var(--border-color);
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
@@ -54,16 +59,16 @@
 }
 
 .mint-dataframe__search:focus-visible {
-  border-color: transparent;
+  border-color: var(--color-primary);
   background-color: var(--bg-primary);
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-soft);
 }
 
 /* Table wrapper */
 .mint-dataframe__table-wrapper {
   position: relative;
   overflow-x: auto;
-  background-color: var(--bg-primary);
+  background-color: var(--bg-card);
   scrollbar-width: thin;
 }
 
@@ -114,7 +119,7 @@
 
 /* Thead */
 .mint-dataframe__thead {
-  background-color: color-mix(in srgb, var(--bg-secondary) 92%, var(--bg-primary));
+  background-color: var(--bg-primary);
 }
 
 .mint-dataframe__thead--sticky {
@@ -126,17 +131,15 @@
 
 /* Th */
 .mint-dataframe__th {
-  font-size: 0.6875rem !important;
-  font-weight: 600 !important;
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
   color: var(--text-secondary) !important;
-  text-transform: uppercase !important;
-  letter-spacing: 0.05em !important;
   text-align: left !important;
   white-space: nowrap !important;
   border-top: none !important;
   border-left: none !important;
   border-right: none !important;
-  border-bottom: 1px solid var(--border-light) !important;
+  border-bottom: 1px solid var(--border-color) !important;
   background: transparent !important;
 }
 
@@ -153,38 +156,37 @@
 }
 
 .mint-dataframe__th--align-left {
-  text-align: left;
+  text-align: left !important;
 }
 
 .mint-dataframe__th--align-center {
-  text-align: center;
+  text-align: center !important;
 }
 
 .mint-dataframe__th--align-right {
-  text-align: right;
+  text-align: right !important;
 }
 
 .mint-dataframe__th--sortable {
   position: relative;
   cursor: pointer;
   user-select: none;
-  transition: color 0.15s ease, background-color 0.15s ease;
+  transition: color 0.15s ease;
 }
 
+/* Sorting tints the header text and arrow only, never the column (2a). */
 .mint-dataframe__th--sortable:hover {
-  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
   color: var(--text-primary) !important;
 }
 
 .mint-dataframe__th--sorted {
-  color: var(--color-primary) !important;
-  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
+  color: var(--text-primary) !important;
 }
 
 .mint-dataframe__th--checkbox {
   width: 2.5rem;
   padding: 0.5rem;
-  text-align: center;
+  text-align: center !important; /* the base th rule is left !important; align with the row checkboxes */
 }
 
 /* Sortable headers are real buttons; strip the native chrome so the cell keeps
@@ -211,6 +213,15 @@
   min-height: 1.25rem;
 }
 
+/* Unit: its own mono element, never case-transformed (2a). */
+.mint-dataframe__th-unit {
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: var(--text-muted);
+  text-transform: none;
+}
+
 /* Sort icon */
 .mint-dataframe__sort-icon {
   width: 0.875rem;
@@ -238,7 +249,7 @@
   border-right: none !important;
   border-bottom: 1px solid var(--border-light) !important;
   background: transparent !important;
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: background-color 0.15s ease;
 }
 
 .mint-dataframe__td--sm {
@@ -265,6 +276,13 @@
   text-align: right;
 }
 
+/* Numeric columns: mono, tabular figures so decimals line up (2a). */
+.mint-dataframe__td--number {
+  font-family: var(--font-mono);
+  font-size: 0.75rem !important;
+  font-variant-numeric: tabular-nums;
+}
+
 .mint-dataframe__td--ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -278,20 +296,7 @@
   text-align: center;
 }
 
-/* Checkbox */
-.mint-dataframe__checkbox {
-  width: 1rem;
-  height: 1rem;
-  cursor: pointer;
-  accent-color: var(--color-primary);
-}
-
-.mint-dataframe__checkbox:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-/* Row */
+/* Row: hover = --bg-hover only; selected = primary 8% (2a). */
 .mint-dataframe__row {
   transition: background-color 0.15s ease;
 }
@@ -308,33 +313,17 @@
   cursor: pointer;
 }
 
-.mint-dataframe__row--clickable:hover > .mint-dataframe__td,
-.mint-dataframe__row--clickable:focus-visible > .mint-dataframe__td {
-  background: var(--color-primary-soft) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(99, 102, 241, 0.18),
-    inset 0 -1px 0 rgba(99, 102, 241, 0.18);
-}
-
-.mint-dataframe__row--clickable:hover > .mint-dataframe__td:first-child,
-.mint-dataframe__row--clickable:focus-visible > .mint-dataframe__td:first-child {
-  box-shadow:
-    inset 3px 0 0 var(--color-primary),
-    inset 0 1px 0 rgba(99, 102, 241, 0.18),
-    inset 0 -1px 0 rgba(99, 102, 241, 0.18);
-}
-
 .mint-dataframe__row--clickable:focus-visible {
   outline: 2px solid var(--color-primary);
   outline-offset: -2px;
 }
 
 .mint-dataframe__row--striped {
-  background-color: color-mix(in srgb, var(--bg-secondary) 62%, transparent);
+  background-color: color-mix(in srgb, var(--bg-primary) 62%, transparent);
 }
 
 .mint-dataframe__row--striped > .mint-dataframe__td {
-  background-color: color-mix(in srgb, var(--bg-secondary) 62%, transparent) !important;
+  background-color: color-mix(in srgb, var(--bg-primary) 62%, transparent) !important;
 }
 
 .mint-dataframe__row--striped:hover {
@@ -346,23 +335,15 @@
 }
 
 .mint-dataframe__row--selected {
-  background-color: color-mix(in srgb, var(--color-primary) 9%, transparent);
+  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent);
 }
 
 .mint-dataframe__row--selected > .mint-dataframe__td {
-  background-color: color-mix(in srgb, var(--color-primary) 9%, transparent) !important;
-}
-
-.mint-dataframe__row--selected > .mint-dataframe__td:first-child {
-  box-shadow: inset 3px 0 0 var(--color-primary);
-}
-
-html.dark .mint-dataframe__row--selected {
-  background-color: color-mix(in srgb, var(--color-primary) 18%, transparent);
+  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
 }
 
-html.dark .mint-dataframe__row--selected > .mint-dataframe__td {
-  background-color: color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
+.mint-dataframe__row--selected:hover > .mint-dataframe__td {
+  background-color: color-mix(in srgb, var(--color-primary) 11%, transparent) !important;
 }
 
 .mint-dataframe__row:last-child .mint-dataframe__td {
@@ -375,7 +356,7 @@ html.dark .mint-dataframe__row--selected > .mint-dataframe__td {
   align-items: center;
   justify-content: center;
   min-height: 12rem;
-  background-color: var(--bg-primary);
+  background-color: var(--bg-card);
 }
 
 /* Loading overlay */
@@ -454,7 +435,7 @@ html.dark .mint-dataframe__loading {
 
 .mint-dataframe__page-btn:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-dataframe__page-btn svg {
@@ -498,7 +479,7 @@ html.dark .mint-dataframe__loading {
 
 .mint-dataframe__resize-handle:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 /* Row delete action column */
@@ -539,7 +520,7 @@ html.dark .mint-dataframe__loading {
 
 .mint-dataframe__delete-btn:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-dataframe__delete-btn svg {