@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Panel/About.mjs

@@ -1,18 +1,41 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useEffect, Suspense, lazy } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useEffect, Suspense, lazy } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
 import { isLoneCanvas } from "../../core/load.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useCloverSelector } from "../../react/context.mjs";
+import { InPanelContext, ReadingLanguages } from "./ReadingLanguages.mjs";
 import { Thumbnail, Summary, Metadata, RequiredStatement, Rights, Homepage, SeeAlso, Id } from "../Primitives/Primitives.mjs";
-import { useDownloads, DownloadGroups } from "../Download/Download.mjs";
+import { useDownloads } from "../Download/downloads.mjs";
 import { Provider } from "../Provider/Provider.mjs";
 import { titleTag, titled } from "../../ui/heading.mjs";
 import { Label } from "../Label/Label.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { readDate } from "../../core/dates.mjs";
+const DownloadGroups = lazy(
+  () => import("../Download/Download.mjs").then(({ DownloadGroups: DownloadGroups2 }) => ({
+    default: DownloadGroups2
+  }))
+);
+const NavDate = lazy(
+  () => import("../../ui/NavDate.mjs").then(({ NavDate: NavDate2 }) => ({ default: NavDate2 }))
+);
 const PartOfManifest = lazy(() => import("./PartOfManifest.mjs"));
-function About({
+function About({ languages = true, ...props }) {
+  const inPanel = useContext(InPanelContext);
+  return /* @__PURE__ */ jsx(
+    AboutContent,
+    {
+      ...props,
+      download: !inPanel && props.download !== false,
+      choice: inPanel || !languages ? null : /* @__PURE__ */ jsx(ReadingLanguages, { part: "clover-about" })
+    }
+  );
+}
+function AboutContent({
+  choice,
   canvasSummary = false,
   headingLevel = 3,
   download = true,
@@ -31,26 +54,37 @@ function About({
   const root = useRef(null);
   useEffect(() => {
     const about = root.current;
-    const image = about == null ? void 0 : about.querySelector(".clover-about-thumbnail");
-    if (!about || !image || typeof ResizeObserver === "undefined") return;
-    const heading = about.querySelector(".clover-about-label");
+    const head = about == null ? void 0 : about.querySelector(".clover-about-head");
+    if (!about || !head || typeof ResizeObserver === "undefined") return;
+    const watched = /* @__PURE__ */ new Set();
     const write = () => {
+      const image = head.querySelector(".clover-about-thumbnail");
+      const heading = head.querySelector(".clover-about-label");
+      for (const element of [image, heading])
+        if (element && !watched.has(element)) {
+          watched.add(element);
+          observer.observe(element);
+        }
+      const style = about.style;
+      if (!image) {
+        style.removeProperty("--clover-about-label-height");
+        style.removeProperty("--clover-about-thumbnail-width");
+        return;
+      }
       const height = `${(heading == null ? void 0 : heading.offsetHeight) ?? 0}px`;
       const width = `${image.offsetWidth}px`;
-      const style = about.style;
       if (style.getPropertyValue("--clover-about-label-height") !== height)
         style.setProperty("--clover-about-label-height", height);
       if (style.getPropertyValue("--clover-about-thumbnail-width") !== width)
         style.setProperty("--clover-about-thumbnail-width", width);
     };
-    write();
     let frame = 0;
     const observer = new ResizeObserver(() => {
       cancelAnimationFrame(frame);
       frame = requestAnimationFrame(write);
     });
-    observer.observe(image);
-    if (heading) observer.observe(heading);
+    observer.observe(head);
+    write();
     return () => {
       cancelAnimationFrame(frame);
       observer.disconnect();
@@ -78,7 +112,7 @@ function About({
         Title,
         {
           className: "clover-about-heading",
-          lang: langOf(titleKey),
+          ...languageProps(langOf(titleKey)),
           ...title,
           children: t(titleKey)
         }
@@ -95,6 +129,7 @@ function About({
       tabIndex: -1,
       ...rest,
       children: [
+        choice,
         (thumbnail || label) && /* @__PURE__ */ jsxs("div", { className: "clover-about-head", children: [
           thumbnail && /* @__PURE__ */ jsx(
             Thumbnail,
@@ -104,7 +139,13 @@ function About({
               alt: label ? "" : void 0
             }
           ),
-          label && /* @__PURE__ */ jsx(Label, { as: titleTag(headingLevel), className: "clover-about-label" })
+          label && /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: titleTag(headingLevel),
+              className: "clover-about-label clover-title"
+            }
+          )
         ] }),
         canvasSummary && /* @__PURE__ */ jsx(Summary, { of: "canvas", className: "clover-about-summary" }),
         isLoneCanvas(manifest) && manifest.partOf && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
@@ -118,6 +159,11 @@ function About({
         /* @__PURE__ */ jsx(Summary, { className: "clover-about-summary" }),
         /* @__PURE__ */ jsx(Metadata, { className: "clover-about-metadata" }),
         /* @__PURE__ */ jsx(RequiredStatement, { className: "clover-about-metadata" }),
+        section(
+          "aboutDate",
+          readDate(manifest.navDate),
+          /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(NavDate, { value: manifest.navDate, className: "clover-about-date" }) })
+        ),
         section("aboutProvider", hasAny("provider"), /* @__PURE__ */ jsx(Provider, {})),
         section("aboutRights", manifest.rights, /* @__PURE__ */ jsx(Rights, {})),
         section("aboutHomepage", hasAny("homepage"), /* @__PURE__ */ jsx(Homepage, {})),
@@ -125,14 +171,14 @@ function About({
         section(
           "download",
           download && downloads.page.length + downloads.all.length > 0,
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             DownloadGroups,
             {
               page: downloads.page,
               all: downloads.all,
               headingLevel: headingLevel + 1
             }
-          )
+          ) })
         ),
         section(
           isLoneCanvas(manifest) ? "aboutCanvas" : "aboutManifest",

package/dist/components/Panel/AboutActions.mjs

@@ -0,0 +1,117 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Suspense, lazy, useState, useCallback } from "react";
+import { useDownloads } from "../Download/downloads.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import "./ReadingLanguages.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+const LanguageChoice = lazy(
+  () => import("../../ui/LanguageChoice.mjs").then((module) => ({
+    default: module.LanguageChoice
+  }))
+);
+const ControlMenu = lazy(() => import("../Canvas/ControlMenu.mjs"));
+const DownloadGroups = lazy(
+  () => import("../Download/Download.mjs").then(({ DownloadGroups: DownloadGroups2 }) => ({
+    default: DownloadGroups2
+  }))
+);
+function AboutActions({
+  languages = true,
+  download = true
+}) {
+  const choice = useReadingLanguages();
+  const { page, all } = useDownloads();
+  const offered = download && page.length + all.length > 0;
+  if (!(languages && choice) && !offered) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "clover-about-actions", children: [
+    offered && /* @__PURE__ */ jsx(DownloadButton, { page, all }),
+    languages && choice && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      LanguageChoice,
+      {
+        ...choice,
+        nameKey: "readingLanguage",
+        part: "clover-about"
+      }
+    ) })
+  ] });
+}
+function DownloadButton({
+  page,
+  all
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const [open, setOpen] = useState(false);
+  const id = useUniqueId();
+  const button = `${id}-download`;
+  const close = useCallback(
+    (restoreFocus) => {
+      var _a;
+      setOpen(false);
+      if (restoreFocus) (_a = document.getElementById(button)) == null ? void 0 : _a.focus();
+    },
+    [button]
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "clover-about-download",
+      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-about-download-button",
+            "aria-label": t("download"),
+            ...languageProps(langOf("download")),
+            "aria-expanded": open,
+            "aria-controls": open ? `${button}-menu` : void 0,
+            onClick: () => setOpen((was) => !was),
+            children: [
+              /* @__PURE__ */ jsx(DownloadGlyph, {}),
+              /* @__PURE__ */ jsx(Tip, { label: t("download") })
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          ControlMenu,
+          {
+            id: `${button}-menu`,
+            triggerId: button,
+            onClose: close,
+            className: "clover-about-download-menu",
+            children: /* @__PURE__ */ jsx(DownloadGroups, { page, all, inPopover: true })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function DownloadGlyph() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 512 512",
+      "aria-hidden": "true",
+      focusable: "false",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "56",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M256 64v272M160 240l96 96 96-96M80 352v48a48 48 0 0 0 48 48h256a48 48 0 0 0 48-48v-48" })
+    }
+  );
+}
+export {
+  AboutActions
+};

package/dist/components/Panel/Panel.mjs

@@ -2,9 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useRef, useState, useEffect, Suspense, lazy } from "react";
 import { About } from "./About.mjs";
+import { AboutActions } from "./AboutActions.mjs";
+import { InPanelContext } from "./ReadingLanguages.mjs";
 import { Tip } from "../../ui/Tip.mjs";
 import { Close } from "../Body/glyphs.mjs";
-import { canvasCaptions, canvasTextTranscripts } from "../Canvas/layout.mjs";
+import { canvasTimedText, canvasTextTranscripts } from "../Canvas/layout.mjs";
 import { SEARCH_SET_ID, searchServiceOf } from "../../core/search-service.mjs";
 import { hasMapData } from "../../core/geo-detect.mjs";
 import { tableOfContents } from "../../core/ranges.mjs";
@@ -14,13 +16,17 @@ import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useClover, useCloverSelector } from "../../react/context.mjs";
 import { Sections } from "../../ui/Sections.mjs";
-import { useContainerName } from "../../ui/useContainerName.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 const RootMap = lazy(
   () => import("../Map/MapView.mjs").then((module) => ({ default: module.RootMap }))
 );
 const Collection = lazy(
   () => import("../Collection/Collection.mjs").then((m) => ({ default: m.Collection }))
 );
+const Targets = lazy(
+  () => import("../Items/TargetItems.mjs").then((m) => ({ default: m.TargetsSection }))
+);
 const Contents = lazy(
   () => import("../Contents/Contents.mjs").then((m) => ({ default: m.Contents }))
 );
@@ -47,6 +53,7 @@ const Panel = forwardRef(function Panel2({
   headingLevel = 3,
   as: Tag = "aside",
   download = true,
+  languages = true,
   className,
   children,
   onKeyDown,
@@ -63,7 +70,7 @@ const Panel = forwardRef(function Panel2({
   );
   const tabLabel = (key) => {
     const lang = langOf(key);
-    return lang ? /* @__PURE__ */ jsx("span", { lang, children: t(key) }) : t(key);
+    return lang ? /* @__PURE__ */ jsx("span", { ...languageProps(lang), children: t(key) }) : t(key);
   };
   const hasAnnotations = useCloverSelector(
     (state) => selectListedSets(state.manifest, state.addedSets).length > 0
@@ -73,7 +80,7 @@ const Panel = forwardRef(function Panel2({
       state.manifest,
       state.canvasId
     ).some(
-      (canvas) => canvasCaptions(canvas).length > 0 || canvasTextTranscripts(canvas).length > 0
+      (canvas) => canvasTimedText(canvas).length > 0 || canvasTextTranscripts(canvas).length > 0
     )
   );
   const hasContents = useCloverSelector(
@@ -85,6 +92,12 @@ const Panel = forwardRef(function Panel2({
   const hasMap = useCloverSelector(
     (state) => hasMapData(state.manifest, state.collection)
   );
+  const hasTargets = useCloverSelector(
+    (state) => {
+      var _a2;
+      return (((_a2 = state.targets) == null ? void 0 : _a2.items.length) ?? 0) > 1;
+    }
+  );
   const hasCollection = useCloverSelector(
     (state) => {
       var _a2, _b;
@@ -95,16 +108,26 @@ const Panel = forwardRef(function Panel2({
     (child) => React.isValidElement(child) && child.type === Tab
   );
   const inner = layout === "accordion" ? headingLevel + 1 : headingLevel;
+  const aboutActions = languages || download ? /* @__PURE__ */ jsx(AboutActions, { languages, download }) : void 0;
   const tabs = given.length ? given.map(({ props }) => ({
     value: props.value,
     label: props.label,
-    content: props.children
+    content: props.children,
+    ...props.value === "about" && { actions: aboutActions }
   })) : [
     {
       value: "about",
       label: tabLabel("informationPanelTabsAbout"),
-      content: /* @__PURE__ */ jsx(About, { headingLevel: inner, download })
+      content: /* @__PURE__ */ jsx(About, { headingLevel: inner, download }),
+      actions: aboutActions
     },
+    ...hasTargets ? [
+      {
+        value: "targets",
+        label: tabLabel("informationPanelTabsTargets"),
+        content: later(/* @__PURE__ */ jsx(Targets, { headingLevel: inner }))
+      }
+    ] : [],
     ...hasCollection ? [
       {
         value: "collection",
@@ -165,6 +188,17 @@ const Panel = forwardRef(function Panel2({
       setOwn("search");
     asked.current = query;
   }, [query, searchable, value]);
+  const pickedRegion = useCloverSelector(
+    (state) => {
+      var _a2;
+      return state.annotationId && ((_a2 = state.regions) == null ? void 0 : _a2.entries.some((entry) => entry.id === state.annotationId)) ? state.annotationId : null;
+    }
+  );
+  const hasContentsTab = tabs.some((tab) => tab.value === "contents");
+  useEffect(() => {
+    if (pickedRegion && hasContentsTab && value === void 0)
+      setOwn("contents");
+  }, [pickedRegion, hasContentsTab, value]);
   const shown = value !== void 0 ? value : own;
   const searchOpen = (tabs.some((tab) => tab.value === shown) ? shown : (_a = tabs[0]) == null ? void 0 : _a.value) === "search";
   useEffect(() => {
@@ -206,7 +240,7 @@ const Panel = forwardRef(function Panel2({
             type: "button",
             className: "clover-panel-close",
             "aria-label": t("informationPanelClose"),
-            lang: langOf("informationPanelClose"),
+            ...languageProps(langOf("informationPanelClose")),
             onClick: close,
             children: [
               /* @__PURE__ */ jsx(
@@ -225,18 +259,24 @@ const Panel = forwardRef(function Panel2({
           }
         ),
         /* @__PURE__ */ jsx(
-          Sections,
+          InPanelContext.Provider,
           {
-            items: tabs,
-            layout,
-            value: value !== void 0 ? value : own,
-            onValueChange: (next) => {
-              if (value === void 0) setOwn(next);
-              onValueChange == null ? void 0 : onValueChange(next);
-            },
-            label: t("informationPanelTabs"),
-            labelLang: langOf("informationPanelTabs"),
-            headingLevel
+            value: tabs.some((section) => section.value === "about"),
+            children: /* @__PURE__ */ jsx(
+              Sections,
+              {
+                items: tabs,
+                layout,
+                value: value !== void 0 ? value : own,
+                onValueChange: (next) => {
+                  if (value === void 0) setOwn(next);
+                  onValueChange == null ? void 0 : onValueChange(next);
+                },
+                label: t("informationPanelTabs"),
+                labelLang: langOf("informationPanelTabs"),
+                headingLevel
+              }
+            )
           }
         )
       ]

package/dist/components/Panel/PartOfManifest.mjs

@@ -6,6 +6,7 @@ import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { useClover } from "../../react/context.mjs";
 import { titled } from "../../ui/heading.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function PartOfManifest({
   manifest,
   headingLevel,
@@ -23,7 +24,7 @@ function PartOfManifest({
       Title,
       {
         className: "clover-about-heading",
-        lang: langOf("aboutPartOf"),
+        ...languageProps(langOf("aboutPartOf")),
         ...title,
         children: t("aboutPartOf")
       }
@@ -31,13 +32,13 @@ function PartOfManifest({
     /* @__PURE__ */ jsx("ul", { className: "clover-about-part-of", children: parts.map((part, index) => {
       const label = localize(part.label, language);
       return /* @__PURE__ */ jsxs("li", { children: [
-        label.text && /* @__PURE__ */ jsx("span", { id: `${id}-${index}`, lang: label.lang, children: label.text }),
+        label.text && /* @__PURE__ */ jsx("span", { id: `${id}-${index}`, ...languageProps(label.lang), children: label.text }),
         /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             className: "clover-about-open",
-            lang: langOf("aboutOpenManifest"),
+            ...languageProps(langOf("aboutOpenManifest")),
             "aria-describedby": label.text ? `${id}-${index}` : void 0,
             onClick: () => void clover.goToManifest(part.id, canvasId).then(onOpened),
             children: t("aboutOpenManifest")

package/dist/components/Panel/ReadingLanguages.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, Suspense, lazy } from "react";
+import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+const LanguageChoice = lazy(
+  () => import("../../ui/LanguageChoice.mjs").then((module) => ({
+    default: module.LanguageChoice
+  }))
+);
+const InPanelContext = createContext(false);
+function ReadingLanguages({ part }) {
+  const choice = useReadingLanguages();
+  if (!choice) return null;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LanguageChoice, { ...choice, nameKey: "readingLanguage", part }) });
+}
+export {
+  InPanelContext,
+  ReadingLanguages,
+  useReadingLanguages
+};

package/dist/components/Primitives/Primitives.mjs

@@ -3,12 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { thumbnailSource, resolveThumbnail } from "../../core/thumbnail.mjs";
 import { toPlainText } from "../../core/text.mjs";
-import { localize } from "../../core/value.mjs";
+import { localize, hrefLangOf } from "../../core/value.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useOptionalClover, useOptionalCloverSelector } from "../../react/context.mjs";
 import { MetadataList, Markup } from "../../ui/Markup.mjs";
 import { ReadMore } from "../../ui/ReadMore.mjs";
 import { useProvider, resourceOf } from "./resource.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 import { asArray } from "../../lib/asArray.mjs";
 function useProperty(of, key, given) {
   const provider = useProvider();
@@ -137,6 +138,8 @@ function Id({
     "a",
     {
       href: id,
+      target: "_blank",
+      rel: "noopener noreferrer",
       className: join("clover-id", className),
       ...rest,
       children: id
@@ -162,7 +165,17 @@ function Links({
       children: links.map((resource) => {
         const label = localize(resource.label, language);
         return /* @__PURE__ */ jsxs("li", { children: [
-          /* @__PURE__ */ jsx("a", { href: resource.id, lang: label.text ? label.lang : void 0, children: label.text ? toPlainText(label.text) : resource.id }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: resource.id,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              hrefLang: hrefLangOf(resource),
+              ...languageProps(label.text ? label.lang : void 0),
+              children: label.text ? toPlainText(label.text) : resource.id
+            }
+          ),
           resource.format && /* @__PURE__ */ jsxs("span", { className: "clover-link-format", children: [
             " (",
             resource.format,
@@ -239,7 +252,9 @@ function Thumbnail({
     {
       src,
       alt: toPlainText(label.text),
-      lang: rest.alt === void 0 && label.text ? label.lang : void 0,
+      ...languageProps(
+        rest.alt === void 0 && label.text ? label.lang : void 0
+      ),
       width: size,
       loading: "lazy",
       decoding: "async",

package/dist/components/Provider/Provider.mjs

@@ -2,12 +2,13 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useContext, createContext, useState, useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { toPlainText } from "../../core/text.mjs";
-import { localize } from "../../core/value.mjs";
+import { localize, hrefLangOf } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useOptionalCloverSelector, useOptionalClover } from "../../react/context.mjs";
 import { Label } from "../Label/Label.mjs";
 import { useProvider, resourceOf, ProviderContext } from "../Primitives/resource.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 import { asArray } from "../../lib/asArray.mjs";
 const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 const LogoFailed = createContext(null);
@@ -20,8 +21,8 @@ const isAgent = (value) => Boolean(value) && typeof value === "object" && ["labe
 );
 const isImage = (value) => Boolean(value) && typeof value.id === "string";
 const homepageOf = (agent) => {
-  var _a;
-  return (_a = asArray(agent.homepage).find(isImage)) == null ? void 0 : _a.id;
+  const page = asArray(agent.homepage).find(isImage);
+  return page ? { id: page.id, hrefLang: hrefLangOf(page) } : void 0;
 };
 const nameOf = (agent, language) => {
   var _a;
@@ -85,7 +86,18 @@ function ProviderItem({
     if (content.current && !showsAnything(content.current)) setEmptied(agent);
   }, [agent]);
   if (emptied === agent) return null;
-  return /* @__PURE__ */ jsx("li", { className: "clover-provider-agent", children: /* @__PURE__ */ jsx(ProviderContext.Provider, { value: agent, children: /* @__PURE__ */ jsx(LogoFailed.Provider, { value: failed, children: homepage ? /* @__PURE__ */ jsx("a", { ref: content, href: homepage, className: "clover-provider-link", children }) : /* @__PURE__ */ jsx("span", { ref: content, className: "clover-provider-content", children }) }) }) });
+  return /* @__PURE__ */ jsx("li", { className: "clover-provider-agent", children: /* @__PURE__ */ jsx(ProviderContext.Provider, { value: agent, children: /* @__PURE__ */ jsx(LogoFailed.Provider, { value: failed, children: homepage ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ref: content,
+      href: homepage.id,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      hrefLang: homepage.hrefLang,
+      className: "clover-provider-link",
+      children
+    }
+  ) : /* @__PURE__ */ jsx("span", { ref: content, className: "clover-provider-content", children }) }) }) });
 }
 function Logo({
   of = "manifest",
@@ -124,7 +136,9 @@ function Logo({
       {
         src: image.id,
         alt: alt ?? (name == null ? void 0 : name.text) ?? t("logo"),
-        lang: alt !== void 0 ? void 0 : name ? name.lang : langOf("logo"),
+        ...languageProps(
+          alt !== void 0 ? void 0 : name ? name.lang : langOf("logo")
+        ),
         width: image.width,
         height: image.height,
         loading: "lazy",

package/dist/components/Root/Announcer.mjs

@@ -5,6 +5,7 @@ import { selectCanvas, selectSequence, selectPosition } from "../../core/selecto
 import { localize } from "../../core/value.mjs";
 import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
 function Announcer({
   clover,
   language
@@ -44,11 +45,11 @@ function Announcer({
       style: visuallyHidden,
       children: [
         (message == null ? void 0 : message.label) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { lang: message.lang, children: message.label }),
+          /* @__PURE__ */ jsx("span", { ...languageProps(message.lang), children: message.label }),
           ",",
           " "
         ] }) : null,
-        message && /* @__PURE__ */ jsx("span", { lang: langOf("canvasPosition"), children: message.position })
+        message && /* @__PURE__ */ jsx("span", { ...languageProps(langOf("canvasPosition")), children: message.position })
       ]
     }
   );

package/dist/components/Root/Root.mjs

@@ -1,21 +1,24 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
 import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { CloverContext } from "../../react/context.mjs";
-import { useRootLanguage } from "../../react/language.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
 import { Announcer } from "./Announcer.mjs";
 import { useRootState } from "./useRootState.mjs";
-const Root = forwardRef(function Root2({ as: Tag = "div", className, children, ...props }, ref) {
+const Root = forwardRef(function Root2({ as: Tag = "div", className, children, highContrast, ...props }, ref) {
   const [context, status, rest] = useRootState(props);
   const root = useRootLanguage(ref, rest.lang);
+  const contrast = useHighContrast(highContrast);
   return /* @__PURE__ */ jsx(CloverContext.Provider, { value: context, children: /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
     Tag,
     {
       ref: root.ref,
       className: join("clover-root", className),
       "data-status": status,
+      ...highContrastProps(contrast),
       ...rest,
       children: [
         children,