@nulib/clover 4.4.2 → 4.5.0

package/dist/index.d.mts

@@ -307,8 +307,9 @@ export declare function buildContentState({ manifestId, canvasId, type, region,
  * state (JSON or base64url). The resource may be a Manifest, a Collection (its first
  * Manifest is shown), a lone Canvas (its `partOf` Manifest, or a Manifest made around
  * it), or annotations, an AnnotationPage or AnnotationCollection (the Manifest their first
- * annotation's Canvas is `partOf`, at that Canvas). Everything is fetched once, with the
- * request settings, and upgraded to Presentation 4.
+ * annotation's Canvas is `partOf`, at that Canvas). It may also be a IIIF Image service,
+ * its `info.json` or its base URI, shown as the one image it is (`imageServiceContent`).
+ * Everything is fetched once, with the request settings, and upgraded to Presentation 4.
  */
 export type IIIFContent = string | Record<string, unknown>;
 /**
@@ -934,7 +935,7 @@ export type ControlButtonProps = {
 		"aria-label": string;
 		/**
 		 * The language of the name, when it is not the page's: a Choice's own label, or one
-		 * of Clover's strings in another language. Spread it with the rest (WCAG 3.1.2).
+		 * of Clover's interface strings in another language. Spread it with the rest (WCAG 3.1.2).
 		 */
 		lang?: string;
 		/** The key the Canvas answers to for this control, when it has one. */
@@ -1012,6 +1013,11 @@ export interface CloverCanvasOptions {
 	maxZoomPixelRatio?: number;
 	/** Smallest zoom, as a fraction of the home zoom. Default 0.9. */
 	minZoomImageRatio?: number;
+	/**
+	 * Whether home may enlarge the image past `maxZoomPixelRatio` to fill the box. False,
+	 * home stops at that zoom and centers the image, smaller than the box. Default true.
+	 */
+	upscale?: boolean;
 	/** Seconds for an animation to close most of its distance. 0 disables easing. */
 	animationTime?: number;
 	/**
@@ -1429,6 +1435,12 @@ export interface ItemsProps extends Omit<React.HTMLAttributes<HTMLElement>, "onS
 	 * under the one above it, still in reading order, left to right.
 	 */
 	layout?: ItemsLayout;
+	/**
+	 * The slider's direction: a row (`horizontal`), or a column (`vertical`) that fills
+	 * the height of what holds it, as a filmstrip beside the Body, its pictures as wide as
+	 * the column. Default `"horizontal"`.
+	 */
+	orientation?: "horizontal" | "vertical";
 	/**
 	 * The line under an item's label, where it has one (a Collection's members do): its
 	 * `summary` (the default), its `navDate`, or `none`. Default `"summary"`.
@@ -1676,7 +1688,7 @@ export declare function usePanelSections(sections?: readonly PanelSection[]): Pa
 /** How the sections are laid out. */
 export type SectionsLayout = "tabs" | "accordion";
 /**
- * What a page calls a section, in place of Clover's own word for it: its words, taken to
+ * What a page calls a section, in place of its word in Clover's interface language: its words, taken to
  * be in the page's language, or its words by language tag, one of which the tab carries
  * as its `lang` where it is not the page's (WCAG 3.1.2).
  */
@@ -1747,6 +1759,13 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 * leaves the choice out, and the Root reads in its `language`, else the reader's.
 	 */
 	languages?: boolean;
+	/**
+	 * Whether About's language toggle also offers Clover's interface languages (its
+	 * control labels, section titles and announcements) that the resource has none of: the
+	 * visitor's and the site's, where they differ, one choice for the page. Default
+	 * `true`; `false` leaves them out, and Clover speaks the visitor's.
+	 */
+	interfaceLanguages?: boolean;
 	/**
 	 * Which of the default sections the panel may have, in Clover's own order: with
 	 * `["contents", "search"]` it has those two and no About. Each still shows only where
@@ -1755,7 +1774,7 @@ export interface PanelProps extends Omit<React.HTMLAttributes<HTMLElement>, "def
 	 */
 	sections?: readonly PanelSection[];
 	/**
-	 * What a default section's tab or heading says, in place of Clover's own word for it:
+	 * What a default section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or `{ annotations: { en: "Chapters", de: "Kapitel" } }`
 	 * to say it in several, read in the one Clover speaks and marked with its language
 	 * where that is not the page's (WCAG 3.1.2). A `Tab` of your own says it in `label`.
@@ -1825,6 +1844,13 @@ export interface AboutProps extends React.HTMLAttributes<HTMLElement> {
 	 * In a Panel, its heading offers them (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Alone, outside a Panel: whether its language toggle also offers Clover's interface
+	 * languages (its control labels, section titles and announcements) that the resource
+	 * has none of, the visitor's and the site's, where they differ. In a Panel, the Panel's
+	 * `interfaceLanguages`. Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 }
 /**
  * Everything the Manifest says about itself, in the order 3.x's About tab shows it:
@@ -1835,11 +1861,12 @@ export interface AboutProps extends React.HTMLAttributes<HTMLElement> {
  * it. The downloads are Download's: the `rendering` of the page in view ("This page")
  * and of the Manifest ("All pages").
  *
- * Where what it says comes in several languages, the languages to read the resource in
- * (`ReadingLanguages`): over what About says, or, in a Panel's `about` section, beside
- * its heading, where they show whichever section is open.
+ * Where what it says comes in several languages, or the visitor's language differs from
+ * the site's, the languages to read in, as one toggle (`LanguageToggle`): over what About
+ * says, or, in a Panel's `about` section, beside its heading, where it shows whichever
+ * section is open.
  */
-export declare function About({ languages, ...props }: AboutProps): React.JSX.Element;
+export declare function About({ languages, interfaceLanguages, ...props }: AboutProps): React.JSX.Element;
 export interface AnnotationsProps extends React.HTMLAttributes<HTMLElement> {
 	/**
 	 * Every annotation in the Manifest (default), as the Viewer's panel lists them: by
@@ -2433,7 +2460,7 @@ export declare function useLocalized(value: LanguageMapLike): LocalizedValue;
 /** Clover's interface strings in the current language: `t("commonClose")`. */
 export declare function useT(): (key: string, values?: Record<string, unknown>) => string;
 /**
- * The language of one of Clover's strings where it is not the page's (a French reader on
+ * The language of one of Clover's interface strings where it is not the page's (a French reader on
  * an English page, or a key that fell back to English), for the element that shows it, or
  * is named by it, to carry as `lang` (WCAG 3.1.2). Undefined otherwise: the string takes
  * the page's language. The page's is the nearest `lang` around the Root.
@@ -2578,6 +2605,13 @@ export interface CloverContextValue {
 	 * inside reads in it, until the Root is given another `language`.
 	 */
 	chooseLanguage?: (tag: string) => void;
+	/**
+	 * Whether a language toggle of the Root's is drawn (About's, `LanguageToggle`), so the
+	 * parts that would offer their own (an annotation set's languages, a Transcript's
+	 * caption files) follow it instead; `drawsToggle` says one is, until its cleanup runs.
+	 */
+	toggleDrawn?: boolean;
+	drawsToggle?: () => () => void;
 	/** Renderers of the host's own, for `Body` to draw some views with. */
 	renderers?: BodyRenderer[];
 }
@@ -2718,7 +2752,8 @@ export declare function regionSource(canvas: Json | undefined, rect: {
 	h: number;
 }, image?: string): ThumbnailSource | null;
 /**
- * Clover's translations, without a translation library.
+ * Clover's interface language: the language of its control labels ("Zoom in"), section
+ * titles ("About") and announcements ("Item 2 of 17"), without a translation library.
  *
  * Clover needs a key lookup with a fallback chain, `{{name}}` interpolation and language
  * detection. i18next did that at about 20 kB gzipped across three packages;
@@ -2726,44 +2761,84 @@ export declare function regionSource(canvas: Json | undefined, rect: {
  * them, so existing `initCloverI18n` calls keep working:
  *
  *     initCloverI18n({
- *       lng: "de",
+ *       languages: ["de"],
  *       fallbackLng: ["de", "en"],
  *       resources: { de: { clover: { informationPanelTabsAbout: "Über" } } },
  *     });
  *
+ * Which it speaks (Mat, 2026-11-05): the languages configured (`languages`, or `lng` for
+ * one), then the page's `<html lang>` (Mat, 2026-11-05: derived, as the visitor's is),
+ * else English; then the visitor's languages, from
+ * the browser. The visitor's first that Clover has strings for is the default, else the
+ * first configured; where the two differ, `interfaceLanguages()` offers both, and
+ * `chooseInterfaceLanguage` takes the visitor's choice.
+ *
  * English ships with Clover. Each other language it ships loads the first time Clover is
  * to speak it, so until it arrives a string shows in English, marked as English by
- * `langOf`, and the readers re-render when it does. `cloverI18n.ready()` waits for it.
+ * `langOf`, and the parts re-render when it does. `cloverI18n.ready()` waits for it.
  */
 export declare const CLOVER_I18N_NAMESPACE = "clover";
 /** `resources[language][namespace][key]` — i18next's resource shape. */
 export type CloverI18nResources = Record<string, Record<string, Record<string, string>>>;
 export interface CloverI18nOptions {
 	/**
-	 * The language to use. When not given: the page's `<html lang>`, then the browser's
-	 * languages, so Clover speaks the language of the page around it.
+	 * The languages your site offers Clover's interface in, most preferred first. A
+	 * visitor whose own language Clover has strings for sees theirs, with these offered
+	 * beside it, with the page's `<html lang>`; any other visitor sees the first of these.
+	 * When not given, the page's
+	 * `<html lang>`, else English.
 	 */
+	languages?: string | readonly string[];
+	/** One language to offer, as `languages: [lng]` does. */
 	lng?: string;
 	/** Languages to try, in order, when a key is missing. English is always last. */
 	fallbackLng?: string | readonly string[] | false;
 	/** Strings to add or override, merged into what Clover ships. */
 	resources?: CloverI18nResources;
 }
-/** One of Clover's strings, and the language it is written in. */
+/** One of Clover's interface strings, and the language it is written in. */
 export interface CloverString {
 	text: string;
 	/** The language the string came from; undefined when no language has the key. */
 	lang?: string;
 }
 declare const cloverI18n: {
-	/** The language set, or else the first of the reader's that Clover has strings for. */
+	/**
+	 * Clover's interface language: the one the visitor chose, else the first of the chain
+	 * whose strings have loaded.
+	 */
 	readonly language: string;
+	/** The interface language the visitor chose, if they chose one. */
+	readonly chosenLanguage: string | undefined;
+	/**
+	 * The tag Clover has strings for that speaks `lng` (`zh-Hans` for `zh-CN`, `en` for
+	 * `en-US`), shipped or given by the page; none where it has no strings for it.
+	 */
+	stringsFor(lng: string): string | undefined;
+	/**
+	 * The interface languages to offer, and the one in use (`chosen`): the default (the
+	 * visitor's, where Clover has strings for it), then the languages configured, each as
+	 * the tag Clover has strings for. A choice is worth offering only where there are two
+	 * or more.
+	 */
+	interfaceLanguages(): {
+		languages: string[];
+		chosen: string;
+	};
 	/**
-	 * The language Clover's strings are in: the first of the lookup chain that has any. A
+	 * Speak `lng` whatever the visitor's languages, as their choice of interface language;
+	 * none goes back to the default. Settles once its strings have loaded, or failed to.
+	 *
+	 *     await cloverI18n.chooseInterfaceLanguage("fr");
+	 */
+	chooseInterfaceLanguage(lng?: string): Promise<void>;
+	/**
+	 * The language Clover's interface strings are in: the first of the lookup chain that has any. A
 	 * language set with no strings of its own resolves to the next, English at the last.
 	 */
 	readonly resolvedLanguage: string;
-	changeLanguage(lng: string): void;
+	/** As `chooseInterfaceLanguage` does: i18next's name for it. */
+	changeLanguage(lng: string): Promise<void>;
 	/** A string and the language it came from, which a missing key leaves in another. */
 	resolve(key: string, values?: Record<string, unknown>, namespace?: string): CloverString;
 	t(key: string, values?: Record<string, unknown>, namespace?: string): string;
@@ -2778,7 +2853,7 @@ declare const cloverI18n: {
 	 * Settles once the language Clover speaks has loaded, or failed to: for a server render,
 	 * or a test, that needs the strings in place before it draws.
 	 *
-	 *     await initCloverI18n({ lng: "fr" }).ready();
+	 *     await initCloverI18n({ languages: ["fr"] }).ready();
 	 */
 	ready(): Promise<void>;
 	/** For `useSyncExternalStore`: re-render readers when the language or strings change. */
@@ -2787,8 +2862,11 @@ declare const cloverI18n: {
 };
 export type CloverI18n = typeof cloverI18n;
 /**
- * Set Clover's language and add or override strings. Safe to call more than once: each
- * call merges its `resources` and applies any `lng` or `fallbackLng` it is given.
+ * Configure Clover's interface language (`languages`, or `lng` for one) and add or
+ * override strings. Safe to call more than once: each call merges its `resources` and
+ * applies any `languages`, `lng` or `fallbackLng` it is given. A visitor whose language
+ * Clover has strings for still sees theirs first, with yours offered beside it; to speak
+ * one language whatever the visitor's, `chooseInterfaceLanguage`.
  */
 export declare function initCloverI18n(options?: CloverI18nOptions): CloverI18n;
 export type DefaultProps = Omit<RootProps, "children"> & {
@@ -2820,7 +2898,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 */
 	panelSections?: readonly PanelSection[];
 	/**
-	 * What a panel section's tab or heading says, in place of Clover's own word for it:
+	 * What a panel section's tab or heading says, in place of its word in Clover's interface language:
 	 * `{ annotations: "Chapters" }`, or a word by language tag to say it in several (the
 	 * Panel's `labels`).
 	 */
@@ -2832,6 +2910,13 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	 * it says of itself comes in several (the Panel's `languages`). Default `true`.
 	 */
 	languages?: boolean;
+	/**
+	 * Default, Document and Gallery: whether the panel's language toggle, beside its About
+	 * heading, also offers Clover's interface languages (its control labels, section
+	 * titles and announcements) that the resource has none of, the visitor's and the
+	 * site's, where they differ (the Panel's `interfaceLanguages`). Default `true`.
+	 */
+	interfaceLanguages?: boolean;
 	/** The thumbnails under the Body: a layout, or `false` for none. Default `slider`. */
 	items?: Exclude<ItemsLayout, "pager"> | false;
 	/**
@@ -2860,7 +2945,7 @@ export type DefaultProps = Omit<RootProps, "children"> & {
 	/** The Body's Canvas `options`: its gestures, zoom limits and motion. */
 	canvasOptions?: CloverCanvasOptions;
 };
-declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
+declare function Default({ className, header, headingLevel, panel, defaultPanelOpen, panelLayout, panelSections, panelLabels, download, languages, interfaceLanguages, items, singleItem, storageKey, fill, collapseControls, canvasOptions, ...root }: DefaultProps): React.JSX.Element;
 /**
  * A layout the Viewer draws: one from `@nulib/clover/templates`, or a component of your
  * own that takes the `Clover.Root` props.

package/dist/lib/renderer/CanvasRenderer.mjs

@@ -18,6 +18,7 @@ import { sameSpec, prepareItem, layoutItems, pixelsToWorld, itemToWorld, MEDIA_K
 const DEFAULTS = {
   maxZoomPixelRatio: 1.1,
   minZoomImageRatio: 0.9,
+  upscale: true,
   animationTime: 0.09,
   animationDuration: void 0,
   springStiffness: 6.5,
@@ -355,9 +356,9 @@ class CanvasRenderer {
    * The camera that frames `bounds`, turned by `rotation`, in the part of the viewport
    * `inset` leaves: centered there, off the viewport's center where its sides differ.
    */
-  fit(bounds, rotation, { top, right, bottom, left }) {
+  fit(bounds, rotation, { top, right, bottom, left }, maxZoom = Infinity) {
     const { width, height } = this.viewport;
-    const { zoom } = fitCamera(
+    const fitted = fitCamera(
       bounds,
       {
         width: Math.max(1, width - left - right),
@@ -365,6 +366,7 @@ class CanvasRenderer {
       },
       rotation
     );
+    const zoom = Math.min(fitted.zoom, maxZoom);
     const center = anchoredCenter(
       rectCenter(bounds),
       { x: (width + left - right) / 2, y: (height + top - bottom) / 2 },
@@ -415,13 +417,21 @@ class CanvasRenderer {
   getZoomLimits() {
     var _a;
     const home = ((_a = this.homeCamera()) == null ? void 0 : _a.zoom) ?? 1;
-    const worldPerPixel = this.items.length ? Math.min(...this.items.map((item) => pixelsToWorld(item).x)) : 1;
     return {
       home,
       min: home * this.options.minZoomImageRatio,
-      max: Math.max(home, this.options.maxZoomPixelRatio / worldPerPixel)
+      max: Math.max(home, this.closestZoom())
     };
   }
+  /**
+   * `maxZoomPixelRatio` is CSS pixels per *image* pixel, and world units may differ from
+   * those. Measured against the sharpest image in the scene, so an inset photograph
+   * denser than the page it sits on can still be zoomed to its own full resolution.
+   */
+  closestZoom() {
+    const worldPerPixel = this.items.length ? Math.min(...this.items.map((item) => pixelsToWorld(item).x)) : 1;
+    return this.options.maxZoomPixelRatio / worldPerPixel;
+  }
   home(immediate = false) {
     const home = this.homeCamera();
     if (!home) return;
@@ -723,7 +733,12 @@ class CanvasRenderer {
     if (!this.worldBounds) return null;
     const turn = 2 * Math.PI;
     const upright = Math.round(this.camera.destination.rotation / turn) * turn || 0;
-    return this.fit(this.worldBounds, upright, this.inset);
+    return this.fit(
+      this.worldBounds,
+      upright,
+      this.inset,
+      this.options.upscale ? Infinity : this.closestZoom()
+    );
   }
   /**
    * Keep the camera usable: zoom within limits, and the center over the world so the

package/dist/map/index.d.mts

@@ -161,8 +161,9 @@ export interface CloverRequest {
  * state (JSON or base64url). The resource may be a Manifest, a Collection (its first
  * Manifest is shown), a lone Canvas (its `partOf` Manifest, or a Manifest made around
  * it), or annotations, an AnnotationPage or AnnotationCollection (the Manifest their first
- * annotation's Canvas is `partOf`, at that Canvas). Everything is fetched once, with the
- * request settings, and upgraded to Presentation 4.
+ * annotation's Canvas is `partOf`, at that Canvas). It may also be a IIIF Image service,
+ * its `info.json` or its base URI, shown as the one image it is (`imageServiceContent`).
+ * Everything is fetched once, with the request settings, and upgraded to Presentation 4.
  */
 export type IIIFContent = string | Record<string, unknown>;
 export interface MapProps extends Omit<React.HTMLAttributes<HTMLElement>, "onSelect"> {

package/dist/react/readingLanguages.mjs

@@ -1,16 +1,29 @@
 "use client";
 import { useMemo } from "react";
 import { descriptionLanguages, startingLanguage } from "../core/language-choice.mjs";
+import { sameLanguage } from "../i18n/languages.mjs";
 import { useClover, useCloverSelector } from "./context.mjs";
 function useReadingLanguages() {
-  const { language, chooseLanguage } = useClover("About");
+  const { language, chooseLanguage, toggleDrawn } = useClover("About");
   const manifest = useCloverSelector(
     (state) => state.manifest
   );
   const languages = useMemo(() => descriptionLanguages(manifest), [manifest]);
   const chosen = startingLanguage(languages, language);
-  return chosen && chooseLanguage ? { languages, chosen, onChange: chooseLanguage } : null;
+  return chosen && chooseLanguage ? {
+    languages,
+    chosen,
+    onChange: chooseLanguage,
+    drawn: toggleDrawn ?? false
+  } : null;
+}
+function covers(offered, languages) {
+  if (!(offered == null ? void 0 : offered.drawn)) return false;
+  return languages.every(
+    (tag) => !!tag && tag !== "none" && offered.languages.some((each) => sameLanguage(each, tag))
+  );
 }
 export {
+  covers,
   useReadingLanguages
 };

package/dist/styles/default.css

@@ -1 +1 @@
-@layer clover{.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column;color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-default{--clover-body-height: min(65svh, 40rem)}}.clover-template-default:is([data-fill],:fullscreen){--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default:is([data-fill],:fullscreen)>.clover-template-default-panes{flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center;gap:var(--clover-space-s);padding:var(--clover-inset)}@media (width < 31rem){.clover-template-default-header,.clover-template-default-rail{--clover-inset: var(--clover-space-m)}}.clover-template-default-pager{flex:none;padding-block:0}.clover-template-default-header:has(>.clover-template-default-pager){flex-wrap:wrap;row-gap:var(--clover-space-xs)}.clover-template-default-header:has(>.clover-template-default-pager)>:is(.clover-template-default-title,.clover-template-default-pager){align-self:last baseline}.clover-template-default-header:has(>.clover-template-default-collection-row){display:grid;grid-template-columns:minmax(0,1fr) fit-content(38.2%);row-gap:var(--clover-space-xs)}.clover-template-default-header>:is(.clover-template-default-title,.clover-template-default-collection-row){grid-column:1}.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none}.clover-template-default-collection-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-xs) var(--clover-space-s);min-width:0}.clover-template-default-collection{min-width:0;margin:0;overflow-wrap:anywhere;color:var(--clover-color-primary-muted, #26292b);font-size:inherit}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}@container clover-template-default-main (width < 36rem){.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-row:1;align-self:start}.clover-template-default-header>.clover-template-default-collection-row{grid-column:1 / -1}}@container clover-template-default-main (width < 26rem){.clover-template-default:has(.clover-template-default-panel[data-about]) .clover-template-default-provider{display:none}}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column;container:clover-template-default-main / inline-size}.clover-template-panes[data-panel=over]>.clover-template-default-main{isolation:isolate}.clover-template-panes{position:relative}.clover-template-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-panel[hidden]{display:none}.clover-template-panes>.clover-template-panel-handle{translate:-1.5px 0}.clover-template-panes:dir(rtl)>.clover-template-panel-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .clover-items-viewport{margin-left:0}.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame:not([dir=rtl]):after,.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame[dir=rtl]:before{right:0}.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame:not([dir=rtl]):before,.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame[dir=rtl]:after{left:0}.clover-template-panes[data-panel=over]{overflow:clip}.clover-template-panes[data-panel=over]>.clover-template-drawer{position:absolute;inset-block:0;inset-inline-end:0;z-index:4;width:min(24rem,calc(100% - var(--clover-space-2xl)));max-width:none;max-height:none;border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: left;--clover-template-toward: -1;--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));transform:var(--clover-template-out);transition:transform .24s cubic-bezier(.16,1,.3,1)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]{inset-inline:0 auto;border-inline-start:0;border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]:dir(rtl){--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));--clover-template-inner: left;--clover-template-toward: -1}.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-float{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent );background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat var(--clover-template-inner) var(--clover-space-2xs) center / 3px var(--clover-control),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:calc(var(--clover-template-toward) * var(--clover-space-s)) 0 var(--clover-space-l) #0000001f}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;background-color:#0003;opacity:0;cursor:pointer;transition:opacity .24s ease}.clover-template-scrim[data-open=true]{opacity:1}@media (prefers-reduced-motion: reduce){.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-scrim{transition:none}}.clover-template-default-rail{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset)}.clover-template-default-rail>.clover-items{margin-inline-end:calc(-1 * var(--clover-inset))}.clover-template-default-rail .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-prev{right:var(--clover-inset)}.clover-template-default-rail:not(:has(.clover-items,.clover-pager-position)){display:none}.clover-template-default-rail-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--clover-space-s)}.clover-template-default-titles{min-width:0;margin:0;overflow-wrap:anywhere}.clover-template-default-titles>.clover-template-default-titles-dot{margin-inline:var(--clover-space-xs);color:var(--clover-color-primary-muted, #26292b)}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto;font-size:var(--clover-text-s)}.clover-template-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-panes:has(>.clover-template-spine)>:first-child .clover-canvas>.clover-canvas-controls[data-fit]{inset-inline-end:calc(var(--clover-control) / 2 - 1.5px + var(--clover-space-xs))}.clover-template-panes .clover-template-spine>*{transition-property:background-color,color,outline-color}.clover-root[data-status=idle] .clover-template-spine{visibility:hidden}.clover-template-spine:dir(rtl)>*{translate:50%}}
+@layer clover{.clover-template-default{--clover-body-height: min(65vh, 40rem);display:flex;flex-direction:column;color:var(--clover-color-primary, #1a1d1e)}@supports (height: 1svh){.clover-template-default{--clover-body-height: min(65svh, 40rem)}}.clover-template-default:is([data-fill],:fullscreen){--clover-body-height: auto;height:100%;min-height:min-content}.clover-template-default:is([data-fill],:fullscreen)>.clover-template-default-panes{flex:1 1 auto}.clover-template-default:is([data-fill],:fullscreen) .clover-template-default-body{flex:1 1 0;min-height:16rem}.clover-template-default-header{display:flex;align-items:center;gap:var(--clover-space-s);padding:var(--clover-inset)}.clover-template-default-header:empty{display:none}@media (width < 31rem){.clover-template-default-header,.clover-template-default-rail{--clover-inset: var(--clover-space-m)}}.clover-template-default-pager{flex:none;padding-block:0}.clover-template-default-header:has(>.clover-template-default-pager){flex-wrap:wrap;row-gap:var(--clover-space-xs)}.clover-template-default-header:has(>.clover-template-default-pager)>:is(.clover-template-default-title,.clover-template-default-pager){align-self:last baseline}.clover-template-default-header:has(>.clover-template-default-collection-row){display:grid;grid-template-columns:minmax(0,1fr) fit-content(38.2%);row-gap:var(--clover-space-xs)}.clover-template-default-header>:is(.clover-template-default-title,.clover-template-default-collection-row){grid-column:1}.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:none}.clover-template-default-collection-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--clover-space-xs) var(--clover-space-s);min-width:0}.clover-template-default-collection{min-width:0;margin:0;overflow-wrap:anywhere;color:var(--clover-color-primary-muted, #26292b);font-size:inherit}.clover-template-default-provider{flex:0 1 auto;max-width:38.2%;margin-inline-start:auto}@container clover-template-default-main (width < 36rem){.clover-template-default-header:has(>.clover-template-default-collection-row)>.clover-template-default-provider{grid-row:1;align-self:start}.clover-template-default-header>.clover-template-default-collection-row{grid-column:1 / -1}}@container clover-template-default-main (width < 26rem){.clover-template-default:has(.clover-template-default-panel[data-about]) .clover-template-default-provider{display:none}}.clover-template-default-panes{position:relative}.clover-template-default-main{display:flex;flex-direction:column;container:clover-template-default-main / inline-size}.clover-template-panes[data-panel=over]>.clover-template-default-main{isolation:isolate}.clover-template-panes{position:relative}.clover-template-panel{contain:size;overflow-y:auto;overscroll-behavior:contain;background-color:var(--clover-color-secondary, #fff)}.clover-template-panel[hidden]{display:none}.clover-template-panes>.clover-template-panel-handle{translate:-1.5px 0}.clover-template-panes:dir(rtl)>.clover-template-panel-handle{translate:1.5px 0}.clover-template-default-panes:dir(ltr) .clover-items-viewport{margin-right:0}.clover-template-default-panes:dir(rtl) .clover-items-viewport{margin-left:0}.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame:not([dir=rtl]):after,.clover-template-default-panes:dir(ltr) .clover-items .clover-items-frame[dir=rtl]:before{right:0}.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame:not([dir=rtl]):before,.clover-template-default-panes:dir(rtl) .clover-items .clover-items-frame[dir=rtl]:after{left:0}.clover-template-panes[data-panel=over]{overflow:clip}.clover-template-panes[data-panel=over]>.clover-template-drawer{position:absolute;inset-block:0;inset-inline-end:0;z-index:4;width:min(24rem,calc(100% - var(--clover-space-2xl)));max-width:none;max-height:none;border-inline-start:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-inner: left;--clover-template-toward: -1;--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));transform:var(--clover-template-out);transition:transform .24s cubic-bezier(.16,1,.3,1)}.clover-template-panes[data-panel=over]>.clover-template-drawer:dir(rtl){--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]{inset-inline:0 auto;border-inline-start:0;border-inline-end:1px solid var(--clover-color-secondary-muted, #e6e8eb);--clover-template-out: translateX(calc(-100% - var(--clover-space-xl)));--clover-template-inner: right;--clover-template-toward: 1}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-side=start]:dir(rtl){--clover-template-out: translateX(calc(100% + var(--clover-space-xl)));--clover-template-inner: left;--clover-template-toward: -1}.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-float{--clover-grip: color-mix( in srgb, var(--clover-color-primary-muted, #26292b) 30%, transparent );background:linear-gradient(var(--clover-grip),var(--clover-grip)) no-repeat var(--clover-template-inner) var(--clover-space-2xs) center / 3px var(--clover-control),var(--clover-color-secondary, #fff);touch-action:pan-y;box-shadow:calc(var(--clover-template-toward) * var(--clover-space-s)) 0 var(--clover-space-l) #0000001f}.clover-template-panes[data-panel=over]>.clover-template-drawer[data-open=true]{transform:none}.clover-template-scrim{position:absolute;inset:0;z-index:3;background-color:#0003;opacity:0;cursor:pointer;transition:opacity .24s ease}.clover-template-scrim[data-open=true]{opacity:1}@media (prefers-reduced-motion: reduce){.clover-template-panes[data-panel=over]>.clover-template-drawer,.clover-template-scrim{transition:none}}.clover-template-default-rail{display:flex;flex-direction:column;gap:var(--clover-space-m);padding:var(--clover-inset)}.clover-template-default-rail>.clover-items{margin-inline-end:calc(-1 * var(--clover-inset))}.clover-template-default-rail .clover-items-viewport{margin-inline-end:0}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-prev,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-next{left:calc(-1 * var(--clover-space-s))}.clover-template-default-rail .clover-items-frame:not([dir=rtl])>button.clover-items-scroll-next,.clover-template-default-rail .clover-items-frame[dir=rtl]>button.clover-items-scroll-prev{right:var(--clover-inset)}.clover-template-default-rail:not(:has(.clover-items,.clover-pager-position)){display:none}.clover-template-default-rail-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--clover-space-s)}.clover-template-default-titles{min-width:0;margin:0;overflow-wrap:anywhere}.clover-template-default-titles>.clover-template-default-titles-dot{margin-inline:var(--clover-space-xs);color:var(--clover-color-primary-muted, #26292b)}.clover-template-default-rail-header .clover-pager-position{flex-shrink:0;margin-inline-start:auto;font-size:var(--clover-text-s)}.clover-template-spine{position:relative;z-index:4;flex:none;width:0}.clover-template-spine>*{position:absolute;top:calc(var(--clover-template-spine-top, 0px) + var(--clover-inset));inset-inline-start:-1.5px;translate:-50%}.clover-template-panes:has(>.clover-template-spine)>:first-child .clover-canvas>.clover-canvas-controls[data-fit]{inset-inline-end:calc(var(--clover-control) / 2 - 1.5px + var(--clover-space-xs))}.clover-template-panes .clover-template-spine>*{transition-property:background-color,color,outline-color}.clover-root[data-status=idle] .clover-template-spine{visibility:hidden}.clover-template-spine:dir(rtl)>*{translate:50%}}

package/dist/styles/items.css

@@ -1 +1 @@
-@layer clover{.clover-items{--clover-items-ring-room: 4px;--clover-items-picture-height: var(--clover-items-height, 8rem);color:var(--clover-color-primary, #1a1d1e)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--clover-space-xs) var(--clover-space-m);margin-bottom:var(--clover-space-s)}.clover-items-description{flex:1 0 100%;order:3;margin:0;color:var(--clover-color-primary-muted, #26292b)}.clover-items-homepage{margin-inline-start:auto;color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.clover-items-track{margin:0;padding:0;list-style:none;gap:var(--clover-items-gap, var(--clover-space-m))}.clover-items-viewport{margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.clover-items-viewport::-webkit-scrollbar{display:none}.clover-items-viewport[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider] .clover-items-frame{timeline-scope:--clover-items-track}.clover-items[data-layout=slider] .clover-items-viewport{scroll-timeline:--clover-items-track inline}.clover-items[data-layout=slider] .clover-items-frame:before,.clover-items[data-layout=slider] .clover-items-frame:after{content:"";position:absolute;top:var(--clover-items-ring-room);z-index:1;width:var(--clover-space-s);height:var(--clover-items-picture-height);background:linear-gradient(var(--clover-items-shade),rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-items-track}.clover-items[data-layout=slider] .clover-items-frame:before{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));animation-range:0 var(--clover-space-m)}.clover-items[data-layout=slider] .clover-items-frame:after{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));right:auto}}.clover-items[data-layout=list] .clover-items-track{display:flex;flex-direction:column}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size, 10rem)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block;color:inherit;text-decoration:none}:is(.clover-items-item[role=option],.clover-items-link){margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);outline:none}.clover-items:not([data-layout=slider]) :is(.clover-items-viewport,.clover-items-item[role=option],.clover-items-link){margin-inline:0;padding-inline:0}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;gap:var(--clover-space-xs) 0;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-radius:var(--clover-radius, 3px);outline:3px solid var(--ring-color, transparent);outline-offset:1px;transition:outline-color .2s cubic-bezier(.16,1,.3,1)}.clover-items-picture{position:relative;display:block;overflow:hidden;background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-items-picture img{display:block;opacity:0;transition:opacity .3s ease}.clover-items-picture[data-loaded=true] img{opacity:1}.clover-items-picture[data-empty]{display:grid;place-items:center;aspect-ratio:var(--clover-items-ratio, 1);color:var(--clover-color-primary-muted, #26292b)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-pictures>.clover-items-picture:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.clover-items-pictures>.clover-items-picture:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs);padding:var(--clover-space-3xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:#000000b8;color:#fff;font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--clover-space-3xs) 0;font-size:var(--clover-text-s)}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid],[data-layout=masonry]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines, 3);line-clamp:var(--clover-items-lines, 3)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;padding-block-start:var(--clover-space-2xs);background-color:var(--clover-color-secondary, #fff);box-shadow:0 calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) #00000029;pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):is(:hover,:focus-visible):not([data-full-hidden]) .clover-items-label[data-clamped]>.clover-items-label-full{display:block}@media (forced-colors: active){.clover-items-label-full{border:1px solid CanvasText}}.clover-items-date{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-xs)}.clover-items-summary{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b)}.clover-items[data-layout=slider] .clover-items-picture[data-empty],.clover-items[data-layout=slider] .clover-items-picture img{width:auto;height:var(--clover-items-picture-height)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture{min-width:0}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=masonry] .clover-items-viewport[data-masonry] .clover-items-track{grid-auto-rows:4px;row-gap:0;align-items:start}.clover-items[data-layout=masonry] .clover-items-pictures{aspect-ratio:auto}.clover-items[data-layout=masonry] .clover-items-picture img{height:auto}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:start;gap:0 var(--clover-space-s)}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto);gap:0}.clover-items[data-layout=list] .clover-items-caption{grid-column:2;grid-template-columns:none}.clover-items[data-layout=list] .clover-items-label{contain:none}.clover-items[data-layout=list] .clover-items-picture img{width:auto;height:var(--clover-space-xl)}.clover-items[data-layout=list] .clover-items-picture[data-empty]{height:var(--clover-space-xl)}:is(.clover-items-item[role=option],.clover-items-link):hover{--ring-color: color-mix( in srgb, var(--clover-color-accent, #0065c3) 50%, transparent )}.clover-items-item[aria-selected=true]{--ring-color: var(--clover-color-accent, #0065c3)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: var(--clover-color-primary, #1a1d1e)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;border-radius:inherit;outline:2px solid var(--clover-color-secondary, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--clover-color-primary, #1a1d1e);content:"";pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{border-radius:var(--clover-radius, 3px);outline:3px solid var(--clover-color-primary, #1a1d1e);outline-offset:calc(1px - var(--clover-items-ring-room))}@media (forced-colors: active){.clover-items-pictures{outline-color:var(--ring-color, Canvas)}.clover-items-item[aria-selected=true]{--ring-color: Highlight}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: CanvasText}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{outline-color:CanvasText}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{outline-color:CanvasText}}.clover-items-item[aria-selected=true] .clover-items-label{color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );font-weight:600}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-picture-height) / 2);z-index:2;translate:0 -50%;box-shadow:0 1px 4px #00000040}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-pager{display:flex;align-items:center;justify-content:center;gap:var(--clover-space-s);padding-block:var(--clover-space-s)}.clover-pager-position{display:inline-grid;justify-items:end;font-variant-numeric:tabular-nums;color:var(--clover-color-primary-muted, #26292b)}.clover-pager[data-direction=right-to-left] .clover-pager-position{justify-items:start}.clover-pager-position>[aria-hidden]{grid-area:1 / 1}.clover-pager-position>.clover-pager-room[hidden]{display:block;visibility:hidden}.clover-pager:has(>.clover-pager-count){position:relative;z-index:5}.clover-pager-count{position:relative}.clover-pager:has(>.clover-pager-count)>button,.clover-pager-count>.clover-pager-count-button{position:relative;z-index:1}.clover-pager-count-button{display:inline-flex;align-items:center;gap:var(--clover-space-2xs);min-height:var(--clover-space-l);padding:0 var(--clover-space-xs);border:0;border-radius:var(--clover-radius-pill, 2rem);background:none;color:var(--clover-color-primary-muted, #26292b);font:inherit;cursor:pointer}.clover-pager-count-button .clover-pager-position{color:inherit}.clover-pager-count-button .clover-pager-position>span{grid-area:1 / 1}.clover-pager-count-button:is(:hover,:focus-visible,[aria-expanded=true]){color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) )}.clover-pager-count-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-pager-count>.clover-pager-menu{z-index:0;top:calc(-1 * var(--clover-space-m));inset-inline-start:calc(-1 * var(--clover-space-m));width:min(20rem,calc(100vw - 2 * var(--clover-space-m)));max-height:min(24rem,60vh);max-height:min(24rem,60dvh);--clover-pager-menu-head: calc( var(--clover-space-m) + var(--clover-space-l) + var(--clover-space-m) );padding:var(--clover-space-m);padding-block:var(--clover-pager-menu-head) 0}.clover-pager-count>.clover-pager-menu{display:flex;flex-direction:column;overflow:hidden}.clover-pager-count>.clover-pager-menu>.clover-pager-list{min-height:0;margin:calc(-1 * var(--clover-items-ring-room, 4px));margin-block-end:0;padding:var(--clover-items-ring-room, 4px);padding-block-end:var(--clover-space-m);overflow-y:auto;overscroll-behavior:contain}@supports (timeline-scope: --clover-pager-list){.clover-pager-count>.clover-pager-menu{timeline-scope:--clover-pager-list}.clover-pager-count>.clover-pager-menu>.clover-pager-list{scroll-timeline:--clover-pager-list block}.clover-pager-count>.clover-pager-menu:before{content:"";position:absolute;z-index:1;top:calc(var(--clover-pager-menu-head) - var(--clover-items-ring-room, 4px));inset-inline:calc(var(--clover-space-m) - var(--clover-items-ring-room, 4px));height:var(--clover-space-s);background:linear-gradient(rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-pager-list;animation-range:0 var(--clover-space-m)}}.clover-pager[data-direction=right-to-left] .clover-pager-count>.clover-pager-menu{inset-inline:auto calc(-1 * var(--clover-space-m))}.clover-pager-count-button[aria-expanded=true] svg{rotate:180deg}.clover-pager-list.clover-collection>.clover-items{--clover-items-gap: var(--clover-space-m);margin:0}.clover-pager[data-size=small]{gap:var(--clover-space-2xs);padding-block:0}.clover-pager[data-size=small] .clover-pager-count-button{font-size:var(--clover-text-xs);line-height:1}.clover-pager[data-size=small] .clover-pager-position{font-weight:600}}
+@layer clover{.clover-items{--clover-items-ring-room: 4px;--clover-items-picture-height: var(--clover-items-height, 8rem);color:var(--clover-color-primary, #1a1d1e)}.clover-items-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--clover-space-xs) var(--clover-space-m);margin-bottom:var(--clover-space-s)}.clover-items-description{flex:1 0 100%;order:3;margin:0;color:var(--clover-color-primary-muted, #26292b)}.clover-items-homepage{margin-inline-start:auto;color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );text-decoration-line:underline;text-underline-offset:var(--clover-space-3xs)}.clover-items-track{margin:0;padding:0;list-style:none;gap:var(--clover-items-gap, var(--clover-space-m))}.clover-items-viewport{margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);scroll-padding-inline:var(--clover-items-ring-room);scrollbar-width:none}.clover-items[data-layout=slider] .clover-items-viewport{padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px));scroll-padding-inline:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px))}.clover-items-viewport::-webkit-scrollbar{display:none}.clover-items-viewport[data-dragging]{cursor:grabbing;-webkit-user-select:none;user-select:none}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider] .clover-items-frame{timeline-scope:--clover-items-track}.clover-items[data-layout=slider] .clover-items-viewport{scroll-timeline:--clover-items-track inline}.clover-items[data-layout=slider] .clover-items-frame:before,.clover-items[data-layout=slider] .clover-items-frame:after{content:"";position:absolute;top:var(--clover-items-ring-room);z-index:1;width:var(--clover-space-s);height:var(--clover-items-picture-height);background:linear-gradient(var(--clover-items-shade),rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-items-track}.clover-items[data-layout=slider] .clover-items-frame:before{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));animation-range:0 var(--clover-space-m)}.clover-items[data-layout=slider] .clover-items-frame:after{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));animation-direction:reverse;animation-range:calc(100% - var(--clover-space-m)) 100%}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:before{--clover-items-shade: to left;right:calc(-1 * var(--clover-items-ring-room));left:auto}.clover-items[data-layout=slider] .clover-items-frame[dir=rtl]:after{--clover-items-shade: to right;left:calc(-1 * var(--clover-items-ring-room));right:auto}}.clover-items[data-layout=list] .clover-items-track{display:flex;flex-direction:column}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-track{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--clover-items-size, 10rem)),1fr))}.clover-items-item{position:relative;cursor:pointer}.clover-items-link{display:block;color:inherit;text-decoration:none}:is(.clover-items-item[role=option],.clover-items-link){margin:calc(-1 * var(--clover-items-ring-room));padding:var(--clover-items-ring-room);outline:none}.clover-items:not([data-layout=slider]) :is(.clover-items-viewport,.clover-items-item[role=option],.clover-items-link){margin-inline:0;padding-inline:0}.clover-items-figure{display:grid;grid-template-columns:repeat(var(--parts, 1),auto);justify-content:start;gap:var(--clover-space-xs) 0;margin:0}.clover-items-pictures{position:relative;display:grid;grid-column:1 / -1;grid-template-columns:subgrid;border-radius:var(--clover-radius, 3px);outline:3px solid var(--ring-color, transparent);outline-offset:1px;transition:outline-color .2s cubic-bezier(.16,1,.3,1)}.clover-items-picture{position:relative;display:block;overflow:hidden;background-color:var(--clover-color-secondary-muted, #f1f1f1)}.clover-items-picture img{display:block;opacity:0;transition:opacity .3s ease}.clover-items-picture[data-loaded=true] img{opacity:1}.clover-items-picture[data-empty]{display:grid;place-items:center;aspect-ratio:var(--clover-items-ratio, 1);color:var(--clover-color-primary-muted, #26292b)}.clover-items-picture[data-empty]>svg{width:33%;max-width:var(--clover-space-xl);height:auto;fill:currentColor}.clover-items-pictures>.clover-items-picture:first-child{border-start-start-radius:inherit;border-end-start-radius:inherit}.clover-items-pictures>.clover-items-picture:last-child{border-start-end-radius:inherit;border-end-end-radius:inherit}.clover-items-duration{position:absolute;inset-inline-end:var(--clover-space-xs);bottom:var(--clover-space-xs);padding:var(--clover-space-3xs) var(--clover-space-xs);border-radius:var(--clover-radius, 3px);background-color:#000000b8;color:#fff;font-size:var(--clover-text-xs);font-variant-numeric:tabular-nums}.clover-items-caption{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;gap:var(--clover-space-3xs) 0;font-size:var(--clover-text-s)}.clover-items-label{position:relative;contain:inline-size}.clover-items:is([data-layout=slider],[data-layout=grid],[data-layout=masonry]) .clover-items-label-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clover-items-lines, 3);line-clamp:var(--clover-items-lines, 3)}.clover-items-label-full{position:absolute;inset-inline:0;bottom:0;z-index:1;padding-block-start:var(--clover-space-2xs);background-color:var(--clover-color-secondary, #fff);box-shadow:0 calc(-1 * var(--clover-space-2xs)) var(--clover-space-s) #00000029;pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):is(:hover,:focus-visible):not([data-full-hidden]) .clover-items-label[data-clamped]>.clover-items-label-full{display:block}@media (forced-colors: active){.clover-items-label-full{border:1px solid CanvasText}}.clover-items-date{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b);font-size:var(--clover-text-xs)}.clover-items-summary{grid-column:1 / -1;color:var(--clover-color-primary-muted, #26292b)}.clover-items[data-layout=slider] .clover-items-picture[data-empty],.clover-items[data-layout=slider] .clover-items-picture img{width:auto;height:var(--clover-items-picture-height)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-pictures{aspect-ratio:1;overflow:hidden}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture{min-width:0}.clover-items:is([data-layout=grid],[data-layout=masonry]) .clover-items-picture img{width:100%;height:100%;object-fit:contain}.clover-items[data-layout=masonry] .clover-items-viewport[data-masonry] .clover-items-track{grid-auto-rows:4px;row-gap:0;align-items:start}.clover-items[data-layout=masonry] .clover-items-pictures{aspect-ratio:auto}.clover-items[data-layout=masonry] .clover-items-picture img{height:auto}.clover-items[data-layout=list] .clover-items-figure{grid-template-columns:auto 1fr;align-items:start;gap:0 var(--clover-space-s)}.clover-items[data-layout=list] .clover-items-pictures{grid-column:1;grid-template-columns:repeat(var(--parts, 1),auto);gap:0}.clover-items[data-layout=list] .clover-items-caption{grid-column:2;grid-template-columns:none}.clover-items[data-layout=list] .clover-items-label{contain:none}.clover-items[data-layout=list] .clover-items-picture img{width:auto;height:var(--clover-space-xl)}.clover-items[data-layout=list] .clover-items-picture[data-empty]{height:var(--clover-space-xl)}:is(.clover-items-item[role=option],.clover-items-link):hover{--ring-color: color-mix( in srgb, var(--clover-color-accent, #0065c3) 50%, transparent )}.clover-items-item[aria-selected=true]{--ring-color: var(--clover-color-accent, #0065c3)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: var(--clover-color-primary, #1a1d1e)}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{position:absolute;inset:0;border-radius:inherit;outline:2px solid var(--clover-color-secondary, #fff);outline-offset:-2px;box-shadow:inset 0 0 0 4px var(--clover-color-primary, #1a1d1e);content:"";pointer-events:none}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{border-radius:var(--clover-radius, 3px);outline:3px solid var(--clover-color-primary, #1a1d1e);outline-offset:calc(1px - var(--clover-items-ring-room))}@media (forced-colors: active){.clover-items-pictures{outline-color:var(--ring-color, Canvas)}.clover-items-item[aria-selected=true]{--ring-color: Highlight}:is(.clover-items-item[role=option],.clover-items-link):focus-visible{--ring-color: CanvasText}:is(.clover-items-item[role=option],.clover-items-link):focus-visible .clover-items-pictures:after{outline-color:CanvasText}:is(.clover-items-item[role=option],.clover-items-link):not(:has(.clover-items-pictures)):focus-visible{outline-color:CanvasText}}.clover-items-item[aria-selected=true] .clover-items-label{color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) );font-weight:600}:is(button.clover-items-scroll-prev,button.clover-items-scroll-next){position:absolute;top:calc(var(--clover-items-picture-height) / 2);z-index:2;translate:0 -50%;box-shadow:0 1px 4px #00000040}.clover-items-scroll-prev{inset-inline-start:var(--clover-space-2xs)}.clover-items-scroll-next{inset-inline-end:var(--clover-space-2xs)}.clover-items[data-layout=slider][data-orientation=vertical]{display:flex;flex-direction:column;height:100%}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame{flex:1;min-height:0}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{box-sizing:border-box;height:calc(100% + 2 * var(--clover-items-ring-room));padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) var(--clover-items-ring-room);scroll-padding:calc(var(--clover-items-ring-room) + var(--clover-items-inset, 0px)) 0}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-figure{grid-template-columns:repeat(var(--parts, 1),1fr)}.clover-items[data-orientation=vertical] .clover-items-picture img,.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{width:100%;height:auto}.clover-items[data-orientation=vertical] .clover-items-picture[data-empty]{aspect-ratio:4 / 3}@supports (timeline-scope: --clover-items-track){.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-viewport{scroll-timeline:--clover-items-track block}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before,.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{left:0;right:0;width:auto;height:var(--clover-space-s);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent)}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:before{--clover-items-shade: to bottom;top:calc(-1 * var(--clover-items-ring-room))}.clover-items[data-layout=slider][data-orientation=vertical] .clover-items-frame:after{--clover-items-shade: to top;top:auto;bottom:calc(-1 * var(--clover-items-ring-room))}}.clover-items[data-orientation=vertical] :is(button.clover-items-scroll-prev,button.clover-items-scroll-next){inset-inline:auto;left:50%;translate:-50% 0}.clover-items[data-orientation=vertical] button.clover-items-scroll-prev{top:var(--clover-space-2xs)}.clover-items[data-orientation=vertical] button.clover-items-scroll-next{top:auto;bottom:var(--clover-space-2xs)}.clover-pager{display:flex;align-items:center;justify-content:center;gap:var(--clover-space-s);padding-block:var(--clover-space-s)}.clover-pager-position{display:inline-grid;justify-items:end;font-variant-numeric:tabular-nums;color:var(--clover-color-primary-muted, #26292b)}.clover-pager[data-direction=right-to-left] .clover-pager-position{justify-items:start}.clover-pager-position>[aria-hidden]{grid-area:1 / 1}.clover-pager-position>.clover-pager-room[hidden]{display:block;visibility:hidden}.clover-pager:has(>.clover-pager-count){position:relative;z-index:5}.clover-pager-count{position:relative}.clover-pager:has(>.clover-pager-count)>button,.clover-pager-count>.clover-pager-count-button{position:relative;z-index:1}.clover-pager-count-button{display:inline-flex;align-items:center;gap:var(--clover-space-2xs);min-height:var(--clover-space-l);padding:0 var(--clover-space-xs);border:0;border-radius:var(--clover-radius-pill, 2rem);background:none;color:var(--clover-color-primary-muted, #26292b);font:inherit;cursor:pointer}.clover-pager-count-button .clover-pager-position{color:inherit}.clover-pager-count-button .clover-pager-position>span{grid-area:1 / 1}.clover-pager-count-button:is(:hover,:focus-visible,[aria-expanded=true]){color:var( --clover-color-accent-text, var(--clover-accent-text-fallback, var(--clover-color-accent, #0065c3)) )}.clover-pager-count-button:focus-visible{outline:2px solid var(--clover-color-accent, #0065c3);outline-offset:2px}.clover-pager-count>.clover-pager-menu{z-index:0;top:calc(-1 * var(--clover-space-m));inset-inline-start:calc(-1 * var(--clover-space-m));width:min(20rem,calc(100vw - 2 * var(--clover-space-m)));max-height:min(24rem,60vh);max-height:min(24rem,60dvh);--clover-pager-menu-head: calc( var(--clover-space-m) + var(--clover-space-l) + var(--clover-space-m) );padding:var(--clover-space-m);padding-block:var(--clover-pager-menu-head) 0}.clover-pager-count>.clover-pager-menu{display:flex;flex-direction:column;overflow:hidden}.clover-pager-count>.clover-pager-menu>.clover-pager-list{min-height:0;margin:calc(-1 * var(--clover-items-ring-room, 4px));margin-block-end:0;padding:var(--clover-items-ring-room, 4px);padding-block-end:var(--clover-space-m);overflow-y:auto;overscroll-behavior:contain}@supports (timeline-scope: --clover-pager-list){.clover-pager-count>.clover-pager-menu{timeline-scope:--clover-pager-list}.clover-pager-count>.clover-pager-menu>.clover-pager-list{scroll-timeline:--clover-pager-list block}.clover-pager-count>.clover-pager-menu:before{content:"";position:absolute;z-index:1;top:calc(var(--clover-pager-menu-head) - var(--clover-items-ring-room, 4px));inset-inline:calc(var(--clover-space-m) - var(--clover-items-ring-room, 4px));height:var(--clover-space-s);background:linear-gradient(rgb(0 0 0 / .16),transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--clover-space-s),#000 calc(100% - var(--clover-space-s)),transparent);opacity:0;pointer-events:none;animation:clover-shade linear both;animation-timeline:--clover-pager-list;animation-range:0 var(--clover-space-m)}}.clover-pager[data-direction=right-to-left] .clover-pager-count>.clover-pager-menu{inset-inline:auto calc(-1 * var(--clover-space-m))}.clover-pager-count-button[aria-expanded=true] svg{rotate:180deg}.clover-pager-list.clover-collection>.clover-items{--clover-items-gap: var(--clover-space-m);margin:0}.clover-pager[data-size=small]{gap:var(--clover-space-2xs);padding-block:0}.clover-pager[data-size=small] .clover-pager-count-button{font-size:var(--clover-text-xs);line-height:1}.clover-pager[data-size=small] .clover-pager-position{font-weight:600}}