@nulib/clover 4.0.0-beta.0 → 4.0.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
@@ -138,6 +137,7 @@ function ItemFigure({
     (part) => localize(item.parts.length === 1 ? item.label : part.label, language)
   );
   const summary = showSummary ? localize(item.summary, language) : null;
+  const navDate = showSummary ? readDate(item.navDate) : null;
   const labeled = labels.some((label) => label.text);
   return /* @__PURE__ */ jsxs(
     "figure",
@@ -162,7 +162,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 +172,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,
@@ -128,32 +168,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,
@@ -174,6 +194,10 @@ function ItemsView({
   as: Tag = "section",
   className,
   "aria-label": ariaLabel,
+  // The pager's, not a list's.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  size,
+  highContrast,
   ...rest
 }) {
   var _a;
@@ -181,6 +205,7 @@ 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 track = useScrollTrack({
@@ -276,7 +301,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,6 +340,7 @@ 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: [
@@ -323,7 +349,7 @@ function ItemsView({
             {
               className: "clover-items-title",
               id: `${id}-title`,
-              lang: headingLabel.lang,
+              ...languageProps(headingLabel.lang),
               children: headingLabel.text
             }
           ),
@@ -331,7 +357,7 @@ function ItemsView({
             "p",
             {
               className: "clover-items-description",
-              lang: headingSummary.lang,
+              ...languageProps(headingSummary.lang),
               children: headingSummary.text.replace(/<[^>]*>/g, "")
             }
           ),
@@ -340,7 +366,8 @@ function ItemsView({
             {
               className: "clover-items-homepage",
               href: heading.homepage,
-              lang: langOf("commonViewAll"),
+              hrefLang: heading.homepageLang,
+              ...languageProps(langOf("commonViewAll")),
               children: t("commonViewAll")
             }
           )
@@ -377,7 +404,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 +433,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,41 @@
+"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,
+  /* 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
+};

package/dist/components/Items/Position.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { itemsOfCollection } from "../../core/items.mjs";
+import { selectTargetIndex } from "../../core/selectors.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 { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.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;
+  });
+  const targets = useCloverSelector(
+    (state) => {
+      var _a;
+      return ((_a = state.targets) == null ? void 0 : _a.items.length) ?? 0;
+    }
+  );
+  const target = useCloverSelector(
+    (state) => selectTargetIndex(
+      state.targets,
+      state.targetIndex,
+      state.manifest,
+      state.canvasId
+    )
+  );
+  if (of === "targets") {
+    return {
+      position: target,
+      total: targets,
+      direction: "left-to-right",
+      step: (by) => {
+        const to = target + by;
+        if (to >= 0 && to < targets) clover.goToTarget(to);
+      }
+    };
+  }
+  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()
+  };
+}
+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, ...languageProps(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 });
+  }
+);
+export {
+  Position,
+  PositionText,
+  useRootSteps
+};