@gnome-ui/react 1.49.0 → 1.50.0

package/dist/components/PreferencesDialog/PreferencesDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesDialog.js","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport type { PreferencesPageProps } from '../PreferencesPage/PreferencesPage';\n\nimport styles from './PreferencesDialog.module.css';\n\n// ─── Focus trap ───────────────────────────────────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface PreferencesDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is open. */\n  open: boolean;\n  /** Called when the user requests to close the dialog. */\n  onClose: () => void;\n  /**\n   * `PreferencesPage` children. Each page appears as a sidebar entry.\n   * When only one page is provided the sidebar is hidden.\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show a search bar in the header.\n   * When `true` the user can filter group/row content by typing.\n   * Defaults to `true`.\n   */\n  searchable?: boolean;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Multi-page settings dialog using `PreferencesPage` tabs.\n *\n * Renders a wide modal with an optional sidebar listing pages. Each\n * `PreferencesPage` child becomes a navigation entry. Supports built-in\n * search when `searchable` is `true` (the default).\n *\n * Mirrors `AdwPreferencesDialog`.\n *\n * @example\n * ```tsx\n * <PreferencesDialog open={open} onClose={() => setOpen(false)}>\n *   <PreferencesPage title=\"General\" iconName=\"preferences-system-symbolic\">\n *     <PreferencesGroup title=\"Appearance\">\n *       <BoxedList>\n *         <SwitchRow title=\"Dark mode\" />\n *       </BoxedList>\n *     </PreferencesGroup>\n *   </PreferencesPage>\n * </PreferencesDialog>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesDialog.html\n */\nexport const PreferencesDialog = ({\n  open,\n  onClose,\n  children,\n  searchable = true,\n  className,\n  ...props\n}: PreferencesDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const titleId = useId();\n\n  const pages = Children.toArray(children).filter((c): c is ReactElement<PreferencesPageProps> =>\n    isValidElement(c),\n  ) as ReactElement<PreferencesPageProps>[];\n\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (open) {\n      setActiveIndex(0);\n      setSearchQuery('');\n      // Focus search or first focusable after open animation\n      const id = requestAnimationFrame(() => {\n        if (searchable && searchRef.current) {\n          searchRef.current.focus();\n        } else {\n          const first = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n          first?.focus();\n        }\n      });\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open, searchable]);\n\n  // Close on Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        onClose();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  const multiPage = pages.length > 1;\n  const activePage = pages[activeIndex] ?? pages[0];\n\n  // Filter content by search query\n  const query = searchQuery.trim().toLowerCase();\n\n  if (!open) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={styles.backdrop}\n      onClick={(e) => {\n        if (e.target === e.currentTarget) {\n          onClose();\n        }\n      }}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, multiPage ? styles.dialogMulti : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {/* ── Header ─────────────────────────────────────────────────────── */}\n        <div className={styles.header}>\n          <button\n            type=\"button\"\n            className={styles.closeBtn}\n            onClick={onClose}\n            aria-label=\"Close preferences\"\n          >\n            ✕\n          </button>\n          <span id={titleId} className={styles.title}>\n            Preferences\n          </span>\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <input\n                ref={searchRef}\n                type=\"search\"\n                placeholder=\"Search…\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={styles.searchInput}\n                aria-label=\"Search preferences\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* ── Body ───────────────────────────────────────────────────────── */}\n        <div className={styles.body}>\n          {/* Sidebar — only shown when there are multiple pages */}\n          {multiPage && (\n            <nav className={styles.sidebar} aria-label=\"Preferences pages\">\n              <ul className={styles.navList}>\n                {pages.map((page, i) => (\n                  <li key={i} role=\"presentation\">\n                    <button\n                      role=\"tab\"\n                      type=\"button\"\n                      aria-selected={i === activeIndex}\n                      className={[styles.navItem, i === activeIndex ? styles.navItemActive : null]\n                        .filter(Boolean)\n                        .join(' ')}\n                      onClick={() => setActiveIndex(i)}\n                    >\n                      {page.props.iconName && (\n                        <span\n                          className={[styles.navIcon, 'icon', page.props.iconName].join(' ')}\n                          aria-hidden=\"true\"\n                        />\n                      )}\n                      <span className={styles.navLabel}>{page.props.title}</span>\n                    </button>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n          )}\n\n          {/* Page content */}\n          <div className={styles.pageWrap}>\n            {activePage &&\n              cloneElement(activePage, {\n                'data-search-query': query || undefined,\n              } as Partial<PreferencesPageProps>)}\n          </div>\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n"],"mappings":";;;;;AAwBA,IAAM,IACJ;AAEF,SAAS,EAAU,GAAkC,GAAuC;CAC1F,IAAI,EAAE,QAAQ,OACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAA8B,CAAS,KAAK,CAAC,CAAC;CAExF,IAAI,CAAC,EAAU,QACb;CAGF,IAAM,IAAQ,EAAU,IAClB,IAAO,EAAU,EAAU,SAAS;CAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;AAGlB;AAgDA,IAAa,KAAqB,EAChC,SACA,YACA,aACA,gBAAa,IACb,cACA,GAAG,QACyB;CAC5B,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAY,EAAyB,IAAI,GACzC,IAAU,EAAM,GAEhB,IAAQ,EAAS,QAAQ,CAAQ,EAAE,QAAQ,MAC/C,EAAe,CAAC,CAClB,GAEM,CAAC,GAAa,KAAkB,EAAS,CAAC,GAC1C,CAAC,GAAa,KAAkB,EAAS,EAAE;CAGjD,QAAgB;EACd,IAAI,GAAM;GAER,AADA,EAAe,CAAC,GAChB,EAAe,EAAE;GAEjB,IAAM,IAAK,4BAA4B;IACrC,AAAI,KAAc,EAAU,UAC1B,EAAU,QAAQ,MAAM,KAEV,EAAU,SAAS,cAA2B,CAAS,IAE9D,MAAM;GAEjB,CAAC;GAED,aAAa,qBAAqB,CAAE;EACtC;CACF,GAAG,CAAC,GAAM,CAAU,CAAC;CAGrB,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,gBAAgB,GAClB,EAAQ;GAER;EACF;EAEA,EAAU,GAAG,CAAS;CACxB,GACA,CAAC,CAAO,CACV,GAEM,IAAY,EAAM,SAAS,GAC3B,IAAa,EAAM,MAAgB,EAAM,IAGzC,IAAQ,EAAY,KAAK,EAAE,YAAY;CAM7C,OAJK,IAIE,EACL,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,UAAU,MAAM;GACd,AAAI,EAAE,WAAW,EAAE,iBACjB,EAAQ;EAEZ;EACA,MAAK;YAEL,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,WAAW;IAAC,EAAO;IAAQ,IAAY,EAAO,cAAc;IAAM;GAAS,EACxE,OAAO,OAAO,EACd,KAAK,GAAG;GACX,WAAW;GACX,GAAI;aATN,CAYE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,SAAS;MACT,cAAW;gBACZ;KAEO,CAAA;KACR,kBAAC,QAAD;MAAM,IAAI;MAAS,WAAW,EAAO;gBAAO;KAEtC,CAAA;KACL,KACC,kBAAC,OAAD;MAAK,WAAW,EAAO;gBACrB,kBAAC,SAAD;OACE,KAAK;OACL,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAK;OAC9C,WAAW,EAAO;OAClB,cAAW;MACZ,CAAA;KACE,CAAA;IAEJ;OAGL,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CAEG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAS,cAAW;eACzC,kBAAC,MAAD;MAAI,WAAW,EAAO;gBACnB,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;OAAY,MAAK;iBACf,kBAAC,UAAD;QACE,MAAK;QACL,MAAK;QACL,iBAAe,MAAM;QACrB,WAAW,CAAC,EAAO,SAAS,MAAM,IAAc,EAAO,gBAAgB,IAAI,EACxE,OAAO,OAAO,EACd,KAAK,GAAG;QACX,eAAe,EAAe,CAAC;kBAPjC,CASG,EAAK,MAAM,YACV,kBAAC,QAAD;SACE,WAAW;UAAC,EAAO;UAAS;UAAQ,EAAK,MAAM;SAAQ,EAAE,KAAK,GAAG;SACjE,eAAY;QACb,CAAA,GAEH,kBAAC,QAAD;SAAM,WAAW,EAAO;mBAAW,EAAK,MAAM;QAAY,CAAA,CACpD;;MACN,GAlBK,CAkBL,CACL;KACC,CAAA;IACD,CAAA,GAIP,kBAAC,OAAD;KAAK,WAAW,EAAO;eACpB,KACC,EAAa,GAAY,EACvB,qBAAqB,KAAS,KAAA,EAChC,CAAkC;IACjC,CAAA,CACF;KACF;;CACF,CAAA,GACL,SAAS,IACX,IA9FS;AA+FX"}
+{"version":3,"file":"PreferencesDialog.js","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport type { PreferencesPageProps } from '../PreferencesPage/PreferencesPage';\n\nimport styles from './PreferencesDialog.module.css';\n\n// ─── Focus trap ───────────────────────────────────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nfunction trapFocus(e: KeyboardEvent<HTMLDivElement>, ref: RefObject<HTMLDivElement | null>) {\n  if (e.key !== 'Tab') {\n    return;\n  }\n\n  const focusable = Array.from(ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []);\n\n  if (!focusable.length) {\n    return;\n  }\n\n  const [first] = focusable;\n  const last = focusable[focusable.length - 1];\n\n  if (e.shiftKey) {\n    if (document.activeElement === first) {\n      e.preventDefault();\n      last.focus();\n    }\n  } else {\n    if (document.activeElement === last) {\n      e.preventDefault();\n      first.focus();\n    }\n  }\n}\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface PreferencesDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {\n  /** Whether the dialog is open. */\n  open: boolean;\n  /** Called when the user requests to close the dialog. */\n  onClose: () => void;\n  /**\n   * `PreferencesPage` children. Each page appears as a sidebar entry.\n   * When only one page is provided the sidebar is hidden.\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show a search bar in the header.\n   * When `true` the user can filter group/row content by typing.\n   * Defaults to `true`.\n   */\n  searchable?: boolean;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Multi-page settings dialog using `PreferencesPage` tabs.\n *\n * Renders a wide modal with an optional sidebar listing pages. Each\n * `PreferencesPage` child becomes a navigation entry. Supports built-in\n * search when `searchable` is `true` (the default).\n *\n * Mirrors `AdwPreferencesDialog`.\n *\n * @example\n * ```tsx\n * <PreferencesDialog open={open} onClose={() => setOpen(false)}>\n *   <PreferencesPage title=\"General\" iconName=\"preferences-system-symbolic\">\n *     <PreferencesGroup title=\"Appearance\">\n *       <BoxedList>\n *         <SwitchRow title=\"Dark mode\" />\n *       </BoxedList>\n *     </PreferencesGroup>\n *   </PreferencesPage>\n * </PreferencesDialog>\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesDialog.html\n */\nexport const PreferencesDialog = ({\n  open,\n  onClose,\n  children,\n  searchable = true,\n  className,\n  ...props\n}: PreferencesDialogProps) => {\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const titleId = useId();\n\n  const pages = Children.toArray(children).filter((c): c is ReactElement<PreferencesPageProps> =>\n    isValidElement(c),\n  ) as ReactElement<PreferencesPageProps>[];\n\n  const [activeIndex, setActiveIndex] = useState(0);\n  const [searchQuery, setSearchQuery] = useState('');\n\n  // Reset state when dialog opens\n  useEffect(() => {\n    if (open) {\n      setActiveIndex(0);\n      setSearchQuery('');\n      // Focus search or first focusable after open animation\n      const id = requestAnimationFrame(() => {\n        if (searchable && searchRef.current) {\n          searchRef.current.focus();\n        } else {\n          const first = dialogRef.current?.querySelector<HTMLElement>(FOCUSABLE);\n\n          first?.focus();\n        }\n      });\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open, searchable]);\n\n  // Close on Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        onClose();\n\n        return;\n      }\n\n      trapFocus(e, dialogRef);\n    },\n    [onClose],\n  );\n\n  const multiPage = pages.length > 1;\n  const activePage = pages[activeIndex] ?? pages[0];\n\n  // Filter content by search query\n  const query = searchQuery.trim().toLowerCase();\n\n  if (!open) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={styles.backdrop}\n      onClick={(e) => {\n        if (e.target === e.currentTarget) {\n          onClose();\n        }\n      }}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[styles.dialog, multiPage ? styles.dialogMulti : null, className]\n          .filter(Boolean)\n          .join(' ')}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {/* ── Header ─────────────────────────────────────────────────────── */}\n        <div className={styles.header}>\n          <button\n            type=\"button\"\n            className={styles.closeBtn}\n            onClick={onClose}\n            aria-label=\"Close preferences\"\n          >\n            ✕\n          </button>\n          <span id={titleId} className={styles.title}>\n            Preferences\n          </span>\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <input\n                ref={searchRef}\n                type=\"search\"\n                placeholder=\"Search…\"\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                className={styles.searchInput}\n                aria-label=\"Search preferences\"\n              />\n            </div>\n          )}\n        </div>\n\n        {/* ── Body ───────────────────────────────────────────────────────── */}\n        <div className={styles.body}>\n          {/* Sidebar — only shown when there are multiple pages */}\n          {multiPage && (\n            <nav className={styles.sidebar} aria-label=\"Preferences pages\">\n              <ul className={styles.navList}>\n                {pages.map((page, i) => (\n                  <li key={i} role=\"presentation\">\n                    <button\n                      role=\"tab\"\n                      type=\"button\"\n                      aria-selected={i === activeIndex}\n                      className={[styles.navItem, i === activeIndex ? styles.navItemActive : null]\n                        .filter(Boolean)\n                        .join(' ')}\n                      onClick={() => setActiveIndex(i)}\n                    >\n                      {page.props.iconName && (\n                        <span\n                          className={[styles.navIcon, 'icon', page.props.iconName].join(' ')}\n                          aria-hidden=\"true\"\n                        />\n                      )}\n                      <span className={styles.navLabel}>{page.props.title}</span>\n                    </button>\n                  </li>\n                ))}\n              </ul>\n            </nav>\n          )}\n\n          {/* Page content */}\n          <div className={styles.pageWrap}>\n            {activePage &&\n              cloneElement(activePage, {\n                'data-search-query': query || undefined,\n              } as Partial<PreferencesPageProps>)}\n          </div>\n        </div>\n      </div>\n    </div>,\n    document.body,\n  );\n};\n"],"mappings":";;;;;AAwBA,IAAM,IACJ;AAEF,SAAS,EAAU,GAAkC,GAAuC;CAC1F,IAAI,EAAE,QAAQ,OACZ;CAGF,IAAM,IAAY,MAAM,KAAK,EAAI,SAAS,iBAA8B,CAAS,KAAK,CAAC,CAAC;CAExF,IAAI,CAAC,EAAU,QACb;CAGF,IAAM,CAAC,KAAS,GACV,IAAO,EAAU,EAAU,SAAS;CAE1C,AAAI,EAAE,WACA,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAK,MAAM,KAGT,SAAS,kBAAkB,MAC7B,EAAE,eAAe,GACjB,EAAM,MAAM;AAGlB;AAgDA,IAAa,KAAqB,EAChC,SACA,YACA,aACA,gBAAa,IACb,cACA,GAAG,QACyB;CAC5B,IAAM,IAAY,EAAuB,IAAI,GACvC,IAAY,EAAyB,IAAI,GACzC,IAAU,EAAM,GAEhB,IAAQ,EAAS,QAAQ,CAAQ,EAAE,QAAQ,MAC/C,EAAe,CAAC,CAClB,GAEM,CAAC,GAAa,KAAkB,EAAS,CAAC,GAC1C,CAAC,GAAa,KAAkB,EAAS,EAAE;CAGjD,QAAgB;EACd,IAAI,GAAM;GAER,AADA,EAAe,CAAC,GAChB,EAAe,EAAE;GAEjB,IAAM,IAAK,4BAA4B;IACrC,AAAI,KAAc,EAAU,UAC1B,EAAU,QAAQ,MAAM,KAEV,EAAU,SAAS,cAA2B,CAAS,IAE9D,MAAM;GAEjB,CAAC;GAED,aAAa,qBAAqB,CAAE;EACtC;CACF,GAAG,CAAC,GAAM,CAAU,CAAC;CAGrB,IAAM,IAAgB,GACnB,MAAqC;EACpC,IAAI,EAAE,QAAQ,UAAU;GAEtB,AADA,EAAE,gBAAgB,GAClB,EAAQ;GAER;EACF;EAEA,EAAU,GAAG,CAAS;CACxB,GACA,CAAC,CAAO,CACV,GAEM,IAAY,EAAM,SAAS,GAC3B,IAAa,EAAM,MAAgB,EAAM,IAGzC,IAAQ,EAAY,KAAK,EAAE,YAAY;CAM7C,OAJK,IAIE,EACL,kBAAC,OAAD;EACE,WAAW,EAAO;EAClB,UAAU,MAAM;GACd,AAAI,EAAE,WAAW,EAAE,iBACjB,EAAQ;EAEZ;EACA,MAAK;YAEL,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,cAAW;GACX,mBAAiB;GACjB,WAAW;IAAC,EAAO;IAAQ,IAAY,EAAO,cAAc;IAAM;GAAS,EACxE,OAAO,OAAO,EACd,KAAK,GAAG;GACX,WAAW;GACX,GAAI;aATN,CAYE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB;KACE,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,SAAS;MACT,cAAW;gBACZ;KAEO,CAAA;KACR,kBAAC,QAAD;MAAM,IAAI;MAAS,WAAW,EAAO;gBAAO;KAEtC,CAAA;KACL,KACC,kBAAC,OAAD;MAAK,WAAW,EAAO;gBACrB,kBAAC,SAAD;OACE,KAAK;OACL,MAAK;OACL,aAAY;OACZ,OAAO;OACP,WAAW,MAAM,EAAe,EAAE,OAAO,KAAK;OAC9C,WAAW,EAAO;OAClB,cAAW;MACZ,CAAA;KACE,CAAA;IAEJ;OAGL,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CAEG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAS,cAAW;eACzC,kBAAC,MAAD;MAAI,WAAW,EAAO;gBACnB,EAAM,KAAK,GAAM,MAChB,kBAAC,MAAD;OAAY,MAAK;iBACf,kBAAC,UAAD;QACE,MAAK;QACL,MAAK;QACL,iBAAe,MAAM;QACrB,WAAW,CAAC,EAAO,SAAS,MAAM,IAAc,EAAO,gBAAgB,IAAI,EACxE,OAAO,OAAO,EACd,KAAK,GAAG;QACX,eAAe,EAAe,CAAC;kBAPjC,CASG,EAAK,MAAM,YACV,kBAAC,QAAD;SACE,WAAW;UAAC,EAAO;UAAS;UAAQ,EAAK,MAAM;SAAQ,EAAE,KAAK,GAAG;SACjE,eAAY;QACb,CAAA,GAEH,kBAAC,QAAD;SAAM,WAAW,EAAO;mBAAW,EAAK,MAAM;QAAY,CAAA,CACpD;;MACN,GAlBK,CAkBL,CACL;KACC,CAAA;IACD,CAAA,GAIP,kBAAC,OAAD;KAAK,WAAW,EAAO;eACpB,KACC,EAAa,GAAY,EACvB,qBAAqB,KAAS,KAAA,EAChC,CAAkC;IACjC,CAAA,CACF;KACF;;CACF,CAAA,GACL,SAAS,IACX,IA9FS;AA+FX"}

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

@@ -1,2 +1,2 @@
-var e={backdrop:`_backdrop_1k5wp_3`,"backdrop-in":`_backdrop-in_1k5wp_1`,dialog:`_dialog_1k5wp_30`,"dialog-in":`_dialog-in_1k5wp_1`,dialogMulti:`_dialogMulti_1k5wp_50`,header:`_header_1k5wp_67`,closeBtn:`_closeBtn_1k5wp_78`,title:`_title_1k5wp_108`,searchWrap:`_searchWrap_1k5wp_118`,searchInput:`_searchInput_1k5wp_122`,body:`_body_1k5wp_151`,sidebar:`_sidebar_1k5wp_160`,navList:`_navList_1k5wp_168`,navItem:`_navItem_1k5wp_177`,navItemActive:`_navItemActive_1k5wp_198`,navIcon:`_navIcon_1k5wp_213`,navLabel:`_navLabel_1k5wp_219`,pageWrap:`_pageWrap_1k5wp_229`};exports.default=e;
+var e={backdrop:`_backdrop_1lf75_3`,"backdrop-in":`_backdrop-in_1lf75_1`,dialog:`_dialog_1lf75_27`,"dialog-in":`_dialog-in_1lf75_1`,dialogMulti:`_dialogMulti_1lf75_43`,header:`_header_1lf75_61`,closeBtn:`_closeBtn_1lf75_72`,title:`_title_1lf75_102`,searchWrap:`_searchWrap_1lf75_112`,searchInput:`_searchInput_1lf75_116`,body:`_body_1lf75_145`,sidebar:`_sidebar_1lf75_154`,navList:`_navList_1lf75_162`,navItem:`_navItem_1lf75_171`,navItemActive:`_navItemActive_1lf75_190`,navIcon:`_navIcon_1lf75_205`,navLabel:`_navLabel_1lf75_211`,pageWrap:`_pageWrap_1lf75_221`};exports.default=e;
 //# sourceMappingURL=PreferencesDialog.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesDialog.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  width: min(540px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/* Wider layout when sidebar is present */\n.dialogMulti {\n  width: min(720px, calc(100vw - 48px));\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px) var(--gnome-space-2, 12px)\n    var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  order: -1;\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 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-semibold, 600);\n  line-height: 1;\n  text-align: center;\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  grid-column: 3;\n}\n\n.searchInput {\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  background-color: var(--gnome-card-bg-color, rgba(0, 0, 0, 0.04));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  padding: 5px var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  width: 180px;\n  transition:\n    border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n.searchInput:focus {\n  outline: none;\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 var(--gnome-focus-ring-width, 3px)\n    color-mix(in srgb, var(--gnome-accent-color, #3584e4) 30%, transparent);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ─── Sidebar ───────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  width: 200px;\n  flex-shrink: 0;\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  overflow-y: auto;\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px);\n}\n\n.navList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.navItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  text-align: left;\n\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  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.navItem:hover:not(.navItemActive) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.navItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.navItem:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.navIcon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.navLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ─── Page area ─────────────────────────────────────────────────────────────── */\n\n.pageWrap {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .sidebar {\n    border-right-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchInput {\n    background-color: rgba(255, 255, 255, 0.06);\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .navItem,\n  .searchInput {\n    transition: none;\n  }\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .dialog {\n    box-shadow: none;\n    border: 2px solid var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .header {\n    border-bottom-width: 2px;\n  }\n\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .navItemActive {\n    outline: 2px solid var(--gnome-accent-color, #3584e4);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PreferencesDialog.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgb(0 0 0 / 0.5);\n  backdrop-filter: blur(4px);\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  width: min(540px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgb(0 0 0 / 0.25),\n    0 0 0 1px rgb(0 0 0 / 0.08);\n  overflow: hidden;\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/* Wider layout when sidebar is present */\n.dialogMulti {\n  width: min(720px, calc(100vw - 48px));\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px) var(--gnome-space-2, 12px)\n    var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  flex-shrink: 0;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  order: -1;\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 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-semibold, 600);\n  line-height: 1;\n  text-align: center;\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  grid-column: 3;\n}\n\n.searchInput {\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  background-color: var(--gnome-card-bg-color, rgb(0 0 0 / 0.04));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  padding: 5px var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  width: 180px;\n  transition:\n    border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n.searchInput:focus {\n  outline: none;\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 var(--gnome-focus-ring-width, 3px)\n    color-mix(in srgb, var(--gnome-accent-color, #3584e4) 30%, transparent);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ─── Sidebar ───────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  width: 200px;\n  flex-shrink: 0;\n  border-right: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  overflow-y: auto;\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px);\n}\n\n.navList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.navItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  text-align: left;\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  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.navItem:hover:not(.navItemActive) {\n  background-color: color-mix(in srgb, currentcolor 6%, transparent);\n}\n\n.navItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.navItem:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.navIcon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.navLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ─── Page area ─────────────────────────────────────────────────────────────── */\n\n.pageWrap {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgb(0 0 0 / 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgb(0 0 0 / 0.5),\n      0 0 0 1px rgb(255 255 255 / 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgb(255 255 255 / 0.08);\n  }\n\n  .sidebar {\n    border-right-color: rgb(255 255 255 / 0.08);\n  }\n\n  .searchInput {\n    background-color: rgb(255 255 255 / 0.06);\n    border-color: rgb(255 255 255 / 0.15);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .navItem,\n  .searchInput {\n    transition: none;\n  }\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .dialog {\n    box-shadow: none;\n    border: 2px solid var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .header {\n    border-bottom-width: 2px;\n  }\n\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .navItemActive {\n    outline: 2px solid var(--gnome-accent-color, #3584e4);\n  }\n}\n"],"mappings":""}

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

@@ -1,22 +1,22 @@
 var e = {
-	backdrop: "_backdrop_1k5wp_3",
-	"backdrop-in": "_backdrop-in_1k5wp_1",
-	dialog: "_dialog_1k5wp_30",
-	"dialog-in": "_dialog-in_1k5wp_1",
-	dialogMulti: "_dialogMulti_1k5wp_50",
-	header: "_header_1k5wp_67",
-	closeBtn: "_closeBtn_1k5wp_78",
-	title: "_title_1k5wp_108",
-	searchWrap: "_searchWrap_1k5wp_118",
-	searchInput: "_searchInput_1k5wp_122",
-	body: "_body_1k5wp_151",
-	sidebar: "_sidebar_1k5wp_160",
-	navList: "_navList_1k5wp_168",
-	navItem: "_navItem_1k5wp_177",
-	navItemActive: "_navItemActive_1k5wp_198",
-	navIcon: "_navIcon_1k5wp_213",
-	navLabel: "_navLabel_1k5wp_219",
-	pageWrap: "_pageWrap_1k5wp_229"
+	backdrop: "_backdrop_1lf75_3",
+	"backdrop-in": "_backdrop-in_1lf75_1",
+	dialog: "_dialog_1lf75_27",
+	"dialog-in": "_dialog-in_1lf75_1",
+	dialogMulti: "_dialogMulti_1lf75_43",
+	header: "_header_1lf75_61",
+	closeBtn: "_closeBtn_1lf75_72",
+	title: "_title_1lf75_102",
+	searchWrap: "_searchWrap_1lf75_112",
+	searchInput: "_searchInput_1lf75_116",
+	body: "_body_1lf75_145",
+	sidebar: "_sidebar_1lf75_154",
+	navList: "_navList_1lf75_162",
+	navItem: "_navItem_1lf75_171",
+	navItemActive: "_navItemActive_1lf75_190",
+	navIcon: "_navIcon_1lf75_205",
+	navLabel: "_navLabel_1lf75_211",
+	pageWrap: "_pageWrap_1lf75_221"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesDialog.module.css.js","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  width: min(540px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgba(0, 0, 0, 0.25),\n    0 0 0 1px rgba(0, 0, 0, 0.08);\n\n  overflow: hidden;\n\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/* Wider layout when sidebar is present */\n.dialogMulti {\n  width: min(720px, calc(100vw - 48px));\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px) var(--gnome-space-2, 12px)\n    var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  flex-shrink: 0;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  order: -1;\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 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-semibold, 600);\n  line-height: 1;\n  text-align: center;\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  grid-column: 3;\n}\n\n.searchInput {\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  background-color: var(--gnome-card-bg-color, rgba(0, 0, 0, 0.04));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  padding: 5px var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  width: 180px;\n  transition:\n    border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n.searchInput:focus {\n  outline: none;\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 var(--gnome-focus-ring-width, 3px)\n    color-mix(in srgb, var(--gnome-accent-color, #3584e4) 30%, transparent);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ─── Sidebar ───────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  width: 200px;\n  flex-shrink: 0;\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  overflow-y: auto;\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px);\n}\n\n.navList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.navItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  text-align: left;\n\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  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.navItem:hover:not(.navItemActive) {\n  background-color: color-mix(in srgb, currentColor 6%, transparent);\n}\n\n.navItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.navItem:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.navIcon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.navLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ─── Page area ─────────────────────────────────────────────────────────────── */\n\n.pageWrap {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgba(0, 0, 0, 0.5),\n      0 0 0 1px rgba(255, 255, 255, 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .sidebar {\n    border-right-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .searchInput {\n    background-color: rgba(255, 255, 255, 0.06);\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .navItem,\n  .searchInput {\n    transition: none;\n  }\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .dialog {\n    box-shadow: none;\n    border: 2px solid var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .header {\n    border-bottom-width: 2px;\n  }\n\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .navItemActive {\n    outline: 2px solid var(--gnome-accent-color, #3584e4);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PreferencesDialog.module.css.js","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgb(0 0 0 / 0.5);\n  backdrop-filter: blur(4px);\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Dialog card ───────────────────────────────────────────────────────────── */\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  width: min(540px, calc(100vw - 48px));\n  max-height: min(640px, 90dvh);\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border-radius: var(--gnome-radius-xl, 16px);\n  box-shadow:\n    0 8px 32px rgb(0 0 0 / 0.25),\n    0 0 0 1px rgb(0 0 0 / 0.08);\n  overflow: hidden;\n  animation: dialog-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n/* Wider layout when sidebar is present */\n.dialogMulti {\n  width: min(720px, calc(100vw - 48px));\n}\n\n@keyframes dialog-in {\n  from {\n    opacity: 0;\n    transform: scale(0.94) translateY(-8px);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px) var(--gnome-space-2, 12px)\n    var(--gnome-space-3, 16px);\n  border-bottom: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  flex-shrink: 0;\n}\n\n.closeBtn {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  transition:\n    background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  order: -1;\n}\n\n.closeBtn:hover {\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n  opacity: 1;\n}\n\n.closeBtn:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 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-semibold, 600);\n  line-height: 1;\n  text-align: center;\n}\n\n/* ─── Search ────────────────────────────────────────────────────────────────── */\n\n.searchWrap {\n  grid-column: 3;\n}\n\n.searchInput {\n  appearance: none;\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  background-color: var(--gnome-card-bg-color, rgb(0 0 0 / 0.04));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  padding: 5px var(--gnome-space-2, 12px);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  line-height: 1.5;\n  width: 180px;\n  transition:\n    border-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.searchInput::placeholder {\n  opacity: 0.5;\n}\n\n.searchInput:focus {\n  outline: none;\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow: 0 0 0 var(--gnome-focus-ring-width, 3px)\n    color-mix(in srgb, var(--gnome-accent-color, #3584e4) 30%, transparent);\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.body {\n  display: flex;\n  flex: 1;\n  min-height: 0;\n  overflow: hidden;\n}\n\n/* ─── Sidebar ───────────────────────────────────────────────────────────────── */\n\n.sidebar {\n  width: 200px;\n  flex-shrink: 0;\n  border-right: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  overflow-y: auto;\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-2, 12px);\n}\n\n.navList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.navItem {\n  appearance: none;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  padding: 8px var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-md, 8px);\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  text-align: left;\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  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.navItem:hover:not(.navItemActive) {\n  background-color: color-mix(in srgb, currentcolor 6%, transparent);\n}\n\n.navItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.navItem:focus-visible {\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: 2px;\n}\n\n.navIcon {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n\n.navLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* ─── Page area ─────────────────────────────────────────────────────────────── */\n\n.pageWrap {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgb(0 0 0 / 0.65);\n  }\n\n  .dialog {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 8px 32px rgb(0 0 0 / 0.5),\n      0 0 0 1px rgb(255 255 255 / 0.08);\n  }\n\n  .header {\n    border-bottom-color: rgb(255 255 255 / 0.08);\n  }\n\n  .sidebar {\n    border-right-color: rgb(255 255 255 / 0.08);\n  }\n\n  .searchInput {\n    background-color: rgb(255 255 255 / 0.06);\n    border-color: rgb(255 255 255 / 0.15);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .dialog {\n    animation: none;\n  }\n\n  .closeBtn,\n  .navItem,\n  .searchInput {\n    transition: none;\n  }\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .dialog {\n    box-shadow: none;\n    border: 2px solid var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .header {\n    border-bottom-width: 2px;\n  }\n\n  .sidebar {\n    border-right-width: 2px;\n  }\n\n  .navItemActive {\n    outline: 2px solid var(--gnome-accent-color, #3584e4);\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={group:`_group_17s4f_3`,header:`_header_17s4f_11`,headerText:`_headerText_17s4f_17`,title:`_title_17s4f_25`,description:`_description_17s4f_33`,suffix:`_suffix_17s4f_42`,content:`_content_17s4f_48`};exports.default=e;
+var e={group:`_group_104d4_3`,header:`_header_104d4_11`,headerText:`_headerText_104d4_17`,title:`_title_104d4_25`,description:`_description_104d4_33`,suffix:`_suffix_104d4_42`,content:`_content_104d4_48`};exports.default=e;
 //# sourceMappingURL=PreferencesGroup.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesGroup.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\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-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.description {\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.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}
+{"version":3,"file":"PreferencesGroup.module.css.cjs","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\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-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.description {\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.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	group: "_group_17s4f_3",
-	header: "_header_17s4f_11",
-	headerText: "_headerText_17s4f_17",
-	title: "_title_17s4f_25",
-	description: "_description_17s4f_33",
-	suffix: "_suffix_17s4f_42",
-	content: "_content_17s4f_48"
+	group: "_group_104d4_3",
+	header: "_header_104d4_11",
+	headerText: "_headerText_104d4_17",
+	title: "_title_104d4_25",
+	description: "_description_104d4_33",
+	suffix: "_suffix_104d4_42",
+	content: "_content_104d4_48"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesGroup.module.css.js","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\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-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.description {\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.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}
+{"version":3,"file":"PreferencesGroup.module.css.js","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.module.css"],"sourcesContent":["/* ─── PreferencesGroup ───────────────────────────────────────────────────────── */\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: var(--gnome-space-2, 12px);\n}\n\n.headerText {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\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-semibold, 600);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.description {\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.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n.suffix {\n  flex-shrink: 0;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  /* Rows/BoxedList rendered here */\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={track:`_track_10s0m_3`,fill:`_fill_10s0m_14`,accent:`_accent_10s0m_23`,success:`_success_10s0m_26`,warning:`_warning_10s0m_29`,error:`_error_10s0m_32`,indeterminate:`_indeterminate_10s0m_38`,pulse:`_pulse_10s0m_1`};exports.default=e;
+var e={track:`_track_18d7y_3`,fill:`_fill_18d7y_14`,accent:`_accent_18d7y_23`,success:`_success_18d7y_27`,warning:`_warning_18d7y_31`,error:`_error_18d7y_35`,indeterminate:`_indeterminate_18d7y_41`,pulse:`_pulse_18d7y_1`};exports.default=e;
 //# sourceMappingURL=ProgressBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.module.css.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n}\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n}\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n}\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n}\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0% {\n    left: -40%;\n  }\n  100% {\n    left: 100%;\n  }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.module.css.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n}\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}

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

@@ -1,12 +1,12 @@
 var e = {
-	track: "_track_10s0m_3",
-	fill: "_fill_10s0m_14",
-	accent: "_accent_10s0m_23",
-	success: "_success_10s0m_26",
-	warning: "_warning_10s0m_29",
-	error: "_error_10s0m_32",
-	indeterminate: "_indeterminate_10s0m_38",
-	pulse: "_pulse_10s0m_1"
+	track: "_track_18d7y_3",
+	fill: "_fill_18d7y_14",
+	accent: "_accent_18d7y_23",
+	success: "_success_18d7y_27",
+	warning: "_warning_18d7y_31",
+	error: "_error_18d7y_35",
+	indeterminate: "_indeterminate_18d7y_41",
+	pulse: "_pulse_18d7y_1"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.module.css.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n}\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n}\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n}\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n}\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0% {\n    left: -40%;\n  }\n  100% {\n    left: 100%;\n  }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ProgressBar.module.css.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.module.css"],"sourcesContent":["/* ─── Track ────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: var(--gnome-light-3, #deddda);\n  overflow: hidden;\n}\n\n/* ─── Fill (determinate) ───────────────────────────────────────────────────── */\n\n.fill {\n  height: 100%;\n  border-radius: var(--gnome-radius-pill);\n  transition: width var(--gnome-duration-normal) var(--gnome-easing-default);\n  will-change: width;\n}\n\n/* ─── Variants ─────────────────────────────────────────────────────────────── */\n\n.accent {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.success {\n  background-color: var(--gnome-success-bg-color, #2ec27e);\n}\n\n.warning {\n  background-color: var(--gnome-warning-bg-color, #f6d32d);\n}\n\n.error {\n  background-color: var(--gnome-error-bg-color, #e01b24);\n}\n\n/* ─── Indeterminate pulse ──────────────────────────────────────────────────── */\n\n.indeterminate {\n  position: absolute;\n  top: 0;\n  width: 40%;\n  animation: pulse 1.4s var(--gnome-easing-default) infinite;\n}\n\n@keyframes pulse {\n  0% {\n    left: -40%;\n  }\n\n  100% {\n    left: 100%;\n  }\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .fill {\n    transition: none;\n  }\n\n  .indeterminate {\n    animation: none;\n    left: 0;\n    width: 100%;\n    opacity: 0.5;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={radio:`_radio_fnsnz_3`};exports.default=e;
+var e={radio:`_radio_1rk07_3`};exports.default=e;
 //# sourceMappingURL=RadioButton.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.module.css.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\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-pill);\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/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #ffffff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):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/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio: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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio: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  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):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  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .radio:not(:checked):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  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RadioButton.module.css.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\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-pill);\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/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #fff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):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/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio: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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio: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  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):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  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .radio:not(:checked):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  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-var e = { radio: "_radio_fnsnz_3" };
+var e = { radio: "_radio_1rk07_3" };
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.module.css.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\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-pill);\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/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #ffffff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):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/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio: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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio: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  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):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  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  }\n\n  .radio:not(:checked):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  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"RadioButton.module.css.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.module.css"],"sourcesContent":["/* ─── Reset & base ─────────────────────────────────────────────────────────── */\n\n.radio {\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-pill);\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/* ─── Inner dot (checked) ──────────────────────────────────────────────────── */\n\n.radio::before {\n  content: \"\";\n  display: block;\n  width: 6px;\n  height: 6px;\n  border-radius: var(--gnome-radius-pill);\n  background-color: #fff;\n  opacity: 0;\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.radio:checked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n}\n\n.radio:checked::before {\n  opacity: 1;\n}\n\n/* ─── Hover ────────────────────────────────────────────────────────────────── */\n\n.radio:not(:checked):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/* ─── Focus ────────────────────────────────────────────────────────────────── */\n\n.radio: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/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.radio: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  .radio {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: var(--gnome-dark-1, #77767b);\n  }\n\n  .radio:not(:checked):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  .radio {\n    border-width: 2px;\n    border-color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  }\n\n  .radio:not(:checked):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  .radio,\n  .radio::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_1812f_3`,open:`_open_1812f_13`,bar:`_bar_1812f_20`,disabled:`_disabled_1812f_31`,searchIcon:`_searchIcon_1812f_37`,input:`_input_1812f_47`,clearButton:`_clearButton_1812f_82`,filterRow:`_filterRow_1812f_124`,suggestionsPanel:`_suggestionsPanel_1812f_136`,suggestionsLoading:`_suggestionsLoading_1812f_160`,suggestionItem:`_suggestionItem_1812f_166`,suggestionItemActive:`_suggestionItemActive_1812f_176`,inline:`_inline_1812f_202`};exports.default=e;
+var e={wrapper:`_wrapper_1960f_3`,open:`_open_1960f_12`,bar:`_bar_1960f_19`,disabled:`_disabled_1960f_28`,searchIcon:`_searchIcon_1960f_34`,input:`_input_1960f_44`,clearButton:`_clearButton_1960f_76`,filterRow:`_filterRow_1960f_115`,suggestionsPanel:`_suggestionsPanel_1960f_126`,suggestionsLoading:`_suggestionsLoading_1960f_146`,suggestionItem:`_suggestionItem_1960f_152`,suggestionItemActive:`_suggestionItemActive_1960f_161`,inline:`_inline_1960f_187`};exports.default=e;
 //# sourceMappingURL=SearchBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.css.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchBar.module.css.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgb(0 0 0 / 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  border: none;\n  background: transparent;\n  outline: none;\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-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgb(0 0 0 / 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #fff));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgb(0 0 0 / 0.14),\n    0 1px 4px rgb(0 0 0 / 0.08);\n  max-height: 280px;\n  overflow-y: auto;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgb(255 255 255 / 0.1);\n    box-shadow:\n      0 4px 24px rgb(0 0 0 / 0.4),\n      0 1px 4px rgb(0 0 0 / 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgb(0 0 0 / 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,17 +1,17 @@
 var e = {
-	wrapper: "_wrapper_1812f_3",
-	open: "_open_1812f_13",
-	bar: "_bar_1812f_20",
-	disabled: "_disabled_1812f_31",
-	searchIcon: "_searchIcon_1812f_37",
-	input: "_input_1812f_47",
-	clearButton: "_clearButton_1812f_82",
-	filterRow: "_filterRow_1812f_124",
-	suggestionsPanel: "_suggestionsPanel_1812f_136",
-	suggestionsLoading: "_suggestionsLoading_1812f_160",
-	suggestionItem: "_suggestionItem_1812f_166",
-	suggestionItemActive: "_suggestionItemActive_1812f_176",
-	inline: "_inline_1812f_202"
+	wrapper: "_wrapper_1960f_3",
+	open: "_open_1960f_12",
+	bar: "_bar_1960f_19",
+	disabled: "_disabled_1960f_28",
+	searchIcon: "_searchIcon_1960f_34",
+	input: "_input_1960f_44",
+	clearButton: "_clearButton_1960f_76",
+	filterRow: "_filterRow_1960f_115",
+	suggestionsPanel: "_suggestionsPanel_1960f_126",
+	suggestionsLoading: "_suggestionsLoading_1960f_146",
+	suggestionItem: "_suggestionItem_1960f_152",
+	suggestionItemActive: "_suggestionItemActive_1960f_161",
+	inline: "_inline_1960f_187"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.module.css.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  -webkit-appearance: none;\n\n  border: none;\n  background: transparent;\n  outline: none;\n\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-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  -webkit-appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 24px;\n  height: 24px;\n\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentColor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentColor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  max-height: 280px;\n  overflow-y: auto;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgba(0, 0, 0, 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SearchBar.module.css.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.module.css"],"sourcesContent":["/* ─── Collapsible wrapper ───────────────────────────────────────────────────── */\n\n.wrapper {\n  overflow: hidden;\n  max-height: 0;\n  opacity: 0;\n  transition:\n    max-height var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease),\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.open {\n  max-height: 120px; /* enough for bar + filter row */\n  opacity: 1;\n}\n\n/* ─── Inner bar ─────────────────────────────────────────────────────────────── */\n\n.bar {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgb(0 0 0 / 0.12));\n}\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Search icon ───────────────────────────────────────────────────────────── */\n\n.searchIcon {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Input ─────────────────────────────────────────────────────────────────── */\n\n.input {\n  flex: 1;\n  min-width: 0;\n\n  /* Reset browser search input */\n  appearance: none;\n  border: none;\n  background: transparent;\n  outline: none;\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-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n.input::placeholder {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* Hide webkit search cancel button — we render our own */\n.input::-webkit-search-cancel-button {\n  appearance: none;\n}\n\n.input:focus {\n  outline: none;\n}\n\n/* ─── Clear button ──────────────────────────────────────────────────────────── */\n\n.clearButton {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  appearance: none;\n  border: none;\n  background: transparent;\n  border-radius: var(--gnome-radius-sm, 6px);\n  padding: 0;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.clearButton:hover:not(:disabled) {\n  opacity: 1;\n  background-color: color-mix(in srgb, currentcolor 10%, transparent);\n}\n\n.clearButton:active:not(:disabled) {\n  background-color: color-mix(in srgb, currentcolor 18%, transparent);\n}\n\n.clearButton:focus {\n  outline: none;\n}\n\n.clearButton:focus-visible {\n  opacity: 1;\n  outline: var(--gnome-focus-ring-width, 3px) solid var(--gnome-focus-ring-color, #3584e4);\n  outline-offset: var(--gnome-focus-ring-offset, 2px);\n}\n\n/* ─── Filter row (optional children) ───────────────────────────────────────── */\n\n.filterRow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--gnome-space-1, 6px);\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  background-color: var(--gnome-headerbar-bg-color, #ebebeb);\n  border-bottom: 1px solid var(--gnome-headerbar-shade-color, rgb(0 0 0 / 0.12));\n}\n\n/* ─── Suggestions popover ───────────────────────────────────────────────────── */\n\n.suggestionsPanel {\n  position: fixed;\n  z-index: 10200;\n  margin: 0;\n  padding: var(--gnome-space-1, 6px);\n  list-style: none;\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #fff));\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.1));\n  border-top: none;\n  border-radius: 0 0 var(--gnome-radius-lg, 12px) var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgb(0 0 0 / 0.14),\n    0 1px 4px rgb(0 0 0 / 0.08);\n  max-height: 280px;\n  overflow-y: auto;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n}\n\n.suggestionsLoading {\n  display: flex;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px);\n}\n\n.suggestionItem {\n  padding: var(--gnome-space-1, 6px) var(--gnome-space-2, 12px);\n  border-radius: var(--gnome-radius-sm, 6px);\n  cursor: pointer;\n  user-select: none;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.suggestionItem:hover,\n.suggestionItemActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 12%, transparent);\n}\n\n.suggestionItemActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n@media (prefers-color-scheme: dark) {\n  .suggestionsPanel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgb(255 255 255 / 0.1);\n    box-shadow:\n      0 4px 24px rgb(0 0 0 / 0.4),\n      0 1px 4px rgb(0 0 0 / 0.3);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .suggestionItem {\n    transition: none;\n  }\n}\n\n/* ─── Inline variant ────────────────────────────────────────────────────────── */\n\n.inline {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .bar,\n  .filterRow {\n    background-color: var(--gnome-headerbar-bg-color, #303030);\n    border-bottom-color: rgb(0 0 0 / 0.35);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .wrapper {\n    transition: none;\n  }\n\n  .clearButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={track:`_track_4b608_3`,segment:`_segment_4b608_16`,dimmed:`_dimmed_4b608_24`,highlighted:`_highlighted_4b608_27`,color0:`_color0_4b608_33`,color1:`_color1_4b608_36`,color2:`_color2_4b608_39`,color3:`_color3_4b608_42`,color4:`_color4_4b608_45`,color5:`_color5_4b608_48`,color6:`_color6_4b608_51`,color7:`_color7_4b608_54`};exports.default=e;
+var e={track:`_track_1uovi_3`,segment:`_segment_1uovi_17`,dimmed:`_dimmed_1uovi_25`,highlighted:`_highlighted_1uovi_29`,color0:`_color0_1uovi_35`,color1:`_color1_1uovi_39`,color2:`_color2_1uovi_43`,color3:`_color3_1uovi_47`,color4:`_color4_1uovi_51`,color5:`_color5_1uovi_55`,color6:`_color6_1uovi_59`,color7:`_color7_1uovi_63`};exports.default=e;
 //# sourceMappingURL=SegmentedBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.module.css.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedBar.module.css.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,16 +1,16 @@
 var e = {
-	track: "_track_4b608_3",
-	segment: "_segment_4b608_16",
-	dimmed: "_dimmed_4b608_24",
-	highlighted: "_highlighted_4b608_27",
-	color0: "_color0_4b608_33",
-	color1: "_color1_4b608_36",
-	color2: "_color2_4b608_39",
-	color3: "_color3_4b608_42",
-	color4: "_color4_4b608_45",
-	color5: "_color5_4b608_48",
-	color6: "_color6_4b608_51",
-	color7: "_color7_4b608_54"
+	track: "_track_1uovi_3",
+	segment: "_segment_1uovi_17",
+	dimmed: "_dimmed_1uovi_25",
+	highlighted: "_highlighted_1uovi_29",
+	color0: "_color0_1uovi_35",
+	color1: "_color1_1uovi_39",
+	color2: "_color2_1uovi_43",
+	color3: "_color3_1uovi_47",
+	color4: "_color4_1uovi_51",
+	color5: "_color5_1uovi_55",
+	color6: "_color6_1uovi_59",
+	color7: "_color7_1uovi_63"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SegmentedBar.module.css.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.module.css"],"sourcesContent":["/* ─── Track ─────────────────────────────────────────────────────────────────── */\n\n.track {\n  display: flex;\n  width: 100%;\n  height: 8px;\n  border-radius: var(--gnome-radius-pill);\n  overflow: hidden;\n  gap: 2px;\n\n  /* Track color is visible in the 2 px gaps between segments */\n  background-color: var(--gnome-light-3, #deddda);\n}\n\n/* ─── Segment ───────────────────────────────────────────────────────────────── */\n\n.segment {\n  height: 100%;\n  cursor: default;\n  transition:\n    opacity var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease),\n    filter var(--gnome-duration-fast, 150ms) var(--gnome-easing-default, ease);\n}\n\n.dimmed {\n  opacity: 0.35;\n}\n\n.highlighted {\n  filter: brightness(1.15);\n}\n\n/* ─── Default palette (GNOME tokens, cycling across color families) ─────────── */\n\n.color0 {\n  background-color: var(--gnome-blue-3, #3584e4);\n}\n\n.color1 {\n  background-color: var(--gnome-green-3, #33d17a);\n}\n\n.color2 {\n  background-color: var(--gnome-purple-3, #9141ac);\n}\n\n.color3 {\n  background-color: var(--gnome-orange-3, #ff7800);\n}\n\n.color4 {\n  background-color: var(--gnome-red-3, #e01b24);\n}\n\n.color5 {\n  background-color: var(--gnome-brown-3, #986a44);\n}\n\n.color6 {\n  background-color: var(--gnome-blue-5, #1a5fb4);\n}\n\n.color7 {\n  background-color: var(--gnome-green-5, #26a269);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: var(--gnome-dark-2, #5e5c64);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={separator:`_separator_w9b4s_3`,horizontal:`_horizontal_w9b4s_12`,vertical:`_vertical_w9b4s_20`};exports.default=e;
+var e={separator:`_separator_mbgep_3`,horizontal:`_horizontal_mbgep_12`,vertical:`_vertical_mbgep_20`};exports.default=e;
 //# sourceMappingURL=Separator.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Separator.module.css.cjs","names":[],"sources":["../../../src/components/Separator/Separator.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.separator {\n  border: none;\n  margin: 0;\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.07));\n  flex-shrink: 0;\n}\n\n/* ─── Horizontal ───────────────────────────────────────────────────────────── */\n\n.horizontal {\n  display: block;\n  width: 100%;\n  height: 1px;\n}\n\n/* ─── Vertical ─────────────────────────────────────────────────────────────── */\n\n.vertical {\n  display: inline-block;\n  width: 1px;\n  height: 100%;\n  align-self: stretch;\n}\n"],"mappings":""}
+{"version":3,"file":"Separator.module.css.cjs","names":[],"sources":["../../../src/components/Separator/Separator.module.css"],"sourcesContent":["/* ─── Base ─────────────────────────────────────────────────────────────────── */\n\n.separator {\n  border: none;\n  margin: 0;\n  background-color: var(--gnome-card-shade-color, rgb(0 0 0 / 0.07));\n  flex-shrink: 0;\n}\n\n/* ─── Horizontal ───────────────────────────────────────────────────────────── */\n\n.horizontal {\n  display: block;\n  width: 100%;\n  height: 1px;\n}\n\n/* ─── Vertical ─────────────────────────────────────────────────────────────── */\n\n.vertical {\n  display: inline-block;\n  width: 1px;\n  height: 100%;\n  align-self: stretch;\n}\n"],"mappings":""}