@morscherlab/mint-sdk 1.4.0-beta.2 → 1.4.0-beta.20

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

@@ -3,20 +3,105 @@
 .mint-sample-selector {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.5rem;
   height: 100%;
-  /* No padding/background/border - let parent container provide styling */
+  box-sizing: border-box;
+  padding-bottom: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background-color: var(--bg-card);
+}
+
+/* Card header: "Samples · N selected" and the grouping actions */
+.mint-sample-selector__header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.375rem 0.375rem 0.75rem;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-light);
+  font-size: 0.8125rem;
+  /* The header compacts when it is narrow (sidebars); see the query below. */
+  container-type: inline-size;
+}
+
+.mint-sample-selector__title {
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-weight: 600;
+  color: var(--text-primary);
 }
 
-/* Select-all header row (7c): a table header, not a button */
+.mint-sample-selector__selected {
+  /* Without the query (or with a long count) the count gives way, never the row. */
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+
+.mint-sample-selector__header-actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  margin-left: auto;
+}
+
+.mint-sample-selector__selected-short {
+  display: none;
+}
+
+/* Narrow selector: the header stays one row and keeps its height. The grouping
+   button shows only its icon (the label stays its accessible name and tooltip)
+   and the count shortens to "N sel." (screen readers keep "N selected"). */
+/* Measured: the full row (title, "N selected", Smart group, Clear groups) needs
+   about 17.55rem of header content width with Fira Sans. */
+@container (max-width: 17.625rem) {
+  .mint-sample-selector__group-btn .mint-button__label,
+  .mint-sample-selector__selected-full {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .mint-sample-selector__selected-short {
+    display: inline;
+  }
+
+  .mint-sample-selector__group-btn {
+    min-width: var(--form-height-sm);
+    padding-inline: 0.25rem;
+  }
+}
+
+.mint-sample-selector__grouped,
+.mint-sample-selector__flat,
+.mint-sample-selector__state {
+  padding: 0 0.5rem;
+}
+
+/* Select-all header row (7c): a table header, not a button. The margin matches the
+   body inset above, so its columns line up with the tree's. */
 .mint-sample-selector__select-all {
   display: flex;
   align-items: center;
   gap: 0.625rem;
   min-height: 2.25rem;
+  margin: 0 0.5rem;
   padding: 0 0.75rem;
   border-bottom: 1px solid var(--border-color);
-  background-color: var(--bg-primary);
   cursor: pointer;
 }
 
@@ -24,21 +109,21 @@
    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;
+  padding-left: 1.75rem;
+  padding-right: 2.25rem;
 }
 
 .mint-sample-selector__select-all-label {
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 500;
-  color: var(--text-secondary);
+  color: var(--text-primary);
 }
 
 .mint-sample-selector__select-all-count {
   margin-left: auto;
   font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--text-primary);
+  font-size: 0.6875rem;
+  color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 }
 
@@ -47,42 +132,6 @@
   flex-shrink: 0;
 }
 
-/* Action Buttons Row */
-.mint-sample-selector__actions {
-  position: relative;
-}
-
-.mint-sample-selector__actions-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 0.375rem;
-  min-width: 0;
-}
-
-/* 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 */
-}
-
-.mint-sample-selector__action-btn--reset {
-  width: auto;
-}
-
-.mint-sample-selector__action-icon {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-
-.mint-sample-selector__action-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 /* Grouped View */
 .mint-sample-selector__grouped {
   display: flex;
@@ -120,7 +169,7 @@
   border-radius: var(--radius-sm);
   color: var(--text-muted);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__expand-btn:hover {
@@ -182,10 +231,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: grab;
-  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition), opacity var(--mint-transition);
 }
 
 .mint-sample-selector__major-header:active {
@@ -217,7 +267,7 @@
   height: 0.875rem;
   color: var(--text-muted);
   flex-shrink: 0;
-  transition: transform 0.2s ease;
+  transition: transform var(--mint-transition);
 }
 
 .mint-sample-selector__chevron--small {
@@ -246,14 +296,13 @@
 
 .mint-sample-selector__color-dot--clickable {
   cursor: pointer;
-  transition: transform 0.15s ease;
+  transition: box-shadow var(--mint-transition);
   border: none;
   padding: 0;
   background: none;
 }
 
 .mint-sample-selector__color-dot--clickable:hover {
-  transform: scale(1.25);
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(0, 0, 0, 0.06);
 }
 
@@ -267,7 +316,7 @@
 .mint-sample-selector__count-badge {
   font-family: var(--font-mono);
   font-size: 0.6875rem;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
@@ -283,7 +332,7 @@
   border-radius: var(--radius-sm);
   color: var(--mint-error);
   cursor: pointer;
-  transition: all 0.15s ease;
+  transition: all var(--mint-transition);
 }
 
 .mint-sample-selector__delete-btn:hover {
@@ -317,7 +366,7 @@
 .mint-sample-selector__sub-group {
   margin-bottom: 0.125rem;
   border-radius: var(--radius);
-  transition: background-color 0.15s ease, box-shadow 0.15s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
 .mint-sample-selector__sub-group--drag-over {
@@ -329,10 +378,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: grab;
-  transition: background-color 0.15s ease, box-shadow 0.12s ease, opacity 0.12s ease;
+  transition: background-color var(--mint-transition), box-shadow var(--mint-transition), opacity var(--mint-transition);
 }
 
 .mint-sample-selector__sub-header:active {
@@ -369,9 +419,9 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease, opacity 0.15s ease;
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--mint-transition), opacity var(--mint-transition);
   cursor: grab;
 }
 
@@ -399,7 +449,7 @@
   flex-shrink: 0;
   color: var(--text-muted);
   opacity: 0;
-  transition: opacity 0.15s ease;
+  transition: opacity var(--mint-transition);
   cursor: grab;
 }
 
@@ -425,7 +475,7 @@
   color: var(--mint-warning);
   cursor: pointer;
   opacity: 0;
-  transition: all 0.15s ease;
+  transition: all var(--mint-transition);
 }
 
 .mint-sample-selector__remove-btn:hover {
@@ -464,10 +514,11 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__ungrouped-header:hover {
@@ -484,11 +535,12 @@
 .mint-sample-selector__ungrouped-count {
   /* Joins the group count column: the groups' delete button + gap and the tree's scroll gutter. */
   margin-right: 1.875rem;
+  font-family: var(--font-mono);
   font-size: 0.6875rem;
   padding: 0.125rem 0.375rem;
   background-color: var(--bg-tertiary);
   color: var(--text-secondary);
-  border-radius: 9999px;
+  border-radius: var(--radius);
   font-variant-numeric: tabular-nums;
 }
 
@@ -543,11 +595,11 @@
 
 .mint-sample-selector__search-icon {
   position: absolute;
-  left: 0.75rem;
+  left: 0.625rem;
   top: 50%;
   transform: translateY(-50%);
-  width: 1rem;
-  height: 1rem;
+  width: 0.875rem;
+  height: 0.875rem;
   color: var(--text-muted);
   pointer-events: none;
 }
@@ -555,18 +607,24 @@
 .mint-sample-selector__search-input {
   width: 100%;
   box-sizing: border-box;
-  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  font-size: 0.875rem;
+  height: var(--form-height-md);
+  padding: 0 0.625rem 0 2rem;
+  font-family: inherit;
+  font-size: 0.8125rem;
   color: var(--text-primary);
-  background-color: var(--bg-tertiary);
+  background-color: var(--bg-card);
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   outline: none;
-  transition: border-color 0.15s ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
+}
+
+.mint-sample-selector__search-input:hover {
+  border-color: var(--border-strong);
 }
 
 .mint-sample-selector__search-input:focus-visible {
-  box-shadow: var(--focus-ring);
+  box-shadow: var(--focus-ring-soft);
   border-color: var(--color-primary);
 }
 
@@ -585,9 +643,10 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.375rem 0.5rem;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.15s ease;
+  min-height: 1.75rem;
+  padding: 0 0.375rem;
+  border-radius: var(--radius-md);
+  transition: background-color var(--mint-transition);
 }
 
 .mint-sample-selector__flat-item:hover {

package/src/styles/components/schedule-calendar.css

@@ -29,7 +29,7 @@
   border: none;
   cursor: pointer;
   color: var(--text-muted);
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -54,7 +54,7 @@
   color: var(--text-primary);
   font-size: 0.75rem;
   font-weight: 500;
-  transition: background-color 0.15s ease, border-color 0.15s ease;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
   margin-left: 0.5rem;
 }
 
@@ -85,7 +85,7 @@
   color: var(--text-muted);
   font-size: 0.75rem;
   font-weight: 500;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition: background-color var(--mint-transition), color var(--mint-transition);
 }
 
 .mint-schedule__view-btn:not(:last-child) {
@@ -99,12 +99,12 @@
 
 .mint-schedule__view-btn--active {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-schedule__view-btn--active:hover {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 /* Body (week/day view) */
@@ -202,7 +202,7 @@
 
 .mint-schedule__day-header--today .mint-schedule__day-header-number {
   background-color: var(--color-primary);
-  color: white;
+  color: var(--text-on-accent);
 }
 
 .mint-schedule__slot {
@@ -239,7 +239,7 @@
   color: var(--text-primary);
   background-color: color-mix(in srgb, var(--event-color) 16%, var(--bg-card));
   border: 1px solid color-mix(in srgb, var(--event-color) 35%, transparent);
-  transition: box-shadow 0.15s ease;
+  transition: box-shadow var(--mint-transition);
 }
 
 .mint-schedule__event:hover {
@@ -395,7 +395,7 @@
   border-right: 1px solid var(--border-color);
   padding: 0.25rem;
   cursor: pointer;
-  transition: background-color 0.15s ease;
+  transition: background-color var(--mint-transition);
 }
 
 .mint-schedule__month-cell:nth-child(7n) {

package/src/styles/components/searchable-select.css

@@ -6,7 +6,7 @@
   width: 100%;
   min-height: var(--form-height-md);
   gap: 0.5rem;
-  padding: 0.5rem 0.75rem;
+  padding: 0.375rem 0.75rem;
   border: 1px solid var(--border-color);
   border-radius: var(--radius-md);
   background: var(--bg-secondary);
@@ -14,11 +14,11 @@
   font: inherit;
   font-size: 0.8125rem;
   cursor: pointer;
-  transition: border-color 150ms ease, box-shadow 150ms ease;
+  transition: border-color var(--mint-transition), box-shadow var(--mint-transition);
 }
 
-.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.3rem 0.5rem; font-size: 0.75rem; }
-.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.75rem 1rem; font-size: 1rem; }
+.mint-searchable-select--sm .mint-searchable-select__trigger { min-height: var(--form-height-sm); padding: 0.25rem 0.5rem; font-size: 0.75rem; }
+.mint-searchable-select--lg .mint-searchable-select__trigger { min-height: var(--form-height-lg); padding: 0.5rem 1rem; font-size: 1rem; }
 .mint-searchable-select__trigger:hover:not(:disabled) { border-color: var(--_field-border-hover); }
 .mint-searchable-select__trigger:focus-visible,
 .mint-searchable-select__trigger[aria-expanded='true'] { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
@@ -41,17 +41,17 @@
   overflow: hidden;
 }
 
-.mint-searchable-select__search-wrap { position: relative; margin: 0 0 0.25rem; padding: 0.25rem 0.25rem 0.5rem; border-bottom: 1px solid var(--border-light); }
-.mint-searchable-select__search-wrap svg { position: absolute; top: calc(50% - 0.125rem); left: 0.75rem; width: 0.875rem; height: 0.875rem; color: var(--text-secondary); transform: translateY(-50%); pointer-events: none; }
-.mint-searchable-select__search { width: 100%; min-height: var(--form-height-sm); padding: 0.375rem 0.625rem 0.375rem 1.75rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; transition: border-color 150ms ease, box-shadow 150ms ease; }
-.mint-searchable-select__search:hover { border-color: var(--_field-border-hover); }
-.mint-searchable-select__search:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--focus-ring-soft); }
+.mint-searchable-select__search-wrap { position: relative; margin: 0 0 0.25rem; padding: 0 0 0.25rem; border-bottom: 1px solid var(--border-light); }
+.mint-searchable-select__search-wrap svg { position: absolute; top: calc(50% - 0.125rem); left: 0.5rem; width: 0.875rem; height: 0.875rem; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
+/* Borderless search row; the open popover is the focus context. */
+.mint-searchable-select__search { width: 100%; min-height: 28px; padding: 0 0.5rem 0 1.75rem; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 0.8125rem; box-sizing: border-box; }
+.mint-searchable-select__search:focus-visible { outline: none; }
+.mint-searchable-select__search::placeholder { color: var(--text-muted); }
 .mint-searchable-select__list { min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
 /* Rows = .mint-menu-item (2d); __option* stay as aliases. */
-.mint-searchable-select__empty { padding: 1rem; text-align: center; color: var(--text-secondary); font-size: 0.75rem; }
+.mint-searchable-select__empty { padding: 0.5rem; color: var(--text-muted); font-size: 0.75rem; }
 .mint-searchable-select__footer { margin: 0.25rem -0.25rem -0.25rem; padding: 0.625rem; border-top: 1px solid var(--border-light); color: var(--text-secondary); font-size: 0.75rem; }
 
 @media (prefers-reduced-motion: reduce) {
-  .mint-searchable-select__trigger,
-  .mint-searchable-select__search { transition: none; }
+  .mint-searchable-select__trigger { transition: none; }
 }

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

@@ -1,17 +1,21 @@
-/* SectionCard — the MINT 1.1 one-card system.
+/* SectionCard — the one-card system.
  *
- * One card per page region: 12px radius, one shadow token (--card-shadow),
- * a single header strip, and hairline-separated regions inside — never a
- * card nested in a card.
+ * One card per page region: 1px border, 8px radius, no shadow, a single
+ * header strip (muted icon, title, mono count, tools on the right), and
+ * hairline-separated regions inside — never a card nested in a card.
  */
 
 .mint-section-card {
+  /* The left grid that the header and the rows share: header icon (or row
+     lead) width, then this gap. Set --mint-section-card-gap on the card to
+     change both. */
+  --mint-section-card-lead-width: 1rem;
+  --mint-section-card-gap: 0.625rem;
   display: flex;
   flex-direction: column;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border-color);
   background: var(--bg-secondary);
-  box-shadow: var(--card-shadow);
   overflow: hidden;
   transition: background-color var(--mint-transition), border-color var(--mint-transition);
 }
@@ -32,8 +36,12 @@
 .mint-section-card__header {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0.6875rem 1rem;
+  gap: var(--mint-section-card-gap);
+  box-sizing: border-box;
+  min-height: 2.5rem;
+  /* 4px block padding: a 28px header control plus padding plus the 1px rule
+     stays inside the 40px strip (6px made it 41px). */
+  padding: 0.25rem 0.625rem 0.25rem 0.75rem;
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
 }
@@ -42,14 +50,15 @@
   border-bottom-color: var(--border-light);
 }
 
+/* Muted icon, no tinted chip: every accent renders the same. */
 .mint-section-card__icon-chip {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: var(--radius);
+  width: var(--mint-section-card-lead-width);
+  height: var(--mint-section-card-lead-width);
+  color: var(--text-muted);
 }
 
 .mint-section-card__icon {
@@ -57,41 +66,6 @@
   height: 0.8125rem;
 }
 
-.mint-section-card__icon-chip--primary {
-  background: var(--color-primary-soft);
-  color: var(--color-primary);
-}
-
-.mint-section-card__icon-chip--experiment {
-  background: var(--color-experiment-soft);
-  color: var(--color-experiment);
-}
-
-.mint-section-card__icon-chip--project {
-  background: var(--color-project-soft);
-  color: var(--color-project);
-}
-
-.mint-section-card__icon-chip--success {
-  background: var(--mint-success-bg);
-  color: var(--mint-success);
-}
-
-.mint-section-card__icon-chip--error {
-  background: var(--mint-error-bg);
-  color: var(--mint-error);
-}
-
-.mint-section-card__icon-chip--warning {
-  background: var(--mint-warning-bg);
-  color: var(--mint-warning);
-}
-
-.mint-section-card__icon-chip--info {
-  background: var(--mint-info-bg);
-  color: var(--mint-info);
-}
-
 .mint-section-card__title {
   margin: 0;
   font-size: 0.8125rem;
@@ -99,9 +73,10 @@
   color: var(--text-primary);
 }
 
+/* Captions are for column and section labels; a card title stays sentence case. */
 .mint-section-card__title--uppercase {
-  font-size: 0.75rem;
-  color: var(--text-secondary);
+  text-transform: none;
+  letter-spacing: 0;
 }
 
 .mint-section-card__count {
@@ -125,6 +100,8 @@
   padding: 0.5rem 1rem;
   border-top: 1px solid var(--border-color);
   background: var(--bg-primary);
+  font-size: 0.75rem;
+  color: var(--text-secondary);
   flex-shrink: 0;
 }
 
@@ -140,12 +117,27 @@
 .mint-section-card__row {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  padding: 0.5625rem 1rem;
+  gap: var(--mint-section-card-gap);
+  padding: 0.375rem 0.75rem;
   background: var(--bg-secondary);
   transition: background-color var(--mint-transition);
 }
 
+/* Leading glyph slot of a row: as wide as the header icon, so the glyph
+ * centres under it and the row text starts at the header title. Leave it
+ * empty to keep the text on the grid. It is one title line high (1lh at the
+ * title size), so a two-line row keeps its glyph on the first line. */
+.mint-section-card__row-lead {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: flex-start;
+  width: var(--mint-section-card-lead-width);
+  height: 1lh;
+  font-size: 0.8125rem;
+}
+
 a.mint-section-card__row,
 button.mint-section-card__row {
   cursor: pointer;
@@ -157,3 +149,16 @@ a.mint-section-card__row:hover,
 button.mint-section-card__row:hover {
   background: var(--bg-primary);
 }
+
+/* Comfortable density gives the header and rows back their height. */
+[data-density="comfortable"] .mint-section-card__header {
+  min-height: 2.75rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.875rem;
+}
+
+[data-density="comfortable"] .mint-section-card__row {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  /* Same left inset as the header, so row content lines up under the header. */
+  padding-left: 0.875rem;
+}