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

package/src/styles/components/sample-hierarchy-tree.css

@@ -1,7 +1,12 @@
 /* SampleHierarchyTree Component Styles */
 
 .mint-sample-tree {
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
+}
+
+/* Dark --border-light equals --bg-card; row and band hairlines need --border-color there. */
+:where(html.dark) .mint-sample-tree {
+  --border-light: var(--border-color);
 }
 
 .mint-sample-tree--sm {
@@ -17,13 +22,14 @@
   user-select: none;
 }
 
-/* Node header (clickable row) */
+/* Node header (clickable row): 28px / 13px (4c) */
 .mint-sample-tree__node-header {
   display: flex;
   align-items: center;
   gap: 0.375rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.5rem 0 0.25rem;
+  border-radius: var(--radius);
   cursor: pointer;
   transition: background-color 0.15s ease;
 }
@@ -32,6 +38,26 @@
   background-color: var(--bg-hover);
 }
 
+/* Selection is the tree's only color: primary-soft row, primary ink text + icon (4c). */
+.mint-sample-tree__node-header--selected,
+.mint-sample-tree__node-header--selected:hover {
+  background-color: var(--color-primary-soft);
+}
+
+.mint-sample-tree__node-header--selected .mint-sample-tree__label,
+.mint-sample-tree__node-header--selected .mint-sample-tree__icon {
+  color: var(--_ink-primary);
+}
+
+.mint-sample-tree__node-header--selected .mint-sample-tree__label {
+  font-weight: 500;
+}
+
+.mint-sample-tree__node-header:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
 .mint-sample-tree--sm .mint-sample-tree__node-header {
   padding: 0.25rem 0.375rem;
   gap: 0.25rem;
@@ -53,7 +79,7 @@
   background: transparent;
   border: none;
   border-radius: var(--radius-sm);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   cursor: pointer;
   transition: color 0.15s ease, transform 0.15s ease;
   flex-shrink: 0;
@@ -64,9 +90,14 @@
   background-color: var(--bg-tertiary);
 }
 
+.mint-sample-tree__toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
 .mint-sample-tree__toggle svg {
-  width: 0.875rem;
-  height: 0.875rem;
+  width: 0.75rem;
+  height: 0.75rem;
   transition: transform 0.15s ease;
 }
 
@@ -108,19 +139,20 @@
   width: 1.5rem;
 }
 
-/* Icon */
+/* Icon: one neutral color, the node type reads from the glyph alone (4c). */
 .mint-sample-tree__icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1rem;
+  height: 1rem;
   flex-shrink: 0;
+  color: var(--text-secondary);
 }
 
 .mint-sample-tree__icon svg {
-  width: 1rem;
-  height: 1rem;
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 .mint-sample-tree--sm .mint-sample-tree__icon {
@@ -143,47 +175,6 @@
   height: 1.25rem;
 }
 
-/* Icon colors by type */
-.mint-sample-tree__icon--study {
-  color: var(--text-muted);
-}
-
-.mint-sample-tree__icon--experiment {
-  color: var(--color-primary);
-}
-
-.mint-sample-tree__icon--plate {
-  color: var(--mint-info);
-}
-
-.mint-sample-tree__icon--sample {
-  color: var(--mint-success);
-}
-
-.mint-sample-tree__icon--cell_line {
-  color: var(--color-purple);
-}
-
-.mint-sample-tree__icon--passage {
-  color: var(--text-secondary);
-}
-
-.mint-sample-tree__icon--clone {
-  color: var(--mint-warning);
-}
-
-.mint-sample-tree__icon--treatment {
-  color: var(--color-cta);
-}
-
-.mint-sample-tree__icon--folder {
-  color: var(--text-muted);
-}
-
-.mint-sample-tree__icon--custom {
-  color: var(--text-secondary);
-}
-
 /* Label */
 .mint-sample-tree__label {
   flex: 1;
@@ -194,6 +185,11 @@
   white-space: nowrap;
 }
 
+/* Sample nodes carry IDs. */
+.mint-sample-tree__label--sample {
+  font-family: var(--font-mono);
+}
+
 /* Badge */
 .mint-sample-tree__badge {
   display: inline-flex;
@@ -201,7 +197,7 @@
   justify-content: center;
   min-width: 1.25rem;
   padding: 0.125rem 0.375rem;
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
   font-weight: 600;
   border-radius: 9999px;
   flex-shrink: 0;
@@ -210,7 +206,7 @@
 .mint-sample-tree--sm .mint-sample-tree__badge {
   min-width: 1rem;
   padding: 0.0625rem 0.25rem;
-  font-size: 0.5rem;
+  font-size: 0.6875rem;
 }
 
 .mint-sample-tree--lg .mint-sample-tree__badge {
@@ -219,8 +215,16 @@
   font-size: 0.75rem;
 }
 
-.mint-sample-tree__badge--default {
-  background-color: var(--bg-tertiary);
+/* Counts are plain mono text; only the semantic variants stay pills (4c). */
+.mint-sample-tree__badge--default,
+.mint-sample-tree--sm .mint-sample-tree__badge--default,
+.mint-sample-tree--lg .mint-sample-tree__badge--default {
+  min-width: 0;
+  padding: 0;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 400;
+  background: none;
   color: var(--text-secondary);
 }
 
@@ -231,19 +235,26 @@
 
 .mint-sample-tree__badge--warning {
   background-color: var(--mint-warning-bg);
-  color: var(--mint-warning);
+  color: var(--mint-warning-text);
 }
 
 .mint-sample-tree__badge--error {
   background-color: var(--mint-error-bg);
-  color: var(--mint-error);
+  color: var(--_ink-error);
 }
 
-/* Children container */
+/* Children container. A one-row grid so expand/collapse animates
+   grid-template-rows 0fr ↔ 1fr with no max-height cap (4c). */
 .mint-sample-tree__children {
+  display: grid;
+  grid-template-rows: 1fr;
   margin-left: 1.25rem;
   padding-left: 0.75rem;
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-light);
+}
+
+.mint-sample-tree__children-inner {
+  min-height: 0;
   overflow: hidden;
 }
 
@@ -269,22 +280,29 @@
 @keyframes mint-tree-expand {
   from {
     opacity: 0;
-    max-height: 0;
+    grid-template-rows: 0fr;
   }
   to {
     opacity: 1;
-    max-height: 1000px;
+    grid-template-rows: 1fr;
   }
 }
 
 @keyframes mint-tree-collapse {
   from {
     opacity: 1;
-    max-height: 1000px;
+    grid-template-rows: 1fr;
   }
   to {
     opacity: 0;
-    max-height: 0;
+    grid-template-rows: 0fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-sample-tree__children--entering,
+  .mint-sample-tree__children--leaving {
+    animation: none;
   }
 }
 

package/src/styles/components/sample-legend.css

@@ -23,13 +23,15 @@
   transition: background-color 0.15s ease;
   background: none;
   border: none;
+  font: inherit;
+  color: inherit;
   cursor: pointer;
   text-align: left;
 }
 
 .mint-sample-legend__item:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-sample-legend__item:hover {
@@ -37,7 +39,7 @@
 }
 
 .mint-sample-legend__item--selected {
-  background-color: rgba(59, 130, 246, 0.1);
+  background-color: var(--color-primary-soft);
   box-shadow: 0 0 0 1px var(--color-primary);
 }
 
@@ -57,8 +59,16 @@
 }
 
 .mint-sample-legend__swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
   flex-shrink: 0;
-  border-radius: 0.125rem;
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
 .mint-sample-legend__swatch--sm {
@@ -96,7 +106,8 @@
 }
 
 .mint-sample-legend__count {
-  color: var(--text-muted);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
   background-color: var(--bg-secondary);
   border-radius: 9999px;
   padding: 0 0.375rem;
@@ -105,7 +116,7 @@
 }
 
 .mint-sample-legend__count--sm {
-  font-size: 0.625rem;
+  font-size: 0.6875rem;
 }
 
 .mint-sample-legend__count--md {
@@ -150,12 +161,12 @@
 
 .mint-sample-legend__add:hover {
   color: var(--text-primary);
-  border-color: rgba(59, 130, 246, 0.5);
+  border-color: var(--_control-border-strong);
 }
 
 .mint-sample-legend__add:focus-visible {
   outline: none;
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-offset);
 }
 
 .mint-sample-legend__add--sm {

package/src/styles/components/sample-selector.css

@@ -8,64 +8,45 @@
   /* No padding/background/border - let parent container provide styling */
 }
 
-/* Select All Row */
+/* Select-all header row (7c): a table header, not a button */
 .mint-sample-selector__select-all {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 0.75rem;
-  border-radius: var(--radius-md);
-  background-color: var(--bg-tertiary);
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.75rem;
+  border-bottom: 1px solid var(--border-color);
+  background-color: var(--bg-primary);
   cursor: pointer;
-  transition: background-color 0.15s ease;
 }
 
-.mint-sample-selector__select-all:hover {
-  background-color: var(--bg-hover);
+/* Over the group tree the header takes the tree's columns: its checkbox sits over the
+   group checkboxes (header pad + chevron + gap) and its count over the group counts
+   (scroll gutter + header pad + delete button + gap). */
+.mint-sample-selector__select-all--grouped {
+  padding-left: 1.875rem;
+  padding-right: 2.375rem;
 }
 
 .mint-sample-selector__select-all-label {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 500;
-  color: var(--text-primary);
+  color: var(--text-secondary);
 }
 
 .mint-sample-selector__select-all-count {
   margin-left: auto;
+  font-family: var(--font-mono);
   font-size: 0.75rem;
-  color: var(--text-muted);
+  color: var(--text-primary);
   font-variant-numeric: tabular-nums;
 }
 
-/* Checkboxes */
+/* Checkboxes are BaseCheckbox sm; only keep them from shrinking in flex rows. */
 .mint-sample-selector__checkbox {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
-  accent-color: var(--color-primary);
-  cursor: pointer;
   flex-shrink: 0;
 }
 
-.mint-sample-selector__checkbox--small {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.mint-sample-selector__checkbox--tiny {
-  width: 0.75rem;
-  height: 0.75rem;
-}
-
-/* Indeterminate checkbox styling */
-.mint-sample-selector__checkbox:indeterminate {
-  background-color: currentColor;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  background-size: 100% 100%;
-  background-position: center;
-  border-color: transparent;
-}
-
 /* Action Buttons Row */
 .mint-sample-selector__actions {
   position: relative;
@@ -79,22 +60,14 @@
   min-width: 0;
 }
 
-/* BaseButton overrides for action buttons */
+/* Layout only; BaseButton sm owns size, padding and type. */
 .mint-sample-selector__action-btn {
   width: 100%;
   min-width: 0; /* Allow labels to ellipsize inside tight containers */
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  padding-inline: 0.5rem;
-  font-size: 0.8125rem;
 }
 
 .mint-sample-selector__action-btn--reset {
-  width: var(--form-height-sm);
-  min-width: var(--form-height-sm);
-  aspect-ratio: 1;
-  padding: 0.5rem;
+  width: auto;
 }
 
 .mint-sample-selector__action-icon {
@@ -230,8 +203,8 @@
 .mint-sample-selector__major-name {
   flex: 1;
   min-width: 0;
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: 0.8125rem;
+  font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
@@ -257,17 +230,18 @@
 }
 
 /* Color Dot */
+/* Group color chip (7c) */
 .mint-sample-selector__color-dot {
-  width: 0.625rem;
-  height: 0.625rem;
-  border-radius: 50%;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 2px;
   flex-shrink: 0;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
 }
 
 .mint-sample-selector__color-dot--large {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.625rem;
+  height: 0.625rem;
 }
 
 .mint-sample-selector__color-dot--clickable {
@@ -289,17 +263,13 @@
 }
 
 /* Count Badge */
+/* Selected / total, mono (7c) */
 .mint-sample-selector__count-badge {
-  font-size: 0.625rem;
-  font-weight: 600;
-  padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
+  font-family: var(--font-mono);
+  font-size: 0.6875rem;
+  color: var(--text-secondary);
   font-variant-numeric: tabular-nums;
-}
-
-.mint-sample-selector__count-badge--small {
-  font-size: 0.5625rem;
-  padding: 0.0625rem 0.3125rem;
+  white-space: nowrap;
 }
 
 /* Delete Button */
@@ -380,7 +350,7 @@
 .mint-sample-selector__sub-name {
   flex: 1;
   min-width: 0;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   font-weight: 500;
   color: var(--text-primary);
   white-space: nowrap;
@@ -437,8 +407,8 @@
   flex: 1;
   min-width: 0;
   font-size: 0.75rem;
-  font-family: 'Fira Code', monospace;
-  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -512,10 +482,12 @@
 }
 
 .mint-sample-selector__ungrouped-count {
-  font-size: 0.625rem;
+  /* Joins the group count column: the groups' delete button + gap and the tree's scroll gutter. */
+  margin-right: 1.875rem;
+  font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
   background-color: var(--bg-tertiary);
-  color: var(--text-muted);
+  color: var(--text-secondary);
   border-radius: 9999px;
   font-variant-numeric: tabular-nums;
 }
@@ -625,7 +597,8 @@
 .mint-sample-selector__flat-name {
   flex: 1;
   min-width: 0;
-  font-size: 0.875rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
   color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;