@gnome-ui/react 1.44.0 → 1.45.1

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

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

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

@@ -1,9 +1,9 @@
 //#region src/components/PreferencesDialog/PreferencesDialog.module.css
-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 = {
+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_1u1bd_1",
+	"backdrop-in": "_backdrop-in_1k5wp_1",
 	dialog: t,
-	"dialog-in": "_dialog-in_1u1bd_1",
+	"dialog-in": "_dialog-in_1k5wp_1",
 	dialogMulti: n,
 	header: r,
 	closeBtn: i,

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

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

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

@@ -1,2 +1,2 @@
-export { PreferencesDialog } from './PreferencesDialog';
 export type { PreferencesDialogProps } from './PreferencesDialog';
+export { PreferencesDialog } from './PreferencesDialog';

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { PreferencesGroup } from './PreferencesGroup';
 export type { PreferencesGroupProps } from './PreferencesGroup';
+export { PreferencesGroup } from './PreferencesGroup';

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { PreferencesPage } from './PreferencesPage';
 export type { PreferencesPageProps } from './PreferencesPage';
+export { PreferencesPage } from './PreferencesPage';

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

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

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export type ProgressBarVariant = "accent" | "success" | "warning" | "error";
+export type ProgressBarVariant = 'accent' | 'success' | 'warning' | 'error';
 export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Current progress value between `0` and `1` (e.g. `0.6` = 60 %).
@@ -15,9 +15,9 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
      */
     variant?: ProgressBarVariant;
     /** Accessible label describing what is loading. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     /** Associates the bar with a visible element that labels it. */
-    "aria-labelledby"?: string;
+    'aria-labelledby'?: string;
 }
 /**
  * Determinate and indeterminate progress bar following the Adwaita style.
@@ -30,4 +30,4 @@ export interface ProgressBarProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/feedback/progress.html
  */
-export declare function ProgressBar({ value, variant, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressBar({ value, variant, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +1,2 @@
-var e={track:`_track_endpr_3`,fill:`_fill_endpr_14`,accent:`_accent_endpr_23`,success:`_success_endpr_24`,warning:`_warning_endpr_25`,error:`_error_endpr_26`,indeterminate:`_indeterminate_endpr_30`,pulse:`_pulse_endpr_1`};exports.default=e;
+var e={track:`_track_10s0m_3`,fill:`_fill_10s0m_14`,accent:`_accent_10s0m_23`,success:`_success_10s0m_26`,warning:`_warning_10s0m_29`,error:`_error_10s0m_32`,indeterminate:`_indeterminate_10s0m_38`,pulse:`_pulse_10s0m_1`};exports.default=e;
 //# sourceMappingURL=ProgressBar.module.css.cjs.map

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

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

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

@@ -1,12 +1,12 @@
 var e = {
-	track: "_track_endpr_3",
-	fill: "_fill_endpr_14",
-	accent: "_accent_endpr_23",
-	success: "_success_endpr_24",
-	warning: "_warning_endpr_25",
-	error: "_error_endpr_26",
-	indeterminate: "_indeterminate_endpr_30",
-	pulse: "_pulse_endpr_1"
+	track: "_track_10s0m_3",
+	fill: "_fill_10s0m_14",
+	accent: "_accent_10s0m_23",
+	success: "_success_10s0m_26",
+	warning: "_warning_10s0m_29",
+	error: "_error_10s0m_32",
+	indeterminate: "_indeterminate_10s0m_38",
+	pulse: "_pulse_10s0m_1"
 };
 //#endregion
 export { e as default };

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

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

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

@@ -1,2 +1,2 @@
-export { ProgressBar } from './ProgressBar';
 export type { ProgressBarProps, ProgressBarVariant } from './ProgressBar';
+export { ProgressBar } from './ProgressBar';

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

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

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

@@ -1,7 +1,7 @@
 import { InputHTMLAttributes } from 'react';
-export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /** Accessible label. Required when no visible `<label>` is associated. */
-    "aria-label"?: string;
+    'aria-label'?: string;
 }
 /**
  * Single-selection radio button following the GNOME HIG and Adwaita style.

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,2 @@
-export { RadioButton } from './RadioButton';
 export type { RadioButtonProps } from './RadioButton';
+export { RadioButton } from './RadioButton';

package/dist/components/SearchBar/SearchBar.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import {\n  useRef,\n  useEffect,\n  useCallback,\n  useId,\n  useState,\n  type KeyboardEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search, Close } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Spinner } from \"../Spinner\";\nimport styles from \"./SearchBar.module.css\";\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = \"Search…\",\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = \"Suggestions\",\n  ...props\n}: SearchBarProps) {\n  const inputRef   = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId      = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex,  setActiveIndex]  = useState(-1);\n  const [dropdownPos,  setDropdownPos]  = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown   = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => { setActiveIndex(-1); }, [suggestions]);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n      return;\n    }\n    function updatePos() {\n      if (!wrapperRef.current) return;\n      const r = wrapperRef.current.getBoundingClientRect();\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener(\"scroll\", updatePos, { passive: true, capture: true });\n    window.addEventListener(\"resize\", updatePos, { passive: true });\n    return () => {\n      window.removeEventListener(\"scroll\", updatePos, { capture: true });\n      window.removeEventListener(\"resize\", updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) return;\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n          return;\n        }\n        if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n          return;\n        }\n        if (e.key === \"Enter\" && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n          return;\n        }\n      }\n      if (e.key === \"Escape\") {\n        e.preventDefault();\n        onClose?.();\n      }\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect]\n  );\n\n  const hasValue       = value !== undefined && value !== \"\";\n  const activeOptionId = activeIndex >= 0 && suggestions?.[activeIndex]\n    ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n    : undefined;\n\n  const dropdown = showDropdown && dropdownPos\n    ? createPortal(\n        <ul\n          ref={listboxRef}\n          role=\"listbox\"\n          aria-label={suggestionsLabel}\n          id={listboxId}\n          className={styles.suggestionsPanel}\n          style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n          onMouseDown={(e) => e.preventDefault()} // keep focus on input\n        >\n          {loadingSuggestions && (\n            <li role=\"presentation\" className={styles.suggestionsLoading}>\n              <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n            </li>\n          )}\n          {!loadingSuggestions &&\n            suggestions?.map((item, index) => (\n              <li\n                key={item.id}\n                id={`${optionIdPrefix}-${item.id}`}\n                role=\"option\"\n                aria-selected={index === activeIndex}\n                className={[\n                  styles.suggestionItem,\n                  index === activeIndex ? styles.suggestionItemActive : null,\n                ]\n                  .filter(Boolean)\n                  .join(\" \")}\n                onMouseEnter={() => setActiveIndex(index)}\n                onMouseLeave={() => setActiveIndex(-1)}\n                onClick={() => onSuggestionSelect?.(item)}\n              >\n                {renderSuggestion ? renderSuggestion(item) : item.label}\n              </li>\n            ))}\n        </ul>,\n        document.body\n      )\n    : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-hidden={!open}\n      >\n        <div\n          className={[\n            styles.bar,\n            inline   ? styles.inline   : null,\n            disabled ? styles.disabled : null,\n          ]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== \"undefined\" && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n}\n"],"mappings":"0NA0EA,SAAgB,EAAU,CACxB,OACA,UACA,UACA,WACA,QACA,WACA,cAAc,UACd,WACA,SAAS,GACT,YACA,cACA,qBACA,qBAAqB,GACrB,mBACA,mBAAmB,cACnB,GAAG,GACc,CACjB,IAAM,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,QAAoC,KAAK,CACzC,GAAA,EAAA,EAAA,QAAsC,KAAK,CAE3C,GAAA,EAAA,EAAA,QAAmB,CACnB,GAAA,EAAA,EAAA,QAAwB,CAExB,CAAC,EAAa,IAAA,EAAA,EAAA,UAA2B,GAAG,CAC5C,CAAC,EAAa,IAAA,EAAA,EAAA,UAA+C,KAAK,CAElE,GAAkB,GAAa,QAAU,GAAK,EAC9C,EAAe,IAAS,GAAsB,IAGpD,EAAA,EAAA,eAAgB,CACd,EAAe,GAAG,EACjB,EAAE,CAAC,EAGN,EAAA,EAAA,eAAgB,CACd,GAAI,EAAM,CACR,IAAM,EAAK,0BAA4B,EAAS,SAAS,OAAO,CAAC,CAEjE,UAAa,qBAAqB,EAAG,GAEtC,CAAC,EAAK,CAAC,EAGV,EAAA,EAAA,eAAgB,CACd,GAAI,CAAC,GAAgB,CAAC,EAAW,QAAS,CACxC,EAAe,KAAK,CAEpB,OAGF,SAAS,GAAY,CACnB,GAAI,CAAC,EAAW,QACd,OAGF,IAAM,EAAI,EAAW,QAAQ,uBAAuB,CAEpD,EAAe,CAAE,IAAK,EAAE,OAAQ,KAAM,EAAE,KAAM,MAAO,EAAE,MAAO,CAAC,CAMjE,OAJA,GAAW,CACX,OAAO,iBAAiB,SAAU,EAAW,CAAE,QAAS,GAAM,QAAS,GAAM,CAAC,CAC9E,OAAO,iBAAiB,SAAU,EAAW,CAAE,QAAS,GAAM,CAAC,KAElD,CACX,OAAO,oBAAoB,SAAU,EAAW,CAAE,QAAS,GAAM,CAAC,CAClE,OAAO,oBAAoB,SAAU,EAAU,GAEhD,CAAC,EAAa,CAAC,EAGlB,EAAA,EAAA,eAAgB,CACV,EAAc,GAAK,CAAC,EAAW,SAIlC,EAAW,QAAQ,SAAS,IAA0C,eAAe,CACpF,MAAO,UACR,CAAC,EACD,CAAC,EAAY,CAAC,CAEjB,IAAM,GAAA,EAAA,EAAA,aACH,GAAuC,CACtC,GAAI,GAAgB,GAAkB,EAAa,CACjD,GAAI,EAAE,MAAQ,YAAa,CACzB,EAAE,gBAAgB,CAClB,EAAgB,GAAM,KAAK,IAAI,EAAI,EAAG,EAAY,OAAS,EAAE,CAAC,CAE9D,OAGF,GAAI,EAAE,MAAQ,UAAW,CACvB,EAAE,gBAAgB,CAClB,EAAgB,GAAM,KAAK,IAAI,EAAI,EAAG,GAAG,CAAC,CAE1C,OAGF,GAAI,EAAE,MAAQ,SAAW,GAAe,EAAG,CACzC,EAAE,gBAAgB,CAClB,IAAqB,EAAY,GAAa,CAE9C,QAIA,EAAE,MAAQ,WACZ,EAAE,gBAAgB,CAClB,KAAW,EAGb,EAAM,YAAY,EAAE,EAEtB,CAAC,EAAS,EAAO,EAAc,EAAgB,EAAa,EAAa,EAAmB,CAC7F,CAEK,EAAW,IAAU,IAAA,IAAa,IAAU,GAC5C,EACJ,GAAe,GAAK,IAAc,GAC9B,GAAG,EAAe,GAAG,EAAY,GAAa,KAC9C,IAAA,GAEA,EACJ,GAAgB,GAAA,EAAA,EAAA,eAEV,EAAA,EAAA,MAAC,KAAD,CACE,IAAK,EACL,aAAY,EACZ,GAAI,EACJ,UAAW,EAAA,QAAO,iBAClB,MAAO,CAAE,IAAK,EAAY,IAAK,KAAM,EAAY,KAAM,MAAO,EAAY,MAAO,CACjF,YAAc,GAAM,EAAE,gBAAgB,UANxC,CAQG,IACC,EAAA,EAAA,KAAC,KAAD,CAAI,KAAK,eAAe,UAAW,EAAA,QAAO,6BACxC,EAAA,EAAA,KAAC,EAAA,QAAD,CAAS,KAAK,KAAK,MAAM,uBAAyB,CAAA,CAC/C,CAAA,CAEN,CAAC,GACA,GAAa,KAAK,EAAM,KACtB,EAAA,EAAA,KAAC,KAAD,CAEE,GAAI,GAAG,EAAe,GAAG,EAAK,KAC9B,gBAAe,IAAU,EACzB,UAAW,CACT,EAAA,QAAO,eACP,IAAU,EAAc,EAAA,QAAO,qBAAuB,KACvD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,iBAAoB,EAAe,EAAM,CACzC,iBAAoB,EAAe,GAAG,CACtC,YAAe,IAAqB,EAAK,UAExC,EAAmB,EAAiB,EAAK,CAAG,EAAK,MAC/C,CAdE,EAAK,GAcP,CACL,CACD,GACL,SAAS,KACV,CACD,KAEN,OACE,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,EACE,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,UAAW,CAAC,EAAA,QAAO,QAAS,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC3F,cAAa,CAAC,WAHhB,EAKE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,IAAK,EAAS,EAAA,QAAO,OAAS,KAAM,EAAW,EAAA,QAAO,SAAW,KAAK,CACtF,OAAO,QAAQ,CACf,KAAK,IAAI,UAHd,EAKE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,WAAY,cAAA,aAClC,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,OAAQ,KAAK,KAAO,CAAA,CAC3B,CAAA,EAEP,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,KAAK,SACL,KAAK,WACL,oBAAkB,OAClB,gBAAe,EACf,gBAAe,EAAe,EAAY,IAAA,GAC1C,wBAAuB,EAChB,QACG,WACG,cACH,WACV,SAAU,EAAO,IAAA,GAAY,GAC7B,UAAW,EAAA,QAAO,MAClB,UAAW,EACX,GAAI,EACJ,CAAA,CAED,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,YAClB,aAAW,eACX,SAAU,EAAO,IAAA,GAAY,GACnB,WACV,YAAe,CACb,KAAW,CACX,EAAS,SAAS,OAAO,YAG3B,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAO,CAAA,CACxB,CAAA,CAEP,GAEL,IAAY,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAY,WAAe,CAAA,CAC3D,GAEL,OAAO,SAAa,KAAe,EACnC,CAAA,CAAA"}

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

@@ -3,7 +3,7 @@ export interface Suggestion {
     id: string;
     label: string;
 }
-export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
      * Whether the search bar is visible/expanded.
      * When `false` the bar collapses to zero height and is hidden from AT.

package/dist/components/SearchBar/SearchBar.js

@@ -10,7 +10,7 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 	let A = o(null), j = o(null), M = o(null), N = a(), P = a(), [F, I] = s(-1), [L, R] = s(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
 	i(() => {
 		I(-1);
-	}, [w]), i(() => {
+	}, []), i(() => {
 		if (m) {
 			let e = requestAnimationFrame(() => A.current?.focus());
 			return () => cancelAnimationFrame(e);
@@ -64,7 +64,6 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 		T
 	]), H = v !== void 0 && v !== "", U = F >= 0 && w?.[F] ? `${P}-${w[F].id}` : void 0, W = B && L ? c(/* @__PURE__ */ d("ul", {
 		ref: M,
-		role: "listbox",
 		"aria-label": O,
 		id: N,
 		className: n.suggestionsPanel,
@@ -83,7 +82,6 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 			})
 		}), !E && w?.map((e, t) => /* @__PURE__ */ u("li", {
 			id: `${P}-${e.id}`,
-			role: "option",
 			"aria-selected": t === F,
 			className: [n.suggestionItem, t === F ? n.suggestionItemActive : null].filter(Boolean).join(" "),
 			onMouseEnter: () => I(t),