@gnome-ui/react 1.48.0 → 1.49.1

package/dist/components/Carousel/Carousel.js

@@ -28,75 +28,132 @@ var s = ({ pages: t, currentPage: n, onPageSelected: r, className: i, ...a }) =>
 		className: [e.line, i === n ? e.lineActive : null].filter(Boolean).join(" "),
 		onClick: () => r?.(i)
 	}, i))
-}), l = ({ children: s, orientation: c = "horizontal", spacing: l = 0, loop: u = !1, onPageChanged: d, page: f, className: p, ...m }) => {
-	let h = i(null), g = t.count(s), [_, v] = a(0), y = f !== void 0, b = y ? f : _, x = n((e, t = "smooth") => {
-		let n = h.current;
-		n && (c === "horizontal" ? n.scrollTo({
-			left: n.clientWidth * e,
+}), l = ({ children: s, orientation: c = "horizontal", spacing: l = 0, loop: u = !1, visibleSlides: d = 1, onPageChanged: f, page: p, className: m, ...h }) => {
+	let g = i(null), _ = t.count(s), [v, y] = a(0), [b, x] = a(!1), S = p !== void 0, C = S ? p : v, w = i(!1), T = i(!1), E = i({
+		pos: 0,
+		scroll: 0,
+		time: 0
+	}), D = i(0), O = n(() => {
+		let e = g.current;
+		return e ? ((c === "horizontal" ? e.clientWidth : e.clientHeight) + l) / d : 1;
+	}, [
+		c,
+		l,
+		d
+	]), k = n((e, t = "smooth") => {
+		let n = g.current;
+		if (!n) return;
+		let r = O() * e;
+		c === "horizontal" ? n.scrollTo({
+			left: r,
 			behavior: t
 		}) : n.scrollTo({
-			top: n.clientHeight * e,
+			top: r,
 			behavior: t
-		}));
-	}, [c]);
+		});
+	}, [c, O]);
 	r(() => {
-		y && x(f, "smooth");
+		S && k(p, "smooth");
 	}, [
-		f,
-		x,
-		y
+		p,
+		k,
+		S
 	]), r(() => {
-		let e = h.current;
+		let e = g.current;
 		if (!e) return;
 		let t = () => {
-			Array.from(e.children);
-			let t = c === "horizontal" ? e.clientWidth : e.clientHeight, n = c === "horizontal" ? e.scrollLeft : e.scrollTop, r = Math.round(n / (t || 1)), i = Math.max(0, Math.min(r, g - 1));
-			y || v(i), d?.(i);
+			if (w.current) return;
+			let t = O(), n = c === "horizontal" ? e.scrollLeft : e.scrollTop, r = Math.round(n / t), i = Math.max(0, Math.min(r, _ - 1));
+			S || y(i), f?.(i);
 		};
 		return e.addEventListener("scroll", t, { passive: !0 }), () => e.removeEventListener("scroll", t);
 	}, [
 		c,
-		g,
-		y,
-		d
+		_,
+		S,
+		f,
+		O
 	]);
-	let S = n((e) => {
+	let A = n((e) => {
 		let t = c === "horizontal" ? e.key === "ArrowRight" : e.key === "ArrowDown", n = c === "horizontal" ? e.key === "ArrowLeft" : e.key === "ArrowUp";
-		if (t) {
-			e.preventDefault();
-			let t = u ? (b + 1) % g : Math.min(b + 1, g - 1);
-			x(t), y || v(t), d?.(t);
-		} else if (n) {
-			e.preventDefault();
-			let t = u ? (b - 1 + g) % g : Math.max(b - 1, 0);
-			x(t), y || v(t), d?.(t);
-		}
+		if (!t && !n) return;
+		e.preventDefault();
+		let r = t ? u ? (C + 1) % _ : Math.min(C + 1, _ - 1) : u ? (C - 1 + _) % _ : Math.max(C - 1, 0);
+		k(r), S || y(r), f?.(r);
 	}, [
-		b,
-		g,
+		C,
+		_,
 		u,
 		c,
-		x,
-		y,
-		d
-	]), C = c === "horizontal";
+		k,
+		S,
+		f
+	]), j = n((e) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		let t = g.current;
+		t && (window.clearTimeout(D.current), t.style.scrollSnapType = "none", e.currentTarget.setPointerCapture(e.pointerId), w.current = !0, T.current = !1, x(!0), E.current = {
+			pos: c === "horizontal" ? e.clientX : e.clientY,
+			scroll: c === "horizontal" ? t.scrollLeft : t.scrollTop,
+			time: Date.now()
+		});
+	}, [c]), M = n((e) => {
+		if (!w.current) return;
+		let t = g.current;
+		if (!t) return;
+		let n = c === "horizontal" ? e.clientX : e.clientY, r = E.current.pos - n;
+		Math.abs(r) > 4 && (T.current = !0);
+		let i = c === "horizontal" ? t.scrollWidth - t.clientWidth : t.scrollHeight - t.clientHeight, a = E.current.scroll + r;
+		a < 0 ? a *= .3 : a > i && (a = i + (a - i) * .3), c === "horizontal" ? t.scrollLeft = a : t.scrollTop = a;
+	}, [c]), N = n((e) => {
+		if (!w.current) return;
+		w.current = !1, x(!1);
+		let t = g.current;
+		if (!T.current || !t) {
+			t?.style.removeProperty("scroll-snap-type");
+			return;
+		}
+		let n = e.type === "pointercancel", r = n ? E.current.pos : c === "horizontal" ? e.clientX : e.clientY, i = E.current.pos - r, a = Math.max(Date.now() - E.current.time, 1), o = n ? 0 : i / a, s = O(), l = c === "horizontal" ? t.scrollLeft : t.scrollTop, d;
+		d = Math.abs(o) > .3 ? o > 0 ? Math.ceil(l / s) : Math.floor(l / s) : Math.round(l / s), d = u ? (d % _ + _) % _ : Math.max(0, Math.min(d, _ - 1)), k(d), S || y(d), f?.(d), D.current = window.setTimeout(() => {
+			t.style.removeProperty("scroll-snap-type");
+		}, 350);
+	}, [
+		c,
+		O,
+		u,
+		_,
+		k,
+		S,
+		f
+	]);
+	r(() => () => window.clearTimeout(D.current), []);
+	let P = n((e) => {
+		T.current &&= (e.preventDefault(), e.stopPropagation(), !1);
+	}, []), F = c === "horizontal", I = d === 1 ? void 0 : `calc((100% - ${l * (d - 1)}px) / ${d})`;
 	return /* @__PURE__ */ o("div", {
-		ref: h,
+		ref: g,
 		role: "region",
 		"aria-roledescription": "carousel",
+		tabIndex: 0,
 		className: [
 			e.carousel,
-			C ? e.horizontal : e.vertical,
-			p
+			F ? e.horizontal : e.vertical,
+			b ? e.dragging : null,
+			m
 		].filter(Boolean).join(" "),
-		style: C ? { columnGap: l || void 0 } : { rowGap: l || void 0 },
-		onKeyDown: S,
-		...m,
+		style: F ? { columnGap: l || void 0 } : { rowGap: l || void 0 },
+		onKeyDown: A,
+		onPointerDown: j,
+		onPointerMove: M,
+		onPointerUp: N,
+		onPointerCancel: N,
+		onClick: P,
+		...h,
 		children: t.map(s, (t, n) => /* @__PURE__ */ o("div", {
 			className: e.slide,
 			role: "group",
 			"aria-roledescription": "slide",
-			"aria-label": `${n + 1} of ${g}`,
+			"aria-label": `${n + 1} of ${_}`,
+			style: I ? { flex: `0 0 ${I}` } : void 0,
 			children: t
 		}, n))
 	});

package/dist/components/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys) and touch/mouse\n * drag via the browser's native scroll handling.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  onPageChanged,\n  page: controlledPage,\n  className,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pageCount = Children.count(children);\n  const [internalPage, setInternalPage] = useState(0);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n\n      if (!el) {\n        return;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: el.clientWidth * index, behavior });\n      } else {\n        el.scrollTo({ top: el.clientHeight * index, behavior });\n      }\n    },\n    [orientation],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes via IntersectionObserver on each child\n  useEffect(() => {\n    const el = scrollRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      const pages = Array.from(el.children) as HTMLElement[];\n      const size = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / (size || 1));\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n\n      onPageChanged?.(clamped);\n      void pages; // suppress lint\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged]);\n\n  // Keyboard navigation\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (isForward) {\n        e.preventDefault();\n        const next = loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1);\n\n        scrollToPage(next);\n        if (!isControlled) {\n          setInternalPage(next);\n        }\n\n        onPageChanged?.(next);\n      } else if (isBack) {\n        e.preventDefault();\n        const prev = loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n        scrollToPage(prev);\n        if (!isControlled) {\n          setInternalPage(prev);\n        }\n\n        onPageChanged?.(prev);\n      }\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  const isHorizontal = orientation === 'horizontal';\n\n  return (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      className={[styles.carousel, isHorizontal ? styles.horizontal : styles.vertical, className]\n        .filter(Boolean)\n        .join(' ')}\n      style={isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${pageCount}`}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Carousel.js","names":[],"sources":["../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import {\n  Children,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './Carousel.module.css';\n\n// ─── CarouselIndicatorDots ────────────────────────────────────────────────────\n\nexport interface CarouselIndicatorDotsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a dot. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Dot-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorDots`.\n */\nexport const CarouselIndicatorDots = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorDotsProps) => {\n  return (\n    <div\n      className={[styles.indicatorDots, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.dot, i === currentPage ? styles.dotActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── CarouselIndicatorLines ───────────────────────────────────────────────────\n\nexport interface CarouselIndicatorLinesProps extends HTMLAttributes<HTMLDivElement> {\n  /** Total number of pages. */\n  pages: number;\n  /** Zero-based index of the current page. */\n  currentPage: number;\n  /** Called when the user clicks a line. */\n  onPageSelected?: (index: number) => void;\n}\n\n/**\n * Line-style page indicator for `Carousel`.\n * Mirrors `AdwCarouselIndicatorLines`.\n */\nexport const CarouselIndicatorLines = ({\n  pages,\n  currentPage,\n  onPageSelected,\n  className,\n  ...props\n}: CarouselIndicatorLinesProps) => {\n  return (\n    <div\n      className={[styles.indicatorLines, className].filter(Boolean).join(' ')}\n      role=\"tablist\"\n      aria-label=\"Carousel pages\"\n      {...props}\n    >\n      {Array.from({ length: pages }, (_, i) => (\n        <button\n          key={i}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={i === currentPage}\n          aria-label={`Page ${i + 1}`}\n          className={[styles.line, i === currentPage ? styles.lineActive : null]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => onPageSelected?.(i)}\n        />\n      ))}\n    </div>\n  );\n};\n\n// ─── Carousel ─────────────────────────────────────────────────────────────────\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n  /**\n   * Scroll orientation.\n   * @default \"horizontal\"\n   */\n  orientation?: 'horizontal' | 'vertical';\n  /**\n   * Gap between pages in px.\n   * @default 0\n   */\n  spacing?: number;\n  /**\n   * Allow infinite looping (wraps around on the last/first page).\n   * @default false\n   */\n  loop?: boolean;\n  /**\n   * Number of slides visible at once. Supports fractional values (e.g. `1.5`)\n   * to peek at the edge of the next slide.\n   * @default 1\n   */\n  visibleSlides?: number;\n  /** Called whenever the visible page changes. */\n  onPageChanged?: (index: number) => void;\n  /**\n   * Controlled current page index.\n   * When omitted the carousel manages page state internally.\n   */\n  page?: number;\n}\n\n/**\n * Swipeable content carousel.\n *\n * Mirrors `AdwCarousel`. Uses CSS scroll-snapping for smooth, native-feeling\n * page transitions. Supports keyboard navigation (arrow keys), touch/mouse drag,\n * and velocity-based flick gestures.\n *\n * Pair with `CarouselIndicatorDots` or `CarouselIndicatorLines` for pagination UI.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Carousel.html\n */\nexport const Carousel = ({\n  children,\n  orientation = 'horizontal',\n  spacing = 0,\n  loop = false,\n  visibleSlides = 1,\n  onPageChanged,\n  page: controlledPage,\n  className,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const pageCount = Children.count(children);\n  const [internalPage, setInternalPage] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n  const isControlled = controlledPage !== undefined;\n  const currentPage = isControlled ? controlledPage : internalPage;\n\n  // Refs for drag state — avoids stale closures in pointer handlers\n  const draggingRef = useRef(false);\n  const hasDraggedRef = useRef(false);\n  const dragStartRef = useRef({ pos: 0, scroll: 0, time: 0 });\n  const snapRestoreTimerRef = useRef(0);\n\n  // Scroll distance per page: (containerSize - spacing*(visibleSlides-1)) / visibleSlides + spacing\n  // Simplifies to: (containerSize + spacing) / visibleSlides\n  const getPageSize = useCallback(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return 1;\n    }\n    const containerSize = orientation === 'horizontal' ? el.clientWidth : el.clientHeight;\n    return (containerSize + spacing) / visibleSlides;\n  }, [orientation, spacing, visibleSlides]);\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n      const offset = getPageSize() * index;\n      if (orientation === 'horizontal') {\n        el.scrollTo({ left: offset, behavior });\n      } else {\n        el.scrollTo({ top: offset, behavior });\n      }\n    },\n    [orientation, getPageSize],\n  );\n\n  // Scroll to the controlled page when it changes externally\n  useEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n    scrollToPage(controlledPage, 'smooth');\n  }, [controlledPage, scrollToPage, isControlled]);\n\n  // Detect page changes from native scroll (touch) — skipped during mouse drag\n  useEffect(() => {\n    const el = scrollRef.current;\n    if (!el) {\n      return;\n    }\n\n    const handleScroll = () => {\n      if (draggingRef.current) {\n        return;\n      }\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n      const idx = Math.round(scroll / pageSize);\n      const clamped = Math.max(0, Math.min(idx, pageCount - 1));\n      if (!isControlled) {\n        setInternalPage(clamped);\n      }\n      onPageChanged?.(clamped);\n    };\n\n    el.addEventListener('scroll', handleScroll, { passive: true });\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [orientation, pageCount, isControlled, onPageChanged, getPageSize]);\n\n  // ── Keyboard navigation ───────────────────────────────────────────────────\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const isForward =\n        orientation === 'horizontal' ? e.key === 'ArrowRight' : e.key === 'ArrowDown';\n      const isBack = orientation === 'horizontal' ? e.key === 'ArrowLeft' : e.key === 'ArrowUp';\n\n      if (!isForward && !isBack) {\n        return;\n      }\n      e.preventDefault();\n\n      const next = isForward\n        ? loop\n          ? (currentPage + 1) % pageCount\n          : Math.min(currentPage + 1, pageCount - 1)\n        : loop\n          ? (currentPage - 1 + pageCount) % pageCount\n          : Math.max(currentPage - 1, 0);\n\n      scrollToPage(next);\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onPageChanged?.(next);\n    },\n    [currentPage, pageCount, loop, orientation, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // ── Drag (mouse + touch + pen) ───────────────────────────────────────────\n\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      // Ignore non-primary mouse buttons\n      if (e.pointerType === 'mouse' && e.button !== 0) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      // Disable scroll-snap immediately via DOM — not via React state, which would\n      // only apply after the next render, letting scroll-snap fight the first moves.\n      window.clearTimeout(snapRestoreTimerRef.current);\n      el.style.scrollSnapType = 'none';\n\n      // Capture so pointermove/up fire even when the pointer leaves the element\n      e.currentTarget.setPointerCapture(e.pointerId);\n      draggingRef.current = true;\n      hasDraggedRef.current = false;\n      setIsDragging(true);\n      dragStartRef.current = {\n        pos: orientation === 'horizontal' ? e.clientX : e.clientY,\n        scroll: orientation === 'horizontal' ? el.scrollLeft : el.scrollTop,\n        time: Date.now(),\n      };\n    },\n    [orientation],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n\n      const pos = orientation === 'horizontal' ? e.clientX : e.clientY;\n      const delta = dragStartRef.current.pos - pos;\n\n      if (Math.abs(delta) > 4) {\n        hasDraggedRef.current = true;\n      }\n\n      // Apply boundary resistance: dampen movement past first/last slide\n      const maxScroll =\n        orientation === 'horizontal'\n          ? el.scrollWidth - el.clientWidth\n          : el.scrollHeight - el.clientHeight;\n      let newScroll = dragStartRef.current.scroll + delta;\n\n      if (newScroll < 0) {\n        newScroll *= 0.3;\n      } else if (newScroll > maxScroll) {\n        newScroll = maxScroll + (newScroll - maxScroll) * 0.3;\n      }\n\n      if (orientation === 'horizontal') {\n        el.scrollLeft = newScroll;\n      } else {\n        el.scrollTop = newScroll;\n      }\n    },\n    [orientation],\n  );\n\n  const handlePointerUp = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!draggingRef.current) {\n        return;\n      }\n\n      draggingRef.current = false;\n      setIsDragging(false);\n\n      const el = scrollRef.current;\n\n      if (!hasDraggedRef.current || !el) {\n        // No real drag — restore snap immediately\n        el?.style.removeProperty('scroll-snap-type');\n        return;\n      }\n\n      const isCancel = e.type === 'pointercancel';\n      const pos = isCancel\n        ? dragStartRef.current.pos\n        : orientation === 'horizontal'\n          ? e.clientX\n          : e.clientY;\n\n      const delta = dragStartRef.current.pos - pos;\n      const elapsed = Math.max(Date.now() - dragStartRef.current.time, 1);\n      const velocity = isCancel ? 0 : delta / elapsed; // px/ms, positive = forward\n      const pageSize = getPageSize();\n      const scroll = orientation === 'horizontal' ? el.scrollLeft : el.scrollTop;\n\n      let target: number;\n      if (Math.abs(velocity) > 0.3) {\n        // Flick gesture — advance in the swipe direction\n        target = velocity > 0 ? Math.ceil(scroll / pageSize) : Math.floor(scroll / pageSize);\n      } else {\n        // Slow drag — snap to nearest page\n        target = Math.round(scroll / pageSize);\n      }\n\n      if (loop) {\n        target = ((target % pageCount) + pageCount) % pageCount;\n      } else {\n        target = Math.max(0, Math.min(target, pageCount - 1));\n      }\n\n      // Scroll to target while snap is still disabled, then re-enable once settled\n      scrollToPage(target);\n      if (!isControlled) {\n        setInternalPage(target);\n      }\n      onPageChanged?.(target);\n\n      // Re-enable snap after the smooth scroll animation completes (~300 ms)\n      snapRestoreTimerRef.current = window.setTimeout(() => {\n        el.style.removeProperty('scroll-snap-type');\n      }, 350);\n    },\n    [orientation, getPageSize, loop, pageCount, scrollToPage, isControlled, onPageChanged],\n  );\n\n  // Clean up the snap-restore timer on unmount\n  useEffect(() => {\n    return () => window.clearTimeout(snapRestoreTimerRef.current);\n  }, []);\n\n  // Prevent click events that fire after a drag (e.g. links/buttons inside slides)\n  const handleClick = useCallback((e: MouseEvent) => {\n    if (hasDraggedRef.current) {\n      e.preventDefault();\n      e.stopPropagation();\n      hasDraggedRef.current = false;\n    }\n  }, []);\n\n  const isHorizontal = orientation === 'horizontal';\n\n  // Slide width when showing more than one at a time\n  const slideFlexBasis =\n    visibleSlides !== 1\n      ? `calc((100% - ${spacing * (visibleSlides - 1)}px) / ${visibleSlides})`\n      : undefined;\n\n  return (\n    <div\n      ref={scrollRef}\n      role=\"region\"\n      aria-roledescription=\"carousel\"\n      tabIndex={0}\n      className={[\n        styles.carousel,\n        isHorizontal ? styles.horizontal : styles.vertical,\n        isDragging ? styles.dragging : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }}\n      onKeyDown={handleKeyDown}\n      onPointerDown={handlePointerDown}\n      onPointerMove={handlePointerMove}\n      onPointerUp={handlePointerUp}\n      onPointerCancel={handlePointerUp}\n      onClick={handleClick}\n      {...props}\n    >\n      {Children.map(children, (child, i) => (\n        <div\n          key={i}\n          className={styles.slide}\n          role=\"group\"\n          aria-roledescription=\"slide\"\n          aria-label={`${i + 1} of ${pageCount}`}\n          style={slideFlexBasis ? { flex: `0 0 ${slideFlexBasis}` } : undefined}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={carousel:`_carousel_1tci2_3`,horizontal:`_horizontal_1tci2_20`,vertical:`_vertical_1tci2_27`,slide:`_slide_1tci2_36`,indicatorDots:`_indicatorDots_1tci2_46`,dot:`_dot_1tci2_54`,dotActive:`_dotActive_1tci2_73`,indicatorLines:`_indicatorLines_1tci2_85`,line:`_line_1tci2_93`,lineActive:`_lineActive_1tci2_110`};exports.default=e;
+var e={carousel:`_carousel_1yojd_3`,horizontal:`_horizontal_1yojd_25`,vertical:`_vertical_1yojd_34`,dragging:`_dragging_1yojd_44`,slide:`_slide_1yojd_53`,indicatorDots:`_indicatorDots_1yojd_62`,dot:`_dot_1yojd_70`,dotActive:`_dotActive_1yojd_89`,indicatorLines:`_indicatorLines_1yojd_101`,line:`_line_1yojd_109`,lineActive:`_lineActive_1yojd_126`};exports.default=e;
 //# sourceMappingURL=Carousel.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.module.css.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── */\n\n.carousel {\n  display: flex;\n  overflow: hidden;\n  scroll-snap-type: both mandatory;\n  -webkit-overflow-scrolling: touch;\n  outline: none;\n  width: 100%;\n}\n\n.carousel:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n  flex-direction: row;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-snap-type: x mandatory;\n}\n\n.vertical {\n  flex-direction: column;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  scroll-snap-type: y mandatory;\n}\n\n/* ─── Slide ─────────────────────────────────────────────────────────────────── */\n\n.slide {\n  flex: 0 0 100%;\n  scroll-snap-align: start;\n  scroll-snap-stop: always;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ─── Dot indicators ────────────────────────────────────────────────────────── */\n\n.indicatorDots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n  opacity: 0.5;\n}\n\n.dotActive {\n  opacity: 1;\n  transform: scale(1.15);\n}\n\n.dot:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Line indicators ───────────────────────────────────────────────────────── */\n\n.indicatorLines {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n  opacity: 0.5;\n}\n\n.lineActive {\n  opacity: 1;\n}\n\n.line:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .carousel {\n    scroll-behavior: auto;\n  }\n\n  .dot,\n  .line {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Carousel.module.css.cjs","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── */\n\n.carousel {\n  display: flex;\n  overflow: hidden;\n  overscroll-behavior: contain;\n  outline: none;\n  width: 100%;\n  cursor: grab;\n  scrollbar-width: none; /* Firefox */\n}\n\n.carousel::-webkit-scrollbar {\n  display: none; /* Chrome / Safari / Edge */\n}\n\n.carousel:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n  flex-direction: row;\n  overflow: scroll hidden;\n  scroll-snap-type: x mandatory;\n\n  /* pan-y: browser handles vertical page scroll; we handle horizontal drag */\n  touch-action: pan-y;\n}\n\n.vertical {\n  flex-direction: column;\n  overflow: hidden scroll;\n  scroll-snap-type: y mandatory;\n\n  /* pan-x: browser handles horizontal page scroll; we handle vertical drag */\n  touch-action: pan-x;\n}\n\n/* Active mouse drag state */\n.dragging {\n  cursor: grabbing;\n  user-select: none;\n\n  /* scroll-snap-type is disabled via inline style during drag */\n}\n\n/* ─── Slide ─────────────────────────────────────────────────────────────────── */\n\n.slide {\n  flex: 0 0 100%;\n  scroll-snap-align: start;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ─── Dot indicators ────────────────────────────────────────────────────────── */\n\n.indicatorDots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.2;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n  opacity: 0.5;\n}\n\n.dotActive {\n  opacity: 1;\n  transform: scale(1.15);\n}\n\n.dot:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Line indicators ───────────────────────────────────────────────────────── */\n\n.indicatorLines {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.2;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n  opacity: 0.5;\n}\n\n.lineActive {\n  opacity: 1;\n}\n\n.line:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .carousel {\n    scroll-behavior: auto;\n  }\n\n  .dot,\n  .line {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,15 @@
 var e = {
-	carousel: "_carousel_1tci2_3",
-	horizontal: "_horizontal_1tci2_20",
-	vertical: "_vertical_1tci2_27",
-	slide: "_slide_1tci2_36",
-	indicatorDots: "_indicatorDots_1tci2_46",
-	dot: "_dot_1tci2_54",
-	dotActive: "_dotActive_1tci2_73",
-	indicatorLines: "_indicatorLines_1tci2_85",
-	line: "_line_1tci2_93",
-	lineActive: "_lineActive_1tci2_110"
+	carousel: "_carousel_1yojd_3",
+	horizontal: "_horizontal_1yojd_25",
+	vertical: "_vertical_1yojd_34",
+	dragging: "_dragging_1yojd_44",
+	slide: "_slide_1yojd_53",
+	indicatorDots: "_indicatorDots_1yojd_62",
+	dot: "_dot_1yojd_70",
+	dotActive: "_dotActive_1yojd_89",
+	indicatorLines: "_indicatorLines_1yojd_101",
+	line: "_line_1yojd_109",
+	lineActive: "_lineActive_1yojd_126"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Carousel.module.css.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── */\n\n.carousel {\n  display: flex;\n  overflow: hidden;\n  scroll-snap-type: both mandatory;\n  -webkit-overflow-scrolling: touch;\n  outline: none;\n  width: 100%;\n}\n\n.carousel:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n  flex-direction: row;\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-snap-type: x mandatory;\n}\n\n.vertical {\n  flex-direction: column;\n  overflow-y: scroll;\n  overflow-x: hidden;\n  scroll-snap-type: y mandatory;\n}\n\n/* ─── Slide ─────────────────────────────────────────────────────────────────── */\n\n.slide {\n  flex: 0 0 100%;\n  scroll-snap-align: start;\n  scroll-snap-stop: always;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ─── Dot indicators ────────────────────────────────────────────────────────── */\n\n.indicatorDots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n  opacity: 0.5;\n}\n\n.dotActive {\n  opacity: 1;\n  transform: scale(1.15);\n}\n\n.dot:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Line indicators ───────────────────────────────────────────────────────── */\n\n.indicatorLines {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n  opacity: 0.5;\n}\n\n.lineActive {\n  opacity: 1;\n}\n\n.line:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .carousel {\n    scroll-behavior: auto;\n  }\n\n  .dot,\n  .line {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Carousel.module.css.js","names":[],"sources":["../../../src/components/Carousel/Carousel.module.css"],"sourcesContent":["/* ─── Carousel container ────────────────────────────────────────────────────── */\n\n.carousel {\n  display: flex;\n  overflow: hidden;\n  overscroll-behavior: contain;\n  outline: none;\n  width: 100%;\n  cursor: grab;\n  scrollbar-width: none; /* Firefox */\n}\n\n.carousel::-webkit-scrollbar {\n  display: none; /* Chrome / Safari / Edge */\n}\n\n.carousel:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  border-radius: var(--gnome-radius-md, 8px);\n}\n\n.horizontal {\n  flex-direction: row;\n  overflow: scroll hidden;\n  scroll-snap-type: x mandatory;\n\n  /* pan-y: browser handles vertical page scroll; we handle horizontal drag */\n  touch-action: pan-y;\n}\n\n.vertical {\n  flex-direction: column;\n  overflow: hidden scroll;\n  scroll-snap-type: y mandatory;\n\n  /* pan-x: browser handles horizontal page scroll; we handle vertical drag */\n  touch-action: pan-x;\n}\n\n/* Active mouse drag state */\n.dragging {\n  cursor: grabbing;\n  user-select: none;\n\n  /* scroll-snap-type is disabled via inline style during drag */\n}\n\n/* ─── Slide ─────────────────────────────────────────────────────────────────── */\n\n.slide {\n  flex: 0 0 100%;\n  scroll-snap-align: start;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* ─── Dot indicators ────────────────────────────────────────────────────────── */\n\n.indicatorDots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.dot {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.2;\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.dot:hover {\n  opacity: 0.5;\n}\n\n.dotActive {\n  opacity: 1;\n  transform: scale(1.15);\n}\n\n.dot:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Line indicators ───────────────────────────────────────────────────────── */\n\n.indicatorLines {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: var(--gnome-space-2, 12px) 0;\n}\n\n.line {\n  appearance: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 3px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.2;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.line:hover {\n  opacity: 0.5;\n}\n\n.lineActive {\n  opacity: 1;\n}\n\n.line:focus-visible {\n  outline: 2px solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .carousel {\n    scroll-behavior: auto;\n  }\n\n  .dot,\n  .line {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={row:`_row_1ckav_3`,disabled:`_disabled_1ckav_41`,checkboxWrap:`_checkboxWrap_1ckav_49`,checkbox:`_checkbox_1ckav_49`,checkboxChecked:`_checkboxChecked_1ckav_71`,checkmark:`_checkmark_1ckav_77`,leading:`_leading_1ckav_84`,content:`_content_1ckav_93`,title:`_title_1ckav_101`,subtitle:`_subtitle_1ckav_112`};exports.default=e;
+var e={row:`_row_rq5l1_3`,disabled:`_disabled_rq5l1_38`,checkboxWrap:`_checkboxWrap_rq5l1_46`,checkbox:`_checkbox_rq5l1_46`,checkboxChecked:`_checkboxChecked_rq5l1_68`,checkmark:`_checkmark_rq5l1_74`,leading:`_leading_rq5l1_81`,content:`_content_rq5l1_90`,title:`_title_rq5l1_98`,subtitle:`_subtitle_rq5l1_109`};exports.default=e;
 //# sourceMappingURL=CheckRow.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #ffffff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckRow.module.css.cjs","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgb(0 0 0 / 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #fff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 var e = {
-	row: "_row_1ckav_3",
-	disabled: "_disabled_1ckav_41",
-	checkboxWrap: "_checkboxWrap_1ckav_49",
-	checkbox: "_checkbox_1ckav_49",
-	checkboxChecked: "_checkboxChecked_1ckav_71",
-	checkmark: "_checkmark_1ckav_77",
-	leading: "_leading_1ckav_84",
-	content: "_content_1ckav_93",
-	title: "_title_1ckav_101",
-	subtitle: "_subtitle_1ckav_112"
+	row: "_row_rq5l1_3",
+	disabled: "_disabled_rq5l1_38",
+	checkboxWrap: "_checkboxWrap_rq5l1_46",
+	checkbox: "_checkbox_rq5l1_46",
+	checkboxChecked: "_checkboxChecked_rq5l1_68",
+	checkmark: "_checkmark_rq5l1_74",
+	leading: "_leading_rq5l1_81",
+	content: "_content_rq5l1_90",
+	title: "_title_rq5l1_98",
+	subtitle: "_subtitle_rq5l1_109"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #ffffff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgb(0 0 0 / 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #fff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={checkbox:`_checkbox_15vcc_3`};exports.default=e;
+var e={checkbox:`_checkbox_u344z_3`};exports.default=e;
 //# sourceMappingURL=Checkbox.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.css.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Checkmark (checked) ──────────────────────────────────────────────────── */\n\n.checkbox::before {\n  content: \"\";\n  display: block;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n  opacity: 1;\n  /* SVG checkmark rendered via clip-path */\n  width: 10px;\n  height: 7px;\n  background-color: #ffffff;\n  clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/* ─── Indeterminate (mixed) ────────────────────────────────────────────────── */\n\n.checkbox:indeterminate {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n  opacity: 1;\n  width: 10px;\n  height: 2px;\n  background-color: #ffffff;\n  clip-path: none;\n  border-radius: 1px;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.checkbox:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.checkbox:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .checkbox {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .checkbox:not(:checked):not(:indeterminate):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .checkbox {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .checkbox:not(:checked):not(:indeterminate):hover {\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox,\n  .checkbox::before {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Checkbox.module.css.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.checkbox {\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Checkmark (checked) ──────────────────────────────────────────────────── */\n\n.checkbox::before {\n  content: \"\";\n  display: block;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n  opacity: 1;\n\n  /* SVG checkmark rendered via clip-path */\n  width: 10px;\n  height: 7px;\n  background-color: #fff;\n  clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/* ─── Indeterminate (mixed) ────────────────────────────────────────────────── */\n\n.checkbox:indeterminate {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n  opacity: 1;\n  width: 10px;\n  height: 2px;\n  background-color: #fff;\n  clip-path: none;\n  border-radius: 1px;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.checkbox:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.checkbox:not(:checked, :indeterminate):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.checkbox:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .checkbox {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .checkbox:not(:checked, :indeterminate):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .checkbox {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .checkbox:not(:checked, :indeterminate):hover {\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox,\n  .checkbox::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-var e = { checkbox: "_checkbox_15vcc_3" };
+var e = { checkbox: "_checkbox_u344z_3" };
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.module.css.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.checkbox {\n  appearance: none;\n  -webkit-appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Checkmark (checked) ──────────────────────────────────────────────────── */\n\n.checkbox::before {\n  content: \"\";\n  display: block;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n  opacity: 1;\n  /* SVG checkmark rendered via clip-path */\n  width: 10px;\n  height: 7px;\n  background-color: #ffffff;\n  clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/* ─── Indeterminate (mixed) ────────────────────────────────────────────────── */\n\n.checkbox:indeterminate {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n  opacity: 1;\n  width: 10px;\n  height: 2px;\n  background-color: #ffffff;\n  clip-path: none;\n  border-radius: 1px;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.checkbox:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.checkbox:not(:checked):not(:indeterminate):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 94%, black 6%);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.checkbox:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .checkbox {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .checkbox:not(:checked):not(:indeterminate):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .checkbox {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .checkbox:not(:checked):not(:indeterminate):hover {\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox,\n  .checkbox::before {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Checkbox.module.css.js","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.checkbox {\n  appearance: none;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  cursor: pointer;\n  width: 18px;\n  height: 18px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1.5px solid var(--gnome-light-4, #c0bfbc);\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Checkmark (checked) ──────────────────────────────────────────────────── */\n\n.checkbox::before {\n  content: \"\";\n  display: block;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkbox:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:checked::before {\n  opacity: 1;\n\n  /* SVG checkmark rendered via clip-path */\n  width: 10px;\n  height: 7px;\n  background-color: #fff;\n  clip-path: polygon(14% 44%, 0 58%, 36% 100%, 100% 12%, 84% 0%, 36% 68%);\n}\n\n/* ─── Indeterminate (mixed) ────────────────────────────────────────────────── */\n\n.checkbox:indeterminate {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.checkbox:indeterminate::before {\n  opacity: 1;\n  width: 10px;\n  height: 2px;\n  background-color: #fff;\n  clip-path: none;\n  border-radius: 1px;\n}\n\n/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.checkbox:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.checkbox:not(:checked, :indeterminate):hover {\n  border-color: var(--gnome-light-5, #9a9996);\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 94%, black 6%);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.checkbox:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .checkbox {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .checkbox:not(:checked, :indeterminate):hover {\n    border-color: var(--gnome-light-4, #c0bfbc);\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white 15%);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .checkbox {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .checkbox:not(:checked, :indeterminate):hover {\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n    background-color: var(--gnome-hover-overlay);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox,\n  .checkbox::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={chip:`_chip_7pedl_3`,selectable:`_selectable_7pedl_31`,selected:`_selected_7pedl_55`,disabled:`_disabled_7pedl_68`,icon:`_icon_7pedl_76`,label:`_label_7pedl_85`,remove:`_remove_7pedl_91`};exports.default=e;
+var e={chip:`_chip_3068g_3`,selectable:`_selectable_3068g_27`,selected:`_selected_3068g_51`,disabled:`_disabled_3068g_64`,icon:`_icon_3068g_72`,label:`_label_3068g_81`,remove:`_remove_3068g_87`};exports.default=e;
 //# sourceMappingURL=Chip.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.css.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.css.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	chip: "_chip_7pedl_3",
-	selectable: "_selectable_7pedl_31",
-	selected: "_selected_7pedl_55",
-	disabled: "_disabled_7pedl_68",
-	icon: "_icon_7pedl_76",
-	label: "_label_7pedl_85",
-	remove: "_remove_7pedl_91"
+	chip: "_chip_3068g_3",
+	selectable: "_selectable_3068g_27",
+	selected: "_selected_3068g_51",
+	disabled: "_disabled_3068g_64",
+	icon: "_icon_3068g_72",
+	label: "_label_3068g_81",
+	remove: "_remove_3068g_87"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.css.js","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.css.js","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -1,2 +1,2 @@
-const e=require("./ColorPicker.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u})=>(0,n.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":l??t,disabled:o,className:[e.default.swatch,e.default[`swatch-${i}`],r?e.default.swatchSelected:null,s].filter(Boolean).join(` `),style:{"--swatch-color":t,...c},onClick:()=>a?.(t),...u,children:r&&(0,n.jsx)(`svg`,{className:e.default.checkmark,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 8l3.5 3.5L13 5`,stroke:`white`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),i=[{value:`#3584e4`,label:`Blue`},{value:`#2ec27e`,label:`Green`},{value:`#f6d32d`,label:`Yellow`},{value:`#ff7800`,label:`Orange`},{value:`#e01b24`,label:`Red`},{value:`#9141ac`,label:`Purple`},{value:`#986a44`,label:`Brown`},{value:`#2190a4`,label:`Teal`},{value:`#5e5c64`,label:`Slate`}],a=({value:a,onChange:o,colors:s=i,allowCustom:c=!1,size:l=`md`,className:u,style:d,"aria-label":f,...p})=>{let m=(0,t.useRef)(null),h=s.findIndex(e=>e.value===a),g=h>=0?h:0;function _(e){let t=Array.from(e.currentTarget.querySelectorAll(`[role="radio"]:not([disabled])`)),n=document.activeElement,r=t.indexOf(n);if(r===-1)return;let i=-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`?(e.preventDefault(),i=(r+1)%t.length):(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),i=(r-1+t.length)%t.length),i>=0){t[i].focus();let e=t[i].dataset.color;e&&o?.(e)}}let v=a!==void 0&&!s.some(e=>e.value===a);return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":f??`Color`,className:[e.default.picker,u].filter(Boolean).join(` `),style:d,onKeyDown:_,...p,children:[s.map((e,t)=>(0,n.jsx)(r,{color:e.value,size:l,selected:e.value===a,onSelect:o,"aria-label":e.label??e.value,tabIndex:t===g&&!v?0:-1,"data-color":e.value},e.value)),c&&(0,n.jsxs)(n.Fragment,{children:[v&&a&&(0,n.jsx)(r,{color:a,size:l,selected:!0,onSelect:()=>m.current?.click(),"aria-label":`Custom color`,tabIndex:0,"data-color":a}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Choose custom color`,className:[e.default.swatch,e.default[`swatch-${l}`],e.default.customButton].filter(Boolean).join(` `),tabIndex:-1,onClick:()=>m.current?.click(),children:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,className:e.default.plusIcon,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3v10M3 8h10`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),(0,n.jsx)(`input`,{ref:m,type:`color`,value:v&&a?a:`#000000`,className:e.default.nativeInput,"aria-hidden":`true`,tabIndex:-1,onChange:e=>o?.(e.target.value)})]})]})};exports.ColorPicker=a,exports.ColorSwatch=r,exports.GNOME_PALETTE=i;
+const e=require("./ColorPicker.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u})=>(0,n.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":l??t,disabled:o,className:[e.default.swatch,e.default[`swatch-${i}`],r?e.default.swatchSelected:null,s].filter(Boolean).join(` `),style:{"--swatch-color":t,...c},onClick:()=>a?.(t),...u,children:r&&(0,n.jsx)(`svg`,{className:e.default.checkmark,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 8l3.5 3.5L13 5`,stroke:`white`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),i=[{value:`#3584e4`,label:`Blue`},{value:`#2ec27e`,label:`Green`},{value:`#f6d32d`,label:`Yellow`},{value:`#ff7800`,label:`Orange`},{value:`#e01b24`,label:`Red`},{value:`#9141ac`,label:`Purple`},{value:`#986a44`,label:`Brown`},{value:`#2190a4`,label:`Teal`},{value:`#5e5c64`,label:`Slate`}],a=({value:a,onChange:o,colors:s=i,allowCustom:c=!1,size:l=`md`,className:u,style:d,"aria-label":f,...p})=>{let m=(0,t.useRef)(null),h=s.findIndex(e=>e.value===a),g=h>=0?h:0;function _(e){let t=Array.from(e.currentTarget.querySelectorAll(`[role="radio"]:not([disabled])`)),n=document.activeElement,r=t.indexOf(n);if(r===-1)return;let i=-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`?(e.preventDefault(),i=(r+1)%t.length):(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),i=(r-1+t.length)%t.length),i>=0){t[i].focus();let{color:e}=t[i].dataset;e&&o?.(e)}}let v=a!==void 0&&!s.some(e=>e.value===a);return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":f??`Color`,className:[e.default.picker,u].filter(Boolean).join(` `),style:d,onKeyDown:_,...p,children:[s.map((e,t)=>(0,n.jsx)(r,{color:e.value,size:l,selected:e.value===a,onSelect:o,"aria-label":e.label??e.value,tabIndex:t===g&&!v?0:-1,"data-color":e.value},e.value)),c&&(0,n.jsxs)(n.Fragment,{children:[v&&a&&(0,n.jsx)(r,{color:a,size:l,selected:!0,onSelect:()=>m.current?.click(),"aria-label":`Custom color`,tabIndex:0,"data-color":a}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Choose custom color`,className:[e.default.swatch,e.default[`swatch-${l}`],e.default.customButton].filter(Boolean).join(` `),tabIndex:-1,onClick:()=>m.current?.click(),children:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,className:e.default.plusIcon,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3v10M3 8h10`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),(0,n.jsx)(`input`,{ref:m,type:`color`,value:v&&a?a:`#000000`,className:e.default.nativeInput,"aria-hidden":`true`,tabIndex:-1,onChange:e=>o?.(e.target.value)})]})]})};exports.ColorPicker=a,exports.ColorSwatch=r,exports.GNOME_PALETTE=i;
 //# sourceMappingURL=ColorPicker.cjs.map