@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/PreferencesDialog/PreferencesDialog.js

@@ -11,7 +11,7 @@ function p(e, t) {
 	let r = n[0], i = n[n.length - 1];
 	e.shiftKey ? document.activeElement === r && (e.preventDefault(), i.focus()) : document.activeElement === i && (e.preventDefault(), r.focus());
 }
-function m({ open: m, onClose: h, children: g, searchable: _ = !0, className: v, ...y }) {
+var m = ({ open: m, onClose: h, children: g, searchable: _ = !0, className: v, ...y }) => {
 	let b = s(null), x = s(null), S = o(), C = t.toArray(g).filter((e) => r(e)), [w, T] = c(0), [E, D] = c("");
 	a(() => {
 		if (m) {
@@ -111,7 +111,7 @@ function m({ open: m, onClose: h, children: g, searchable: _ = !0, className: v,
 			})]
 		})
 	}), document.body) : null;
-}
+};
 //#endregion
 export { m as PreferencesDialog };
 

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 function 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":"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"}
+{"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"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_1k5wp_3`,t=`_dialog_1k5wp_30`,n=`_dialogMulti_1k5wp_50`,r=`_header_1k5wp_67`,i=`_closeBtn_1k5wp_78`,a=`_title_1k5wp_108`,o=`_searchWrap_1k5wp_118`,s=`_searchInput_1k5wp_122`,c=`_body_1k5wp_151`,l=`_sidebar_1k5wp_160`,u=`_navList_1k5wp_168`,d=`_navItem_1k5wp_177`,f=`_navItemActive_1k5wp_198`,p=`_navIcon_1k5wp_213`,m=`_navLabel_1k5wp_219`,h=`_pageWrap_1k5wp_229`,g={backdrop:e,"backdrop-in":`_backdrop-in_1k5wp_1`,dialog:t,"dialog-in":`_dialog-in_1k5wp_1`,dialogMulti:n,header:r,closeBtn:i,title:a,searchWrap:o,searchInput:s,body:c,sidebar:l,navList:u,navItem:d,navItemActive:f,navIcon:p,navLabel:m,pageWrap:h};exports.default=g;
+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;
 //# sourceMappingURL=PreferencesDialog.module.css.cjs.map

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

@@ -1,25 +1,24 @@
-//#region src/components/PreferencesDialog/PreferencesDialog.module.css
-var e = "_backdrop_1k5wp_3", t = "_dialog_1k5wp_30", n = "_dialogMulti_1k5wp_50", r = "_header_1k5wp_67", i = "_closeBtn_1k5wp_78", a = "_title_1k5wp_108", o = "_searchWrap_1k5wp_118", s = "_searchInput_1k5wp_122", c = "_body_1k5wp_151", l = "_sidebar_1k5wp_160", u = "_navList_1k5wp_168", d = "_navItem_1k5wp_177", f = "_navItemActive_1k5wp_198", p = "_navIcon_1k5wp_213", m = "_navLabel_1k5wp_219", h = "_pageWrap_1k5wp_229", g = {
-	backdrop: e,
+var e = {
+	backdrop: "_backdrop_1k5wp_3",
 	"backdrop-in": "_backdrop-in_1k5wp_1",
-	dialog: t,
+	dialog: "_dialog_1k5wp_30",
 	"dialog-in": "_dialog-in_1k5wp_1",
-	dialogMulti: n,
-	header: r,
-	closeBtn: i,
-	title: a,
-	searchWrap: o,
-	searchInput: s,
-	body: c,
-	sidebar: l,
-	navList: u,
-	navItem: d,
-	navItemActive: f,
-	navIcon: p,
-	navLabel: m,
-	pageWrap: h
+	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"
 };
 //#endregion
-export { g as default };
+export { e as default };
 
 //# sourceMappingURL=PreferencesDialog.module.css.js.map

package/dist/components/PreferencesDialog.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./PreferencesDialog/PreferencesDialog.cjs`);exports.PreferencesDialog=e.PreferencesDialog;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./PreferencesDialog/PreferencesDialog.cjs");exports.PreferencesDialog=e.PreferencesDialog;

package/dist/components/PreferencesGroup/PreferencesGroup.cjs

@@ -1,2 +1,2 @@
-const e=require(`./PreferencesGroup.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,description:r,headerSuffix:i,children:a,className:o,...s}){let c=n||r||i;return(0,t.jsxs)(`div`,{className:[e.default.group,o].filter(Boolean).join(` `),...s,children:[c&&(0,t.jsxs)(`div`,{className:e.default.header,children:[(0,t.jsxs)(`div`,{className:e.default.headerText,children:[n&&(0,t.jsx)(`span`,{className:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:e.default.description,children:r})]}),i&&(0,t.jsx)(`div`,{className:e.default.suffix,children:i})]}),(0,t.jsx)(`div`,{className:e.default.content,children:a})]})}exports.PreferencesGroup=n;
+const e=require("./PreferencesGroup.module.css.cjs");let t=require("react/jsx-runtime");var n=({title:n,description:r,headerSuffix:i,children:a,className:o,...s})=>{let c=n||r||i;return(0,t.jsxs)(`div`,{className:[e.default.group,o].filter(Boolean).join(` `),...s,children:[c&&(0,t.jsxs)(`div`,{className:e.default.header,children:[(0,t.jsxs)(`div`,{className:e.default.headerText,children:[n&&(0,t.jsx)(`span`,{className:e.default.title,children:n}),r&&(0,t.jsx)(`span`,{className:e.default.description,children:r})]}),i&&(0,t.jsx)(`div`,{className:e.default.suffix,children:i})]}),(0,t.jsx)(`div`,{className:e.default.content,children:a})]})};exports.PreferencesGroup=n;
 //# sourceMappingURL=PreferencesGroup.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesGroup.cjs","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesGroup.module.css';\n\nexport interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group heading. */\n  title?: string;\n  /** Optional description rendered below the title. */\n  description?: string;\n  /** Widget placed at the trailing edge of the title row (e.g. a reset Button). */\n  headerSuffix?: ReactNode;\n  /** `BoxedList` rows or any row-shaped content. */\n  children?: ReactNode;\n}\n\n/**\n * Titled section that wraps a `BoxedList` with an optional description.\n *\n * Use inside a `PreferencesPage` to group related settings under a named\n * heading. The group is purely a layout and labelling wrapper — it does not\n * render the `BoxedList` itself; pass it as `children`.\n *\n * Mirrors `AdwPreferencesGroup`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html\n */\nexport function PreferencesGroup({\n  title,\n  description,\n  headerSuffix,\n  children,\n  className,\n  ...props\n}: PreferencesGroupProps) {\n  const hasHeader = title || description || headerSuffix;\n\n  return (\n    <div className={[styles.group, className].filter(Boolean).join(' ')} {...props}>\n      {hasHeader && (\n        <div className={styles.header}>\n          <div className={styles.headerText}>\n            {title && <span className={styles.title}>{title}</span>}\n            {description && <span className={styles.description}>{description}</span>}\n          </div>\n          {headerSuffix && <div className={styles.suffix}>{headerSuffix}</div>}\n        </div>\n      )}\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"wFA0BA,SAAgB,EAAiB,CAC/B,QACA,cACA,eACA,WACA,YACA,GAAG,GACqB,CACxB,IAAM,EAAY,GAAS,GAAe,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,WAAzE,CACG,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBAAvB,CACG,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CACtD,IAAe,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAc,EAAmB,CAAA,CACrE,GACL,IAAgB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAS,EAAmB,CAAA,CAChE,IAER,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,WAAe,CAAA,CAC5C"}
+{"version":3,"file":"PreferencesGroup.cjs","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesGroup.module.css';\n\nexport interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group heading. */\n  title?: string;\n  /** Optional description rendered below the title. */\n  description?: string;\n  /** Widget placed at the trailing edge of the title row (e.g. a reset Button). */\n  headerSuffix?: ReactNode;\n  /** `BoxedList` rows or any row-shaped content. */\n  children?: ReactNode;\n}\n\n/**\n * Titled section that wraps a `BoxedList` with an optional description.\n *\n * Use inside a `PreferencesPage` to group related settings under a named\n * heading. The group is purely a layout and labelling wrapper — it does not\n * render the `BoxedList` itself; pass it as `children`.\n *\n * Mirrors `AdwPreferencesGroup`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html\n */\nexport const PreferencesGroup = ({\n  title,\n  description,\n  headerSuffix,\n  children,\n  className,\n  ...props\n}: PreferencesGroupProps) => {\n  const hasHeader = title || description || headerSuffix;\n\n  return (\n    <div className={[styles.group, className].filter(Boolean).join(' ')} {...props}>\n      {hasHeader && (\n        <div className={styles.header}>\n          <div className={styles.headerText}>\n            {title && <span className={styles.title}>{title}</span>}\n            {description && <span className={styles.description}>{description}</span>}\n          </div>\n          {headerSuffix && <div className={styles.suffix}>{headerSuffix}</div>}\n        </div>\n      )}\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":"wFA0BA,IAAa,GAAoB,CAC/B,QACA,cACA,eACA,WACA,YACA,GAAG,KACwB,CAC3B,IAAM,EAAY,GAAS,GAAe,EAE1C,OACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,GAAI,WAAzE,CACG,IACC,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBAAvB,CACG,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EACrD,IAAe,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAc,CAAkB,CAAA,CACrE,IACJ,IAAgB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAS,CAAkB,CAAA,CAChE,KAEP,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAU,UAAc,CAAA,CAC5C,GAET"}

package/dist/components/PreferencesGroup/PreferencesGroup.d.ts

@@ -20,4 +20,4 @@ export interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html
  */
-export declare function PreferencesGroup({ title, description, headerSuffix, children, className, ...props }: PreferencesGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const PreferencesGroup: ({ title, description, headerSuffix, children, className, ...props }: PreferencesGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PreferencesGroup/PreferencesGroup.js

@@ -1,7 +1,7 @@
 import e from "./PreferencesGroup.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/PreferencesGroup/PreferencesGroup.tsx
-function r({ title: r, description: i, headerSuffix: a, children: o, className: s, ...c }) {
+var r = ({ title: r, description: i, headerSuffix: a, children: o, className: s, ...c }) => {
 	let l = r || i || a;
 	return /* @__PURE__ */ n("div", {
 		className: [e.group, s].filter(Boolean).join(" "),
@@ -26,7 +26,7 @@ function r({ title: r, description: i, headerSuffix: a, children: o, className:
 			children: o
 		})]
 	});
-}
+};
 //#endregion
 export { r as PreferencesGroup };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesGroup.js","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesGroup.module.css';\n\nexport interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group heading. */\n  title?: string;\n  /** Optional description rendered below the title. */\n  description?: string;\n  /** Widget placed at the trailing edge of the title row (e.g. a reset Button). */\n  headerSuffix?: ReactNode;\n  /** `BoxedList` rows or any row-shaped content. */\n  children?: ReactNode;\n}\n\n/**\n * Titled section that wraps a `BoxedList` with an optional description.\n *\n * Use inside a `PreferencesPage` to group related settings under a named\n * heading. The group is purely a layout and labelling wrapper — it does not\n * render the `BoxedList` itself; pass it as `children`.\n *\n * Mirrors `AdwPreferencesGroup`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html\n */\nexport function PreferencesGroup({\n  title,\n  description,\n  headerSuffix,\n  children,\n  className,\n  ...props\n}: PreferencesGroupProps) {\n  const hasHeader = title || description || headerSuffix;\n\n  return (\n    <div className={[styles.group, className].filter(Boolean).join(' ')} {...props}>\n      {hasHeader && (\n        <div className={styles.header}>\n          <div className={styles.headerText}>\n            {title && <span className={styles.title}>{title}</span>}\n            {description && <span className={styles.description}>{description}</span>}\n          </div>\n          {headerSuffix && <div className={styles.suffix}>{headerSuffix}</div>}\n        </div>\n      )}\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAiB,EAC/B,UACA,gBACA,iBACA,aACA,cACA,GAAG,KACqB;CACxB,IAAM,IAAY,KAAS,KAAe;AAE1C,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAAzE,CACG,KACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,EACtD,KAAe,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAc;KAAmB,CAAA,CACrE;OACL,KAAgB,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAS;IAAmB,CAAA,CAChE;MAER,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU;GAAe,CAAA,CAC5C"}
+{"version":3,"file":"PreferencesGroup.js","names":[],"sources":["../../../src/components/PreferencesGroup/PreferencesGroup.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesGroup.module.css';\n\nexport interface PreferencesGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Group heading. */\n  title?: string;\n  /** Optional description rendered below the title. */\n  description?: string;\n  /** Widget placed at the trailing edge of the title row (e.g. a reset Button). */\n  headerSuffix?: ReactNode;\n  /** `BoxedList` rows or any row-shaped content. */\n  children?: ReactNode;\n}\n\n/**\n * Titled section that wraps a `BoxedList` with an optional description.\n *\n * Use inside a `PreferencesPage` to group related settings under a named\n * heading. The group is purely a layout and labelling wrapper — it does not\n * render the `BoxedList` itself; pass it as `children`.\n *\n * Mirrors `AdwPreferencesGroup`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesGroup.html\n */\nexport const PreferencesGroup = ({\n  title,\n  description,\n  headerSuffix,\n  children,\n  className,\n  ...props\n}: PreferencesGroupProps) => {\n  const hasHeader = title || description || headerSuffix;\n\n  return (\n    <div className={[styles.group, className].filter(Boolean).join(' ')} {...props}>\n      {hasHeader && (\n        <div className={styles.header}>\n          <div className={styles.headerText}>\n            {title && <span className={styles.title}>{title}</span>}\n            {description && <span className={styles.description}>{description}</span>}\n          </div>\n          {headerSuffix && <div className={styles.suffix}>{headerSuffix}</div>}\n        </div>\n      )}\n      <div className={styles.content}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AA0BA,IAAa,KAAoB,EAC/B,UACA,gBACA,iBACA,aACA,cACA,GAAG,QACwB;CAC3B,IAAM,IAAY,KAAS,KAAe;CAE1C,OACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAAG,GAAI;YAAzE,CACG,KACC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAvB,CACG,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;IAAY,CAAA,GACrD,KAAe,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAc;IAAkB,CAAA,CACrE;OACJ,KAAgB,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAS;GAAkB,CAAA,CAChE;MAEP,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAU;EAAc,CAAA,CAC5C;;AAET"}

package/dist/components/PreferencesGroup.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./PreferencesGroup/PreferencesGroup.cjs`);exports.PreferencesGroup=e.PreferencesGroup;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./PreferencesGroup/PreferencesGroup.cjs");exports.PreferencesGroup=e.PreferencesGroup;

package/dist/components/PreferencesPage/PreferencesPage.cjs

@@ -1,2 +1,2 @@
-const e=require(`./PreferencesPage.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({title:n,iconName:r,children:i,className:a,...o}){return(0,t.jsx)(`div`,{className:[e.default.page,a].filter(Boolean).join(` `),role:`tabpanel`,...o,children:(0,t.jsx)(`div`,{className:e.default.inner,children:i})})}exports.PreferencesPage=n;
+const e=require("./PreferencesPage.module.css.cjs");let t=require("react/jsx-runtime");var n=({title:n,iconName:r,children:i,className:a,...o})=>(0,t.jsx)(`div`,{className:[e.default.page,a].filter(Boolean).join(` `),role:`tabpanel`,...o,children:(0,t.jsx)(`div`,{className:e.default.inner,children:i})});exports.PreferencesPage=n;
 //# sourceMappingURL=PreferencesPage.cjs.map

package/dist/components/PreferencesPage/PreferencesPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesPage.cjs","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesPage.module.css';\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport function PreferencesPage({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) {\n  return (\n    <div className={[styles.page, className].filter(Boolean).join(' ')} role=\"tabpanel\" {...props}>\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"uFA6BA,SAAgB,EAAgB,CAC9B,MAAO,EACP,SAAU,EACV,WACA,YACA,GAAG,GACoB,CACvB,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,KAAK,WAAW,GAAI,YACtF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAQ,WAAe,CAAA,CAC1C,CAAA"}
+{"version":3,"file":"PreferencesPage.cjs","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesPage.module.css';\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport const PreferencesPage = ({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) => {\n  return (\n    <div className={[styles.page, className].filter(Boolean).join(' ')} role=\"tabpanel\" {...props}>\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":"uFA6BA,IAAa,GAAmB,CAC9B,MAAO,EACP,SAAU,EACV,WACA,YACA,GAAG,MAGD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,KAAK,WAAW,GAAI,YACtF,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,MAAQ,UAAc,CAAA,CAC1C,CAAA"}

package/dist/components/PreferencesPage/PreferencesPage.d.ts

@@ -23,4 +23,4 @@ export interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html
  */
-export declare function PreferencesPage({ title: _title, iconName: _iconName, children, className, ...props }: PreferencesPageProps): import("react/jsx-runtime").JSX.Element;
+export declare const PreferencesPage: ({ title: _title, iconName: _iconName, children, className, ...props }: PreferencesPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PreferencesPage/PreferencesPage.js

@@ -1,17 +1,15 @@
 import e from "./PreferencesPage.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/PreferencesPage/PreferencesPage.tsx
-function n({ title: n, iconName: r, children: i, className: a, ...o }) {
-	return /* @__PURE__ */ t("div", {
-		className: [e.page, a].filter(Boolean).join(" "),
-		role: "tabpanel",
-		...o,
-		children: /* @__PURE__ */ t("div", {
-			className: e.inner,
-			children: i
-		})
-	});
-}
+var n = ({ title: n, iconName: r, children: i, className: a, ...o }) => /* @__PURE__ */ t("div", {
+	className: [e.page, a].filter(Boolean).join(" "),
+	role: "tabpanel",
+	...o,
+	children: /* @__PURE__ */ t("div", {
+		className: e.inner,
+		children: i
+	})
+});
 //#endregion
 export { n as PreferencesPage };
 

package/dist/components/PreferencesPage/PreferencesPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreferencesPage.js","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesPage.module.css';\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport function PreferencesPage({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) {\n  return (\n    <div className={[styles.page, className].filter(Boolean).join(' ')} role=\"tabpanel\" {...props}>\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;AA6BA,SAAgB,EAAgB,EAC9B,OAAO,GACP,UAAU,GACV,aACA,cACA,GAAG,KACoB;AACvB,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,MAAK;EAAW,GAAI;YACtF,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ;GAAe,CAAA;EAC1C,CAAA"}
+{"version":3,"file":"PreferencesPage.js","names":[],"sources":["../../../src/components/PreferencesPage/PreferencesPage.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PreferencesPage.module.css';\n\nexport interface PreferencesPageProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Page title shown in the sidebar / tab of a `PreferencesDialog`.\n   * Required — used as the navigation label.\n   */\n  title: string;\n  /**\n   * Name of a symbolic icon displayed next to the page title in the sidebar.\n   * Pass a valid icon name from the system icon theme (e.g. `\"preferences-system-symbolic\"`).\n   */\n  iconName?: string;\n  /** `PreferencesGroup` sections. */\n  children?: ReactNode;\n}\n\n/**\n * Scrollable page composed of `PreferencesGroup` sections.\n *\n * Use as a child of `PreferencesDialog`. Each page appears as a labelled\n * navigation entry in the dialog sidebar.\n *\n * Mirrors `AdwPreferencesPage`.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.PreferencesPage.html\n */\nexport const PreferencesPage = ({\n  title: _title,\n  iconName: _iconName,\n  children,\n  className,\n  ...props\n}: PreferencesPageProps) => {\n  return (\n    <div className={[styles.page, className].filter(Boolean).join(' ')} role=\"tabpanel\" {...props}>\n      <div className={styles.inner}>{children}</div>\n    </div>\n  );\n};\n"],"mappings":";;;AA6BA,IAAa,KAAmB,EAC9B,OAAO,GACP,UAAU,GACV,aACA,cACA,GAAG,QAGD,kBAAC,OAAD;CAAK,WAAW,CAAC,EAAO,MAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CAAG,MAAK;CAAW,GAAI;WACtF,kBAAC,OAAD;EAAK,WAAW,EAAO;EAAQ;CAAc,CAAA;AAC1C,CAAA"}

package/dist/components/PreferencesPage.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./PreferencesPage/PreferencesPage.cjs`);exports.PreferencesPage=e.PreferencesPage;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./PreferencesPage/PreferencesPage.cjs");exports.PreferencesPage=e.PreferencesPage;

package/dist/components/ProgressBar/ProgressBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ProgressBar.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({value:n,variant:r=`accent`,className:i,"aria-label":a,"aria-labelledby":o,...s}){let c=n==null,l=c?void 0:Math.min(1,Math.max(0,n)),u=l===void 0?void 0:l*100;return(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":a,"aria-labelledby":o,"aria-valuenow":l===void 0?void 0:Math.round(u),"aria-valuemin":c?void 0:0,"aria-valuemax":c?void 0:100,className:[e.default.track,i].filter(Boolean).join(` `),...s,children:(0,t.jsx)(`div`,{className:[e.default.fill,e.default[r],c?e.default.indeterminate:null].filter(Boolean).join(` `),style:c?void 0:{width:`${u}%`}})})}exports.ProgressBar=n;
+const e=require("./ProgressBar.module.css.cjs");let t=require("react/jsx-runtime");var n=({value:n,variant:r=`accent`,className:i,"aria-label":a,"aria-labelledby":o,...s})=>{let c=n==null,l=c?void 0:Math.min(1,Math.max(0,n)),u=l===void 0?void 0:l*100;return(0,t.jsx)(`div`,{role:`progressbar`,"aria-label":a,"aria-labelledby":o,"aria-valuenow":l===void 0?void 0:Math.round(u),"aria-valuemin":c?void 0:0,"aria-valuemax":c?void 0:100,className:[e.default.track,i].filter(Boolean).join(` `),...s,children:(0,t.jsx)(`div`,{className:[e.default.fill,e.default[r],c?e.default.indeterminate:null].filter(Boolean).join(` `),style:c?void 0:{width:`${u}%`}})})};exports.ProgressBar=n;
 //# sourceMappingURL=ProgressBar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ProgressBar.module.css';\n\nexport type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  'aria-label'?: string;\n  /** Associates the bar with a visible element that labels it. */\n  'aria-labelledby'?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport function ProgressBar({\n  value,\n  variant = 'accent',\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div\n        className={[styles.fill, styles[variant], isIndeterminate ? styles.indeterminate : null]\n          .filter(Boolean)\n          .join(' ')}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":"mFAqCA,SAAgB,EAAY,CAC1B,QACA,UAAU,SACV,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,GACgB,CACnB,IAAM,EAAkB,GAAiC,KACnD,EAAU,EAAkB,IAAA,GAAY,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,EAAM,CAAC,CACvE,EAAU,IAAY,IAAA,GAA4B,IAAA,GAAhB,EAAU,IAElD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,cACL,aAAY,EACZ,kBAAiB,EACjB,gBAAe,IAAY,IAAA,GAAmC,IAAA,GAAvB,KAAK,MAAM,EAAS,CAC3D,gBAAe,EAAkB,IAAA,GAAY,EAC7C,gBAAe,EAAkB,IAAA,GAAY,IAC7C,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,GAAU,EAAkB,EAAA,QAAO,cAAgB,KAAK,CACrF,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAQ,EAA6C,IAAA,GAA3B,CAAE,MAAO,GAAG,EAAQ,GAAI,CAClD,CAAA,CACE,CAAA"}
+{"version":3,"file":"ProgressBar.cjs","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ProgressBar.module.css';\n\nexport type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  'aria-label'?: string;\n  /** Associates the bar with a visible element that labels it. */\n  'aria-labelledby'?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport const ProgressBar = ({\n  value,\n  variant = 'accent',\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div\n        className={[styles.fill, styles[variant], isIndeterminate ? styles.indeterminate : null]\n          .filter(Boolean)\n          .join(' ')}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n};\n"],"mappings":"mFAqCA,IAAa,GAAe,CAC1B,QACA,UAAU,SACV,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,KACmB,CACtB,IAAM,EAAkB,GAAiC,KACnD,EAAU,EAAkB,IAAA,GAAY,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,CAAK,CAAC,EACtE,EAAU,IAAY,IAAA,GAA4B,IAAA,GAAhB,EAAU,IAElD,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,cACL,aAAY,EACZ,kBAAiB,EACjB,gBAAe,IAAY,IAAA,GAAmC,IAAA,GAAvB,KAAK,MAAM,CAAQ,EAC1D,gBAAe,EAAkB,IAAA,GAAY,EAC7C,gBAAe,EAAkB,IAAA,GAAY,IAC7C,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,GAAI,YAEJ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,GAAU,EAAkB,EAAA,QAAO,cAAgB,IAAI,EACpF,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAQ,EAA6C,IAAA,GAA3B,CAAE,MAAO,GAAG,EAAQ,EAAG,CAClD,CAAA,CACE,CAAA,CAET"}

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -30,4 +30,4 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
  */
-export declare function ProgressBar({ value, variant, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ value, variant, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,7 +1,7 @@
 import e from "./ProgressBar.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/ProgressBar/ProgressBar.tsx
-function n({ value: n, variant: r = "accent", className: i, "aria-label": a, "aria-labelledby": o, ...s }) {
+var n = ({ value: n, variant: r = "accent", className: i, "aria-label": a, "aria-labelledby": o, ...s }) => {
 	let c = n == null, l = c ? void 0 : Math.min(1, Math.max(0, n)), u = l === void 0 ? void 0 : l * 100;
 	return /* @__PURE__ */ t("div", {
 		role: "progressbar",
@@ -21,7 +21,7 @@ function n({ value: n, variant: r = "accent", className: i, "aria-label": a, "ar
 			style: c ? void 0 : { width: `${u}%` }
 		})
 	});
-}
+};
 //#endregion
 export { n as ProgressBar };
 

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

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ProgressBar.module.css';\n\nexport type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  'aria-label'?: string;\n  /** Associates the bar with a visible element that labels it. */\n  'aria-labelledby'?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport function ProgressBar({\n  value,\n  variant = 'accent',\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div\n        className={[styles.fill, styles[variant], isIndeterminate ? styles.indeterminate : null]\n          .filter(Boolean)\n          .join(' ')}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;AAqCA,SAAgB,EAAY,EAC1B,UACA,aAAU,UACV,cACA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACgB;CACnB,IAAM,IAAkB,KAAiC,MACnD,IAAU,IAAkB,KAAA,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,EAAM,CAAC,EACvE,IAAU,MAAY,KAAA,IAA4B,KAAA,IAAhB,IAAU;AAElD,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAY,KAAA,IAAmC,KAAA,IAAvB,KAAK,MAAM,EAAS;EAC3D,iBAAe,IAAkB,KAAA,IAAY;EAC7C,iBAAe,IAAkB,KAAA,IAAY;EAC7C,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW;IAAC,EAAO;IAAM,EAAO;IAAU,IAAkB,EAAO,gBAAgB;IAAK,CACrF,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,OAAQ,IAA6C,KAAA,IAA3B,EAAE,OAAO,GAAG,EAAQ,IAAI;GAClD,CAAA;EACE,CAAA"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ProgressBar.module.css';\n\nexport type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';\n\nexport interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).\n   * Omit or set to `undefined` for the indeterminate (pulsing) state.\n   */\n  value?: number;\n  /**\n   * Fill color of the progress indicator.\n   * - `\"accent\"` (default) — blue, general-purpose progress.\n   * - `\"success\"` — green, completed or healthy state.\n   * - `\"warning\"` — yellow, approaching a limit.\n   * - `\"error\"`   — red, failed or critical state.\n   */\n  variant?: ProgressBarVariant;\n  /** Accessible label describing what is loading. */\n  'aria-label'?: string;\n  /** Associates the bar with a visible element that labels it. */\n  'aria-labelledby'?: string;\n}\n\n/**\n * Determinate and indeterminate progress bar following the Adwaita style.\n *\n * - **Determinate** — pass `value` (0–1) to show exact progress.\n * - **Indeterminate** — omit `value` for an animated pulse when duration is unknown.\n *\n * Renders as `role=\"progressbar\"` with `aria-valuenow` / `aria-valuemin` /\n * `aria-valuemax` for screen readers.\n *\n * @see https://developer.gnome.org/hig/patterns/feedback/progress.html\n */\nexport const ProgressBar = ({\n  value,\n  variant = 'accent',\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: ProgressBarProps) => {\n  const isIndeterminate = value === undefined || value === null;\n  const clamped = isIndeterminate ? undefined : Math.min(1, Math.max(0, value));\n  const percent = clamped !== undefined ? clamped * 100 : undefined;\n\n  return (\n    <div\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-valuenow={clamped !== undefined ? Math.round(percent!) : undefined}\n      aria-valuemin={isIndeterminate ? undefined : 0}\n      aria-valuemax={isIndeterminate ? undefined : 100}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div\n        className={[styles.fill, styles[variant], isIndeterminate ? styles.indeterminate : null]\n          .filter(Boolean)\n          .join(' ')}\n        style={!isIndeterminate ? { width: `${percent}%` } : undefined}\n      />\n    </div>\n  );\n};\n"],"mappings":";;;AAqCA,IAAa,KAAe,EAC1B,UACA,aAAU,UACV,cACA,cAAc,GACd,mBAAmB,GACnB,GAAG,QACmB;CACtB,IAAM,IAAkB,KAAiC,MACnD,IAAU,IAAkB,KAAA,IAAY,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAK,CAAC,GACtE,IAAU,MAAY,KAAA,IAA4B,KAAA,IAAhB,IAAU;CAElD,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAY,KAAA,IAAmC,KAAA,IAAvB,KAAK,MAAM,CAAQ;EAC1D,iBAAe,IAAkB,KAAA,IAAY;EAC7C,iBAAe,IAAkB,KAAA,IAAY;EAC7C,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,GAAI;YAEJ,kBAAC,OAAD;GACE,WAAW;IAAC,EAAO;IAAM,EAAO;IAAU,IAAkB,EAAO,gBAAgB;GAAI,EACpF,OAAO,OAAO,EACd,KAAK,GAAG;GACX,OAAQ,IAA6C,KAAA,IAA3B,EAAE,OAAO,GAAG,EAAQ,GAAG;EAClD,CAAA;CACE,CAAA;AAET"}

package/dist/components/ProgressBar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ProgressBar/ProgressBar.cjs`);exports.ProgressBar=e.ProgressBar;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ProgressBar/ProgressBar.cjs");exports.ProgressBar=e.ProgressBar;

package/dist/components/RadioButton/RadioButton.cjs

@@ -1,2 +1,2 @@
-const e=require(`./RadioButton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({className:n,...r}){return(0,t.jsx)(`input`,{type:`radio`,className:[e.default.radio,n].filter(Boolean).join(` `),...r})}exports.RadioButton=n;
+const e=require("./RadioButton.module.css.cjs");let t=require("react/jsx-runtime");var n=({className:n,...r})=>(0,t.jsx)(`input`,{type:`radio`,className:[e.default.radio,n].filter(Boolean).join(` `),...r});exports.RadioButton=n;
 //# sourceMappingURL=RadioButton.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport function RadioButton({ className, ...props }: RadioButtonProps) {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n"],"mappings":"mFAkBA,SAAgB,EAAY,CAAE,YAAW,GAAG,GAA2B,CACrE,OACE,EAAA,EAAA,KAAC,QAAD,CACE,KAAK,QACL,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,EACJ,CAAA"}
+{"version":3,"file":"RadioButton.cjs","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport const RadioButton = ({ className, ...props }: RadioButtonProps) => {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n};\n"],"mappings":"mFAkBA,IAAa,GAAe,CAAE,YAAW,GAAG,MAExC,EAAA,EAAA,KAAC,QAAD,CACE,KAAK,QACL,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,GAAI,CACL,CAAA"}

package/dist/components/RadioButton/RadioButton.d.ts

@@ -12,4 +12,4 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
  *
  * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html
  */
-export declare function RadioButton({ className, ...props }: RadioButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: ({ className, ...props }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/RadioButton/RadioButton.js

@@ -1,13 +1,11 @@
 import e from "./RadioButton.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/RadioButton/RadioButton.tsx
-function n({ className: n, ...r }) {
-	return /* @__PURE__ */ t("input", {
-		type: "radio",
-		className: [e.radio, n].filter(Boolean).join(" "),
-		...r
-	});
-}
+var n = ({ className: n, ...r }) => /* @__PURE__ */ t("input", {
+	type: "radio",
+	className: [e.radio, n].filter(Boolean).join(" "),
+	...r
+});
 //#endregion
 export { n as RadioButton };
 

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport function RadioButton({ className, ...props }: RadioButtonProps) {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA2B;AACrE,QACE,kBAAC,SAAD;EACE,MAAK;EACL,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport const RadioButton = ({ className, ...props }: RadioButtonProps) => {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAkBA,IAAa,KAAe,EAAE,cAAW,GAAG,QAExC,kBAAC,SAAD;CACE,MAAK;CACL,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CAC7D,GAAI;AACL,CAAA"}

package/dist/components/RadioButton.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./RadioButton/RadioButton.cjs`);exports.RadioButton=e.RadioButton;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./RadioButton/RadioButton.cjs");exports.RadioButton=e.RadioButton;

package/dist/components/SearchBar/SearchBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../Spinner/Spinner.cjs`),n=require(`./SearchBar.module.css.cjs`);let r=require(`react`),i=require(`react-dom`),a=require(`react/jsx-runtime`),o=require(`@gnome-ui/icons`);function s({open:s,onClose:c,onClear:l,children:u,value:d,onChange:f,placeholder:p=`Search…`,disabled:m,inline:h=!1,className:g,suggestions:_,onSuggestionSelect:v,loadingSuggestions:y=!1,renderSuggestion:b,suggestionsLabel:x=`Suggestions`,...S}){let C=(0,r.useRef)(null),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=(0,r.useId)(),D=(0,r.useId)(),[O,k]=(0,r.useState)(-1),[A,j]=(0,r.useState)(null),M=(_?.length??0)>0,N=s&&(y||M);(0,r.useEffect)(()=>{k(-1)},[]),(0,r.useEffect)(()=>{if(s){let e=requestAnimationFrame(()=>C.current?.focus());return()=>cancelAnimationFrame(e)}},[s]),(0,r.useEffect)(()=>{if(!N||!w.current){j(null);return}function e(){if(!w.current)return;let e=w.current.getBoundingClientRect();j({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[N]),(0,r.useEffect)(()=>{O<0||!T.current||T.current.children[O]?.scrollIntoView({block:`nearest`})},[O]);let P=(0,r.useCallback)(e=>{if(N&&M&&_){if(e.key===`ArrowDown`){e.preventDefault(),k(e=>Math.min(e+1,_.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),k(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&O>=0){e.preventDefault(),v?.(_[O]);return}}e.key===`Escape`&&(e.preventDefault(),c?.()),S.onKeyDown?.(e)},[c,S,N,M,_,O,v]),F=d!==void 0&&d!==``,I=O>=0&&_?.[O]?`${D}-${_[O].id}`:void 0,L=N&&A?(0,i.createPortal)((0,a.jsxs)(`ul`,{ref:T,"aria-label":x,id:E,className:n.default.suggestionsPanel,style:{top:A.top,left:A.left,width:A.width},onMouseDown:e=>e.preventDefault(),children:[y&&(0,a.jsx)(`li`,{role:`presentation`,className:n.default.suggestionsLoading,children:(0,a.jsx)(t.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!y&&_?.map((e,t)=>(0,a.jsx)(`li`,{id:`${D}-${e.id}`,"aria-selected":t===O,className:[n.default.suggestionItem,t===O?n.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>k(t),onMouseLeave:()=>k(-1),onClick:()=>v?.(e),children:b?b(e):e.label},e.id))]}),document.body):null;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{ref:w,className:[n.default.wrapper,s?n.default.open:null,g].filter(Boolean).join(` `),"aria-hidden":!s,children:[(0,a.jsxs)(`div`,{className:[n.default.bar,h?n.default.inline:null,m?n.default.disabled:null].filter(Boolean).join(` `),children:[(0,a.jsx)(`span`,{className:n.default.searchIcon,"aria-hidden":!0,children:(0,a.jsx)(e.Icon,{icon:o.Search,size:`md`})}),(0,a.jsx)(`input`,{ref:C,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":N,"aria-controls":N?E:void 0,"aria-activedescendant":I,value:d,onChange:f,placeholder:p,disabled:m,tabIndex:s?void 0:-1,className:n.default.input,onKeyDown:P,...S}),F&&(0,a.jsx)(`button`,{type:`button`,className:n.default.clearButton,"aria-label":`Clear search`,tabIndex:s?void 0:-1,disabled:m,onClick:()=>{l?.(),C.current?.focus()},children:(0,a.jsx)(e.Icon,{icon:o.Close,size:`md`})})]}),u&&(0,a.jsx)(`div`,{className:n.default.filterRow,children:u})]}),typeof document<`u`&&L]})}exports.SearchBar=s;
+const e=require("../Icon/Icon.cjs"),t=require("../Spinner/Spinner.cjs"),n=require("./SearchBar.module.css.cjs");let r=require("react"),i=require("react-dom"),a=require("react/jsx-runtime"),o=require("@gnome-ui/icons");var s=({open:s,onClose:c,onClear:l,children:u,value:d,onChange:f,placeholder:p=`Search…`,disabled:m,inline:h=!1,className:g,suggestions:_,onSuggestionSelect:v,loadingSuggestions:y=!1,renderSuggestion:b,suggestionsLabel:x=`Suggestions`,...S})=>{let C=(0,r.useRef)(null),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=(0,r.useId)(),D=(0,r.useId)(),[O,k]=(0,r.useState)(-1),[A,j]=(0,r.useState)(null),M=(_?.length??0)>0,N=s&&(y||M);(0,r.useEffect)(()=>{k(-1)},[]),(0,r.useEffect)(()=>{if(s){let e=requestAnimationFrame(()=>C.current?.focus());return()=>cancelAnimationFrame(e)}},[s]),(0,r.useEffect)(()=>{if(!N||!w.current){j(null);return}function e(){if(!w.current)return;let e=w.current.getBoundingClientRect();j({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[N]),(0,r.useEffect)(()=>{O<0||!T.current||T.current.children[O]?.scrollIntoView({block:`nearest`})},[O]);let P=(0,r.useCallback)(e=>{if(N&&M&&_){if(e.key===`ArrowDown`){e.preventDefault(),k(e=>Math.min(e+1,_.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),k(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&O>=0){e.preventDefault(),v?.(_[O]);return}}e.key===`Escape`&&(e.preventDefault(),c?.()),S.onKeyDown?.(e)},[c,S,N,M,_,O,v]),F=d!==void 0&&d!==``,I=O>=0&&_?.[O]?`${D}-${_[O].id}`:void 0,L=N&&A?(0,i.createPortal)((0,a.jsxs)(`ul`,{ref:T,"aria-label":x,id:E,className:n.default.suggestionsPanel,style:{top:A.top,left:A.left,width:A.width},onMouseDown:e=>e.preventDefault(),children:[y&&(0,a.jsx)(`li`,{role:`presentation`,className:n.default.suggestionsLoading,children:(0,a.jsx)(t.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!y&&_?.map((e,t)=>(0,a.jsx)(`li`,{id:`${D}-${e.id}`,"aria-selected":t===O,className:[n.default.suggestionItem,t===O?n.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>k(t),onMouseLeave:()=>k(-1),onClick:()=>v?.(e),children:b?b(e):e.label},e.id))]}),document.body):null;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{ref:w,className:[n.default.wrapper,s?n.default.open:null,g].filter(Boolean).join(` `),"aria-hidden":!s,children:[(0,a.jsxs)(`div`,{className:[n.default.bar,h?n.default.inline:null,m?n.default.disabled:null].filter(Boolean).join(` `),children:[(0,a.jsx)(`span`,{className:n.default.searchIcon,"aria-hidden":!0,children:(0,a.jsx)(e.Icon,{icon:o.Search,size:`md`})}),(0,a.jsx)(`input`,{ref:C,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":N,"aria-controls":N?E:void 0,"aria-activedescendant":I,value:d,onChange:f,placeholder:p,disabled:m,tabIndex:s?void 0:-1,className:n.default.input,onKeyDown:P,...S}),F&&(0,a.jsx)(`button`,{type:`button`,className:n.default.clearButton,"aria-label":`Clear search`,tabIndex:s?void 0:-1,disabled:m,onClick:()=>{l?.(),C.current?.focus()},children:(0,a.jsx)(e.Icon,{icon:o.Close,size:`md`})})]}),u&&(0,a.jsx)(`div`,{className:n.default.filterRow,children:u})]}),typeof document<`u`&&L]})};exports.SearchBar=s;
 //# sourceMappingURL=SearchBar.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport const SearchBar = ({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SearchBar/SearchBar.d.ts

@@ -47,4 +47,4 @@ export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElemen
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html
  */
-export declare function SearchBar({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const SearchBar: ({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar/SearchBar.js

@@ -6,7 +6,7 @@ import { createPortal as c } from "react-dom";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { Close as f, Search as p } from "@gnome-ui/icons";
 //#region src/components/SearchBar/SearchBar.tsx
-function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) {
+var m = ({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) => {
 	let A = o(null), j = o(null), M = o(null), N = a(), P = a(), [F, I] = s(-1), [L, R] = s(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
 	i(() => {
 		I(-1);
@@ -150,7 +150,7 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 			children: _
 		})]
 	}), typeof document < "u" && W] });
-}
+};
 //#endregion
 export { m as SearchBar };