@poveste/app 0.15.0 → 0.16.0

package/src/app/components/panel/StatePresets.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { applyState, clone } from '@poveste/shared'
 import { onClickOutside, useLiveAnnouncer, useStorage, useTimeoutFn } from '@vueuse/core'
 import { computed, nextTick, onMounted, ref } from 'vue'
@@ -188,81 +189,86 @@ onClickOutside(select, () => stopEditing())
         @select="id => applyPreset(id)"
       />
     </div>
-    <button
-      v-tooltip="canEdit ? 'Rename this preset' : null"
-      type="button"
-      data-testid="preset-rename"
-      aria-label="Rename preset"
-      :disabled="!canEdit"
-      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
-      :class="[
-        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
-      ]"
-      @click="startEditing()"
-    >
-      <Icon
-        icon="carbon:edit"
-        class="w-4 h-4"
-      />
-    </button>
-    <button
-      v-tooltip="canEdit ? 'Delete this preset' : null"
-      type="button"
-      data-testid="preset-delete"
-      aria-label="Delete preset"
-      :disabled="!canEdit"
-      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
-      :class="[
-        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
-      ]"
-      @click="deletePreset(selectedOption)"
-    >
-      <Icon
-        icon="carbon:trash-can"
-        class="w-4 h-4"
-      />
-    </button>
-    <button
-      v-tooltip="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null"
-      type="button"
-      data-testid="preset-save"
-      aria-label="Save to preset"
-      :disabled="!canEdit"
-      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
-      :class="[
-        canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
-      ]"
-      @click="savePreset()"
-    >
-      <Icon
-        :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
-        class="w-4 h-4"
-      />
-    </button>
-    <button
-      v-tooltip="'Create new preset'"
-      type="button"
-      data-testid="preset-create"
-      aria-label="Create new preset"
-      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
-      @click="createPreset()"
-    >
-      <Icon
-        icon="carbon:add-alt"
-        class="w-4 h-4"
-      />
-    </button>
-    <button
-      v-tooltip="'Reset to initial state'"
-      type="button"
-      aria-label="Reset to initial state"
-      class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
-      @click="resetState()"
-    >
-      <Icon
-        icon="carbon:reset"
-        class="w-4 h-4"
-      />
-    </button>
+    <HstTooltip :content="canEdit ? 'Rename this preset' : null">
+      <button
+        type="button"
+        data-testid="preset-rename"
+        aria-label="Rename preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="startEditing()"
+      >
+        <Icon
+          icon="carbon:edit"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip :content="canEdit ? 'Delete this preset' : null">
+      <button
+        type="button"
+        data-testid="preset-delete"
+        aria-label="Delete preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="deletePreset(selectedOption)"
+      >
+        <Icon
+          icon="carbon:trash-can"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip :content="savedNotif ? 'Saved!' : canEdit ? 'Save to preset' : null">
+      <button
+        type="button"
+        data-testid="preset-save"
+        aria-label="Save to preset"
+        :disabled="!canEdit"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400"
+        :class="[
+          canEdit ? 'opacity-50 hover:opacity-100 focus-visible:opacity-100' : 'opacity-25 pointer-events-none',
+        ]"
+        @click="savePreset()"
+      >
+        <Icon
+          :icon="savedNotif ? 'carbon:checkmark' : 'carbon:save'"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip content="Create new preset">
+      <button
+        type="button"
+        data-testid="preset-create"
+        aria-label="Create new preset"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
+        @click="createPreset()"
+      >
+        <Icon
+          icon="carbon:add-alt"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
+    <HstTooltip content="Reset to initial state">
+      <button
+        type="button"
+        aria-label="Reset to initial state"
+        class="flex-none flex p-0 bg-transparent border-0 cursor-pointer text-gray-900 dark:text-gray-100 hover:text-primary-500 dark:hover:text-primary-400 opacity-50 hover:opacity-100 focus-visible:opacity-100"
+        @click="resetState()"
+      >
+        <Icon
+          icon="carbon:reset"
+          class="w-4 h-4"
+        />
+      </button>
+    </HstTooltip>
   </div>
 </template>

package/src/app/components/panel/StoryEvent.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { HstEvent } from '../../stores/events'
 import { computed } from 'vue'
+import BaseDropdown from '../base/BaseDropdown.vue'
 
 const props = defineProps<{
   event: HstEvent
@@ -24,21 +25,21 @@ const formattedArgument = computed(() => {
 </script>
 
 <template>
-  <VDropdown
+  <BaseDropdown
+    side="right"
     class="poveste-story-event group"
-    placement="right"
     data-testid="event-item"
   >
-    <template #default="{ shown }">
-      <div
-        class="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 flex items-baseline gap-1 leading-normal"
+    <template #default="{ open }">
+      <button
+        class="group-hover:bg-primary-100 dark:group-hover:bg-primary-700 cursor-pointer py-2 px-4 w-full text-left flex items-baseline gap-1 leading-normal"
         :class="[
-          shown ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
+          open ? 'bg-primary-50 dark:bg-primary-600' : 'group-odd:bg-gray-100/50 dark:group-odd:bg-gray-750/40',
         ]"
       >
         <span
           :class="{
-            'text-primary-500': shown,
+            'text-primary-500': open,
           }"
         >
           {{ event.name }}
@@ -47,7 +48,7 @@ const formattedArgument = computed(() => {
           v-if="event.argument"
           class="text-xs opacity-50 truncate"
         >{{ formattedArgument }}</span>
-      </div>
+      </button>
     </template>
 
     <template #popper>
@@ -55,5 +56,5 @@ const formattedArgument = computed(() => {
         <pre class="p-4">{{ event.argument }}</pre>
       </div>
     </template>
-  </VDropdown>
+  </BaseDropdown>
 </template>

package/src/app/components/panel/StorySidePanel.vue

@@ -53,6 +53,7 @@ const panelContentComponent = computed(() => {
       <BaseSplitPane
         v-else
         :save-id="`story-sidepane-${innerOrientation}`"
+        label="Resize the controls panel"
         :orientation="innerOrientation"
         class="poveste-story-side-panel poveste-loaded h-full"
         data-testid="story-side-panel"

package/src/app/components/panel/StorySourceCode.vue

@@ -2,7 +2,7 @@
 import type { HighlighterCore } from 'shiki/core'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCopyIcon } from '@poveste/controls'
+import { HstCopyIcon, HstTooltip } from '@poveste/controls'
 import { unindent } from '@poveste/shared'
 import { clientSupportPlugins } from 'virtual:$poveste-support-plugins-client'
 import { computed, markRaw, nextTick, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'
@@ -151,50 +151,56 @@ watch(sourceHtml, async () => {
 
       <!-- Display source modes -->
       <div class="flex flex-none gap-px h-full py-2">
-        <button
-          v-tooltip="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
-          class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
-          :class="[
-            displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
-            dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'dynamic' && 'opacity-50',
-          ]"
-          @click="dynamicSourceCode && (displayedSource = 'dynamic')"
+        <HstTooltip
+          :content="!dynamicSourceCode ? 'Dynamic source code is not available' : displayedSource !== 'dynamic' ? 'Switch to dynamic source' : null"
         >
-          <Icon
-            icon="carbon:flash"
-            class="w-4 h-4 flex-none"
-          />
-          <span
-            class="transition-opacity duration-300"
-            :class="{
-              'opacity-0': displayedSource !== 'dynamic',
-            }"
+          <button
+            class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-l transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
+            :class="[
+              displayedSource !== 'dynamic' ? 'max-w-6 opacity-70' : 'max-w-[82px] text-primary-800 dark:text-primary-400',
+              dynamicSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'dynamic' && 'opacity-50',
+            ]"
+            @click="dynamicSourceCode && (displayedSource = 'dynamic')"
           >
-            Dynamic
-          </span>
-        </button>
-        <button
-          v-tooltip="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
-          class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
-          :class="[
-            displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 dark:text-primary-400',
-            staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'static' && 'opacity-50',
-          ]"
-          @click="staticSourceCode && (displayedSource = 'static')"
+            <Icon
+              icon="carbon:flash"
+              class="w-4 h-4 flex-none"
+            />
+            <span
+              class="transition-opacity duration-300"
+              :class="{
+                'opacity-0': displayedSource !== 'dynamic',
+              }"
+            >
+              Dynamic
+            </span>
+          </button>
+        </HstTooltip>
+        <HstTooltip
+          :content="!staticSourceCode ? 'Static source code is not available' : displayedSource !== 'static' ? 'Switch to static source' : null"
         >
-          <Icon
-            icon="carbon:document"
-            class="w-4 h-4 flex-none"
-          />
-          <span
-            class="transition-opacity duration-300"
-            :class="{
-              'opacity-0': displayedSource !== 'static',
-            }"
+          <button
+            class="flex items-center gap-1 h-full px-1 bg-gray-500/10 rounded-r transition-all ease-[cubic-bezier(0,1,.6,1)] duration-300 overflow-hidden"
+            :class="[
+              displayedSource !== 'static' ? 'max-w-6 opacity-70' : 'max-w-[63px] text-primary-800 dark:text-primary-400',
+              staticSourceCode ? 'cursor-pointer hover:bg-gray-500/30 active:bg-gray-600/50' : displayedSource !== 'static' && 'opacity-50',
+            ]"
+            @click="staticSourceCode && (displayedSource = 'static')"
           >
-            Static
-          </span>
-        </button>
+            <Icon
+              icon="carbon:document"
+              class="w-4 h-4 flex-none"
+            />
+            <span
+              class="transition-opacity duration-300"
+              :class="{
+                'opacity-0': displayedSource !== 'static',
+              }"
+            >
+              Static
+            </span>
+          </button>
+        </HstTooltip>
       </div>
 
       <HstCopyIcon

package/src/app/components/story/StoryResponsivePreview.vue

@@ -2,8 +2,8 @@
 import type { Ref } from 'vue'
 import type { Variant } from '../../types'
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { useEventListener } from '@vueuse/core'
-import { VTooltip as vTooltip } from 'floating-vue'
 import { computed, onUnmounted, ref } from 'vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import CheckerboardPattern from '../misc/CheckerboardPattern.vue'
@@ -201,9 +201,18 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
              preview would otherwise be shown against the bare box below the
              first screenful. The checkerboard is measured against this for the
              same reason — but the draggers are not, since they belong to the
-             visible box rather than to the story's full height. -->
+             visible box rather than to the story's full height.
+             `flex`, and `flex-1` rather than `h-full` below, because that is the
+             half `min-h-full` costs: a percentage height resolves against a
+             parent's *specified* height, and this one's is `auto`. So `h-full`
+             collapsed all the way down to the iframe, which then fell back to
+             its own default of 150px and clipped every story taller than that
+             (#949). A flex child reads the used height instead, which
+             `min-height` does give it — and with `min-height: auto` it still
+             refuses to shrink below its content, so a tall story pushes this box
+             taller exactly as it did. -->
         <div
-          class="rounded-lg min-h-full relative"
+          class="rounded-lg min-h-full relative flex flex-col"
           :class="responsive ? 'bind-preview-bg' : ''"
           :data-testid="responsive ? 'responsive-preview-bg' : undefined"
         >
@@ -212,10 +221,17 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
             class="absolute inset-0 w-full h-full text-gray-500/20"
           />
           <div
-            class="h-full relative"
+            class="flex-1 relative flex flex-col"
             :class="responsive ? 'p-8' : ''"
           >
-            <div class="w-full h-full relative">
+            <!-- `grid`, so the one in-flow child stretches to this box without
+                 asking for a percentage of it. `h-full` here read a height that
+                 is decided by flex, which Chrome treats as indefinite for
+                 percentage resolution — the same wall one level up. Stretching
+                 is not shrinking: the child keeps its `min-height: auto`, so an
+                 inline story taller than the preview still grows this and the
+                 box above it (#258). -->
+            <div class="w-full flex-1 relative grid">
               <div class="absolute inset-0" />
 
               <slot
@@ -243,31 +259,43 @@ const sizeTooltip = computed(() => `${responsiveWidth.value ?? 'Auto'} × ${resp
 
         <!-- Resize Dragger -->
         <template v-if="isResponsiveEnabled">
-          <div
-            ref="horizontalDragger"
-            v-tooltip.right="sizeTooltip"
-            class="absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+          <HstTooltip
+            :content="sizeTooltip"
+            side="right"
           >
-            <Icon
-              icon="mdi:drag-vertical-variant"
-              class="w-4 h-4 opacity-20 group-hover:opacity-90"
-            />
-          </div>
-          <div
-            ref="verticalDragger"
-            v-tooltip.bottom="sizeTooltip"
-            class="absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+            <div
+              ref="horizontalDragger"
+              class="absolute w-4 top-0 bottom-4 right-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ew-resize group hover:text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-vertical-variant"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
+              />
+            </div>
+          </HstTooltip>
+          <HstTooltip
+            :content="sizeTooltip"
+            side="bottom"
           >
-            <Icon
-              icon="mdi:drag-horizontal-variant"
-              class="w-4 h-4 opacity-20 group-hover:opacity-90"
+            <div
+              ref="verticalDragger"
+              class="absolute h-4 left-0 right-4 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-ns-resize group hover:text-primary-500"
+            >
+              <Icon
+                icon="mdi:drag-horizontal-variant"
+                class="w-4 h-4 opacity-20 group-hover:opacity-90"
+              />
+            </div>
+          </HstTooltip>
+          <HstTooltip
+            :content="sizeTooltip"
+            side="bottom"
+          >
+            <div
+              ref="cornerDragger"
+              class="absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
             />
-          </div>
-          <div
-            ref="cornerDragger"
-            v-tooltip.bottom="sizeTooltip"
-            class="absolute w-4 h-4 right-0 bottom-0 hover:bg-primary-500/30 flex items-center justify-center cursor-nwse-resize group hover:text-primary-500"
-          />
+          </HstTooltip>
         </template>
       </div>
     </div>

package/src/app/components/story/StoryVariantGridItem.vue

@@ -2,7 +2,7 @@
 import type { PropType } from 'vue'
 import type { Story, Variant } from '../../types'
 import { Icon } from '@iconify/vue'
-import { HstCopyIcon } from '@poveste/controls'
+import { HstCopyIcon, HstTooltip } from '@poveste/controls'
 import { useResizeObserver } from '@vueuse/core'
 import { computed, nextTick, ref, toRefs, watch } from 'vue'
 import { useRouter } from 'vue-router'
@@ -111,25 +111,26 @@ const useIframe = computed(() => {
   >
     <!-- Header -->
     <div class="flex-none flex items-center">
-      <RouterLink
-        v-tooltip="variant.title"
-        :to="targetRoute"
-        class="rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink"
-        :class="{
-          'hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800': !isActive,
-          'bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200': isActive,
-        }"
-      >
-        <Icon
-          :icon="variant.icon ?? 'carbon:cube'"
-          class="w-4 h-4 opacity-50"
+      <HstTooltip :content="variant.title">
+        <RouterLink
+          :to="targetRoute"
+          class="rounded w-max px-2 py-0.5 min-w-16 cursor-pointer flex items-center gap-1 flex-shrink"
           :class="{
-            'text-gray-500': !isActive && !variant.iconColor,
-            'bind-icon-color': !isActive && variant.iconColor,
+            'hover:bg-gray-200 text-gray-500 dark:hover:bg-gray-800': !isActive,
+            'bg-primary-200 hover:bg-primary-300 text-primary-800 dark:bg-primary-700 dark:hover:bg-primary-800 dark:text-primary-200': isActive,
           }"
-        />
-        <span class="truncate flex-1">{{ variant.title }}</span>
-      </RouterLink>
+        >
+          <Icon
+            :icon="variant.icon ?? 'carbon:cube'"
+            class="w-4 h-4 opacity-50"
+            :class="{
+              'text-gray-500': !isActive && !variant.iconColor,
+              'bind-icon-color': !isActive && variant.iconColor,
+            }"
+          />
+          <span class="truncate flex-1">{{ variant.title }}</span>
+        </RouterLink>
+      </HstTooltip>
 
       <!-- Toolbar -->
       <div class="flex-none ml-auto hidden group-hover:flex group-focus-within:flex items-center">

package/src/app/components/story/StoryVariantSingle.vue

@@ -36,6 +36,7 @@ const showsPreview = computed(() => !!variant.value || autoSelectsVariant(storyS
   -->
   <BaseSplitPane
     save-id="story-single-main-split"
+    label="Resize the variant list"
     :min="5"
     :max="40"
     :default-split="17"

package/src/app/components/story/StoryView.vue

@@ -111,6 +111,7 @@ function scrollDocsToTop() {
     <BaseSplitPane
       v-else
       :save-id="`story-main-${placement}`"
+      label="Resize the preview"
       :orientation="splitOrientation"
       :min="30"
       :max="95"

package/src/app/components/toolbar/DevOnlyToolbarOpenInEditor.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue'
+import { HstTooltip } from '@poveste/controls'
 import { openInEditor } from '../../util/open-in-editor.js'
 import TopBarChipItem from '../app/TopBarChipItem.vue'
 
@@ -10,16 +11,17 @@ defineProps<{
 </script>
 
 <template>
-  <TopBarChipItem
-    v-tooltip="tooltip"
-    aria-label="Open story in editor"
-    target="_blank"
-    class="poveste-toolbar-open-in-editor"
-    @click="openInEditor(file)"
-  >
-    <Icon
-      icon="carbon:script-reference"
-      class="w-4 h-4"
-    />
-  </TopBarChipItem>
+  <HstTooltip :content="tooltip">
+    <TopBarChipItem
+      aria-label="Open story in editor"
+      target="_blank"
+      class="poveste-toolbar-open-in-editor"
+      @click="openInEditor(file)"
+    >
+      <Icon
+        icon="carbon:script-reference"
+        class="w-4 h-4"
+      />
+    </TopBarChipItem>
+  </HstTooltip>
 </template>

package/src/app/components/toolbar/ToolbarBackground.vue

@@ -4,6 +4,7 @@ import { Icon } from '@iconify/vue'
 import { usePreviewSettingsStore } from '../../stores/preview-settings'
 import { povesteConfig } from '../../util/config'
 import BaseCheckbox from '../base/BaseCheckbox.vue'
+import BaseDropdown from '../base/BaseDropdown.vue'
 
 const previewSettings = usePreviewSettingsStore()
 const settings = previewSettings.currentSettings
@@ -21,32 +22,30 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
 </script>
 
 <template>
-  <VDropdown
+  <BaseDropdown
     v-if="showDropdown"
-    placement="bottom-end"
-    :skidding="6"
+    side="bottom"
+    align="end"
+    :align-offset="6"
+    tooltip="Preview appearance"
     class="poveste-toolbar-background flex-none"
     data-testid="toolbar-background"
   >
-    <!-- The tooltip would sit on top of the first row of the dropdown, so drop
-    it while the dropdown is open. -->
-    <template #default="{ shown }">
-      <div
-        v-tooltip="shown ? '' : 'Preview appearance'"
-        class="flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group"
-      >
-        <Icon
-          icon="carbon:color-palette"
-          class="w-4 h-4"
-        />
-        <Icon
-          icon="carbon:chevron-down"
-          class="w-3 h-3 opacity-40 group-hover:opacity-70"
-        />
-      </div>
-    </template>
+    <button
+      class="flex items-center gap-1 px-2.5 py-1.5 hover:bg-white/50 dark:hover:bg-white/10 hover:text-primary-500 dark:hover:text-primary-400 cursor-pointer text-gray-900 dark:text-gray-100 transition-colors group"
+      aria-label="Preview appearance"
+    >
+      <Icon
+        icon="carbon:color-palette"
+        class="w-4 h-4"
+      />
+      <Icon
+        icon="carbon:chevron-down"
+        class="w-3 h-3 opacity-40 group-hover:opacity-70"
+      />
+    </button>
 
-    <template #popper="{ hide }">
+    <template #popper="{ close }">
       <div
         class="flex flex-col items-stretch"
         data-testid="background-popper"
@@ -89,7 +88,7 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
               ? 'bg-primary-500 hover:bg-primary-600 text-white dark:text-black'
               : 'bg-transparent hover:bg-primary-100 dark:hover:bg-primary-700',
           ]"
-          @click="previewSettings.setBackgroundColor(option.color);hide()"
+          @click="previewSettings.setBackgroundColor(option.color);close()"
         >
           <span class="mr-auto">{{ option.label }}</span>
           <template v-if="option.color !== '$checkerboard'">
@@ -107,5 +106,5 @@ const showDropdown = showColorScheme || !!povesteConfig.backgroundPresets?.lengt
         </button>
       </div>
     </template>
-  </VDropdown>
+  </BaseDropdown>
 </template>