vitepress 2.0.0-alpha.20 → 2.0.0-alpha.21

package/dist/client/theme-default/components/VPLocalNavOutlineDropdown.vue

@@ -127,9 +127,9 @@ function scrollToTop() {
 .icon {
   display: inline-block;
   vertical-align: middle;
-  margin-left: 0.125rem;
+  margin-inline-start: 0.125rem;
   font-size: 0.875rem;
-  transform: rotate(0) /*rtl:rotate(180deg)*/;
+  transform: rotate(0);
   transition: transform 0.25s;
 }
 
@@ -144,15 +144,13 @@ function scrollToTop() {
 }
 
 .open > .icon {
-  /*rtl:ignore*/
   transform: rotate(90deg);
 }
 
 .items {
   position: absolute;
   top: 2.5rem;
-  right: 1rem;
-  left: 1rem;
+  inset-inline: 1rem;
   display: grid;
   gap: 1px;
   border: 1px solid var(--vp-c-border);
@@ -166,8 +164,7 @@ function scrollToTop() {
 
 @media (min-width: 60rem) {
   .items {
-    right: auto;
-    left: calc(var(--vp-sidebar-width) + 2rem);
+    inset-inline: calc(var(--vp-sidebar-width) + 2rem) auto;
     width: 20rem;
   }
 }

package/dist/client/theme-default/components/VPLocalSearchBox.vue

@@ -3,13 +3,14 @@ import localSearchIndex from "@localSearchIndex";
 import { computedAsync, watchDebounced, onKeyStroke, useEventListener, useLocalStorage, useSessionStorage } from "@vueuse/core";
 import { useFocusTrap } from "@vueuse/integrations/useFocusTrap";
 import Mark from "mark.js/src/vanilla.js";
-import MiniSearch from "minisearch";
+import "minisearch";
 import { dataSymbol, useRouter, withBase } from "vitepress";
 import { computed, createApp, markRaw, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef, watch, watchEffect } from "vue";
 import { pathToFile } from "../../app/utils";
 import { escapeRegExp } from "../../shared";
 import { useData } from "../composables/data";
 import { useBodyScrollLock } from "../composables/scroll-lock";
+import { loadLocalSearchIndex } from "../support/local-search";
 import { LRUCache } from "../support/lru";
 import { createSearchTranslate } from "../support/translation";
 const emit = defineEmits(["close"]);
@@ -41,25 +42,7 @@ const showSearchSpinner = computed(() => {
 const searchIndex = computedAsync(async () => {
 	const json = (await searchIndexData.value[localeIndex.value]?.())?.default;
 	if (!json) return null;
-	return markRaw(MiniSearch.loadJSON(json, {
-		fields: [
-			"title",
-			"titles",
-			"text"
-		],
-		storeFields: ["title", "titles"],
-		searchOptions: {
-			fuzzy: .2,
-			prefix: true,
-			boost: {
-				title: 4,
-				text: 2,
-				titles: 1
-			},
-			...theme.value.search?.provider === "local" && theme.value.search.options?.miniSearch?.searchOptions
-		},
-		...theme.value.search?.provider === "local" && theme.value.search.options?.miniSearch?.options
-	}));
+	return markRaw(loadLocalSearchIndex(json, theme.value.search?.provider === "local" ? theme.value.search.options?.miniSearch : undefined));
 }, undefined, isSearchIndexLoading);
 const disableQueryPersistence = computed(() => {
 	return theme.value.search?.provider === "local" && theme.value.search.options?.disableQueryPersistence === true;
@@ -451,11 +434,11 @@ function onMouseMove(e) {
                     :key="index"
                     class="title"
                   >
-                    <span class="text" v-html="t" />
+                    <span class="text" dir="auto" v-html="t" />
                     <span class="vpi-chevron-right local-search-icon" />
                   </span>
                   <span class="title main">
-                    <span class="text" v-html="p.title" />
+                    <span class="text" dir="auto" v-html="p.title" />
                   </span>
                 </div>
 
@@ -795,8 +778,7 @@ function onMouseMove(e) {
 .excerpt-gradient-bottom {
   position: absolute;
   bottom: -1px;
-  left: 0;
-  width: 100%;
+  inset-inline: 0;
   height: 0.5rem;
   background: linear-gradient(transparent, var(--vp-local-search-result-bg));
   z-index: 1000;
@@ -805,8 +787,7 @@ function onMouseMove(e) {
 .excerpt-gradient-top {
   position: absolute;
   top: -1px;
-  left: 0;
-  width: 100%;
+  inset-inline: 0;
   height: 0.5rem;
   background: linear-gradient(var(--vp-local-search-result-bg), transparent);
   z-index: 1000;

package/dist/client/theme-default/components/VPMenuGroup.vue

@@ -82,9 +82,10 @@ const hasSubGroups = computed(() => props.items.some((item) => !("link" in item)
 }
 
 .VPMenuGroup > .sub-groups {
-  margin: 0.25rem 0 0.25rem 0.75rem;
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 0.25rem;
+  margin-block: 0.25rem;
+  margin-inline: 0.75rem 0;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 0.25rem;
 }
 
 .VPMenuGroup .VPMenuGroup,

package/dist/client/theme-default/components/VPMenuLink.vue

@@ -36,7 +36,7 @@ defineOptions({ inheritAttrs: false });
       :no-icon="item.noIcon"
       @click="onClick"
     >
-      <span v-html="item.text"></span>
+      <span dir="auto" v-html="item.text"></span>
     </VPLink>
   </li>
 </template>
@@ -62,7 +62,7 @@ defineOptions({ inheritAttrs: false });
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  text-align: left;
+  text-align: start;
   white-space: nowrap;
   transition: background-color 0.25s, color 0.25s;
 }
@@ -84,7 +84,7 @@ defineOptions({ inheritAttrs: false });
 
 .VPNavScreen .link {
   display: block;
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
   border-radius: 0;
   padding: 0;
   font-weight: 400;

package/dist/client/theme-default/components/VPNav.vue

@@ -37,8 +37,7 @@ watchEffect(() => {
 .VPNav {
   position: relative;
   top: var(--vp-layout-top-height, 0px);
-  /*rtl:ignore*/
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;
   pointer-events: none;

package/dist/client/theme-default/components/VPNavAppearance.vue

@@ -60,7 +60,8 @@ const labelId = useId();
   justify-content: space-between;
   align-items: center;
   border-radius: 0.5rem;
-  padding: 0.75rem 0.875rem 0.75rem 1rem;
+  padding-block: 0.75rem;
+  padding-inline: 1rem 0.875rem;
   background-color: var(--vp-c-bg-soft);
 }
 

package/dist/client/theme-default/components/VPNavBar.vue

@@ -80,7 +80,7 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
   height: var(--vp-nav-height);
   pointer-events: none;
   white-space: nowrap;
-  /* left edge of the background surface and divider — on doc pages the
+  /* inline-start edge of the background surface and divider — on doc pages the
      sidebar column paints its own surface up to this offset */
   --vp-nav-col-offset: 0px;
 }
@@ -91,9 +91,8 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
   content: "";
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
-  left: var(--vp-nav-col-offset);
+  inset-inline: var(--vp-nav-col-offset) 0;
   z-index: -1;
   background-color: var(--vp-nav-bg-color);
   backdrop-filter: var(--vp-nav-backdrop-filter);
@@ -143,7 +142,8 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
 }
 
 .wrapper {
-  padding: 0 0.5rem 0 1.5rem;
+  padding-block: 0;
+  padding-inline: 1.5rem 0.5rem;
 }
 
 @media (min-width: 48rem) {
@@ -184,14 +184,10 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
 }
 
 @media (min-width: 60rem) {
-  /* outside home the title column matches the sidebar column, so search and
-     menu sit at the same spot on every doc page; on home the title keeps its
-     natural width and search sits right next to it */
-  .VPNavBar:not(.home) .title {
-    min-width: calc(var(--vp-sidebar-width) - 2rem);
-  }
-
+  /* reserve the sidebar column only when it is present; otherwise the title
+     keeps its natural width and search sits right next to it */
   .VPNavBar.has-sidebar .title {
+    min-width: calc(var(--vp-sidebar-width) - 2rem);
     max-width: calc(var(--vp-sidebar-width) - 2rem);
   }
 }
@@ -223,7 +219,7 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
      into the middle; with a menu present its flex-grow wins and this
      margin resolves to zero */
   .content-body > .search {
-    margin-right: auto;
+    margin-inline-end: auto;
   }
 }
 
@@ -233,15 +229,14 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
   visibility: hidden;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   max-width: 100%;
   overflow: hidden;
 }
 
 /* separators between whichever cluster units are currently in the bar */
 .content-body > :where(.menu, .translations, .appearance, .social-links) + :where(.translations, .appearance, .social-links)::before {
-  margin-right: 0.5rem;
-  margin-left: 0.5rem;
+  margin-inline: 0.5rem;
   width: 1px;
   height: 1.5rem;
   background-color: var(--vp-c-divider);
@@ -249,15 +244,15 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
 }
 
 .content-body > :where(.menu, .translations) + .appearance::before {
-  margin-right: 1rem;
+  margin-inline-end: 1rem;
 }
 
 .content-body > .appearance + .social-links::before {
-  margin-left: 1rem;
+  margin-inline-start: 1rem;
 }
 
 .social-links {
-  margin-right: -0.5rem;
+  margin-inline-end: -0.5rem;
 }
 
 .divider {
@@ -270,7 +265,7 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
   transform: translateZ(0);
   width: 100%;
   height: 1px;
-  padding-left: var(--vp-nav-col-offset);
+  padding-inline-start: var(--vp-nav-col-offset);
 }
 
 /* the sidebar-column segment of the bottom rule — inset from the column
@@ -279,7 +274,7 @@ const overflow = provideNavOverflow({ itemsKey: () => JSON.stringify(theme.value
   content: "";
   position: absolute;
   top: 0;
-  left: calc(var(--vp-nav-col-offset) - var(--vp-sidebar-width) + 2rem);
+  inset-inline-start: calc(var(--vp-nav-col-offset) - var(--vp-sidebar-width) + 2rem);
   width: calc(var(--vp-sidebar-width) - 4rem);
   height: 1px;
   background-color: var(--vp-c-divider);

package/dist/client/theme-default/components/VPNavBarExtra.vue

@@ -65,7 +65,7 @@ const hasContent = computed(() => overflowItems.value.length > 0 || showTranslat
 <style scoped>
 .VPNavBarExtra {
   display: none;
-  margin-right: -0.75rem;
+  margin-inline-end: -0.75rem;
 }
 
 @media (min-width: 48rem) {

package/dist/client/theme-default/components/VPNavBarHamburger.vue

@@ -54,11 +54,12 @@ watchEffect(() => {
   width: 1rem;
   height: 0.875rem;
   overflow: hidden;
+  scale: var(--vp-direction-multiplier) 1;
 }
 
-.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(0.25rem); }
-.VPNavBarHamburger:hover .middle { top: 0.375rem; left: 0; transform: translateX(0); }
-.VPNavBarHamburger:hover .bottom { top: 0.75rem; left: 0; transform: translateX(0.5rem); }
+.VPNavBarHamburger:hover .top    { top: 0; transform: translateX(0.25rem); }
+.VPNavBarHamburger:hover .middle { top: 0.375rem; transform: translateX(0); }
+.VPNavBarHamburger:hover .bottom { top: 0.75rem; transform: translateX(0.5rem); }
 
 .VPNavBarHamburger.active .top    { top: 0.375rem; transform: translateX(0) rotate(225deg); }
 .VPNavBarHamburger.active .middle { top: 0.375rem; transform: translateX(1rem); }
@@ -75,13 +76,14 @@ watchEffect(() => {
 .middle,
 .bottom {
   position: absolute;
+  inset-inline-start: 0;
   width: 1rem;
   height: 0.125rem;
   background-color: var(--vp-c-text-1);
   transition: top 0.25s, background-color 0.5s, transform 0.25s;
 }
 
-.top    { top: 0; left: 0; transform: translateX(0); }
-.middle { top: 0.375rem; left: 0; transform: translateX(0.5rem); }
-.bottom { top: 0.75rem; left: 0; transform: translateX(0.25rem); }
+.top    { top: 0; transform: translateX(0); }
+.middle { top: 0.375rem; transform: translateX(0.5rem); }
+.bottom { top: 0.75rem; transform: translateX(0.25rem); }
 </style>

package/dist/client/theme-default/components/VPNavBarSearch.vue

@@ -151,13 +151,13 @@ function isEditingContent(event) {
 @media (min-width: 48rem) {
   .VPNavBarSearch {
     gap: 0.5rem;
-    padding-left: 1.5rem;
+    padding-inline-start: 1.5rem;
   }
 }
 
 @media (min-width: 60rem) {
   .VPNavBarSearch {
-    padding-left: 2rem;
+    padding-inline-start: 2rem;
   }
 }
 </style>

package/dist/client/theme-default/components/VPNavBarSearchButton.vue

@@ -68,6 +68,8 @@ kbd {
     display: flex;
     align-items: center;
     gap: 0.25rem;
+    /* the shortcut reads the same way in every direction */
+    direction: ltr;
     padding: 0.25rem 0.375rem;
     border: 1px solid var(--vp-c-divider);
     border-radius: 0.25rem;

package/dist/client/theme-default/components/VPNavBarTitle.vue

@@ -31,7 +31,7 @@ const textTitle = computed(() => {
     >
       <slot name="nav-bar-title-before" />
       <VPImage v-if="theme.logo" class="logo" :image="theme.logo" />
-      <span v-if="theme.siteTitle" v-html="theme.siteTitle"></span>
+      <span v-if="theme.siteTitle" dir="auto" v-html="theme.siteTitle"></span>
       <span v-else-if="theme.siteTitle === undefined">{{ site.title }}</span>
       <slot name="nav-bar-title-after" />
     </a>
@@ -71,7 +71,7 @@ const textTitle = computed(() => {
 
 :deep(.logo) {
   flex: none;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
   height: var(--vp-nav-logo-height);
 }
 </style>

package/dist/client/theme-default/components/VPNavMenu.vue

@@ -61,7 +61,7 @@ function isVisible(index) {
   visibility: hidden;
   position: absolute;
   top: 0;
-  left: 0;
+  inset-inline-start: 0;
   max-width: 100%;
   overflow: hidden;
 }

package/dist/client/theme-default/components/VPNavMenuGroup.vue

@@ -76,7 +76,7 @@ function toggle() {
       :aria-controls="groupId"
       @click="toggle"
     >
-      <span class="button-text" v-html="item.text"></span>
+      <span class="button-text" dir="auto" v-html="item.text"></span>
       <span class="vpi-plus button-icon" aria-hidden="true" />
     </button>
 
@@ -108,7 +108,6 @@ function toggle() {
 }
 
 .VPNavScreenMenuGroup.open .button-icon {
-  /*rtl:ignore*/
   transform: rotate(45deg);
 }
 
@@ -116,7 +115,8 @@ function toggle() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 0.25rem 0.6875rem 0;
+  padding-block: 0.75rem 0.6875rem;
+  padding-inline: 0 0.25rem;
   width: 100%;
   line-height: 1.7142857;
   font-size: 0.875rem;

package/dist/client/theme-default/components/VPNavMenuLink.vue

@@ -34,7 +34,7 @@ function onClick() {
     :no-icon="item.noIcon"
     @click="onClick"
   >
-    <span v-html="item.text"></span>
+    <span dir="auto" v-html="item.text"></span>
   </VPLink>
 </template>
 

package/dist/client/theme-default/components/VPNavScreen.vue

@@ -43,12 +43,7 @@ onKeyStroke("Escape", () => {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: 0;
-  /*rtl:ignore*/
-  right: 0;
-  bottom: 0;
-  /*rtl:ignore*/
-  left: 0;
+  inset: 0;
   padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px) 2rem 0;
   width: 100%;
   background-color: var(--vp-nav-screen-bg-color);

package/dist/client/theme-default/components/VPNavTranslations.vue

@@ -113,7 +113,8 @@ const localeProps = (locale) => ({
 }
 
 .VPNavBarTranslations .title {
-  padding: 0 1.5rem 0 0.75rem;
+  padding-block: 0;
+  padding-inline: 0.75rem 1.5rem;
   line-height: 2.2857143;
   font-size: 0.875rem;
   font-weight: 700;
@@ -144,20 +145,21 @@ const localeProps = (locale) => ({
 }
 
 .VPNavScreenTranslations .icon.lang {
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
 }
 
 .VPNavScreenTranslations .icon.chevron {
-  margin-left: 0.25rem;
+  margin-inline-start: 0.25rem;
   transition: transform 0.25s;
 }
 
 .VPNavScreenTranslations.open .icon.chevron {
-  transform: rotate(180deg);
+  transform: rotate(-90deg);
 }
 
 .VPNavScreenTranslations .list {
-  padding: 0.25rem 0 0 1.5rem;
+  padding-block: 0.25rem 0;
+  padding-inline: 1.5rem 0;
 }
 
 .VPNavScreenTranslations .link {

package/dist/client/theme-default/components/VPSidebar.vue

@@ -58,7 +58,7 @@ watch(sidebarGroups, () => {
   position: fixed;
   top: var(--vp-layout-top-height, 0px);
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   z-index: var(--vp-z-index-sidebar);
   padding: 2rem 2rem 6rem;
   width: calc(100vw - 4rem);
@@ -68,7 +68,7 @@ watch(sidebarGroups, () => {
   box-shadow: var(--vp-c-shadow-3);
   overflow-x: hidden;
   overflow-y: auto;
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% * var(--vp-direction-multiplier)));
   transition: opacity 0.5s, transform 0.25s ease;
   overscroll-behavior: contain;
 }
@@ -99,7 +99,7 @@ watch(sidebarGroups, () => {
 
 @media (min-width: 90rem) {
   .VPSidebar {
-    padding-left: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
+    padding-inline-start: max(2rem, calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2));
     width: calc((100% - (var(--vp-layout-max-width) - 4rem)) / 2 + var(--vp-sidebar-width) - 2rem);
   }
 }
@@ -108,11 +108,10 @@ watch(sidebarGroups, () => {
   .curtain {
     position: sticky;
     top: calc(var(--vp-nav-height) * -1);
-    left: 0;
+    inset-inline-start: 0;
     z-index: 1;
     margin-top: calc(var(--vp-nav-height) * -1);
-    margin-right: -2rem;
-    margin-left: -2rem;
+    margin-inline: -2rem;
     height: var(--vp-nav-height);
     background-color: var(--vp-sidebar-bg-color);
   }

package/dist/client/theme-default/components/VPSidebarItem.vue

@@ -46,9 +46,9 @@ function onItemClick() {
         :rel="item.rel"
         :target="item.target"
       >
-        <component :is="textTag" class="text" v-html="item.text" />
+        <component :is="textTag" class="text"><bdi v-html="item.text" /></component>
       </VPLink>
-      <component v-else :is="textTag" class="text" v-html="item.text" />
+      <component v-else :is="textTag" class="text"><bdi v-html="item.text" /></component>
 
       <button
         v-if="item.collapsed != null && item.items && item.items.length"
@@ -98,7 +98,7 @@ function onItemClick() {
   position: absolute;
   top: 0.375rem;
   bottom: 0.375rem;
-  left: calc(-1rem - 1px);
+  inset-inline-start: calc(-1rem - 1px);
   width: 2px;
   border-radius: 2px;
   transition: background-color 0.25s;
@@ -176,7 +176,7 @@ function onItemClick() {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-right: -0.4375rem;
+  margin-inline-end: -0.4375rem;
   width: 2rem;
   height: 2rem;
   color: var(--vp-c-text-3);
@@ -195,13 +195,12 @@ function onItemClick() {
 
 .caret-icon {
   font-size: 1.125rem;
-  /*rtl:ignore*/
   transform: rotate(90deg);
   transition: transform 0.25s;
 }
 
 .VPSidebarItem.collapsed .caret-icon {
-  transform: rotate(0) /*rtl:rotate(180deg)*/;
+  transform: rotate(0);
 }
 
 .VPSidebarItem.level-1 .items,
@@ -209,8 +208,8 @@ function onItemClick() {
 .VPSidebarItem.level-3 .items,
 .VPSidebarItem.level-4 .items,
 .VPSidebarItem.level-5 .items {
-  border-left: 1px solid var(--vp-c-divider);
-  padding-left: 1rem;
+  border-inline-start: 1px solid var(--vp-c-divider);
+  padding-inline-start: 1rem;
 }
 
 .VPSidebarItem.collapsed .items {

package/dist/client/theme-default/components/VPSkipLink.vue

@@ -23,7 +23,7 @@ watch(() => route.path, () => backToTop.value?.focus());
 .VPSkipLink {
   position: fixed;
   top: 0.5rem;
-  left: 0.5rem;
+  inset-inline-start: 0.5rem;
   padding: 0.5rem 1rem;
   z-index: 999;
   border-radius: 0.5rem;
@@ -45,7 +45,7 @@ watch(() => route.path, () => backToTop.value?.focus());
 @media (min-width: 80rem) {
   .VPSkipLink {
     top: 0.875rem;
-    left: 1rem;
+    inset-inline-start: 1rem;
   }
 }
 </style>

package/dist/client/theme-default/components/VPSponsors.d.vue.ts

@@ -12,7 +12,7 @@ interface Props {
     data: Sponsors[] | Sponsor[];
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    mode: "normal" | "aside";
+    mode: "aside" | "normal";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/client/theme-default/components/VPSwitch.vue

@@ -18,7 +18,7 @@
   flex-shrink: 0;
   border: 1px solid var(--vp-input-border-color);
   background-color: var(--vp-input-switch-bg-color);
-  transition: border-color 0.25s;
+  transition: border-color 0.25s !important;
 }
 
 .VPSwitch:hover {
@@ -28,14 +28,13 @@
 .check {
   position: absolute;
   top: 1px;
-  /*rtl:ignore*/
-  left: 1px;
+  inset-inline-start: 1px;
   width: 1.125rem;
   height: 1.125rem;
   border-radius: 50%;
   background-color: var(--vp-c-neutral-inverse);
   box-shadow: var(--vp-shadow-1);
-  transition: transform 0.25s;
+  transition: transform 0.25s !important;
 }
 
 .icon {
@@ -50,7 +49,7 @@
 .icon :deep([class^='vpi-']) {
   position: absolute;
   top: 0.1875rem;
-  left: 0.1875rem;
+  inset-inline-start: 0.1875rem;
   width: 0.75rem;
   height: 0.75rem;
   color: var(--vp-c-text-2);
@@ -58,6 +57,6 @@
 
 .dark .icon :deep([class^='vpi-']) {
   color: var(--vp-c-text-1);
-  transition: opacity 0.25s;
+  transition: opacity 0.25s !important;
 }
 </style>

package/dist/client/theme-default/components/VPSwitchAppearance.vue

@@ -44,7 +44,6 @@ watchPostEffect(() => {
 }
 
 .dark .VPSwitchAppearance :deep(.check) {
-  /*rtl:ignore*/
-  transform: translateX(1.125rem);
+  transform: translateX(calc(1.125rem * var(--vp-direction-multiplier)));
 }
 </style>