@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/templates/shared/useSlide.mjs

@@ -1,6 +1,9 @@
 "use client";
 import { useState, useEffect, useLayoutEffect } from "react";
 const SLIDE_MS = 240;
+const PAGE_MIN = "16rem";
+const PANEL_MIN = "14rem";
+const BESIDE_REM = 16 + 14 + 1;
 function useSlide(want) {
   const [mounted, setMounted] = useState(want);
   const [open, setOpen] = useState(want);
@@ -45,6 +48,9 @@ function useWideEnough(element, rem) {
   return wide;
 }
 export {
+  BESIDE_REM,
+  PAGE_MIN,
+  PANEL_MIN,
   SLIDE_MS,
   panelFocus,
   useSlide,

package/dist/templates.css

@@ -1 +1 @@
-@layer clover{.clover-template-lightbox{width:min(96vw,72rem);max-height:94vh;padding:0;border:0;border-radius:var(--clover-radius, 3px);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);box-shadow:0 8px 40px #00000059}.clover-template-lightbox::backdrop{background:#0009}.clover-template-lightbox-content{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset);--clover-body-height: min(70vh, 48rem)}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0;margin:0;font-size:var(--clover-text-l);font-weight:700}button.clover-template-lightbox-close{display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:var(--clover-color-secondary-muted, #f1f1f1);color:inherit;cursor:pointer}button.clover-template-lightbox-close:is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0;margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:400;overflow-wrap:anywhere}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:0}.clover-template-document-sidebar{overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) .clover-canvas-viewport{touch-action:pan-y}.clover-template-document-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-document-panel[hidden]{display:none}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent )}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat right var(--clover-space-2xs) center / 4px var(--clover-space-xl),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:var(--clover-space-s) 0 var(--clover-space-l) #0000001f}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{display:flex;flex-direction:column;gap:var(--clover-space-m);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery-header{display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-title{margin:0;font-size:var(--clover-text-l);line-height:1.25;font-weight:700}.clover-template-gallery-summary{margin:0}}
+@layer clover{.clover-template-lightbox{position:absolute;inset:0;z-index:10;padding:var(--clover-template-lightbox-inset, 0);background:var(--clover-template-lightbox-backdrop, transparent)}.clover-template-lightbox[hidden]{display:none}.clover-template-lightbox-content{position:sticky;top:calc(var(--clover-template-lightbox-top, 0px) + var(--clover-template-lightbox-inset, 0px));box-sizing:border-box;display:flex;flex-direction:column;gap:var(--clover-space-m);height:min(100%,calc(100vh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));padding:var(--clover-inset);border-radius:var(--clover-template-lightbox-radius, 0);background:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e);--clover-body-height: min(70vh, 48rem)}@supports (height: 1svh){.clover-template-lightbox-content{height:min(100%,calc(100svh - var(--clover-template-lightbox-top, 0px) - 2 * var(--clover-template-lightbox-inset, 0px)));--clover-body-height: min(70svh, 48rem)}}.clover-template-lightbox-content>.clover-template-lightbox-panes{flex:1 1 auto;min-height:0}.clover-template-lightbox-main{display:flex;flex-direction:column;gap:var(--clover-space-m);min-height:0}.clover-template-lightbox-main>.clover-template-lightbox-body{flex:1 1 auto;min-height:0}.clover-template-lightbox-main>.clover-items[data-layout=slider]{flex:none;--clover-items-height: 4rem;--clover-items-lines: 1}.clover-template-lightbox-pending{height:var(--clover-body-height, 60vh);background-color:#0001}.clover-template-lightbox-header{display:flex;align-items:center;gap:var(--clover-space-m)}.clover-template-lightbox-title{flex:1 1 auto;min-width:0}.clover-template-lightbox-caption{flex:none;margin:calc(var(--clover-space-xs) - var(--clover-space-m)) 0 0;overflow-wrap:anywhere}.clover-template-lightbox-back:dir(rtl) svg{transform:scaleX(-1)}button:is(.clover-template-lightbox-back,.clover-template-lightbox-close){flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--clover-control);height:var(--clover-control);padding:0;border:0;border-radius:var(--clover-radius-pill, 2rem);background:transparent;color:inherit;cursor:pointer}button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):is(:hover,:focus-visible){background:var(--clover-color-accent, #0065c3);color:var(--clover-color-control-glyph, #fff)}:where([data-high-contrast]) button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):is(:hover,:focus-visible){background:var(--clover-accent-fill)}:where([data-high-contrast]) button:is(.clover-template-lightbox-back,.clover-template-lightbox-close):hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}.clover-template-document{--clover-template-document-height: min(85vh, 56rem);display:flex;flex-direction:column;height:var(--clover-template-document-height);min-height:min-content;overflow:hidden;background-color:var(--clover-color-secondary, #fff);color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-document{--clover-template-document-height: min(85svh, 56rem)}}.clover-template-document-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-s);padding:var(--clover-space-m) var(--clover-inset);border-bottom:1px solid var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-provider{max-width:100%;margin-inline-start:auto}.clover-template-document-toolbar .clover-download-groups{flex-direction:row;flex-wrap:wrap;column-gap:var(--clover-space-m)}.clover-template-document-toolbar .clover-download-group{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--clover-space-s)}.clover-template-document-toolbar .clover-download-title{margin:0}.clover-template-document-toolbar .clover-download-list{display:flex;flex-wrap:wrap;column-gap:var(--clover-space-s)}.clover-template-document-title{flex:1 1 6rem;min-width:0}button.clover-template-document-sidebar-toggle{display:inline-flex;flex:none;align-items:center;gap:var(--clover-space-xs);min-height:var(--clover-control);padding-block:0;padding-inline:var(--clover-space-s) calc(var(--clover-space-xs) + var(--clover-space-3xs));border:0;border-radius:var(--clover-radius-pill, 2rem);background-color:var(--clover-color-control, #1a1d1e);color:var(--clover-color-control-glyph, #fff);cursor:pointer;transition:var(--clover-transition, all .2s cubic-bezier(.16, 1, .3, 1))}button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-color-accent, #0065c3)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:is(:hover,:focus-visible){background-color:var(--clover-accent-fill)}:where([data-high-contrast]) button.clover-template-document-sidebar-toggle:hover:not(:focus-visible){outline:var(--clover-accent-ring-hover);outline-offset:1px}button.clover-template-document-sidebar-toggle:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-template-document-sidebar-toggle .clover-template-document-position{color:inherit;font-size:var(--clover-text-xs);white-space:nowrap}.clover-template-document-sidebar-toggle .clover-template-document-position>.clover-pager-room[hidden]{display:none}.clover-template-document-panes{position:relative;flex:1 1 auto;min-height:16rem}.clover-template-document-panes:is([data-panel=over],[data-narrow])>.clover-template-document-main{isolation:isolate}.clover-template-document-sidebar{contain:size;overflow-y:auto;overscroll-behavior:contain;padding:var(--clover-inset);scroll-padding-top:calc(2 * var(--clover-inset) + var(--clover-control));background-color:var(--clover-color-secondary, #fff)}.clover-template-document-sidebar-closed{position:absolute;top:var(--clover-inset);inset-inline-start:var(--clover-inset);z-index:3}@media (width < 31rem){.clover-template-document-toolbar,.clover-template-document-sidebar-closed,.clover-template-document-spine{--clover-inset: var(--clover-space-m)}}.clover-template-document-sidebar[hidden]{display:none}.clover-template-document-sidebar+.clover-split-handle:before{inset-inline-start:0;inset-inline-end:calc(3px - var(--clover-space-l))}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),minmax(0,1fr));gap:var(--clover-space-xs) 0}.clover-template-document-sidebar .clover-items[data-layout] :is(.clover-items-pictures,.clover-items-caption){grid-column:1 / -1;grid-template-columns:subgrid}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-label{contain:inline-size}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture[data-empty],.clover-template-document-sidebar .clover-items[data-layout] .clover-items-picture img{width:100%;height:auto;max-height:20rem;aspect-ratio:var(--clover-items-ratio, auto);object-fit:contain}.clover-template-document-sidebar .clover-items[data-layout] .clover-items-caption{font-size:var(--clover-text-s)}.clover-template-document-main{position:relative;overflow:hidden;background-color:var(--clover-color-secondary-muted, #e6e8eb)}.clover-template-document-column{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;container-type:size}.clover-template-document-sheets{position:relative}.clover-template-document-sheet{--clover-template-document-tease: calc(2 * var(--clover-inset));display:flex;justify-content:center;box-sizing:border-box;height:min(100cqh - var(--clover-template-document-tease),(100cqw - 2 * var(--clover-inset)) / var(--ratio) + 2 * var(--clover-inset));padding:var(--clover-inset);transition:opacity .2s ease,height .24s cubic-bezier(.16,1,.3,1)}.clover-template-document-sheet[data-fill]{height:calc(100cqh - var(--clover-template-document-tease))}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]{height:100cqh}.clover-template-document-column[data-zoomed] .clover-template-document-sheet[data-active]>*{visibility:hidden}.clover-template-document-column[data-zoomed] .clover-template-document-sheet:not([data-active]){--clover-template-document-muted: 0;pointer-events:none}.clover-template-document-sheet:not([data-active]){--clover-template-document-muted: .618;cursor:pointer;opacity:var(--clover-template-document-muted)}.clover-template-document-sheet:not([data-active]):hover{--clover-template-document-muted: .809}@media (prefers-reduced-motion: reduce){.clover-template-document-sheet{transition:none}}.clover-template-document-sheets[data-single]>.clover-template-document-sheet{--clover-template-document-tease: 0px}.clover-template-document-sheet>*{display:block;height:100%;min-width:0}.clover-template-document-sheet[data-fill]>*{object-fit:contain}.clover-template-document-live{--clover-body-height: 100%;position:absolute;inset-inline:0;top:0;height:100%;transition:opacity .16s ease}.clover-template-document-body .clover-canvas{--clover-canvas-inset: var(--clover-inset);background-color:transparent}.clover-template-document-live[data-moved]:not(:focus-within){opacity:0;pointer-events:none}.clover-template-document-column[data-scrolling] .clover-template-document-live:not(:focus-within) .clover-canvas-controls>*{--clover-controls-shown: 0;--clover-controls-events: none}.clover-template-document-column:not([data-zoomed]) :not(.clover-scene)>.clover-canvas-viewport{touch-action:pan-y}.clover-template-document-scrim[data-for=sidebar]{z-index:2}.clover-template-document-panes[data-narrow]{--clover-template-sidebar-width: min(14rem, 80%)}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar{position:absolute;inset-block:0;inset-inline-start:0;z-index:3;width:var(--clover-template-sidebar-width);border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: right;--clover-template-toward: 1}.clover-template-document-panes[data-narrow]>.clover-template-document-sidebar:dir(rtl){--clover-template-inner: left;--clover-template-toward: -1}.clover-template-document-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-document-spine>*{position:absolute;top:var(--clover-inset);inset-inline-start:-1.5px;translate:-50%}.clover-template-document-spine:dir(rtl)>*{translate:50%}.clover-template-document-spine[data-for=sidebar]>*{inset-inline:auto calc(1.5px - var(--clover-control) / 2);translate:none}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]{inset-inline-start:var(--clover-template-sidebar-width)}.clover-template-document-panes[data-narrow]>.clover-template-document-spine[data-for=sidebar]>*{inset-inline-end:calc(var(--clover-control) / -2)}.clover-template-gallery{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--clover-space-l);padding:var(--clover-inset);color:var(--clover-color-primary, #1a1d1e)}.clover-template-gallery[data-height=fixed]{box-sizing:border-box;height:var(--clover-template-gallery-height)}.clover-template-gallery[data-height=fixed]>.clover-items{flex:1 1 auto;min-height:0;overflow:auto;margin:calc(-1 * var(--clover-items-ring-room, 4px));padding:var(--clover-items-ring-room, 4px)}.clover-template-gallery-header{flex:none;display:flex;flex-direction:column;gap:var(--clover-space-2xs)}.clover-template-gallery-summary{margin:0;--clover-summary-lines: 2}.clover-template-gallery .clover-items{--clover-items-gap: var(--clover-template-gallery-gap, var(--clover-inset));--clover-items-lines: none}}

package/dist/ui/BodyUnloadable.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+const KEYS = {
+  image: "bodyUnloadableImage",
+  video: "bodyUnloadableVideo",
+  audio: "bodyUnloadableAudio",
+  model: "bodyUnloadableModel"
+};
+function BodyUnloadable({
+  kind,
+  shown,
+  room = false
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const key = KEYS[kind];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "clover-body-unloadable",
+      "data-room": room || void 0,
+      role: "status",
+      children: shown && /* @__PURE__ */ jsx("p", { ...languageProps(langOf(key)), children: t(key) })
+    }
+  );
+}
+function BodyNote({ text, lang }) {
+  return /* @__PURE__ */ jsx("div", { className: "clover-body-note", "aria-hidden": "true", children: /* @__PURE__ */ jsx("p", { ...languageProps(lang), children: text }) });
+}
+export {
+  BodyNote,
+  BodyUnloadable
+};

package/dist/ui/Button.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { join } from "../lib/classnames.mjs";
 import { Tip } from "./Tip.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const Button = ({
   className,
   id,
@@ -27,7 +28,7 @@ const Button = ({
       "aria-controls": controls,
       "aria-label": label,
       "aria-keyshortcuts": shortcut == null ? void 0 : shortcut.keys,
-      lang,
+      ...languageProps(lang),
       type: "button",
       children: [
         /* @__PURE__ */ jsx(

package/dist/ui/Chevron.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { join } from "../lib/classnames.mjs";
+function Chevron({
+  open = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      className: join("clover-chevron", className),
+      "data-open": open || void 0,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M3 4.5l3 3 3-3",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+export {
+  Chevron
+};

package/dist/ui/ControlCluster.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
 import Button from "./Button.mjs";
 import { Tip } from "./Tip.mjs";
 import { ControlIcon } from "./controlGlyphs.mjs";
@@ -56,28 +56,29 @@ function renderControl({
   );
 }
 const ControlCluster = ({
-  controls,
-  controlButtons,
-  hasPlaceholder = false,
+  fit = false,
+  clusterRef,
   children
 }) => {
   const [element, setElement] = useState(null);
   const isFullscreen = useWithinFullscreen(element);
   useClusterReach(element);
-  return /* @__PURE__ */ jsxs(
+  const ref = useCallback(
+    (node) => {
+      setElement(node);
+      clusterRef == null ? void 0 : clusterRef(node);
+    },
+    [clusterRef]
+  );
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "clover-canvas-controls",
+      "data-fit": fit || void 0,
       "data-fullscreen": isFullscreen,
-      "data-has-placeholder": hasPlaceholder,
       "data-testid": "clover-canvas-controls",
-      ref: setElement,
-      children: [
-        controls(isFullscreen).map(
-          (spec) => renderControl(spec, controlButtons)
-        ),
-        children
-      ]
+      ref,
+      children
     }
   );
 };

package/dist/ui/EntryThumbnail.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { resolveThumbnail } from "../core/thumbnail.mjs";
+import { join } from "../lib/classnames.mjs";
+const ENTRY_THUMBNAIL_SIZE = 52;
+const PICTURE_SIZE = 336;
+function useThumbnail(source, size, request, hold = false) {
+  const [src, setSrc] = useState(source == null ? void 0 : source.src);
+  const key = source ? JSON.stringify(source) : "";
+  useEffect(() => {
+    if (!source || source.src) return setSrc(source == null ? void 0 : source.src);
+    if (!hold) setSrc(void 0);
+    let live = true;
+    void resolveThumbnail(source, size, request).then(
+      (url) => live && setSrc(url)
+    );
+    return () => {
+      live = false;
+    };
+  }, [key, size]);
+  return src;
+}
+function EntryThumbnail({
+  source,
+  request,
+  large = false,
+  className
+}) {
+  const src = useThumbnail(
+    source,
+    large ? PICTURE_SIZE : ENTRY_THUMBNAIL_SIZE,
+    request
+  );
+  if (!src) return null;
+  return (
+    // eslint-disable-next-line @next/next/no-img-element -- This library also renders outside Next.js.
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: join("clover-entry-thumbnail", className),
+        "data-large": large ? "" : void 0,
+        src,
+        alt: "",
+        ...!large && {
+          width: ENTRY_THUMBNAIL_SIZE / 2,
+          height: ENTRY_THUMBNAIL_SIZE / 2
+        },
+        loading: "lazy",
+        decoding: "async"
+      }
+    )
+  );
+}
+export {
+  ENTRY_THUMBNAIL_SIZE,
+  EntryThumbnail,
+  PICTURE_SIZE,
+  useThumbnail
+};

package/dist/ui/ExitFullscreen.mjs

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { toggleFullscreen } from "../lib/fullscreen.mjs";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const ExitFullscreen = ({ hidden }) => {
   const { t, langOf } = useCloverTranslation();
   const label = t("imageExitFullScreen");
@@ -9,7 +10,7 @@ const ExitFullscreen = ({ hidden }) => {
     "button",
     {
       "aria-label": label,
-      lang: langOf("imageExitFullScreen"),
+      ...languageProps(langOf("imageExitFullScreen")),
       className: "clover-canvas-exit-full-screen",
       hidden,
       onClick: (event) => void toggleFullscreen(event.currentTarget),

package/dist/ui/FieldPill.mjs

@@ -6,6 +6,7 @@ import { join } from "../lib/classnames.mjs";
 import { Steps } from "./Steps.mjs";
 import { Tip } from "./Tip.mjs";
 import { visuallyHidden } from "./visuallyHidden.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const FieldPill = forwardRef(
   function FieldPill2({
     id,
@@ -36,7 +37,7 @@ const FieldPill = forwardRef(
             {
               htmlFor: id,
               style: visuallyHidden,
-              lang: langOf("informationPanelTabsSearch"),
+              ...languageProps(langOf("informationPanelTabsSearch")),
               children: t("informationPanelTabsSearch")
             }
           ),
@@ -60,7 +61,7 @@ const FieldPill = forwardRef(
               {
                 className: "clover-field-pill-note",
                 "aria-hidden": "true",
-                lang: langOf("contentSearchResultsNone"),
+                ...languageProps(langOf("contentSearchResultsNone")),
                 children: t("contentSearchResultsNone")
               }
             )
@@ -70,7 +71,7 @@ const FieldPill = forwardRef(
             {
               type: "button",
               className: join("clover-field-pill-clear", classes.clear),
-              lang: langOf("contentSearchClear"),
+              ...languageProps(langOf("contentSearchClear")),
               onClick: onClear,
               children: [
                 /* @__PURE__ */ jsx(
@@ -103,7 +104,7 @@ const FieldPill = forwardRef(
             {
               type: "submit",
               className: join("clover-field-pill-submit", classes.submit),
-              lang: langOf("commonSearch"),
+              ...languageProps(langOf("commonSearch")),
               children: [
                 /* @__PURE__ */ jsxs(
                   "svg",

package/dist/ui/HideToggle.mjs

@@ -3,6 +3,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useUniqueId } from "./useUniqueId.mjs";
 import { Tip } from "./Tip.mjs";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 function HideToggle({
   hidden,
   onChange,
@@ -42,7 +43,7 @@ function HideToggle({
         ]
       }
     ),
-    /* @__PURE__ */ jsx("span", { id, hidden: true, lang: langOf(key), children: t(key) }),
+    /* @__PURE__ */ jsx("span", { id, hidden: true, ...languageProps(langOf(key)), children: t(key) }),
     /* @__PURE__ */ jsx(
       Tip,
       {

package/dist/ui/LanguageChoice.mjs

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { autonym } from "../i18n/autonym.mjs";
+import { languageCode } from "../i18n/languageCode.mjs";
+import { Tip } from "./Tip.mjs";
+import { useContainerName } from "../i18n/useContainerName.mjs";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { visuallyHidden } from "./visuallyHidden.mjs";
+import { languageProps } from "../i18n/direction.mjs";
+function LanguageChoice({
+  languages,
+  chosen,
+  onChange,
+  nameKey,
+  part
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId();
+  const name = useContainerName(t(nameKey), langOf(nameKey));
+  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);
+    }) })
+  ] });
+}
+export {
+  LanguageChoice
+};

package/dist/ui/ListEnd.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+function ListEnd({ onReached }) {
+  const end = useRef(null);
+  const reached = useRef(onReached);
+  reached.current = onReached;
+  useEffect(() => {
+    const element = end.current;
+    if (!element || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((seen) => {
+      if (seen.some((each) => each.isIntersecting)) reached.current();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: end,
+      className: "clover-list-end",
+      "aria-hidden": "true",
+      style: { display: "block", height: 1 }
+    }
+  );
+}
+export {
+  ListEnd
+};

package/dist/ui/Markup.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useState, useEffect } from "react";
 import { readAs, markdownToPlainText, toPlainText, hasMarkup } from "../core/text.mjs";
 import { localize } from "../core/value.mjs";
-import { directionOf } from "../core/direction.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 function useSanitized(text, markdown = false, headingLevel = 3) {
   const markup = markdown || hasMarkup(text);
   const key = markdown ? `${headingLevel}
@@ -26,9 +26,28 @@ ${text}` : text;
   }, [text, key, markup, markdown, headingLevel]);
   return markup && (html == null ? void 0 : html.for) === key ? html.html : null;
 }
+const INLINE_ONLY = /* @__PURE__ */ new Set([
+  "p",
+  "span",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "a",
+  "b",
+  "i",
+  "em",
+  "strong",
+  "small",
+  "sub",
+  "sup",
+  "label"
+]);
 const Markup = forwardRef(function Markup2({ as: Tag = "span", markup, language, format, headingLevel, ...rest }, ref) {
   const { text, lang } = localize(markup, language);
-  const dir = directionOf(lang);
+  const written = languageProps(lang);
   const kind = readAs(format, text);
   const markdown = kind === "markdown";
   const html = useSanitized(
@@ -38,22 +57,22 @@ const Markup = forwardRef(function Markup2({ as: Tag = "span", markup, language,
   );
   if (!text) return null;
   if (kind === "plain")
-    return /* @__PURE__ */ jsx(Tag, { ref, ...rest, lang, dir, children: text.split(/\r?\n/).map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    return /* @__PURE__ */ jsx(Tag, { ref, ...rest, ...written, children: text.split(/\r?\n/).map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
       index > 0 && /* @__PURE__ */ jsx("br", {}),
       line
     ] }, index)) });
+  const Box = typeof Tag === "string" && INLINE_ONLY.has(Tag) && html && /<(p|ul|ol|div)[\s>]/i.test(html) ? "div" : Tag;
   return html !== null ? /* @__PURE__ */ jsx(
-    Tag,
+    Box,
     {
       ref,
       ...rest,
-      lang,
-      dir,
+      ...written,
       dangerouslySetInnerHTML: { __html: html }
     }
   ) : (
     // Until the sanitizer arrives, Markdown shows without its syntax.
-    /* @__PURE__ */ jsx(Tag, { ref, ...rest, lang, dir, children: markdown ? markdownToPlainText(text) : toPlainText(text) })
+    /* @__PURE__ */ jsx(Tag, { ref, ...rest, ...written, children: markdown ? markdownToPlainText(text) : toPlainText(text) })
   );
 });
 const MetadataList = ({
@@ -73,7 +92,7 @@ const MetadataList = ({
         {
           "data-label": localize(item.label, "none").text.replace(/\s+/g, "-").toLowerCase(),
           children: [
-            /* @__PURE__ */ jsx("dt", { lang: label.lang, children: label.text }),
+            /* @__PURE__ */ jsx("dt", { ...languageProps(label.lang), children: label.text }),
             custom !== void 0 ? /* @__PURE__ */ jsx("dd", { children: custom }) : /* @__PURE__ */ jsx(
               Markup,
               {

package/dist/ui/NavDate.mjs

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { languageProps } from "../i18n/direction.mjs";
+import { readDate } from "../core/dates.mjs";
+import { formatDate, dateTimeOf } from "../core/dates-format.mjs";
+import { langWithin } from "../i18n/config.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+function NavDate({
+  value,
+  className,
+  within
+}) {
+  const { i18n, hostLanguage } = useCloverTranslation();
+  const date = readDate(value);
+  if (!date) return null;
+  const locale = i18n.language;
+  return /* @__PURE__ */ jsx(
+    "time",
+    {
+      className,
+      dateTime: dateTimeOf(date, String(value)),
+      ...languageProps(langWithin(locale, within ?? hostLanguage)),
+      children: formatDate(date, locale)
+    }
+  );
+}
+export {
+  NavDate
+};

package/dist/ui/ReadMore.mjs

@@ -3,7 +3,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { useUniqueId } from "./useUniqueId.mjs";
 import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
-import { useRootLanguage } from "../react/language.mjs";
+import { useRootLanguage } from "../i18n/useRootLanguage.mjs";
+import { languageProps } from "../i18n/direction.mjs";
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function ReadMore({ children }) {
   const { t } = useCloverTranslation();
@@ -31,7 +32,7 @@ function ReadMore({ children }) {
         "aria-controls": id,
         onClick: toggle,
         ref: own.ref,
-        lang: own.langOf(open ? "readLess" : "readMore"),
+        ...languageProps(own.langOf(open ? "readLess" : "readMore")),
         children: open ? t("readLess") : t("readMore")
       }
     )