vitepress 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -1,25 +1,44 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import VPImage from './VPImage.vue'
-import VPLink from './VPLink.vue'
-
-defineProps<{
-  icon?: DefaultTheme.FeatureIcon
-  title: string
-  details?: string
-  link?: string
-  linkText?: string
-  rel?: string
-  target?: string
-}>()
+<script setup>
+import VPImage from "./VPImage.vue";
+import VPLink from "./VPLink.vue";
+defineProps({
+	icon: {
+		type: [String, Object],
+		required: false
+	},
+	title: {
+		type: String,
+		required: true
+	},
+	details: {
+		type: String,
+		required: false
+	},
+	link: {
+		type: String,
+		required: false
+	},
+	linkText: {
+		type: String,
+		required: false
+	},
+	rel: {
+		type: String,
+		required: false
+	},
+	target: {
+		type: String,
+		required: false
+	}
+});
 </script>
 
 <template>
   <VPLink
     class="VPFeature"
     :href="link"
-    :rel="rel"
-    :target="target"
+    :rel
+    :target
     :no-icon="true"
     :tag="link ? 'a' : 'div'"
   >
@@ -40,12 +59,14 @@ defineProps<{
         :width="icon.width || 48"
       />
       <div v-else-if="icon" class="icon" v-html="icon"></div>
-      <h2 class="title" v-html="title"></h2>
-      <p v-if="details" class="details" v-html="details"></p>
-
+      <h2 class="title"><bdi v-html="title" /></h2>
+      <ul v-if="Array.isArray(details)" class="details">
+        <li v-for="item in details" :key="item"><bdi v-html="item" /></li>
+      </ul>
+      <p v-else-if="details" class="details"><bdi v-html="details" /></p>
       <div v-if="linkText" class="link-text">
         <p class="link-text-value">
-          {{ linkText }} <span class="vpi-arrow-right link-text-icon" />
+          <bdi>{{ linkText }}</bdi> <span class="vpi-arrow-right link-text-icon" />
         </p>
       </div>
     </article>
@@ -56,7 +77,7 @@ defineProps<{
 .VPFeature {
   display: block;
   border: 1px solid var(--vp-c-bg-soft);
-  border-radius: 12px;
+  border-radius: 0.75rem;
   height: 100%;
   background-color: var(--vp-c-bg-soft);
   transition: border-color 0.25s, background-color 0.25s;
@@ -69,55 +90,60 @@ defineProps<{
 .box {
   display: flex;
   flex-direction: column;
-  padding: 24px;
+  padding: 1.5rem;
   height: 100%;
 }
 
 .box > :deep(.VPImage) {
-  margin-bottom: 20px;
+  margin-bottom: 1.25rem;
 }
 
 .icon {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: 20px;
-  border-radius: 6px;
+  margin-bottom: 1.25rem;
+  border-radius: 0.375rem;
   background-color: var(--vp-c-default-soft);
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
   transition: background-color 0.25s;
 }
 
 .title {
-  line-height: 24px;
-  font-size: 16px;
+  line-height: 1.5;
+  font-size: 1rem;
   font-weight: 600;
 }
 
 .details {
   flex-grow: 1;
-  padding-top: 8px;
-  line-height: 24px;
-  font-size: 14px;
+  padding-top: 0.5rem;
+  line-height: 1.7142857;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
+ul.details {
+  list-style-type: disc;
+  padding-inline-start: 0.875rem;
+}
+
 .link-text {
-  padding-top: 8px;
+  padding-top: 0.5rem;
 }
 
 .link-text-value {
   display: flex;
   align-items: center;
-  font-size: 14px;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-brand-1);
 }
 
 .link-text-icon {
-  margin-left: 6px;
+  margin-inline-start: 0.375rem;
 }
 </style>

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

@@ -0,0 +1,16 @@
+import type { DefaultTheme } from 'vitepress/theme';
+export interface Feature {
+    icon?: DefaultTheme.FeatureIcon;
+    title: string;
+    details: string;
+    link?: string;
+    linkText?: string;
+    rel?: string;
+    target?: string;
+}
+type __VLS_Props = {
+    features: Feature[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,44 +1,31 @@
-<script setup lang="ts">
-import type { DefaultTheme } from 'vitepress/theme'
-import { computed } from 'vue'
-import VPFeature from './VPFeature.vue'
-
-export interface Feature {
-  icon?: DefaultTheme.FeatureIcon
-  title: string
-  details: string
-  link?: string
-  linkText?: string
-  rel?: string
-  target?: string
-}
-
-const props = defineProps<{
-  features: Feature[]
-}>()
-
+<script setup>
+import { computed } from "vue";
+import VPFeature from "./VPFeature.vue";
+const props = defineProps({ features: {
+	type: Array,
+	required: true
+} });
 const grid = computed(() => {
-  const length = props.features.length
-
-  if (!length) {
-    return
-  } else if (length === 2) {
-    return 'grid-2'
-  } else if (length === 3) {
-    return 'grid-3'
-  } else if (length % 3 === 0) {
-    return 'grid-6'
-  } else if (length > 3) {
-    return 'grid-4'
-  }
-})
+	const length = props.features.length;
+	if (!length) {
+		return;
+	} else if (length === 2) {
+		return "grid-2";
+	} else if (length === 3) {
+		return "grid-3";
+	} else if (length % 3 === 0) {
+		return "grid-6";
+	} else if (length > 3) {
+		return "grid-4";
+	}
+});
 </script>
 
 <template>
   <div v-if="features" class="VPFeatures">
     <div class="container">
-      <div class="items">
-        <div
+      <ul class="items">
+        <li
           v-for="feature in features"
           :key="feature.title"
           class="item"
@@ -53,8 +40,8 @@ const grid = computed(() => {
             :rel="feature.rel"
             :target="feature.target"
           />
-        </div>
-      </div>
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -62,38 +49,38 @@ const grid = computed(() => {
 <style scoped>
 .VPFeatures {
   position: relative;
-  padding: 0 24px;
+  padding: 0 1.5rem;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .VPFeatures {
-    padding: 0 48px;
+    padding: 0 3rem;
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .VPFeatures {
-    padding: 0 64px;
+    padding: 0 4rem;
   }
 }
 
 .container {
   margin: 0 auto;
-  max-width: 1152px;
+  max-width: 72rem;
 }
 
 .items {
   display: flex;
   flex-wrap: wrap;
-  margin: -8px;
+  margin: -0.5rem;
 }
 
 .item {
-  padding: 8px;
+  padding: 0.5rem;
   width: 100%;
 }
 
-@media (min-width: 640px) {
+@media (min-width: 40rem) {
   .item.grid-2,
   .item.grid-4,
   .item.grid-6 {
@@ -101,7 +88,7 @@ const grid = computed(() => {
   }
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .item.grid-2,
   .item.grid-4 {
     width: calc(100% / 2);
@@ -113,7 +100,7 @@ const grid = computed(() => {
   }
 }
 
-@media (min-width: 960px) {
+@media (min-width: 60rem) {
   .item.grid-4 {
     width: calc(100% / 4);
   }

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

@@ -0,0 +1,26 @@
+import type { DefaultTheme } from 'vitepress/theme';
+declare const __VLS_export: <T extends DefaultTheme.NavItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        icon?: string;
+        button?: string;
+        label?: string;
+        items?: T[];
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: {}) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,51 +1,116 @@
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { useFlyout } from '../composables/flyout'
-import VPMenu from './VPMenu.vue'
-
-defineProps<{
-  icon?: string
-  button?: string
-  label?: string
-  items?: any[]
-}>()
-
-const open = ref(false)
-const el = ref<HTMLElement>()
-
-useFlyout({ el, onBlur })
-
-function onBlur() {
-  open.value = false
+<script setup>
+import { onKeyStroke, useEventListener } from "@vueuse/core";
+import { useRoute } from "vitepress";
+import { ref, useId, useTemplateRef, watch } from "vue";
+import { useFlyout } from "../composables/flyout";
+import VPMenu from "./VPMenu.vue";
+defineProps({
+	icon: {
+		type: String,
+		required: false
+	},
+	button: {
+		type: String,
+		required: false
+	},
+	label: {
+		type: String,
+		required: false
+	},
+	items: {
+		type: Array,
+		required: false
+	}
+});
+const open = ref(false);
+const el = useTemplateRef("el");
+const buttonEl = useTemplateRef("buttonEl");
+const menuEl = useTemplateRef("menuEl");
+const menuId = useId();
+useFlyout({
+	el,
+	onBlur: close
+});
+const route = useRoute();
+watch(() => route.path, close);
+// for mouse users the disclosure opens and closes on hover, with the same
+// boundary in both directions: the button plus the open panel. The root box
+// isn't used — it also contains the ::before divider some contexts draw
+// before the flyout, which should act as a neutral gap either way. Closing
+// needs no delay: leaving for the panel (or back) is detected via
+// relatedTarget, and any real exit closes instantly so a panel never
+// lingers over a neighboring flyout while sweeping across the bar.
+// a hover-open absorbs the click that usually follows it, otherwise mouse
+// users would toggle the menu right back off
+let openedByHover = false;
+function onPointerEnter(e) {
+	if (e.pointerType !== "mouse") return;
+	if (!open.value) {
+		open.value = true;
+		openedByHover = true;
+	}
+}
+function onPointerLeave(e) {
+	if (e.pointerType !== "mouse") return;
+	const to = e.relatedTarget;
+	// still within the button ∪ panel region — not an exit
+	if (to && (buttonEl.value?.contains(to) || menuEl.value?.contains(to))) return;
+	close();
+}
+function toggle() {
+	if (open.value && openedByHover) {
+		openedByHover = false;
+		return;
+	}
+	openedByHover = false;
+	open.value = !open.value;
+}
+function close() {
+	open.value = false;
+	openedByHover = false;
 }
+// content shown on hover must be dismissible without moving the pointer
+// (WCAG 1.4.13) — Escape closes and, if focus was inside, returns it to the
+// trigger
+onKeyStroke("Escape", () => {
+	if (!open.value) return;
+	const restoreFocus = el.value?.contains(document.activeElement);
+	close();
+	if (restoreFocus) {
+		el.value?.querySelector("button")?.focus();
+	}
+});
+// a tap on a non-focusable area outside doesn't move focus, so the
+// focus-tracking blur alone can't dismiss the menu on touch
+useEventListener("pointerdown", (e) => {
+	if (open.value && el.value && !el.value.contains(e.target)) close();
+});
 </script>
 
 <template>
-  <div
-    class="VPFlyout"
-    ref="el"
-    @mouseenter="open = true"
-    @mouseleave="open = false"
-  >
+  <div class="VPFlyout" ref="el">
     <button
+      ref="buttonEl"
       type="button"
       class="button"
-      aria-haspopup="true"
       :aria-expanded="open"
+      :aria-controls="menuId"
       :aria-label="label"
-      @click="open = !open"
+      @pointerenter="onPointerEnter"
+      @pointerleave="onPointerLeave"
+      @click="toggle"
     >
       <span v-if="button || icon" class="text">
-        <span v-if="icon" :class="[icon, 'option-icon']" />
-        <span v-if="button" v-html="button"></span>
-        <span class="vpi-chevron-down text-icon" />
+        <span v-if="icon" :class="[icon, 'option-icon']" aria-hidden="true" />
+        <span v-if="button" dir="auto" v-html="button"></span>
+        <span class="vpi-chevron-down text-icon" aria-hidden="true" />
       </span>
 
-      <span v-else class="vpi-more-horizontal icon" />
+      <span v-else class="vpi-ellipsis icon" aria-hidden="true" />
     </button>
 
-    <div class="menu">
-      <VPMenu :items="items">
+    <div ref="menuEl" class="menu" :id="menuId" @pointerleave="onPointerLeave">
+      <VPMenu :items>
         <slot />
       </VPMenu>
     </div>
@@ -78,23 +143,23 @@ function onBlur() {
   color: var(--vp-c-brand-2);
 }
 
+/* closing is snappier than opening so a panel doesn't linger over the
+   neighboring flyout's panel while sweeping across the bar */
 .button[aria-expanded="false"] + .menu {
   opacity: 0;
   visibility: hidden;
-  transform: translateY(0);
+  transition: opacity 0.1s, visibility 0.1s;
 }
 
-.VPFlyout:hover .menu,
 .button[aria-expanded="true"] + .menu {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
 }
 
 .button {
   display: flex;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 0.75rem;
   height: var(--vp-nav-height);
   color: var(--vp-c-text-1);
   transition: color 0.5s;
@@ -103,34 +168,33 @@ function onBlur() {
 .text {
   display: flex;
   align-items: center;
-  line-height: var(--vp-nav-height);
-  font-size: 14px;
+  line-height: 1.5;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;
 }
 
 .option-icon {
-  margin-right: 0px;
-  font-size: 16px;
+  font-size: 1rem;
 }
 
 .text-icon {
-  margin-left: 4px;
-  font-size: 14px;
+  margin-inline-start: 0.25rem;
+  font-size: 0.875rem;
 }
 
 .icon {
-  font-size: 20px;
+  font-size: 1.25rem;
   transition: fill 0.25s;
 }
 
 .menu {
   position: absolute;
-  top: calc(var(--vp-nav-height) / 2 + 20px);
-  right: 0;
+  top: calc(var(--vp-nav-height) / 2 + 1.25rem);
+  inset-inline-end: 0;
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
+  transition: opacity 0.25s, visibility 0.25s;
 }
 </style>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,16 +1,23 @@
-<script setup lang="ts">
-import { useData } from '../composables/data'
-import { useSidebar } from '../composables/sidebar'
-
-const { theme, frontmatter } = useData()
-const { hasSidebar } = useSidebar()
+<script setup>
+import { useData } from "../composables/data";
+import { useLayout } from "../composables/layout";
+const { theme, frontmatter } = useData();
+const { hasSidebar } = useLayout();
 </script>
 
 <template>
-  <footer v-if="theme.footer && frontmatter.footer !== false" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+  <footer
+    v-if="theme.footer && frontmatter.footer !== false"
+    class="VPFooter"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
     <div class="container">
-      <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
-      <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
+      <p v-if="theme.footer.message" class="message">
+        <bdi v-html="theme.footer.message" />
+      </p>
+      <p v-if="theme.footer.copyright" class="copyright">
+        <bdi v-html="theme.footer.copyright" />
+      </p>
     </div>
   </footer>
 </template>
@@ -20,7 +27,7 @@ const { hasSidebar } = useSidebar()
   position: relative;
   z-index: var(--vp-z-index-footer);
   border-top: 1px solid var(--vp-c-gutter);
-  padding: 32px 24px;
+  padding: 2rem 1.5rem;
   background-color: var(--vp-c-bg);
 }
 
@@ -30,7 +37,7 @@ const { hasSidebar } = useSidebar()
 
 .VPFooter :deep(a) {
   text-decoration-line: underline;
-  text-underline-offset: 2px;
+  text-underline-offset: 0.125rem;
   transition: color 0.25s;
 }
 
@@ -38,9 +45,9 @@ const { hasSidebar } = useSidebar()
   color: var(--vp-c-text-1);
 }
 
-@media (min-width: 768px) {
+@media (min-width: 48rem) {
   .VPFooter {
-    padding: 32px;
+    padding: 2rem;
   }
 }
 
@@ -52,8 +59,8 @@ const { hasSidebar } = useSidebar()
 
 .message,
 .copyright {
-  line-height: 24px;
-  font-size: 14px;
+  line-height: 1.7142857;
+  font-size: 0.875rem;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }

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

@@ -0,0 +1,38 @@
+import type { DefaultTheme } from 'vitepress/theme';
+export interface HeroAction {
+    theme?: 'brand' | 'alt';
+    text: string;
+    link: string;
+    target?: string;
+    rel?: string;
+}
+type __VLS_Props = {
+    name?: string;
+    text?: string;
+    tagline?: string;
+    image?: DefaultTheme.ThemeableImage;
+    actions?: HeroAction[];
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {}, __VLS_15: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    'home-hero-info-before'?: (props: typeof __VLS_1) => any;
+} & {
+    'home-hero-info'?: (props: typeof __VLS_3) => any;
+} & {
+    'home-hero-info-after'?: (props: typeof __VLS_5) => any;
+} & {
+    'home-hero-actions-before-actions'?: (props: typeof __VLS_7) => any;
+} & {
+    'home-hero-actions-after'?: (props: typeof __VLS_15) => any;
+} & {
+    'home-hero-image'?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};