@gnome-ui/react 1.49.0 → 1.50.0

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 CSSProperties,\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\ntype IndicatorPosition = 'top' | 'bottom' | 'left' | 'right';\n\nconst INDICATOR_FLEX_DIR: Record<IndicatorPosition, CSSProperties['flexDirection']> = {\n  bottom: 'column',\n  top: 'column-reverse',\n  left: 'row-reverse',\n  right: 'row',\n};\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 (integer ≥ 1). Navigation advances one\n   * full group at a time, and the indicator shows one dot/line per group.\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   * Automatically advance to the next slide. Pauses while the pointer\n   * hovers over the carousel or during drag.\n   * @default false\n   */\n  autoPlay?: boolean;\n  /**\n   * Milliseconds between automatic slide transitions.\n   * Only used when `autoPlay` is `true`.\n   * @default 3000\n   */\n  interval?: number;\n  /**\n   * Page indicator rendered alongside the carousel.\n   * - `'dots'`: small circular dots (`CarouselIndicatorDots`)\n   * - `'lines'`: short line segments (`CarouselIndicatorLines`)\n   * - `'none'` or omitted: no indicator\n   */\n  indicator?: 'dots' | 'lines' | 'none';\n  /**\n   * Position of the indicator relative to the carousel.\n   * @default 'bottom'\n   */\n  indicatorPosition?: IndicatorPosition;\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  autoPlay = false,\n  interval = 3000,\n  indicator,\n  indicatorPosition = 'bottom',\n  className,\n  style,\n  ...props\n}: CarouselProps) => {\n  const scrollRef = useRef<HTMLDivElement>(null);\n  const vSlides = Math.max(1, Math.floor(visibleSlides)); // enforce integer\n  const slideCount = Children.count(children);\n  const pageCount = Math.ceil(slideCount / vSlides);\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  // Suppresses handleScroll feedback during programmatic scrolls (e.g. dot clicks)\n  const isProgrammaticScrollRef = useRef(false);\n  const programmaticScrollTimerRef = useRef(0);\n  // Auto-play: always-fresh snapshot of currentPage to avoid stale closure in setInterval\n  const currentPageRef = useRef(currentPage);\n  const isHoveringRef = useRef(false);\n  useEffect(() => {\n    currentPageRef.current = currentPage;\n  });\n\n  // Scroll distance per page = one full group = containerSize + spacing.\n  // Each slide is (containerSize - spacing*(vSlides-1)) / vSlides wide, so\n  // vSlides slides + (vSlides-1) gaps = containerSize, plus the inter-group\n  // gap gives containerSize + spacing.\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    const size = containerSize + spacing;\n    return size > 0 ? size : 1;\n  }, [orientation, spacing]);\n\n  const scrollToPage = useCallback(\n    (index: number, behavior: ScrollBehavior = 'smooth') => {\n      const el = scrollRef.current;\n      if (!el) {\n        return;\n      }\n      // Suppress handleScroll feedback while the animation runs\n      isProgrammaticScrollRef.current = true;\n      window.clearTimeout(programmaticScrollTimerRef.current);\n      programmaticScrollTimerRef.current = window.setTimeout(\n        () => {\n          isProgrammaticScrollRef.current = false;\n        },\n        behavior === 'smooth' ? 400 : 50,\n      );\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 || isProgrammaticScrollRef.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      const maxScroll =\n        orientation === 'horizontal'\n          ? el.scrollWidth - el.clientWidth\n          : el.scrollHeight - el.clientHeight;\n\n      let target: number;\n      if (Math.abs(velocity) > 0.3) {\n        const rawTarget =\n          velocity > 0 ? Math.ceil(scroll / pageSize) : Math.floor(scroll / pageSize);\n        // In loop mode the browser clamps scroll to [0, maxScroll], so a backward\n        // flick from page 0 and a forward flick from the last page both produce a\n        // rawTarget stuck at the boundary. Detect and wrap explicitly.\n        if (loop && velocity < 0 && rawTarget === 0 && scroll <= 0) {\n          target = pageCount - 1;\n        } else if (loop && velocity > 0 && rawTarget === pageCount - 1 && scroll >= maxScroll) {\n          target = 0;\n        } else {\n          target = rawTarget;\n        }\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  // Auto-play: advance one slide every `interval` ms, pausing on hover/drag\n  useEffect(() => {\n    if (!autoPlay || interval <= 0) {\n      return;\n    }\n\n    const timer = window.setInterval(() => {\n      if (draggingRef.current || isHoveringRef.current) {\n        return;\n      }\n      const page = currentPageRef.current;\n      if (!loop && page >= pageCount - 1) {\n        return;\n      }\n      const next = loop ? (page + 1) % pageCount : page + 1;\n      // Update ref immediately so back-to-back ticks see the correct page\n      currentPageRef.current = next;\n      scrollToPage(next);\n      if (!isControlled) {\n        setInternalPage(next);\n      }\n      onPageChanged?.(next);\n    }, interval);\n\n    return () => window.clearInterval(timer);\n  }, [autoPlay, interval, loop, pageCount, scrollToPage, isControlled, onPageChanged]);\n\n  // Clean up timers on unmount\n  useEffect(() => {\n    return () => {\n      window.clearTimeout(snapRestoreTimerRef.current);\n      window.clearTimeout(programmaticScrollTimerRef.current);\n    };\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  const showIndicator = indicator === 'dots' || indicator === 'lines';\n  const isSide = indicatorPosition === 'left' || indicatorPosition === 'right';\n\n  // Slide width when showing more than one at a time\n  const slideFlexBasis =\n    vSlides !== 1 ? `calc((100% - ${spacing * (vSlides - 1)}px) / ${vSlides})` : undefined;\n\n  const scrollContainer = (\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        showIndicator ? null : className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{\n        ...(isHorizontal ? { columnGap: spacing || undefined } : { rowGap: spacing || undefined }),\n        ...(showIndicator && (isSide ? { flex: '1 1 0', width: 'auto' } : { flex: '1 1 auto' })),\n      }}\n      onMouseEnter={() => {\n        isHoveringRef.current = true;\n      }}\n      onMouseLeave={() => {\n        isHoveringRef.current = false;\n      }}\n      onKeyDown={handleKeyDown}\n      onClick={handleClick}\n      {...(showIndicator ? {} : 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 ${slideCount}`}\n          style={{\n            ...(slideFlexBasis ? { flex: `0 0 ${slideFlexBasis}` } : undefined),\n            // Only the first slide of each group is a snap target; intermediate\n            // slides would cause the carousel to stop mid-group.\n            ...(vSlides > 1 && i % vSlides !== 0 ? { scrollSnapAlign: 'none' } : undefined),\n          }}\n          onPointerDown={handlePointerDown}\n          onPointerMove={handlePointerMove}\n          onPointerUp={handlePointerUp}\n          onPointerCancel={handlePointerUp}\n        >\n          {child}\n        </div>\n      ))}\n    </div>\n  );\n\n  if (!showIndicator) {\n    return scrollContainer;\n  }\n\n  const onPageSelected = (i: number) => {\n    scrollToPage(i);\n    if (!isControlled) {\n      setInternalPage(i);\n    }\n    onPageChanged?.(i);\n  };\n\n  const indicatorStyle: CSSProperties | undefined = isSide\n    ? { flexDirection: 'column', padding: '0 12px' }\n    : undefined;\n\n  return (\n    <div\n      className={className}\n      style={{\n        ...style,\n        display: 'flex',\n        flexDirection: INDICATOR_FLEX_DIR[indicatorPosition],\n      }}\n      {...props}\n    >\n      {scrollContainer}\n      {indicator === 'dots' && (\n        <CarouselIndicatorDots\n          pages={pageCount}\n          currentPage={currentPage}\n          onPageSelected={onPageSelected}\n          style={indicatorStyle}\n        />\n      )}\n      {indicator === 'lines' && (\n        <CarouselIndicatorLines\n          pages={pageCount}\n          currentPage={currentPage}\n          onPageSelected={onPageSelected}\n          style={indicatorStyle}\n        />\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_78m8m_3`,horizontal:`_horizontal_78m8m_25`,vertical:`_vertical_78m8m_34`,dragging:`_dragging_78m8m_44`,slide:`_slide_78m8m_53`,indicatorDots:`_indicatorDots_78m8m_63`,dot:`_dot_78m8m_71`,dotActive:`_dotActive_78m8m_90`,indicatorLines:`_indicatorLines_78m8m_102`,line:`_line_78m8m_110`,lineActive:`_lineActive_78m8m_127`};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  overflow: hidden;\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_78m8m_3",
+	horizontal: "_horizontal_78m8m_25",
+	vertical: "_vertical_78m8m_34",
+	dragging: "_dragging_78m8m_44",
+	slide: "_slide_78m8m_53",
+	indicatorDots: "_indicatorDots_78m8m_63",
+	dot: "_dot_78m8m_71",
+	dotActive: "_dotActive_78m8m_90",
+	indicatorLines: "_indicatorLines_78m8m_102",
+	line: "_line_78m8m_110",
+	lineActive: "_lineActive_78m8m_127"
 };
 //#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  overflow: hidden;\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

package/dist/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type KeyboardEvent, useRef } from 'react';\n\nimport styles from './ColorPicker.module.css';\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = 'sm' | 'md' | 'lg';\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  'aria-label'?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport const ColorSwatch = ({\n  color,\n  selected = false,\n  size = 'md',\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorSwatchProps) => {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--swatch-color': color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg className={styles.checkmark} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: '#3584e4', label: 'Blue' },\n  { value: '#2ec27e', label: 'Green' },\n  { value: '#f6d32d', label: 'Yellow' },\n  { value: '#ff7800', label: 'Orange' },\n  { value: '#e01b24', label: 'Red' },\n  { value: '#9141ac', label: 'Purple' },\n  { value: '#986a44', label: 'Brown' },\n  { value: '#2190a4', label: 'Teal' },\n  { value: '#5e5c64', label: 'Slate' },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport const ColorPicker = ({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = 'md',\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorPickerProps) => {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])'),\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = -1;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n\n    if (next >= 0) {\n      all[next].focus();\n      const color = all[next].dataset.color;\n\n      if (color) {\n        onChange?.(color);\n      }\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom = value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? 'Color'}\n      className={[styles.picker, className].filter(Boolean).join(' ')}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(' ')}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : '#000000'}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type KeyboardEvent, useRef } from 'react';\n\nimport styles from './ColorPicker.module.css';\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = 'sm' | 'md' | 'lg';\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  'aria-label'?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport const ColorSwatch = ({\n  color,\n  selected = false,\n  size = 'md',\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorSwatchProps) => {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--swatch-color': color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg className={styles.checkmark} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: '#3584e4', label: 'Blue' },\n  { value: '#2ec27e', label: 'Green' },\n  { value: '#f6d32d', label: 'Yellow' },\n  { value: '#ff7800', label: 'Orange' },\n  { value: '#e01b24', label: 'Red' },\n  { value: '#9141ac', label: 'Purple' },\n  { value: '#986a44', label: 'Brown' },\n  { value: '#2190a4', label: 'Teal' },\n  { value: '#5e5c64', label: 'Slate' },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport const ColorPicker = ({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = 'md',\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorPickerProps) => {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])'),\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = -1;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n\n    if (next >= 0) {\n      all[next].focus();\n      const { color } = all[next].dataset;\n\n      if (color) {\n        onChange?.(color);\n      }\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom = value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? 'Color'}\n      className={[styles.picker, className].filter(Boolean).join(' ')}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(' ')}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : '#000000'}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/ColorPicker/ColorPicker.js

@@ -78,7 +78,7 @@ var a = ({ color: t, selected: n = !1, size: i = "md", onSelect: a, disabled: o
 		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;
+			let { color: e } = t[i].dataset;
 			e && c?.(e);
 		}
 	}

package/dist/components/ColorPicker/ColorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type KeyboardEvent, useRef } from 'react';\n\nimport styles from './ColorPicker.module.css';\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = 'sm' | 'md' | 'lg';\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  'aria-label'?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport const ColorSwatch = ({\n  color,\n  selected = false,\n  size = 'md',\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorSwatchProps) => {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--swatch-color': color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg className={styles.checkmark} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: '#3584e4', label: 'Blue' },\n  { value: '#2ec27e', label: 'Green' },\n  { value: '#f6d32d', label: 'Yellow' },\n  { value: '#ff7800', label: 'Orange' },\n  { value: '#e01b24', label: 'Red' },\n  { value: '#9141ac', label: 'Purple' },\n  { value: '#986a44', label: 'Brown' },\n  { value: '#2190a4', label: 'Teal' },\n  { value: '#5e5c64', label: 'Slate' },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport const ColorPicker = ({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = 'md',\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorPickerProps) => {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])'),\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = -1;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n\n    if (next >= 0) {\n      all[next].focus();\n      const color = all[next].dataset.color;\n\n      if (color) {\n        onChange?.(color);\n      }\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom = value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? 'Color'}\n      className={[styles.picker, className].filter(Boolean).join(' ')}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(' ')}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : '#000000'}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { type CSSProperties, type HTMLAttributes, type KeyboardEvent, useRef } from 'react';\n\nimport styles from './ColorPicker.module.css';\n\n// ─── ColorSwatch ─────────────────────────────────────────────────────────────\n\nexport type ColorSwatchSize = 'sm' | 'md' | 'lg';\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {\n  /** CSS color value displayed as the swatch background. */\n  color: string;\n  /** Whether this swatch is the currently selected color. */\n  selected?: boolean;\n  /** Swatch diameter. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n  /** Called when the user clicks or activates the swatch. */\n  onSelect?: (color: string) => void;\n  /** Accessible label. Defaults to the color value. */\n  'aria-label'?: string;\n  disabled?: boolean;\n}\n\n/**\n * Single circular color swatch button.\n *\n * Can be used standalone or composed inside `ColorPicker`.\n * Shows a white checkmark when `selected`.\n */\nexport const ColorSwatch = ({\n  color,\n  selected = false,\n  size = 'md',\n  onSelect,\n  disabled = false,\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorSwatchProps) => {\n  return (\n    <button\n      type=\"button\"\n      role=\"radio\"\n      aria-checked={selected}\n      aria-label={ariaLabel ?? color}\n      disabled={disabled}\n      className={[\n        styles.swatch,\n        styles[`swatch-${size}`],\n        selected ? styles.swatchSelected : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={{ '--swatch-color': color, ...style } as CSSProperties}\n      onClick={() => onSelect?.(color)}\n      {...props}\n    >\n      {selected && (\n        <svg className={styles.checkmark} viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n          <path\n            d=\"M3 8l3.5 3.5L13 5\"\n            stroke=\"white\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n};\n\n// ─── ColorPicker ─────────────────────────────────────────────────────────────\n\nexport interface ColorPickerColor {\n  /** CSS color value (hex recommended). */\n  value: string;\n  /** Human-readable name shown as aria-label and tooltip. */\n  label?: string;\n}\n\n/** Default Adwaita-named palette (matches Avatar color set). */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const GNOME_PALETTE: ColorPickerColor[] = [\n  { value: '#3584e4', label: 'Blue' },\n  { value: '#2ec27e', label: 'Green' },\n  { value: '#f6d32d', label: 'Yellow' },\n  { value: '#ff7800', label: 'Orange' },\n  { value: '#e01b24', label: 'Red' },\n  { value: '#9141ac', label: 'Purple' },\n  { value: '#986a44', label: 'Brown' },\n  { value: '#2190a4', label: 'Teal' },\n  { value: '#5e5c64', label: 'Slate' },\n];\n\nexport interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Currently selected color value. */\n  value?: string;\n  /** Called when the user selects a color. */\n  onChange?: (value: string) => void;\n  /**\n   * Palette of colors to display.\n   * Defaults to `GNOME_PALETTE` (the 9 Adwaita named colors).\n   */\n  colors?: ColorPickerColor[];\n  /**\n   * Show a \"Custom…\" button at the end that opens a native color picker.\n   * When a custom color is chosen it is passed to `onChange` and shown\n   * as a selected swatch until another palette color is picked.\n   * Defaults to `false`.\n   */\n  allowCustom?: boolean;\n  /** Swatch size. Defaults to `\"md\"`. */\n  size?: ColorSwatchSize;\n}\n\n/**\n * Color palette picker following the Adwaita `GtkColorButton` + swatch pattern.\n *\n * Renders a row of circular `ColorSwatch` items. Keyboard navigation uses\n * arrow keys (roving tabindex). Optionally adds a \"Custom…\" button backed\n * by a hidden `<input type=\"color\">`.\n *\n * ```tsx\n * <ColorPicker value={color} onChange={setColor} />\n * <ColorPicker value={color} onChange={setColor} allowCustom />\n * <ColorPicker\n *   value={color}\n *   onChange={setColor}\n *   colors={[{ value: \"#ff0000\", label: \"Red\" }, …]}\n * />\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html\n */\nexport const ColorPicker = ({\n  value,\n  onChange,\n  colors = GNOME_PALETTE,\n  allowCustom = false,\n  size = 'md',\n  className,\n  style,\n  'aria-label': ariaLabel,\n  ...props\n}: ColorPickerProps) => {\n  const customInputRef = useRef<HTMLInputElement>(null);\n\n  // Roving tabindex: only the selected (or first) swatch is in the tab order.\n  const activeIndex = colors.findIndex((c) => c.value === value);\n  const rovingIndex = activeIndex >= 0 ? activeIndex : 0;\n\n  // Arrow-key navigation within the radiogroup.\n  function handleKeyDown(e: KeyboardEvent<HTMLDivElement>) {\n    const all = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not([disabled])'),\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n\n    if (idx === -1) {\n      return;\n    }\n\n    let next = -1;\n    if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n      e.preventDefault();\n      next = (idx + 1) % all.length;\n    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n      e.preventDefault();\n      next = (idx - 1 + all.length) % all.length;\n    }\n\n    if (next >= 0) {\n      all[next].focus();\n      const { color } = all[next].dataset;\n\n      if (color) {\n        onChange?.(color);\n      }\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom = value !== undefined && !colors.some((c) => c.value === value);\n\n  return (\n    <div\n      role=\"radiogroup\"\n      aria-label={ariaLabel ?? 'Color'}\n      className={[styles.picker, className].filter(Boolean).join(' ')}\n      style={style}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {colors.map((color, i) => (\n        <ColorSwatch\n          key={color.value}\n          color={color.value}\n          size={size}\n          selected={color.value === value}\n          onSelect={onChange}\n          aria-label={color.label ?? color.value}\n          tabIndex={i === rovingIndex && !isCustom ? 0 : -1}\n          data-color={color.value}\n        />\n      ))}\n\n      {allowCustom && (\n        <>\n          {/* Custom swatch — shows the picked color when active */}\n          {isCustom && value && (\n            <ColorSwatch\n              color={value}\n              size={size}\n              selected\n              onSelect={() => customInputRef.current?.click()}\n              aria-label=\"Custom color\"\n              tabIndex={0}\n              data-color={value}\n            />\n          )}\n\n          {/* + button that opens the native color input */}\n          <button\n            type=\"button\"\n            aria-label=\"Choose custom color\"\n            className={[styles.swatch, styles[`swatch-${size}`], styles.customButton]\n              .filter(Boolean)\n              .join(' ')}\n            tabIndex={isCustom ? -1 : -1}\n            onClick={() => customInputRef.current?.click()}\n          >\n            <svg viewBox=\"0 0 16 16\" className={styles.plusIcon} aria-hidden=\"true\">\n              <path\n                d=\"M8 3v10M3 8h10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </svg>\n          </button>\n\n          <input\n            ref={customInputRef}\n            type=\"color\"\n            value={isCustom && value ? value : '#000000'}\n            className={styles.nativeInput}\n            aria-hidden=\"true\"\n            tabIndex={-1}\n            onChange={(e) => onChange?.(e.target.value)}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={picker:`_picker_50hw4_3`,swatch:`_swatch_50hw4_12`,"swatch-sm":`_swatch-sm_50hw4_37`,"swatch-md":`_swatch-md_50hw4_41`,"swatch-lg":`_swatch-lg_50hw4_45`,swatchSelected:`_swatchSelected_50hw4_69`,checkmark:`_checkmark_50hw4_95`,customButton:`_customButton_50hw4_105`,plusIcon:`_plusIcon_50hw4_117`,nativeInput:`_nativeInput_50hw4_124`};exports.default=e;
+var e={picker:`_picker_6ltgd_3`,swatch:`_swatch_6ltgd_12`,"swatch-sm":`_swatch-sm_6ltgd_34`,"swatch-md":`_swatch-md_6ltgd_39`,"swatch-lg":`_swatch-lg_6ltgd_44`,swatchSelected:`_swatchSelected_6ltgd_68`,checkmark:`_checkmark_6ltgd_94`,customButton:`_customButton_6ltgd_105`,plusIcon:`_plusIcon_6ltgd_117`,nativeInput:`_nativeInput_6ltgd_124`};exports.default=e;
 //# sourceMappingURL=ColorPicker.module.css.cjs.map