@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/templates/shared/useDrawer.mjs

@@ -0,0 +1,113 @@
+"use client";
+import { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { useDragToClose } from "./useDragToClose.mjs";
+import { useSlide, panelFocus } from "./useSlide.mjs";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useDrawer({
+  id,
+  beside: measured,
+  defaultOpen,
+  side,
+  focus = panelFocus,
+  slides = true,
+  alongside,
+  followFocus
+}) {
+  var _a, _b;
+  const pane = useRef(null);
+  const scrim = useRef(null);
+  const over = measured === false;
+  const [openBeside, setOpenBeside] = useState(defaultOpen);
+  const [openOver, setOpenOver] = useState(false);
+  const open = over ? openOver : openBeside;
+  const toggle = () => document.querySelector(`button[aria-controls~="${id}"]`);
+  const follow = () => followFocus(toggle);
+  const handBack = () => {
+    var _a2, _b2;
+    if (!((_a2 = pane.current) == null ? void 0 : _a2.contains(document.activeElement))) return;
+    (_b2 = toggle()) == null ? void 0 : _b2.focus();
+    follow();
+  };
+  const tries = useRef(0);
+  const setOpen = (next) => {
+    tries.current = over && next ? 3 : 0;
+    if (!tries.current) follow();
+    if (over) setOpenOver(next);
+    setOpenBeside(next);
+  };
+  const close = () => {
+    handBack();
+    setOpen(false);
+  };
+  const was = useRef(measured);
+  const held = useRef(false);
+  if (was.current === true && measured === false) {
+    const active = document.activeElement;
+    held.current = Boolean(
+      active && (((_a = pane.current) == null ? void 0 : _a.contains(active)) || ((_b = toggle()) == null ? void 0 : _b.contains(active)))
+    );
+  }
+  useIsomorphicLayoutEffect(() => {
+    var _a2;
+    if (held.current) {
+      held.current = false;
+      (_a2 = toggle()) == null ? void 0 : _a2.focus();
+      follow();
+    }
+    if (measured === true) setOpenOver(false);
+    was.current = measured;
+  }, [measured]);
+  const slide = useSlide(slides && over && open);
+  const sliding = slides && over;
+  const shown = sliding ? slide.mounted : open;
+  const opened = sliding ? slide.open : open;
+  useEffect(() => {
+    if (!tries.current || !pane.current) return;
+    tries.current -= 1;
+    const target = focus(pane.current);
+    target == null ? void 0 : target.focus({ preventScroll: true });
+    if (target && document.activeElement === target) tries.current = 0;
+  });
+  useDragToClose(pane, {
+    enabled: over && opened,
+    side,
+    onClose: close,
+    scrim,
+    alongside,
+    exits: !slides
+  });
+  return {
+    pane,
+    /** Over the page, where there is no room beside it. */
+    over,
+    open,
+    /** In the layout: open, or over the page still sliding out. Its pane's `hidden` is `!shown`. */
+    shown,
+    /** Open and, over the page, slid in: its pane's `data-open`. */
+    opened,
+    setOpen,
+    close,
+    /** For the layout's `onKeyDown`: Escape anywhere puts it away over the page. */
+    onKeyDown: (event) => {
+      if (over && open && event.key === "Escape" && !event.defaultPrevented) {
+        event.preventDefault();
+        close();
+      }
+    },
+    /*
+     * The wash over the page beside it, while it is over the page and shown. A press on it
+     * takes no focus, so focus in the pane is still there to hand back to its toggle,
+     * never left to fall to the page (WCAG 2.4.3).
+     */
+    scrim: over && shown && {
+      ref: scrim,
+      "data-open": opened,
+      "aria-hidden": true,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: close
+    }
+  };
+}
+export {
+  useDrawer
+};

package/dist/templates/shared/useFollowFocus.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { useRef, useEffect } from "react";
+const FRAMES = 30;
+function useFollowFocus() {
+  const frame = useRef(0);
+  useEffect(() => () => cancelAnimationFrame(frame.current), []);
+  return (find) => {
+    cancelAnimationFrame(frame.current);
+    let frames = 0;
+    const land = () => {
+      const element = find();
+      if (element && lost()) element.focus();
+      else if (++frames < FRAMES) frame.current = requestAnimationFrame(land);
+    };
+    frame.current = requestAnimationFrame(land);
+  };
+}
+function lost() {
+  const active = document.activeElement;
+  return !active || active === document.body || !active.isConnected || active.closest("[hidden], [inert]") !== null;
+}
+export {
+  useFollowFocus
+};

package/dist/templates/shared/useSlide.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { useState, useEffect, useLayoutEffect } from "react";
+const SLIDE_MS = 240;
+function useSlide(want) {
+  const [mounted, setMounted] = useState(want);
+  const [open, setOpen] = useState(want);
+  useEffect(() => {
+    if (want) {
+      setMounted(true);
+      const frame = requestAnimationFrame(
+        () => requestAnimationFrame(() => setOpen(true))
+      );
+      return () => cancelAnimationFrame(frame);
+    }
+    setOpen(false);
+    const timer = setTimeout(() => setMounted(false), SLIDE_MS);
+    return () => clearTimeout(timer);
+  }, [want]);
+  return { mounted, open: want && open };
+}
+function panelFocus(pane) {
+  const at = (selector) => pane.querySelector(selector);
+  return at('[role="tab"][aria-selected="true"]') ?? at('.clover-sections-button[aria-expanded="true"]') ?? at(".clover-sections-button");
+}
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useWideEnough(element, rem) {
+  const [wide, setWide] = useState();
+  useIsomorphicLayoutEffect(() => {
+    const node = element.current;
+    if (!node) return;
+    const measure = () => {
+      const width = node.clientWidth;
+      if (!width) return;
+      const root = parseFloat(
+        getComputedStyle(document.documentElement).fontSize
+      );
+      setWide(width >= rem * (root || 16));
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [element, rem]);
+  return wide;
+}
+export {
+  SLIDE_MS,
+  panelFocus,
+  useSlide,
+  useWideEnough
+};

package/dist/templates/shared/useSpine.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { useEffect, useLayoutEffect } from "react";
+const useLayout = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useSpineTop(element, from, enabled) {
+  useLayout(() => {
+    const node = element.current;
+    const split = node == null ? void 0 : node.parentElement;
+    if (!enabled || !node || !split) return;
+    const place = () => {
+      const top2 = from();
+      node.style.setProperty(
+        "--clover-template-spine-top",
+        `${top2 ? top2.getBoundingClientRect().top - split.getBoundingClientRect().top : 0}px`
+      );
+    };
+    place();
+    const resized = new ResizeObserver(place);
+    for (const child of Array.from(split.children)) resized.observe(child);
+    const top = from();
+    if (top) resized.observe(top);
+    return () => resized.disconnect();
+  }, [element, enabled]);
+}
+export {
+  useSpineTop
+};

package/dist/templates.css

@@ -0,0 +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}}

package/dist/three/index.d.mts

@@ -0,0 +1,6 @@
+// Generated by dts-bundle-generator v8.0.1
+
+/** Register three.js as the Scene's `three` engine, for every Clover on the page. */
+export declare function registerThreeEngine(): void;
+
+export {};

package/dist/three/index.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { registerSceneEngine } from "../components/Scene/engines.mjs";
+function registerThreeEngine() {
+  registerSceneEngine("three", () => import("../components/Scene/engine.mjs"));
+}
+export {
+  registerThreeEngine
+};

package/dist/ui/Button.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { join } from "../lib/classnames.mjs";
+import { Tip } from "./Tip.mjs";
+const Button = ({
+  className,
+  id,
+  label,
+  children,
+  onClick,
+  expanded,
+  controls,
+  shortcut,
+  lang
+}) => {
+  const buttonType = id.split("-")[0];
+  const dataButton = buttonType.replace(/([A-Z])/g, "-$1").toLowerCase().replace(/^-/, "");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      id,
+      className: join("clover-canvas-button", className),
+      "data-testid": "clover-canvas-button",
+      "data-button": dataButton,
+      onClick,
+      "aria-expanded": expanded,
+      "aria-controls": controls,
+      "aria-label": label,
+      "aria-keyshortcuts": shortcut == null ? void 0 : shortcut.keys,
+      lang,
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            "data-testid": "clover-canvas-button-svg",
+            focusable: "false",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 512 512",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(Tip, { label, shortcut })
+      ]
+    }
+  );
+};
+export {
+  Button as default
+};

package/dist/ui/ControlCluster.mjs

@@ -0,0 +1,87 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import Button from "./Button.mjs";
+import { Tip } from "./Tip.mjs";
+import { ControlIcon } from "./controlGlyphs.mjs";
+import { useClusterReach } from "./useClusterReach.mjs";
+import useWithinFullscreen from "../hooks/useWithinFullscreen.mjs";
+function renderControl({
+  key,
+  id,
+  label,
+  glyph,
+  onClick,
+  expanded,
+  controls,
+  shortcut,
+  lang
+}, controlButtons) {
+  const Custom = controlButtons == null ? void 0 : controlButtons[key];
+  if (Custom)
+    return /* @__PURE__ */ jsx(
+      Custom,
+      {
+        buttonProps: {
+          id,
+          type: "button",
+          "aria-label": label,
+          ...lang && { lang },
+          ...shortcut && { "aria-keyshortcuts": shortcut.keys },
+          onClick,
+          ...expanded !== void 0 && {
+            "aria-expanded": expanded,
+            "aria-controls": controls
+          }
+        },
+        icon: /* @__PURE__ */ jsx(ControlIcon, { label, children: glyph }),
+        label,
+        tip: /* @__PURE__ */ jsx(Tip, { label, shortcut })
+      },
+      key
+    );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      id,
+      label,
+      onClick,
+      expanded,
+      controls,
+      shortcut,
+      lang,
+      children: glyph
+    },
+    key
+  );
+}
+const ControlCluster = ({
+  controls,
+  controlButtons,
+  hasPlaceholder = false,
+  children
+}) => {
+  const [element, setElement] = useState(null);
+  const isFullscreen = useWithinFullscreen(element);
+  useClusterReach(element);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "clover-canvas-controls",
+      "data-fullscreen": isFullscreen,
+      "data-has-placeholder": hasPlaceholder,
+      "data-testid": "clover-canvas-controls",
+      ref: setElement,
+      children: [
+        controls(isFullscreen).map(
+          (spec) => renderControl(spec, controlButtons)
+        ),
+        children
+      ]
+    }
+  );
+};
+export {
+  ControlCluster as default,
+  renderControl
+};

package/dist/ui/Cue.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { join } from "../lib/classnames.mjs";
+import { formatTime } from "../lib/time.mjs";
+function CueTime({
+  start,
+  className
+}) {
+  return /* @__PURE__ */ jsx("span", { className: join("clover-cue-time", className), children: formatTime(start) });
+}
+export {
+  CueTime
+};

package/dist/ui/ErrorBoundary.mjs

@@ -0,0 +1,26 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+class ErrorBoundary extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    return /* @__PURE__ */ jsxs("div", { className: "clover-canvas-error", role: "alert", lang: "en", children: [
+      /* @__PURE__ */ jsx("p", { className: "clover-canvas-error-headline", "data-testid": "headline", children: "Something went wrong" }),
+      error.message && /* @__PURE__ */ jsx("span", { className: "clover-canvas-error-body", children: `Error message: ${error.message}` })
+    ] });
+  }
+}
+export {
+  ErrorBoundary
+};

package/dist/ui/ExitFullscreen.mjs

@@ -0,0 +1,46 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { toggleFullscreen } from "../lib/fullscreen.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+const ExitFullscreen = ({ hidden }) => {
+  const { t, langOf } = useCloverTranslation();
+  const label = t("imageExitFullScreen");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      "aria-label": label,
+      lang: langOf("imageExitFullScreen"),
+      className: "clover-canvas-exit-full-screen",
+      hidden,
+      onClick: (event) => void toggleFullscreen(event.currentTarget),
+      type: "button",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 512 512",
+            width: "20",
+            height: "20",
+            "aria-hidden": "true",
+            focusable: "false",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "45",
+                d: "M244 400L100 256l144-144M120 256h292"
+              }
+            )
+          }
+        ),
+        label
+      ]
+    }
+  );
+};
+export {
+  ExitFullscreen as default
+};

package/dist/ui/FieldPill.mjs

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { join } from "../lib/classnames.mjs";
+import { Steps } from "./Steps.mjs";
+import { Tip } from "./Tip.mjs";
+import { visuallyHidden } from "./visuallyHidden.mjs";
+const FieldPill = forwardRef(
+  function FieldPill2({
+    id,
+    value,
+    onChange,
+    onSubmit,
+    onClear,
+    results,
+    size = "large",
+    classes = {}
+  }, ref) {
+    const { t, langOf } = useCloverTranslation();
+    const search = t("commonSearch");
+    const clear = t("contentSearchClear");
+    return /* @__PURE__ */ jsxs(
+      "form",
+      {
+        role: "search",
+        className: join("clover-field-pill", classes.form),
+        "data-size": size,
+        onSubmit: (event) => {
+          event.preventDefault();
+          onSubmit();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              style: visuallyHidden,
+              lang: langOf("informationPanelTabsSearch"),
+              children: t("informationPanelTabsSearch")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              id,
+              type: "search",
+              className: join("clover-field-pill-query", classes.query),
+              value,
+              placeholder: t("contentSearchPlaceholder"),
+              lang: langOf("contentSearchPlaceholder"),
+              onChange: (event) => onChange(event.target.value)
+            }
+          ),
+          results && (results.total ? /* @__PURE__ */ jsx(Steps, { steps: results, sentence: "contentSearchPosition" }) : (
+            // Shown; the part's status says it to assistive technology.
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "clover-field-pill-note",
+                "aria-hidden": "true",
+                lang: langOf("contentSearchResultsNone"),
+                children: t("contentSearchResultsNone")
+              }
+            )
+          )),
+          value && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: join("clover-field-pill-clear", classes.clear),
+              lang: langOf("contentSearchClear"),
+              onClick: onClear,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    width: "12",
+                    height: "12",
+                    viewBox: "0 0 16 16",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: "M4 4l8 8M12 4l-8 8",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: clear }),
+                /* @__PURE__ */ jsx(Tip, { label: clear })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "submit",
+              className: join("clover-field-pill-submit", classes.submit),
+              lang: langOf("commonSearch"),
+              children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    "aria-hidden": "true",
+                    focusable: "false",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          cx: "7",
+                          cy: "7",
+                          r: "4.5",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          d: "M10.5 10.5L14 14",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: search }),
+                /* @__PURE__ */ jsx(Tip, { label: search })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  FieldPill
+};