@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.4

package/src/components/BaseModal.story.vue

@@ -0,0 +1,335 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import BaseModal from './BaseModal.vue'
+import BaseButton from './BaseButton.vue'
+import type { ModalSize, ModalTab } from '../types'
+
+const modalSizes: ModalSize[] = ['sm', 'md', 'lg', 'xl', 'full']
+const galleryOpen = ref<Record<string, boolean>>({
+  sm: false,
+  md: false,
+  lg: false,
+  xl: false,
+  full: false,
+  noClose: false,
+  footer: false,
+})
+
+const refreshOpen = ref(false)
+const subtitleOpen = ref(false)
+const drawerOpen = ref(false)
+const sheetOpen = ref(false)
+
+// ---- layout="tabs": shell-level tab strip (2–4 sections) ----
+const tabsOpen = ref(false)
+const tabsActive = ref('processing')
+const stripTabs: ModalTab[] = [
+  { id: 'processing', label: 'Processing', meta: '6' },
+  { id: 'peaks', label: 'Peak detection', meta: '9' },
+  { id: 'correction', label: 'Correction', meta: '4' },
+  { id: 'appearance', label: 'Appearance' },
+]
+
+// ---- layout="rail": shell-level rail (5+ sections) ----
+const railOpen = ref(false)
+const railActive = ref('security')
+const railTabs: ModalTab[] = [
+  { id: 'profile', label: 'Profile', description: 'Name, display name, and email', icon: 'M20 21a8 8 0 0 0-16 0M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8' },
+  { id: 'password', label: 'Password', description: 'Change your sign-in password', icon: 'M6 11h12v10H6zM9 11V7a3 3 0 0 1 6 0v4' },
+  { id: 'security', label: 'Security', meta: '2', description: 'Passkeys and institutional sign-in', icon: 'm12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Z' },
+  { id: 'notifications', label: 'Notifications', description: 'Email and in-app alerts', icon: 'M18 8a6 6 0 1 0-12 0c0 7-3 8-3 8h18s-3-1-3-8M13.7 21a2 2 0 0 1-3.4 0' },
+  { id: 'tokens', label: 'API tokens', meta: '3', description: 'Programmatic access keys', icon: 'M15 7h3a4 4 0 0 1 0 8h-3M9 15H6a4 4 0 0 1 0-8h3M8 11h8' },
+  { id: 'appearance', label: 'Appearance', description: 'Theme and density', icon: 'M12 3a9 9 0 1 0 0 18 3 3 0 0 0 0-6 3 3 0 0 1 0-6 3 3 0 0 0 0-6M7 10h.01M12 7h.01M17 10h.01' },
+]
+</script>
+
+<template>
+  <Story title="Base Inputs/BaseModal">
+    <Variant title="Refresh · Confirm uninstall">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <BaseButton variant="secondary" @click="refreshOpen = true">
+          Open confirm dialog
+        </BaseButton>
+        <BaseModal
+          v-model="refreshOpen"
+          title="Confirm uninstall"
+          subtitle="mint-plugin-metabolomics · v2.4.1"
+          size="md"
+        >
+          Removing this plugin will delete its routes from the platform on next restart.
+          Plugin data and registered experiment types will be preserved.
+          <template #footer>
+            <BaseButton variant="secondary" @click="refreshOpen = false">Cancel</BaseButton>
+            <BaseButton variant="danger" @click="refreshOpen = false">Uninstall</BaseButton>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Refresh · Title + subtitle">
+      <div style="padding: 2rem; display: flex; justify-content: center;">
+        <BaseButton variant="secondary" @click="subtitleOpen = true">
+          Open with subtitle
+        </BaseButton>
+        <BaseModal
+          v-model="subtitleOpen"
+          title="Experiment context"
+          subtitle="EXP-B24-104 · Plasma metabolite quant — cohort 7"
+          size="md"
+        >
+          Use this dialog pattern when the title needs a secondary descriptor
+          (IDs, versions, paths). The subtitle renders under the title in
+          muted text.
+          <template #footer>
+            <BaseButton variant="secondary" @click="subtitleOpen = false">Close</BaseButton>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Playground">
+      <template #default="{ state }">
+        <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+          <BaseButton @click="state.open = true">
+            Open Modal
+          </BaseButton>
+          <BaseModal
+            v-model="state.open"
+            :title="state.title"
+            :size="state.size"
+            :closable="state.closable"
+            :close-on-overlay="state.closeOnOverlay"
+            :close-on-escape="state.closeOnEscape"
+          >
+            <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+              This is the modal body content. You can put any content here.
+            </p>
+            <template #footer>
+              <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+                <BaseButton variant="secondary" @click="state.open = false">Cancel</BaseButton>
+                <BaseButton variant="primary" @click="state.open = false">Confirm</BaseButton>
+              </div>
+            </template>
+          </BaseModal>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstText v-model="state.title" title="Title" />
+        <HstSelect
+          v-model="state.size"
+          title="Size"
+          :options="modalSizes.map(s => ({ label: s, value: s }))"
+        />
+        <HstCheckbox v-model="state.closable" title="Closable" />
+        <HstCheckbox v-model="state.closeOnOverlay" title="Close on Overlay" />
+        <HstCheckbox v-model="state.closeOnEscape" title="Close on Escape" />
+      </template>
+    </Variant>
+
+    <Variant title="All Sizes">
+      <div style="padding: 2rem; display: flex; flex-wrap: wrap; gap: 0.5rem;">
+        <BaseButton
+          v-for="size in modalSizes"
+          :key="size"
+          variant="secondary"
+          @click="galleryOpen[size] = true"
+        >
+          {{ size }}
+        </BaseButton>
+
+        <BaseModal
+          v-for="size in modalSizes"
+          :key="size"
+          v-model="galleryOpen[size]"
+          :title="`${size.toUpperCase()} Modal`"
+          :size="size"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            This is a <strong>{{ size }}</strong> sized modal.
+          </p>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="With Footer">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.footer = true">Open with Footer</BaseButton>
+        <BaseModal v-model="galleryOpen.footer" title="Confirm Action" size="sm">
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Are you sure you want to proceed with this action?
+          </p>
+          <template #footer>
+            <div style="display: flex; gap: 0.5rem; justify-content: flex-end;">
+              <BaseButton variant="secondary" @click="galleryOpen.footer = false">Cancel</BaseButton>
+              <BaseButton variant="danger" @click="galleryOpen.footer = false">Delete</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+
+    <Variant title="Not Closable">
+      <div style="padding: 2rem; display: flex; align-items: center; justify-content: center;">
+        <BaseButton @click="galleryOpen.noClose = true">Open Non-Closable</BaseButton>
+        <BaseModal
+          v-model="galleryOpen.noClose"
+          title="Processing..."
+          size="sm"
+          :closable="false"
+          :close-on-overlay="false"
+          :close-on-escape="false"
+        >
+          <p style="margin: 0; color: var(--text-primary, #e2e8f0);">
+            Please wait while we process your request. This modal cannot be dismissed.
+          </p>
+          <template #footer>
+            <div style="display: flex; justify-content: flex-end;">
+              <BaseButton variant="primary" @click="galleryOpen.noClose = false">Force Close (demo)</BaseButton>
+            </div>
+          </template>
+        </BaseModal>
+      </div>
+    </Variant>
+    <Variant title="Drawer variant — right-edge detail panel">
+      <div style="padding: 2rem;">
+        <BaseButton variant="primary" @click="drawerOpen = true">
+          Open drawer
+        </BaseButton>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Slides in from the right edge. Fills viewport height. For detail panels that shouldn't take over the page.
+        </p>
+      </div>
+
+      <BaseModal v-model="drawerOpen" variant="drawer" size="md" title="Sample PLT-001 · Well A3" subtitle="Peak metadata">
+        <div style="display: flex; flex-direction: column; gap: 1rem;">
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">m/z</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">180.0634</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Retention time</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">3.42 min</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Annotation</p>
+            <p style="margin: 0; font-size: 0.875rem;">D-Glucose (HMDB0000122) · confidence 0.92</p>
+          </div>
+          <div>
+            <p style="margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary);">Intensity</p>
+            <p style="margin: 0; font-family: var(--font-mono); font-size: 0.875rem;">1.28 × 10⁶</p>
+          </div>
+        </div>
+        <template #footer>
+          <BaseButton variant="primary" @click="drawerOpen = false">Close</BaseButton>
+        </template>
+      </BaseModal>
+    </Variant>
+
+    <Variant title="Sheet variant — mobile-friendly bottom sheet">
+      <div style="padding: 2rem;">
+        <BaseButton variant="primary" @click="sheetOpen = true">
+          Open sheet
+        </BaseButton>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          Slides up from the bottom. Top corners rounded. Grab-hint bar at top. Auto-used on &lt;768px viewports regardless of caller's variant.
+        </p>
+      </div>
+
+      <BaseModal v-model="sheetOpen" variant="sheet" size="md" title="Apply to 12 selected wells?">
+        <p style="margin: 0; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.55;">
+          This will set the treatment condition for wells B2–B7, C2–C7 to
+          <strong>Compound X · 10 µM · 24h</strong>. The change applies immediately and can be undone within 10 seconds.
+        </p>
+        <template #footer>
+          <BaseButton variant="secondary" @click="sheetOpen = false">Cancel</BaseButton>
+          <BaseButton variant="primary" @click="sheetOpen = false">Apply</BaseButton>
+        </template>
+      </BaseModal>
+    </Variant>
+
+    <Variant title="Tabs layout — shell-level strip">
+      <div style="padding: 2rem;">
+        <BaseButton variant="primary" @click="tabsOpen = true">
+          Open tabbed modal
+        </BaseButton>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          The strip is a shell region between header and body: flush with the modal edges,
+          it never scrolls with the content, and the body keeps one fixed height across tabs.
+          Arrow keys move between tabs. For 2–4 sections; use the rail beyond that.
+        </p>
+      </div>
+
+      <BaseModal
+        v-model="tabsOpen"
+        v-model:active-tab="tabsActive"
+        layout="tabs"
+        :tabs="stripTabs"
+        size="lg"
+        title="Isotope Tracer Analysis — settings"
+        subtitle="Plugin 2.4 · applies to this workspace"
+      >
+        <div style="display: flex; flex-direction: column; gap: 0.875rem;">
+          <p style="margin: 0; font-size: 0.8125rem; color: var(--text-secondary);">
+            Active tab: <strong style="color: var(--text-primary);">{{ tabsActive }}</strong> —
+            pane content swaps here while the card height stays put.
+          </p>
+          <div v-for="n in 4" :key="n" style="display: flex; align-items: center; gap: 0.875rem; padding: 0.6875rem 0; border-bottom: 1px solid var(--border-light);">
+            <span style="width: 9.5rem; flex-shrink: 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);">Setting {{ n }}</span>
+            <span style="flex: 1; padding: 0.375rem 0.625rem; border: 1px solid var(--border-color); border-radius: 0.4375rem; background: var(--bg-secondary); font-family: var(--font-mono); font-size: 0.8125rem;">value {{ n }}</span>
+          </div>
+        </div>
+        <template #footer>
+          <BaseButton variant="secondary" @click="tabsOpen = false">Cancel</BaseButton>
+          <BaseButton variant="primary" @click="tabsOpen = false">Save settings</BaseButton>
+        </template>
+      </BaseModal>
+    </Variant>
+
+    <Variant title="Rail layout — shell-level sidebar">
+      <div style="padding: 2rem;">
+        <BaseButton variant="primary" @click="railOpen = true">
+          Open rail modal
+        </BaseButton>
+        <p style="margin: 1rem 0 0; font-size: 0.8125rem; color: var(--text-muted);">
+          For 5+ sections, or sections needing descriptions/counts. The rail is a real shell
+          column (no negative-margin bleed), scrolls independently of the pane, and the pane
+          names the active section in its own header. Collapses to the strip under 640px.
+        </p>
+      </div>
+
+      <BaseModal
+        v-model="railOpen"
+        v-model:active-tab="railActive"
+        layout="rail"
+        :tabs="railTabs"
+        size="lg"
+        title="Your account"
+        subtitle="R. Keller · rkeller · Admin"
+        close-on-overlay
+      >
+        <template #rail-footer>
+          <button
+            type="button"
+            style="display: flex; align-items: center; gap: 0.5rem; margin-top: auto; padding: 0.4375rem 0.625rem; border: none; border-radius: 0.4375rem; background: transparent; color: var(--mint-error); font-family: inherit; font-size: 0.78125rem; font-weight: 500; text-align: left; cursor: pointer;"
+            @click="railOpen = false"
+          >
+            Log out
+          </button>
+        </template>
+
+        <div style="display: flex; flex-direction: column;">
+          <div v-for="n in 3" :key="n" style="display: flex; align-items: center; gap: 0.6875rem; padding: 0.5625rem 0; border-bottom: 1px solid var(--border-light);">
+            <span style="flex: 1; font-size: 0.8125rem; color: var(--text-primary);">{{ railActive }} row {{ n }}</span>
+            <span style="font-size: 0.71875rem; color: var(--text-muted);">detail</span>
+          </div>
+        </div>
+        <template #footer>
+          <span style="font-size: 0.75rem; color: var(--text-muted);">Changes apply immediately</span>
+          <div style="flex: 1;" />
+          <BaseButton variant="secondary" @click="railOpen = false">Close</BaseButton>
+        </template>
+      </BaseModal>
+    </Variant>
+  </Story>
+</template>

package/src/components/BaseModal.vue

@@ -0,0 +1,328 @@
+<script setup lang="ts">
+/** Modal dialog with backdrop, focus trap, Escape-to-close, and configurable size/variant/layout. */
+import { computed, ref, watch, nextTick, onUnmounted, type ComponentPublicInstance } from 'vue'
+import type { ModalLayout, ModalSize, ModalTab, ModalVariant } from '../types'
+import { useEventListener } from '../composables/useEventListener'
+
+interface Props {
+  modelValue: boolean
+  title?: string
+  subtitle?: string
+  size?: ModalSize
+  variant?: ModalVariant
+  closable?: boolean
+  closeOnOverlay?: boolean
+  closeOnEscape?: boolean
+  /**
+   * Shell layout. 'tabs' renders a tab strip between header and body;
+   * 'rail' renders a sidebar rail + pane as the shell's middle row.
+   * Both are shell regions — never part of the scrolling body content.
+   */
+  layout?: ModalLayout
+  /** Sections for the tab strip / rail. The strip renders only with 2+ tabs. */
+  tabs?: ModalTab[]
+  /** Id of the selected tab. Two-way bindable via update:activeTab. */
+  activeTab?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'centered',
+  closable: true,
+  closeOnOverlay: false,
+  closeOnEscape: true,
+  layout: 'plain',
+  tabs: () => [],
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  'update:activeTab': [id: string]
+  close: []
+}>()
+
+const activeTabMeta = computed(() => props.tabs.find((tab) => tab.id === props.activeTab))
+
+const tabButtonRefs = new Map<string, HTMLElement>()
+
+function setTabButtonRef(id: string, el: Element | ComponentPublicInstance | null) {
+  if (el instanceof HTMLElement) {
+    tabButtonRefs.set(id, el)
+  } else {
+    tabButtonRefs.delete(id)
+  }
+}
+
+function selectTab(tab: ModalTab) {
+  if (tab.disabled || tab.id === props.activeTab) return
+  emit('update:activeTab', tab.id)
+}
+
+/** ARIA tablist keyboard contract: arrows move selection to the next non-disabled tab, wrapping. */
+function focusTab(delta: number) {
+  const enabled = props.tabs.filter((tab) => !tab.disabled)
+  if (enabled.length === 0) return
+  const currentIndex = enabled.findIndex((tab) => tab.id === props.activeTab)
+  const next = enabled[(currentIndex + delta + enabled.length) % enabled.length]
+  if (!next || next.id === props.activeTab) return
+  emit('update:activeTab', next.id)
+  tabButtonRefs.get(next.id)?.focus()
+}
+
+function isPathIcon(icon: ModalTab['icon']): icon is string | string[] {
+  if (!icon) return false
+  return Array.isArray(icon) || icon.trim().startsWith('M') || icon.trim().startsWith('m')
+}
+
+const containerRef = ref<HTMLElement | null>(null)
+let previouslyFocused: HTMLElement | null = null
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(', ')
+
+function getFocusableElements(): HTMLElement[] {
+  if (!containerRef.value) return []
+  return Array.from(containerRef.value.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))
+    // Roving tabindex (inactive tabs/rail items) stays out of the Tab cycle.
+    .filter((el) => el.tabIndex !== -1)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && props.closeOnEscape && props.modelValue) {
+    close()
+    return
+  }
+
+  if (event.key !== 'Tab' || !containerRef.value) return
+
+  const focusable = getFocusableElements()
+  if (focusable.length === 0) {
+    event.preventDefault()
+    return
+  }
+
+  const first = focusable[0]
+  const last = focusable[focusable.length - 1]
+
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault()
+    last.focus()
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault()
+    first.focus()
+  }
+}
+
+function close() {
+  if (props.closable) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+
+function handleOverlayClick(event: MouseEvent) {
+  if (props.closeOnOverlay && event.target === event.currentTarget) {
+    close()
+  }
+}
+
+watch(() => props.modelValue, async (isOpen) => {
+  if (isOpen) {
+    previouslyFocused = document.activeElement as HTMLElement | null
+    document.body.style.overflow = 'hidden'
+    await nextTick()
+    const focusable = getFocusableElements()
+    if (focusable.length > 0) {
+      focusable[0].focus()
+    } else {
+      containerRef.value?.focus()
+    }
+  } else {
+    document.body.style.overflow = ''
+    previouslyFocused?.focus()
+    previouslyFocused = null
+  }
+})
+
+useEventListener(() => document, 'keydown', handleKeydown)
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition :name="`modal-${variant}`">
+      <div
+        v-if="modelValue"
+        :class="['mint-modal', `mint-modal--${variant}`]"
+        @click="handleOverlayClick"
+      >
+        <!-- Overlay -->
+        <div class="mint-modal__overlay" />
+
+        <!-- Modal -->
+        <div
+          ref="containerRef"
+          :class="[
+            'mint-modal__container',
+            `mint-modal__container--${size}`,
+            `mint-modal__container--${variant}`,
+            `mint-modal__container--${layout}`,
+          ]"
+          role="dialog"
+          aria-modal="true"
+          tabindex="-1"
+        >
+          <!-- Sheet grab-hint bar (sheet variant only) -->
+          <div v-if="variant === 'sheet'" class="mint-modal__grab-hint" aria-hidden="true" />
+
+          <!-- Header -->
+          <div v-if="title || subtitle || closable || $slots.header" class="mint-modal__header">
+            <div v-if="title || subtitle || $slots.header" class="mint-modal__header-text">
+              <slot name="header">
+                <h3 v-if="title" class="mint-modal__title">
+                  {{ title }}
+                </h3>
+                <p v-if="subtitle" class="mint-modal__subtitle">
+                  {{ subtitle }}
+                </p>
+              </slot>
+            </div>
+            <button
+              v-if="closable"
+              type="button"
+              class="mint-modal__close"
+              aria-label="Close modal"
+              @click="close"
+            >
+              <svg class="mint-modal__close-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+                <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Tab strip — a shell region between header and body, flush with the modal edges -->
+          <div
+            v-if="layout === 'tabs' && tabs.length > 1"
+            class="mint-modal__tabs"
+            role="tablist"
+          >
+            <button
+              v-for="tab in tabs"
+              :key="tab.id"
+              :ref="(el) => setTabButtonRef(tab.id, el)"
+              type="button"
+              role="tab"
+              :aria-selected="activeTab === tab.id"
+              :aria-disabled="tab.disabled || undefined"
+              :tabindex="activeTab === tab.id ? 0 : -1"
+              :class="['mint-modal__tab', {
+                'mint-modal__tab--active': activeTab === tab.id,
+                'mint-modal__tab--disabled': tab.disabled,
+              }]"
+              @click="selectTab(tab)"
+              @keydown.left.prevent="focusTab(-1)"
+              @keydown.right.prevent="focusTab(1)"
+            >
+              {{ tab.label }}
+              <span v-if="tab.meta" class="mint-modal__tab-meta">{{ tab.meta }}</span>
+            </button>
+          </div>
+
+          <!-- Rail layout: rail column + pane are the shell's middle row -->
+          <div v-if="layout === 'rail'" class="mint-modal__split">
+            <div class="mint-modal__rail" role="tablist" aria-orientation="vertical">
+              <div class="mint-modal__rail-items">
+                <button
+                  v-for="tab in tabs"
+                  :key="tab.id"
+                  :ref="(el) => setTabButtonRef(tab.id, el)"
+                  type="button"
+                  role="tab"
+                  :aria-selected="activeTab === tab.id"
+                  :aria-disabled="tab.disabled || undefined"
+                  :tabindex="activeTab === tab.id ? 0 : -1"
+                  :class="['mint-modal__rail-item', {
+                    'mint-modal__rail-item--active': activeTab === tab.id,
+                    'mint-modal__rail-item--disabled': tab.disabled,
+                  }]"
+                  @click="selectTab(tab)"
+                  @keydown.up.prevent="focusTab(-1)"
+                  @keydown.down.prevent="focusTab(1)"
+                >
+                  <span v-if="tab.icon" class="mint-modal__rail-item-icon" aria-hidden="true">
+                    <svg
+                      v-if="isPathIcon(tab.icon)"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="1.8"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <template v-if="Array.isArray(tab.icon)">
+                        <path v-for="(d, index) in tab.icon" :key="index" :d="d" />
+                      </template>
+                      <path v-else :d="tab.icon" />
+                    </svg>
+                    <!-- Trusted, author-controlled markup only — same contract as SettingsTab.icon. -->
+                    <span v-else v-html="tab.icon" />
+                  </span>
+                  <span class="mint-modal__rail-item-text">
+                    <span class="mint-modal__rail-item-label">{{ tab.label }}</span>
+                    <span v-if="tab.description" class="mint-modal__rail-item-description">{{ tab.description }}</span>
+                  </span>
+                  <span v-if="tab.meta" class="mint-modal__rail-item-meta">{{ tab.meta }}</span>
+                </button>
+              </div>
+              <!-- Quiet rail-bottom action (e.g. Log out) -->
+              <slot name="rail-footer" />
+            </div>
+
+            <section
+              class="mint-modal__pane"
+              role="tabpanel"
+              :aria-label="activeTabMeta?.label"
+              tabindex="0"
+            >
+              <header v-if="activeTabMeta?.label" class="mint-modal__pane-header">
+                <h4 class="mint-modal__pane-title">{{ activeTabMeta.label }}</h4>
+                <p v-if="activeTabMeta.description" class="mint-modal__pane-subtitle">
+                  {{ activeTabMeta.description }}
+                </p>
+              </header>
+              <div class="mint-modal__pane-body">
+                <slot />
+              </div>
+            </section>
+          </div>
+
+          <!-- Body -->
+          <div
+            v-else
+            :class="['mint-modal__body', layout === 'tabs' ? 'mint-modal__body--tabbed' : null]"
+          >
+            <slot />
+          </div>
+
+          <!-- Footer -->
+          <div v-if="$slots.footer" class="mint-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style>
+@import '../styles/components/modal.css';
+</style>