@gnome-ui/react 1.45.2 → 1.47.0

package/dist/components/Dropdown/Dropdown.js

@@ -1,149 +1,153 @@
 import { Icon as e } from "../Icon/Icon.js";
 import t from "./Dropdown.module.css.js";
-import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { Check as l, PanDown as u } from "@gnome-ui/icons";
+import { useCallback as n, useEffect as r, useId as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Check as u, PanDown as d } from "@gnome-ui/icons";
 //#region src/components/Dropdown/Dropdown.tsx
-var d = ({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) => {
-	let [v, y] = o(!1), [b, x] = o(-1), [S, C] = o(!1), w = i(), T = i(), E = a(null), D = a(null), O = d.find((e) => e.value === f), k = n(() => {
-		if (!E.current) return;
-		let e = E.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 48 + 8, 280);
-		C(t < n && e.top > n);
-	}, [d.length]), A = n(() => {
-		if (h) return;
-		k(), y(!0);
-		let e = d.findIndex((e) => e.value === f && !e.disabled);
-		x(e >= 0 ? e : d.findIndex((e) => !e.disabled));
+var f = ({ options: f, value: p, onChange: m, placeholder: h = "Select an option", disabled: g, className: _, ...v }) => {
+	let [y, b] = s(!1), [x, S] = s(-1), [C, w] = s(!1), T = i(), E = i(), D = o(null), O = o(null), k = f.find((e) => e.value === p), A = n(() => {
+		if (!D.current) return;
+		let e = D.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(f.length * 48 + 8, 280);
+		w(t < n && e.top > n);
+	}, [f.length]), j = n(() => {
+		if (g) return;
+		A(), b(!0);
+		let e = f.findIndex((e) => e.value === p && !e.disabled);
+		S(e >= 0 ? e : f.findIndex((e) => !e.disabled));
 	}, [
-		h,
-		k,
-		d,
-		f
-	]), j = n(() => {
-		y(!1), x(-1), E.current?.focus();
-	}, []), M = n((e) => {
-		e.disabled || (p?.(e.value), j());
-	}, [p, j]);
-	r(() => {
-		!v || b < 0 || !D.current || D.current.children[b]?.scrollIntoView({ block: "nearest" });
-	}, [b, v]), r(() => {
-		if (!v) return;
+		g,
+		A,
+		f,
+		p
+	]), M = n(() => {
+		b(!1), S(-1), D.current?.focus();
+	}, []), N = n((e) => {
+		e.disabled || (m?.(e.value), M());
+	}, [m, M]);
+	a(() => {
+		if (!y || !D.current || !O.current) return;
+		let e = D.current.getBoundingClientRect(), t = O.current.offsetHeight;
+		w(window.innerHeight - e.bottom < t && e.top > t);
+	}, [y]), r(() => {
+		!y || x < 0 || !O.current || O.current.children[x]?.scrollIntoView({ block: "nearest" });
+	}, [x, y]), r(() => {
+		if (!y) return;
 		let e = (e) => {
-			!E.current?.contains(e.target) && !D.current?.contains(e.target) && j();
+			!D.current?.contains(e.target) && !O.current?.contains(e.target) && M();
 		};
 		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-	}, [v, j]);
-	let N = n((e) => {
+	}, [y, M]);
+	let P = n((e) => {
 		switch (e.key) {
 			case "Enter":
 			case " ":
 			case "ArrowDown":
-				e.preventDefault(), A();
+				e.preventDefault(), j();
 				break;
 			case "ArrowUp":
-				e.preventDefault(), k(), y(!0), x(d.reduce((e, t, n) => t.disabled ? e : n, -1));
+				e.preventDefault(), A(), b(!0), S(f.reduce((e, t, n) => t.disabled ? e : n, -1));
 				break;
 		}
 	}, [
+		j,
 		A,
-		k,
-		d
-	]), P = n((e) => {
-		let t = d.map((e, t) => ({
+		f
+	]), F = n((e) => {
+		let t = f.map((e, t) => ({
 			o: e,
 			i: t
-		})).filter(({ o: e }) => !e.disabled).map(({ i: e }) => e), n = t.indexOf(b);
+		})).filter(({ o: e }) => !e.disabled).map(({ i: e }) => e), n = t.indexOf(x);
 		switch (e.key) {
 			case "ArrowDown": {
 				e.preventDefault();
 				let r = t[Math.min(n + 1, t.length - 1)];
-				x(r ?? b);
+				S(r ?? x);
 				break;
 			}
 			case "ArrowUp": {
 				e.preventDefault();
 				let r = t[Math.max(n - 1, 0)];
-				x(r ?? b);
+				S(r ?? x);
 				break;
 			}
 			case "Home":
-				e.preventDefault(), x(t[0] ?? -1);
+				e.preventDefault(), S(t[0] ?? -1);
 				break;
 			case "End":
-				e.preventDefault(), x(t[t.length - 1] ?? -1);
+				e.preventDefault(), S(t[t.length - 1] ?? -1);
 				break;
 			case "Enter":
 			case " ":
-				e.preventDefault(), b >= 0 && M(d[b]);
+				e.preventDefault(), x >= 0 && N(f[x]);
 				break;
 			case "Escape":
 			case "Tab":
-				j();
+				M();
 				break;
 		}
 	}, [
-		d,
-		b,
-		M,
-		j
+		f,
+		x,
+		N,
+		M
 	]);
-	return /* @__PURE__ */ c("div", {
-		className: [t.wrapper, g].filter(Boolean).join(" "),
-		..._,
-		children: [/* @__PURE__ */ c("button", {
-			ref: E,
-			id: w,
+	return /* @__PURE__ */ l("div", {
+		className: [t.wrapper, _].filter(Boolean).join(" "),
+		...v,
+		children: [/* @__PURE__ */ l("button", {
+			ref: D,
+			id: T,
 			type: "button",
 			role: "combobox",
 			"aria-haspopup": "listbox",
-			"aria-expanded": v,
-			"aria-controls": T,
-			"aria-activedescendant": v && b >= 0 ? `${T}-opt-${b}` : void 0,
-			disabled: h,
-			className: [t.trigger, v ? t.triggerOpen : null].filter(Boolean).join(" "),
-			onClick: () => v ? j() : A(),
-			onKeyDown: N,
-			children: [/* @__PURE__ */ s("span", {
-				className: [t.triggerLabel, O ? null : t.placeholder].filter(Boolean).join(" "),
-				children: O?.label ?? m
-			}), /* @__PURE__ */ s(e, {
-				icon: u,
+			"aria-expanded": y,
+			"aria-controls": E,
+			"aria-activedescendant": y && x >= 0 ? `${E}-opt-${x}` : void 0,
+			disabled: g,
+			className: [t.trigger, y ? t.triggerOpen : null].filter(Boolean).join(" "),
+			onClick: () => y ? M() : j(),
+			onKeyDown: P,
+			children: [/* @__PURE__ */ c("span", {
+				className: [t.triggerLabel, k ? null : t.placeholder].filter(Boolean).join(" "),
+				children: k?.label ?? h
+			}), /* @__PURE__ */ c(e, {
+				icon: d,
 				size: "md",
 				"aria-hidden": !0,
-				className: [t.chevron, v ? t.chevronOpen : null].filter(Boolean).join(" ")
+				className: [t.chevron, y ? t.chevronOpen : null].filter(Boolean).join(" ")
 			})]
-		}), v && /* @__PURE__ */ s("ul", {
-			ref: D,
-			id: T,
+		}), y && /* @__PURE__ */ c("ul", {
+			ref: O,
+			id: E,
 			role: "listbox",
-			"aria-labelledby": w,
+			"aria-labelledby": T,
 			tabIndex: -1,
-			className: [t.list, S ? t.listUp : t.listDown].filter(Boolean).join(" "),
-			onKeyDown: P,
-			children: d.map((n, r) => /* @__PURE__ */ c("li", {
-				id: `${T}-opt-${r}`,
+			className: [t.list, C ? t.listUp : t.listDown].filter(Boolean).join(" "),
+			onKeyDown: F,
+			children: f.map((n, r) => /* @__PURE__ */ l("li", {
+				id: `${E}-opt-${r}`,
 				role: "option",
-				"aria-selected": n.value === f,
+				"aria-selected": n.value === p,
 				"aria-disabled": n.disabled,
 				className: [
 					t.option,
-					n.value === f ? t.optionSelected : null,
-					r === b ? t.optionActive : null,
+					n.value === p ? t.optionSelected : null,
+					r === x ? t.optionActive : null,
 					n.disabled ? t.optionDisabled : null
 				].filter(Boolean).join(" "),
-				onMouseEnter: () => !n.disabled && x(r),
-				onClick: () => M(n),
-				children: [/* @__PURE__ */ c("span", {
+				onMouseEnter: () => !n.disabled && S(r),
+				onClick: () => N(n),
+				children: [/* @__PURE__ */ l("span", {
 					className: t.optionText,
-					children: [/* @__PURE__ */ s("span", {
+					children: [/* @__PURE__ */ c("span", {
 						className: t.optionLabel,
 						children: n.label
-					}), n.description && /* @__PURE__ */ s("span", {
+					}), n.description && /* @__PURE__ */ c("span", {
 						className: t.optionDesc,
 						children: n.description
 					})]
-				}), n.value === f && /* @__PURE__ */ s(e, {
-					icon: l,
+				}), n.value === p && /* @__PURE__ */ c(e, {
+					icon: u,
 					size: "md",
 					"aria-hidden": !0,
 					className: t.checkIcon
@@ -153,6 +157,6 @@ var d = ({ options: d, value: f, onChange: p, placeholder: m = "Select an option
 	});
 };
 //#endregion
-export { d as Dropdown };
+export { f as Dropdown };
 
 //# sourceMappingURL=Dropdown.js.map

package/dist/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport const Dropdown = <V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport const Dropdown = <V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Refine the flip with the real list height once it has rendered — the\n  // pre-open estimate can't account for option descriptions or wrapped labels.\n  useLayoutEffect(() => {\n    if (!open || !triggerRef.current || !listRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const listH = listRef.current.offsetHeight;\n\n    setFlipUp(window.innerHeight - rect.bottom < listH && rect.top > listH);\n  }, [open]);\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs

@@ -1,2 +1,2 @@
-const e=require("../Icon/Icon.cjs"),t=require("../EntryRow/EntryRow.cjs"),n=require("./PasswordEntryRow.module.css.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@gnome-ui/icons");var o=({trailing:o,disabled:s,...c})=>{let[l,u]=(0,r.useState)(!1),d=(0,i.jsx)(`button`,{type:`button`,className:n.default.revealButton,onClick:e=>{e.stopPropagation(),u(e=>!e)},"aria-label":l?`Conceal password`:`Reveal password`,"aria-pressed":l,disabled:s,children:(0,i.jsx)(e.Icon,{icon:l?a.ViewConceal:a.ViewReveal,size:`md`,"aria-hidden":!0})});return(0,i.jsx)(t.EntryRow,{...c,type:l?`text`:`password`,disabled:s,trailing:(0,i.jsxs)(i.Fragment,{children:[o,d]})})};exports.PasswordEntryRow=o;
+const e=require("../Icon/Icon.cjs"),t=require("../EntryRow/EntryRow.cjs"),n=require("./PasswordEntryRow.module.css.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@gnome-ui/icons");var o=({trailing:o,disabled:s,autoComplete:c=`current-password`,...l})=>{let[u,d]=(0,r.useState)(!1),f=(0,i.jsx)(`button`,{type:`button`,className:n.default.revealButton,onClick:e=>{e.stopPropagation(),d(e=>!e)},"aria-label":u?`Conceal password`:`Reveal password`,"aria-pressed":u,disabled:s,children:(0,i.jsx)(e.Icon,{icon:u?a.ViewConceal:a.ViewReveal,size:`md`,"aria-hidden":!0})});return(0,i.jsx)(t.EntryRow,{...l,autoComplete:c,type:u?`text`:`password`,disabled:s,trailing:(0,i.jsxs)(i.Fragment,{children:[o,f]})})};exports.PasswordEntryRow=o;
 //# sourceMappingURL=PasswordEntryRow.cjs.map

package/dist/components/PasswordEntryRow/PasswordEntryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport const PasswordEntryRow = ({ trailing, disabled, ...props }: PasswordEntryRowProps) => {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n};\n"],"mappings":"4MAsBA,IAAa,GAAoB,CAAE,WAAU,WAAU,GAAG,KAAmC,CAC3F,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,EAAK,EAExC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAa,GAAM,CAAC,CAAC,CACvB,EACA,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAW,EAAA,YAAc,EAAA,WAAY,KAAK,KAAK,cAAA,EAAa,CAAA,CAClE,CAAA,EAGV,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACJ,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,CACD,CAAA,CAAA,CAEL,CAAA,CAEL"}
+{"version":3,"file":"PasswordEntryRow.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport const PasswordEntryRow = ({\n  trailing,\n  disabled,\n  // \"current-password\" lets password managers and mobile keyboards offer the\n  // saved credential; pass \"new-password\" for registration / change forms.\n  autoComplete = 'current-password',\n  ...props\n}: PasswordEntryRowProps) => {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      autoComplete={autoComplete}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n};\n"],"mappings":"4MAsBA,IAAa,GAAoB,CAC/B,WACA,WAGA,eAAe,mBACf,GAAG,KACwB,CAC3B,GAAM,CAAC,EAAU,IAAA,EAAA,EAAA,UAAwB,EAAK,EAExC,GACJ,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,aAClB,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAa,GAAM,CAAC,CAAC,CACvB,EACA,aAAY,EAAW,mBAAqB,kBAC5C,eAAc,EACJ,qBAEV,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAW,EAAA,YAAc,EAAA,WAAY,KAAK,KAAK,cAAA,EAAa,CAAA,CAClE,CAAA,EAGV,OACE,EAAA,EAAA,KAAC,EAAA,SAAD,CACE,GAAI,EACU,eACd,KAAM,EAAW,OAAS,WAChB,WACV,UACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,EACA,CACD,CAAA,CAAA,CAEL,CAAA,CAEL"}

package/dist/components/PasswordEntryRow/PasswordEntryRow.d.ts

@@ -13,4 +13,4 @@ export interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'tra
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html
  */
-export declare const PasswordEntryRow: ({ trailing, disabled, ...props }: PasswordEntryRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PasswordEntryRow: ({ trailing, disabled, autoComplete, ...props }: PasswordEntryRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PasswordEntryRow/PasswordEntryRow.js

@@ -5,27 +5,28 @@ import { useState as r } from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 import { ViewConceal as s, ViewReveal as c } from "@gnome-ui/icons";
 //#region src/components/PasswordEntryRow/PasswordEntryRow.tsx
-var l = ({ trailing: l, disabled: u, ...d }) => {
-	let [f, p] = r(!1), m = /* @__PURE__ */ a("button", {
+var l = ({ trailing: l, disabled: u, autoComplete: d = "current-password", ...f }) => {
+	let [p, m] = r(!1), h = /* @__PURE__ */ a("button", {
 		type: "button",
 		className: n.revealButton,
 		onClick: (e) => {
-			e.stopPropagation(), p((e) => !e);
+			e.stopPropagation(), m((e) => !e);
 		},
-		"aria-label": f ? "Conceal password" : "Reveal password",
-		"aria-pressed": f,
+		"aria-label": p ? "Conceal password" : "Reveal password",
+		"aria-pressed": p,
 		disabled: u,
 		children: /* @__PURE__ */ a(e, {
-			icon: f ? s : c,
+			icon: p ? s : c,
 			size: "md",
 			"aria-hidden": !0
 		})
 	});
 	return /* @__PURE__ */ a(t, {
-		...d,
-		type: f ? "text" : "password",
+		...f,
+		autoComplete: d,
+		type: p ? "text" : "password",
 		disabled: u,
-		trailing: /* @__PURE__ */ o(i, { children: [l, m] })
+		trailing: /* @__PURE__ */ o(i, { children: [l, h] })
 	});
 };
 //#endregion

package/dist/components/PasswordEntryRow/PasswordEntryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport const PasswordEntryRow = ({ trailing, disabled, ...props }: PasswordEntryRowProps) => {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAoB,EAAE,aAAU,aAAU,GAAG,QAAmC;CAC3F,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GAExC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;GAEd,AADA,EAAE,gBAAgB,GAClB,GAAa,MAAM,CAAC,CAAC;EACvB;EACA,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GAAM,MAAM,IAAW,IAAc;GAAY,MAAK;GAAK,eAAA;EAAa,CAAA;CAClE,CAAA;CAGV,OACE,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA;CAEL,CAAA;AAEL"}
+{"version":3,"file":"PasswordEntryRow.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.tsx"],"sourcesContent":["import { ViewConceal, ViewReveal } from '@gnome-ui/icons';\nimport { type ReactNode, useState } from 'react';\n\nimport { EntryRow, type EntryRowProps } from '../EntryRow';\nimport { Icon } from '../Icon';\n\nimport styles from './PasswordEntryRow.module.css';\n\nexport interface PasswordEntryRowProps extends Omit<EntryRowProps, 'type' | 'trailing'> {\n  /** Additional trailing widgets placed before the reveal button. */\n  trailing?: ReactNode;\n}\n\n/**\n * Password entry row with a built-in reveal/conceal toggle.\n *\n * Mirrors `AdwPasswordEntryRow` — an `EntryRow` variant that defaults to\n * `type=\"password\"` and provides a trailing icon button to reveal or conceal\n * the entered text. Use inside a `BoxedList` for password settings fields.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PasswordEntryRow.html\n */\nexport const PasswordEntryRow = ({\n  trailing,\n  disabled,\n  // \"current-password\" lets password managers and mobile keyboards offer the\n  // saved credential; pass \"new-password\" for registration / change forms.\n  autoComplete = 'current-password',\n  ...props\n}: PasswordEntryRowProps) => {\n  const [revealed, setRevealed] = useState(false);\n\n  const revealButton = (\n    <button\n      type=\"button\"\n      className={styles.revealButton}\n      onClick={(e) => {\n        e.stopPropagation();\n        setRevealed((v) => !v);\n      }}\n      aria-label={revealed ? 'Conceal password' : 'Reveal password'}\n      aria-pressed={revealed}\n      disabled={disabled}\n    >\n      <Icon icon={revealed ? ViewConceal : ViewReveal} size=\"md\" aria-hidden />\n    </button>\n  );\n\n  return (\n    <EntryRow\n      {...props}\n      autoComplete={autoComplete}\n      type={revealed ? 'text' : 'password'}\n      disabled={disabled}\n      trailing={\n        <>\n          {trailing}\n          {revealButton}\n        </>\n      }\n    />\n  );\n};\n"],"mappings":";;;;;;;AAsBA,IAAa,KAAoB,EAC/B,aACA,aAGA,kBAAe,oBACf,GAAG,QACwB;CAC3B,IAAM,CAAC,GAAU,KAAe,EAAS,EAAK,GAExC,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EAAO;EAClB,UAAU,MAAM;GAEd,AADA,EAAE,gBAAgB,GAClB,GAAa,MAAM,CAAC,CAAC;EACvB;EACA,cAAY,IAAW,qBAAqB;EAC5C,gBAAc;EACJ;YAEV,kBAAC,GAAD;GAAM,MAAM,IAAW,IAAc;GAAY,MAAK;GAAK,eAAA;EAAa,CAAA;CAClE,CAAA;CAGV,OACE,kBAAC,GAAD;EACE,GAAI;EACU;EACd,MAAM,IAAW,SAAS;EAChB;EACV,UACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA;CAEL,CAAA;AAEL"}

package/dist/components/ScrollToTop/ScrollToTop.cjs

@@ -0,0 +1,2 @@
+const e=require("../IconButton/IconButton.cjs"),t=require("./ScrollToTop.module.css.cjs"),n=require("./useScrollToTopVisibility.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@gnome-ui/icons");var o={"bottom-right":t.default.bottom_right,"bottom-left":t.default.bottom_left,"bottom-center":t.default.bottom_center,"top-right":t.default.top_right,"top-left":t.default.top_left,"top-center":t.default.top_center},s=(0,r.forwardRef)(function({visible:r=`auto`,position:s=`bottom-right`,threshold:c=300,scrollTarget:l,className:u,style:d},f){return n.useScrollToTopVisibility({visible:r,threshold:c,scrollTarget:l})?(0,i.jsx)(`div`,{ref:f,className:[t.default.root,o[s],u].filter(Boolean).join(` `),style:d,children:(0,i.jsx)(e.IconButton,{icon:a.GoUp,label:`Scroll to top`,variant:`osd`,onClick:()=>(l??window).scrollTo({top:0,behavior:`smooth`})})}):null});exports.ScrollToTop=s;
+//# sourceMappingURL=ScrollToTop.cjs.map

package/dist/components/ScrollToTop/ScrollToTop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.cjs","names":[],"sources":["../../../src/components/ScrollToTop/ScrollToTop.tsx"],"sourcesContent":["import { GoUp } from '@gnome-ui/icons';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { IconButton } from '../IconButton';\nimport styles from './ScrollToTop.module.css';\nimport { useScrollToTopVisibility } from './useScrollToTopVisibility';\n\n/**\n * Controls when the button is rendered.\n *\n * - `\"auto\"` — hidden until the user scrolls past `threshold` pixels (default).\n * - `\"always\"` — always rendered regardless of scroll position.\n */\nexport type ScrollToTopVisible = 'always' | 'auto';\n\n/**\n * Anchor corner or edge for the fixed-position container.\n * The button is inset `--gnome-space-4` (24 px) from each named edge.\n */\nexport type ScrollToTopPosition =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'top-right'\n  | 'top-left'\n  | 'top-center';\n\nexport interface ScrollToTopProps {\n  /**\n   * Controls when the button is visible.\n   *\n   * - `\"auto\"` (default) — shown only after the user scrolls past `threshold` pixels.\n   *   Hides again when they scroll back above the threshold.\n   * - `\"always\"` — permanently visible.\n   */\n  visible?: ScrollToTopVisible;\n  /**\n   * Corner or edge where the button is anchored inside the viewport.\n   *\n   * Default: `\"bottom-right\"`.\n   */\n  position?: ScrollToTopPosition;\n  /**\n   * Number of pixels the user must scroll before the button appears.\n   * Only relevant when `visible=\"auto\"`.\n   *\n   * Default: `300`.\n   */\n  threshold?: number;\n  /**\n   * Scrollable element to observe and scroll back to the top.\n   * Pass an `HTMLElement` when the scrollable area is a container other than\n   * the page (e.g. a drawer, a split-view pane, or a custom scroll region).\n   *\n   * Defaults to `window`.\n   */\n  scrollTarget?: HTMLElement | Window;\n  /** Additional CSS class applied to the root positioning container. */\n  className?: string;\n  /** Inline styles applied to the root positioning container. */\n  style?: CSSProperties;\n}\n\nconst POSITION_CLASS: Record<ScrollToTopPosition, string> = {\n  'bottom-right': styles.bottom_right,\n  'bottom-left': styles.bottom_left,\n  'bottom-center': styles.bottom_center,\n  'top-right': styles.top_right,\n  'top-left': styles.top_left,\n  'top-center': styles.top_center,\n};\n\n/**\n * Fixed-position OSD button that scrolls the page (or a container) back to the top.\n *\n * - Renders a circular `IconButton` with the `GoUp` icon at the chosen `position`.\n * - When `visible=\"auto\"` (default), the button appears only after the user scrolls\n *   past `threshold` pixels and hides again when they scroll back above it.\n * - The button is semi-transparent at rest (`opacity: 0.5`) and fully opaque on\n *   hover or keyboard focus, so it does not obscure underlying content.\n * - Clicking triggers a smooth scroll to the top via `scrollTo({ top: 0, behavior: \"smooth\" })`.\n * - Forwards `ref` to the root `<div>` positioning container, not the inner `<button>`.\n *\n * @example\n * // Minimal — appears after 300 px of scroll, anchored bottom-right\n * <ScrollToTop />\n *\n * @example\n * // Always visible, anchored bottom-left\n * <ScrollToTop visible=\"always\" position=\"bottom-left\" />\n *\n * @example\n * // Observe a custom scrollable container\n * const ref = useRef<HTMLDivElement>(null);\n * <div ref={ref} style={{ overflowY: 'auto', height: 400 }}>...</div>\n * <ScrollToTop scrollTarget={ref.current ?? undefined} threshold={150} />\n */\nexport const ScrollToTop = forwardRef<HTMLDivElement, ScrollToTopProps>(function ScrollToTop(\n  { visible = 'auto', position = 'bottom-right', threshold = 300, scrollTarget, className, style },\n  ref,\n) {\n  const isVisible = useScrollToTopVisibility({ visible, threshold, scrollTarget });\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={[styles.root, POSITION_CLASS[position], className].filter(Boolean).join(' ')}\n      style={style}\n    >\n      <IconButton\n        icon={GoUp}\n        label=\"Scroll to top\"\n        variant=\"osd\"\n        onClick={() => (scrollTarget ?? window).scrollTo({ top: 0, behavior: 'smooth' })}\n      />\n    </div>\n  );\n});\n"],"mappings":"yNA+DA,IAAM,EAAsD,CAC1D,eAAgB,EAAA,QAAO,aACvB,cAAe,EAAA,QAAO,YACtB,gBAAiB,EAAA,QAAO,cACxB,YAAa,EAAA,QAAO,UACpB,WAAY,EAAA,QAAO,SACnB,aAAc,EAAA,QAAO,UACvB,EA2Ba,GAAA,EAAA,EAAA,YAA2D,SACtE,CAAE,UAAU,OAAQ,WAAW,eAAgB,YAAY,IAAK,eAAc,YAAW,SACzF,EACA,CAOA,OANkB,EAAA,yBAAyB,CAAE,UAAS,YAAW,cAAa,CAEzE,GAKH,EAAA,EAAA,KAAC,MAAD,CACO,MACL,UAAW,CAAC,EAAA,QAAO,KAAM,EAAe,GAAW,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC/E,kBAEP,EAAA,EAAA,KAAC,EAAA,WAAD,CACE,KAAM,EAAA,KACN,MAAM,gBACN,QAAQ,MACR,aAAgB,GAAgB,QAAQ,SAAS,CAAE,IAAK,EAAG,SAAU,QAAS,CAAC,CAChF,CAAA,CACE,CAAA,EAfE,IAiBX,CAAC"}

package/dist/components/ScrollToTop/ScrollToTop.d.ts

@@ -0,0 +1,74 @@
+import { CSSProperties } from 'react';
+/**
+ * Controls when the button is rendered.
+ *
+ * - `"auto"` — hidden until the user scrolls past `threshold` pixels (default).
+ * - `"always"` — always rendered regardless of scroll position.
+ */
+export type ScrollToTopVisible = 'always' | 'auto';
+/**
+ * Anchor corner or edge for the fixed-position container.
+ * The button is inset `--gnome-space-4` (24 px) from each named edge.
+ */
+export type ScrollToTopPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
+export interface ScrollToTopProps {
+    /**
+     * Controls when the button is visible.
+     *
+     * - `"auto"` (default) — shown only after the user scrolls past `threshold` pixels.
+     *   Hides again when they scroll back above the threshold.
+     * - `"always"` — permanently visible.
+     */
+    visible?: ScrollToTopVisible;
+    /**
+     * Corner or edge where the button is anchored inside the viewport.
+     *
+     * Default: `"bottom-right"`.
+     */
+    position?: ScrollToTopPosition;
+    /**
+     * Number of pixels the user must scroll before the button appears.
+     * Only relevant when `visible="auto"`.
+     *
+     * Default: `300`.
+     */
+    threshold?: number;
+    /**
+     * Scrollable element to observe and scroll back to the top.
+     * Pass an `HTMLElement` when the scrollable area is a container other than
+     * the page (e.g. a drawer, a split-view pane, or a custom scroll region).
+     *
+     * Defaults to `window`.
+     */
+    scrollTarget?: HTMLElement | Window;
+    /** Additional CSS class applied to the root positioning container. */
+    className?: string;
+    /** Inline styles applied to the root positioning container. */
+    style?: CSSProperties;
+}
+/**
+ * Fixed-position OSD button that scrolls the page (or a container) back to the top.
+ *
+ * - Renders a circular `IconButton` with the `GoUp` icon at the chosen `position`.
+ * - When `visible="auto"` (default), the button appears only after the user scrolls
+ *   past `threshold` pixels and hides again when they scroll back above it.
+ * - The button is semi-transparent at rest (`opacity: 0.5`) and fully opaque on
+ *   hover or keyboard focus, so it does not obscure underlying content.
+ * - Clicking triggers a smooth scroll to the top via `scrollTo({ top: 0, behavior: "smooth" })`.
+ * - Forwards `ref` to the root `<div>` positioning container, not the inner `<button>`.
+ *
+ * @example
+ * // Minimal — appears after 300 px of scroll, anchored bottom-right
+ * <ScrollToTop />
+ *
+ * @example
+ * // Always visible, anchored bottom-left
+ * <ScrollToTop visible="always" position="bottom-left" />
+ *
+ * @example
+ * // Observe a custom scrollable container
+ * const ref = useRef<HTMLDivElement>(null);
+ * <div ref={ref} style={{ overflowY: 'auto', height: 400 }}>...</div>
+ * <ScrollToTop scrollTarget={ref.current ?? undefined} threshold={150} />
+ */
+export declare const ScrollToTop: import('react').ForwardRefExoticComponent<ScrollToTopProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/ScrollToTop/ScrollToTop.js

@@ -0,0 +1,42 @@
+import { IconButton as e } from "../IconButton/IconButton.js";
+import t from "./ScrollToTop.module.css.js";
+import { useScrollToTopVisibility as n } from "./useScrollToTopVisibility.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { GoUp as a } from "@gnome-ui/icons";
+//#region src/components/ScrollToTop/ScrollToTop.tsx
+var o = {
+	"bottom-right": t.bottom_right,
+	"bottom-left": t.bottom_left,
+	"bottom-center": t.bottom_center,
+	"top-right": t.top_right,
+	"top-left": t.top_left,
+	"top-center": t.top_center
+}, s = r(function({ visible: r = "auto", position: s = "bottom-right", threshold: c = 300, scrollTarget: l, className: u, style: d }, f) {
+	return n({
+		visible: r,
+		threshold: c,
+		scrollTarget: l
+	}) ? /* @__PURE__ */ i("div", {
+		ref: f,
+		className: [
+			t.root,
+			o[s],
+			u
+		].filter(Boolean).join(" "),
+		style: d,
+		children: /* @__PURE__ */ i(e, {
+			icon: a,
+			label: "Scroll to top",
+			variant: "osd",
+			onClick: () => (l ?? window).scrollTo({
+				top: 0,
+				behavior: "smooth"
+			})
+		})
+	}) : null;
+});
+//#endregion
+export { s as ScrollToTop };
+
+//# sourceMappingURL=ScrollToTop.js.map

package/dist/components/ScrollToTop/ScrollToTop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.js","names":[],"sources":["../../../src/components/ScrollToTop/ScrollToTop.tsx"],"sourcesContent":["import { GoUp } from '@gnome-ui/icons';\nimport { type CSSProperties, forwardRef } from 'react';\n\nimport { IconButton } from '../IconButton';\nimport styles from './ScrollToTop.module.css';\nimport { useScrollToTopVisibility } from './useScrollToTopVisibility';\n\n/**\n * Controls when the button is rendered.\n *\n * - `\"auto\"` — hidden until the user scrolls past `threshold` pixels (default).\n * - `\"always\"` — always rendered regardless of scroll position.\n */\nexport type ScrollToTopVisible = 'always' | 'auto';\n\n/**\n * Anchor corner or edge for the fixed-position container.\n * The button is inset `--gnome-space-4` (24 px) from each named edge.\n */\nexport type ScrollToTopPosition =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center'\n  | 'top-right'\n  | 'top-left'\n  | 'top-center';\n\nexport interface ScrollToTopProps {\n  /**\n   * Controls when the button is visible.\n   *\n   * - `\"auto\"` (default) — shown only after the user scrolls past `threshold` pixels.\n   *   Hides again when they scroll back above the threshold.\n   * - `\"always\"` — permanently visible.\n   */\n  visible?: ScrollToTopVisible;\n  /**\n   * Corner or edge where the button is anchored inside the viewport.\n   *\n   * Default: `\"bottom-right\"`.\n   */\n  position?: ScrollToTopPosition;\n  /**\n   * Number of pixels the user must scroll before the button appears.\n   * Only relevant when `visible=\"auto\"`.\n   *\n   * Default: `300`.\n   */\n  threshold?: number;\n  /**\n   * Scrollable element to observe and scroll back to the top.\n   * Pass an `HTMLElement` when the scrollable area is a container other than\n   * the page (e.g. a drawer, a split-view pane, or a custom scroll region).\n   *\n   * Defaults to `window`.\n   */\n  scrollTarget?: HTMLElement | Window;\n  /** Additional CSS class applied to the root positioning container. */\n  className?: string;\n  /** Inline styles applied to the root positioning container. */\n  style?: CSSProperties;\n}\n\nconst POSITION_CLASS: Record<ScrollToTopPosition, string> = {\n  'bottom-right': styles.bottom_right,\n  'bottom-left': styles.bottom_left,\n  'bottom-center': styles.bottom_center,\n  'top-right': styles.top_right,\n  'top-left': styles.top_left,\n  'top-center': styles.top_center,\n};\n\n/**\n * Fixed-position OSD button that scrolls the page (or a container) back to the top.\n *\n * - Renders a circular `IconButton` with the `GoUp` icon at the chosen `position`.\n * - When `visible=\"auto\"` (default), the button appears only after the user scrolls\n *   past `threshold` pixels and hides again when they scroll back above it.\n * - The button is semi-transparent at rest (`opacity: 0.5`) and fully opaque on\n *   hover or keyboard focus, so it does not obscure underlying content.\n * - Clicking triggers a smooth scroll to the top via `scrollTo({ top: 0, behavior: \"smooth\" })`.\n * - Forwards `ref` to the root `<div>` positioning container, not the inner `<button>`.\n *\n * @example\n * // Minimal — appears after 300 px of scroll, anchored bottom-right\n * <ScrollToTop />\n *\n * @example\n * // Always visible, anchored bottom-left\n * <ScrollToTop visible=\"always\" position=\"bottom-left\" />\n *\n * @example\n * // Observe a custom scrollable container\n * const ref = useRef<HTMLDivElement>(null);\n * <div ref={ref} style={{ overflowY: 'auto', height: 400 }}>...</div>\n * <ScrollToTop scrollTarget={ref.current ?? undefined} threshold={150} />\n */\nexport const ScrollToTop = forwardRef<HTMLDivElement, ScrollToTopProps>(function ScrollToTop(\n  { visible = 'auto', position = 'bottom-right', threshold = 300, scrollTarget, className, style },\n  ref,\n) {\n  const isVisible = useScrollToTopVisibility({ visible, threshold, scrollTarget });\n\n  if (!isVisible) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={[styles.root, POSITION_CLASS[position], className].filter(Boolean).join(' ')}\n      style={style}\n    >\n      <IconButton\n        icon={GoUp}\n        label=\"Scroll to top\"\n        variant=\"osd\"\n        onClick={() => (scrollTarget ?? window).scrollTo({ top: 0, behavior: 'smooth' })}\n      />\n    </div>\n  );\n});\n"],"mappings":";;;;;;;AA+DA,IAAM,IAAsD;CAC1D,gBAAgB,EAAO;CACvB,eAAe,EAAO;CACtB,iBAAiB,EAAO;CACxB,aAAa,EAAO;CACpB,YAAY,EAAO;CACnB,cAAc,EAAO;AACvB,GA2Ba,IAAc,EAA6C,SACtE,EAAE,aAAU,QAAQ,cAAW,gBAAgB,eAAY,KAAK,iBAAc,cAAW,YACzF,GACA;CAOA,OANkB,EAAyB;EAAE;EAAS;EAAW;CAAa,CAEzE,IAKH,kBAAC,OAAD;EACO;EACL,WAAW;GAAC,EAAO;GAAM,EAAe;GAAW;EAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC/E;YAEP,kBAAC,GAAD;GACE,MAAM;GACN,OAAM;GACN,SAAQ;GACR,gBAAgB,KAAgB,QAAQ,SAAS;IAAE,KAAK;IAAG,UAAU;GAAS,CAAC;EAChF,CAAA;CACE,CAAA,IAfE;AAiBX,CAAC"}

package/dist/components/ScrollToTop/ScrollToTop.module.css.cjs

@@ -0,0 +1,2 @@
+var e={root:`_root_1qshr_1`,bottom_right:`_bottom_right_1qshr_8`,bottom_left:`_bottom_left_1qshr_13`,bottom_center:`_bottom_center_1qshr_18`,top_right:`_top_right_1qshr_24`,top_left:`_top_left_1qshr_29`,top_center:`_top_center_1qshr_34`};exports.default=e;
+//# sourceMappingURL=ScrollToTop.module.css.cjs.map

package/dist/components/ScrollToTop/ScrollToTop.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.module.css.cjs","names":[],"sources":["../../../src/components/ScrollToTop/ScrollToTop.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n}\n\n/* Position variants — 24px edge spacing via --gnome-space-4 */\n.bottom_right {\n  bottom: var(--gnome-space-4, 24px);\n  right: var(--gnome-space-4, 24px);\n}\n\n.bottom_left {\n  bottom: var(--gnome-space-4, 24px);\n  left: var(--gnome-space-4, 24px);\n}\n\n.bottom_center {\n  bottom: var(--gnome-space-4, 24px);\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.top_right {\n  top: var(--gnome-space-4, 24px);\n  right: var(--gnome-space-4, 24px);\n}\n\n.top_left {\n  top: var(--gnome-space-4, 24px);\n  left: var(--gnome-space-4, 24px);\n}\n\n.top_center {\n  top: var(--gnome-space-4, 24px);\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* Re-enable pointer events and apply hover opacity on the button */\n.root > button {\n  pointer-events: auto;\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.root > button:hover,\n.root > button:focus-visible {\n  opacity: 1;\n}\n"],"mappings":""}

package/dist/components/ScrollToTop/ScrollToTop.module.css.js

@@ -0,0 +1,13 @@
+var e = {
+	root: "_root_1qshr_1",
+	bottom_right: "_bottom_right_1qshr_8",
+	bottom_left: "_bottom_left_1qshr_13",
+	bottom_center: "_bottom_center_1qshr_18",
+	top_right: "_top_right_1qshr_24",
+	top_left: "_top_left_1qshr_29",
+	top_center: "_top_center_1qshr_34"
+};
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=ScrollToTop.module.css.js.map

package/dist/components/ScrollToTop/ScrollToTop.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollToTop.module.css.js","names":[],"sources":["../../../src/components/ScrollToTop/ScrollToTop.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  z-index: 9999;\n  pointer-events: none;\n}\n\n/* Position variants — 24px edge spacing via --gnome-space-4 */\n.bottom_right {\n  bottom: var(--gnome-space-4, 24px);\n  right: var(--gnome-space-4, 24px);\n}\n\n.bottom_left {\n  bottom: var(--gnome-space-4, 24px);\n  left: var(--gnome-space-4, 24px);\n}\n\n.bottom_center {\n  bottom: var(--gnome-space-4, 24px);\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.top_right {\n  top: var(--gnome-space-4, 24px);\n  right: var(--gnome-space-4, 24px);\n}\n\n.top_left {\n  top: var(--gnome-space-4, 24px);\n  left: var(--gnome-space-4, 24px);\n}\n\n.top_center {\n  top: var(--gnome-space-4, 24px);\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n/* Re-enable pointer events and apply hover opacity on the button */\n.root > button {\n  pointer-events: auto;\n  opacity: 0.5;\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.root > button:hover,\n.root > button:focus-visible {\n  opacity: 1;\n}\n"],"mappings":""}

package/dist/components/ScrollToTop/index.d.ts

@@ -0,0 +1,2 @@
+export type { ScrollToTopPosition, ScrollToTopProps, ScrollToTopVisible } from './ScrollToTop';
+export { ScrollToTop } from './ScrollToTop';

package/dist/components/ScrollToTop/useScrollToTopVisibility.cjs

@@ -0,0 +1,2 @@
+let e=require("react");function t({visible:t,threshold:n,scrollTarget:r}){let[i,a]=(0,e.useState)(!1);return(0,e.useEffect)(()=>{if(t===`always`)return;let e=r??window,i=()=>e===window?window.scrollY:e.scrollTop,o=()=>a(i()>n);return o(),e.addEventListener(`scroll`,o,{passive:!0}),()=>e.removeEventListener(`scroll`,o)},[t,n,r]),t===`always`||i}exports.useScrollToTopVisibility=t;
+//# sourceMappingURL=useScrollToTopVisibility.cjs.map

package/dist/components/ScrollToTop/useScrollToTopVisibility.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollToTopVisibility.cjs","names":[],"sources":["../../../src/components/ScrollToTop/useScrollToTopVisibility.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport type { ScrollToTopVisible } from './ScrollToTop';\n\ninterface UseScrollToTopVisibilityOptions {\n  /** See {@link ScrollToTopVisible}. */\n  visible: ScrollToTopVisible;\n  /** Pixels scrolled before returning `true` in `\"auto\"` mode. */\n  threshold: number;\n  /** Element to observe. Defaults to `window` when `undefined`. */\n  scrollTarget?: HTMLElement | Window;\n}\n\n/**\n * Returns `true` when the `ScrollToTop` button should be rendered.\n *\n * - `visible === \"always\"` → always `true`; no scroll listener is attached.\n * - `visible === \"auto\"` → attaches a passive `scroll` listener on `scrollTarget`\n *   (or `window`) and returns `true` once the scroll offset exceeds `threshold`.\n *   Reverts to `false` when the user scrolls back below the threshold.\n *\n * This is an internal hook — not exported from the package.\n */\nexport function useScrollToTopVisibility({\n  visible,\n  threshold,\n  scrollTarget,\n}: UseScrollToTopVisibilityOptions): boolean {\n  const [isScrolledPast, setIsScrolledPast] = useState(false);\n\n  useEffect(() => {\n    if (visible === 'always') {\n      return;\n    }\n\n    const target = scrollTarget ?? window;\n\n    const getScrollY = () =>\n      target === window ? window.scrollY : (target as HTMLElement).scrollTop;\n\n    const check = () => setIsScrolledPast(getScrollY() > threshold);\n\n    check();\n    target.addEventListener('scroll', check, { passive: true });\n    return () => target.removeEventListener('scroll', check);\n  }, [visible, threshold, scrollTarget]);\n\n  return visible === 'always' || isScrolledPast;\n}\n"],"mappings":"uBAuBA,SAAgB,EAAyB,CACvC,UACA,YACA,gBAC2C,CAC3C,GAAM,CAAC,EAAgB,IAAA,EAAA,EAAA,UAA8B,EAAK,EAmB1D,OAjBA,EAAA,EAAA,eAAgB,CACd,GAAI,IAAY,SACd,OAGF,IAAM,EAAS,GAAgB,OAEzB,MACJ,IAAW,OAAS,OAAO,QAAW,EAAuB,UAEzD,MAAc,EAAkB,EAAW,EAAI,CAAS,EAI9D,OAFA,EAAM,EACN,EAAO,iBAAiB,SAAU,EAAO,CAAE,QAAS,EAAK,CAAC,MAC7C,EAAO,oBAAoB,SAAU,CAAK,CACzD,EAAG,CAAC,EAAS,EAAW,CAAY,CAAC,EAE9B,IAAY,UAAY,CACjC"}

package/dist/components/ScrollToTop/useScrollToTopVisibility.d.ts

@@ -0,0 +1,21 @@
+import { ScrollToTopVisible } from './ScrollToTop';
+interface UseScrollToTopVisibilityOptions {
+    /** See {@link ScrollToTopVisible}. */
+    visible: ScrollToTopVisible;
+    /** Pixels scrolled before returning `true` in `"auto"` mode. */
+    threshold: number;
+    /** Element to observe. Defaults to `window` when `undefined`. */
+    scrollTarget?: HTMLElement | Window;
+}
+/**
+ * Returns `true` when the `ScrollToTop` button should be rendered.
+ *
+ * - `visible === "always"` → always `true`; no scroll listener is attached.
+ * - `visible === "auto"` → attaches a passive `scroll` listener on `scrollTarget`
+ *   (or `window`) and returns `true` once the scroll offset exceeds `threshold`.
+ *   Reverts to `false` when the user scrolls back below the threshold.
+ *
+ * This is an internal hook — not exported from the package.
+ */
+export declare function useScrollToTopVisibility({ visible, threshold, scrollTarget, }: UseScrollToTopVisibilityOptions): boolean;
+export {};