@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Items/Item.mjs

@@ -1,20 +1,19 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { Suspense, lazy, useState, useRef, useEffect } from "react";
 import { isSound } from "../../core/annotations.mjs";
 import { thumbnailSource, resolveThumbnail } from "../../core/thumbnail.mjs";
 import { localize } from "../../core/value.mjs";
 import { useNearViewport, NEAR_VIEWPORT_MARGIN } from "../Body/useNearViewport.mjs";
 import { watchClamp } from "./clamped.mjs";
-function formatDuration(seconds) {
-  const total = Math.max(0, Math.round(seconds));
-  const h = Math.floor(total / 3600);
-  const m = Math.floor(total % 3600 / 60);
-  const s = String(total % 60).padStart(2, "0");
-  return h ? `${h}:${String(m).padStart(2, "0")}:${s}` : `${m}:${s}`;
-}
+import { languageProps } from "../../i18n/direction.mjs";
+import { readDate } from "../../core/dates.mjs";
+import { formatTime } from "../../lib/time.mjs";
+const NavDate = lazy(
+  () => import("../../ui/NavDate.mjs").then(({ NavDate: NavDate2 }) => ({ default: NavDate2 }))
+);
 function useThumbnail(part, size, request, near) {
-  const source = thumbnailSource(part.resource);
+  const source = part.source !== void 0 ? part.source : thumbnailSource(part.resource);
   const [src, setSrc] = useState(source == null ? void 0 : source.src);
   const key = (source == null ? void 0 : source.src) ?? (source == null ? void 0 : source.service) ?? (source == null ? void 0 : source.fallback);
   useEffect(() => {
@@ -76,7 +75,7 @@ function Picture({
           {
             src,
             alt,
-            lang: alt ? altLang : void 0,
+            ...languageProps(alt ? altLang : void 0),
             width: size,
             height: Math.round(size / ratio),
             loading: "lazy",
@@ -86,7 +85,7 @@ function Picture({
             onError: () => setLoaded(true)
           }
         ),
-        part.duration ? /* @__PURE__ */ jsx("span", { className: "clover-items-duration", children: formatDuration(part.duration) }) : null
+        part.duration ? /* @__PURE__ */ jsx("span", { className: "clover-items-duration", children: formatTime(part.duration) }) : null
       ]
     }
   );
@@ -110,7 +109,7 @@ function ItemLabel({
       {
         ref,
         className: "clover-items-label-text",
-        lang: text ? lang : void 0,
+        ...languageProps(text ? lang : void 0),
         children: text
       }
     ),
@@ -118,7 +117,7 @@ function ItemLabel({
       "span",
       {
         className: "clover-items-label-full",
-        lang,
+        ...languageProps(lang),
         "aria-hidden": "true",
         hidden: true,
         children: text
@@ -131,13 +130,15 @@ function ItemFigure({
   size,
   language,
   request,
-  showSummary = false
+  showSummary = false,
+  secondary = "summary"
 }) {
   var _a, _b;
   const labels = item.parts.map(
     (part) => localize(item.parts.length === 1 ? item.label : part.label, language)
   );
-  const summary = showSummary ? localize(item.summary, language) : null;
+  const summary = showSummary && secondary === "summary" ? localize(item.summary, language) : null;
+  const navDate = showSummary && secondary === "navDate" ? readDate(item.navDate) : null;
   const labeled = labels.some((label) => label.text);
   return /* @__PURE__ */ jsxs(
     "figure",
@@ -162,7 +163,7 @@ function ItemFigure({
             part.id
           );
         }) }),
-        (labeled || (summary == null ? void 0 : summary.text)) && /* @__PURE__ */ jsxs("figcaption", { className: "clover-items-caption", children: [
+        (labeled || navDate || (summary == null ? void 0 : summary.text)) && /* @__PURE__ */ jsxs("figcaption", { className: "clover-items-caption", children: [
           labels.map((label, index) => /* @__PURE__ */ jsx(
             ItemLabel,
             {
@@ -172,13 +173,20 @@ function ItemFigure({
             },
             item.parts[index].id
           )),
-          (summary == null ? void 0 : summary.text) && /* @__PURE__ */ jsx("span", { className: "clover-items-summary", lang: summary.lang, children: summary.text.replace(/<[^>]*>/g, "") })
+          navDate && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(NavDate, { value: item.navDate, className: "clover-items-date" }) }),
+          (summary == null ? void 0 : summary.text) && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "clover-items-summary",
+              ...languageProps(summary.lang),
+              children: summary.text.replace(/<[^>]*>/g, "")
+            }
+          )
         ] })
       ]
     }
   );
 }
 export {
-  ItemFigure,
-  formatDuration
+  ItemFigure
 };

package/dist/components/Items/Items.mjs

@@ -3,21 +3,24 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Suspense, lazy, useRef, useEffect } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { ItemFigure } from "./Item.mjs";
-import { ItemsPager } from "./Pager.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { itemsOfCollection, itemsOfManifest } from "../../core/items.mjs";
+import { selectAnnotationCollection } from "../../core/annotation-sets.mjs";
 import { selectPosition, selectSequence } from "../../core/selectors.mjs";
+import { resolveDirection } from "../../core/sequence.mjs";
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useOptionalClover, useCloverSelector } from "../../react/context.mjs";
 import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
-import { useRootLanguage } from "../../react/language.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { titleTag } from "../../ui/heading.mjs";
 import { useRovingFocus } from "../../ui/useRovingFocus.mjs";
 import { useScrollTrack } from "../../ui/useScrollTrack.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
 const Items = forwardRef(
   function Items2(props, ref) {
     const root = useOptionalClover();
@@ -27,7 +30,24 @@ const Items = forwardRef(
 );
 const StandaloneItems = lazy(() => import("./StandaloneItems.mjs"));
 function ConnectedItems({ of = "views", ...props }) {
-  return of === "members" ? /* @__PURE__ */ jsx(MemberItems, { ...props }) : /* @__PURE__ */ jsx(ViewItems, { ...props });
+  return of === "targets" ? /* @__PURE__ */ jsx(SomeTargets, { ...props }) : of === "annotations" ? /* @__PURE__ */ jsx(SomeAnnotations, { ...props }) : of === "members" ? /* @__PURE__ */ jsx(MemberItems, { ...props }) : /* @__PURE__ */ jsx(ViewItems, { ...props });
+}
+const TargetItems = lazy(() => import("./TargetItems.mjs"));
+function SomeTargets(props) {
+  const several = useCloverSelector(
+    (state) => {
+      var _a;
+      return (((_a = state.targets) == null ? void 0 : _a.items.length) ?? 0) > 1;
+    }
+  );
+  return several ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(TargetItems, { ...props }) }) : null;
+}
+const AnnotationItems = lazy(() => import("./AnnotationItems.mjs"));
+function SomeAnnotations(props) {
+  const named = useCloverSelector(
+    (state) => Boolean(selectAnnotationCollection(state.manifest, state.addedSets))
+  );
+  return named ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AnnotationItems, { ...props }) }) : null;
 }
 function MemberItems({
   onSelect,
@@ -41,6 +61,9 @@ function MemberItems({
     return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
   });
   const items = itemsOfCollection(collection);
+  const direction = resolveDirection(
+    collection == null ? void 0 : collection.viewingDirection
+  );
   if (!items.length) return null;
   const choose = (item, event) => {
     onSelect == null ? void 0 : onSelect(item, event);
@@ -53,7 +76,23 @@ function MemberItems({
       {
         ...rest,
         forwardedRef,
-        steps: stepsOf(items, position, "left-to-right", choose)
+        steps: stepsOf(items, position, direction, choose),
+        nameKey: "informationPanelTabsCollection",
+        position: /* @__PURE__ */ jsx(
+          CountMenu,
+          {
+            position,
+            total: items.length,
+            list: (chosen) => /* @__PURE__ */ jsx(
+              MemberItems,
+              {
+                layout: "list",
+                forwardedRef: null,
+                onSelect: chosen
+              }
+            )
+          }
+        )
       }
     );
   }
@@ -65,6 +104,7 @@ function MemberItems({
       items,
       selected: items.findIndex((item) => item.id === manifestId),
       navigation: "id",
+      rtl: direction === "right-to-left",
       language,
       request: clover.request,
       showSummary: true,
@@ -75,6 +115,7 @@ function MemberItems({
 function ViewItems({
   onSelect,
   forwardedRef,
+  singleItem = false,
   ...rest
 }) {
   const { clover, language } = useOptionalClover();
@@ -86,7 +127,7 @@ function ViewItems({
     (state) => selectSequence(state.manifest).direction
   );
   const items = itemsOfManifest(manifest);
-  if (items.length < 2) return null;
+  if (items.length < (singleItem ? 1 : 2)) return null;
   const select = (item) => clover.goTo(item.id);
   if (rest.layout === "pager") {
     return /* @__PURE__ */ jsx(
@@ -128,32 +169,12 @@ function stepsOf(items, selected, direction, go) {
     }
   };
 }
-function Pager({
-  steps,
-  forwardedRef,
-  /* eslint-disable @typescript-eslint/no-unused-vars -- Items' own, not the nav's */
-  layout,
-  thumbnailSize,
-  renderItem,
-  header,
-  headingLevel,
-  request,
-  language,
-  navigation,
-  of,
-  /* eslint-enable @typescript-eslint/no-unused-vars */
-  ...rest
-}) {
-  const root = useRootLanguage(forwardedRef, rest.lang);
-  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsx(
-    ItemsPager,
-    {
-      ...rest,
-      steps,
-      forwardedRef: root.ref,
-      hostLanguage: root.hostLanguage
-    }
-  ) });
+const PagerLayout = lazy(() => import("./PagerLayout.mjs"));
+const CountMenu = lazy(
+  () => import("./PagerLayout.mjs").then(({ CountMenu: CountMenu2 }) => ({ default: CountMenu2 }))
+);
+function Pager(props) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(PagerLayout, { ...props }) });
 }
 function ItemsView({
   forwardedRef,
@@ -166,6 +187,7 @@ function ItemsView({
   request,
   language,
   showSummary = false,
+  secondary = "summary",
   heading,
   headingLevel = 2,
   renderItem,
@@ -174,6 +196,12 @@ function ItemsView({
   as: Tag = "section",
   className,
   "aria-label": ariaLabel,
+  // The pager's, not a list's, and the views' alone (`ViewItems`).
+  /* eslint-disable @typescript-eslint/no-unused-vars */
+  size,
+  singleItem,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  highContrast,
   ...rest
 }) {
   var _a;
@@ -181,8 +209,24 @@ function ItemsView({
   const id = useUniqueId();
   const root = useRootLanguage(forwardedRef, rest.lang);
   const { langOf } = root;
+  const contrast = useHighContrast(highContrast);
   const slider = layout === "slider";
   const listbox = navigation === "id";
+  const viewport = useRef(null);
+  const masonry = layout === "masonry";
+  useEffect(() => {
+    const box = viewport.current;
+    if (!masonry || !box) return;
+    let release;
+    let live = true;
+    void import("./masonry.mjs").then(({ attachMasonry }) => {
+      if (live) release = attachMasonry(box);
+    });
+    return () => {
+      live = false;
+      release == null ? void 0 : release();
+    };
+  }, [masonry]);
   const track = useScrollTrack({
     align: listbox ? "center" : "start",
     itemCount: items.length
@@ -220,16 +264,16 @@ function ItemsView({
     var _a2;
     if (selected < 0) return;
     const instant = !arrived.current;
-    arrived.current = true;
     if (slider) {
-      track.scrollToIndex(selected, { instant });
+      if (track.scrollToIndex(selected, { instant })) arrived.current = true;
       return;
     }
+    arrived.current = true;
     const option = (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(
       `[data-track-index="${selected}"]`
     );
     if (option) keepInView(option, instant);
-  }, [slider, selected]);
+  }, [slider, selected, track.scrollToIndex]);
   const Title = titleTag(headingLevel);
   const headingLabel = heading ? localize(heading.label, language) : null;
   const headingSummary = heading ? localize(heading.summary, language) : null;
@@ -248,10 +292,11 @@ function ItemsView({
       size: thumbnailSize,
       language,
       request,
-      showSummary
+      showSummary,
+      secondary
     }
   );
-  const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && localize(item.summary, language).text);
+  const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && secondary === "summary" && localize(item.summary, language).text);
   const positionName = (item, index) => positioned(item) ? t("canvasPosition", { index: index + 1, total: items.length }) : void 0;
   const positionLang = (item) => positioned(item) ? langOf("canvasPosition") : void 0;
   const trackStyle = slider ? { display: "flex", margin: 0, padding: 0, listStyle: "none" } : void 0;
@@ -276,7 +321,7 @@ function ItemsView({
         type: "button",
         className: `clover-items-scroll-${step}`,
         "aria-controls": stepping ? void 0 : `${id}-viewport`,
-        lang: langOf(labelKey),
+        ...languageProps(langOf(labelKey)),
         "aria-disabled": !can || void 0,
         tabIndex: can ? void 0 : -1,
         onClick,
@@ -315,15 +360,16 @@ function ItemsView({
       className: join("clover-items", className),
       "data-layout": layout,
       "data-navigation": navigation,
+      ...highContrastProps(contrast),
       ...rest,
       children: [
         heading && ((headingLabel == null ? void 0 : headingLabel.text) || (headingSummary == null ? void 0 : headingSummary.text)) && /* @__PURE__ */ jsxs("header", { className: "clover-items-header", children: [
           (headingLabel == null ? void 0 : headingLabel.text) && /* @__PURE__ */ jsx(
             Title,
             {
-              className: "clover-items-title",
+              className: "clover-items-title clover-title",
               id: `${id}-title`,
-              lang: headingLabel.lang,
+              ...languageProps(headingLabel.lang),
               children: headingLabel.text
             }
           ),
@@ -331,7 +377,7 @@ function ItemsView({
             "p",
             {
               className: "clover-items-description",
-              lang: headingSummary.lang,
+              ...languageProps(headingSummary.lang),
               children: headingSummary.text.replace(/<[^>]*>/g, "")
             }
           ),
@@ -340,7 +386,8 @@ function ItemsView({
             {
               className: "clover-items-homepage",
               href: heading.homepage,
-              lang: langOf("commonViewAll"),
+              hrefLang: heading.homepageLang,
+              ...languageProps(langOf("commonViewAll")),
               children: t("commonViewAll")
             }
           )
@@ -358,7 +405,7 @@ function ItemsView({
                 {
                   id: `${id}-viewport`,
                   className: "clover-items-viewport",
-                  ref: slider ? track.ref : void 0,
+                  ref: slider ? track.ref : viewport,
                   children: listbox ? /* @__PURE__ */ jsx(
                     "div",
                     {
@@ -377,7 +424,7 @@ function ItemsView({
                             role: "option",
                             "aria-selected": isSelected,
                             "aria-label": positionName(item, index),
-                            lang: positionLang(item),
+                            ...languageProps(positionLang(item)),
                             className: "clover-items-item",
                             "data-track-index": index,
                             style: slideStyle,
@@ -406,8 +453,9 @@ function ItemsView({
                             {
                               className: "clover-items-link",
                               href: item.href,
+                              hrefLang: item.hrefLang,
                               "aria-label": positionName(item, index),
-                              lang: positionLang(item),
+                              ...languageProps(positionLang(item)),
                               draggable: false,
                               onClick: (event) => onActivate(item, event),
                               children: figure(item, false)

package/dist/components/Items/Pager.mjs

@@ -1,57 +1,28 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { itemsOfCollection } from "../../core/items.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
-import { useClover, useCloverSelector } from "../../react/context.mjs";
-import { useNavigation, useSequence } from "../../react/hooks.mjs";
 import { Tip } from "../../ui/Tip.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
-function useRootSteps(of, part) {
-  const { clover } = useClover(part);
-  const navigation = useNavigation();
-  const { direction } = useSequence();
-  const collection = useCloverSelector((state) => state.collection);
-  const shown = useCloverSelector((state) => {
-    var _a;
-    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
-  });
-  if (of === "members") {
-    const members = itemsOfCollection(collection);
-    const position = members.findIndex((item) => item.id === shown);
-    return {
-      position,
-      total: members.length,
-      direction: "left-to-right",
-      step: (by) => {
-        const to = members[position + by];
-        if (to) void clover.goToManifest(to.id);
-      }
-    };
-  }
-  return {
-    position: navigation.position,
-    total: navigation.total,
-    direction,
-    step: (by) => by < 0 ? navigation.previous() : navigation.next()
-  };
-}
+import { languageProps } from "../../i18n/direction.mjs";
+import { useRootSteps, PositionText } from "./Position.mjs";
+import { Position } from "./Position.mjs";
 const NEXT_ROTATION = {
   "left-to-right": 0,
   "right-to-left": 180,
   "top-to-bottom": 90,
   "bottom-to-top": 270
 };
-function Chevron({ rotate }) {
+function Chevron({ rotate, size = 16 }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
       "aria-hidden": "true",
       focusable: "false",
-      width: "16",
-      height: "16",
+      width: size,
+      height: size,
       viewBox: "0 0 16 16",
       className: "clover-pager-icon",
       children: /* @__PURE__ */ jsx(
@@ -69,7 +40,7 @@ function Chevron({ rotate }) {
     }
   );
 }
-const StepButton = forwardRef(function StepButton2({ steps, step, className, disabled, onClick, ...rest }, ref) {
+const StepButton = forwardRef(function StepButton2({ steps, step, small = false, className, disabled, onClick, ...rest }, ref) {
   const { t, langOf } = useCloverTranslation();
   const { position, total, direction } = steps;
   if (total < 2) return null;
@@ -83,9 +54,13 @@ const StepButton = forwardRef(function StepButton2({ steps, step, className, dis
     {
       ref,
       type: "button",
-      className: join(`clover-pager-${step}`, className),
+      className: join(
+        small ? "clover-steps-step" : `clover-pager-${step}`,
+        className
+      ),
+      "data-step": small ? step : void 0,
       "data-direction": direction,
-      lang: langOf(labelKey),
+      ...languageProps(langOf(labelKey)),
       disabled,
       "aria-disabled": !available || void 0,
       tabIndex: available ? void 0 : -1,
@@ -96,7 +71,7 @@ const StepButton = forwardRef(function StepButton2({ steps, step, className, dis
       },
       ...rest,
       children: [
-        /* @__PURE__ */ jsx(Chevron, { rotate }),
+        /* @__PURE__ */ jsx(Chevron, { rotate, size: small ? 12 : 16 }),
         /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: label }),
         /* @__PURE__ */ jsx(Tip, { label })
       ]
@@ -113,51 +88,21 @@ const Next = forwardRef(function Next2({ of = "views", ...props }, ref) {
   const steps = useRootSteps(of, "Next");
   return /* @__PURE__ */ jsx(StepButton, { ref, ...props, steps, step: "next" });
 });
-const PositionText = forwardRef(function PositionText2({ steps, as: Tag = "span", className, ...rest }, ref) {
-  const { t, langOf } = useCloverTranslation();
-  const { position, total } = steps;
-  if (total < 2 || position < 0) return null;
-  const index = position + 1;
-  return /* @__PURE__ */ jsxs(
-    Tag,
-    {
-      ref,
-      className: join("clover-pager-position", className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
-          index,
-          " / ",
-          total
-        ] }),
-        /* @__PURE__ */ jsxs("span", { className: "clover-pager-room", "aria-hidden": "true", hidden: true, children: [
-          total,
-          " / ",
-          total
-        ] }),
-        /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: langOf("canvasPosition"), children: t("canvasPosition", { index, total }) })
-      ]
-    }
-  );
-});
-const Position = forwardRef(
-  function Position2({ of = "views", ...props }, ref) {
-    const steps = useRootSteps(of, "Position");
-    return /* @__PURE__ */ jsx(PositionText, { ref, ...props, steps });
-  }
-);
 function ItemsPager({
   steps,
   as: Tag = "nav",
   className,
   forwardedRef,
   hostLanguage,
+  position,
+  nameKey = "itemsLabel",
+  size = "large",
   ...rest
 }) {
   const { t, langOf } = useCloverTranslation(void 0, hostLanguage);
   const name = useContainerName(
-    t("itemsLabel"),
-    langOf("itemsLabel"),
+    t(nameKey),
+    langOf(nameKey),
     rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0,
     hostLanguage
   );
@@ -171,13 +116,28 @@ function ItemsPager({
       className: join("clover-items clover-pager", className),
       "data-layout": "pager",
       "data-direction": steps.direction,
+      "data-size": size === "small" ? "small" : void 0,
       ...rest,
       children: [
         name.node,
-        !rtl && /* @__PURE__ */ jsx(PositionText, { steps }),
-        /* @__PURE__ */ jsx(StepButton, { steps, step: rtl ? "next" : "previous" }),
-        /* @__PURE__ */ jsx(StepButton, { steps, step: rtl ? "previous" : "next" }),
-        rtl && /* @__PURE__ */ jsx(PositionText, { steps })
+        !rtl && (position ?? /* @__PURE__ */ jsx(PositionText, { steps })),
+        /* @__PURE__ */ jsx(
+          StepButton,
+          {
+            steps,
+            step: rtl ? "next" : "previous",
+            small: size === "small"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StepButton,
+          {
+            steps,
+            step: rtl ? "previous" : "next",
+            small: size === "small"
+          }
+        ),
+        rtl && (position ?? /* @__PURE__ */ jsx(PositionText, { steps }))
       ]
     }
   );

package/dist/components/Items/PagerLayout.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
+import { ItemsPager } from "./Pager.mjs";
+import { CountMenu } from "./CountMenu.mjs";
+function PagerLayout({
+  steps,
+  forwardedRef,
+  /* eslint-disable @typescript-eslint/no-unused-vars -- Items' own, not the nav's */
+  layout,
+  thumbnailSize,
+  renderItem,
+  header,
+  headingLevel,
+  request,
+  language,
+  navigation,
+  of,
+  secondary,
+  singleItem,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  highContrast,
+  ...rest
+}) {
+  const root = useRootLanguage(forwardedRef, rest.lang);
+  const contrast = useHighContrast(highContrast);
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsx(
+    ItemsPager,
+    {
+      ...highContrastProps(contrast),
+      ...rest,
+      steps,
+      forwardedRef: root.ref,
+      hostLanguage: root.hostLanguage
+    }
+  ) });
+}
+export {
+  CountMenu,
+  PagerLayout as default
+};