diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
index 8367d2614f..2237b2e664 100644
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -28,7 +28,7 @@ jobs:
           remove-stale-when-updated: true
           only-issue-types: 'bug'
           stale-issue-label: 'stale'
-          close-issue-label: 'stale'
+          close-issue-label: 'stale-to-close'
           operations-per-run: 500
 
   stale-prs:
@@ -45,5 +45,5 @@ jobs:
           days-before-pr-close: 7
           remove-stale-when-updated: true
           stale-pr-label: 'stale'
-          close-pr-label: 'stale'
+          close-pr-label: 'stale-to-close'
           operations-per-run: 500
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index e90464ca5b..32fc2fb91d 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -258,7 +258,7 @@ useShortcuts({
       <ButtonBase
         type="button"
         variant="secondary"
-        class="hidden lg:inline-flex shrink-0 gap-2 px-2.5 me-3"
+        class="hidden lg:inline-flex shrink-0 gap-2 ps-2.5 pe-1.25 py-1.25! me-3"
         :aria-label="$t('shortcuts.command_palette')"
         :title="$t('shortcuts.command_palette_description', { ctrlKey: $t('shortcuts.ctrl_key') })"
         @click="openCommandPalette"
diff --git a/app/components/Noodle/Pride1/Logo.vue b/app/components/Noodle/Pride1/Logo.vue
index 88b4eb5296..68e635042c 100644
--- a/app/components/Noodle/Pride1/Logo.vue
+++ b/app/components/Noodle/Pride1/Logo.vue
@@ -5,7 +5,7 @@
     </template>
     <img
       width="400"
-      class="mb-6 w-80 sm:w-140 max-w-full"
+      class="mb-6 w-80 sm:w-140 max-w-full mx-auto"
       src="/extra/pride-1.svg"
       :alt="$t('alt_logo')"
     />
diff --git a/app/components/Package/SizeDecrease.vue b/app/components/Package/SizeDecrease.vue
index 7872286046..fa730b6cd5 100644
--- a/app/components/Package/SizeDecrease.vue
+++ b/app/components/Package/SizeDecrease.vue
@@ -7,8 +7,9 @@ const props = defineProps<{
 
 const bytesFormatter = useBytesFormatter()
 const numberFormatter = useNumberFormatter()
+const percentFormatter = useNumberFormatter({ style: 'percent' })
 
-const sizePercent = computed(() => Math.round(Math.abs(props.diff.sizeRatio) * 100))
+const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
 const sizeDecreaseAbs = computed(() => Math.abs(props.diff.sizeIncrease))
 const depDecreaseAbs = computed(() => Math.abs(props.diff.depDiff))
 </script>
@@ -33,7 +34,7 @@ const depDecreaseAbs = computed(() => Math.abs(props.diff.depDiff))
     <p class="text-sm m-0 mt-1">
       <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_decrease.size" scope="global">
         <template #percent
-          ><strong>{{ sizePercent }}%</strong></template
+          ><strong>{{ sizePercent }}</strong></template
         >
         <template #size
           ><strong>{{ bytesFormatter.format(sizeDecreaseAbs) }}</strong></template
diff --git a/app/components/Package/SizeIncrease.vue b/app/components/Package/SizeIncrease.vue
index 3f8dbeecd1..b35e4b48d7 100644
--- a/app/components/Package/SizeIncrease.vue
+++ b/app/components/Package/SizeIncrease.vue
@@ -7,8 +7,9 @@ const props = defineProps<{
 
 const bytesFormatter = useBytesFormatter()
 const numberFormatter = useNumberFormatter()
+const percentFormatter = useNumberFormatter({ style: 'percent' })
 
-const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
+const sizePercent = computed(() => percentFormatter.value.format(Math.abs(props.diff.sizeRatio)))
 </script>
 
 <template>
@@ -28,7 +29,7 @@ const sizePercent = computed(() => Math.round(props.diff.sizeRatio * 100))
     <p class="text-sm m-0 mt-1">
       <i18n-t v-if="diff.sizeThresholdExceeded" keypath="package.size_increase.size" scope="global">
         <template #percent
-          ><strong>{{ sizePercent }}%</strong></template
+          ><strong>{{ sizePercent }}</strong></template
         >
         <template #size
           ><strong>{{ bytesFormatter.format(diff.sizeIncrease) }}</strong></template
diff --git a/app/composables/useColors.ts b/app/composables/useColors.ts
index 7a5248627f..87bbb64c5d 100644
--- a/app/composables/useColors.ts
+++ b/app/composables/useColors.ts
@@ -1,5 +1,18 @@
-import { computed, shallowRef, type ComputedRef, type Ref, type ShallowRef, unref } from 'vue'
-import { useMutationObserver, useResizeObserver, useSupported } from '@vueuse/core'
+import {
+  computed,
+  shallowRef,
+  type ComputedRef,
+  type Ref,
+  type ShallowRef,
+  unref,
+  watch,
+} from 'vue'
+import {
+  useMutationObserver,
+  useResizeObserver,
+  useSupported,
+  usePreferredDark,
+} from '@vueuse/core'
 
 type CssVariableSource = HTMLElement | null | undefined | Ref<HTMLElement | null | undefined>
 
@@ -36,6 +49,8 @@ export function useColors(
   options: { watchHtmlAttributes?: boolean; watchResize?: boolean } = {},
 ): { colors: ComputedRef<Record<string, string>> } {
   const recomputeToken = shallowRef(0)
+  const isPreferredDark = usePreferredDark()
+
   const invalidateColors = () => {
     recomputeToken.value += 1
   }
@@ -44,6 +59,8 @@ export function useColors(
     () => typeof window !== 'undefined' && typeof document !== 'undefined',
   )
 
+  watch(isPreferredDark, invalidateColors)
+
   const colors = computed<Record<string, string>>(() => {
     void recomputeToken.value
     const resolvedElement = resolveElement(element)
diff --git a/app/pages/package-timeline/[[org]]/[packageName].vue b/app/pages/package-timeline/[[org]]/[packageName].vue
index cb905b7498..09277d3407 100644
--- a/app/pages/package-timeline/[[org]]/[packageName].vue
+++ b/app/pages/package-timeline/[[org]]/[packageName].vue
@@ -347,7 +347,7 @@ useSeoMeta({
       page="timeline"
     />
 
-    <div class="sticky top-24 z-1 bg-bg mt-8">
+    <div class="[@media(min-height:1024px)]:sticky top-24 z-1 bg-bg mt-8">
       <div class="container w-full">
         <div class="mx-auto">
           <PackageTimelineChart
diff --git a/app/pages/package/[[org]]/[name]/versions.vue b/app/pages/package/[[org]]/[name]/versions.vue
index 37d01135f8..afd1d7e7cd 100644
--- a/app/pages/package/[[org]]/[name]/versions.vue
+++ b/app/pages/package/[[org]]/[name]/versions.vue
@@ -269,7 +269,7 @@ const flatItems = computed<FlatItem[]>(() => {
   <main class="flex-1 flex flex-col">
     <!-- Header -->
     <header class="border-b border-border bg-bg sticky top-14 z-20">
-      <div class="container py-3 flex items-center justify-between gap-4">
+      <div class="container py-3 flex items-center justify-between gap-2 sm:gap-4">
         <div class="flex items-center gap-2 min-w-0">
           <NuxtLink
             :to="packageRoute(packageName)"
@@ -283,40 +283,6 @@ const flatItems = computed<FlatItem[]>(() => {
           <span class="text-fg-subtle shrink-0">/</span>
           <h1 class="text-sm text-fg-muted shrink-0">{{ $t('package.versions.page_title') }}</h1>
         </div>
-        <div class="relative">
-          <InputBase
-            v-model="versionFilterInput"
-            type="text"
-            :placeholder="$t('package.versions.filter_placeholder')"
-            :aria-label="$t('package.versions.filter_placeholder')"
-            :aria-invalid="isInvalidRange ? 'true' : undefined"
-            :aria-describedby="isInvalidRange ? 'version-filter-error' : undefined"
-            autocomplete="off"
-            size="sm"
-            class="w-36 sm:w-64"
-            :class="isInvalidRange ? 'pe-7 !border-red-500' : ''"
-          />
-          <Transition
-            enter-active-class="transition-all duration-150"
-            enter-from-class="opacity-0 scale-60"
-            leave-active-class="transition-all duration-150"
-            leave-to-class="opacity-0 scale-60"
-          >
-            <TooltipApp
-              v-if="isInvalidRange"
-              :text="$t('package.versions.filter_invalid')"
-              position="bottom"
-              class="absolute end-0 inset-y-0 flex items-center pe-2"
-            >
-              <span
-                id="version-filter-error"
-                class="i-lucide:circle-alert w-3.5 h-3.5 text-red-500 block"
-                role="img"
-                :aria-label="$t('package.versions.filter_invalid')"
-              />
-            </TooltipApp>
-          </Transition>
-        </div>
       </div>
     </header>
 
@@ -324,32 +290,36 @@ const flatItems = computed<FlatItem[]>(() => {
     <div class="container w-full py-8 space-y-8">
       <!-- ── Current Tags ───────────────────────────────────────────────────── -->
       <section class="space-y-3">
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider px-4 sm:px-6 ps-1">
+        <h2 class="text-sm text-fg-subtle uppercase">
           {{ $t('package.versions.current_tags') }}
         </h2>
 
         <!-- Latest — featured card -->
         <div
           v-if="latestTagRow"
-          class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-4 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
+          class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-4 py-4 relative flex max-sm:flex-col sm:items-center justify-between gap-2 sm:gap-4 hover:bg-accent/8 transition-colors"
         >
           <!-- Left: tags + version + deprecated -->
           <div>
             <div class="flex items-center gap-2 mb-1.5 flex-wrap">
-              <span class="text-3xs font-bold uppercase tracking-widest text-accent">latest</span>
+              <span class="text-xs font-bold uppercase tracking-wider text-accent">latest</span>
               <span
                 v-for="tag in latestTagRow!.tags.filter(t => t !== 'latest')"
                 :key="tag"
-                class="text-3xs font-semibold uppercase tracking-wide text-fg-subtle"
+                class="text-xs font-semibold uppercase tracking-wider text-fg-subtle"
                 :title="tag"
                 >{{ tag }}</span
               >
               <span
                 v-if="fullVersionMap?.get(latestTagRow!.version)?.deprecated"
-                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
                 :title="fullVersionMap!.get(latestTagRow!.version)!.deprecated"
-                >deprecated</span
               >
+                <span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
+                <span class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                  >deprecated</span
+                >
+              </span>
             </div>
             <div class="flex items-center gap-2">
               <LinkBase
@@ -370,10 +340,10 @@ const flatItems = computed<FlatItem[]>(() => {
             </div>
           </div>
           <!-- Right: downloads + date -->
-          <div class="flex items-center gap-4 shrink-0 relative z-10">
+          <div class="flex sm:items-center gap-2 sm:gap-4 shrink-0 relative z-10">
             <span
               v-if="getVersionDownloads(latestTagRow!.version)"
-              class="w-28 grid grid-flow-col auto-cols-max items-center gap-1 text-xs text-fg-muted tabular-nums justify-end"
+              class="max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center gap-1 text-xs text-fg-muted tabular-nums sm:justify-end"
               :aria-label="
                 getDownloadsAriaLabel(
                   getVersionDownloads(latestTagRow!.version)!,
@@ -394,7 +364,7 @@ const flatItems = computed<FlatItem[]>(() => {
             <DateTime
               v-if="getVersionTime(latestTagRow!.version)"
               :datetime="getVersionTime(latestTagRow!.version)!"
-              class="text-xs text-fg-subtle whitespace-nowrap w-24 text-end"
+              class="text-xs text-fg-subtle whitespace-nowrap w-24 sm:text-end"
               year="numeric"
               month="short"
               day="numeric"
@@ -410,24 +380,24 @@ const flatItems = computed<FlatItem[]>(() => {
           <div
             v-for="row in otherTagRows"
             :key="row.id"
-            class="flex items-center gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
+            class="flex items-center gap-2 sm:gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
           >
             <!-- Tag labels -->
-            <div class="w-28 shrink-0 flex flex-wrap gap-x-1.5 gap-y-0.5">
+            <div class="max-w-[max(32px,32vw)] md:w-32 shrink-0 flex flex-wrap gap-x-1.5 gap-y-0.5">
               <span
                 v-for="tag in row.tags"
                 :key="tag"
-                class="text-3xs font-semibold uppercase tracking-wide text-fg-subtle"
+                class="text-xs font-semibold uppercase tracking-wider text-fg-subtle"
                 :title="tag"
                 >{{ tag }}</span
               >
             </div>
 
             <!-- Version + Provenance + Deprecated -->
-            <div class="flex-1 min-w-0 flex items-center gap-2">
+            <div class="flex-1 flex items-center gap-2">
               <LinkBase
                 :to="packageRoute(packageName, row.version)"
-                class="text-sm after:absolute after:inset-0 after:content-['']"
+                class="block! min-w-16 max-sm:max-w-40 text-sm after:absolute after:inset-0 after:content-[''] truncate"
                 :title="row.version"
                 dir="ltr"
               >
@@ -443,16 +413,20 @@ const flatItems = computed<FlatItem[]>(() => {
               />
               <span
                 v-if="fullVersionMap?.get(row.version)?.deprecated"
-                class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
                 :title="fullVersionMap!.get(row.version)!.deprecated"
-                >deprecated</span
               >
+                <span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
+                <span class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                  >deprecated</span
+                >
+              </span>
             </div>
 
             <!-- Downloads -->
             <span
               v-if="getVersionDownloads(row.version)"
-              class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
+              class="max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
               :aria-label="getDownloadsAriaLabel(getVersionDownloads(row.version)!, row.version)"
               dir="ltr"
               :title="getDownloadsAriaLabel(getVersionDownloads(row.version)!, row.version)"
@@ -460,7 +434,7 @@ const flatItems = computed<FlatItem[]>(() => {
               <span>{{ numberFormatter.format(getVersionDownloads(row.version)!) }}</span>
               <span class="i-lucide:chart-line" aria-hidden="true"></span>
             </span>
-            <span v-else class="w-28 shrink-0" />
+            <span v-else class="max-w-32 md:w-32 shrink-0" />
 
             <!-- Date -->
             <div class="flex items-center gap-2 shrink-0 relative z-10">
@@ -479,12 +453,47 @@ const flatItems = computed<FlatItem[]>(() => {
 
       <!-- ── Version History ───────────────────────────────────────────────── -->
       <section v-if="versionGroups.length > 0">
-        <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3 px-4 sm:px-6 ps-1">
-          {{ $t('package.versions.page_title') }}
-          <span class="ms-1 normal-case font-normal tracking-normal">
-            ({{ versionStrings.length }})
-          </span>
-        </h2>
+        <div class="flex max-sm:flex-col sm:items-center justify-between gap-2 mb-3">
+          <h2 class="text-sm text-fg-subtle uppercase">
+            {{ $t('package.versions.page_title') }}
+            <span class="ms-1 normal-case font-normal"> ({{ versionStrings.length }}) </span>
+          </h2>
+
+          <div class="relative">
+            <InputBase
+              v-model="versionFilterInput"
+              type="text"
+              :placeholder="$t('package.versions.filter_placeholder')"
+              :aria-label="$t('package.versions.filter_placeholder')"
+              :aria-invalid="isInvalidRange ? 'true' : undefined"
+              :aria-describedby="isInvalidRange ? 'version-filter-error' : undefined"
+              autocomplete="off"
+              size="sm"
+              class="w-36 sm:w-64 max-sm:w-full"
+              :class="isInvalidRange ? 'pe-7 !border-red-500' : ''"
+            />
+            <Transition
+              enter-active-class="transition-all duration-150"
+              enter-from-class="opacity-0 scale-60"
+              leave-active-class="transition-all duration-150"
+              leave-to-class="opacity-0 scale-60"
+            >
+              <TooltipApp
+                v-if="isInvalidRange"
+                :text="$t('package.versions.filter_invalid')"
+                position="bottom"
+                class="absolute end-0 inset-y-0 flex items-center pe-2"
+              >
+                <span
+                  id="version-filter-error"
+                  class="i-lucide:circle-alert w-3.5 h-3.5 text-red-500 block"
+                  role="img"
+                  :aria-label="$t('package.versions.filter_invalid')"
+                />
+              </TooltipApp>
+            </Transition>
+          </div>
+        </div>
 
         <!-- No filter matches -->
         <div
@@ -533,16 +542,21 @@ const flatItems = computed<FlatItem[]>(() => {
                     <span class="text-sm font-medium">{{ item.label }}</span>
                     <span
                       v-if="deprecatedGroupKeys.has(item.groupKey)"
-                      class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
-                      >deprecated</span
+                      class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
                     >
+                      <span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
+                      <span
+                        class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                        >deprecated</span
+                      >
+                    </span>
                     <span class="text-xs text-fg-subtle">({{ item.versions.length }})</span>
-                    <span class="text-xs text-fg-muted" :title="item.versions[0]" dir="ltr"
+                    <span class="text-xs text-fg-muted truncate" :title="item.versions[0]" dir="ltr"
                       >v{{ item.versions[0] }}</span
                     >
                     <span
                       v-if="groupDownloadsMap.has(item.groupKey)"
-                      class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
+                      class="ms-auto max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
                       :aria-label="
                         getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
                       "
@@ -556,7 +570,7 @@ const flatItems = computed<FlatItem[]>(() => {
                       }}</span>
                       <span class="i-lucide:chart-line" aria-hidden="true"></span>
                     </span>
-                    <span v-else class="ms-auto w-28 shrink-0" />
+                    <span v-else class="ms-auto max-w-32 md:w-32 shrink-0" />
                     <span class="flex items-center gap-3 shrink-0">
                       <DateTime
                         v-if="getVersionTime(item.versions[0]!)"
@@ -618,7 +632,7 @@ const flatItems = computed<FlatItem[]>(() => {
                           <span
                             v-for="tag in versionToTagsMap.get(item.version)"
                             :key="tag"
-                            class="text-4xs font-semibold uppercase tracking-wide"
+                            class="text-2xs font-semibold uppercase tracking-wide"
                             :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                             :title="tag"
                           >
@@ -627,17 +641,21 @@ const flatItems = computed<FlatItem[]>(() => {
                         </div>
                         <span
                           v-if="fullVersionMap?.get(item.version)?.deprecated"
-                          class="text-3xs font-medium text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded relative z-10"
+                          class="text-xs font-medium text-red-700 dark:text-red-400 relative z-10"
                           :title="fullVersionMap.get(item.version)!.deprecated"
                         >
-                          deprecated
+                          <span class="sm:hidden i-lucide:octagon-alert" aria-hidden="true"></span>
+                          <span
+                            class="max-sm:sr-only bg-red-100 dark:bg-red-900/30 px-1.5 py-0.5 rounded"
+                            >deprecated</span
+                          >
                         </span>
                       </div>
 
                       <!-- Downloads -->
                       <span
                         v-if="getVersionDownloads(item.version)"
-                        class="w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
+                        class="max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0 relative z-10"
                         :aria-label="
                           getDownloadsAriaLabel(getVersionDownloads(item.version)!, item.version)
                         "
@@ -651,7 +669,7 @@ const flatItems = computed<FlatItem[]>(() => {
                         }}</span>
                         <span class="i-lucide:chart-line" aria-hidden="true"></span>
                       </span>
-                      <span v-else class="w-28 shrink-0" />
+                      <span v-else class="max-w-32 md:w-32 shrink-0" />
 
                       <!-- Date -->
                       <div class="flex items-center gap-2 shrink-0 relative z-10">
@@ -690,7 +708,7 @@ const flatItems = computed<FlatItem[]>(() => {
                   >
                   <span
                     v-if="groupDownloadsMap.has(item.groupKey)"
-                    class="ms-auto w-28 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
+                    class="ms-auto max-w-32 md:w-32 grid grid-flow-col auto-cols-max items-center justify-end gap-1 text-xs text-fg-muted tabular-nums shrink-0"
                     :aria-label="
                       getDownloadsAriaLabel(groupDownloadsMap.get(item.groupKey)!, item.label)
                     "
@@ -702,7 +720,7 @@ const flatItems = computed<FlatItem[]>(() => {
                     <span>{{ numberFormatter.format(groupDownloadsMap.get(item.groupKey)!) }}</span>
                     <span class="i-lucide:chart-line" aria-hidden="true"></span>
                   </span>
-                  <span v-else class="ms-auto w-28 shrink-0" />
+                  <span v-else class="ms-auto max-w-32 md:w-32 shrink-0" />
                   <span class="flex items-center gap-3 shrink-0">
                     <DateTime
                       v-if="getVersionTime(item.versions[0] ?? '')"
diff --git a/package.json b/package.json
index 8216391118..21e41ec52c 100644
--- a/package.json
+++ b/package.json
@@ -90,7 +90,7 @@
     "gray-matter": "4.0.3",
     "ipaddr.js": "2.3.0",
     "marked": "18.0.0",
-    "module-replacements": "3.0.0-beta.7",
+    "module-replacements": "3.0.0-beta.8",
     "nuxt": "4.4.5",
     "nuxt-og-image": "^6.4.3",
     "ofetch": "1.5.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e926aaa14..1d666694a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -190,8 +190,8 @@ importers:
         specifier: 18.0.0
         version: 18.0.0
       module-replacements:
-        specifier: 3.0.0-beta.7
-        version: 3.0.0-beta.7
+        specifier: 3.0.0-beta.8
+        version: 3.0.0-beta.8
       nuxt:
         specifier: 4.4.5
         version: 4.4.5(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6)(@parcel/watcher@2.5.6)(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vue/compiler-sfc@3.5.34)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4)(esbuild@0.27.3)(eslint@9.39.2)(ioredis@5.10.1)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.61.0)(rolldown@1.0.0-rc.16)(rollup-plugin-visualizer@7.0.1)(rollup@4.60.3)(terser@5.46.0)(typescript@6.0.2)(vite@8.0.0)(vue-tsc@3.2.6)(yaml@2.9.0)
@@ -415,7 +415,7 @@ importers:
         version: 12.8.0
       docus:
         specifier: 5.9.0
-        version: 5.9.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@nuxt/schema@4.4.5)(@takumi-rs/wasm@1.0.9)(@tiptap/extensions@3.24.0)(@tiptap/y-tiptap@3.0.2)(@unhead/vue@2.1.13)(@upstash/redis@1.37.0)(@vue/compiler-dom@3.5.34)(better-sqlite3@12.8.0)(db0@0.3.4)(embla-carousel@8.6.0)(eslint@9.39.2)(focus-trap@8.0.0)(fontless@0.2.1)(h3@2.0.1-rc.20)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.5)(playwright-core@1.60.0)(react-dom@19.2.4)(react@19.2.4)(rollup@4.60.3)(sharp@0.34.5)(typescript@6.0.2)(unifont@0.7.4)(unstorage@1.17.5)(valibot@1.3.1)(vite@8.0.0)(vue-router@5.0.4)(vue@3.5.34)(yjs@13.6.29)
+        version: 5.9.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@nuxt/schema@4.4.5)(@takumi-rs/wasm@1.0.9)(@tiptap/extensions@3.24.0)(@tiptap/y-tiptap@3.0.2)(@unhead/vue@2.1.13)(@upstash/redis@1.37.0)(@vue/compiler-dom@3.5.34)(better-sqlite3@12.8.0)(db0@0.3.4)(embla-carousel@8.6.0)(eslint@9.39.2)(focus-trap@8.0.0)(fontless@0.2.1)(h3@1.15.11)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.5)(playwright-core@1.60.0)(react-dom@19.2.4)(react@19.2.4)(rollup@4.60.3)(sharp@0.34.5)(typescript@6.0.2)(unifont@0.7.4)(unstorage@1.17.5)(valibot@1.3.1)(vite@8.0.0)(vue-router@5.0.4)(vue@3.5.34)(yjs@13.6.29)
       nuxt:
         specifier: 4.4.5
         version: 4.4.5(@babel/core@7.29.0)(@babel/plugin-syntax-jsx@7.28.6)(@parcel/watcher@2.5.6)(@types/node@24.12.0)(@upstash/redis@1.37.0)(@vue/compiler-sfc@3.5.34)(better-sqlite3@12.8.0)(cac@6.7.14)(db0@0.3.4)(esbuild@0.27.3)(eslint@9.39.2)(ioredis@5.10.1)(magicast@0.5.2)(optionator@0.9.4)(oxlint@1.61.0)(rolldown@1.0.0-rc.16)(rollup-plugin-visualizer@7.0.1)(rollup@4.60.3)(terser@5.46.0)(typescript@6.0.2)(vite@8.0.0)(vue-tsc@3.2.6)(yaml@2.9.0)
@@ -2269,7 +2269,7 @@ packages:
     resolution: {integrity: sha512-GaHYm+c0O9MjZRu0ongGBRbinu8gVAMd2UZjji6jVmqKtZluZnptXGWhz1E8j8D2HJ3f/yMxKAUC0b+57wncIw==}
 
   '@lunariajs/core@https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935':
-    resolution: {tarball: https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935}
+    resolution: {integrity: sha512-N0PDFIitA/Vzh5V6BtTacWU9jgSDJJtPLHamRLMU85mohmyuVW/pggHX8dzdV5ieqZeHEz8pDZSzH4I0hOYxOg==, tarball: https://pkg.pr.new/lunariajs/lunaria/@lunariajs/core@904b935}
     version: 0.1.1
     engines: {node: '>=18.17.0'}
 
@@ -4941,7 +4941,7 @@ packages:
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
   '@storybook-vue/nuxt@https://pkg.pr.new/@storybook-vue/nuxt@1021':
-    resolution: {tarball: https://pkg.pr.new/@storybook-vue/nuxt@1021}
+    resolution: {integrity: sha512-OmpGHtbapfpljOkFY8/g+9EkNa+SPcVAcqOiOPyP6upXMSpwNHHfEXFMBiFWqF7xru82zHg2kkfmWArVpVG7tg==, tarball: https://pkg.pr.new/@storybook-vue/nuxt@1021}
     version: 9.0.1
     engines: {node: '>=20.19.0'}
     peerDependencies:
@@ -8845,6 +8845,9 @@ packages:
   module-replacements@3.0.0-beta.7:
     resolution: {integrity: sha512-n1F9l3gF1wNh13xmnXS2JU7P9c3DlzCgVEyLKrVN0U37RwrXyYoePMMvYvs/6aUONAxbnscphzESZTCorXFh7Q==}
 
+  module-replacements@3.0.0-beta.8:
+    resolution: {integrity: sha512-sc8TepP9elxoOBXEpxmhPzKKjTjbswHVcmsKGbgvm3k6jZlLu/WMV/Lfmga6IGMgHU/V3WtY2s6VEgM4nTElUQ==}
+
   motion-dom@12.40.0:
     resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==}
 
@@ -14511,11 +14514,11 @@ snapshots:
       - uploadthing
       - vue
 
-  '@nuxtjs/mcp-toolkit@0.13.4(h3@2.0.1-rc.20)(magicast@0.5.2)(zod@4.3.6)':
+  '@nuxtjs/mcp-toolkit@0.13.4(h3@1.15.11)(magicast@0.5.2)(zod@4.3.6)':
     dependencies:
       '@modelcontextprotocol/sdk': 1.29.0(zod@4.3.6)
       '@nuxt/kit': 4.4.6(magicast@0.5.2)
-      h3: 2.0.1-rc.20
+      h3: 1.15.11
       tinyglobby: 0.2.16
       zod: 4.3.6
     transitivePeerDependencies:
@@ -18198,7 +18201,7 @@ snapshots:
 
   doctypes@1.1.0: {}
 
-  docus@5.9.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@nuxt/schema@4.4.5)(@takumi-rs/wasm@1.0.9)(@tiptap/extensions@3.24.0)(@tiptap/y-tiptap@3.0.2)(@unhead/vue@2.1.13)(@upstash/redis@1.37.0)(@vue/compiler-dom@3.5.34)(better-sqlite3@12.8.0)(db0@0.3.4)(embla-carousel@8.6.0)(eslint@9.39.2)(focus-trap@8.0.0)(fontless@0.2.1)(h3@2.0.1-rc.20)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.5)(playwright-core@1.60.0)(react-dom@19.2.4)(react@19.2.4)(rollup@4.60.3)(sharp@0.34.5)(typescript@6.0.2)(unifont@0.7.4)(unstorage@1.17.5)(valibot@1.3.1)(vite@8.0.0)(vue-router@5.0.4)(vue@3.5.34)(yjs@13.6.29):
+  docus@5.9.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@nuxt/schema@4.4.5)(@takumi-rs/wasm@1.0.9)(@tiptap/extensions@3.24.0)(@tiptap/y-tiptap@3.0.2)(@unhead/vue@2.1.13)(@upstash/redis@1.37.0)(@vue/compiler-dom@3.5.34)(better-sqlite3@12.8.0)(db0@0.3.4)(embla-carousel@8.6.0)(eslint@9.39.2)(focus-trap@8.0.0)(fontless@0.2.1)(h3@1.15.11)(ioredis@5.10.1)(magicast@0.5.2)(nuxt@4.4.5)(playwright-core@1.60.0)(react-dom@19.2.4)(react@19.2.4)(rollup@4.60.3)(sharp@0.34.5)(typescript@6.0.2)(unifont@0.7.4)(unstorage@1.17.5)(valibot@1.3.1)(vite@8.0.0)(vue-router@5.0.4)(vue@3.5.34)(yjs@13.6.29):
     dependencies:
       '@ai-sdk/gateway': 3.0.101(zod@4.3.6)
       '@ai-sdk/mcp': 1.0.36(zod@4.3.6)
@@ -18211,7 +18214,7 @@ snapshots:
       '@nuxt/kit': 4.4.6(magicast@0.5.2)
       '@nuxt/ui': 4.6.1(@nuxt/content@3.12.0)(@tiptap/extensions@3.24.0)(@tiptap/y-tiptap@3.0.2)(@upstash/redis@1.37.0)(db0@0.3.4)(embla-carousel@8.6.0)(focus-trap@8.0.0)(ioredis@5.10.1)(magicast@0.5.2)(react-dom@19.2.4)(react@19.2.4)(tailwindcss@4.2.2)(typescript@6.0.2)(valibot@1.3.1)(vite@8.0.0)(vue-router@5.0.4)(vue@3.5.34)(yjs@13.6.29)(zod@4.3.6)
       '@nuxtjs/i18n': 10.2.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(@upstash/redis@1.37.0)(@vue/compiler-dom@3.5.34)(db0@0.3.4)(eslint@9.39.2)(ioredis@5.10.1)(magicast@0.5.2)(rollup@4.60.3)(typescript@6.0.2)(vue@3.5.34)
-      '@nuxtjs/mcp-toolkit': 0.13.4(h3@2.0.1-rc.20)(magicast@0.5.2)(zod@4.3.6)
+      '@nuxtjs/mcp-toolkit': 0.13.4(h3@1.15.11)(magicast@0.5.2)(zod@4.3.6)
       '@nuxtjs/mdc': 0.21.1(magicast@0.5.2)
       '@nuxtjs/robots': 6.0.9(@nuxt/schema@4.4.5)(magicast@0.5.2)(nuxt@4.4.5)(vite@8.0.0)(vue@3.5.34)(zod@4.3.6)
       '@shikijs/core': 4.1.0
@@ -20531,6 +20534,8 @@ snapshots:
 
   module-replacements@3.0.0-beta.7: {}
 
+  module-replacements@3.0.0-beta.8: {}
+
   motion-dom@12.40.0:
     dependencies:
       motion-utils: 12.39.0
diff --git a/server/utils/docs/render.ts b/server/utils/docs/render.ts
index eb3393b173..a70f856551 100644
--- a/server/utils/docs/render.ts
+++ b/server/utils/docs/render.ts
@@ -191,9 +191,9 @@ async function renderJsDocTags(tags: JsDocTag[], symbolLookup: SymbolLookup): Pr
     : null
   const examplePromises = examples.map(async example => {
     if (!example.doc) return ''
-    const langMatch = example.doc.match(/```(\w+)?/)
+    const langMatch = example.doc.match(/```[ \t]*([-\w]+)?/)
     const lang = langMatch?.[1] || 'typescript'
-    const code = example.doc.replace(/```\w*\n?/g, '').trim()
+    const code = example.doc.replace(/```[ \t]*[-\w]*[ \t]*(?:\r\n|\r|\n)?/g, '').trim()
     return highlightCodeBlock(code, lang)
   })
 
diff --git a/test/unit/app/composables/use-colors.spec.ts b/test/unit/app/composables/use-colors.spec.ts
index 6d8369a6c1..4ad3594446 100644
--- a/test/unit/app/composables/use-colors.spec.ts
+++ b/test/unit/app/composables/use-colors.spec.ts
@@ -1,12 +1,18 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { computed, shallowRef } from 'vue'
+import { computed, nextTick, shallowRef, ref, type Ref } from 'vue'
 import { useColors } from '~/composables/useColors'
 
 const useSupportedMock = vi.hoisted(() => vi.fn())
 const useMutationObserverMock = vi.hoisted(() => vi.fn())
 const useResizeObserverMock = vi.hoisted(() => vi.fn())
 
+const vueUseMockState = vi.hoisted(() => ({
+  preferredDark: undefined as unknown as Ref<boolean>,
+}))
+
 vi.mock('@vueuse/core', () => {
+  vueUseMockState.preferredDark = ref(false)
+
   return {
     useSupported: (callback: () => boolean) => {
       useSupportedMock(callback)
@@ -14,12 +20,14 @@ vi.mock('@vueuse/core', () => {
     },
     useMutationObserver: useMutationObserverMock,
     useResizeObserver: useResizeObserverMock,
+    usePreferredDark: () => vueUseMockState.preferredDark,
   }
 })
 
 describe('useColors', () => {
   beforeEach(() => {
     vi.clearAllMocks()
+    vueUseMockState.preferredDark.value = false
   })
 
   afterEach(() => {
@@ -57,4 +65,77 @@ describe('useColors', () => {
     const { colors } = useColors(elementReference)
     expect(colors.value).toEqual({})
   })
+
+  it('recomputes colors when preferred dark mode changes', async () => {
+    const styleValues = {
+      accent: '#FF0000',
+    }
+
+    vi.stubGlobal('window', {})
+    vi.stubGlobal('document', {
+      documentElement: {},
+    })
+
+    vi.stubGlobal('getComputedStyle', () => ({
+      getPropertyValue: (variableName: string) => {
+        if (variableName === '--accent') {
+          return styleValues.accent
+        }
+
+        return ''
+      },
+    }))
+
+    const elementReference = shallowRef<HTMLElement | null>({} as HTMLElement)
+    const { colors } = useColors(elementReference)
+    expect(colors.value.accent).toBe('#FF0000')
+    styleValues.accent = '#00FF00'
+    vueUseMockState.preferredDark.value = true
+    await nextTick()
+
+    expect(colors.value.accent).toBe('#00FF00')
+  })
+
+  it('attaches an html mutation observer when enabled', () => {
+    vi.stubGlobal('window', {})
+    vi.stubGlobal('document', {
+      documentElement: {},
+    })
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    useColors(elementReference, {
+      watchHtmlAttributes: true,
+    })
+    expect(useMutationObserverMock).toHaveBeenCalledTimes(1)
+    expect(useMutationObserverMock).toHaveBeenCalledWith(
+      document.documentElement,
+      expect.any(Function),
+      {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'data-theme', 'data-bg-theme'],
+      },
+    )
+  })
+
+  it('falls back to document element when no element is provided', () => {
+    vi.stubGlobal('window', {})
+    vi.stubGlobal('document', {
+      documentElement: {},
+    })
+    vi.stubGlobal('getComputedStyle', (element: HTMLElement) => {
+      expect(element).toBe(document.documentElement)
+
+      return {
+        getPropertyValue: (variableName: string) => {
+          if (variableName === '--accent') {
+            return 'red'
+          }
+
+          return ''
+        },
+      }
+    })
+    const elementReference = shallowRef<HTMLElement | null>(null)
+    const { colors } = useColors(elementReference)
+    expect(colors.value.accent).toBe('red')
+  })
 })
diff --git a/test/unit/server/utils/docs/render.spec.ts b/test/unit/server/utils/docs/render.spec.ts
index 1d7d5286ef..2d595425a7 100644
--- a/test/unit/server/utils/docs/render.spec.ts
+++ b/test/unit/server/utils/docs/render.spec.ts
@@ -21,10 +21,11 @@ function createClassSymbol(classDef: DenoDocNode['classDef']): MergedSymbol {
   }
 }
 
-function createFunctionSymbol(name: string): MergedSymbol {
+function createFunctionSymbol(name: string, jsDoc?: DenoDocNode['jsDoc']): MergedSymbol {
   const node: DenoDocNode = {
     name,
     kind: 'function',
+    jsDoc,
     functionDef: {
       params: [],
       returnType: { repr: 'void', kind: 'keyword', keyword: 'void' },
@@ -34,6 +35,7 @@ function createFunctionSymbol(name: string): MergedSymbol {
   return {
     name,
     kind: 'function',
+    jsDoc,
     nodes: [node],
   }
 }
@@ -192,3 +194,25 @@ describe('renderDocNodes ordering', () => {
     expect(alphaIndex).toBeLessThan(betaIndex)
   })
 })
+
+describe('renderDocNodes examples', () => {
+  it('handles hyphenated fenced code languages in @example tags', async () => {
+    const symbol = createFunctionSymbol('renderTemplate', {
+      tags: [
+        {
+          kind: 'example',
+          doc: '```glimmer-ts\nconst greeting = <template>Hello</template>\n```',
+        },
+      ],
+    })
+
+    const html = await renderDocNodes([symbol], new Map())
+
+    expect(html).toContain('<h4>Example</h4>')
+    expect(html).toContain('shiki')
+    expect(html).toContain('greeting')
+    expect(html).not.toMatch(/(^|[>\s])-ts([<\s]|$)/)
+    expect(html).not.toContain('-ts')
+    expect(html).not.toContain('```')
+  })
+})