@kirchdev/duxt 0.3.4-dev-main.41-23ded41 → 0.3.5-dev-main.43-3310f4b

package/app/components/DuxtFooter.vue

@@ -17,18 +17,40 @@ const poweredBy = computed(() =>
     ? { version: duxt.layerVersion, to: duxt.layerRepository }
     : undefined
 );
+
+/**
+ * However many the consumer configured — never assumed to be two.
+ *
+ * Named rather than inlined because the row has to know whether it is empty:
+ * on the stacked mobile layout an empty row is still a flex item, and the
+ * column's gap would draw a blank line under the attribution for links that do
+ * not exist.
+ */
+const legal = computed(() => duxt.footer?.legal ?? []);
 </script>
 
 <template>
-  <!-- One line, and only what a page footer owes: whose site this is, and the
-       links the law asks for. Navigation lives in the header and the sidebar,
-       so repeating it down here buys nothing. -->
+  <!-- Only what a page footer owes: whose site this is, and the links the law
+       asks for. Navigation lives in the header and the sidebar, so repeating it
+       down here buys nothing.
+
+       ONE ROW FROM `sm` UP, A CENTERED STACK BELOW IT. The three groups are the
+       same three either way — only the axis and the alignment change, which is
+       why this is two sets of utilities on the existing markup rather than a
+       second template. Narrow, the groups have unrelated widths and left-
+       aligning them reads as a ragged column rather than a composition, so the
+       stack is centered and takes the order the eye wants: whose site, whose
+       copyright, what built it, what the law asks for. -->
   <footer class="mt-16 border-t">
     <div
-      class="mx-auto flex max-w-[90rem] flex-col gap-3 px-4 py-5 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between lg:px-8"
+      class="mx-auto flex max-w-[90rem] flex-col items-center gap-2 px-4 py-5 text-center text-sm text-muted-foreground sm:flex-row sm:justify-between sm:gap-3 sm:text-start lg:px-8"
     >
+      <!-- Brand and copyright: two centered lines below `sm`, one wrapping row
+           above it. Splitting them is the whole reason the stack has four lines
+           and not three — sharing a row, they wrap against each other at the
+           narrow widths where there is least room to spare. -->
       <div
-        class="flex flex-wrap items-center gap-x-4 gap-y-1 sm:flex-1 sm:basis-0"
+        class="flex flex-col items-center gap-2 sm:flex-1 sm:basis-0 sm:flex-row sm:flex-wrap sm:gap-x-4 sm:gap-y-1"
       >
         <NuxtLink
           :to="localeLink('/')"
@@ -66,12 +88,21 @@ const poweredBy = computed(() =>
 
       <!-- A consumer's legal links belong to the consumer: the layer offers the
            row and ships nothing in it, because an imprint is never the
-           template's to claim. -->
+           template's to claim. However many there are, they stay one wrapping
+           row and wrap together.
+
+           HIDDEN RATHER THAN DROPPED, and only below `sm`. An empty row must
+           not draw a blank line under the attribution, but `v-if` would take
+           the element out of the desktop row too — and there its
+           `flex-1 basis-0` is a third of what holds the attribution in the
+           middle of the page. Removing it would re-center that line, which is
+           a change to the desktop layout and not this one's to make. -->
       <div
-        class="flex flex-wrap items-center gap-x-4 gap-y-1 sm:flex-1 sm:basis-0 sm:justify-end"
+        class="flex flex-wrap items-center justify-center gap-x-4 gap-y-1 sm:flex-1 sm:basis-0 sm:justify-end"
+        :class="{ 'max-sm:hidden': !legal.length }"
       >
         <NuxtLink
-          v-for="link in duxt.footer?.legal ?? []"
+          v-for="link in legal"
           :key="link.to"
           :to="localeLink(link.to)"
           :target="link.external ? '_blank' : undefined"

package/app/components/DuxtHeader.vue

@@ -3,6 +3,11 @@ const duxt = useDuxtConfig();
 const colorMode = useColorMode();
 const path = useDuxtPath();
 const localeLink = useDuxtLink();
+const { t } = useI18n();
+
+const themeLabel = computed(() =>
+  colorMode.value === 'dark' ? t('duxt.theme.toLight') : t('duxt.theme.toDark')
+);
 
 const { data: navigation } = await useDuxtNavigation();
 
@@ -57,11 +62,18 @@ function entryActive(link: DuxtLink) {
   // entry stands for the documentation, and on a site with a second source the
   // list also holds that source's parts — which would light "Docs" on a page
   // that is not documentation at all, beside the entry that really owns it.
-  return sectionsForPath(
-    duxt.sections ?? [],
-    duxt.resolvedSources ?? [],
-    '/'
-  ).some((section) => isActive(section.to));
+  //
+  // AT THE READER'S EDITION, and only inside the root area: the sections are
+  // written at the default edition, so on `/v0.2.0/concepts` none of them
+  // prefixed the page and "Docs" went dark on every other version.
+  const sources = duxt.resolvedSources ?? [];
+  if (areaForPath(path.value, sources) !== areaForPath('/', sources)) {
+    return false;
+  }
+
+  return sectionsForPath(duxt.sections ?? [], sources, path.value).some(
+    (section) => isActive(section.to)
+  );
 }
 
 /**
@@ -153,8 +165,8 @@ function current(to?: string) {
               <Icon name="lucide:menu" class="size-5" />
             </UiButton>
           </UiSheetTrigger>
-          <UiSheetContent side="left" class="flex w-80 flex-col gap-0 p-0">
-            <UiSheetHeader class="border-b pr-14">
+          <UiSheetContent side="start" class="flex w-80 flex-col gap-0 p-0">
+            <UiSheetHeader class="border-b pe-14">
               <UiSheetTitle class="flex items-center gap-2">
                 <NuxtLink
                   :to="localeLink('/')"
@@ -220,12 +232,12 @@ function current(to?: string) {
                         <span class="truncate">{{ link.label }}</span>
                         <Icon
                           name="lucide:chevron-right"
-                          class="ml-auto size-3.5 transition-transform group-data-[state=open]:rotate-90"
+                          class="ms-auto size-3.5 transition-transform group-data-[state=open]:rotate-90"
                         />
                       </UiCollapsibleTrigger>
 
                       <UiCollapsibleContent>
-                        <ul class="mt-0.5 ml-3.5 space-y-0.5 border-l pl-2.5">
+                        <ul class="mt-0.5 ms-3.5 space-y-0.5 border-s ps-2.5">
                           <li
                             v-for="child in link.children"
                             :key="child.to ?? asText(child.label)"
@@ -356,19 +368,29 @@ function current(to?: string) {
             >
               <DuxtLocale />
 
-              <UiButton
-                variant="ghost"
-                size="icon"
-                :aria-label="$t('duxt.theme.toggle')"
-                @click="toggleTheme"
-              >
-                <Icon
-                  :name="
-                    colorMode.value === 'dark' ? 'lucide:sun' : 'lucide:moon'
-                  "
-                  class="size-4"
-                />
-              </UiButton>
+              <UiTooltip>
+                <UiTooltipTrigger as-child>
+                  <UiButton
+                    variant="ghost"
+                    size="icon"
+                    :aria-label="themeLabel"
+                    @click="toggleTheme"
+                  >
+                    <Icon
+                      :name="
+                        colorMode.value === 'dark'
+                          ? 'lucide:sun'
+                          : 'lucide:moon'
+                      "
+                      class="size-4"
+                    />
+                  </UiButton>
+                </UiTooltipTrigger>
+
+                <UiTooltipContent side="top">
+                  {{ themeLabel }}
+                </UiTooltipContent>
+              </UiTooltip>
             </UiSheetFooter>
           </UiSheetContent>
         </UiSheet>
@@ -422,7 +444,14 @@ function current(to?: string) {
                       class="mt-0.5 size-4 shrink-0"
                     />
                     <span class="min-w-0">
-                      <span class="block font-medium">{{ child.label }}</span>
+                      <!-- The same arrow the sheet draws for an external
+                           child, held to the label's last word. -->
+                      <span class="block font-medium">
+                        <DuxtLinkLabel
+                          :label="child.label"
+                          :external="child.external"
+                        />
+                      </span>
                       <span
                         v-if="child.description"
                         class="block text-xs text-muted-foreground"
@@ -450,6 +479,11 @@ function current(to?: string) {
                 :target="link.external ? '_blank' : undefined"
               >
                 {{ link.label }}
+                <Icon
+                  v-if="link.external"
+                  name="lucide:arrow-up-right"
+                  class="size-3 opacity-50"
+                />
               </NuxtLink>
             </UiButton>
           </template>
@@ -472,39 +506,64 @@ function current(to?: string) {
           <DuxtSearch />
         </div>
 
+        <!-- Desktop only, at the same lg split as the burger and the search: a
+             touch device has no keyboard, so a sheet of keys is nothing to
+             offer it — and the mobile sheet carries no copy either, since a
+             sheet is a dialog and a dialog is where the global keys stand down.
+             From lg up it stays the last control in this row that may give way:
+             on a site with `shortcuts.singleCharacter: false` it is the key
+             sheet's ONLY entry point. -->
+        <DuxtShortcutsTrigger class="hidden lg:inline-flex" />
+
         <!-- The project links give way first: they are the only icons here the
              sheet can carry as ordinary rows, where the locale and the theme
              are controls that have to stay reachable in one tap. -->
-        <UiButton
-          v-for="link in duxt.links ?? []"
-          :key="link.to"
-          as-child
-          variant="ghost"
-          size="icon"
-          class="hidden lg:inline-flex"
-          :aria-label="link.label"
-        >
-          <a :href="link.to" target="_blank" rel="noopener">
-            <Icon v-if="link.icon" :name="link.icon" class="size-4" />
-          </a>
-        </UiButton>
+        <UiTooltip v-for="link in duxt.links ?? []" :key="link.to">
+          <UiTooltipTrigger as-child>
+            <UiButton
+              as-child
+              variant="ghost"
+              size="icon"
+              class="hidden lg:inline-flex"
+              :aria-label="link.label"
+            >
+              <a :href="link.to" target="_blank" rel="noopener">
+                <Icon v-if="link.icon" :name="link.icon" class="size-4" />
+              </a>
+            </UiButton>
+          </UiTooltipTrigger>
+
+          <UiTooltipContent side="bottom">
+            {{ link.label }}
+          </UiTooltipContent>
+        </UiTooltip>
 
         <div class="hidden sm:block">
           <DuxtLocale />
         </div>
 
-        <UiButton
-          variant="ghost"
-          size="icon"
-          class="hidden sm:inline-flex"
-          :aria-label="$t('duxt.theme.toggle')"
-          @click="toggleTheme"
-        >
-          <Icon
-            :name="colorMode.value === 'dark' ? 'lucide:sun' : 'lucide:moon'"
-            class="size-4"
-          />
-        </UiButton>
+        <UiTooltip>
+          <UiTooltipTrigger as-child>
+            <UiButton
+              variant="ghost"
+              size="icon"
+              class="hidden sm:inline-flex"
+              :aria-label="themeLabel"
+              @click="toggleTheme"
+            >
+              <Icon
+                :name="
+                  colorMode.value === 'dark' ? 'lucide:sun' : 'lucide:moon'
+                "
+                class="size-4"
+              />
+            </UiButton>
+          </UiTooltipTrigger>
+
+          <UiTooltipContent side="bottom">
+            {{ themeLabel }}
+          </UiTooltipContent>
+        </UiTooltip>
       </div>
     </div>
   </header>

package/app/components/DuxtLandingProse.vue

@@ -81,7 +81,7 @@ const localeLink = useDuxtLink();
               ? 'lucide:arrow-up-right'
               : 'lucide:arrow-right'
           "
-          class="size-4"
+          class="size-4 rtl:-scale-x-100"
         />
       </NuxtLink>
     </UiButton>

package/app/components/DuxtLinkLabel.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/**
+ * A link's label with the external arrow held to its LAST WORD.
+ *
+ * The arrow is an inline box, so a label that exactly filled its line pushed
+ * the arrow alone onto the next one — "Star on GitHub" on one line and a stray
+ * `↗` under it. Wrapping the last word and the arrow in one `nowrap` span makes
+ * them one unbreakable piece: when the line is full, the word moves down WITH
+ * its arrow. The rest of the label still wraps normally.
+ */
+const props = defineProps<{
+  label: string;
+  external?: boolean;
+}>();
+
+const parts = computed(() => {
+  const trimmed = props.label.trim();
+  const at = trimmed.lastIndexOf(' ');
+
+  return at === -1
+    ? { head: '', tail: trimmed }
+    : { head: trimmed.slice(0, at + 1), tail: trimmed.slice(at + 1) };
+});
+</script>
+
+<template>
+  <template v-if="external">
+    {{ parts.head
+    }}<span class="whitespace-nowrap"
+      >{{ parts.tail }}&nbsp;<Icon
+        name="lucide:arrow-up-right"
+        class="inline-block size-3 align-middle opacity-50"
+    /></span>
+  </template>
+  <template v-else>{{ label }}</template>
+</template>

package/app/components/DuxtLiveWindow.vue

@@ -232,12 +232,17 @@ const title = computed(
     <!-- The tab bar, where there is more than one page to show. Real buttons
          with `aria-selected` rather than a styled div: this is a tablist, the
          arrow keys are expected to work, and they do because the buttons are
-         focusable in order. -->
+         focusable in order.
+
+         NOT BELOW `sm`. On a phone the strip was a second navigation bar
+         stacked over the framed site's own header, eating a window that is
+         already short — and the page inside has its own menu for getting to
+         every one of those pages. -->
     <div
       v-if="tabs.length > 1"
       role="tablist"
       :aria-label="$t('duxt.defaults.landing.demoTitle')"
-      class="flex gap-1 overflow-x-auto border-b bg-muted/30 px-2 py-1.5"
+      class="hidden gap-1 overflow-x-auto border-b bg-muted/30 px-2 py-1.5 sm:flex"
     >
       <button
         v-for="(tab, index) in tabs"
@@ -245,12 +250,7 @@ const title = computed(
         type="button"
         role="tab"
         :aria-selected="index === active"
-        class="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
-        :class="
-          index === active
-            ? 'bg-background text-foreground shadow-sm'
-            : 'text-muted-foreground hover:bg-background/60 hover:text-foreground'
-        "
+        :class="duxtPill(index === active, { size: 'lg' })"
         @click="select(index)"
       >
         <Icon v-if="tab.icon" :name="tab.icon" class="size-4" />

package/app/components/DuxtLocale.vue

@@ -44,11 +44,20 @@ function flagFor(code: string): string | null {
 
 <template>
   <UiDropdownMenu v-if="available.length > 1">
+    <!-- `title`, NOT a tooltip. The tooltip version swapped the button for a
+         second element whenever the menu closed (to keep the tooltip from
+         reopening on the returned focus), and reka's dropdown keeps the
+         element it was first anchored to: the NEXT open positioned itself
+         against a node no longer in the document and landed in the top-left
+         corner. Gildstone hit the same drift with tooltips on its collapsed
+         sidebar dropdowns and fixed it the same way (9122050). A trigger has
+         to stay one element for the life of the menu. -->
     <UiDropdownMenuTrigger as-child>
       <UiButton
         variant="ghost"
         size="icon"
         :aria-label="$t('duxt.locale.switch')"
+        :title="$t('duxt.locale.switch')"
       >
         <Icon
           v-if="current?.flag"
@@ -76,7 +85,7 @@ function flagFor(code: string): string | null {
           <span class="truncate text-sm">{{ entry.label }}</span>
           <Icon
             name="lucide:check"
-            class="ml-auto size-3.5 shrink-0"
+            class="ms-auto size-3.5 shrink-0"
             :class="entry.code === locale ? '' : 'opacity-0'"
           />
         </NuxtLink>

package/app/components/DuxtNavigation.vue

@@ -74,12 +74,12 @@ function setOpen(item: ContentNavigationItem, value: boolean) {
             <span class="truncate">{{ item.title }}</span>
             <Icon
               name="lucide:chevron-right"
-              class="ml-auto size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-90"
+              class="ms-auto size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-90"
             />
           </UiCollapsibleTrigger>
 
           <UiCollapsibleContent>
-            <ul class="mt-0.5 ml-3.5 space-y-0.5 border-l pl-2.5">
+            <ul class="mt-0.5 ms-3.5 space-y-0.5 border-s ps-2.5">
               <li v-for="child in item.children" :key="child.path">
                 <DuxtNavigationLink :item="child" />
               </li>