@morscherlab/mint-sdk 1.4.0-beta.9 → 1.4.0

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

@@ -121,7 +121,7 @@
 /* Horizontal padding matches BaseInput canonical scale (10/12/16) so FormField's
    12px label indent aligns with the numeric text across all input types. */
 .mint-number-input__input--sm { padding: 0.25rem 0.625rem; font-size: 0.8125rem; }
-.mint-number-input__input--md { padding: 0.375rem 0.75rem;    font-size: 0.75rem; }
+.mint-number-input__input--md { padding: 0.375rem 0.75rem;    font-size: 0.875rem; }
 .mint-number-input__input--lg { padding: 0.5rem 1rem;      font-size: 1rem; }
 
 /* ---------- Unit suffix ---------- */

package/src/styles/components/onboarding.css

@@ -0,0 +1,368 @@
+/* Onboarding: the top-bar Help button and checklist chip, the Help panel,
+ * the tour layer (scrim, hole, card) and the what's-new dots. */
+
+:root {
+  --mint-onboarding-scrim: rgba(15, 23, 42, 0.45);
+}
+
+html.dark {
+  --mint-onboarding-scrim: rgba(2, 6, 23, 0.62);
+}
+
+/* ---- Top bar ---- */
+
+.mint-onboarding-help {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.mint-topbar__settings-btn--open {
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2rem;
+  padding: 0 0.625rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-primary);
+  font: 500 0.8125rem/1 var(--font-sans);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--mint-transition), border-color var(--mint-transition);
+}
+
+.mint-onboarding-help__chip:hover {
+  background: var(--bg-hover);
+}
+
+.mint-onboarding-help__chip--open {
+  border-color: var(--color-primary);
+  background: var(--color-primary-soft);
+  color: var(--_ink-primary);
+}
+
+.mint-onboarding-help__chip:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1 var(--font-mono);
+}
+
+.mint-onboarding-help__bar {
+  width: 1.75rem;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__bar > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font: 600 11px/16px var(--font-sans);
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--bg-card);
+}
+
+/* ---- Help panel ---- */
+
+.mint-onboarding-help__panel {
+  position: fixed;
+  z-index: var(--mint-z-tray);
+  width: 18rem;
+  padding: 0 0 4px;
+  overflow: hidden;
+}
+
+.mint-onboarding-help__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.75rem 0.5rem;
+}
+
+.mint-onboarding-help__heading {
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__progress {
+  height: 3px;
+  margin: 0 0.75rem 0.25rem;
+  border-radius: 2px;
+  background: var(--bg-tertiary);
+  overflow: hidden;
+}
+
+.mint-onboarding-help__progress > span {
+  display: block;
+  height: 100%;
+  background: var(--color-primary);
+  transition: width var(--mint-transition);
+}
+
+.mint-onboarding-help__todos {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mint-onboarding-help__todo {
+  display: grid;
+  grid-template-columns: 1rem 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.875rem;
+  padding: 0 0.75rem;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+}
+
+.mint-onboarding-help__check {
+  display: grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  box-sizing: border-box;
+  border: 1.5px solid var(--border-color);
+  border-radius: 50%;
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__check {
+  border: 0;
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+}
+
+.mint-onboarding-help__todo--done .mint-onboarding-help__todo-title {
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__link {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--_ink-primary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.mint-onboarding-help__link:hover {
+  text-decoration: underline;
+}
+
+.mint-onboarding-help__link:focus-visible {
+  outline: none;
+  border-radius: var(--radius-sm);
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding-help__hide {
+  display: block;
+  text-align: left;
+  margin: 0.25rem 0.75rem 0.5rem;
+  color: var(--text-secondary);
+}
+
+.mint-onboarding-help__section {
+  padding: 0.625rem 0.75rem 0.25rem;
+  border-top: 1px solid var(--border-color);
+  color: var(--text-secondary);
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding-help__icon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  color: var(--text-muted);
+}
+
+.mint-onboarding-help__panel > .mint-menu-item {
+  width: calc(100% - 8px);
+  margin: 0 4px;
+}
+
+.mint-onboarding-help__new {
+  margin-left: auto;
+  padding: 3px 4px;
+  border-radius: var(--radius-sm);
+  background: var(--color-primary);
+  color: var(--text-on-accent);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+/* ---- Tour layer ---- */
+
+.mint-onboarding {
+  position: fixed;
+  inset: 0;
+  z-index: var(--mint-z-tour);
+  pointer-events: none;
+}
+
+/* Takes every click outside the card. An advanceOn 'click' step cuts the hole out of it. */
+.mint-onboarding__blocker {
+  position: absolute;
+  inset: 0;
+  pointer-events: auto;
+}
+
+.mint-onboarding__hole {
+  position: fixed;
+  border-radius: var(--radius-lg);
+  box-shadow: 0 0 0 2px var(--color-primary), 0 0 0 9999px var(--mint-onboarding-scrim);
+  pointer-events: none;
+  transition: left 200ms ease, top 200ms ease, width 200ms ease, height 200ms ease;
+}
+
+.mint-onboarding__card {
+  position: fixed;
+  display: grid;
+  gap: 0.5rem;
+  box-sizing: border-box;
+  width: 17rem;
+  max-width: calc(100vw - 24px);
+  padding: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--bg-card);
+  box-shadow: var(--shadow-lg);
+  color: var(--text-primary);
+  pointer-events: auto;
+}
+
+.mint-onboarding__card:focus {
+  outline: none;
+}
+
+.mint-onboarding__close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: grid;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.mint-onboarding__close:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.mint-onboarding__close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+.mint-onboarding__title {
+  margin: 0;
+  padding-right: 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.mint-onboarding__body {
+  margin: 0;
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  line-height: 1.45;
+}
+
+.mint-onboarding__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.375rem;
+  margin-top: 0.25rem;
+}
+
+.mint-onboarding__count {
+  color: var(--text-muted);
+  font: 500 0.75rem/1.5rem var(--font-mono);
+  margin-top: -0.375rem;
+}
+
+/* Read by screen readers only. */
+.mint-onboarding__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.mint-onboarding__hint {
+  margin-right: auto;
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+/* A dot at the top-right corner of an element with unseen news. */
+.mint-onboarding__dot {
+  position: fixed;
+  z-index: 40;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--bg-card);
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+}
+
+.mint-onboarding__dot:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-onboarding-help__chip,
+  .mint-onboarding-help__bar > span,
+  .mint-onboarding-help__progress > span,
+  .mint-onboarding__hole {
+    transition: none;
+  }
+}

package/src/styles/components/progress-bar.css

@@ -22,13 +22,13 @@
 }
 
 /* ========================================================================
-   Rail variant (default) — single filled track, pill ends
+   Rail variant (default) — single filled track, square-ish ends (v2: no capsules)
    ======================================================================== */
 
 .mint-progress__track {
   width: 100%;
   background-color: var(--bg-tertiary);
-  border-radius: 9999px; /* pill ends — spec */
+  border-radius: var(--radius-sm);
   overflow: hidden;
 }
 
@@ -38,7 +38,7 @@
 
 .mint-progress__bar {
   height: 100%;
-  border-radius: 9999px;
+  border-radius: var(--radius-sm);
   transition: width 0.3s ease;
 }
 

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

@@ -23,26 +23,69 @@
   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);
 }
 
 .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 {

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

@@ -30,14 +30,10 @@
 .mint-searchable-select__value { flex: 1; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
 .mint-searchable-select__value--placeholder { color: var(--text-muted); }
 
-/* Surface = .mint-popover (2d); this alias keeps only placement. */
+/* Surface = .mint-popover (2d). useFloatingPanel sets the fixed position and width. */
 .mint-searchable-select__panel {
-  position: absolute;
-  top: calc(100% + 0.25rem);
-  right: 0;
-  left: 0;
-  z-index: 30;
-  max-height: min(38rem, 80vh);
+  z-index: var(--mint-z-popover);
+  max-height: min(38rem, 80vh, var(--mint-floating-available-height, 100vh));
   overflow: hidden;
 }
 

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

@@ -6,6 +6,11 @@
  */
 
 .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);
@@ -31,10 +36,12 @@
 .mint-section-card__header {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  gap: var(--mint-section-card-gap);
   box-sizing: border-box;
   min-height: 2.5rem;
-  padding: 0.375rem 0.625rem 0.375rem 0.75rem;
+  /* 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;
 }
@@ -49,8 +56,8 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
+  width: var(--mint-section-card-lead-width);
+  height: var(--mint-section-card-lead-width);
   color: var(--text-muted);
 }
 
@@ -110,12 +117,27 @@
 .mint-section-card__row {
   display: flex;
   align-items: center;
-  gap: 0.625rem;
+  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;
@@ -131,10 +153,12 @@ button.mint-section-card__row:hover {
 /* Comfortable density gives the header and rows back their height. */
 [data-density="comfortable"] .mint-section-card__header {
   min-height: 2.75rem;
-  padding: 0.5rem 0.75rem 0.5rem 0.875rem;
+  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;
 }

package/src/styles/components/settings-modal.css

@@ -37,6 +37,12 @@
   border-bottom-color: var(--border-color);
 }
 
+/* The pane ends after the last group's last row: no closing hairline there,
+   it would sit on the footer rule with nothing between them. */
+.mint-settings-modal__group:last-of-type > .mint-settings-modal__group-grid > .mint-settings-modal__row:last-child {
+  border-bottom: none;
+}
+
 /* The field cell anchors the ↺ reset, which sits just left of the control (5d).
    --_settings-control-w is the control's width; stacked fields (text, custom slots)
    keep 0 and put the reset at the right end of their label line. */
@@ -655,10 +661,9 @@
 .mint-settings-modal__density-preview {
   --_density-row: 2.125rem;
 
+  /* A hairline table in the setting row, not a bordered box inside the modal. */
   grid-column: 1 / -1;
   overflow: hidden;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
   font-size: 0.75rem;
 }
 

package/src/styles/components/time-picker.css

@@ -124,13 +124,10 @@
   height: 0.875rem;
 }
 
-/* Dropdown — placement only; the look is .mint-popover. Spans the field width. */
+/* Dropdown — the look is .mint-popover; useFloatingPanel sets the fixed position and the field width. */
 .mint-time-picker__dropdown {
-  position: absolute;
-  z-index: 50;
-  margin-top: 0.25rem;
-  width: 100%;
-  min-width: 100%;
+  z-index: var(--mint-z-popover);
+  max-height: var(--mint-floating-available-height, none);
   overflow: hidden;
 }
 

package/src/styles/components/toast.css

@@ -5,7 +5,7 @@
   /* AppTopBar publishes its bottom edge + 1rem so toasts clear its controls. */
   top: var(--mint-toast-offset-top, 1rem);
   right: 1rem;
-  z-index: 9999;
+  z-index: var(--mint-z-toast);
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

package/src/styles/components/tooltip.css

@@ -5,8 +5,8 @@
 }
 
 .mint-tooltip__content {
-  position: absolute;
-  z-index: 9999;
+  position: fixed;
+  z-index: var(--mint-z-toast);
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;

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

@@ -140,7 +140,7 @@ button.mint-unit-input__unit:focus-visible {
 
 .mint-unit-input__menu {
   position: fixed;
-  z-index: 1000;
+  z-index: var(--mint-z-popover);
   width: 148px;
 }
 

package/src/styles/components/well-edit-popup.css

@@ -5,12 +5,12 @@
 .mint-well-edit-popup__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 40;
+  z-index: calc(var(--mint-z-popover) - 1);
 }
 
 .mint-well-edit-popup {
   position: fixed;
-  z-index: 50;
+  z-index: var(--mint-z-popover);
   width: 300px;
   padding: 0;
   overflow: hidden;

package/src/styles/index.css

@@ -29,6 +29,7 @@
 @import './components/input.css';
 @import './components/modal.css';
 @import './components/number-input.css';
+@import './components/onboarding.css';
 @import './components/plate-editor.css';
 @import './components/radio-group.css';
 @import './components/section-card.css';