@morscherlab/mint-sdk 1.3.0-beta.1 → 1.3.0-beta.11

package/dist/styles.css

@@ -1836,6 +1836,15 @@ button, input, select, textarea {
   max-width: min(18rem, calc(100vw - 1rem));
 }
 
+.mint-action-menu__check {
+  flex-shrink: 0;
+  color: var(--color-primary);
+}
+
+/* Unchecked radio rows keep the check's width so labels stay aligned. */
+.mint-action-menu__check--off {
+  visibility: hidden;
+}
 .mint-adduct-text {
   display: inline-flex;
   align-items: center;
@@ -2774,7 +2783,7 @@ button, input, select, textarea {
 .mint-topbar {
   display: block;
   width: 100%;
-  padding: 0.625rem 0.75rem;
+  padding: 0.75rem 1rem;
   background-color: var(--bg-secondary);
   box-sizing: border-box;
 }
@@ -2784,7 +2793,7 @@ button, input, select, textarea {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  min-height: 2rem;
+  min-height: 2.375rem;
   position: relative;
 }
 
@@ -2796,35 +2805,28 @@ button, input, select, textarea {
 }
 
 .mint-topbar__identity {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
 
-/* The 36px plugin tile would push the bar past 52px; the bar uses the 32px control height. */
-.mint-topbar__identity .mint-plugin-icon--topbar {
-  width: 2rem;
-  height: 2rem;
-}
-
-/* Integrated: the tile joins the static identity as a 20px mark (icon + name + version). */
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-topbar__identity {
-  width: auto;
-  padding-left: 0.125rem;
+/* Slotted logos sized above 36px shrink to fit instead of stretching the tile. */
+.mint-topbar__identity > * {
+  max-width: 100%;
+  max-height: 100%;
 }
 
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-plugin-icon--topbar {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+/* Left and right fields share the 36px identity tile height. */
+.mint-topbar .mint-experiment-popover__trigger,
+.mint-topbar .mint-experiment-popover__save-trigger {
+  height: 2.25rem;
 }
 
-.mint-topbar__brand:has(+ .mint-topbar__plugin-identity) .mint-plugin-icon--topbar :is(.mint-plugin-icon__svg, .mint-plugin-icon__img) {
-  width: 0.75rem;
-  height: 0.75rem;
+.mint-topbar .mint-experiment-popover__save-trigger {
+  width: 2.25rem;
 }
 
 /* Centered section — absolute so asymmetric left/right weight never shifts the
@@ -2863,8 +2865,8 @@ button, input, select, textarea {
 }
 
 .mint-topbar__logo-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   background-color: var(--color-primary);
   border-radius: var(--radius-md);
   display: flex;
@@ -2883,7 +2885,7 @@ button, input, select, textarea {
   color: var(--text-primary);
 }
 
-/* Static plugin identity: name + mono version, not a control (5a) */
+/* Static plugin identity: name only, not a control (5a) */
 .mint-topbar__plugin-identity {
   display: inline-flex;
   align-items: baseline;
@@ -2901,19 +2903,6 @@ button, input, select, textarea {
   text-overflow: ellipsis;
 }
 
-.mint-topbar__plugin-version {
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  color: var(--text-secondary);
-}
-
-.mint-topbar__divider {
-  width: 1px;
-  height: 1.25rem;
-  flex-shrink: 0;
-  background-color: var(--border-color);
-}
-
 /* Variant: card - inline card with margins and rounded corners */
 .mint-topbar--card {
   width: calc(100% - 2rem);
@@ -2940,7 +2929,7 @@ button, input, select, textarea {
   opacity: 0.8;
 }
 
-/* Title + subtitle stay inside the 32px control row (5a: 52px bar). */
+/* Title + subtitle stay inside the 36px control row. */
 .mint-topbar-title-group {
   display: flex;
   flex-direction: column;
@@ -4709,113 +4698,80 @@ button, input, select, textarea {
 
 .mint-file-uploader__dropzone {
   position: relative;
-  border: 1px dashed var(--_control-border-strong);
+  border: 2px dashed var(--border-color);
   border-radius: var(--radius-lg);
   cursor: pointer;
   background: var(--bg-secondary);
   transition: border-color 0.15s ease, background-color 0.15s ease;
 }
 
-/* 2g: hover only changes the surface; the border change is reserved for dragover. */
 .mint-file-uploader__dropzone:hover {
-  background: var(--bg-hover);
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 3%, var(--bg-secondary));
 }
 
 .mint-file-uploader__dropzone:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring-offset);
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
 }
 
-.mint-file-uploader__dropzone--dragover,
-.mint-file-uploader__dropzone--dragover:hover {
-  border: 1.5px solid var(--color-primary);
-  background: var(--color-primary-soft);
+.mint-file-uploader__dropzone--dragover {
+  border-color: var(--color-primary);
+  background: color-mix(in srgb, var(--color-primary) 5%, var(--bg-secondary));
 }
 
-.mint-file-uploader__dropzone--disabled,
-.mint-file-uploader__dropzone--disabled:hover {
-  background: var(--bg-tertiary);
+.mint-file-uploader__dropzone--disabled {
   opacity: var(--mint-disabled-opacity);
   cursor: not-allowed;
 }
 
 .mint-file-uploader__dropzone--sm {
-  padding: 0.75rem;
+  padding: 1.25rem;
 }
 
 .mint-file-uploader__dropzone--md {
-  padding: 1.125rem;
+  padding: 1.5rem;
 }
 
 .mint-file-uploader__dropzone--lg {
-  padding: 1.5rem;
+  padding: 2rem;
 }
 
 /* ==========================================================================
-   Content area — compact row: icon tile + prompt + accepted formats
+   Content area
    ========================================================================== */
 
 .mint-file-uploader__content {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  gap: 0.75rem;
+  text-align: center;
 }
 
 .mint-file-uploader__input {
   display: none;
 }
 
-.mint-file-uploader__icon-tile {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
+.mint-file-uploader__icon {
   width: 2rem;
   height: 2rem;
-  border-radius: var(--radius-md);
-  background: var(--bg-tertiary);
-  color: var(--text-secondary);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon-tile {
-  background: var(--color-primary);
-  color: white;
-}
-
-.mint-file-uploader__icon {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: 1.8;
+  color: var(--text-muted);
+  margin-bottom: 0.5rem;
 }
 
-.mint-file-uploader__copy {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  min-width: 0;
+.mint-file-uploader__dropzone:hover .mint-file-uploader__icon,
+.mint-file-uploader__dropzone--dragover .mint-file-uploader__icon {
+  color: var(--color-primary);
 }
 
 .mint-file-uploader__text {
-  color: var(--text-primary);
+  color: var(--text-secondary);
   font-size: 0.8125rem;
   font-weight: 500;
   margin: 0;
   padding: 0;
 }
 
-.mint-file-uploader__dropzone--dragover .mint-file-uploader__text {
-  color: var(--_ink-primary);
-}
-
-.mint-file-uploader__formats {
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-  font-size: 0.6875rem;
-  margin: 0;
-  padding: 0;
-}
-
 /* ==========================================================================
    Actions slot
    ========================================================================== */
@@ -9221,10 +9177,9 @@ html.dark .mint-toast__item {
 /* Header cells */
 .mint-well-plate__col-header,
 .mint-well-plate__row-header {
-  font-family: var(--font-mono);
-  font-weight: 400;
+  font-weight: 500;
   text-align: center;
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }
 
 .mint-well-plate__row-header {
@@ -9245,9 +9200,8 @@ html.dark .mint-toast__item {
   font-weight: 500;
   cursor: pointer;
   transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
-  /* Empty well: solid hairline, no dash — dozens of dashed rings read as noise (2b). */
-  background-color: var(--bg-card);
-  border: 1px solid color-mix(in srgb, var(--text-secondary) 35%, var(--border-color));
+  background-color: var(--bg-tertiary);
+  border: 1px dashed var(--border-color);
 }
 
 .mint-well-plate__well--rounded {
@@ -9259,7 +9213,7 @@ html.dark .mint-toast__item {
 }
 
 .mint-well-plate__well--filled {
-  background-color: var(--bg-tertiary);
+  border-style: solid;
 }
 
 .mint-well-plate__well--disabled {
@@ -9268,29 +9222,27 @@ html.dark .mint-toast__item {
 }
 
 /* Well states */
-/* Neutral ring + shape only, so a ring never vanishes into a sample color (2b). */
 .mint-well-plate__well--selected {
-  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--text-primary);
+  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
 }
 
 .mint-well-plate__well--drag-over {
   box-shadow: 0 0 0 2px var(--color-primary);
-  background-color: var(--color-primary-soft);
+  background-color: color-mix(in srgb, var(--color-primary) 20%, transparent);
 }
 
 .mint-well-plate__well--hovered {
-  box-shadow: 0 0 0 1px var(--text-secondary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mint-success) 50%, transparent);
 }
 
-/* !important: wellStyle() sets an inline solid `border` on every draggable well. */
 .mint-well-plate__well--drag-source {
-  border-style: dashed !important;
+  box-shadow: 0 0 0 2px var(--mint-warning);
   opacity: 0.5;
 }
 
 .mint-well-plate__well--drag-target {
-  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3.5px var(--color-primary);
-  background-color: var(--color-primary-soft);
+  box-shadow: 0 0 0 2px var(--mint-success), 0 0 0 3px var(--bg-card);
+  background-color: color-mix(in srgb, var(--mint-success) 20%, transparent);
 }
 
 /* Optional semantic classes for `wellClass` callbacks. */
@@ -9330,18 +9282,6 @@ html.dark .mint-toast__item {
   color: var(--text-primary);
 }
 
-/* Q / i marker glyph when the centre holds a label or well ID (iQC has no other cue) */
-.mint-well-plate__corner-glyph {
-  position: absolute;
-  top: 3px;
-  left: 6px;
-  font-size: 10px;
-  font-weight: 700;
-  line-height: 1;
-  pointer-events: none;
-  color: var(--text-primary);
-}
-
 /* Well ID text */
 .mint-well-plate__well-id {
   font-weight: 500;
@@ -9430,34 +9370,21 @@ html.dark .mint-toast__item {
 /* Badge (injection count / custom method indicator) */
 .mint-well-plate__badge {
   position: absolute;
-  top: -5px;
-  right: -5px;
-  box-sizing: border-box;
-  min-width: 14px;
-  height: 14px;
-  padding: 0 3px;
+  top: -4px;
+  right: -4px;
+  width: 16px;
+  height: 16px;
   border-radius: 9999px;
-  box-shadow: 0 0 0 2px var(--bg-card);
-  font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 10px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--bg-card);
+  color: white;
   pointer-events: none;
   line-height: 1;
 }
 
-/* Custom method: a plain dot (7a) */
-.mint-well-plate__badge--dot {
-  top: -2px;
-  right: -2px;
-  min-width: 8px;
-  height: 8px;
-  padding: 0;
-}
-
 /* Sample type legend bar */
 .mint-well-plate__sample-legend {
   margin-top: 0.5rem;
@@ -9474,23 +9401,15 @@ html.dark .mint-toast__item {
 }
 
 .mint-well-plate__sample-legend-dot {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
   width: 0.875rem;
   height: 0.875rem;
   border-radius: var(--radius-sm);
   flex-shrink: 0;
-  font-family: var(--font-mono);
-  font-size: 0.625rem;
-  font-weight: 600;
-  line-height: 1;
 }
 
 .mint-well-plate__sample-legend-text {
   font-size: 0.75rem;
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }
 
 /* Empty / loading / error placeholder host (content comes from EmptyState) */
@@ -14298,8 +14217,9 @@ html.dark .mint-dataframe__loading {
   color: var(--text-muted);
 }
 
-/* Action */
-.mint-empty-state--illustrated .mint-empty-state__action {
+/* Action — slotted content sits in a block so a child's own larger top margin collapses into this one. */
+.mint-empty-state--illustrated .mint-empty-state__action,
+.mint-empty-state--illustrated .mint-empty-state__content {
   margin-top: 0.625rem;
 }
 
@@ -18434,7 +18354,19 @@ button.mint-unit-input__unit:focus-visible {
   background: var(--mint-success-bg);
   color: var(--mint-success);
 }
-/* ResourcePickerList (8b): shared list for ExperimentSelectorModal and ArtifactSelectorModal. */
+/* ResourcePickerList: shared list for ExperimentSelectorModal and ArtifactSelectorModal.
+   No frame of its own (the modal is the card); rows are inset and rounded, groups are
+   pinned bars. */
+
+/* The modal is the only card: the list runs edge to edge, and the toolbar, group
+   bars and row text keep the modal's 1.25rem gutter themselves. */
+.mint-modal__body:has(> .mint-resource-picker) {
+  padding: 0;
+}
+.mint-modal__container:has(.mint-resource-picker) .mint-modal__header {
+  border-bottom: none;
+  padding-bottom: 0.75rem;
+}
 
 .mint-resource-picker {
   display: flex;
@@ -18447,6 +18379,7 @@ button.mint-unit-input__unit:focus-visible {
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
+  padding: 0 1.25rem;
 }
 .mint-resource-picker__search {
   flex: 1;
@@ -18456,12 +18389,10 @@ button.mint-unit-input__unit:focus-visible {
 .mint-resource-picker__frame {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  background-color: var(--bg-card);
+  border-top: 1px solid var(--border-color);
 }
 .mint-resource-picker__list {
+  padding-bottom: 0.5rem;
   max-height: min(28rem, calc(100vh - 16rem));
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -18474,14 +18405,17 @@ button.mint-unit-input__unit:focus-visible {
   gap: 0.5rem;
   flex-shrink: 0;
   width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 1;
   height: 30px;
-  padding: 0 12px;
+  padding: 0 1.25rem;
   border: 0;
   border-bottom: 1px solid var(--border-light);
   background-color: var(--bg-primary);
   font-family: inherit;
   font-size: 12px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--text-secondary);
   text-align: left;
   cursor: pointer;
@@ -18513,24 +18447,25 @@ button.mint-unit-input__unit:focus-visible {
 .mint-resource-picker__group-count {
   font: 11px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
 }
 
 .mint-resource-picker__row {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto 14px;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
   align-items: center;
-  gap: 10px;
+  gap: 12px;
   box-sizing: border-box;
   flex-shrink: 0;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
+  min-height: 56px;
+  margin: 2px 0.5rem;
+  padding: 10px 12px;
+  border-radius: var(--radius-md);
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.mint-resource-picker__row:last-child {
-  border-bottom: 0;
-}
 .mint-resource-picker__row:hover {
   background-color: var(--bg-hover);
 }
@@ -18546,7 +18481,7 @@ button.mint-unit-input__unit:focus-visible {
 .mint-resource-picker__text {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 4px;
   min-width: 0;
   line-height: 1.25;
 }
@@ -18554,18 +18489,49 @@ button.mint-unit-input__unit:focus-visible {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 13px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   color: var(--text-primary);
 }
 .mint-resource-picker__row--selected .mint-resource-picker__title {
   color: var(--_ink-primary);
 }
-.mint-resource-picker__code,
+.mint-resource-picker__code {
+  margin-right: 0.5rem;
+}
+.mint-resource-picker__aside {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  line-height: 1.25;
+  white-space: nowrap;
+}
 .mint-resource-picker__date {
-  font-family: var(--font-mono);
+  font: 12px var(--font-mono);
   font-variant-numeric: tabular-nums;
+  color: var(--text-muted);
+}
+.mint-resource-picker__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
 }
+.mint-resource-picker__status::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+}
+.mint-resource-picker__status--primary { color: var(--_ink-primary); }
+.mint-resource-picker__status--success { color: var(--mint-success); }
+.mint-resource-picker__status--warning { color: var(--mint-warning); }
+.mint-resource-picker__status--error { color: var(--mint-error); }
+.mint-resource-picker__status--info { color: var(--mint-info); }
 .mint-resource-picker__meta {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -18578,29 +18544,17 @@ button.mint-unit-input__unit:focus-visible {
   align-items: center;
   gap: 4px;
 }
-.mint-resource-picker__check-slot {
-  display: flex;
-  width: 14px;
-}
-.mint-resource-picker__check {
-  width: 14px;
-  height: 14px;
-  color: var(--color-primary);
-}
 
 .mint-resource-picker__skeleton-row {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 6px;
-  min-height: 44px;
-  padding: 5px 12px;
-  border-bottom: 1px solid var(--border-light);
-}
-.mint-resource-picker__skeleton-row:last-child {
-  border-bottom: 0;
+  gap: 8px;
+  min-height: 56px;
+  padding: 10px 1.25rem;
 }
 .mint-resource-picker__error {
+  margin: 0 1.25rem 1.25rem;
   padding: 0.75rem;
   border: 1px solid var(--mint-error-border);
   border-radius: var(--radius-md);
@@ -18620,6 +18574,7 @@ button.mint-unit-input__unit:focus-visible {
   align-items: center;
   gap: 0.5rem;
   flex-wrap: wrap;
+  padding: 0 1.25rem;
 }
 
 .mint-experiment-selector__filter-select {
@@ -18680,14 +18635,6 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   flex-shrink: 0;
 }
 
-/* Advanced filters row */
-.mint-experiment-selector__filters-advanced {
-  padding: 0.625rem;
-  border: 1px solid var(--border-light);
-  border-radius: var(--radius-md);
-  background-color: color-mix(in srgb, var(--bg-secondary) 72%, transparent);
-}
-
 /* Group toggle checkbox label */
 .mint-experiment-selector__group-toggle {
   display: inline-flex;
@@ -18718,7 +18665,8 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 .mint-experiment-selector__footer {
   display: flex;
   justify-content: flex-start;
-  padding-top: 0.25rem;
+  padding: 0.5rem 1.25rem 0.75rem;
+  border-top: 1px solid var(--border-light);
 }
 
 .mint-experiment-selector__clear-btn {
@@ -19542,9 +19490,9 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 }
 
 /* AppTopBar page selector — left-side route/page dropdown.
-   Trigger speaks the field language (5a): 32px, hover changes the background
-   only, open = field focus, inline 12px chevron. Menu = .mint-popover +
-   .mint-menu-item (2d); __menu / __item stay as aliases. */
+   Trigger speaks the field language (5a): 36px (the identity tile height), hover changes the background
+   only, open = field focus, inline 12px chevron. The menu keeps the 1.2 panel
+   (own card, tinted active row) rather than .mint-popover + .mint-menu-item. */
 
 .mint-page-selector {
   position: relative;
@@ -19556,8 +19504,8 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   align-items: center;
   gap: 0.5rem;
   width: 100%;
-  height: 2rem;
-  padding: 0 0.5rem 0 0.3125rem;
+  height: 2.25rem;
+  padding: 0 0.5rem 0 0.4375rem;
   border: 1px solid var(--border-color);
   background: var(--bg-card);
   color: var(--text-primary);
@@ -19644,44 +19592,88 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 
 .mint-page-selector__menu {
   position: absolute;
-  top: calc(100% + 0.25rem);
+  top: calc(100% + 0.375rem);
   left: 0;
   width: 16.25rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  padding: 0.375rem;
   z-index: 50;
 }
 
 .mint-page-selector__menu-title {
-  padding: 0.25rem 0.5rem 0.375rem;
+  padding: 0.375rem 0.625rem 0.5rem;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--text-secondary);
 }
 
+.mint-page-selector__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.4375rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  font-family: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color var(--mint-transition);
+}
+
+.mint-page-selector__item:hover:not(.mint-page-selector__item--disabled) {
+  background: var(--bg-hover);
+}
+
+.mint-page-selector__item--active {
+  background: var(--bg-tertiary);
+  font-weight: 600;
+}
+
+.mint-page-selector__item--disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .mint-page-selector__item-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
   background: var(--bg-tertiary);
-  color: var(--text-secondary-strong);
+  color: var(--text-secondary);
   display: grid;
   place-items: center;
   flex-shrink: 0;
 }
 
-.mint-page-selector__item-icon--metadata {
+.mint-page-selector__item--active .mint-page-selector__item-icon {
+  background: var(--color-primary-soft);
+  color: var(--color-primary);
+}
+
+.mint-page-selector__item-icon--metadata,
+.mint-page-selector__item--active .mint-page-selector__item-icon--metadata {
   background: transparent;
   color: inherit;
 }
 
 .mint-page-selector__item-icon svg {
-  width: 0.75rem;
-  height: 0.75rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
 }
 
 .mint-page-selector__metadata-icon.mint-plugin-icon--sm {
-  width: 1.25rem;
-  height: 1.25rem;
-  border-radius: var(--radius-sm);
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.3125rem;
 }
 
 .mint-page-selector__item-label {
@@ -19722,7 +19714,7 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   display: inline-flex;
   align-items: center;
   gap: 0.375rem;
-  height: 1.625rem;
+  height: 1.75rem;
   border: 0;
   padding: 0 0.875rem;
   border-radius: 9999px;
@@ -20590,6 +20582,7 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   white-space: nowrap;
 }
 .mint-picker__scope,
+.mint-picker__sort,
 .mint-picker__link {
   padding: 2px 6px;
   border: 0;
@@ -20600,10 +20593,20 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   cursor: pointer;
   transition: background-color 150ms ease;
 }
-.mint-picker__scope {
+.mint-picker__scope,
+.mint-picker__sort {
   flex-shrink: 0;
   color: var(--text-secondary-strong);
 }
+.mint-picker__sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.mint-picker__sort svg {
+  width: 12px;
+  height: 12px;
+}
 .mint-picker__link {
   color: var(--_ink-primary);
 }
@@ -20622,10 +20625,13 @@ html.dark .mint-experiment-selector__filters-toggle--active {
   cursor: not-allowed;
 }
 .mint-picker__scope:hover,
+.mint-picker__sort:hover,
+.mint-picker__sort[aria-expanded='true'],
 .mint-picker__link:hover {
   background: var(--bg-hover);
 }
 .mint-picker__scope:focus-visible,
+.mint-picker__sort:focus-visible,
 .mint-picker__link:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring-offset);
@@ -20669,6 +20675,14 @@ html.dark .mint-experiment-selector__filters-toggle--active {
 .mint-picker__list-head > span:nth-child(n + 3) {
   text-align: right;
 }
+.mint-picker__truncated {
+  margin: 0;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-light);
+  background: var(--bg-secondary);
+  font-size: 12px;
+  color: var(--text-secondary);
+}
 .mint-picker__row {
   box-sizing: border-box;
   height: 34px;