@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-beta.1

package/src/components/AppAvatarMenu.vue

@@ -88,91 +88,91 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="rootRef" class="mld-avatar-menu">
+  <div ref="rootRef" class="mint-avatar-menu">
     <button
       type="button"
-      class="mld-avatar-menu__trigger"
-      :class="{ 'mld-avatar-menu__trigger--open': isOpen }"
+      class="mint-avatar-menu__trigger"
+      :class="{ 'mint-avatar-menu__trigger--open': isOpen }"
       :aria-expanded="isOpen"
       aria-haspopup="menu"
       :title="userName ? `${userName} · Account menu` : 'Account menu'"
       @click.stop="toggle"
     >
-      <span class="mld-avatar-menu__avatar">
+      <span class="mint-avatar-menu__avatar">
         <slot name="avatar" :initials="initials">
           {{ initials }}
         </slot>
       </span>
-      <span v-if="userName" class="mld-avatar-menu__name">{{ userName }}</span>
+      <span v-if="userName" class="mint-avatar-menu__name">{{ userName }}</span>
     </button>
 
-    <div v-if="isOpen" class="mld-avatar-menu__panel" role="menu">
-      <div v-if="userName || userEmail" class="mld-avatar-menu__header">
-        <div v-if="userName" class="mld-avatar-menu__user-name">{{ userName }}</div>
-        <div v-if="userEmail" class="mld-avatar-menu__user-email">{{ userEmail }}</div>
+    <div v-if="isOpen" class="mint-avatar-menu__panel" role="menu">
+      <div v-if="userName || userEmail" class="mint-avatar-menu__header">
+        <div v-if="userName" class="mint-avatar-menu__user-name">{{ userName }}</div>
+        <div v-if="userEmail" class="mint-avatar-menu__user-email">{{ userEmail }}</div>
       </div>
 
       <slot name="items" :close="() => (isOpen = false)">
         <template v-for="item in items" :key="item.id">
-          <div v-if="item.divider" class="mld-avatar-menu__divider" role="separator" />
+          <div v-if="item.divider" class="mint-avatar-menu__divider" role="separator" />
           <a
             v-else-if="item.href"
             :href="item.href"
-            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
             @click="handleSelect(item)"
           >
-            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
               <slot name="item-icon" :item="item" />
             </span>
-            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
           </a>
           <router-link
             v-else-if="item.to"
             :to="item.to"
-            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
             @click="handleSelect(item)"
           >
-            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
               <slot name="item-icon" :item="item" />
             </span>
-            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
           </router-link>
           <button
             v-else
             type="button"
-            :class="['mld-avatar-menu__item', { 'mld-avatar-menu__item--danger': item.danger }]"
+            :class="['mint-avatar-menu__item', { 'mint-avatar-menu__item--danger': item.danger }]"
             role="menuitem"
             @click="handleSelect(item)"
           >
-            <span v-if="item.icon" class="mld-avatar-menu__item-icon">
+            <span v-if="item.icon" class="mint-avatar-menu__item-icon">
               <slot name="item-icon" :item="item" />
             </span>
-            <span class="mld-avatar-menu__item-label">{{ item.label }}</span>
-            <span v-if="item.rightLabel" class="mld-avatar-menu__item-right">{{ item.rightLabel }}</span>
+            <span class="mint-avatar-menu__item-label">{{ item.label }}</span>
+            <span v-if="item.rightLabel" class="mint-avatar-menu__item-right">{{ item.rightLabel }}</span>
           </button>
         </template>
       </slot>
 
       <template v-if="showSignOut">
-        <div class="mld-avatar-menu__divider" role="separator" />
+        <div class="mint-avatar-menu__divider" role="separator" />
         <button
           type="button"
-          class="mld-avatar-menu__item mld-avatar-menu__item--danger"
+          class="mint-avatar-menu__item mint-avatar-menu__item--danger"
           role="menuitem"
           @click="handleSignOut"
         >
-          <span class="mld-avatar-menu__item-icon" aria-hidden="true">
+          <span class="mint-avatar-menu__item-icon" aria-hidden="true">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
               <polyline points="16 17 21 12 16 7" />
               <line x1="21" y1="12" x2="9" y2="12" />
             </svg>
           </span>
-          <span class="mld-avatar-menu__item-label">{{ signOutLabel }}</span>
+          <span class="mint-avatar-menu__item-label">{{ signOutLabel }}</span>
         </button>
       </template>
     </div>

package/src/components/AppContainer.vue

@@ -21,11 +21,11 @@ const isLayout = computed(() => !!props.direction)
 
 <template>
   <div
-    class="mld-container"
+    class="mint-container"
     :class="
       isLayout
-        ? ['mld-container--layout', direction === 'row' ? 'mld-container--row' : 'mld-container--column']
-        : ['mld-container--card', scrollable ? 'mld-container--scrollable' : '']
+        ? ['mint-container--layout', direction === 'row' ? 'mint-container--row' : 'mint-container--column']
+        : ['mint-container--card', scrollable ? 'mint-container--scrollable' : '']
     "
     :style="isLayout ? { gap } : undefined"
   >

package/src/components/AppLayout.vue

@@ -38,9 +38,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const layoutClasses = computed(() => [
-  'mld-layout',
-  props.sidebarPosition === 'right' ? 'mld-layout--sidebar-right' : '',
-  props.floating ? 'mld-layout--floating' : '',
+  'mint-layout',
+  props.sidebarPosition === 'right' ? 'mint-layout--sidebar-right' : '',
+  props.floating ? 'mint-layout--floating' : '',
 ])
 
 const sidebarStyle = computed(() => {
@@ -50,20 +50,20 @@ const sidebarStyle = computed(() => {
 
 <template>
   <div :class="layoutClasses">
-    <div v-if="$slots.topbar" class="mld-layout__topbar">
+    <div v-if="$slots.topbar" class="mint-layout__topbar">
       <slot name="topbar" />
     </div>
 
-    <div class="mld-layout__body">
+    <div class="mint-layout__body">
       <div
         v-if="$slots.sidebar"
-        class="mld-layout__sidebar"
+        class="mint-layout__sidebar"
         :style="sidebarStyle"
       >
         <slot name="sidebar" />
       </div>
 
-      <main class="mld-layout__main">
+      <main class="mint-layout__main">
         <slot />
       </main>
     </div>

package/src/components/AppPageSelector.vue

@@ -62,20 +62,20 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="rootRef" class="mld-page-selector" :style="{ minWidth }">
+  <div ref="rootRef" class="mint-page-selector" :style="{ minWidth }">
     <button
       type="button"
-      class="mld-page-selector__trigger"
-      :class="{ 'mld-page-selector__trigger--open': isOpen }"
+      class="mint-page-selector__trigger"
+      :class="{ 'mint-page-selector__trigger--open': isOpen }"
       :aria-expanded="isOpen"
       aria-haspopup="menu"
       @click.stop="toggle"
     >
-      <span class="mld-page-selector__label">{{ current?.label ?? placeholder }}</span>
-      <span class="mld-page-selector__chevron-wrap" aria-hidden="true">
+      <span class="mint-page-selector__label">{{ current?.label ?? placeholder }}</span>
+      <span class="mint-page-selector__chevron-wrap" aria-hidden="true">
         <svg
-          class="mld-page-selector__chevron"
-          :class="{ 'mld-page-selector__chevron--open': isOpen }"
+          class="mint-page-selector__chevron"
+          :class="{ 'mint-page-selector__chevron--open': isOpen }"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -88,66 +88,66 @@ onUnmounted(() => {
       </span>
     </button>
 
-    <div v-if="isOpen" class="mld-page-selector__menu" role="menu">
-      <div class="mld-page-selector__menu-title">Go to</div>
+    <div v-if="isOpen" class="mint-page-selector__menu" role="menu">
+      <div class="mint-page-selector__menu-title">Go to</div>
       <template v-for="page in pages" :key="page.id">
         <a
           v-if="page.href"
           :href="page.href"
           :class="[
-            'mld-page-selector__item',
-            { 'mld-page-selector__item--active': page.id === current?.id },
-            { 'mld-page-selector__item--disabled': page.disabled },
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
           ]"
           role="menuitem"
           @click="isOpen = false"
         >
-          <span class="mld-page-selector__item-icon">
+          <span class="mint-page-selector__item-icon">
             <slot name="item-icon" :page="page">
-              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
             </slot>
           </span>
-          <span class="mld-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+          <span class="mint-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
         </a>
         <router-link
           v-else-if="page.to"
           :to="page.to"
           :class="[
-            'mld-page-selector__item',
-            { 'mld-page-selector__item--active': page.id === current?.id },
-            { 'mld-page-selector__item--disabled': page.disabled },
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
           ]"
           role="menuitem"
           @click="isOpen = false"
         >
-          <span class="mld-page-selector__item-icon">
+          <span class="mint-page-selector__item-icon">
             <slot name="item-icon" :page="page">
-              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
             </slot>
           </span>
-          <span class="mld-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+          <span class="mint-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
         </router-link>
         <button
           v-else
           type="button"
           :class="[
-            'mld-page-selector__item',
-            { 'mld-page-selector__item--active': page.id === current?.id },
-            { 'mld-page-selector__item--disabled': page.disabled },
+            'mint-page-selector__item',
+            { 'mint-page-selector__item--active': page.id === current?.id },
+            { 'mint-page-selector__item--disabled': page.disabled },
           ]"
           role="menuitem"
           :disabled="page.disabled"
           @click="handleSelect(page)"
         >
-          <span class="mld-page-selector__item-icon">
+          <span class="mint-page-selector__item-icon">
             <slot name="item-icon" :page="page">
-              <span class="mld-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
+              <span class="mint-page-selector__icon-fallback">{{ page.label.charAt(0) }}</span>
             </slot>
           </span>
-          <span class="mld-page-selector__item-label">{{ page.label }}</span>
-          <span v-if="page.hint" class="mld-page-selector__item-hint">{{ page.hint }}</span>
+          <span class="mint-page-selector__item-label">{{ page.label }}</span>
+          <span v-if="page.hint" class="mint-page-selector__item-hint">{{ page.hint }}</span>
         </button>
       </template>
     </div>

package/src/components/AppPillNav.vue

@@ -20,15 +20,15 @@ function handleClick(item: PillNavItem) {
 </script>
 
 <template>
-  <nav class="mld-pill-nav" aria-label="Primary">
+  <nav class="mint-pill-nav" aria-label="Primary">
     <template v-for="item in items" :key="item.id">
       <a
         v-if="item.href"
         :href="item.href"
         :class="[
-          'mld-pill-nav__item',
-          { 'mld-pill-nav__item--active': item.id === currentItemId },
-          { 'mld-pill-nav__item--disabled': item.disabled },
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId },
+          { 'mint-pill-nav__item--disabled': item.disabled },
         ]"
       >
         {{ item.label }}
@@ -37,9 +37,9 @@ function handleClick(item: PillNavItem) {
         v-else-if="item.to"
         :to="item.to"
         :class="[
-          'mld-pill-nav__item',
-          { 'mld-pill-nav__item--active': item.id === currentItemId },
-          { 'mld-pill-nav__item--disabled': item.disabled },
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId },
+          { 'mint-pill-nav__item--disabled': item.disabled },
         ]"
       >
         {{ item.label }}
@@ -48,9 +48,9 @@ function handleClick(item: PillNavItem) {
         v-else
         type="button"
         :class="[
-          'mld-pill-nav__item',
-          { 'mld-pill-nav__item--active': item.id === currentItemId },
-          { 'mld-pill-nav__item--disabled': item.disabled },
+          'mint-pill-nav__item',
+          { 'mint-pill-nav__item--active': item.id === currentItemId },
+          { 'mint-pill-nav__item--disabled': item.disabled },
         ]"
         :disabled="item.disabled"
         @click="handleClick(item)"

package/src/components/AppPluginSwitcher.vue

@@ -73,21 +73,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div ref="rootRef" class="mld-plugin-switcher">
+  <div ref="rootRef" class="mint-plugin-switcher">
     <button
       type="button"
-      class="mld-plugin-switcher__trigger"
-      :class="{ 'mld-plugin-switcher__trigger--open': isOpen }"
+      class="mint-plugin-switcher__trigger"
+      :class="{ 'mint-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">
+      <span class="mint-plugin-switcher__label">{{ current.label }}</span>
+      <span v-if="current.version" class="mint-plugin-switcher__version">v{{ current.version }}</span>
+      <span class="mint-plugin-switcher__chevron-wrap" aria-hidden="true">
         <svg
-          class="mld-plugin-switcher__chevron"
-          :class="{ 'mld-plugin-switcher__chevron--open': isOpen }"
+          class="mint-plugin-switcher__chevron"
+          :class="{ 'mint-plugin-switcher__chevron--open': isOpen }"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -100,30 +100,30 @@ onUnmounted(() => {
       </span>
     </button>
 
-    <div v-if="isOpen" class="mld-plugin-switcher__menu" role="menu">
-      <div class="mld-plugin-switcher__menu-title">Switch plugin</div>
+    <div v-if="isOpen" class="mint-plugin-switcher__menu" role="menu">
+      <div class="mint-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 },
+            'mint-plugin-switcher__item',
+            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
           ]"
           role="menuitem"
           @click="handleSelect(plugin)"
         >
           <span
-            class="mld-plugin-switcher__item-swatch"
+            class="mint-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>
+          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
           <svg
             v-if="plugin.id === current.id"
-            class="mld-plugin-switcher__item-check"
+            class="mint-plugin-switcher__item-check"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -139,23 +139,23 @@ onUnmounted(() => {
           v-else-if="plugin.to"
           :to="plugin.to"
           :class="[
-            'mld-plugin-switcher__item',
-            { 'mld-plugin-switcher__item--active': plugin.id === current.id },
+            'mint-plugin-switcher__item',
+            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
           ]"
           role="menuitem"
           @click="handleSelect(plugin)"
         >
           <span
-            class="mld-plugin-switcher__item-swatch"
+            class="mint-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>
+          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
           <svg
             v-if="plugin.id === current.id"
-            class="mld-plugin-switcher__item-check"
+            class="mint-plugin-switcher__item-check"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -171,23 +171,23 @@ onUnmounted(() => {
           v-else
           type="button"
           :class="[
-            'mld-plugin-switcher__item',
-            { 'mld-plugin-switcher__item--active': plugin.id === current.id },
+            'mint-plugin-switcher__item',
+            { 'mint-plugin-switcher__item--active': plugin.id === current.id },
           ]"
           role="menuitem"
           @click="handleSelect(plugin)"
         >
           <span
-            class="mld-plugin-switcher__item-swatch"
+            class="mint-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>
+          <span class="mint-plugin-switcher__item-label">{{ plugin.label }}</span>
+          <span v-if="plugin.version" class="mint-plugin-switcher__item-version">v{{ plugin.version }}</span>
           <svg
             v-if="plugin.id === current.id"
-            class="mld-plugin-switcher__item-check"
+            class="mint-plugin-switcher__item-check"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -202,13 +202,13 @@ onUnmounted(() => {
       </template>
 
       <template v-if="plugins.length && (installHref || installTo || $slots.install)">
-        <div class="mld-plugin-switcher__divider" role="separator" />
+        <div class="mint-plugin-switcher__divider" role="separator" />
       </template>
       <slot name="install">
         <a
           v-if="installHref"
           :href="installHref"
-          class="mld-plugin-switcher__install"
+          class="mint-plugin-switcher__install"
           role="menuitem"
           @click="handleInstall"
         >
@@ -221,7 +221,7 @@ onUnmounted(() => {
         <router-link
           v-else-if="installTo"
           :to="installTo"
-          class="mld-plugin-switcher__install"
+          class="mint-plugin-switcher__install"
           role="menuitem"
           @click="handleInstall"
         >

package/src/components/AppSidebar.vue

@@ -65,11 +65,11 @@ const activeSections = computed<SidebarToolSection[]>(() => {
 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' : '',
+  'mint-sidebar',
+  `mint-sidebar--${props.side}`,
+  props.floating ? 'mint-sidebar--floating' : 'mint-sidebar--static',
+  props.dense ? 'mint-sidebar--dense' : '',
+  !isVisible.value ? 'mint-sidebar--hidden' : '',
 ])
 
 const sidebarStyle = computed(() => ({
@@ -83,12 +83,12 @@ const sidebarStyle = computed(() => ({
     :style="sidebarStyle"
   >
     <!-- Header slot -->
-    <div v-if="$slots.header" class="mld-sidebar__header">
+    <div v-if="$slots.header" class="mint-sidebar__header">
       <slot name="header" />
     </div>
 
     <!-- Tool sections -->
-    <div class="mld-sidebar__sections">
+    <div class="mint-sidebar__sections">
       <CollapsibleCard
         v-for="section in activeSections"
         :key="section.id"
@@ -108,7 +108,7 @@ const sidebarStyle = computed(() => ({
     </div>
 
     <!-- Footer slot -->
-    <div v-if="$slots.footer" class="mld-sidebar__footer">
+    <div v-if="$slots.footer" class="mint-sidebar__footer">
       <slot name="footer" />
     </div>
   </aside>

package/src/components/AppTopBar.story.vue

@@ -214,9 +214,9 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <!-- ─────────────── LEGACY VARIANTS (backward compat) ─────────────── -->
+    <!-- ─────────────── CLASSIC VARIANTS (classic prop surface) ─────────────── -->
 
-    <Variant title="Legacy · Playground">
+    <Variant title="Classic · Playground">
       <template #default="{ state }">
         <div style="padding: 2rem;">
           <AppTopBar
@@ -244,7 +244,7 @@ const sampleTabs: TopBarTab[] = [
       </template>
     </Variant>
 
-    <Variant title="Legacy · Title + Subtitle">
+    <Variant title="Classic · Title + Subtitle">
       <div style="padding: 2rem;">
         <AppTopBar
           title="Dose-Response Analysis"
@@ -254,7 +254,7 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Legacy · Breadcrumb with pages">
+    <Variant title="Classic · Breadcrumb with pages">
       <div style="padding: 2rem;">
         <AppTopBar
           plugin-name="IC50 Calculator"
@@ -268,7 +268,7 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Legacy · Tabs">
+    <Variant title="Classic · Tabs">
       <div style="padding: 2rem;">
         <AppTopBar
           plugin-name="Plate Analyzer"
@@ -281,13 +281,13 @@ const sampleTabs: TopBarTab[] = [
       </div>
     </Variant>
 
-    <Variant title="Legacy · Minimal (logo only)">
+    <Variant title="Classic · Minimal (logo only)">
       <div style="padding: 2rem;">
         <AppTopBar :show-logo="true" home-path="/" />
       </div>
     </Variant>
 
-    <Variant title="Legacy · Experiment selector integration">
+    <Variant title="Classic · Experiment selector integration">
       <div style="padding: 2rem;">
         <ExperimentProvider>
           <AppTopBar