@morscherlab/mint-sdk 1.0.0-beta.2 → 1.0.0-beta.4

package/src/components/AppTopBar.vue

@@ -1,24 +1,27 @@
 <script setup lang="ts">
 /** Full application top bar with brand logo, page selector or plugin switcher, centered pill nav, experiment popover, and avatar menu. */
-import { ref, computed, inject, onMounted, onUnmounted } from 'vue'
+import { ref, computed, inject } from 'vue'
 import type {
-  TopBarPage,
-  TopBarTab,
-  TopBarTabOption,
+  PillNavOption,
   TopBarSettingsConfig,
   TopBarVariant,
   PillNavItem,
+  PillNavItemInput,
   PageSelectorItem,
+  PageSelectorItemInput,
   PluginSwitcherInfo,
   PluginSwitcherPlugin,
   AccountMenuItem,
+  SettingsTab,
 } from '../types/components'
+import type { PluginNavItem } from '../types/platform'
+import { normalizeItemInput } from '../utils/items'
 import ThemeToggle from './ThemeToggle.vue'
 import SettingsModal from './SettingsModal.vue'
 import ExperimentPopover from './ExperimentPopover.vue'
 import ExperimentSelectorModal from './ExperimentSelectorModal.vue'
-import AppPageSelector from './AppPageSelector.vue'
-import AppPillNav from './AppPillNav.vue'
+import AppPageSelectorInternal from './internal/AppPageSelectorInternal.vue'
+import AppPillNavInternal from './internal/AppPillNavInternal.vue'
 import AppAvatarMenu from './AppAvatarMenu.vue'
 import AppPluginSwitcher from './AppPluginSwitcher.vue'
 import PluginIcon from './PluginIcon.vue'
@@ -26,43 +29,57 @@ import { usePlatformContext } from '../composables/usePlatformContext'
 import { APP_EXPERIMENT_KEY } from '../composables/useAppExperiment'
 
 interface Props {
-  // Classic title & breadcrumb
+  /** App or plugin title shown in the left title group when no page selector is present. */
   title?: string
+  /** Secondary title copy shown under the title in title-group layouts. */
   subtitle?: string
+  /** Show the default MINT logo when the icon/logo slot is not provided. */
   showLogo?: boolean
+  /** Top bar visual treatment. */
   variant?: TopBarVariant
-  pluginName?: string
-  pages?: TopBarPage[]
-  currentPageId?: string
-  tabs?: TopBarTab[]
-  currentTabId?: string
+  /** Home link used by the brand icon. */
   homePath?: string
 
-  // New layout — left page selector / plugin switcher
-  pageSelector?: PageSelectorItem[]
+  /** Preferred route-level page switch entries for plugin and platform pages. Integrated plugins read platform plugin.nav_items metadata automatically when pageSelector is omitted. */
+  pageSelector?: PageSelectorItemInput[]
+  /** Active id for the preferred page selector. */
   currentPageSelectorId?: string
+  /** Optional plugin switcher shown in the left navigation position instead of pageSelector. */
   pluginSwitcher?: PluginSwitcherInfo
 
-  // New layout — centered pill nav
-  pillNav?: PillNavItem[]
+  /** Preferred centered navigation for local modes inside the current route. */
+  pillNav?: PillNavItemInput[]
+  /** Active id for the preferred centered pill navigation. */
   currentPillId?: string
 
-  // New right cluster — avatar menu + optional notifications
+  /** Account dropdown entries. Takes precedence over the classic profile button. */
   accountMenu?: AccountMenuItem[]
+  /** Show the notifications icon button. */
   showNotifications?: boolean
+  /** Draw a notification dot on the notifications icon. */
   hasNotificationDot?: boolean
 
-  // Classic right cluster (still works; AvatarMenu takes precedence over Profile)
+  /** Show the theme toggle button. */
   showThemeToggle?: boolean
+  /** Show the settings button and modal. */
   showSettings?: boolean
+  /** Built-in SettingsModal configuration. */
   settingsConfig?: TopBarSettingsConfig
+  /** Show the standalone badge when the plugin is not integrated into the platform. */
   showStandaloneLabel?: boolean
+  /** Custom standalone badge label. */
   standaloneLabel?: string
+  /** Show the classic admin shortcut. */
   showAdmin?: boolean
+  /** Route used by the classic admin shortcut. */
   adminPath?: string
+  /** Show the classic profile button when accountMenu is not provided. */
   showProfile?: boolean
+  /** Classic profile display name. */
   userName?: string
+  /** Explicit classic profile initial. */
   userInitial?: string
+  /** Classic profile email, used by avatar/account layouts. */
   userEmail?: string
 }
 
@@ -82,14 +99,11 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  'page-select': [page: TopBarPage]
-  'tab-select': [tab: TopBarTab]
-  'tab-option-select': [option: TopBarTabOption, tab: TopBarTab]
   'profile-click': []
   'admin-click': []
-  // New
   'page-selector-select': [page: PageSelectorItem]
   'pill-select': [item: PillNavItem]
+  'pill-option-select': [option: PillNavOption, item: PillNavItem]
   'plugin-switcher-select': [plugin: PluginSwitcherPlugin]
   'plugin-switcher-install': []
   'account-menu-select': [item: AccountMenuItem]
@@ -111,98 +125,87 @@ const profileInitial = computed(() => {
   return 'U'
 })
 
-const hasPageSelector = computed(() => !!props.pageSelector?.length)
+const hasPlatformPageSelector = computed(() =>
+  props.pageSelector === undefined && !!plugin.value?.nav_items?.length,
+)
+const hasPageSelector = computed(() => !!props.pageSelector?.length || hasPlatformPageSelector.value)
 const hasPluginSwitcher = computed(() => !!props.pluginSwitcher)
 const hasPillNav = computed(() => !!props.pillNav?.length)
 const hasAccountMenu = computed(() => !!props.accountMenu?.length)
-const hasLegacyBreadcrumb = computed(
-  () => !hasPageSelector.value && !hasPluginSwitcher.value && (!!props.pluginName || !!props.pages?.length),
-)
 const hasTitleGroup = computed(
   () =>
     !hasPageSelector.value &&
     !hasPluginSwitcher.value &&
     !!props.title &&
-    !!props.subtitle &&
-    !props.pluginName &&
-    !props.pages?.length,
+    !!props.subtitle
 )
 const hasTitleOnly = computed(
   () =>
     !hasPageSelector.value &&
     !hasPluginSwitcher.value &&
     !hasTitleGroup.value &&
-    !hasLegacyBreadcrumb.value &&
     !!props.title,
 )
+const platformPageSelector = computed<PageSelectorItem[]>(() =>
+  hasPlatformPageSelector.value
+    ? plugin.value?.nav_items?.map(pluginNavItemToPageSelectorItem) ?? []
+    : [],
+)
+const normalizedPageSelector = computed<PageSelectorItem[]>(() =>
+  props.pageSelector !== undefined
+    ? props.pageSelector.map(normalizeItemInput)
+    : platformPageSelector.value,
+)
+const normalizedPillNav = computed<PillNavItemInput[]>(() => props.pillNav ?? [])
+const normalizedSettingsTabs = computed<SettingsTab[]>(() =>
+  props.settingsConfig?.tabs?.map(normalizeItemInput) ?? [],
+)
+const effectiveCurrentPageSelectorId = computed(() =>
+  props.currentPageSelectorId
+    ?? (hasPlatformPageSelector.value ? currentItemIdFromLocation(normalizedPageSelector.value) : undefined)
+    ?? (hasPlatformPageSelector.value ? normalizedPageSelector.value[0]?.id : undefined),
+)
 
-const showPagesDropdown = ref(false)
-const dropdownRef = ref<HTMLElement | null>(null)
-const openTabDropdown = ref<string | null>(null)
-const tabDropdownRefs = ref<Map<string, HTMLElement>>(new Map())
-
-function togglePagesDropdown() {
-  showPagesDropdown.value = !showPagesDropdown.value
-  openTabDropdown.value = null
-}
-
-function handlePageClick(page: TopBarPage) {
-  if (page.disabled) return
-  emit('page-select', page)
-  showPagesDropdown.value = false
+function normalizeNavPath(path?: string): string {
+  const raw = path?.trim() || '/'
+  const prefixed = raw.startsWith('/') ? raw : `/${raw}`
+  return prefixed.replace(/\/+$/, '') || '/'
 }
 
-function toggleTabDropdown(tabId: string) {
-  showPagesDropdown.value = false
-  openTabDropdown.value = openTabDropdown.value === tabId ? null : tabId
+function pageIdFromPath(path: string, fallback: string): string {
+  const normalized = normalizeNavPath(path)
+  if (normalized === '/') return 'dashboard'
+  return normalized.replace(/^\/+/, '').replace(/\/+/g, '-') || fallback
 }
 
-function handleTabClick(tab: TopBarTab) {
-  if (tab.disabled) return
-  if (tab.children?.length) {
-    toggleTabDropdown(tab.id)
-  } else {
-    emit('tab-select', tab)
-    openTabDropdown.value = null
+function pluginNavItemToPageSelectorItem(item: PluginNavItem, index: number): PageSelectorItem {
+  const path = normalizeNavPath(item.path)
+  return {
+    id: item.id || pageIdFromPath(path, `page-${index + 1}`),
+    label: item.label,
+    to: path,
+    icon: item.icon || plugin.value?.icon,
+    hint: item.description || plugin.value?.name,
   }
 }
 
-function handleTabOptionClick(option: TopBarTabOption, tab: TopBarTab) {
-  if (option.disabled) return
-  emit('tab-option-select', option, tab)
-  openTabDropdown.value = null
-}
+function currentPagePath(): string | undefined {
+  if (typeof window === 'undefined') return undefined
+  const pathname = normalizeNavPath(window.location.pathname)
+  const routePrefix = normalizeNavPath(plugin.value?.route_prefix)
 
-function setTabDropdownRef(el: HTMLElement | null, tabId: string) {
-  if (el) {
-    tabDropdownRefs.value.set(tabId, el)
-  } else {
-    tabDropdownRefs.value.delete(tabId)
+  if (pathname === routePrefix) return '/'
+  if (routePrefix !== '/' && pathname.startsWith(`${routePrefix}/`)) {
+    return normalizeNavPath(pathname.slice(routePrefix.length))
   }
+  return pathname
 }
 
-function handleClickOutside(event: MouseEvent) {
-  const target = event.target as Node
-
-  if (showPagesDropdown.value && dropdownRef.value && !dropdownRef.value.contains(target)) {
-    showPagesDropdown.value = false
-  }
-
-  if (openTabDropdown.value !== null) {
-    const clickedInside = Array.from(tabDropdownRefs.value.values()).some((el) => el.contains(target))
-    if (!clickedInside) {
-      openTabDropdown.value = null
-    }
-  }
+function currentItemIdFromLocation(pages: Array<Pick<PageSelectorItem, 'id' | 'to' | 'href'>>): string | undefined {
+  const path = currentPagePath()
+  if (!path) return undefined
+  return pages.find((page) => normalizeNavPath(page.to || page.href) === path)?.id
 }
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
 </script>
 
 <template>
@@ -292,10 +295,10 @@ onUnmounted(() => {
         @select="emit('plugin-switcher-select', $event)"
         @install-click="emit('plugin-switcher-install')"
       />
-      <AppPageSelector
-        v-else-if="hasPageSelector && pageSelector"
-        :pages="pageSelector"
-        :current-page-id="currentPageSelectorId"
+      <AppPageSelectorInternal
+        v-else-if="hasPageSelector"
+        :pages="normalizedPageSelector"
+        :current-page-id="effectiveCurrentPageSelectorId"
         @select="emit('page-selector-select', $event)"
       >
         <template v-if="$slots['page-selector-icon']" #icon="slotProps">
@@ -304,88 +307,14 @@ onUnmounted(() => {
         <template v-if="$slots['page-selector-item-icon']" #item-icon="slotProps">
           <slot name="page-selector-item-icon" v-bind="slotProps" />
         </template>
-      </AppPageSelector>
+      </AppPageSelectorInternal>
 
-      <!-- Left: classic title / breadcrumb (classic prop surface) -->
+      <!-- Left: title -->
       <div v-if="hasTitleGroup" class="mint-topbar-title-group">
         <span class="mint-topbar-title">{{ title }}</span>
         <span class="mint-topbar-subtitle">{{ subtitle }}</span>
       </div>
 
-      <div v-else-if="hasLegacyBreadcrumb" ref="dropdownRef" class="mint-topbar-breadcrumb">
-        <button
-          v-if="pages?.length"
-          type="button"
-          class="mint-topbar-plugin-name"
-          @click.stop="togglePagesDropdown"
-        >
-          {{ pluginName }}
-          <svg
-            class="mint-topbar-chevron"
-            :class="{ 'mint-topbar-chevron--open': showPagesDropdown }"
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="m6 9 6 6 6-6" />
-          </svg>
-        </button>
-        <span v-else class="mint-topbar-plugin-name--static">{{ pluginName }}</span>
-
-        <svg
-          v-if="title"
-          class="mint-topbar-separator"
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="m9 18 6-6-6-6" />
-        </svg>
-        <span v-if="title" class="mint-topbar-current-page">{{ title }}</span>
-
-        <div v-show="showPagesDropdown" class="mint-topbar-dropdown">
-          <template v-for="page in pages" :key="page.id">
-            <a
-              v-if="page.href"
-              :href="page.href"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="showPagesDropdown = false"
-            >
-              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-            </a>
-            <router-link
-              v-else-if="page.to"
-              :to="page.to"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="showPagesDropdown = false"
-            >
-              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-            </router-link>
-            <button
-              v-else
-              type="button"
-              :class="['mint-topbar-dropdown-item', { 'mint-topbar-dropdown-item--active': page.id === currentPageId, 'mint-topbar-dropdown-item--disabled': page.disabled }]"
-              @click="handlePageClick(page)"
-            >
-              <span class="mint-topbar-dropdown-item__label">{{ page.label }}</span>
-              <span v-if="page.description" class="mint-topbar-dropdown-item__description">{{ page.description }}</span>
-            </button>
-          </template>
-        </div>
-      </div>
-
       <span v-else-if="hasTitleOnly" class="mint-topbar__title-only">{{ title }}</span>
 
       <!-- Nav slot (inline, after brand/selector) -->
@@ -394,135 +323,16 @@ onUnmounted(() => {
       <!-- Center: pill nav (new) -->
       <div v-if="hasPillNav || $slots.center" class="mint-topbar__center">
         <slot name="center">
-          <AppPillNav
+          <AppPillNavInternal
             v-if="hasPillNav && pillNav"
-            :items="pillNav"
+            :items="normalizedPillNav"
             :current-item-id="currentPillId"
             @select="emit('pill-select', $event)"
+            @option-select="(option, item) => emit('pill-option-select', option, item)"
           />
         </slot>
       </div>
 
-      <!-- Center: classic tabs (when no pillNav) — wrapped in the same centered
-           container as AppPillNav so classic :tabs consumers get centered pill
-           layout without migrating to :pill-nav. -->
-      <div v-if="!hasPillNav && tabs?.length" class="mint-topbar__center">
-        <div class="mint-topbar__tabs">
-          <template v-for="tab in tabs" :key="tab.id">
-          <div
-            :ref="(el) => tab.children?.length ? setTabDropdownRef(el as HTMLElement, tab.id) : null"
-            class="mint-topbar-tab-wrapper"
-          >
-            <button
-              v-if="tab.children?.length"
-              type="button"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId || tab.children.some(c => c.id === currentTabId) },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-              @click.stop="handleTabClick(tab)"
-            >
-              {{ tab.label }}
-              <svg
-                class="mint-topbar-tab-chevron"
-                :class="{ 'mint-topbar-tab-chevron--open': openTabDropdown === tab.id }"
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            </button>
-
-            <a
-              v-else-if="tab.href"
-              :href="tab.href"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-            >
-              {{ tab.label }}
-            </a>
-            <router-link
-              v-else-if="tab.to"
-              :to="tab.to"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-            >
-              {{ tab.label }}
-            </router-link>
-            <button
-              v-else
-              type="button"
-              :class="[
-                'mint-topbar-tab',
-                { 'mint-topbar-tab--active': tab.id === currentTabId },
-                { 'mint-topbar-tab--disabled': tab.disabled }
-              ]"
-              @click="handleTabClick(tab)"
-            >
-              {{ tab.label }}
-            </button>
-
-            <div v-if="tab.children?.length" v-show="openTabDropdown === tab.id" class="mint-topbar-tab-dropdown">
-              <template v-for="option in tab.children" :key="option.id">
-                <a
-                  v-if="option.href"
-                  :href="option.href"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="openTabDropdown = null"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </a>
-                <router-link
-                  v-else-if="option.to"
-                  :to="option.to"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="openTabDropdown = null"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </router-link>
-                <button
-                  v-else
-                  type="button"
-                  :class="[
-                    'mint-topbar-dropdown-item',
-                    { 'mint-topbar-dropdown-item--active': option.id === currentTabId },
-                    { 'mint-topbar-dropdown-item--disabled': option.disabled }
-                  ]"
-                  @click="handleTabOptionClick(option, tab)"
-                >
-                  <span class="mint-topbar-dropdown-item__label">{{ option.label }}</span>
-                  <span v-if="option.description" class="mint-topbar-dropdown-item__description">{{ option.description }}</span>
-                </button>
-              </template>
-            </div>
-          </div>
-        </template>
-        </div>
-      </div>
-
       <!-- Right section -->
       <div class="mint-topbar__right">
         <span v-if="showStandaloneLabel && isStandalone && !appExperiment" class="mint-topbar__standalone-badge">
@@ -531,15 +341,7 @@ onUnmounted(() => {
 
         <ExperimentPopover
           v-if="appExperiment && !isStandalone"
-          :experiment-name="appExperiment.experimentName.value"
-          :experiment-code="appExperiment.experimentCode.value"
-          :experiment-status="appExperiment.experimentStatus.value"
-          :show-save="appExperiment.showSave.value"
-          :show-detach="appExperiment.showDetach.value"
-          :save-disabled="appExperiment.saveDisabled.value"
-          :save-disabled-message="appExperiment.saveDisabledMessage.value"
-          :save-loading="appExperiment.saveLoading.value"
-          :save-success-message="appExperiment.saveSuccessMessage.value"
+          v-bind="appExperiment.popover.value"
           @select="appExperiment.openModal()"
           @save="appExperiment.handleSave()"
           @detach="appExperiment.handleDetach()"
@@ -634,16 +436,19 @@ onUnmounted(() => {
     v-if="showSettings"
     v-model="settingsOpen"
     :title="settingsConfig?.title"
-    :tabs="settingsConfig?.tabs"
+    :tabs="normalizedSettingsTabs"
     :show-appearance="settingsConfig?.showAppearance ?? true"
     :size="settingsConfig?.size"
     :layout="settingsConfig?.layout"
     :schema="settingsConfig?.schema"
+    :model="settingsConfig?.model"
+    :controls="settingsConfig?.controls"
+    :control-options="settingsConfig?.controlOptions"
     :values="settingsConfig?.values"
     :enhancements="settingsConfig?.enhancements"
     @update:values="emit('settings-values-change', $event)"
   >
-    <template v-for="tab in (settingsConfig?.tabs ?? [])" :key="tab.id" #[`tab-${tab.id}`]>
+    <template v-for="tab in normalizedSettingsTabs" :key="tab.id" #[`tab-${tab.id}`]>
       <slot :name="`settings-tab-${tab.id}`" />
     </template>
     <template #appearance>
@@ -653,8 +458,7 @@ onUnmounted(() => {
 
   <ExperimentSelectorModal
     v-if="appExperiment && !isStandalone"
-    :model-value="appExperiment.showModal.value"
-    :current-experiment-id="appExperiment.experimentId.value"
+    v-bind="appExperiment.selectorModal.value"
     @update:model-value="$event ? appExperiment.openModal() : appExperiment.closeModal()"
     @select="appExperiment.handleSelect($event)"
     @deselect="appExperiment.handleDetach()"

package/src/components/BaseModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 /** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant. */
-import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
+import { ref, watch, nextTick, onUnmounted } from 'vue'
 import type { ModalSize, ModalVariant } from '../types'
+import { useEventListener } from '../composables/useEventListener'
 
 interface Props {
   modelValue: boolean
@@ -101,12 +102,9 @@ watch(() => props.modelValue, async (isOpen) => {
   }
 })
 
-onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
+useEventListener(() => document, 'keydown', handleKeydown)
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
   document.body.style.overflow = ''
 })
 </script>

package/src/components/BaseRadioGroup.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 /** Renders a group of radio buttons in list or tile layout, horizontal or vertical. */
-import type { RadioOption } from '../types'
+import { computed } from 'vue'
+import type { RadioOption, RadioOptionInput } from '../types'
+import { normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: RadioOption[]
+  options: RadioOptionInput[]
   name: string
   disabled?: boolean
   direction?: 'horizontal' | 'vertical'
@@ -23,6 +25,8 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
+const normalizedOptions = computed<RadioOption[]>(() => props.options.map(normalizeOptionInput))
+
 function handleChange(value: string | number) {
   emit('update:modelValue', value)
 }
@@ -34,7 +38,7 @@ function handleChange(value: string | number) {
     role="radiogroup"
   >
     <label
-      v-for="option in props.options"
+      v-for="option in normalizedOptions"
       :key="String(option.value)"
       :class="[
         'mint-radio-option',

package/src/components/BaseSelect.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 /** Renders a native `<select>` element with size, error, and disabled states. */
-import type { SelectOption } from '../types'
+import { computed } from 'vue'
+import type { SelectOption, SelectOptionInput } from '../types'
+import { findOptionByDomValue, normalizeOptionInput } from '../utils/options'
 
 interface Props {
   modelValue?: string | number
-  options: SelectOption<string | number>[]
+  options: SelectOptionInput<string | number>[]
   placeholder?: string
   disabled?: boolean
   error?: boolean
@@ -22,12 +24,14 @@ const emit = defineEmits<{
   'update:modelValue': [value: string | number]
 }>()
 
+const normalizedOptions = computed<SelectOption<string | number>[]>(() =>
+  props.options.map(normalizeOptionInput)
+)
+
 function handleChange(event: Event) {
   const target = event.target as HTMLSelectElement
-  const value = typeof props.modelValue === 'number'
-    ? Number(target.value)
-    : target.value
-  emit('update:modelValue', value)
+  const option = findOptionByDomValue(normalizedOptions.value, target.value)
+  emit('update:modelValue', option?.value ?? target.value)
 }
 </script>
 
@@ -50,7 +54,7 @@ function handleChange(event: Event) {
         {{ placeholder }}
       </option>
       <option
-        v-for="option in options"
+        v-for="option in normalizedOptions"
         :key="String(option.value)"
         :value="option.value"
         :disabled="option.disabled"