@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/components/AppPluginSwitcher.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+/** Dropdown menu for switching between installed plugins with color swatches, version badges, and an install link. */
+import { ref, onMounted, onUnmounted } from 'vue'
+import type { PluginSwitcherPlugin } from '../types/components'
+
+interface Props {
+  current: PluginSwitcherPlugin
+  plugins?: PluginSwitcherPlugin[]
+  installLabel?: string
+  installTo?: string
+  installHref?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  plugins: () => [] as PluginSwitcherPlugin[],
+  installLabel: 'Install plugin…',
+})
+
+const emit = defineEmits<{
+  select: [plugin: PluginSwitcherPlugin]
+  'install-click': []
+}>()
+
+const isOpen = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+
+function initialsOf(plugin: PluginSwitcherPlugin) {
+  const label = plugin.label || plugin.id
+  return label.slice(0, 2).toUpperCase()
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+
+function handleSelect(plugin: PluginSwitcherPlugin) {
+  if (plugin.id === props.current.id) {
+    isOpen.value = false
+    return
+  }
+  emit('select', plugin)
+  isOpen.value = false
+}
+
+function handleInstall() {
+  emit('install-click')
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  if (!isOpen.value) return
+  const target = event.target as Node
+  if (rootRef.value && !rootRef.value.contains(target)) {
+    isOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isOpen.value) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
+})
+</script>
+
+<template>
+  <div ref="rootRef" class="mld-plugin-switcher">
+    <button
+      type="button"
+      class="mld-plugin-switcher__trigger"
+      :class="{ 'mld-plugin-switcher__trigger--open': isOpen }"
+      :aria-expanded="isOpen"
+      aria-haspopup="menu"
+      @click.stop="toggle"
+    >
+      <span class="mld-plugin-switcher__label">{{ current.label }}</span>
+      <span v-if="current.version" class="mld-plugin-switcher__version">v{{ current.version }}</span>
+      <span class="mld-plugin-switcher__chevron-wrap" aria-hidden="true">
+        <svg
+          class="mld-plugin-switcher__chevron"
+          :class="{ 'mld-plugin-switcher__chevron--open': isOpen }"
+          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>
+      </span>
+    </button>
+
+    <div v-if="isOpen" class="mld-plugin-switcher__menu" role="menu">
+      <div class="mld-plugin-switcher__menu-title">Switch plugin</div>
+      <template v-for="plugin in plugins" :key="plugin.id">
+        <a
+          v-if="plugin.href"
+          :href="plugin.href"
+          :class="[
+            'mld-plugin-switcher__item',
+            { 'mld-plugin-switcher__item--active': plugin.id === current.id },
+          ]"
+          role="menuitem"
+          @click="handleSelect(plugin)"
+        >
+          <span
+            class="mld-plugin-switcher__item-swatch"
+            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
+          >
+            {{ initialsOf(plugin) }}
+          </span>
+          <span class="mld-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mld-plugin-switcher__item-version">v{{ plugin.version }}</span>
+          <svg
+            v-if="plugin.id === current.id"
+            class="mld-plugin-switcher__item-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        </a>
+        <router-link
+          v-else-if="plugin.to"
+          :to="plugin.to"
+          :class="[
+            'mld-plugin-switcher__item',
+            { 'mld-plugin-switcher__item--active': plugin.id === current.id },
+          ]"
+          role="menuitem"
+          @click="handleSelect(plugin)"
+        >
+          <span
+            class="mld-plugin-switcher__item-swatch"
+            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
+          >
+            {{ initialsOf(plugin) }}
+          </span>
+          <span class="mld-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mld-plugin-switcher__item-version">v{{ plugin.version }}</span>
+          <svg
+            v-if="plugin.id === current.id"
+            class="mld-plugin-switcher__item-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        </router-link>
+        <button
+          v-else
+          type="button"
+          :class="[
+            'mld-plugin-switcher__item',
+            { 'mld-plugin-switcher__item--active': plugin.id === current.id },
+          ]"
+          role="menuitem"
+          @click="handleSelect(plugin)"
+        >
+          <span
+            class="mld-plugin-switcher__item-swatch"
+            :style="{ background: plugin.color ?? 'var(--color-primary)' }"
+          >
+            {{ initialsOf(plugin) }}
+          </span>
+          <span class="mld-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mld-plugin-switcher__item-version">v{{ plugin.version }}</span>
+          <svg
+            v-if="plugin.id === current.id"
+            class="mld-plugin-switcher__item-check"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M5 13l4 4L19 7" />
+          </svg>
+        </button>
+      </template>
+
+      <template v-if="plugins.length && (installHref || installTo || $slots.install)">
+        <div class="mld-plugin-switcher__divider" role="separator" />
+      </template>
+      <slot name="install">
+        <a
+          v-if="installHref"
+          :href="installHref"
+          class="mld-plugin-switcher__install"
+          role="menuitem"
+          @click="handleInstall"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          <span>{{ installLabel }}</span>
+        </a>
+        <router-link
+          v-else-if="installTo"
+          :to="installTo"
+          class="mld-plugin-switcher__install"
+          role="menuitem"
+          @click="handleInstall"
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <line x1="5" y1="12" x2="19" y2="12" />
+          </svg>
+          <span>{{ installLabel }}</span>
+        </router-link>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style>
+@import '../styles/components/app-plugin-switcher.css';
+</style>

package/src/components/AppSidebar.story.vue

@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import AppSidebar from './AppSidebar.vue'
+import BaseSlider from './BaseSlider.vue'
+import BaseSelect from './BaseSelect.vue'
+import BaseToggle from './BaseToggle.vue'
+import BaseButton from './BaseButton.vue'
+import BaseInput from './BaseInput.vue'
+import NumberInput from './NumberInput.vue'
+import FileUploader from './FileUploader.vue'
+import FormField from './FormField.vue'
+import type { SidebarToolSection } from '../types'
+
+/* --- Icon paths (Lucide-style) --- */
+const icons = {
+  upload: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M17 8l-5-5-5 5', 'M12 3v12'],
+  fileText: ['M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z', 'M14 2v6h6', 'M16 13H8', 'M16 17H8', 'M10 9H8'],
+  shuffle: ['M16 3h5v5', 'M4 20L21 3', 'M21 16v5h-5', 'M15 15l6 6', 'M4 4l5 5'],
+  zap: 'M13 2L3 14h9l-1 8 10-12h-9l1-8',
+  route: ['M18 6l-6 6-4-4-6 6'],
+  settings: ['M12 2L2 7l10 5 10-5-10-5z', 'M2 17l10 5 10-5', 'M2 12l10 5 10-5'],
+}
+
+/* --- Sequence builder panels --- */
+const sequencePanels: Record<string, SidebarToolSection[]> = {
+  sequence: [
+    {
+      id: 'import',
+      label: 'Import Layout',
+      subtitle: 'Upload from Excel',
+      icon: icons.upload,
+      iconColor: '#3b82f6',
+      iconBg: '#dbeafe',
+    },
+    {
+      id: 'naming',
+      label: 'Experiment & Naming',
+      subtitle: 'exp001_260210_XP_M...',
+      icon: icons.fileText,
+      iconColor: '#6366f1',
+      iconBg: '#e0e7ff',
+      showToggle: true,
+    },
+    {
+      id: 'randomize',
+      label: 'Randomize Samples',
+      subtitle: 'Sequential order',
+      icon: icons.shuffle,
+      iconColor: '#6366f1',
+      iconBg: '#e0e7ff',
+      showToggle: true,
+      defaultOpen: false,
+    },
+    {
+      id: 'acquisition',
+      label: 'Acquisition',
+      subtitle: 'NEG, VIAL',
+      icon: icons.zap,
+      iconColor: '#ef4444',
+      iconBg: '#fee2e2',
+    },
+    {
+      id: 'method',
+      label: 'Method & Path',
+      subtitle: 'Select method',
+      icon: icons.route,
+      iconColor: '#8b5cf6',
+      iconBg: '#ede9fe',
+      defaultOpen: false,
+    },
+  ],
+}
+
+/* --- Simple panels for basic demo --- */
+const simplePanels: Record<string, SidebarToolSection[]> = {
+  analysis: [
+    {
+      id: 'parameters',
+      label: 'Parameters',
+      subtitle: 'Analysis settings',
+      icon: ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
+      iconColor: '#6366f1',
+      iconBg: '#e0e7ff',
+    },
+    {
+      id: 'filters',
+      label: 'Filters',
+      subtitle: 'Refine results',
+      icon: ['M22 3H2l8 9.46V19l4 2v-8.54L22 3'],
+      iconColor: '#0ea5e9',
+      iconBg: '#e0f2fe',
+      defaultOpen: false,
+    },
+  ],
+  results: [
+    {
+      id: 'display',
+      label: 'Display Options',
+      subtitle: 'Chart and table settings',
+      icon: ['M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'],
+      iconColor: '#8b5cf6',
+      iconBg: '#ede9fe',
+    },
+    {
+      id: 'export',
+      label: 'Export',
+      subtitle: 'Download data',
+      icon: ['M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4', 'M7 10l5 5 5-5', 'M12 15V3'],
+      iconColor: '#10b981',
+      iconBg: '#d1fae5',
+      defaultOpen: false,
+    },
+  ],
+}
+
+const threshold = ref(50)
+const method = ref('linear')
+const methods = [
+  { value: 'linear', label: 'Linear' },
+  { value: 'quadratic', label: 'Quadratic' },
+  { value: 'logistic', label: 'Logistic' },
+]
+const showOutliers = ref(true)
+const logScale = ref(false)
+const polarity = ref('negative')
+const container = ref('vial')
+const expNumber = ref(1)
+const initials = ref('XP')
+const toggleState = reactive<Record<string, boolean>>({ naming: true, randomize: false })
+
+function handleToggle(id: string, value: boolean) {
+  toggleState[id] = value
+}
+
+function initSimpleToolkit() {
+  return {
+    activeView: 'analysis',
+    floating: false,
+    width: '260px',
+    side: 'left' as const,
+  }
+}
+</script>
+
+<template>
+  <Story title="Layout/AppSidebar">
+    <Variant title="Sequence Builder">
+      <div style="padding: 2rem; height: 700px; position: relative; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          :panels="sequencePanels"
+          active-view="sequence"
+          :toggle-state="toggleState"
+          width="300px"
+          @update:toggle="handleToggle"
+        >
+          <template #section-import>
+            <FileUploader accept=".xlsx,.xls" placeholder="Drop Excel or click" />
+            <div style="display: flex; gap: 0.5rem;">
+              <BaseButton size="sm" variant="secondary" style="flex: 1;">96-Well</BaseButton>
+              <BaseButton size="sm" variant="secondary" style="flex: 1;">54-Vial</BaseButton>
+            </div>
+          </template>
+          <template #section-naming>
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <span style="font-size: 0.75rem; font-weight: 600; color: var(--text-secondary, #4b5563);">File Prefix</span>
+              <span style="font-size: 0.75rem; color: var(--text-muted, #9ca3af);">Custom</span>
+            </div>
+            <div style="display: flex; gap: 0.5rem;">
+              <FormField label="Exp #" style="flex: 1;">
+                <NumberInput v-model="expNumber" :min="1" />
+              </FormField>
+              <FormField label="Initials" style="flex: 0 0 4rem;">
+                <BaseInput v-model="initials" />
+              </FormField>
+            </div>
+            <FormField label="Folder Name">
+              <span style="font-size: 0.8125rem; color: var(--text-secondary, #4b5563);">Metabolites</span>
+            </FormField>
+            <BaseInput model-value="exp001_260210_XP_Metabolites" readonly />
+            <p style="font-size: 0.6875rem; color: var(--text-muted, #9ca3af); margin: 0;">
+              Toggle to save experiment to database for tracking and analysis.
+            </p>
+          </template>
+          <template #section-randomize>
+            <BaseSelect
+              model-value="sequential"
+              :options="[
+                { value: 'sequential', label: 'Sequential' },
+                { value: 'random', label: 'Random' },
+                { value: 'block', label: 'Block randomize' },
+              ]"
+              label="Order"
+            />
+          </template>
+          <template #section-acquisition>
+            <div style="display: flex; gap: 0.5rem;">
+              <FormField label="Polarity" style="flex: 1;">
+                <BaseSelect v-model="polarity" :options="[{ value: 'negative', label: 'Negative' }, { value: 'positive', label: 'Positive' }]" />
+              </FormField>
+              <FormField label="Container" style="flex: 1;">
+                <BaseSelect v-model="container" :options="[{ value: 'vial', label: 'Vial' }, { value: 'plate', label: 'Plate' }]" />
+              </FormField>
+            </div>
+          </template>
+          <template #section-method>
+            <BaseToggle model-value label="Use custom method paths" />
+            <BaseSelect
+              model-value=""
+              placeholder="-- Select Method --"
+              :options="[]"
+              label="Method"
+            />
+          </template>
+          <template #footer>
+            <BaseButton variant="cta" style="width: 100%;">Generate Sequence</BaseButton>
+          </template>
+        </AppSidebar>
+      </div>
+    </Variant>
+
+    <Variant title="Simple Toolkit" :init-state="initSimpleToolkit">
+      <template #default="{ state }">
+        <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
+          <div style="margin-bottom: 1rem; display: flex; gap: 0.5rem;">
+            <button
+              v-for="v in ['analysis', 'results', 'settings']"
+              :key="v"
+              :style="{
+                padding: '0.375rem 0.75rem',
+                borderRadius: '0.25rem',
+                border: '1px solid var(--border-color, #e5e7eb)',
+                background: state.activeView === v ? 'var(--color-primary, #3b82f6)' : 'var(--bg-card, #fff)',
+                color: state.activeView === v ? '#fff' : 'var(--text-primary, #111827)',
+                cursor: 'pointer',
+                fontSize: '0.875rem',
+              }"
+              @click="state.activeView = v"
+            >
+              {{ v }}
+            </button>
+          </div>
+          <AppSidebar
+            :panels="simplePanels"
+            :active-view="state.activeView"
+            :floating="state.floating"
+            :width="state.width"
+            :side="state.side"
+          >
+            <template #section-parameters>
+              <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
+              <BaseSelect v-model="method" label="Method" :options="methods" />
+            </template>
+            <template #section-filters>
+              <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+            </template>
+            <template #section-display>
+              <BaseToggle v-model="showOutliers" label="Show outliers" />
+              <BaseToggle v-model="logScale" label="Log scale" />
+            </template>
+            <template #section-export>
+              <BaseButton size="sm" variant="secondary">Export CSV</BaseButton>
+              <BaseButton size="sm" variant="secondary">Export PNG</BaseButton>
+            </template>
+          </AppSidebar>
+        </div>
+      </template>
+
+      <template #controls="{ state }">
+        <HstSelect
+          v-model="state.activeView"
+          title="Active View"
+          :options="['analysis', 'results', 'settings'].map(v => ({ label: v, value: v }))"
+        />
+        <HstCheckbox v-model="state.floating" title="Floating" />
+        <HstText v-model="state.width" title="Width" />
+        <HstSelect
+          v-model="state.side"
+          title="Side"
+          :options="[{ label: 'left', value: 'left' }, { label: 'right', value: 'right' }]"
+        />
+      </template>
+    </Variant>
+
+    <Variant title="With Header and Footer">
+      <div style="padding: 2rem; height: 500px; position: relative; background: var(--bg-primary, #f1f5f9);">
+        <AppSidebar
+          :panels="simplePanels"
+          active-view="analysis"
+        >
+          <template #header>
+            <span style="font-weight: 600; font-size: 0.875rem; color: var(--text-primary, #111827);">
+              Analysis Tools
+            </span>
+          </template>
+          <template #section-parameters>
+            <BaseSlider v-model="threshold" label="Threshold" :min="0" :max="100" />
+            <BaseSelect v-model="method" label="Method" :options="methods" />
+          </template>
+          <template #section-filters>
+            <BaseToggle v-model="showOutliers" label="Exclude outliers" />
+          </template>
+          <template #footer>
+            <BaseButton size="sm" variant="ghost" style="width: 100%;">Reset Defaults</BaseButton>
+          </template>
+        </AppSidebar>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/AppSidebar.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+/**
+ * AppSidebar - Context-sensitive toolkit panel
+ *
+ * Shows tool sections relevant to the active view. Sections are defined
+ * via the `panels` config (mapping view IDs to section arrays) and rendered
+ * as CollapsibleCards. Actual controls are provided through named slots:
+ * `#section-{sectionId}`.
+ *
+ * When the active view has no matching panels, the sidebar hides entirely.
+ *
+ * @example
+ * ```vue
+ * <AppSidebar :panels="toolPanels" :active-view="activeTab">
+ *   <template #section-parameters>
+ *     <BaseSlider v-model="threshold" label="Threshold" />
+ *   </template>
+ *   <template #section-display>
+ *     <BaseToggle v-model="showOutliers" label="Show outliers" />
+ *   </template>
+ *   <template #header>Plugin Tools</template>
+ * </AppSidebar>
+ * ```
+ */
+import { computed } from 'vue'
+import type { SidebarToolSection } from '../types'
+import CollapsibleCard from './CollapsibleCard.vue'
+
+interface Props {
+  /** Map of view IDs to their tool sections */
+  panels?: Record<string, SidebarToolSection[]>
+  /** Which view's panels to display */
+  activeView?: string
+  /** Floating variant with absolute positioning */
+  floating?: boolean
+  /** Compact layout: smaller headers, tighter spacing, no icon backgrounds */
+  dense?: boolean
+  /** Width when visible */
+  width?: string
+  /** Position sidebar on left or right side */
+  side?: 'left' | 'right'
+  /** Toggle state map: sectionId → boolean */
+  toggleState?: Record<string, boolean>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  panels: () => ({}),
+  activeView: '',
+  floating: true,
+  dense: false,
+  width: '280px',
+  side: 'left',
+  toggleState: () => ({}),
+})
+
+defineEmits<{
+  'update:toggle': [sectionId: string, value: boolean]
+}>()
+
+const activeSections = computed<SidebarToolSection[]>(() => {
+  if (!props.activeView || !props.panels[props.activeView]) return []
+  return props.panels[props.activeView]
+})
+
+const isVisible = computed(() => activeSections.value.length > 0)
+
+const sidebarClasses = computed(() => [
+  'mld-sidebar',
+  `mld-sidebar--${props.side}`,
+  props.floating ? 'mld-sidebar--floating' : 'mld-sidebar--static',
+  props.dense ? 'mld-sidebar--dense' : '',
+  !isVisible.value ? 'mld-sidebar--hidden' : '',
+])
+
+const sidebarStyle = computed(() => ({
+  width: props.width,
+}))
+</script>
+
+<template>
+  <aside
+    :class="sidebarClasses"
+    :style="sidebarStyle"
+  >
+    <!-- Header slot -->
+    <div v-if="$slots.header" class="mld-sidebar__header">
+      <slot name="header" />
+    </div>
+
+    <!-- Tool sections -->
+    <div class="mld-sidebar__sections">
+      <CollapsibleCard
+        v-for="section in activeSections"
+        :key="section.id"
+        :title="section.label"
+        :subtitle="section.subtitle"
+        :icon="section.icon"
+        :icon-color="section.iconColor"
+        :icon-bg="section.iconBg"
+        :dense="dense"
+        :default-open="section.defaultOpen !== false"
+        :show-toggle="section.showToggle"
+        :toggle-value="toggleState[section.id] ?? false"
+        @update:toggle-value="$emit('update:toggle', section.id, $event)"
+      >
+        <slot :name="`section-${section.id}`" />
+      </CollapsibleCard>
+    </div>
+
+    <!-- Footer slot -->
+    <div v-if="$slots.footer" class="mld-sidebar__footer">
+      <slot name="footer" />
+    </div>
+  </aside>
+</template>
+
+<style>
+@import '../styles/components/app-sidebar.css';
+</style>