@gnome-ui/react 1.44.0 → 1.45.1

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.module.css.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PasswordEntryRow.module.css.cjs","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,4 +1,4 @@
-var e = { revealButton: "_revealButton_1j8z0_3" };
+var e = { revealButton: "_revealButton_1s4rs_3" };
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordEntryRow.module.css.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PasswordEntryRow.module.css.js","names":[],"sources":["../../../src/components/PasswordEntryRow/PasswordEntryRow.module.css"],"sourcesContent":["/* ─── Reveal button ─────────────────────────────────────────────────────────── */\n\n.revealButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  border-radius: var(--gnome-radius-small, 6px);\n  background: transparent;\n  cursor: pointer;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  flex-shrink: 0;\n\n  transition:\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default),\n    background var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.revealButton:hover {\n  opacity: 1;\n  background: var(--gnome-button-bg-color, rgba(0, 0, 0, 0.07));\n}\n\n.revealButton:active {\n  background: var(--gnome-button-active-bg-color, rgba(0, 0, 0, 0.14));\n}\n\n.revealButton:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n  opacity: 1;\n}\n\n.revealButton:disabled {\n  pointer-events: none;\n  opacity: var(--gnome-opacity-disabled, 0.5);\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .revealButton {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { PasswordEntryRow } from './PasswordEntryRow';
 export type { PasswordEntryRowProps } from './PasswordEntryRow';
+export { PasswordEntryRow } from './PasswordEntryRow';

package/dist/components/PathBar/PathBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PathBar.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PathBar.module.css\";\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span\n                  className={styles.current}\n                  aria-current=\"page\"\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"+EAmCA,SAAgB,EAAQ,CAAE,WAAU,aAAY,YAAW,GAAG,GAAuB,CACnF,OACE,EAAA,EAAA,KAAC,MAAD,CACE,aAAW,aACX,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAChE,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KAAM,aAAW,yBACpC,EAAS,KAAK,EAAS,IAAU,CAChC,IAAM,EAAY,IAAU,EAAS,OAAS,EAC9C,OACE,EAAA,EAAA,MAAC,KAAD,CAAuB,UAAW,EAAA,QAAO,cAAzC,CAEG,EAAQ,IACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAW,cAAY,iBAC7C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,UAAU,kBACxD,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CAGR,GAEC,EAAA,EAAA,MAAC,OAAD,CACE,UAAW,EAAA,QAAO,QAClB,eAAa,gBAFf,CAIG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBAAQ,EAAQ,KAAY,CAAA,CAEvE,EAAQ,MACJ,IAGP,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,IAAa,EAAQ,KAAM,EAAM,UAHlD,CAKG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBAAQ,EAAQ,KAAY,CAAA,CAEvE,EAAQ,MACF,GAER,EAzCI,EAAQ,KAyCZ,EAEP,CACC,CAAA,CACD,CAAA"}
+{"version":3,"file":"PathBar.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PathBar.module.css';\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span className={styles.current} aria-current=\"page\">\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {segment.icon}\n                    </span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {segment.icon}\n                    </span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":"+EAoCA,SAAgB,EAAQ,CAAE,WAAU,aAAY,YAAW,GAAG,GAAuB,CACnF,OACE,EAAA,EAAA,KAAC,MAAD,CACE,aAAW,aACX,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAChE,GAAI,YAEJ,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KAAM,aAAW,yBACpC,EAAS,KAAK,EAAS,IAAU,CAChC,IAAM,EAAY,IAAU,EAAS,OAAS,EAE9C,OACE,EAAA,EAAA,MAAC,KAAD,CAAuB,UAAW,EAAA,QAAO,cAAzC,CAEG,EAAQ,IACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,UAAW,cAAY,iBAC7C,EAAA,EAAA,KAAC,MAAD,CAAK,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,UAAU,kBACxD,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CAGR,GAEC,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAS,eAAa,gBAA9C,CACG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,EAAQ,KACJ,CAAA,CAER,EAAQ,MACJ,IAGP,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAe,IAAa,EAAQ,KAAM,EAAM,UAHlD,CAKG,EAAQ,OACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBACvC,EAAQ,KACJ,CAAA,CAER,EAAQ,MACF,GAER,EA1CI,EAAQ,KA0CZ,EAEP,CACC,CAAA,CACD,CAAA"}

package/dist/components/PathBar/PathBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathBar.js","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./PathBar.module.css\";\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(\" \")}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span\n                  className={styles.current}\n                  aria-current=\"page\"\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">{segment.icon}</span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;AAmCA,SAAgB,EAAQ,EAAE,aAAU,eAAY,cAAW,GAAG,KAAuB;AACnF,QACE,kBAAC,OAAD;EACE,cAAW;EACX,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAM,cAAW;aACpC,EAAS,KAAK,GAAS,MAAU;IAChC,IAAM,IAAY,MAAU,EAAS,SAAS;AAC9C,WACE,kBAAC,MAAD;KAAuB,WAAW,EAAO;eAAzC,CAEG,IAAQ,KACP,kBAAC,QAAD;MAAM,WAAW,EAAO;MAAW,eAAY;gBAC7C,kBAAC,OAAD;OAAK,OAAM;OAAK,QAAO;OAAK,SAAQ;OAAY,WAAU;iBACxD,kBAAC,QAAD;QACE,GAAE;QACF,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QACd,gBAAe;QACf,CAAA;OACE,CAAA;MACD,CAAA,EAGR,IAEC,kBAAC,QAAD;MACE,WAAW,EAAO;MAClB,gBAAa;gBAFf,CAIG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBAAQ,EAAQ;OAAY,CAAA,EAEvE,EAAQ,MACJ;UAGP,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,IAAa,EAAQ,MAAM,EAAM;gBAHlD,CAKG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBAAQ,EAAQ;OAAY,CAAA,EAEvE,EAAQ,MACF;QAER;OAzCI,EAAQ,KAyCZ;KAEP;GACC,CAAA;EACD,CAAA"}
+{"version":3,"file":"PathBar.js","names":[],"sources":["../../../src/components/PathBar/PathBar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './PathBar.module.css';\n\nexport interface PathBarSegment {\n  /** Display label for this path segment. */\n  label: string;\n  /** Opaque path value passed to `onNavigate` when the segment is clicked. */\n  path: string;\n  /** Optional icon placed before the label (e.g. a folder icon). */\n  icon?: ReactNode;\n}\n\nexport interface PathBarProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Ordered path segments from root to current location.\n   * The last segment is the current folder and is rendered non-interactive.\n   */\n  segments: PathBarSegment[];\n  /**\n   * Called when the user clicks on a non-current segment.\n   * Receives the `path` and zero-based `index` of the clicked segment.\n   */\n  onNavigate?: (path: string, index: number) => void;\n}\n\n/**\n * Breadcrumb path bar for navigating a hierarchical location.\n *\n * Mirrors the location bar in GNOME Files (Nautilus). Segments are separated\n * by chevron dividers. All segments except the last are interactive — clicking\n * them calls `onNavigate`. The last segment represents the current location and\n * is rendered as a static label.\n *\n * @see https://developer.gnome.org/hig/patterns/nav/search.html\n */\nexport function PathBar({ segments, onNavigate, className, ...props }: PathBarProps) {\n  return (\n    <nav\n      aria-label=\"Breadcrumb\"\n      className={[styles.pathBar, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <ol className={styles.list} aria-label=\"Path segments\">\n        {segments.map((segment, index) => {\n          const isCurrent = index === segments.length - 1;\n\n          return (\n            <li key={segment.path} className={styles.item}>\n              {/* Separator chevron (not before the first segment) */}\n              {index > 0 && (\n                <span className={styles.separator} aria-hidden=\"true\">\n                  <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" focusable=\"false\">\n                    <path\n                      d=\"M4 2l4 4-4 4\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      strokeWidth=\"1.5\"\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                    />\n                  </svg>\n                </span>\n              )}\n\n              {isCurrent ? (\n                /* Current folder — non-interactive */\n                <span className={styles.current} aria-current=\"page\">\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {segment.icon}\n                    </span>\n                  )}\n                  {segment.label}\n                </span>\n              ) : (\n                /* Ancestor folder — clickable */\n                <button\n                  type=\"button\"\n                  className={styles.segment}\n                  onClick={() => onNavigate?.(segment.path, index)}\n                >\n                  {segment.icon && (\n                    <span className={styles.icon} aria-hidden=\"true\">\n                      {segment.icon}\n                    </span>\n                  )}\n                  {segment.label}\n                </button>\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n"],"mappings":";;;AAoCA,SAAgB,EAAQ,EAAE,aAAU,eAAY,cAAW,GAAG,KAAuB;AACnF,QACE,kBAAC,OAAD;EACE,cAAW;EACX,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAChE,GAAI;YAEJ,kBAAC,MAAD;GAAI,WAAW,EAAO;GAAM,cAAW;aACpC,EAAS,KAAK,GAAS,MAAU;IAChC,IAAM,IAAY,MAAU,EAAS,SAAS;AAE9C,WACE,kBAAC,MAAD;KAAuB,WAAW,EAAO;eAAzC,CAEG,IAAQ,KACP,kBAAC,QAAD;MAAM,WAAW,EAAO;MAAW,eAAY;gBAC7C,kBAAC,OAAD;OAAK,OAAM;OAAK,QAAO;OAAK,SAAQ;OAAY,WAAU;iBACxD,kBAAC,QAAD;QACE,GAAE;QACF,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QACd,gBAAe;QACf,CAAA;OACE,CAAA;MACD,CAAA,EAGR,IAEC,kBAAC,QAAD;MAAM,WAAW,EAAO;MAAS,gBAAa;gBAA9C,CACG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBACvC,EAAQ;OACJ,CAAA,EAER,EAAQ,MACJ;UAGP,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,IAAa,EAAQ,MAAM,EAAM;gBAHlD,CAKG,EAAQ,QACP,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;iBACvC,EAAQ;OACJ,CAAA,EAER,EAAQ,MACF;QAER;OA1CI,EAAQ,KA0CZ;KAEP;GACC,CAAA;EACD,CAAA"}

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

@@ -1,2 +1,2 @@
-var e={pathBar:`_pathBar_1n4ev_3`,list:`_list_1n4ev_12`,item:`_item_1n4ev_25`,separator:`_separator_1n4ev_33`,segment:`_segment_1n4ev_44`,current:`_current_1n4ev_81`,icon:`_icon_1n4ev_98`};exports.default=e;
+var e={pathBar:`_pathBar_12z8k_3`,list:`_list_12z8k_12`,item:`_item_12z8k_25`,separator:`_separator_12z8k_33`,segment:`_segment_12z8k_44`,current:`_current_12z8k_81`,icon:`_icon_12z8k_98`};exports.default=e;
 //# sourceMappingURL=PathBar.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PathBar.module.css.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PathBar.module.css.cjs","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	pathBar: "_pathBar_1n4ev_3",
-	list: "_list_1n4ev_12",
-	item: "_item_1n4ev_25",
-	separator: "_separator_1n4ev_33",
-	segment: "_segment_1n4ev_44",
-	current: "_current_1n4ev_81",
-	icon: "_icon_1n4ev_98"
+	pathBar: "_pathBar_12z8k_3",
+	list: "_list_12z8k_12",
+	item: "_item_12z8k_25",
+	separator: "_separator_12z8k_33",
+	segment: "_segment_12z8k_44",
+	current: "_current_12z8k_81",
+	icon: "_icon_12z8k_98"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"PathBar.module.css.js","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"PathBar.module.css.js","names":[],"sources":["../../../src/components/PathBar/PathBar.module.css"],"sourcesContent":["/* ─── Root ────────────────────────────────────────────────────────────────── */\n\n.pathBar {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  font-family: var(--gnome-font-family, sans-serif);\n}\n\n/* ─── List ────────────────────────────────────────────────────────────────── */\n\n.list {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 0;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  min-width: 0;\n}\n\n/* ─── Item ────────────────────────────────────────────────────────────────── */\n\n.item {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n/* ─── Separator ───────────────────────────────────────────────────────────── */\n\n.separator {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.35));\n  opacity: 0.5;\n  margin: 0 1px;\n}\n\n/* ─── Ancestor segment (button) ───────────────────────────────────────────── */\n\n.segment {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  border-radius: var(--gnome-radius-sm, 6px);\n  border: none;\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  cursor: pointer;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 160px;\n  transition: background-color var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n}\n\n.segment:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.06));\n}\n\n.segment:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.segment:focus-visible {\n  outline: none;\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Current segment (non-interactive) ──────────────────────────────────── */\n\n.current {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 2px 6px;\n  font-family: inherit;\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 200px;\n}\n\n/* ─── Icon ────────────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n/* ─── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .segment {\n    transition: none;\n  }\n}\n\n/* ─── Dark mode ───────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .segment:hover {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .segment:active {\n    background-color: rgba(255, 255, 255, 0.14);\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { PathBar } from './PathBar';
 export type { PathBarProps, PathBarSegment } from './PathBar';
+export { PathBar } from './PathBar';

package/dist/components/Popover/Popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.cjs","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useId,\n  useEffect,\n  useCallback,\n  cloneElement,\n  type ReactElement,\n  type HTMLAttributes,\n  type ReactNode,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n  /**\n   * The rich content rendered inside the popover panel.\n   * Can include interactive elements (buttons, links, forms).\n   */\n  content: ReactNode;\n  /**\n   * Preferred placement relative to the trigger.\n   * Flips automatically when there is not enough viewport space.\n   * Defaults to `\"bottom\"`.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Whether the popover is open (controlled mode).\n   * Omit to use uncontrolled mode where the trigger toggles it.\n   */\n  open?: boolean;\n  /**\n   * Called when the popover requests to be closed\n   * (Escape key, outside click, or trigger click while open).\n   */\n  onClose?: () => void;\n  /**\n   * Called when open state should change (controlled mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element. Must be a single React element that can\n   * receive `ref` and click/keyboard event props.\n   */\n  children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n  top: number;\n  left: number;\n  placement: PopoverPlacement;\n  /** Arrow center offset in px from the near edge of the panel.\n   *  Horizontal (left) for top/bottom; vertical (top) for left/right.\n   *  Undefined means use the default 50% CSS. */\n  arrowOffset?: number;\n}\n\nconst GAP = 8;\nconst MARGIN = 10;\nconst ARROW_HALF = 6; // half of the 12 px arrow\n\nfunction computePosition(\n  trigger: DOMRect,\n  popover: DOMRect,\n  preferred: PopoverPlacement\n): Position {\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  const order: PopoverPlacement[] = [\n    preferred,\n    preferred === \"top\"    ? \"bottom\"\n    : preferred === \"bottom\" ? \"top\"\n    : preferred === \"left\"   ? \"right\"\n    : \"left\",\n    \"bottom\", \"top\", \"left\", \"right\",\n  ];\n\n  // De-duplicate while preserving order\n  const candidates = [...new Set(order)];\n\n  function calcRaw(p: PopoverPlacement): { top: number; left: number } {\n    if (p === \"bottom\") return {\n      top:  trigger.bottom + GAP,\n      left: trigger.left + trigger.width / 2 - popover.width / 2,\n    };\n    if (p === \"top\") return {\n      top:  trigger.top - popover.height - GAP,\n      left: trigger.left + trigger.width / 2 - popover.width / 2,\n    };\n    if (p === \"left\") return {\n      top:  trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.left - popover.width - GAP,\n    };\n    return {\n      top:  trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.right + GAP,\n    };\n  }\n\n  // First pass: find a placement that fits both axes perfectly.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsH = left >= MARGIN && left + popover.width  <= vw - MARGIN;\n    const fitsV = top  >= MARGIN && top  + popover.height <= vh - MARGIN;\n    if (fitsH && fitsV) {\n      // Always use pixel arrowOffset (never rely on CSS left:50%) so the arrow\n      // points exactly at the trigger center regardless of sub-pixel rounding.\n      const arrowOffset =\n        p === \"top\" || p === \"bottom\"\n          ? trigger.left + trigger.width  / 2 - left\n          : trigger.top  + trigger.height / 2 - top;\n      return { top, left, placement: p, arrowOffset };\n    }\n  }\n\n  // Second pass: fits the primary axis; clamp the secondary axis and\n  // shift the arrow so it still points at the trigger center.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsV = top  >= MARGIN && top  + popover.height <= vh - MARGIN;\n    const fitsH = left >= MARGIN && left + popover.width  <= vw - MARGIN;\n\n    if ((p === \"top\" || p === \"bottom\") && fitsV) {\n      const clampedLeft = Math.max(MARGIN, Math.min(left, vw - popover.width - MARGIN));\n      const rawOffset = trigger.left + trigger.width / 2 - clampedLeft;\n      return {\n        top, left: clampedLeft, placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.width - ARROW_HALF - 4)),\n      };\n    }\n\n    if ((p === \"left\" || p === \"right\") && fitsH) {\n      const clampedTop = Math.max(MARGIN, Math.min(top, vh - popover.height - MARGIN));\n      const rawOffset = trigger.top + trigger.height / 2 - clampedTop;\n      return {\n        top: clampedTop, left, placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.height - ARROW_HALF - 4)),\n      };\n    }\n  }\n\n  // Fallback: clamp bottom placement and shift arrow to match trigger.\n  const fbTop  = trigger.bottom + GAP;\n  const fbLeft = trigger.left + trigger.width / 2 - popover.width / 2;\n  const clampedTop  = Math.max(MARGIN, Math.min(fbTop,  vh - popover.height - MARGIN));\n  const clampedLeft = Math.max(MARGIN, Math.min(fbLeft, vw - popover.width  - MARGIN));\n  const rawArrowOffset = trigger.left + trigger.width / 2 - clampedLeft;\n  return {\n    top: clampedTop,\n    left: clampedLeft,\n    placement: \"bottom\",\n    arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawArrowOffset, popover.width - ARROW_HALF - 4)),\n  };\n}\n\n/**\n * Floating panel anchored to a trigger element.\n *\n * Unlike `Tooltip`, a Popover can contain rich interactive content\n * (menus, forms, details). It follows the Adwaita `GtkPopover` pattern.\n *\n * - Supports both controlled (`open` + `onClose`) and uncontrolled modes.\n * - Auto-positions with viewport-aware flip.\n * - Closes on Escape, outside click, or trigger re-click.\n * - Focus is moved into the panel on open; returns to the trigger on close.\n * - `aria-haspopup=\"dialog\"` + `aria-expanded` wired to the trigger.\n * - `role=\"dialog\"` on the panel with `aria-labelledby` when a heading is present.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html\n */\nexport function Popover({\n  content,\n  placement: preferredPlacement = \"bottom\",\n  open: controlledOpen,\n  onClose,\n  onOpenChange,\n  children,\n}: PopoverProps) {\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const [pos, setPos] = useState<Position | null>(null);\n\n  const triggerId  = useId();\n  const popoverId  = useId();\n  const triggerRef = useRef<HTMLElement>(null);\n  const panelRef   = useRef<HTMLDivElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const close = useCallback(() => {\n    if (isControlled) {\n      onClose?.();\n    } else {\n      setUncontrolledOpen(false);\n    }\n    onOpenChange?.(false);\n  }, [isControlled, onClose, onOpenChange]);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      close();\n    } else {\n      if (!isControlled) setUncontrolledOpen(true);\n      onOpenChange?.(true);\n    }\n  }, [open, close, isControlled, onOpenChange]);\n\n  // Position panel\n  const place = useCallback(() => {\n    if (!triggerRef.current || !panelRef.current) return;\n    setPos(\n      computePosition(\n        triggerRef.current.getBoundingClientRect(),\n        panelRef.current.getBoundingClientRect(),\n        preferredPlacement\n      )\n    );\n  }, [preferredPlacement]);\n\n  // Reposition on open, scroll, resize\n  useEffect(() => {\n    if (!open) return;\n    // Two RAF: first lets panel mount with hidden styles so we can measure it;\n    // second applies the measured position.\n    const id = requestAnimationFrame(() => {\n      place();\n      window.addEventListener(\"scroll\", place, { passive: true, capture: true });\n      window.addEventListener(\"resize\", place, { passive: true });\n    });\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener(\"scroll\", place, { capture: true });\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [open, place]);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      requestAnimationFrame(() => {\n        const first = panelRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        (first ?? panelRef.current)?.focus();\n      });\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setPos(null);\n    }\n  }, [open]);\n\n  // Close on outside pointer\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !panelRef.current?.contains(e.target as Node)\n      ) {\n        close();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, close]);\n\n  // Escape key\n  const handlePanelKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") { e.stopPropagation(); close(); }\n    },\n    [close]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const trigger = cloneElement(children as any, {\n    ref: triggerRef,\n    id: triggerId,\n    \"aria-haspopup\": \"dialog\",\n    \"aria-expanded\": open,\n    \"aria-controls\": open ? popoverId : undefined,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      toggle();\n      children.props.onClick?.(e);\n    },\n  });\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={popoverId}\n      role=\"dialog\"\n      aria-labelledby={triggerId}\n      tabIndex={-1}\n      className={[\n        styles.panel,\n        pos ? styles[pos.placement] : null,\n        open && pos ? styles.visible : null,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={\n        pos\n          ? { top: pos.top, left: pos.left }\n          : { visibility: \"hidden\", pointerEvents: \"none\", top: -9999, left: -9999 }\n      }\n      onKeyDown={handlePanelKeyDown}\n    >\n      {/* Arrow — offset shifts it to point at the trigger when the panel is clamped */}\n      <div\n        className={styles.arrow}\n        aria-hidden=\"true\"\n        style={\n          pos?.arrowOffset !== undefined\n            ? pos.placement === \"top\" || pos.placement === \"bottom\"\n              ? { left: pos.arrowOffset - ARROW_HALF, marginLeft: 0 }\n              : { top:  pos.arrowOffset - ARROW_HALF, marginTop: 0 }\n            : undefined\n        }\n      />\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger}\n      {open &&\n        (typeof document !== \"undefined\"\n          ? createPortal(panel, document.body)\n          : panel)}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.cjs","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  cloneElement,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './Popover.module.css';\n\nexport type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface PopoverProps {\n  /**\n   * The rich content rendered inside the popover panel.\n   * Can include interactive elements (buttons, links, forms).\n   */\n  content: ReactNode;\n  /**\n   * Preferred placement relative to the trigger.\n   * Flips automatically when there is not enough viewport space.\n   * Defaults to `\"bottom\"`.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Whether the popover is open (controlled mode).\n   * Omit to use uncontrolled mode where the trigger toggles it.\n   */\n  open?: boolean;\n  /**\n   * Called when the popover requests to be closed\n   * (Escape key, outside click, or trigger click while open).\n   */\n  onClose?: () => void;\n  /**\n   * Called when open state should change (controlled mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element. Must be a single React element that can\n   * receive `ref` and click/keyboard event props.\n   */\n  children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n  top: number;\n  left: number;\n  placement: PopoverPlacement;\n  /** Arrow center offset in px from the near edge of the panel.\n   *  Horizontal (left) for top/bottom; vertical (top) for left/right.\n   *  Undefined means use the default 50% CSS. */\n  arrowOffset?: number;\n}\n\nconst GAP = 8;\nconst MARGIN = 10;\nconst ARROW_HALF = 6; // half of the 12 px arrow\n\nfunction computePosition(\n  trigger: DOMRect,\n  popover: DOMRect,\n  preferred: PopoverPlacement,\n): Position {\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  const order: PopoverPlacement[] = [\n    preferred,\n    preferred === 'top'\n      ? 'bottom'\n      : preferred === 'bottom'\n        ? 'top'\n        : preferred === 'left'\n          ? 'right'\n          : 'left',\n    'bottom',\n    'top',\n    'left',\n    'right',\n  ];\n\n  // De-duplicate while preserving order\n  const candidates = [...new Set(order)];\n\n  function calcRaw(p: PopoverPlacement): { top: number; left: number } {\n    if (p === 'bottom') {\n      return {\n        top: trigger.bottom + GAP,\n        left: trigger.left + trigger.width / 2 - popover.width / 2,\n      };\n    }\n\n    if (p === 'top') {\n      return {\n        top: trigger.top - popover.height - GAP,\n        left: trigger.left + trigger.width / 2 - popover.width / 2,\n      };\n    }\n\n    if (p === 'left') {\n      return {\n        top: trigger.top + trigger.height / 2 - popover.height / 2,\n        left: trigger.left - popover.width - GAP,\n      };\n    }\n\n    return {\n      top: trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.right + GAP,\n    };\n  }\n\n  // First pass: find a placement that fits both axes perfectly.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsH = left >= MARGIN && left + popover.width <= vw - MARGIN;\n    const fitsV = top >= MARGIN && top + popover.height <= vh - MARGIN;\n\n    if (fitsH && fitsV) {\n      // Always use pixel arrowOffset (never rely on CSS left:50%) so the arrow\n      // points exactly at the trigger center regardless of sub-pixel rounding.\n      const arrowOffset =\n        p === 'top' || p === 'bottom'\n          ? trigger.left + trigger.width / 2 - left\n          : trigger.top + trigger.height / 2 - top;\n\n      return { top, left, placement: p, arrowOffset };\n    }\n  }\n\n  // Second pass: fits the primary axis; clamp the secondary axis and\n  // shift the arrow so it still points at the trigger center.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsV = top >= MARGIN && top + popover.height <= vh - MARGIN;\n    const fitsH = left >= MARGIN && left + popover.width <= vw - MARGIN;\n\n    if ((p === 'top' || p === 'bottom') && fitsV) {\n      const clampedLeft = Math.max(MARGIN, Math.min(left, vw - popover.width - MARGIN));\n      const rawOffset = trigger.left + trigger.width / 2 - clampedLeft;\n\n      return {\n        top,\n        left: clampedLeft,\n        placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.width - ARROW_HALF - 4)),\n      };\n    }\n\n    if ((p === 'left' || p === 'right') && fitsH) {\n      const clampedTop = Math.max(MARGIN, Math.min(top, vh - popover.height - MARGIN));\n      const rawOffset = trigger.top + trigger.height / 2 - clampedTop;\n\n      return {\n        top: clampedTop,\n        left,\n        placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.height - ARROW_HALF - 4)),\n      };\n    }\n  }\n\n  // Fallback: clamp bottom placement and shift arrow to match trigger.\n  const fbTop = trigger.bottom + GAP;\n  const fbLeft = trigger.left + trigger.width / 2 - popover.width / 2;\n  const clampedTop = Math.max(MARGIN, Math.min(fbTop, vh - popover.height - MARGIN));\n  const clampedLeft = Math.max(MARGIN, Math.min(fbLeft, vw - popover.width - MARGIN));\n  const rawArrowOffset = trigger.left + trigger.width / 2 - clampedLeft;\n\n  return {\n    top: clampedTop,\n    left: clampedLeft,\n    placement: 'bottom',\n    arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawArrowOffset, popover.width - ARROW_HALF - 4)),\n  };\n}\n\n/**\n * Floating panel anchored to a trigger element.\n *\n * Unlike `Tooltip`, a Popover can contain rich interactive content\n * (menus, forms, details). It follows the Adwaita `GtkPopover` pattern.\n *\n * - Supports both controlled (`open` + `onClose`) and uncontrolled modes.\n * - Auto-positions with viewport-aware flip.\n * - Closes on Escape, outside click, or trigger re-click.\n * - Focus is moved into the panel on open; returns to the trigger on close.\n * - `aria-haspopup=\"dialog\"` + `aria-expanded` wired to the trigger.\n * - `role=\"dialog\"` on the panel with `aria-labelledby` when a heading is present.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html\n */\nexport function Popover({\n  content,\n  placement: preferredPlacement = 'bottom',\n  open: controlledOpen,\n  onClose,\n  onOpenChange,\n  children,\n}: PopoverProps) {\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const [pos, setPos] = useState<Position | null>(null);\n\n  const triggerId = useId();\n  const popoverId = useId();\n  const triggerRef = useRef<HTMLElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const close = useCallback(() => {\n    if (isControlled) {\n      onClose?.();\n    } else {\n      setUncontrolledOpen(false);\n    }\n\n    onOpenChange?.(false);\n  }, [isControlled, onClose, onOpenChange]);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      close();\n    } else {\n      if (!isControlled) {\n        setUncontrolledOpen(true);\n      }\n\n      onOpenChange?.(true);\n    }\n  }, [open, close, isControlled, onOpenChange]);\n\n  // Position panel\n  const place = useCallback(() => {\n    if (!triggerRef.current || !panelRef.current) {\n      return;\n    }\n\n    setPos(\n      computePosition(\n        triggerRef.current.getBoundingClientRect(),\n        panelRef.current.getBoundingClientRect(),\n        preferredPlacement,\n      ),\n    );\n  }, [preferredPlacement]);\n\n  // Reposition on open, scroll, resize\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    // Two RAF: first lets panel mount with hidden styles so we can measure it;\n    // second applies the measured position.\n    const id = requestAnimationFrame(() => {\n      place();\n      window.addEventListener('scroll', place, { passive: true, capture: true });\n      window.addEventListener('resize', place, { passive: true });\n    });\n\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener('scroll', place, { capture: true });\n      window.removeEventListener('resize', place);\n    };\n  }, [open, place]);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      requestAnimationFrame(() => {\n        const first = panelRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        (first ?? panelRef.current)?.focus();\n      });\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setPos(null);\n    }\n  }, [open]);\n\n  // Close on outside pointer\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !panelRef.current?.contains(e.target as Node)\n      ) {\n        close();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, close]);\n\n  // Escape key\n  const handlePanelKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        close();\n      }\n    },\n    [close],\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const trigger = cloneElement(children as any, {\n    ref: triggerRef,\n    id: triggerId,\n    'aria-haspopup': 'dialog',\n    'aria-expanded': open,\n    'aria-controls': open ? popoverId : undefined,\n    onClick: (e: ReactMouseEvent<HTMLElement>) => {\n      toggle();\n      children.props.onClick?.(e);\n    },\n  });\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={popoverId}\n      role=\"dialog\"\n      aria-labelledby={triggerId}\n      tabIndex={-1}\n      className={[\n        styles.panel,\n        pos ? styles[pos.placement] : null,\n        open && pos ? styles.visible : null,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={\n        pos\n          ? { top: pos.top, left: pos.left }\n          : { visibility: 'hidden', pointerEvents: 'none', top: -9999, left: -9999 }\n      }\n      onKeyDown={handlePanelKeyDown}\n    >\n      {/* Arrow — offset shifts it to point at the trigger when the panel is clamped */}\n      <div\n        className={styles.arrow}\n        aria-hidden=\"true\"\n        style={\n          pos?.arrowOffset !== undefined\n            ? pos.placement === 'top' || pos.placement === 'bottom'\n              ? { left: pos.arrowOffset - ARROW_HALF, marginLeft: 0 }\n              : { top: pos.arrowOffset - ARROW_HALF, marginTop: 0 }\n            : undefined\n        }\n      />\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger}\n      {open && (typeof document !== 'undefined' ? createPortal(panel, document.body) : panel)}\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Popover/Popover.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement, HTMLAttributes, ReactNode } from 'react';
-export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
 export interface PopoverProps {
     /**
      * The rich content rendered inside the popover panel.

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  useState,\n  useRef,\n  useId,\n  useEffect,\n  useCallback,\n  cloneElement,\n  type ReactElement,\n  type HTMLAttributes,\n  type ReactNode,\n  type KeyboardEvent,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./Popover.module.css\";\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface PopoverProps {\n  /**\n   * The rich content rendered inside the popover panel.\n   * Can include interactive elements (buttons, links, forms).\n   */\n  content: ReactNode;\n  /**\n   * Preferred placement relative to the trigger.\n   * Flips automatically when there is not enough viewport space.\n   * Defaults to `\"bottom\"`.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Whether the popover is open (controlled mode).\n   * Omit to use uncontrolled mode where the trigger toggles it.\n   */\n  open?: boolean;\n  /**\n   * Called when the popover requests to be closed\n   * (Escape key, outside click, or trigger click while open).\n   */\n  onClose?: () => void;\n  /**\n   * Called when open state should change (controlled mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element. Must be a single React element that can\n   * receive `ref` and click/keyboard event props.\n   */\n  children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n  top: number;\n  left: number;\n  placement: PopoverPlacement;\n  /** Arrow center offset in px from the near edge of the panel.\n   *  Horizontal (left) for top/bottom; vertical (top) for left/right.\n   *  Undefined means use the default 50% CSS. */\n  arrowOffset?: number;\n}\n\nconst GAP = 8;\nconst MARGIN = 10;\nconst ARROW_HALF = 6; // half of the 12 px arrow\n\nfunction computePosition(\n  trigger: DOMRect,\n  popover: DOMRect,\n  preferred: PopoverPlacement\n): Position {\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  const order: PopoverPlacement[] = [\n    preferred,\n    preferred === \"top\"    ? \"bottom\"\n    : preferred === \"bottom\" ? \"top\"\n    : preferred === \"left\"   ? \"right\"\n    : \"left\",\n    \"bottom\", \"top\", \"left\", \"right\",\n  ];\n\n  // De-duplicate while preserving order\n  const candidates = [...new Set(order)];\n\n  function calcRaw(p: PopoverPlacement): { top: number; left: number } {\n    if (p === \"bottom\") return {\n      top:  trigger.bottom + GAP,\n      left: trigger.left + trigger.width / 2 - popover.width / 2,\n    };\n    if (p === \"top\") return {\n      top:  trigger.top - popover.height - GAP,\n      left: trigger.left + trigger.width / 2 - popover.width / 2,\n    };\n    if (p === \"left\") return {\n      top:  trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.left - popover.width - GAP,\n    };\n    return {\n      top:  trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.right + GAP,\n    };\n  }\n\n  // First pass: find a placement that fits both axes perfectly.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsH = left >= MARGIN && left + popover.width  <= vw - MARGIN;\n    const fitsV = top  >= MARGIN && top  + popover.height <= vh - MARGIN;\n    if (fitsH && fitsV) {\n      // Always use pixel arrowOffset (never rely on CSS left:50%) so the arrow\n      // points exactly at the trigger center regardless of sub-pixel rounding.\n      const arrowOffset =\n        p === \"top\" || p === \"bottom\"\n          ? trigger.left + trigger.width  / 2 - left\n          : trigger.top  + trigger.height / 2 - top;\n      return { top, left, placement: p, arrowOffset };\n    }\n  }\n\n  // Second pass: fits the primary axis; clamp the secondary axis and\n  // shift the arrow so it still points at the trigger center.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsV = top  >= MARGIN && top  + popover.height <= vh - MARGIN;\n    const fitsH = left >= MARGIN && left + popover.width  <= vw - MARGIN;\n\n    if ((p === \"top\" || p === \"bottom\") && fitsV) {\n      const clampedLeft = Math.max(MARGIN, Math.min(left, vw - popover.width - MARGIN));\n      const rawOffset = trigger.left + trigger.width / 2 - clampedLeft;\n      return {\n        top, left: clampedLeft, placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.width - ARROW_HALF - 4)),\n      };\n    }\n\n    if ((p === \"left\" || p === \"right\") && fitsH) {\n      const clampedTop = Math.max(MARGIN, Math.min(top, vh - popover.height - MARGIN));\n      const rawOffset = trigger.top + trigger.height / 2 - clampedTop;\n      return {\n        top: clampedTop, left, placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.height - ARROW_HALF - 4)),\n      };\n    }\n  }\n\n  // Fallback: clamp bottom placement and shift arrow to match trigger.\n  const fbTop  = trigger.bottom + GAP;\n  const fbLeft = trigger.left + trigger.width / 2 - popover.width / 2;\n  const clampedTop  = Math.max(MARGIN, Math.min(fbTop,  vh - popover.height - MARGIN));\n  const clampedLeft = Math.max(MARGIN, Math.min(fbLeft, vw - popover.width  - MARGIN));\n  const rawArrowOffset = trigger.left + trigger.width / 2 - clampedLeft;\n  return {\n    top: clampedTop,\n    left: clampedLeft,\n    placement: \"bottom\",\n    arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawArrowOffset, popover.width - ARROW_HALF - 4)),\n  };\n}\n\n/**\n * Floating panel anchored to a trigger element.\n *\n * Unlike `Tooltip`, a Popover can contain rich interactive content\n * (menus, forms, details). It follows the Adwaita `GtkPopover` pattern.\n *\n * - Supports both controlled (`open` + `onClose`) and uncontrolled modes.\n * - Auto-positions with viewport-aware flip.\n * - Closes on Escape, outside click, or trigger re-click.\n * - Focus is moved into the panel on open; returns to the trigger on close.\n * - `aria-haspopup=\"dialog\"` + `aria-expanded` wired to the trigger.\n * - `role=\"dialog\"` on the panel with `aria-labelledby` when a heading is present.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html\n */\nexport function Popover({\n  content,\n  placement: preferredPlacement = \"bottom\",\n  open: controlledOpen,\n  onClose,\n  onOpenChange,\n  children,\n}: PopoverProps) {\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const [pos, setPos] = useState<Position | null>(null);\n\n  const triggerId  = useId();\n  const popoverId  = useId();\n  const triggerRef = useRef<HTMLElement>(null);\n  const panelRef   = useRef<HTMLDivElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const close = useCallback(() => {\n    if (isControlled) {\n      onClose?.();\n    } else {\n      setUncontrolledOpen(false);\n    }\n    onOpenChange?.(false);\n  }, [isControlled, onClose, onOpenChange]);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      close();\n    } else {\n      if (!isControlled) setUncontrolledOpen(true);\n      onOpenChange?.(true);\n    }\n  }, [open, close, isControlled, onOpenChange]);\n\n  // Position panel\n  const place = useCallback(() => {\n    if (!triggerRef.current || !panelRef.current) return;\n    setPos(\n      computePosition(\n        triggerRef.current.getBoundingClientRect(),\n        panelRef.current.getBoundingClientRect(),\n        preferredPlacement\n      )\n    );\n  }, [preferredPlacement]);\n\n  // Reposition on open, scroll, resize\n  useEffect(() => {\n    if (!open) return;\n    // Two RAF: first lets panel mount with hidden styles so we can measure it;\n    // second applies the measured position.\n    const id = requestAnimationFrame(() => {\n      place();\n      window.addEventListener(\"scroll\", place, { passive: true, capture: true });\n      window.addEventListener(\"resize\", place, { passive: true });\n    });\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener(\"scroll\", place, { capture: true });\n      window.removeEventListener(\"resize\", place);\n    };\n  }, [open, place]);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      requestAnimationFrame(() => {\n        const first = panelRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n        );\n        (first ?? panelRef.current)?.focus();\n      });\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setPos(null);\n    }\n  }, [open]);\n\n  // Close on outside pointer\n  useEffect(() => {\n    if (!open) return;\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !panelRef.current?.contains(e.target as Node)\n      ) {\n        close();\n      }\n    };\n    document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open, close]);\n\n  // Escape key\n  const handlePanelKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === \"Escape\") { e.stopPropagation(); close(); }\n    },\n    [close]\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const trigger = cloneElement(children as any, {\n    ref: triggerRef,\n    id: triggerId,\n    \"aria-haspopup\": \"dialog\",\n    \"aria-expanded\": open,\n    \"aria-controls\": open ? popoverId : undefined,\n    onClick: (e: React.MouseEvent<HTMLElement>) => {\n      toggle();\n      children.props.onClick?.(e);\n    },\n  });\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={popoverId}\n      role=\"dialog\"\n      aria-labelledby={triggerId}\n      tabIndex={-1}\n      className={[\n        styles.panel,\n        pos ? styles[pos.placement] : null,\n        open && pos ? styles.visible : null,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={\n        pos\n          ? { top: pos.top, left: pos.left }\n          : { visibility: \"hidden\", pointerEvents: \"none\", top: -9999, left: -9999 }\n      }\n      onKeyDown={handlePanelKeyDown}\n    >\n      {/* Arrow — offset shifts it to point at the trigger when the panel is clamped */}\n      <div\n        className={styles.arrow}\n        aria-hidden=\"true\"\n        style={\n          pos?.arrowOffset !== undefined\n            ? pos.placement === \"top\" || pos.placement === \"bottom\"\n              ? { left: pos.arrowOffset - ARROW_HALF, marginLeft: 0 }\n              : { top:  pos.arrowOffset - ARROW_HALF, marginTop: 0 }\n            : undefined\n        }\n      />\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger}\n      {open &&\n        (typeof document !== \"undefined\"\n          ? createPortal(panel, document.body)\n          : panel)}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":[],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import {\n  cloneElement,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './Popover.module.css';\n\nexport type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';\n\nexport interface PopoverProps {\n  /**\n   * The rich content rendered inside the popover panel.\n   * Can include interactive elements (buttons, links, forms).\n   */\n  content: ReactNode;\n  /**\n   * Preferred placement relative to the trigger.\n   * Flips automatically when there is not enough viewport space.\n   * Defaults to `\"bottom\"`.\n   */\n  placement?: PopoverPlacement;\n  /**\n   * Whether the popover is open (controlled mode).\n   * Omit to use uncontrolled mode where the trigger toggles it.\n   */\n  open?: boolean;\n  /**\n   * Called when the popover requests to be closed\n   * (Escape key, outside click, or trigger click while open).\n   */\n  onClose?: () => void;\n  /**\n   * Called when open state should change (controlled mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * The trigger element. Must be a single React element that can\n   * receive `ref` and click/keyboard event props.\n   */\n  children: ReactElement<HTMLAttributes<HTMLElement>>;\n}\n\ninterface Position {\n  top: number;\n  left: number;\n  placement: PopoverPlacement;\n  /** Arrow center offset in px from the near edge of the panel.\n   *  Horizontal (left) for top/bottom; vertical (top) for left/right.\n   *  Undefined means use the default 50% CSS. */\n  arrowOffset?: number;\n}\n\nconst GAP = 8;\nconst MARGIN = 10;\nconst ARROW_HALF = 6; // half of the 12 px arrow\n\nfunction computePosition(\n  trigger: DOMRect,\n  popover: DOMRect,\n  preferred: PopoverPlacement,\n): Position {\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  const order: PopoverPlacement[] = [\n    preferred,\n    preferred === 'top'\n      ? 'bottom'\n      : preferred === 'bottom'\n        ? 'top'\n        : preferred === 'left'\n          ? 'right'\n          : 'left',\n    'bottom',\n    'top',\n    'left',\n    'right',\n  ];\n\n  // De-duplicate while preserving order\n  const candidates = [...new Set(order)];\n\n  function calcRaw(p: PopoverPlacement): { top: number; left: number } {\n    if (p === 'bottom') {\n      return {\n        top: trigger.bottom + GAP,\n        left: trigger.left + trigger.width / 2 - popover.width / 2,\n      };\n    }\n\n    if (p === 'top') {\n      return {\n        top: trigger.top - popover.height - GAP,\n        left: trigger.left + trigger.width / 2 - popover.width / 2,\n      };\n    }\n\n    if (p === 'left') {\n      return {\n        top: trigger.top + trigger.height / 2 - popover.height / 2,\n        left: trigger.left - popover.width - GAP,\n      };\n    }\n\n    return {\n      top: trigger.top + trigger.height / 2 - popover.height / 2,\n      left: trigger.right + GAP,\n    };\n  }\n\n  // First pass: find a placement that fits both axes perfectly.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsH = left >= MARGIN && left + popover.width <= vw - MARGIN;\n    const fitsV = top >= MARGIN && top + popover.height <= vh - MARGIN;\n\n    if (fitsH && fitsV) {\n      // Always use pixel arrowOffset (never rely on CSS left:50%) so the arrow\n      // points exactly at the trigger center regardless of sub-pixel rounding.\n      const arrowOffset =\n        p === 'top' || p === 'bottom'\n          ? trigger.left + trigger.width / 2 - left\n          : trigger.top + trigger.height / 2 - top;\n\n      return { top, left, placement: p, arrowOffset };\n    }\n  }\n\n  // Second pass: fits the primary axis; clamp the secondary axis and\n  // shift the arrow so it still points at the trigger center.\n  for (const p of candidates) {\n    const { top, left } = calcRaw(p);\n    const fitsV = top >= MARGIN && top + popover.height <= vh - MARGIN;\n    const fitsH = left >= MARGIN && left + popover.width <= vw - MARGIN;\n\n    if ((p === 'top' || p === 'bottom') && fitsV) {\n      const clampedLeft = Math.max(MARGIN, Math.min(left, vw - popover.width - MARGIN));\n      const rawOffset = trigger.left + trigger.width / 2 - clampedLeft;\n\n      return {\n        top,\n        left: clampedLeft,\n        placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.width - ARROW_HALF - 4)),\n      };\n    }\n\n    if ((p === 'left' || p === 'right') && fitsH) {\n      const clampedTop = Math.max(MARGIN, Math.min(top, vh - popover.height - MARGIN));\n      const rawOffset = trigger.top + trigger.height / 2 - clampedTop;\n\n      return {\n        top: clampedTop,\n        left,\n        placement: p,\n        arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawOffset, popover.height - ARROW_HALF - 4)),\n      };\n    }\n  }\n\n  // Fallback: clamp bottom placement and shift arrow to match trigger.\n  const fbTop = trigger.bottom + GAP;\n  const fbLeft = trigger.left + trigger.width / 2 - popover.width / 2;\n  const clampedTop = Math.max(MARGIN, Math.min(fbTop, vh - popover.height - MARGIN));\n  const clampedLeft = Math.max(MARGIN, Math.min(fbLeft, vw - popover.width - MARGIN));\n  const rawArrowOffset = trigger.left + trigger.width / 2 - clampedLeft;\n\n  return {\n    top: clampedTop,\n    left: clampedLeft,\n    placement: 'bottom',\n    arrowOffset: Math.max(ARROW_HALF + 4, Math.min(rawArrowOffset, popover.width - ARROW_HALF - 4)),\n  };\n}\n\n/**\n * Floating panel anchored to a trigger element.\n *\n * Unlike `Tooltip`, a Popover can contain rich interactive content\n * (menus, forms, details). It follows the Adwaita `GtkPopover` pattern.\n *\n * - Supports both controlled (`open` + `onClose`) and uncontrolled modes.\n * - Auto-positions with viewport-aware flip.\n * - Closes on Escape, outside click, or trigger re-click.\n * - Focus is moved into the panel on open; returns to the trigger on close.\n * - `aria-haspopup=\"dialog\"` + `aria-expanded` wired to the trigger.\n * - `role=\"dialog\"` on the panel with `aria-labelledby` when a heading is present.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Popover.html\n */\nexport function Popover({\n  content,\n  placement: preferredPlacement = 'bottom',\n  open: controlledOpen,\n  onClose,\n  onOpenChange,\n  children,\n}: PopoverProps) {\n  const isControlled = controlledOpen !== undefined;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);\n  const open = isControlled ? controlledOpen : uncontrolledOpen;\n\n  const [pos, setPos] = useState<Position | null>(null);\n\n  const triggerId = useId();\n  const popoverId = useId();\n  const triggerRef = useRef<HTMLElement>(null);\n  const panelRef = useRef<HTMLDivElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n\n  const close = useCallback(() => {\n    if (isControlled) {\n      onClose?.();\n    } else {\n      setUncontrolledOpen(false);\n    }\n\n    onOpenChange?.(false);\n  }, [isControlled, onClose, onOpenChange]);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      close();\n    } else {\n      if (!isControlled) {\n        setUncontrolledOpen(true);\n      }\n\n      onOpenChange?.(true);\n    }\n  }, [open, close, isControlled, onOpenChange]);\n\n  // Position panel\n  const place = useCallback(() => {\n    if (!triggerRef.current || !panelRef.current) {\n      return;\n    }\n\n    setPos(\n      computePosition(\n        triggerRef.current.getBoundingClientRect(),\n        panelRef.current.getBoundingClientRect(),\n        preferredPlacement,\n      ),\n    );\n  }, [preferredPlacement]);\n\n  // Reposition on open, scroll, resize\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    // Two RAF: first lets panel mount with hidden styles so we can measure it;\n    // second applies the measured position.\n    const id = requestAnimationFrame(() => {\n      place();\n      window.addEventListener('scroll', place, { passive: true, capture: true });\n      window.addEventListener('resize', place, { passive: true });\n    });\n\n    return () => {\n      cancelAnimationFrame(id);\n      window.removeEventListener('scroll', place, { capture: true });\n      window.removeEventListener('resize', place);\n    };\n  }, [open, place]);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      requestAnimationFrame(() => {\n        const first = panelRef.current?.querySelector<HTMLElement>(\n          'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n        );\n\n        (first ?? panelRef.current)?.focus();\n      });\n    } else {\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n      setPos(null);\n    }\n  }, [open]);\n\n  // Close on outside pointer\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !panelRef.current?.contains(e.target as Node)\n      ) {\n        close();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, close]);\n\n  // Escape key\n  const handlePanelKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        close();\n      }\n    },\n    [close],\n  );\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const trigger = cloneElement(children as any, {\n    ref: triggerRef,\n    id: triggerId,\n    'aria-haspopup': 'dialog',\n    'aria-expanded': open,\n    'aria-controls': open ? popoverId : undefined,\n    onClick: (e: ReactMouseEvent<HTMLElement>) => {\n      toggle();\n      children.props.onClick?.(e);\n    },\n  });\n\n  const panel = (\n    <div\n      ref={panelRef}\n      id={popoverId}\n      role=\"dialog\"\n      aria-labelledby={triggerId}\n      tabIndex={-1}\n      className={[\n        styles.panel,\n        pos ? styles[pos.placement] : null,\n        open && pos ? styles.visible : null,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      style={\n        pos\n          ? { top: pos.top, left: pos.left }\n          : { visibility: 'hidden', pointerEvents: 'none', top: -9999, left: -9999 }\n      }\n      onKeyDown={handlePanelKeyDown}\n    >\n      {/* Arrow — offset shifts it to point at the trigger when the panel is clamped */}\n      <div\n        className={styles.arrow}\n        aria-hidden=\"true\"\n        style={\n          pos?.arrowOffset !== undefined\n            ? pos.placement === 'top' || pos.placement === 'bottom'\n              ? { left: pos.arrowOffset - ARROW_HALF, marginLeft: 0 }\n              : { top: pos.arrowOffset - ARROW_HALF, marginTop: 0 }\n            : undefined\n        }\n      />\n      {content}\n    </div>\n  );\n\n  return (\n    <>\n      {trigger}\n      {open && (typeof document !== 'undefined' ? createPortal(panel, document.body) : panel)}\n    </>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={panel:`_panel_1tk9v_3`,visible:`_visible_1tk9v_36`,arrow:`_arrow_1tk9v_44`,bottom:`_bottom_1tk9v_59`,top:`_top_1tk9v_67`,left:`_left_1tk9v_75`,right:`_right_1tk9v_83`};exports.default=e;
+var e={panel:`_panel_46zzm_3`,visible:`_visible_46zzm_36`,arrow:`_arrow_46zzm_44`,bottom:`_bottom_46zzm_59`,top:`_top_46zzm_67`,left:`_left_46zzm_75`,right:`_right_46zzm_83`};exports.default=e;
 //# sourceMappingURL=Popover.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.css.cjs","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":["/* ─── Panel ──────────────────────────────────────────────────────────────────── */\n\n.panel {\n  position: fixed;\n  z-index: 10200; /* above Toaster (9999), below Dialog (10000) */\n\n  min-width: 180px;\n  max-width: 320px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  padding: var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n\n  /* Hidden before position is known */\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity   var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n  /* Don't intercept events while invisible */\n  pointer-events: none;\n\n  outline: none;\n}\n\n.visible {\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n\n  /* Arrow points toward the trigger */\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: -1;\n}\n\n/* Position arrow on each side */\n.bottom .arrow {\n  top: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.top .arrow {\n  bottom: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-left-color: transparent;\n  border-top-color: transparent;\n}\n\n.left .arrow {\n  right: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-left-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.right .arrow {\n  left: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-right-color: transparent;\n  border-top-color: transparent;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .panel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n\n  .arrow {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .bottom .arrow { border-right-color: transparent; border-bottom-color: transparent; }\n  .top    .arrow { border-left-color:  transparent; border-top-color:    transparent; }\n  .left   .arrow { border-left-color:  transparent; border-bottom-color: transparent; }\n  .right  .arrow { border-right-color: transparent; border-top-color:    transparent; }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: opacity var(--gnome-duration-fast, 100ms) linear;\n    transform: none;\n  }\n\n  .visible {\n    transform: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.css.cjs","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":["/* ─── Panel ──────────────────────────────────────────────────────────────────── */\n\n.panel {\n  position: fixed;\n  z-index: 10200; /* above Toaster (9999), below Dialog (10000) */\n\n  min-width: 180px;\n  max-width: 320px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  padding: var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n\n  /* Hidden before position is known */\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n  /* Don't intercept events while invisible */\n  pointer-events: none;\n\n  outline: none;\n}\n\n.visible {\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n\n  /* Arrow points toward the trigger */\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: -1;\n}\n\n/* Position arrow on each side */\n.bottom .arrow {\n  top: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.top .arrow {\n  bottom: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-left-color: transparent;\n  border-top-color: transparent;\n}\n\n.left .arrow {\n  right: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-left-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.right .arrow {\n  left: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-right-color: transparent;\n  border-top-color: transparent;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .panel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n\n  .arrow {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .bottom .arrow {\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n  }\n  .top .arrow {\n    border-left-color: transparent;\n    border-top-color: transparent;\n  }\n  .left .arrow {\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n  }\n  .right .arrow {\n    border-right-color: transparent;\n    border-top-color: transparent;\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: opacity var(--gnome-duration-fast, 100ms) linear;\n    transform: none;\n  }\n\n  .visible {\n    transform: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	panel: "_panel_1tk9v_3",
-	visible: "_visible_1tk9v_36",
-	arrow: "_arrow_1tk9v_44",
-	bottom: "_bottom_1tk9v_59",
-	top: "_top_1tk9v_67",
-	left: "_left_1tk9v_75",
-	right: "_right_1tk9v_83"
+	panel: "_panel_46zzm_3",
+	visible: "_visible_46zzm_36",
+	arrow: "_arrow_46zzm_44",
+	bottom: "_bottom_46zzm_59",
+	top: "_top_46zzm_67",
+	left: "_left_46zzm_75",
+	right: "_right_46zzm_83"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.module.css.js","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":["/* ─── Panel ──────────────────────────────────────────────────────────────────── */\n\n.panel {\n  position: fixed;\n  z-index: 10200; /* above Toaster (9999), below Dialog (10000) */\n\n  min-width: 180px;\n  max-width: 320px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px  rgba(0, 0, 0, 0.08);\n\n  padding: var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n\n  /* Hidden before position is known */\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity   var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n  /* Don't intercept events while invisible */\n  pointer-events: none;\n\n  outline: none;\n}\n\n.visible {\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n\n  /* Arrow points toward the trigger */\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: -1;\n}\n\n/* Position arrow on each side */\n.bottom .arrow {\n  top: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.top .arrow {\n  bottom: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-left-color: transparent;\n  border-top-color: transparent;\n}\n\n.left .arrow {\n  right: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-left-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.right .arrow {\n  left: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-right-color: transparent;\n  border-top-color: transparent;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .panel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px  rgba(0, 0, 0, 0.3);\n  }\n\n  .arrow {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .bottom .arrow { border-right-color: transparent; border-bottom-color: transparent; }\n  .top    .arrow { border-left-color:  transparent; border-top-color:    transparent; }\n  .left   .arrow { border-left-color:  transparent; border-bottom-color: transparent; }\n  .right  .arrow { border-right-color: transparent; border-top-color:    transparent; }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: opacity var(--gnome-duration-fast, 100ms) linear;\n    transform: none;\n  }\n\n  .visible {\n    transform: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Popover.module.css.js","names":[],"sources":["../../../src/components/Popover/Popover.module.css"],"sourcesContent":["/* ─── Panel ──────────────────────────────────────────────────────────────────── */\n\n.panel {\n  position: fixed;\n  z-index: 10200; /* above Toaster (9999), below Dialog (10000) */\n\n  min-width: 180px;\n  max-width: 320px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n  border-radius: var(--gnome-radius-lg, 12px);\n  box-shadow:\n    0 4px 20px rgba(0, 0, 0, 0.14),\n    0 1px 4px rgba(0, 0, 0, 0.08);\n\n  padding: var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n\n  /* Hidden before position is known */\n  opacity: 0;\n  transform: scale(0.95);\n  transition:\n    opacity var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n\n  /* Don't intercept events while invisible */\n  pointer-events: none;\n\n  outline: none;\n}\n\n.visible {\n  opacity: 1;\n  transform: scale(1);\n  pointer-events: auto;\n}\n\n/* ─── Arrow ──────────────────────────────────────────────────────────────────── */\n\n.arrow {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.1));\n\n  /* Arrow points toward the trigger */\n  transform: rotate(45deg);\n  pointer-events: none;\n  z-index: -1;\n}\n\n/* Position arrow on each side */\n.bottom .arrow {\n  top: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-right-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.top .arrow {\n  bottom: -6px;\n  left: 50%;\n  margin-left: -6px;\n  border-left-color: transparent;\n  border-top-color: transparent;\n}\n\n.left .arrow {\n  right: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-left-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.right .arrow {\n  left: -6px;\n  top: 50%;\n  margin-top: -6px;\n  border-right-color: transparent;\n  border-top-color: transparent;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .panel {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 24px rgba(0, 0, 0, 0.4),\n      0 1px 4px rgba(0, 0, 0, 0.3);\n  }\n\n  .arrow {\n    background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #383838));\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .bottom .arrow {\n    border-right-color: transparent;\n    border-bottom-color: transparent;\n  }\n  .top .arrow {\n    border-left-color: transparent;\n    border-top-color: transparent;\n  }\n  .left .arrow {\n    border-left-color: transparent;\n    border-bottom-color: transparent;\n  }\n  .right .arrow {\n    border-right-color: transparent;\n    border-top-color: transparent;\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .panel {\n    transition: opacity var(--gnome-duration-fast, 100ms) linear;\n    transform: none;\n  }\n\n  .visible {\n    transform: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
+export type { PopoverPlacement, PopoverProps } from './Popover';
 export { Popover } from './Popover';
-export type { PopoverProps, PopoverPlacement } from './Popover';

package/dist/components/PreferencesDialog/PreferencesDialog.cjs

@@ -1,2 +1,2 @@
-const e=require(`./PreferencesDialog.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function a(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(i)??[]);if(!n.length)return;let r=n[0],a=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),a.focus()):document.activeElement===a&&(e.preventDefault(),r.focus())}function o({open:o,onClose:s,children:c,searchable:l=!0,className:u,...d}){let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useId)(),h=t.Children.toArray(c).filter(e=>(0,t.isValidElement)(e)),[g,_]=(0,t.useState)(0),[v,y]=(0,t.useState)(``);(0,t.useEffect)(()=>{if(o){_(0),y(``);let e=requestAnimationFrame(()=>{l&&p.current?p.current.focus():(f.current?.querySelector(i))?.focus()});return()=>cancelAnimationFrame(e)}},[o,l]);let b=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.stopPropagation(),s();return}a(e,f)},[s]),x=h.length>1,S=h[g]??h[0],C=v.trim().toLowerCase();return o?(0,n.createPortal)((0,r.jsx)(`div`,{className:e.default.backdrop,onClick:e=>{e.target===e.currentTarget&&s()},role:`presentation`,children:(0,r.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":m,className:[e.default.dialog,x?e.default.dialogMulti:null,u].filter(Boolean).join(` `),onKeyDown:b,...d,children:[(0,r.jsxs)(`div`,{className:e.default.header,children:[(0,r.jsx)(`button`,{type:`button`,className:e.default.closeBtn,onClick:s,"aria-label":`Close preferences`,children:`✕`}),(0,r.jsx)(`span`,{id:m,className:e.default.title,children:`Preferences`}),l&&(0,r.jsx)(`div`,{className:e.default.searchWrap,children:(0,r.jsx)(`input`,{ref:p,type:`search`,placeholder:`Search…`,value:v,onChange:e=>y(e.target.value),className:e.default.searchInput,"aria-label":`Search preferences`})})]}),(0,r.jsxs)(`div`,{className:e.default.body,children:[x&&(0,r.jsx)(`nav`,{className:e.default.sidebar,"aria-label":`Preferences pages`,children:(0,r.jsx)(`ul`,{role:`tablist`,className:e.default.navList,children:h.map((t,n)=>(0,r.jsx)(`li`,{role:`presentation`,children:(0,r.jsxs)(`button`,{role:`tab`,type:`button`,"aria-selected":n===g,className:[e.default.navItem,n===g?e.default.navItemActive:null].filter(Boolean).join(` `),onClick:()=>_(n),children:[t.props.iconName&&(0,r.jsx)(`span`,{className:[e.default.navIcon,`icon`,t.props.iconName].join(` `),"aria-hidden":`true`}),(0,r.jsx)(`span`,{className:e.default.navLabel,children:t.props.title})]})},n))})}),(0,r.jsx)(`div`,{className:e.default.pageWrap,children:S&&(0,t.cloneElement)(S,{"data-search-query":C||void 0})})]})]})}),document.body):null}exports.PreferencesDialog=o;
+const e=require(`./PreferencesDialog.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=`button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])`;function a(e,t){if(e.key!==`Tab`)return;let n=Array.from(t.current?.querySelectorAll(i)??[]);if(!n.length)return;let r=n[0],a=n[n.length-1];e.shiftKey?document.activeElement===r&&(e.preventDefault(),a.focus()):document.activeElement===a&&(e.preventDefault(),r.focus())}function o({open:o,onClose:s,children:c,searchable:l=!0,className:u,...d}){let f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useId)(),h=t.Children.toArray(c).filter(e=>(0,t.isValidElement)(e)),[g,_]=(0,t.useState)(0),[v,y]=(0,t.useState)(``);(0,t.useEffect)(()=>{if(o){_(0),y(``);let e=requestAnimationFrame(()=>{l&&p.current?p.current.focus():(f.current?.querySelector(i))?.focus()});return()=>cancelAnimationFrame(e)}},[o,l]);let b=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.stopPropagation(),s();return}a(e,f)},[s]),x=h.length>1,S=h[g]??h[0],C=v.trim().toLowerCase();return o?(0,n.createPortal)((0,r.jsx)(`div`,{className:e.default.backdrop,onClick:e=>{e.target===e.currentTarget&&s()},role:`presentation`,children:(0,r.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":m,className:[e.default.dialog,x?e.default.dialogMulti:null,u].filter(Boolean).join(` `),onKeyDown:b,...d,children:[(0,r.jsxs)(`div`,{className:e.default.header,children:[(0,r.jsx)(`button`,{type:`button`,className:e.default.closeBtn,onClick:s,"aria-label":`Close preferences`,children:`✕`}),(0,r.jsx)(`span`,{id:m,className:e.default.title,children:`Preferences`}),l&&(0,r.jsx)(`div`,{className:e.default.searchWrap,children:(0,r.jsx)(`input`,{ref:p,type:`search`,placeholder:`Search…`,value:v,onChange:e=>y(e.target.value),className:e.default.searchInput,"aria-label":`Search preferences`})})]}),(0,r.jsxs)(`div`,{className:e.default.body,children:[x&&(0,r.jsx)(`nav`,{className:e.default.sidebar,"aria-label":`Preferences pages`,children:(0,r.jsx)(`ul`,{className:e.default.navList,children:h.map((t,n)=>(0,r.jsx)(`li`,{role:`presentation`,children:(0,r.jsxs)(`button`,{role:`tab`,type:`button`,"aria-selected":n===g,className:[e.default.navItem,n===g?e.default.navItemActive:null].filter(Boolean).join(` `),onClick:()=>_(n),children:[t.props.iconName&&(0,r.jsx)(`span`,{className:[e.default.navIcon,`icon`,t.props.iconName].join(` `),"aria-hidden":`true`}),(0,r.jsx)(`span`,{className:e.default.navLabel,children:t.props.title})]})},n))})}),(0,r.jsx)(`div`,{className:e.default.pageWrap,children:S&&(0,t.cloneElement)(S,{"data-search-query":C||void 0})})]})]})}),document.body):null}exports.PreferencesDialog=o;
 //# sourceMappingURL=PreferencesDialog.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"PreferencesDialog.cjs","names":[],"sources":["../../../src/components/PreferencesDialog/PreferencesDialog.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./PreferencesDialog.module.css\";\nimport type { PreferencesPageProps } from \"../PreferencesPage/PreferencesPage\";\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(\n  e: KeyboardEvent<HTMLDivElement>,\n  ref: React.RefObject<HTMLDivElement | null>\n) {\n  if (e.key !== \"Tab\") return;\n  const focusable = Array.from(\n    ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []\n  );\n  if (!focusable.length) return;\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\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\n  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(\n    (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          first?.focus();\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        return;\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) return null;\n\n  return createPortal(\n    <div\n      className={styles.backdrop}\n      onClick={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[\n          styles.dialog,\n          multiPage ? styles.dialogMulti : null,\n          className,\n        ]\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 role=\"tablist\" 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={[\n                        styles.navItem,\n                        i === activeIndex ? styles.navItemActive : null,\n                      ]\n                        .filter(Boolean)\n                        .join(\" \")}\n                      onClick={() => setActiveIndex(i)}\n                    >\n                      {page.props.iconName && (\n                        <span\n                          className={[\n                            styles.navIcon,\n                            \"icon\",\n                            page.props.iconName,\n                          ].join(\" \")}\n                          aria-hidden=\"true\"\n                        />\n                      )}\n                      <span className={styles.navLabel}>\n                        {page.props.title}\n                      </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.cjs","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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"}

package/dist/components/PreferencesDialog/PreferencesDialog.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface PreferencesDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+export interface PreferencesDialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** Whether the dialog is open. */
     open: boolean;
     /** Called when the user requests to close the dialog. */

package/dist/components/PreferencesDialog/PreferencesDialog.js

@@ -81,7 +81,6 @@ function m({ open: m, onClose: h, children: g, searchable: _ = !0, className: v,
 					className: e.sidebar,
 					"aria-label": "Preferences pages",
 					children: /* @__PURE__ */ u("ul", {
-						role: "tablist",
 						className: e.navList,
 						children: C.map((t, n) => /* @__PURE__ */ u("li", {
 							role: "presentation",

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  isValidElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styles from \"./PreferencesDialog.module.css\";\nimport type { PreferencesPageProps } from \"../PreferencesPage/PreferencesPage\";\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(\n  e: KeyboardEvent<HTMLDivElement>,\n  ref: React.RefObject<HTMLDivElement | null>\n) {\n  if (e.key !== \"Tab\") return;\n  const focusable = Array.from(\n    ref.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []\n  );\n  if (!focusable.length) return;\n  const first = focusable[0];\n  const last = focusable[focusable.length - 1];\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\n  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(\n    (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          first?.focus();\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        return;\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) return null;\n\n  return createPortal(\n    <div\n      className={styles.backdrop}\n      onClick={(e) => {\n        if (e.target === e.currentTarget) onClose();\n      }}\n      role=\"presentation\"\n    >\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId}\n        className={[\n          styles.dialog,\n          multiPage ? styles.dialogMulti : null,\n          className,\n        ]\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 role=\"tablist\" 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={[\n                        styles.navItem,\n                        i === activeIndex ? styles.navItemActive : null,\n                      ]\n                        .filter(Boolean)\n                        .join(\" \")}\n                      onClick={() => setActiveIndex(i)}\n                    >\n                      {page.props.iconName && (\n                        <span\n                          className={[\n                            styles.navIcon,\n                            \"icon\",\n                            page.props.iconName,\n                          ].join(\" \")}\n                          aria-hidden=\"true\"\n                        />\n                      )}\n                      <span className={styles.navLabel}>\n                        {page.props.title}\n                      </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 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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"}

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

@@ -1,2 +1,2 @@
-var e=`_backdrop_1u1bd_3`,t=`_dialog_1u1bd_26`,n=`_dialogMulti_1u1bd_46`,r=`_header_1u1bd_63`,i=`_closeBtn_1u1bd_73`,a=`_title_1u1bd_102`,o=`_searchWrap_1u1bd_112`,s=`_searchInput_1u1bd_116`,c=`_body_1u1bd_143`,l=`_sidebar_1u1bd_152`,u=`_navList_1u1bd_160`,d=`_navItem_1u1bd_169`,f=`_navItemActive_1u1bd_190`,p=`_navIcon_1u1bd_205`,m=`_navLabel_1u1bd_211`,h=`_pageWrap_1u1bd_221`,g={backdrop:e,"backdrop-in":`_backdrop-in_1u1bd_1`,dialog:t,"dialog-in":`_dialog-in_1u1bd_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_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;
 //# sourceMappingURL=PreferencesDialog.module.css.cjs.map