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

package/src/components/WellPlate.story.vue

@@ -5,7 +5,7 @@ import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, WellShape,
 
 const formats: WellPlateFormat[] = [6, 12, 24, 48, 96, 384]
 const selectionModes: WellPlateSelectionMode[] = ['none', 'single', 'multiple', 'rectangle']
-const sizes: WellPlateSize[] = ['sm', 'md', 'lg', 'xl']
+const sizes: WellPlateSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
 const shapes: WellShape[] = ['rounded', 'circle']
 
 const selectedWells = ref<string[]>([])
@@ -23,7 +23,8 @@ const PLATE_CONFIGS: Record<WellPlateFormat, { rows: number; cols: number }> = {
 function generateMockWells(format: WellPlateFormat): Record<string, Partial<Well>> {
   const config = PLATE_CONFIGS[format]
   const wells: Record<string, Partial<Well>> = {}
-  const sampleTypes = ['sample', 'control', 'blank', 'qc']
+  // The 3a marker set: shape per type, Q / i glyphs for QC / iQC.
+  const sampleTypes = ['sample', 'sample', 'blank', 'qc', 'iqc']
 
   for (let row = 0; row < config.rows; row++) {
     for (let col = 0; col < config.cols; col++) {
@@ -63,6 +64,14 @@ function generateHeatmapWells(format: WellPlateFormat): Record<string, Partial<W
 const mockWells96 = generateMockWells(96)
 const heatmapWells = generateHeatmapWells(96)
 const mockWells6 = generateMockWells(6)
+// One well per marker type; the Q / i glyph moves to a corner when an ID or label takes the centre.
+const markerWells: Record<string, Partial<Well>> = {
+  A1: { id: 'A1', row: 0, col: 0, state: 'filled', sampleType: 'sample', metadata: { label: 'S-01' } },
+  A2: { id: 'A2', row: 0, col: 1, state: 'filled', sampleType: 'blank', metadata: { label: 'Blank' } },
+  A3: { id: 'A3', row: 0, col: 2, state: 'filled', sampleType: 'qc', metadata: { label: 'Pool' } },
+  B1: { id: 'B1', row: 1, col: 0, state: 'filled', sampleType: 'iqc', metadata: { label: 'Std 1' } },
+  B2: { id: 'B2', row: 1, col: 1, state: 'filled', sampleType: 'iqc' },
+}
 
 const rectSelected = ref<string[]>([])
 
@@ -129,7 +138,6 @@ function initState() {
     wellShape: 'rounded' as WellShape,
     showLabels: true,
     showWellIds: false,
-    showSampleTypeIndicator: true,
     showLegend: false,
     disabled: false,
     readonly: false,
@@ -153,7 +161,6 @@ function initState() {
             :well-shape="state.wellShape"
             :show-labels="state.showLabels"
             :show-well-ids="state.showWellIds"
-            :show-sample-type-indicator="state.showSampleTypeIndicator"
             :show-legend="state.showLegend"
             :disabled="state.disabled"
             :readonly="state.readonly"
@@ -191,7 +198,6 @@ function initState() {
         />
         <HstCheckbox v-model="state.showLabels" title="Show Labels" />
         <HstCheckbox v-model="state.showWellIds" title="Show Well IDs" />
-        <HstCheckbox v-model="state.showSampleTypeIndicator" title="Sample Type Indicator" />
         <HstCheckbox v-model="state.showLegend" title="Show Legend" />
         <HstCheckbox v-model="state.disabled" title="Disabled" />
         <HstCheckbox v-model="state.readonly" title="Readonly" />
@@ -234,7 +240,6 @@ function initState() {
           :wells="mockWells6"
           selection-mode="multiple"
           show-labels
-          show-sample-type-indicator
           show-legend
           size="xl"
           well-shape="circle"
@@ -265,13 +270,19 @@ function initState() {
           :wells="mockWells96"
           selection-mode="none"
           show-labels
-          show-sample-type-indicator
           show-legend
           size="md"
         />
       </div>
     </Variant>
 
+    <Variant title="Marker Glyphs with IDs and Labels">
+      <div style="padding: 2rem; display: flex; gap: 2rem;">
+        <WellPlate :format="6" :wells="markerWells" selection-mode="none" show-well-ids size="lg" />
+        <WellPlate :format="6" :wells="markerWells" selection-mode="none" show-well-labels size="lg" />
+      </div>
+    </Variant>
+
     <Variant title="Dose-Response Conditions">
       <div style="padding: 2rem;">
         <h3 style="margin-bottom: 1rem; font-size: 0.875rem; color: var(--text-muted, #94a3b8);">

package/src/components/WellPlate.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Interactive 96/384-well plate grid with drag-to-select, heatmap overlays, per-well editing, and sample-color mapping. */
-import { ref, computed } from 'vue'
+import { computed } from 'vue'
 import type { WellPlateFormat, WellPlateSelectionMode, WellPlateSize, Well, HeatmapConfig, WellShape, WellEditField, WellEditData, WellLegendItem, ColumnCondition, RowCondition, WellSampleDropData, WellSampleDropParser, WellClassResolver, WellClassValue, WellStyleResolver } from '../types'
 import { useEventListener } from '../composables/useEventListener'
 import WellEditPopupInternal from './internal/WellEditPopupInternal.vue'
@@ -25,7 +25,8 @@ import {
 } from './WellPlate.geometry'
 import { useWellPlateInteraction } from './WellPlate.interaction'
 import {
-  sampleTypeIndicator,
+  sampleTint,
+  warnSampleTypeIndicatorDeprecated,
   wellBadge,
   wellClasses,
   wellLabel,
@@ -41,6 +42,10 @@ interface Props {
   selectionMode?: WellPlateSelectionMode
   showLabels?: boolean
   showWellIds?: boolean
+  /**
+   * @deprecated No-op since MINT 1.3; removed in MINT 1.4. Wells show the 3a
+   * sample-type marker (shape per type, `Q` / `i` glyphs for QC / iQC) regardless.
+   */
   showSampleTypeIndicator?: boolean
   heatmap?: HeatmapConfig
   sampleColors?: Record<string, string>
@@ -107,6 +112,8 @@ const props = withDefaults(defineProps<Props>(), {
   sampleDropParser: undefined,
 })
 
+if (props.showSampleTypeIndicator) warnSampleTypeIndicatorDeprecated()
+
 const emit = defineEmits<{
   'update:modelValue': [wellIds: string[]]
   'well-click': [wellId: string, event: MouseEvent]
@@ -140,9 +147,6 @@ defineSlots<{
   empty?: () => unknown
 }>()
 
-const plateRef = ref<HTMLElement | null>(null)
-const tableRef = ref<HTMLElement | null>(null)
-
 const plateConfig = computed(() => PLATE_CONFIGS[props.format])
 
 const rowLabels = computed(() => createPlateRowLabels(plateConfig.value))
@@ -243,20 +247,27 @@ function getWellStyle(well: Well): Record<string, string | number | undefined> {
   }
 }
 
-function getSampleTypeIndicator(well: Well): string | null {
-  return sampleTypeIndicator(well, props.showSampleTypeIndicator)
-}
-
 function getWellLabel(well: Well): string | undefined {
   return wellLabel(well, props.showWellLabels)
 }
 
+// A group is otherwise shown by color alone; name it from the legend.
+function getWellGroupName(well: Well): string | undefined {
+  return well.group && (props.legendItems?.find(item => item.type === well.group)?.label ?? well.group)
+}
+
+// Names the sample even when the cell is too small to draw it.
+function getWellAriaLabel(well: Well): string {
+  const name = well.metadata?.label
+  const group = getWellGroupName(well)
+  return `Well ${well.id}${name ? `, Name: ${name}` : ''}${well.sampleType ? `, Sample type: ${well.sampleType}` : ''}${group ? `, Group: ${group}` : ''}${well.value !== undefined ? `, Value: ${well.value}` : ''}`
+}
+
 function getWellBadge(well: Well): { text: string; color: string } | null {
   return wellBadge(well, props.showBadges)
 }
 
 useEventListener(() => document, 'mouseup', handleMouseUp)
-useEventListener(() => document, 'keydown', handleKeyDown)
 
 const containerStyle = computed(() =>
   isFillMode.value ? {} : {
@@ -279,9 +290,9 @@ const tableStyle = computed(() => ({
 
 <template>
   <div
-    ref="plateRef"
     :class="['mint-well-plate', isFillMode ? 'mint-well-plate--fill' : 'mint-well-plate--inline']"
     :style="containerStyle"
+    @keydown="handleKeyDown"
   >
     <div v-if="error" class="mint-well-plate__state">
       <slot name="error" :error="error">
@@ -304,7 +315,6 @@ const tableStyle = computed(() => ({
     <div v-else class="mint-well-plate__scroll">
       <div class="mint-well-plate__content">
         <table
-          ref="tableRef"
           class="mint-well-plate__table"
           role="grid"
           :aria-label="`${props.format}-well plate`"
@@ -420,7 +430,7 @@ const tableStyle = computed(() => ({
               <div
                 role="gridcell"
                 tabindex="0"
-                :aria-label="`Well ${well.id}${well.sampleType ? `, Sample type: ${well.sampleType}` : ''}${well.value !== undefined ? `, Value: ${well.value}` : ''}`"
+                :aria-label="getWellAriaLabel(well)"
                 :aria-selected="isSelected(well.id)"
                 :aria-disabled="props.disabled || well.state === 'disabled'"
                 :draggable="props.selectionMode === 'drag' && !!well.sampleType"
@@ -434,7 +444,7 @@ const tableStyle = computed(() => ({
                   fontSize: sizeConfig.fontSize,
                   ...getWellStyle(well),
                 }"
-                :title="`${well.id}${well.sampleType ? `: ${well.sampleType}` : ''}${getWellLabel(well) ? ` - ${getWellLabel(well)}` : ''}`"
+                :title="`${well.id}${well.sampleType ? `: ${well.sampleType}` : ''}${getWellGroupName(well) ? `, ${getWellGroupName(well)}` : ''}${getWellLabel(well) ? ` - ${getWellLabel(well)}` : ''}`"
                 @click="handleWellClick(well, $event)"
                 @mousedown="handleWellMouseDown(well, $event)"
                 @mouseenter="handleWellMouseEnter(well, $event)"
@@ -448,6 +458,8 @@ const tableStyle = computed(() => ({
                 @keydown="handleWellMoveKeydown(well, $event)"
                 @keydown.enter.exact="handleWellClick(well, $event as unknown as MouseEvent)"
                 @keydown.space.exact.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.enter.shift.exact="handleWellClick(well, $event as unknown as MouseEvent)"
+                @keydown.space.shift.exact.prevent="handleWellClick(well, $event as unknown as MouseEvent)"
               >
                 <!-- Well label text (from metadata.label) -->
                 <span
@@ -456,13 +468,6 @@ const tableStyle = computed(() => ({
                 >
                   {{ getWellLabel(well) }}
                 </span>
-                <!-- Sample type indicator (S/B/Q/C) -->
-                <span
-                  v-else-if="getSampleTypeIndicator(well)"
-                  class="mint-well-plate__indicator"
-                >
-                  {{ getSampleTypeIndicator(well) }}
-                </span>
                 <!-- Well ID -->
                 <span
                   v-else-if="props.showWellIds"
@@ -512,7 +517,7 @@ const tableStyle = computed(() => ({
           >
             <span
               class="mint-well-plate__sample-legend-dot"
-              :style="{ backgroundColor: `${item.color}26`, border: `1px solid ${item.color}66` }"
+              :style="sampleTint(item.color)"
             />
             <span class="mint-well-plate__sample-legend-text">{{ item.label }}</span>
           </div>
@@ -538,6 +543,7 @@ const tableStyle = computed(() => ({
           :well-data="wells[editingWellId]"
           :edit-fields="editFields"
           :default-injection-volume="defaultInjectionVolume"
+          :marker-colors="sampleColors"
           :position="editPopupPosition"
           @save="handleEditSave"
           @clear="handleEditClear"

package/src/components/index.ts

@@ -8,15 +8,11 @@ export { default as BaseCheckbox } from './BaseCheckbox.vue'
 export { default as BaseToggle } from './BaseToggle.vue'
 export { default as BaseRadioGroup } from './BaseRadioGroup.vue'
 export { default as BaseSlider } from './BaseSlider.vue'
-/** Range slider with a gradient color track and color-coded value badge for threshold visualization. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `BaseSlider` instead. */
-export { default as ColorSlider } from './ColorSlider.vue'
 export { default as BaseTabs } from './BaseTabs.vue'
 export { default as BaseModal } from './BaseModal.vue'
 export { default as SegmentedControl } from './SegmentedControl.vue'
 export { default as MultiSelect } from './MultiSelect.vue'
 export { default as BasePill } from './BasePill.vue'
-/** Button that opens a dropdown menu for selecting one option from a list. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `ActionMenu` instead. */
-export { default as DropdownButton } from './DropdownButton.vue'
 export { default as Calendar } from './Calendar.vue'
 export { default as DataFrame } from './DataFrame.vue'
 
@@ -43,7 +39,6 @@ export { default as ThemeToggle } from './ThemeToggle.vue'
 export { default as CollapsibleCard } from './CollapsibleCard.vue'
 export { default as AppTopBar } from './AppTopBar.vue'
 export { default as AppAvatarMenu } from './AppAvatarMenu.vue'
-export { default as AppPluginSwitcher } from './AppPluginSwitcher.vue'
 export { default as AppSidebar } from './AppSidebar.vue'
 export { default as AppLayout } from './AppLayout.vue'
 export { default as MobileSupportGate } from './MobileSupportGate.vue'
@@ -53,7 +48,8 @@ export { default as GeneratedResultRenderer } from './GeneratedResultRenderer.vu
 export { default as GeneratedPlotlyResult } from './GeneratedPlotlyResult.vue'
 export { default as ComponentBindingRenderer } from './ComponentBindingRenderer.vue'
 export { default as ControlWorkspaceView } from './ControlWorkspaceView.vue'
-export { default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
+/** Complete ControlWorkspaceView page shell for WellPlate + DoseCalculator dose design. @deprecated Scheduled for removal in MINT 1.4; use `ControlWorkspaceView` instead, with `defineDoseDesignControlModel()`. */
+export { /** @deprecated Removed in MINT 1.4. */ default as DoseDesignWorkspaceView } from './DoseDesignWorkspaceView.vue'
 export { default as AppContainer } from './AppContainer.vue'
 export { default as PluginIcon } from './PluginIcon.vue'
 export { default as LayoutResizeHandle } from './LayoutResizeHandle.vue'
@@ -74,30 +70,43 @@ export { default as AdductText } from './AdductText.vue'
 export { default as SettingsModal } from './SettingsModal.vue'
 
 // Biological experiment components
-export { default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
-export { default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
-export { default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
-export { default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
+/** Render biology template envelopes with matching SDK components such as WellPlate, DoseCalculator, and DataFrame. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateRenderer } from './BioTemplateRenderer.vue'
+/** Current-experiment template workspace with load/save/reset controls and WellPlate/DataFrame/DoseCalculator previews. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplateExperimentWorkspaceView } from './BioTemplateExperimentWorkspaceView.vue'
+/** Complete current-experiment workspace for a curated biology template pack with save/load controls and component-prop slots. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePackWorkspaceView } from './BioTemplatePackWorkspaceView.vue'
+/** Complete editable biology template preset workspace for WellPlate/DoseCalculator, LC-MS, qPCR, generated controls, preview components, and current-experiment save wiring. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as BioTemplatePresetWorkspaceView } from './BioTemplatePresetWorkspaceView.vue'
 export { default as WellPlate } from './WellPlate.vue'
-export { default as RackEditor } from './RackEditor.vue'
-export { default as SampleLegend } from './SampleLegend.vue'
-export { default as PlateMapEditor } from './PlateMapEditor.vue'
-export { default as ExperimentTimeline } from './ExperimentTimeline.vue'
+export { default as PlateEditor } from './PlateEditor.vue'
+/** Clickable color-swatch legend for plate sample types, supporting selection, count display, add/remove, and custom color assignment. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as SampleLegend } from './SampleLegend.vue'
+/** Horizontal or vertical timeline of ordered protocol steps with status indicators, drag-to-reorder, and step-type iconography. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as ExperimentTimeline } from './ExperimentTimeline.vue'
 
 // Sample management components
+/** Interactive sample list with drag-and-drop group assignment, color labeling, and smart-group support. */
 export { default as SampleSelector } from './SampleSelector.vue'
-export { default as AutoGroupModal } from './AutoGroupModal.vue'
-export { default as GroupAssigner } from './GroupAssigner.vue'
-export { default as SmartGroupModal } from './SmartGroupModal.vue'
-export { default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
-export { default as SmartGroupManual } from './SmartGroupManual.vue'
+/** Smart Group modal wired to the `useAutoGroup` engine. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as AutoGroupModal } from './AutoGroupModal.vue'
+/** Drag-and-drop two-zone assigner for splitting sample groups into control and treatment arms. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as GroupAssigner } from './GroupAssigner.vue'
+/** Smart Group modal with the auto Field Recipe and the manual cohort builder. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupModal } from './SmartGroupModal.vue'
+/** Smart Group auto mode: groups samples by a field recipe. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupFieldRecipe } from './SmartGroupFieldRecipe.vue'
+/** Smart Group manual mode: builds cohorts from selected samples. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as SmartGroupManual } from './SmartGroupManual.vue'
 
 // Lab/Experiment components
 export { default as MoleculeInput } from './MoleculeInput.vue'
 export { default as ConcentrationInput } from './ConcentrationInput.vue'
 export { default as DoseCalculator } from './DoseCalculator.vue'
-export { default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
-export { default as ReagentList } from './ReagentList.vue'
+/** Editor for a single reagent definition with axis orientation, dilution-series generator, and position-count validation for 96/384-well plates. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as ReagentEditor, type ReagentDefinition } from './ReagentEditor.vue'
+/** Sortable, searchable table of experiment reagents showing lot number, expiry, storage conditions, and stock level with low-stock warnings. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as ReagentList } from './ReagentList.vue'
 export { default as SampleHierarchyTree } from './SampleHierarchyTree.vue'
 export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 
@@ -105,14 +114,10 @@ export { default as ProtocolStepEditor } from './ProtocolStepEditor.vue'
 export { default as PlotlyChart } from './PlotlyChart.vue'
 export { default as ScientificNumber } from './ScientificNumber.vue'
 export { default as ChemicalFormula } from './ChemicalFormula.vue'
+/** Displays LC/MS or GC/MS acquisition sequence progress with ETA and remaining-time labels. */
 export { default as SequenceProgressBar } from './SequenceProgressBar.vue'
-/** Filterable instrument alert/event list keyed by each alert's required stable event_key. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
-export { default as InstrumentAlertLog } from './InstrumentAlertLog.vue'
+/** Status badge for instrument states: a tone dot (or dash / hollow shape for offline, never-reported and inactive) plus a label. */
 export { default as InstrumentStateBadge } from './InstrumentStateBadge.vue'
-/** Compact card for live instrument monitor status, sample, method, sequence progress, and ETA. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
-export { default as InstrumentStatusCard } from './InstrumentStatusCard.vue'
-/** Table for Xcalibur-compatible LCMS sequence rows with optional reorder/remove/duplicate controls. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; instrument UI moves to the mld-ms plugins. */
-export { default as LcmsSequenceTable } from './LcmsSequenceTable.vue'
 
 // Scientific input components
 export { default as FormulaInput } from './FormulaInput.vue'
@@ -135,10 +140,8 @@ export { default as ExperimentCodeBadge } from './ExperimentCodeBadge.vue'
 
 // Scheduling / booking components
 export { default as DateTimePicker } from './DateTimePicker.vue'
-/** Paired start/end time pickers that validate range order and display computed duration. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; use `TimePicker` instead. */
 export { default as TimeRangeInput } from './TimeRangeInput.vue'
 export { default as ScheduleCalendar } from './ScheduleCalendar.vue'
-/** Card displaying a lab resource with availability status, specs, tags, and a book action. @deprecated Unused by the MINT platform and scheduled for removal in MINT 1.3; no platform replacement is planned. */
 export { default as ResourceCard } from './ResourceCard.vue'
 export { default as SectionCard } from './SectionCard.vue'
 
@@ -146,10 +149,10 @@ export { default as SectionCard } from './SectionCard.vue'
 export { default as ExperimentSelectorModal } from './ExperimentSelectorModal.vue'
 export { default as ArtifactSelectorModal } from './ArtifactSelectorModal.vue'
 /** Modal picker over the read-only server mounts, recording paths rather than copying data. */
-export { default as FileBrowserModal } from './FileBrowserModal.vue'
 export { default as GeneratedPathInput } from './GeneratedPathInput.vue'
 export { default as ArtifactSaveDialog } from './ArtifactSaveDialog.vue'
 export { default as ExperimentPopover } from './ExperimentPopover.vue'
-export { default as FitPanel } from './FitPanel.vue'
+/** Control panel for running a curve-fit job with progress bar, results table, and error display. @deprecated Scheduled for removal in MINT 1.4; no SDK replacement. */
+export { /** @deprecated Removed in MINT 1.4. */ default as FitPanel } from './FitPanel.vue'
 
 export { default as FilePicker } from './FilePicker.vue'

package/src/components/internal/AppTopBarPageSelectorInternal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /** Dropdown trigger that switches between named pages, closing on outside click or Escape. */
-import { computed } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 import { useDropdownState } from '../../composables/useDropdownState'
 import type { PageSelectorItem, PageSelectorItemInput } from '../../types/components'
 import { normalizeItemInput } from '../../utils/items'
@@ -24,7 +24,10 @@ const emit = defineEmits<{
   select: [page: PageSelectorItem]
 }>()
 
-const { isOpen, rootRef, triggerRef, close, toggle } = useDropdownState()
+const { isOpen, close, toggle } = useDropdownState({
+  rootRef: useTemplateRef<HTMLElement>('root'),
+  triggerRef: useTemplateRef<HTMLElement>('trigger'),
+})
 const normalizedPages = computed<PageSelectorItem[]>(() => props.pages.map(normalizeItemInput))
 
 const current = computed<PageSelectorItem | undefined>(() =>
@@ -43,9 +46,9 @@ function handleSelect(page: PageSelectorItem) {
 </script>
 
 <template>
-  <div ref="rootRef" class="mint-page-selector" :style="{ minWidth }">
+  <div ref="root" class="mint-page-selector" :style="{ minWidth }">
     <button
-      ref="triggerRef"
+      ref="trigger"
       type="button"
       class="mint-page-selector__trigger"
       :class="{ 'mint-page-selector__trigger--open': isOpen }"
@@ -86,7 +89,7 @@ function handleSelect(page: PageSelectorItem) {
       </span>
     </button>
 
-    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
+    <div v-if="isOpen" class="mint-popover mint-page-selector__menu" role="menu">
       <div class="mint-page-selector__menu-title">Go to</div>
       <ActionItemInternal
         v-for="page in normalizedPages"
@@ -95,8 +98,8 @@ function handleSelect(page: PageSelectorItem) {
         :to="page.to"
         :disabled="page.disabled"
         :class="[
-          'mint-page-selector__item',
-          { 'mint-page-selector__item--active': page.id === current?.id },
+          'mint-menu-item mint-page-selector__item',
+          { 'mint-menu-item--selected mint-page-selector__item--active': page.id === current?.id },
           { 'mint-page-selector__item--disabled': page.disabled },
         ]"
         role="menuitem"
@@ -118,6 +121,9 @@ function handleSelect(page: PageSelectorItem) {
           </slot>
         </span>
         <span class="mint-page-selector__item-label">{{ page.label }}</span>
+        <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M3.5 8.5l3 3 6-7" />
+        </svg>
       </ActionItemInternal>
     </div>
   </div>

package/src/components/internal/AppTopBarPillNavInternal.vue

@@ -65,8 +65,8 @@ function handleClickOutside(event: MouseEvent) {
   if (!clickedInside) openItemId.value = null
 }
 
-const hasActiveChild = (item: PillNavItem) =>
-  item.children?.some(child => child.id === props.currentItemId) ?? false
+const activeChild = (item: PillNavItem) =>
+  item.children?.find(child => child.id === props.currentItemId)
 
 function isSvgIcon(icon: PillNavItem['icon']): icon is string | string[] {
   if (!icon) return false
@@ -89,7 +89,7 @@ useEventListener(() => document, 'click', handleClickOutside)
         type="button"
         :class="[
           'mint-pill-nav__item',
-          { 'mint-pill-nav__item--active': item.id === currentItemId || hasActiveChild(item) },
+          { 'mint-pill-nav__item--active': item.id === currentItemId || activeChild(item) !== undefined },
           { 'mint-pill-nav__item--disabled': item.disabled },
         ]"
         :disabled="item.disabled"
@@ -113,7 +113,8 @@ useEventListener(() => document, 'click', handleClickOutside)
           </template>
           <path v-else :d="item.icon" />
         </svg>
-        {{ item.label }}
+        {{ activeChild(item)?.label ?? item.label }}
+        <span v-if="item.dot" class="mint-pill-nav__dot" role="img" aria-label="Needs attention" />
         <svg
           class="mint-pill-nav__chevron"
           :class="{ 'mint-pill-nav__chevron--open': openItemId === item.id }"
@@ -158,11 +159,12 @@ useEventListener(() => document, 'click', handleClickOutside)
           <path v-else :d="item.icon" />
         </svg>
         {{ item.label }}
+        <span v-if="item.dot" class="mint-pill-nav__dot" role="img" aria-label="Needs attention" />
       </ActionItemInternal>
 
       <div
         v-if="item.children?.length && openItemId === item.id"
-        class="mint-pill-nav__dropdown"
+        class="mint-popover mint-pill-nav__dropdown"
         role="menu"
       >
         <ActionItemInternal
@@ -172,8 +174,8 @@ useEventListener(() => document, 'click', handleClickOutside)
           :to="option.to"
           :disabled="option.disabled"
           :class="[
-            'mint-pill-nav__dropdown-item',
-            { 'mint-pill-nav__dropdown-item--active': option.id === currentItemId },
+            'mint-menu-item mint-pill-nav__dropdown-item',
+            { 'mint-menu-item--selected mint-pill-nav__dropdown-item--active': option.id === currentItemId },
             { 'mint-pill-nav__dropdown-item--disabled': option.disabled },
           ]"
           role="menuitem"
@@ -183,6 +185,9 @@ useEventListener(() => document, 'click', handleClickOutside)
           <span v-if="option.description" class="mint-pill-nav__dropdown-description">
             {{ option.description }}
           </span>
+          <svg class="mint-menu-item__check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M3.5 8.5l3 3 6-7" />
+          </svg>
         </ActionItemInternal>
       </div>
     </div>

package/src/components/internal/CalendarGridPanelInternal.vue

@@ -109,7 +109,7 @@ function dayAriaLabel(date: Date): string {
           !day.isCurrentMonth ? 'mint-date-picker__day--other-month' : '',
           day.isDisabled ? 'mint-date-picker__day--disabled' : '',
           isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--selected' : '',
-          isToday(day.date) && !isSameDay(day.date, selectedDate) ? 'mint-date-picker__day--today' : '',
+          isToday(day.date) ? 'mint-date-picker__day--today' : '',
         ]"
         @click="emit('select', day)"
       >