blume 2.0.3 → 2.1.0

package/src/components/layout/Header.astro

@@ -2,7 +2,7 @@
 import Ask from "blume:ask";
 import data from "blume:data";
 import { withBase, withMountedBase } from "../islands/base-path.ts";
-import { NEW_TAB_ATTRS, newTabAttrs } from "../../core/new-tab.ts";
+import { newTabAttrs } from "../../core/new-tab.ts";
 import type { ComponentOverride } from "../../core/define-components.ts";
 import { EN_UI } from "../../core/i18n-ui.ts";
 import type { UIStrings } from "../../core/i18n-ui.ts";
@@ -11,7 +11,6 @@ import type {
   Navigation,
   NavSelector as NavSelectorConfig,
 } from "../../core/types.ts";
-import { GITHUB_MARK } from "../github-mark.ts";
 import Icon from "../Icon.astro";
 import LanguageSwitcher from "./LanguageSwitcher.astro";
 import Logo from "./Logo.astro";
@@ -129,11 +128,19 @@ const activeTab = currentTabForRoute(navigation.tabs, route, navigation.root);
 // mobile nav below `lg`, so the inline tabs wait until `lg` to avoid duplicating
 // the drawer's links between `md` and `lg`.
 const tabsNavClass = hasSidebar
-  ? "hidden gap-1 md:flex"
-  : "hidden gap-1 lg:flex";
+  ? "hidden shrink-0 gap-1 md:flex"
+  : "hidden shrink-0 gap-1 lg:flex";
 
 const iconButton =
-  "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+  "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+
+// Below `lg`, where the sidebar is a drawer, the selectors, version selector,
+// and language switcher move into a row at the top of it (see
+// DrawerSwitchers.astro): they scope what the sidebar lists, and beside the
+// logo, tabs, search, and icon buttons they'd overflow a phone or tablet
+// header. With no drawer to open they have nowhere else to go, so they stay.
+// Nothing in the header shrinks except the logo, whose title truncates.
+const switcherClass = showNavToggle ? "hidden shrink-0 lg:block" : "shrink-0";
 
 // Header links: plain actions are secondary and hide below `sm`, where the
 // header has room for the logo and the drawer toggle and nothing else. The one
@@ -186,37 +193,44 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
 ---
 
 <header
-  class="sticky top-0 z-40 flex h-16 items-center gap-3 bg-background/90 px-4 backdrop-blur md:px-6"
+  class="sticky top-0 z-40 flex h-16 items-center gap-2 bg-background/90 px-4 backdrop-blur sm:gap-3 md:px-6 lg:grid lg:grid-cols-[minmax(0,1fr)_auto_minmax(max-content,1fr)]"
   data-blume-header
   data-blume-header-transparent={transparent ? "" : undefined}
 >
-  {
-    showNavToggle && (
-      <button
-        aria-controls="blume-nav-drawer"
-        aria-expanded="false"
-        aria-label={n.toggleNavigation}
-        class={`${iconButton} lg:hidden`}
-        data-blume-nav-toggle
-        type="button"
-      >
-        <Icon name="menu" size={20} />
-      </button>
-    )
-  }
-  <LogoSlot locale={locale} logo={logo} site={site} />
-  {
-    navigation.selectors.length > 0 && (
-      <div class="flex items-center gap-1.5">
-        {navigation.selectors.map((selector) => (
-          <NavSelector route={route} selector={selector} />
-        ))}
-      </div>
-    )
-  }
+  {/* From `lg` the header is three columns, so the tabs sit at its center:
+      the logo side and the controls side share the rest equally. The logo
+      side may shrink to nothing (its title truncates, as on phones); the
+      controls never shrink, so when they need more than half, the tabs move
+      over rather than overlap. Below `lg` it's one row, tabs after the logo. */}
+  <div class="flex min-w-0 items-center gap-2 sm:gap-3 lg:col-start-1">
+    {
+      showNavToggle && (
+        <button
+          aria-controls="blume-nav-drawer"
+          aria-expanded="false"
+          aria-label={n.toggleNavigation}
+          class={`${iconButton} lg:hidden`}
+          data-blume-nav-toggle
+          type="button"
+        >
+          <Icon name="menu" size={20} />
+        </button>
+      )
+    }
+    <LogoSlot locale={locale} logo={logo} site={site} />
+    {
+      navigation.selectors.length > 0 && (
+        <div class:list={["flex items-center gap-1.5", switcherClass]}>
+          {navigation.selectors.map((selector) => (
+            <NavSelector route={route} selector={selector} />
+          ))}
+        </div>
+      )
+    }
+  </div>
   {
     navigation.tabs.length > 0 && (
-      <nav aria-label={n.sections} class={tabsNavClass}>
+      <nav aria-label={n.sections} class:list={[tabsNavClass, "lg:col-start-2"]}>
         {navigation.tabs.map((tab) =>
           tab.items && tab.items.length > 0 ? (
             <NavTabMenu
@@ -241,38 +255,31 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       </nav>
     )
   }
-  <div class="flex-1"></div>
-  {
-    /* Right-aligned next to the language switcher: the spacer absorbs its
-       width, so pages without a version selector (blog, generated references)
-       keep the logo, tabs, and the rest of this cluster in place — no layout
-       shift when crossing into the docs. */
-    versionSelector && (
-      <NavSelector align="end" route={route} selector={versionSelector} />
-    )
-  }
-  {
-    localeSwitch && localeSwitch.length > 1 && (
-      <LanguageSwitcher
-        label={switcherStrings?.label ?? "Language"}
-        options={localeSwitch}
-        untranslatedLabel={switcherStrings?.untranslated ?? "Not translated"}
-      />
-    )
-  }
-  {
-    searchEnabled && (
-      <SearchSlot
-        assistantEnabled={assistantEnabled}
-        locale={searchLocale}
-        navigation={navigation}
-        popularPages={data.config.search.popular}
-        strings={searchStrings}
-        version={searchVersion}
-      />
-    )
-  }
-  <div class="flex items-center gap-2">
+  <div class="flex-1 lg:hidden"></div>
+  {/* Everything on the right sits in one group with a tight gap: the version
+      and language pickers, the header links, and the icon buttons. Below `lg`
+      the spacer absorbs its width, so pages without a version selector (blog,
+      generated references) keep the logo and tabs in place — no layout shift
+      when crossing into the docs. */}
+  <div class="flex shrink-0 items-center gap-1 lg:col-start-3 lg:justify-self-end">
+    {
+      versionSelector && (
+        <div class={switcherClass}>
+          <NavSelector align="end" route={route} selector={versionSelector} />
+        </div>
+      )
+    }
+    {
+      localeSwitch && localeSwitch.length > 1 && (
+        <div class={switcherClass}>
+          <LanguageSwitcher
+            label={switcherStrings?.label ?? "Language"}
+            options={localeSwitch}
+            untranslatedLabel={switcherStrings?.untranslated ?? "Not translated"}
+          />
+        </div>
+      )
+    }
     {
       /* Plain links first, then the one filled button: the reader's eye lands
          on the button because nothing beside it competes. */
@@ -299,29 +306,24 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
       )
     }
     {
-      navigation.repoUrl && (
-        <a
-          aria-label={n.githubRepository}
-          class={iconButton}
-          href={navigation.repoUrl}
-          {...NEW_TAB_ATTRS}
-        >
-          <svg
-            aria-hidden="true"
-            fill="currentColor"
-            height="18"
-            set:html={GITHUB_MARK}
-            viewBox="0 0 16 16"
-            width="18"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-        </a>
+      /* The icon buttons, each named by a tooltip. The site's repository and
+         social profiles live in the footer. */
+      searchEnabled && (
+        <SearchSlot
+          assistantEnabled={assistantEnabled}
+          locale={searchLocale}
+          navigation={navigation}
+          popularPages={data.config.search.popular}
+          strings={searchStrings}
+          version={searchVersion}
+        />
       )
     }
     <button
       aria-label={n.toggleTheme}
       class={iconButton}
       data-blume-theme-toggle
+      data-blume-tooltip={n.toggleTheme}
       type="button"
     >
       <span class="inline-flex dark:hidden"><Icon name="sun" size={18} /></span>
@@ -334,6 +336,46 @@ const clickScript = `(()=>{const dr=()=>{const h=document.querySelector("[data-b
 {transparent && <script is:inline set:html={transparentScript} />}
 
 <style is:global>
+  /* The header's icon buttons are named by a tooltip below them, shown on hover
+     (where there is one) and on keyboard focus. It hangs from the button's end
+     edge, so the last button's tooltip never runs past the viewport, and it
+     keeps the page's own colors under a transparent header. */
+  [data-blume-tooltip] {
+    position: relative;
+  }
+  [data-blume-tooltip]::after {
+    content: attr(data-blume-tooltip);
+    position: absolute;
+    top: calc(100% + 0.375rem);
+    inset-inline-end: 0;
+    z-index: 50;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    background-color: var(--blume-header-foreground);
+    color: var(--blume-header-background);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1rem;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 120ms ease,
+      visibility 0s linear 120ms;
+  }
+  [data-blume-tooltip]:focus-visible::after {
+    opacity: 1;
+    visibility: visible;
+    transition: opacity 120ms ease;
+  }
+  @media (hover: hover) {
+    [data-blume-tooltip]:hover::after {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 120ms ease 400ms;
+    }
+  }
   /* Transparent header (PageLayout `transparentHeader`): at the top of the
      page the bar has no background and its chrome renders in white so it can
      sit over a dark hero; once scrolled it is the frosted bar again. The color

package/src/components/layout/LanguageSwitcher.astro

@@ -7,52 +7,82 @@ interface Props {
   options: LocaleSwitchOption[];
   label: string;
   untranslatedLabel: string;
+  /**
+   * `bar` (the default) for the header; `drawer` for the top of the nav
+   * drawer, where the trigger spans the drawer and opens a panel as wide as
+   * itself, so nothing reaches past the drawer edge.
+   */
+  variant?: "bar" | "drawer";
 }
 
-const { options, label, untranslatedLabel } = Astro.props;
+const { options, label, untranslatedLabel, variant = "bar" } = Astro.props;
 const current = options.find((option) => option.current);
 // The accessible name carries the visible language name too (WCAG 2.5.3,
 // label in name), so a voice-control user can say "English" to open it.
 const summaryLabel = current ? `${label}: ${current.label}` : label;
 
-const iconButton =
-  "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground";
+// In the header the trigger is styled like the icon buttons beside it: no
+// border, a background on hover and while open. The drawer's spans the
+// drawer, where the border marks it as a control.
+const triggerClass =
+  variant === "bar"
+    ? "inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full px-3 text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground group-open:bg-muted group-open:text-foreground"
+    : "inline-flex h-9 w-full cursor-pointer items-center gap-1.5 rounded-full border border-border bg-background px-3 text-muted-foreground text-sm transition-colors hover:border-foreground hover:text-foreground";
 const menuRowClass =
-  "flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-start text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground";
+  "flex w-full items-center gap-4 rounded-md px-2 py-1.5 text-start text-muted-foreground text-sm transition-colors hover:bg-muted hover:text-foreground aria-[current=true]:text-foreground";
 ---
 
 {
   options.length > 1 && (
-    <details class="group relative" data-blume-dropdown>
+    <details
+      class:list={["group relative", variant === "drawer" && "w-full"]}
+      data-blume-dropdown
+    >
       <summary
         aria-label={summaryLabel}
-        class={`${iconButton} list-none [&::-webkit-details-marker]:hidden`}
+        class:list={[triggerClass, "list-none [&::-webkit-details-marker]:hidden"]}
       >
-        <Icon name="globe" size={16} />
-        {/* Collapses to the globe icon below `lg`, matching the search field. */}
-        <span class="max-lg:hidden">{current?.label ?? label}</span>
+        <span class:list={[variant === "drawer" && "flex-1 text-start"]}>
+          {current?.label ?? label}
+        </span>
         <Icon
           class="transition-transform group-open:rotate-180"
           name="chevron-down"
           size={14}
         />
       </summary>
-      <div class="absolute end-0 z-50 mt-2 min-w-44 rounded-blume border border-border bg-background p-1 shadow-xl">
+      <div
+        class:list={[
+          "absolute z-50 mt-2 rounded-blume border border-border bg-background p-1 shadow-xl",
+          // As wide as its longest row: the panel hangs from a narrow trigger,
+          // so it wouldn't otherwise grow past its minimum.
+          variant === "bar"
+            ? "end-0 w-max min-w-44 max-w-[calc(100vw-1rem)]"
+            : "inset-x-0",
+        ]}
+      >
         {options.map((option) => (
           <a
             aria-current={option.current ? "true" : undefined}
             class={menuRowClass}
+            data-blume-locale-choice
             href={withMountedBase(option.href)}
             hreflang={option.code}
             lang={option.code}
           >
-            <span class="flex-1">{option.label}</span>
-            {option.untranslated && (
-              <span class="text-muted-foreground text-xs italic">
-                {untranslatedLabel}
+            {/* The name keeps its full width, so the panel grows to fit the
+                longest row; the note and check sit at the far end. */}
+            <span>{option.label}</span>
+            {(option.untranslated || option.current) && (
+              <span class="ms-auto flex items-center gap-2.5">
+                {option.untranslated && (
+                  <span class="text-muted-foreground text-xs italic">
+                    {untranslatedLabel}
+                  </span>
+                )}
+                {option.current && <Icon name="check" size={14} />}
               </span>
             )}
-            {option.current && <Icon name="check" size={14} />}
           </a>
         ))}
       </div>
@@ -62,8 +92,11 @@ const menuRowClass =
 
 <script>
   import { installDropdownDismiss } from "../dropdown-dismiss.ts";
+  import { rememberLocaleChoice } from "./locale-redirect.ts";
 
   // Outside-click / Escape / focus-out dismissal, shared with the nav
   // selectors and the page actions.
   installDropdownDismiss();
+  // A language picked here stops routing by browser language.
+  rememberLocaleChoice(document);
 </script>