@nulib/clover 4.4.1 → 4.5.0

package/dist/templates/index.d.mts

@@ -183,8 +183,9 @@ export interface ContentStateOutput {
  * state (JSON or base64url). The resource may be a Manifest, a Collection (its first
  * Manifest is shown), a lone Canvas (its `partOf` Manifest, or a Manifest made around
  * it), or annotations, an AnnotationPage or AnnotationCollection (the Manifest their first
- * annotation's Canvas is `partOf`, at that Canvas). Everything is fetched once, with the
- * request settings, and upgraded to Presentation 4.
+ * annotation's Canvas is `partOf`, at that Canvas). It may also be a IIIF Image service,
+ * its `info.json` or its base URI, shown as the one image it is (`imageServiceContent`).
+ * Everything is fetched once, with the request settings, and upgraded to Presentation 4.
  */
 export type IIIFContent = string | Record<string, unknown>;
 /**
@@ -372,6 +373,11 @@ export interface CloverCanvasOptions {
 	maxZoomPixelRatio?: number;
 	/** Smallest zoom, as a fraction of the home zoom. Default 0.9. */
 	minZoomImageRatio?: number;
+	/**
+	 * Whether home may enlarge the image past `maxZoomPixelRatio` to fill the box. False,
+	 * home stops at that zoom and centers the image, smaller than the box. Default true.
+	 */
+	upscale?: boolean;
 	/** Seconds for an animation to close most of its distance. 0 disables easing. */
 	animationTime?: number;
 	/**
@@ -462,6 +468,12 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	 * under the one above it, still in reading order, left to right.
 	 */
 	layout?: ItemsLayout;
+	/**
+	 * The slider's direction: a row (`horizontal`), or a column (`vertical`) that fills
+	 * the height of what holds it, as a filmstrip beside the Body, its pictures as wide as
+	 * the column. Default `"horizontal"`.
+	 */
+	orientation?: "horizontal" | "vertical";
 	/**
 	 * The line under an item's label, where it has one (a Collection's members do): its
 	 * `summary` (the default), its `navDate`, or `none`. Default `"summary"`.
@@ -545,7 +557,7 @@ export type PanelSection = "about" | "targets" | "collection" | "contents" | "se
 /** How the sections are laid out. */
 export type SectionsLayout = "tabs" | "accordion";
 /**
- * What a page calls a section, in place of Clover's own word for it: its words, taken to
+ * What a page calls a section, in place of its word in Clover's interface language: its words, taken to
  * be in the page's language, or its words by language tag, one of which the tab carries
  * as its `lang` where it is not the page's (WCAG 3.1.2).
  */
@@ -601,6 +613,13 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 * leaves the choice out, and the Root reads in its `language`, else the reader's.
 	 */
 	languages?: boolean;
+	/**
+	 * Whether About's language toggle also offers Clover's interface languages (its
+	 * control labels, section titles and announcements) that the resource has none of: the
+	 * visitor's and the site's, where they differ, one choice for the page. Default
+	 * `true`; `false` leaves them out, and Clover speaks the visitor's.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * Which of the default sections the panel may have, in Clover's own order: with
 	 * `["contents", "search"]` it has those two and no About. Each still shows only where
@@ -609,7 +628,7 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 */
 	sections?: readonly PanelSection[];
 	/**
-	 * What a default section's tab or heading says, in place of Clover's own word for it:
+	 * What a default section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or `{ annotations: { en: "Chapters", de: "Kapitel" } }`
 	 * to say it in several, read in the one Clover speaks and marked with its language
 	 * where that is not the page's (WCAG 3.1.2). A `Tab` of your own says it in `label`.
@@ -654,7 +673,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -666,6 +685,13 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
 	items?: Exclude<ItemsLayout, "pager"> | false;
 	/**
@@ -706,7 +732,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
  * uncovered: a click there, Escape or the panel's close button puts it away. Size it with
  * `--clover-body-height`.
  */
-export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
+export declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
 export type DocumentProps = Omit<RootProps, "children"> & {
 	/**
 	 * Whether the page thumbnails start shown beside the page. Default `true`. On a phone,
@@ -736,7 +762,7 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -748,6 +774,13 @@ export type DocumentProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * The title's heading level, to fit the outline of the page around the layout (under
 	 * an `h2`, 3). The panel's sections, and the downloads' groups, are a level below
@@ -777,7 +810,7 @@ export type DocumentProps = Omit<RootProps, "children"> & {
  * where there is room for both, and slides out over the page where there is not. Size
  * it with `--clover-template-document-height`.
  */
-export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, headingLevel, storageKey, collapseControls, canvasOptions, ...root }: DocumentProps): React.JSX.Element;
+export declare function Document({ className, defaultSidebarOpen, singleItem, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, headingLevel, storageKey, collapseControls, canvasOptions, ...root }: DocumentProps): React.JSX.Element;
 export type GalleryProps = Omit<RootProps, "children"> & {
 	/** The size of a grid cell. Default `10rem`, through `--clover-items-size`. */
 	size?: string;
@@ -832,7 +865,7 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -844,6 +877,13 @@ export type GalleryProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * Where the panel's width is remembered once the reader drags its bar
 	 * (`localStorage`). Default `"clover-template-gallery"`; `false` forgets it.
@@ -870,7 +910,7 @@ export type GalleryProps = Omit<RootProps, "children"> & {
  * shows that Manifest in the lightbox. Escape, the close button, or a press outside
  * closes it, and focus returns to the cell.
  */
-export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, storageKey, headingLevel, collapseControls, canvasOptions, style, ...root }: GalleryProps): React.JSX.Element;
+export declare function Gallery({ className, size, height, gap, items, secondary, summary, lightboxItems, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, storageKey, headingLevel, collapseControls, canvasOptions, style, ...root }: GalleryProps): React.JSX.Element;
 /**
  * Focus that follows a control as it moves. A toggle drawn in one place while its pane is
  * open and in another while it is shut is a new element after every press, and the one
@@ -955,6 +995,7 @@ export declare function usePanelPane({ id, beside, defaultOpen, side, followFocu
 		onFocus: (event: React.SyntheticEvent) => void;
 	};
 	pane: React.RefObject<HTMLElement | null>;
+	main: React.RefObject<HTMLElement | null>;
 	over: boolean;
 	open: boolean;
 	shown: boolean;
@@ -1025,6 +1066,8 @@ export interface DrawerOptions {
  */
 export declare function useDrawer({ id, beside: measured, defaultOpen, side, focus, slides, alongside, followFocus, }: DrawerOptions): {
 	pane: React.RefObject<HTMLElement | null>;
+	/** The page's pane it covers, inert while it is open over the page: the layout's `ref`. */
+	main: React.RefObject<HTMLElement | null>;
 	/** Over the page, where there is no room beside it. */
 	over: boolean;
 	open: boolean;
@@ -1102,7 +1145,7 @@ export interface LightboxProps {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -1111,6 +1154,8 @@ export interface LightboxProps {
 	download?: boolean;
 	/** The languages to read the resource in, beside the panel's About heading. Default `true`. */
 	languages?: boolean;
+	/** Clover's interface languages in the panel's language toggle. Default `true`. */
+	interfaceLanguages?: boolean;
 	/** Where the panel's width is remembered once dragged; `false` forgets it. */
 	storageKey?: string | false;
 	/** The Body's `collapseControls`: when the view's controls collapse behind one button. */

package/dist/templates/shared/LightboxView.mjs

@@ -20,6 +20,7 @@ function LightboxView({
   panelLabels,
   download = true,
   languages = true,
+  interfaceLanguages = true,
   storageKey,
   collapseControls,
   canvasOptions,
@@ -75,6 +76,7 @@ function LightboxView({
         /* @__PURE__ */ jsxs(
           SplitPane,
           {
+            ref: pane.main,
             className: "clover-template-lightbox-main",
             min: panel && pane.over ? void 0 : PAGE_MIN,
             children: [
@@ -115,6 +117,7 @@ function LightboxView({
             labels: panelLabels,
             download,
             languages,
+            interfaceLanguages,
             headingLevel: (headingLevel ?? 3) + 1
           }
         )

package/dist/templates/shared/useDrawer.mjs

@@ -16,6 +16,7 @@ function useDrawer({
   var _a, _b;
   const pane = useRef(null);
   const scrim = useRef(null);
+  const main = useRef(null);
   const over = measured === false;
   const [openBeside, setOpenBeside] = useState(defaultOpen);
   const [openOver, setOpenOver] = useState(false);
@@ -23,9 +24,10 @@ function useDrawer({
   const toggle = () => document.querySelector(`button[aria-controls~="${id}"]`);
   const follow = () => followFocus(toggle);
   const handBack = () => {
-    var _a2, _b2;
+    var _a2, _b2, _c;
     if (!((_a2 = pane.current) == null ? void 0 : _a2.contains(document.activeElement))) return;
-    (_b2 = toggle()) == null ? void 0 : _b2.focus();
+    (_b2 = main.current) == null ? void 0 : _b2.removeAttribute("inert");
+    (_c = toggle()) == null ? void 0 : _c.focus();
     follow();
   };
   const tries = useRef(0);
@@ -61,6 +63,14 @@ function useDrawer({
   const sliding = slides && over;
   const shown = sliding ? slide.mounted : open;
   const opened = sliding ? slide.open : open;
+  const covering = over && opened;
+  useIsomorphicLayoutEffect(() => {
+    const element = main.current;
+    if (!element) return;
+    if (covering) element.setAttribute("inert", "");
+    else element.removeAttribute("inert");
+    return () => element.removeAttribute("inert");
+  }, [covering]);
   useEffect(() => {
     if (!tries.current || !pane.current) return;
     tries.current -= 1;
@@ -78,6 +88,8 @@ function useDrawer({
   });
   return {
     pane,
+    /** The page's pane it covers, inert while it is open over the page: the layout's `ref`. */
+    main,
     /** Over the page, where there is no room beside it. */
     over,
     open,

package/dist/ui/ErrorBoundary.mjs

@@ -2,8 +2,10 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { languageProps } from "../i18n/direction.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
 class ErrorBoundary extends React.Component {
   constructor() {
     super(...arguments);
@@ -15,12 +17,24 @@ class ErrorBoundary extends React.Component {
   render() {
     const { error } = this.state;
     if (!error) return this.props.children;
-    return /* @__PURE__ */ jsxs("div", { className: "clover-canvas-error", role: "alert", lang: "en", children: [
-      /* @__PURE__ */ jsx("p", { className: "clover-canvas-error-headline", "data-testid": "headline", children: "Something went wrong" }),
-      error.message && /* @__PURE__ */ jsx("span", { className: "clover-canvas-error-body", children: `Error message: ${error.message}` })
-    ] });
+    return /* @__PURE__ */ jsx(Fallen, { error });
   }
 }
+function Fallen({ error }) {
+  const { t, langOf } = useCloverTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "clover-canvas-error", role: "alert", children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "clover-canvas-error-headline",
+        "data-testid": "headline",
+        ...languageProps(langOf("statusError")),
+        children: t("statusError")
+      }
+    ),
+    error.message && /* @__PURE__ */ jsx("span", { className: "clover-canvas-error-body", lang: "en", children: error.message })
+  ] });
+}
 export {
   ErrorBoundary
 };

package/dist/ui/FieldPill.mjs

@@ -25,6 +25,7 @@ const FieldPill = forwardRef(
       "form",
       {
         role: "search",
+        "aria-labelledby": `${id}-label`,
         className: join("clover-field-pill", classes.form),
         "data-size": size,
         onSubmit: (event) => {
@@ -36,6 +37,7 @@ const FieldPill = forwardRef(
             "label",
             {
               htmlFor: id,
+              id: `${id}-label`,
               style: visuallyHidden,
               ...languageProps(langOf("informationPanelTabsSearch")),
               children: t("informationPanelTabsSearch")

package/dist/ui/GlobeGlyph.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+function GlobeGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      "aria-hidden": "true",
+      focusable: "false",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "48",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "256", cy: "256", r: "200" }),
+        /* @__PURE__ */ jsx("ellipse", { cx: "256", cy: "256", rx: "84", ry: "200" }),
+        /* @__PURE__ */ jsx("path", { d: "M56 256h400M88 160h336M88 352h336" })
+      ]
+    }
+  );
+}
+export {
+  GlobeGlyph
+};

package/dist/ui/LanguageChoice.mjs

@@ -1,5 +1,6 @@
 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Suspense, lazy, useState, useRef, useLayoutEffect } from "react";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
 import { autonym } from "../i18n/autonym.mjs";
 import { languageCode } from "../i18n/languageCode.mjs";
@@ -8,36 +9,102 @@ import { useContainerName } from "../i18n/useContainerName.mjs";
 import { useUniqueId } from "./useUniqueId.mjs";
 import { visuallyHidden } from "./visuallyHidden.mjs";
 import { languageProps } from "../i18n/direction.mjs";
+import { GlobeGlyph } from "./GlobeGlyph.mjs";
+const LanguageMenu = lazy(() => import("./LanguageMenu.mjs"));
+const ROW_MOST = 5;
+function naturalEnd(label, rtl) {
+  const was = label.style.whiteSpace;
+  label.style.whiteSpace = "nowrap";
+  const rect = label.getBoundingClientRect();
+  label.style.whiteSpace = was;
+  return rtl ? rect.left : rect.right;
+}
+function useFolded(fit, count, shown) {
+  const [element, place] = useState(null);
+  const width = useRef(0);
+  const [folded, setFolded] = useState(false);
+  const [measured, setMeasured] = useState(false);
+  const [shownWas, setShownWas] = useState(shown);
+  if (shownWas !== shown) {
+    setShownWas(shown);
+    setFolded(false);
+  }
+  useLayoutEffect(() => {
+    const found = element && (fit == null ? void 0 : fit(element));
+    if (element) setMeasured(!!found);
+    if (!element || !found) return;
+    const { label, box } = found;
+    const check = () => {
+      const rtl = getComputedStyle(box).direction === "rtl";
+      const rect = box.getBoundingClientRect();
+      if (!folded) width.current = rect.width;
+      const end = rtl ? rect.left : rect.right;
+      const start = rtl ? end + width.current : end - width.current;
+      const room = parseFloat(getComputedStyle(box).paddingInlineStart) || 0;
+      const words = naturalEnd(label, rtl);
+      const crosses = rtl ? words < start + room : words > start - room;
+      if (crosses !== folded) setFolded(crosses);
+    };
+    check();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(check);
+    observer.observe(label);
+    if (label.parentElement) observer.observe(label.parentElement);
+    return () => observer.disconnect();
+  }, [fit, folded, count, element]);
+  return { place, folded: measured ? folded : count > ROW_MOST };
+}
 function LanguageChoice({
   languages,
   chosen,
   onChange,
   nameKey,
-  part
+  part,
+  fit
 }) {
   const { t, langOf } = useCloverTranslation();
   const id = useUniqueId();
   const name = useContainerName(t(nameKey), langOf(nameKey));
+  const { place, folded } = useFolded(
+    fit,
+    languages.length,
+    languages.join(" ")
+  );
+  if (folded)
+    return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LanguageMenu,
+      {
+        languages,
+        chosen,
+        onChange,
+        nameKey,
+        part,
+        placeRef: place
+      }
+    ) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     name.node,
-    /* @__PURE__ */ jsx("fieldset", { ...name.props, className: `${part}-languages`, children: languages.map((tag) => {
-      const own = autonym(tag);
-      return /* @__PURE__ */ jsxs("label", { className: `${part}-language`, children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "radio",
-            name: `${id}-language`,
-            checked: tag === chosen,
-            onChange: () => onChange(tag)
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: `${part}-language-code`, children: languageCode(tag) }),
-        " ",
-        /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(tag), children: own }),
-        /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
-      ] }, tag);
-    }) })
+    /* @__PURE__ */ jsxs("fieldset", { ...name.props, className: `${part}-languages`, ref: place, children: [
+      /* @__PURE__ */ jsx("span", { className: "clover-languages-glyph", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GlobeGlyph, {}) }),
+      languages.map((tag) => {
+        const own = autonym(tag);
+        return /* @__PURE__ */ jsxs("label", { className: `${part}-language`, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name: `${id}-language`,
+              checked: tag === chosen,
+              onChange: () => onChange(tag)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: `${part}-language-code`, children: languageCode(tag) }),
+          " ",
+          /* @__PURE__ */ jsx("span", { style: visuallyHidden, ...languageProps(tag), children: own }),
+          /* @__PURE__ */ jsx(Tip, { label: own, lang: tag })
+        ] }, tag);
+      })
+    ] })
   ] });
 }
 export {

package/dist/ui/LanguageMenu.mjs

@@ -0,0 +1,94 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import ControlMenu from "../components/Canvas/ControlMenu.mjs";
+import { autonym } from "../i18n/autonym.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+import { languageCode } from "../i18n/languageCode.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { Chevron } from "./Chevron.mjs";
+import { GlobeGlyph } from "./GlobeGlyph.mjs";
+import { Tip } from "./Tip.mjs";
+import { useUniqueId } from "./useUniqueId.mjs";
+function LanguageMenu({
+  languages,
+  chosen,
+  onChange,
+  nameKey,
+  part,
+  placeRef
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const [open, setOpen] = useState(false);
+  const id = useUniqueId();
+  const button = `${id}-languages`;
+  const close = useCallback(
+    (restoreFocus) => {
+      var _a;
+      setOpen(false);
+      if (restoreFocus) (_a = document.getElementById(button)) == null ? void 0 : _a.focus();
+    },
+    [button]
+  );
+  const name = t(nameKey);
+  const nameLang = langOf(nameKey);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: placeRef,
+      className: `${part}-languages clover-languages-folded`,
+      onBlur: (event) => {
+        const next = event.relatedTarget;
+        if (open && next && !event.currentTarget.contains(next)) setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: button,
+            className: "clover-languages-button",
+            "aria-label": `${languageCode(chosen)}, ${name}`,
+            ...languageProps(nameLang),
+            "aria-expanded": open,
+            "aria-controls": open ? `${button}-menu` : void 0,
+            onClick: () => setOpen((was) => !was),
+            children: [
+              /* @__PURE__ */ jsx(GlobeGlyph, {}),
+              /* @__PURE__ */ jsx("span", { className: "clover-languages-code", "aria-hidden": "true", children: languageCode(chosen) }),
+              /* @__PURE__ */ jsx(Chevron, { open, className: "clover-languages-caret" }),
+              /* @__PURE__ */ jsx(Tip, { label: name, lang: nameLang })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(
+          ControlMenu,
+          {
+            id: `${button}-menu`,
+            triggerId: button,
+            onClose: close,
+            className: "clover-languages-menu",
+            children: /* @__PURE__ */ jsxs("fieldset", { children: [
+              /* @__PURE__ */ jsx("legend", { ...languageProps(nameLang), children: name }),
+              languages.map((tag) => /* @__PURE__ */ jsxs("label", { className: "clover-languages-option", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "radio",
+                    name: `${button}-language`,
+                    checked: tag === chosen,
+                    onChange: () => onChange(tag)
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { ...languageProps(tag), children: autonym(tag) })
+              ] }, tag))
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  LanguageMenu as default
+};

package/dist/ui/Sections.mjs

@@ -27,7 +27,7 @@ function Sections({
   labelLang,
   headingLevel = 3
 }) {
-  var _a;
+  var _a, _b;
   const id = useUniqueId();
   const name = useContainerName(label ?? "", labelLang, label === void 0);
   const buttons = useRef([]);
@@ -55,13 +55,13 @@ function Sections({
     if (scroller2) scroller2.scrollTop -= hidden;
   }, [open, tabs, items, id]);
   const keepInSight = (event) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b2, _c, _d;
     const index = items.findIndex((item) => item.value === open);
     const panel = document.getElementById(`${id}-panel-${index}`);
     const target = event.target;
     if (!panel || target === panel || !panel.contains(target)) return;
     if (!focusShows(target)) return;
-    const above = (_b = (_a2 = buttons.current[index]) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.getBoundingClientRect();
+    const above = (_b2 = (_a2 = buttons.current[index]) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.getBoundingClientRect();
     const below = index + 1 < items.length ? (_d = (_c = buttons.current[index + 1]) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.getBoundingClientRect() : void 0;
     if (!above) return;
     const box = target.getBoundingClientRect();
@@ -71,6 +71,19 @@ function Sections({
   };
   const list = useRef(null);
   const values = items.map((item) => item.value).join("\n");
+  const hadFocus = useRef(false);
+  hadFocus.current = Boolean(
+    (_b = list.current) == null ? void 0 : _b.contains(list.current.ownerDocument.activeElement)
+  );
+  useEffect(() => {
+    var _a2;
+    const root = list.current;
+    if (!root || !hadFocus.current) return;
+    const { activeElement, body } = root.ownerDocument;
+    if (activeElement && activeElement !== body) return;
+    const index = items.findIndex((item) => item.value === open);
+    (_a2 = buttons.current[index]) == null ? void 0 : _a2.focus();
+  }, [values]);
   useIsomorphicLayoutEffect(() => {
     const root = list.current;
     if (tabs || !root || typeof ResizeObserver === "undefined") return;
@@ -111,12 +124,12 @@ function Sections({
       }
     };
     const observer = new ResizeObserver((entries) => {
-      var _a2, _b;
+      var _a2, _b2;
       for (const entry of entries) {
         if (!headings.includes(entry.target)) continue;
         heights.set(
           entry.target,
-          ((_b = (_a2 = entry.borderBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b.blockSize) ?? entry.target.getBoundingClientRect().height
+          ((_b2 = (_a2 = entry.borderBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b2.blockSize) ?? entry.target.getBoundingClientRect().height
         );
       }
       measure();

package/dist/ui/Tip.mjs

@@ -147,7 +147,7 @@ function clipOf(element) {
 }
 let listening = 0;
 function hideTips(event) {
-  if (event.key !== "Escape") return;
+  if (event.key !== "Escape" || event.defaultPrevented) return;
   const shown = /* @__PURE__ */ new Set();
   document.querySelectorAll(":hover > .clover-tip").forEach((tip) => tip.parentElement && shown.add(tip.parentElement));
   const focused = document.activeElement;
@@ -182,7 +182,9 @@ function useTips() {
 }
 function forwardShortcut(event, viewport) {
   const target = event.target;
-  if (!viewport || target === viewport || viewport.contains(target)) return;
+  if (!viewport || target === viewport) return;
+  if (viewport.contains(target) && !target.closest(".clover-canvas-overlays"))
+    return;
   if (!SHORTCUT_KEYS.has(event.key)) return;
   if (event.altKey || event.metaKey || event.ctrlKey) return;
   if (target.closest("input, select, textarea, [contenteditable]")) return;