@gnome-ui/react 1.49.0 → 1.49.1

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

@@ -1,14 +1,14 @@
 var e = {
-	row: "_row_1ckav_3",
-	disabled: "_disabled_1ckav_41",
-	checkboxWrap: "_checkboxWrap_1ckav_49",
-	checkbox: "_checkbox_1ckav_49",
-	checkboxChecked: "_checkboxChecked_1ckav_71",
-	checkmark: "_checkmark_1ckav_77",
-	leading: "_leading_1ckav_84",
-	content: "_content_1ckav_93",
-	title: "_title_1ckav_101",
-	subtitle: "_subtitle_1ckav_112"
+	row: "_row_rq5l1_3",
+	disabled: "_disabled_rq5l1_38",
+	checkboxWrap: "_checkboxWrap_rq5l1_46",
+	checkbox: "_checkbox_rq5l1_46",
+	checkboxChecked: "_checkboxChecked_rq5l1_68",
+	checkmark: "_checkmark_rq5l1_74",
+	leading: "_leading_rq5l1_81",
+	content: "_content_rq5l1_90",
+	title: "_title_rq5l1_98",
+	subtitle: "_subtitle_rq5l1_109"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n\n  appearance: none;\n  -webkit-appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgba(0, 0, 0, 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #ffffff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"CheckRow.module.css.js","names":[],"sources":["../../../src/components/CheckRow/CheckRow.module.css"],"sourcesContent":["/* ─── Row button ────────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  appearance: none;\n  background: transparent;\n  border: none;\n  font: inherit;\n  outline: none;\n  cursor: pointer;\n  text-align: start;\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.row:hover {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.row:active {\n  background-color: var(--gnome-active-overlay);\n}\n\n.row:focus-visible {\n  box-shadow:\n    inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Checkbox visual ───────────────────────────────────────────────────────── */\n\n.checkboxWrap {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.checkbox {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  border-radius: var(--gnome-radius-sm, 4px);\n  border: 1.5px solid var(--gnome-border-subtle, rgb(0 0 0 / 0.25));\n  background-color: transparent;\n  color: transparent;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.checkboxChecked {\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  border-color: var(--gnome-accent-bg-color, #3584e4);\n  color: #fff;\n}\n\n.checkmark {\n  display: block;\n  flex-shrink: 0;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .row:focus-visible {\n    box-shadow:\n      inset 0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n      inset 0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4),\n      inset 0 0 0\n      calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px) + 1px)\n      var(--gnome-window-bg-color, #fafafa);\n  }\n\n  .checkbox {\n    border-width: 2px;\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .checkbox {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={checkbox:`_checkbox_15vcc_3`};exports.default=e;
+var e={checkbox:`_checkbox_u344z_3`};exports.default=e;
 //# sourceMappingURL=Checkbox.module.css.cjs.map

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

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

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

@@ -1,4 +1,4 @@
-var e = { checkbox: "_checkbox_15vcc_3" };
+var e = { checkbox: "_checkbox_u344z_3" };
 //#endregion
 export { e as default };
 

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

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

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

@@ -1,2 +1,2 @@
-var e={chip:`_chip_7pedl_3`,selectable:`_selectable_7pedl_31`,selected:`_selected_7pedl_55`,disabled:`_disabled_7pedl_68`,icon:`_icon_7pedl_76`,label:`_label_7pedl_85`,remove:`_remove_7pedl_91`};exports.default=e;
+var e={chip:`_chip_3068g_3`,selectable:`_selectable_3068g_27`,selected:`_selected_3068g_51`,disabled:`_disabled_3068g_64`,icon:`_icon_3068g_72`,label:`_label_3068g_81`,remove:`_remove_3068g_87`};exports.default=e;
 //# sourceMappingURL=Chip.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.css.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.css.cjs","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	chip: "_chip_7pedl_3",
-	selectable: "_selectable_7pedl_31",
-	selected: "_selected_7pedl_55",
-	disabled: "_disabled_7pedl_68",
-	icon: "_icon_7pedl_76",
-	label: "_label_7pedl_85",
-	remove: "_remove_7pedl_91"
+	chip: "_chip_3068g_3",
+	selectable: "_selectable_3068g_27",
+	selected: "_selected_3068g_51",
+	disabled: "_disabled_3068g_64",
+	icon: "_icon_3068g_72",
+	label: "_label_3068g_81",
+	remove: "_remove_3068g_87"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.module.css.js","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  -webkit-appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Chip.module.css.js","names":[],"sources":["../../../src/components/Chip/Chip.module.css"],"sourcesContent":["/* ─── Base ──────────────────────────────────────────────────────────────────── */\n\n.chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border-radius: var(--gnome-radius-pill);\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.875rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: 1.4;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n\n  /* Not a button by default */\n  appearance: none;\n  cursor: default;\n  user-select: none;\n  outline: none;\n}\n\n/* ─── Selectable (toggle button) ────────────────────────────────────────────── */\n\n.selectable {\n  cursor: pointer;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 85%, black);\n}\n\n.selectable:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 70%, black);\n}\n\n.selectable:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Selected state ────────────────────────────────────────────────────────── */\n\n.selected {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 15%, transparent);\n  border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 50%, transparent);\n  color: var(--gnome-accent-color, #3584e4);\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.selected.selectable:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Leading icon ──────────────────────────────────────────────────────────── */\n\n.icon {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-inline-start: -2px;\n}\n\n/* ─── Label ─────────────────────────────────────────────────────────────────── */\n\n.label {\n  /* nothing extra needed */\n}\n\n/* ─── Remove button ─────────────────────────────────────────────────────────── */\n\n.remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  margin-inline-end: -4px;\n  cursor: pointer;\n  outline: none;\n  color: inherit;\n  opacity: 0.6;\n  border-radius: var(--gnome-radius-pill);\n  transition: opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.remove:hover:not(:disabled) {\n  opacity: 1;\n}\n\n.remove:focus-visible {\n  opacity: 1;\n  box-shadow:\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa),\n    0 0 0 4px var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .chip {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n  }\n\n  .selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 85%, white);\n  }\n\n  .selectable:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-card-bg-color, #383838) 70%, white);\n  }\n\n  .selected {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 25%, transparent);\n    border-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 60%, transparent);\n    color: var(--gnome-accent-color, #78aeed);\n  }\n\n  .selected.selectable:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 35%, transparent);\n  }\n\n  .selectable:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #242424),\n      0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n      var(--gnome-focus-ring-color, #78aeed);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .selectable,\n  .remove {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/ColorPicker/ColorPicker.cjs

@@ -1,2 +1,2 @@
-const e=require("./ColorPicker.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u})=>(0,n.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":l??t,disabled:o,className:[e.default.swatch,e.default[`swatch-${i}`],r?e.default.swatchSelected:null,s].filter(Boolean).join(` `),style:{"--swatch-color":t,...c},onClick:()=>a?.(t),...u,children:r&&(0,n.jsx)(`svg`,{className:e.default.checkmark,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 8l3.5 3.5L13 5`,stroke:`white`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),i=[{value:`#3584e4`,label:`Blue`},{value:`#2ec27e`,label:`Green`},{value:`#f6d32d`,label:`Yellow`},{value:`#ff7800`,label:`Orange`},{value:`#e01b24`,label:`Red`},{value:`#9141ac`,label:`Purple`},{value:`#986a44`,label:`Brown`},{value:`#2190a4`,label:`Teal`},{value:`#5e5c64`,label:`Slate`}],a=({value:a,onChange:o,colors:s=i,allowCustom:c=!1,size:l=`md`,className:u,style:d,"aria-label":f,...p})=>{let m=(0,t.useRef)(null),h=s.findIndex(e=>e.value===a),g=h>=0?h:0;function _(e){let t=Array.from(e.currentTarget.querySelectorAll(`[role="radio"]:not([disabled])`)),n=document.activeElement,r=t.indexOf(n);if(r===-1)return;let i=-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`?(e.preventDefault(),i=(r+1)%t.length):(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),i=(r-1+t.length)%t.length),i>=0){t[i].focus();let e=t[i].dataset.color;e&&o?.(e)}}let v=a!==void 0&&!s.some(e=>e.value===a);return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":f??`Color`,className:[e.default.picker,u].filter(Boolean).join(` `),style:d,onKeyDown:_,...p,children:[s.map((e,t)=>(0,n.jsx)(r,{color:e.value,size:l,selected:e.value===a,onSelect:o,"aria-label":e.label??e.value,tabIndex:t===g&&!v?0:-1,"data-color":e.value},e.value)),c&&(0,n.jsxs)(n.Fragment,{children:[v&&a&&(0,n.jsx)(r,{color:a,size:l,selected:!0,onSelect:()=>m.current?.click(),"aria-label":`Custom color`,tabIndex:0,"data-color":a}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Choose custom color`,className:[e.default.swatch,e.default[`swatch-${l}`],e.default.customButton].filter(Boolean).join(` `),tabIndex:-1,onClick:()=>m.current?.click(),children:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,className:e.default.plusIcon,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3v10M3 8h10`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),(0,n.jsx)(`input`,{ref:m,type:`color`,value:v&&a?a:`#000000`,className:e.default.nativeInput,"aria-hidden":`true`,tabIndex:-1,onChange:e=>o?.(e.target.value)})]})]})};exports.ColorPicker=a,exports.ColorSwatch=r,exports.GNOME_PALETTE=i;
+const e=require("./ColorPicker.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u})=>(0,n.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r,"aria-label":l??t,disabled:o,className:[e.default.swatch,e.default[`swatch-${i}`],r?e.default.swatchSelected:null,s].filter(Boolean).join(` `),style:{"--swatch-color":t,...c},onClick:()=>a?.(t),...u,children:r&&(0,n.jsx)(`svg`,{className:e.default.checkmark,viewBox:`0 0 16 16`,fill:`none`,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M3 8l3.5 3.5L13 5`,stroke:`white`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`})})}),i=[{value:`#3584e4`,label:`Blue`},{value:`#2ec27e`,label:`Green`},{value:`#f6d32d`,label:`Yellow`},{value:`#ff7800`,label:`Orange`},{value:`#e01b24`,label:`Red`},{value:`#9141ac`,label:`Purple`},{value:`#986a44`,label:`Brown`},{value:`#2190a4`,label:`Teal`},{value:`#5e5c64`,label:`Slate`}],a=({value:a,onChange:o,colors:s=i,allowCustom:c=!1,size:l=`md`,className:u,style:d,"aria-label":f,...p})=>{let m=(0,t.useRef)(null),h=s.findIndex(e=>e.value===a),g=h>=0?h:0;function _(e){let t=Array.from(e.currentTarget.querySelectorAll(`[role="radio"]:not([disabled])`)),n=document.activeElement,r=t.indexOf(n);if(r===-1)return;let i=-1;if(e.key===`ArrowRight`||e.key===`ArrowDown`?(e.preventDefault(),i=(r+1)%t.length):(e.key===`ArrowLeft`||e.key===`ArrowUp`)&&(e.preventDefault(),i=(r-1+t.length)%t.length),i>=0){t[i].focus();let{color:e}=t[i].dataset;e&&o?.(e)}}let v=a!==void 0&&!s.some(e=>e.value===a);return(0,n.jsxs)(`div`,{role:`radiogroup`,"aria-label":f??`Color`,className:[e.default.picker,u].filter(Boolean).join(` `),style:d,onKeyDown:_,...p,children:[s.map((e,t)=>(0,n.jsx)(r,{color:e.value,size:l,selected:e.value===a,onSelect:o,"aria-label":e.label??e.value,tabIndex:t===g&&!v?0:-1,"data-color":e.value},e.value)),c&&(0,n.jsxs)(n.Fragment,{children:[v&&a&&(0,n.jsx)(r,{color:a,size:l,selected:!0,onSelect:()=>m.current?.click(),"aria-label":`Custom color`,tabIndex:0,"data-color":a}),(0,n.jsx)(`button`,{type:`button`,"aria-label":`Choose custom color`,className:[e.default.swatch,e.default[`swatch-${l}`],e.default.customButton].filter(Boolean).join(` `),tabIndex:-1,onClick:()=>m.current?.click(),children:(0,n.jsx)(`svg`,{viewBox:`0 0 16 16`,className:e.default.plusIcon,"aria-hidden":`true`,children:(0,n.jsx)(`path`,{d:`M8 3v10M3 8h10`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`})})}),(0,n.jsx)(`input`,{ref:m,type:`color`,value:v&&a?a:`#000000`,className:e.default.nativeInput,"aria-hidden":`true`,tabIndex:-1,onChange:e=>o?.(e.target.value)})]})]})};exports.ColorPicker=a,exports.ColorSwatch=r,exports.GNOME_PALETTE=i;
 //# sourceMappingURL=ColorPicker.cjs.map

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

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

package/dist/components/ColorPicker/ColorPicker.js

@@ -78,7 +78,7 @@ var a = ({ color: t, selected: n = !1, size: i = "md", onSelect: a, disabled: o
 		let i = -1;
 		if (e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), i = (r + 1) % t.length) : (e.key === "ArrowLeft" || e.key === "ArrowUp") && (e.preventDefault(), i = (r - 1 + t.length) % t.length), i >= 0) {
 			t[i].focus();
-			let e = t[i].dataset.color;
+			let { color: e } = t[i].dataset;
 			e && c?.(e);
 		}
 	}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.module.css.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── */\n\n.picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n/* ─── Swatch ──────────────────────────────────────────────────────────────── */\n\n.swatch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n\n  background-color: var(--swatch-color, #3584e4);\n\n  /* Unselected: subtle inner shadow for depth */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n  transition:\n    transform 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  outline: none;\n}\n\n/* ── Sizes ── */\n\n.swatch-sm {\n  width: 22px;\n  height: 22px;\n}\n.swatch-md {\n  width: 30px;\n  height: 30px;\n}\n.swatch-lg {\n  width: 38px;\n  height: 38px;\n}\n\n/* ── Hover ── */\n\n.swatch:hover:not(:disabled) {\n  transform: scale(1.12);\n}\n\n/* ── Focus ring ── */\n\n.swatch:focus-visible {\n  box-shadow:\n    inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Selected ──\n   White inner ring + outer ring in the swatch color → \"halo\" effect. */\n\n.swatchSelected {\n  transform: scale(1.05);\n  box-shadow:\n    inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n    0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n    0 0 0 2px var(--swatch-color),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Disabled ── */\n\n.swatch:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* ─── Checkmark icon ─────────────────────────────────────────────────────── */\n\n.checkmark {\n  width: 55%;\n  height: 55%;\n  flex-shrink: 0;\n  /* Drop shadow so the check reads on light-colored swatches (yellow, etc.) */\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/* ─── Custom \"+\" button ──────────────────────────────────────────────────── */\n\n.customButton {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n  box-shadow: none;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n  transform: scale(1.08);\n}\n\n.plusIcon {\n  width: 50%;\n  height: 50%;\n}\n\n/* ─── Hidden native input ────────────────────────────────────────────────── */\n\n.nativeInput {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .swatch {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n  }\n\n  .swatchSelected {\n    box-shadow:\n      inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n      0 0 0 2px var(--swatch-color);\n  }\n\n  .customButton {\n    border-color: rgba(255, 255, 255, 0.25);\n    color: rgba(255, 255, 255, 0.7);\n  }\n\n  .customButton:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n      white 20%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ColorPicker.module.css.cjs","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── */\n\n.picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n/* ─── Swatch ──────────────────────────────────────────────────────────────── */\n\n.swatch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  background-color: var(--swatch-color, #3584e4);\n\n  /* Unselected: subtle inner shadow for depth */\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);\n  transition:\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  outline: none;\n}\n\n/* ── Sizes ── */\n\n.swatch-sm {\n  width: 22px;\n  height: 22px;\n}\n\n.swatch-md {\n  width: 30px;\n  height: 30px;\n}\n\n.swatch-lg {\n  width: 38px;\n  height: 38px;\n}\n\n/* ── Hover ── */\n\n.swatch:hover:not(:disabled) {\n  transform: scale(1.12);\n}\n\n/* ── Focus ring ── */\n\n.swatch:focus-visible {\n  box-shadow:\n    inset 0 0 0 1px rgb(0 0 0 / 0.15),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Selected ──\n   White inner ring + outer ring in the swatch color → \"halo\" effect. */\n\n.swatchSelected {\n  transform: scale(1.05);\n  box-shadow:\n    inset 0 0 0 2px rgb(255 255 255 / 0.9),\n    0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px rgb(255 255 255 / 0.9),\n    0 0 0 2px var(--swatch-color),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Disabled ── */\n\n.swatch:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* ─── Checkmark icon ─────────────────────────────────────────────────────── */\n\n.checkmark {\n  width: 55%;\n  height: 55%;\n  flex-shrink: 0;\n\n  /* Drop shadow so the check reads on light-colored swatches (yellow, etc.) */\n  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));\n}\n\n/* ─── Custom \"+\" button ──────────────────────────────────────────────────── */\n\n.customButton {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1.5px dashed var(--gnome-card-shade-color, rgb(0 0 0 / 0.2));\n  box-shadow: none;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n  transform: scale(1.08);\n}\n\n.plusIcon {\n  width: 50%;\n  height: 50%;\n}\n\n/* ─── Hidden native input ────────────────────────────────────────────────── */\n\n.nativeInput {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .swatch {\n    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n  }\n\n  .swatchSelected {\n    box-shadow:\n      inset 0 0 0 2px rgb(255 255 255 / 0.85),\n      0 0 0 2px var(--swatch-color);\n  }\n\n  .customButton {\n    border-color: rgb(255 255 255 / 0.25);\n    color: rgb(255 255 255 / 0.7);\n  }\n\n  .customButton:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 80%,\n      white 20%\n    );\n  }\n}\n"],"mappings":""}

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

@@ -1,14 +1,14 @@
 var e = {
-	picker: "_picker_50hw4_3",
-	swatch: "_swatch_50hw4_12",
-	"swatch-sm": "_swatch-sm_50hw4_37",
-	"swatch-md": "_swatch-md_50hw4_41",
-	"swatch-lg": "_swatch-lg_50hw4_45",
-	swatchSelected: "_swatchSelected_50hw4_69",
-	checkmark: "_checkmark_50hw4_95",
-	customButton: "_customButton_50hw4_105",
-	plusIcon: "_plusIcon_50hw4_117",
-	nativeInput: "_nativeInput_50hw4_124"
+	picker: "_picker_6ltgd_3",
+	swatch: "_swatch_6ltgd_12",
+	"swatch-sm": "_swatch-sm_6ltgd_34",
+	"swatch-md": "_swatch-md_6ltgd_39",
+	"swatch-lg": "_swatch-lg_6ltgd_44",
+	swatchSelected: "_swatchSelected_6ltgd_68",
+	checkmark: "_checkmark_6ltgd_94",
+	customButton: "_customButton_6ltgd_105",
+	plusIcon: "_plusIcon_6ltgd_117",
+	nativeInput: "_nativeInput_6ltgd_124"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.module.css.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── */\n\n.picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n/* ─── Swatch ──────────────────────────────────────────────────────────────── */\n\n.swatch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n\n  background-color: var(--swatch-color, #3584e4);\n\n  /* Unselected: subtle inner shadow for depth */\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);\n\n  transition:\n    transform 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  outline: none;\n}\n\n/* ── Sizes ── */\n\n.swatch-sm {\n  width: 22px;\n  height: 22px;\n}\n.swatch-md {\n  width: 30px;\n  height: 30px;\n}\n.swatch-lg {\n  width: 38px;\n  height: 38px;\n}\n\n/* ── Hover ── */\n\n.swatch:hover:not(:disabled) {\n  transform: scale(1.12);\n}\n\n/* ── Focus ring ── */\n\n.swatch:focus-visible {\n  box-shadow:\n    inset 0 0 0 1px rgba(0, 0, 0, 0.15),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Selected ──\n   White inner ring + outer ring in the swatch color → \"halo\" effect. */\n\n.swatchSelected {\n  transform: scale(1.05);\n  box-shadow:\n    inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n    0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px rgba(255, 255, 255, 0.9),\n    0 0 0 2px var(--swatch-color),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Disabled ── */\n\n.swatch:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* ─── Checkmark icon ─────────────────────────────────────────────────────── */\n\n.checkmark {\n  width: 55%;\n  height: 55%;\n  flex-shrink: 0;\n  /* Drop shadow so the check reads on light-colored swatches (yellow, etc.) */\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));\n}\n\n/* ─── Custom \"+\" button ──────────────────────────────────────────────────── */\n\n.customButton {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1.5px dashed var(--gnome-card-shade-color, rgba(0, 0, 0, 0.2));\n  box-shadow: none;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 88%, black 12%);\n  transform: scale(1.08);\n}\n\n.plusIcon {\n  width: 50%;\n  height: 50%;\n}\n\n/* ─── Hidden native input ────────────────────────────────────────────────── */\n\n.nativeInput {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .swatch {\n    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n  }\n\n  .swatchSelected {\n    box-shadow:\n      inset 0 0 0 2px rgba(255, 255, 255, 0.85),\n      0 0 0 2px var(--swatch-color);\n  }\n\n  .customButton {\n    border-color: rgba(255, 255, 255, 0.25);\n    color: rgba(255, 255, 255, 0.7);\n  }\n\n  .customButton:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgba(255, 255, 255, 0.08)) 80%,\n      white 20%\n    );\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ColorPicker.module.css.js","names":[],"sources":["../../../src/components/ColorPicker/ColorPicker.module.css"],"sourcesContent":["/* ─── Picker container ────────────────────────────────────────────────────── */\n\n.picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  align-items: center;\n}\n\n/* ─── Swatch ──────────────────────────────────────────────────────────────── */\n\n.swatch {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--gnome-radius-pill);\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  flex-shrink: 0;\n  background-color: var(--swatch-color, #3584e4);\n\n  /* Unselected: subtle inner shadow for depth */\n  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);\n  transition:\n    transform var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease),\n    box-shadow var(--gnome-duration-fast, 100ms) var(--gnome-easing-default, ease);\n  outline: none;\n}\n\n/* ── Sizes ── */\n\n.swatch-sm {\n  width: 22px;\n  height: 22px;\n}\n\n.swatch-md {\n  width: 30px;\n  height: 30px;\n}\n\n.swatch-lg {\n  width: 38px;\n  height: 38px;\n}\n\n/* ── Hover ── */\n\n.swatch:hover:not(:disabled) {\n  transform: scale(1.12);\n}\n\n/* ── Focus ring ── */\n\n.swatch:focus-visible {\n  box-shadow:\n    inset 0 0 0 1px rgb(0 0 0 / 0.15),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Selected ──\n   White inner ring + outer ring in the swatch color → \"halo\" effect. */\n\n.swatchSelected {\n  transform: scale(1.05);\n  box-shadow:\n    inset 0 0 0 2px rgb(255 255 255 / 0.9),\n    0 0 0 2px var(--swatch-color);\n}\n\n.swatchSelected:focus-visible {\n  box-shadow:\n    inset 0 0 0 2px rgb(255 255 255 / 0.9),\n    0 0 0 2px var(--swatch-color),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px)) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(2px + var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 2px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ── Disabled ── */\n\n.swatch:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  transform: none;\n}\n\n/* ─── Checkmark icon ─────────────────────────────────────────────────────── */\n\n.checkmark {\n  width: 55%;\n  height: 55%;\n  flex-shrink: 0;\n\n  /* Drop shadow so the check reads on light-colored swatches (yellow, etc.) */\n  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.35));\n}\n\n/* ─── Custom \"+\" button ──────────────────────────────────────────────────── */\n\n.customButton {\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1.5px dashed var(--gnome-card-shade-color, rgb(0 0 0 / 0.2));\n  box-shadow: none;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.6));\n}\n\n.customButton:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 88%, black 12%);\n  transform: scale(1.08);\n}\n\n.plusIcon {\n  width: 50%;\n  height: 50%;\n}\n\n/* ─── Hidden native input ────────────────────────────────────────────────── */\n\n.nativeInput {\n  position: absolute;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .swatch {\n    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);\n  }\n\n  .swatchSelected {\n    box-shadow:\n      inset 0 0 0 2px rgb(255 255 255 / 0.85),\n      0 0 0 2px var(--swatch-color);\n  }\n\n  .customButton {\n    border-color: rgb(255 255 255 / 0.25);\n    color: rgb(255 255 255 / 0.7);\n  }\n\n  .customButton:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-card-bg-color, rgb(255 255 255 / 0.08)) 80%,\n      white 20%\n    );\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={outer:`_outer_1kote_3`,scroll:`_scroll_1kote_13`,table:`_table_1kote_20`,thead:`_thead_1kote_28`,th:`_th_1kote_28`,headerLabel:`_headerLabel_1kote_48`,sortBtn:`_sortBtn_1kote_55`,sortBtnActive:`_sortBtnActive_1kote_84`,sortActive:`_sortActive_1kote_89`,sortNeutral:`_sortNeutral_1kote_93`,tbody:`_tbody_1kote_99`,row:`_row_1kote_105`,rowSelectable:`_rowSelectable_1kote_114`,rowSelected:`_rowSelected_1kote_126`,td:`_td_1kote_136`,alignStart:`_alignStart_1kote_148`,alignCenter:`_alignCenter_1kote_152`,alignEnd:`_alignEnd_1kote_156`,checkboxCol:`_checkboxCol_1kote_162`,checkbox:`_checkbox_1kote_162`,emptyCell:`_emptyCell_1kote_178`,emptyLabel:`_emptyLabel_1kote_183`};exports.default=e;
+var e={outer:`_outer_1o4pk_3`,scroll:`_scroll_1o4pk_14`,table:`_table_1o4pk_21`,thead:`_thead_1o4pk_29`,th:`_th_1o4pk_29`,headerLabel:`_headerLabel_1o4pk_50`,sortBtn:`_sortBtn_1o4pk_57`,sortBtnActive:`_sortBtnActive_1o4pk_86`,sortActive:`_sortActive_1o4pk_91`,sortNeutral:`_sortNeutral_1o4pk_95`,tbody:`_tbody_1o4pk_101`,row:`_row_1o4pk_107`,rowSelectable:`_rowSelectable_1o4pk_116`,rowSelected:`_rowSelected_1o4pk_128`,td:`_td_1o4pk_138`,alignStart:`_alignStart_1o4pk_150`,alignCenter:`_alignCenter_1o4pk_154`,alignEnd:`_alignEnd_1o4pk_158`,checkboxCol:`_checkboxCol_1o4pk_164`,checkbox:`_checkbox_1o4pk_164`,emptyCell:`_emptyCell_1o4pk_180`,emptyLabel:`_emptyLabel_1o4pk_185`};exports.default=e;
 //# sourceMappingURL=ColumnView.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnView.module.css.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ColumnView.module.css.cjs","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #fff);\n\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #fff);\n\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgb(0 0 0 / 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

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

@@ -1,26 +1,26 @@
 var e = {
-	outer: "_outer_1kote_3",
-	scroll: "_scroll_1kote_13",
-	table: "_table_1kote_20",
-	thead: "_thead_1kote_28",
-	th: "_th_1kote_28",
-	headerLabel: "_headerLabel_1kote_48",
-	sortBtn: "_sortBtn_1kote_55",
-	sortBtnActive: "_sortBtnActive_1kote_84",
-	sortActive: "_sortActive_1kote_89",
-	sortNeutral: "_sortNeutral_1kote_93",
-	tbody: "_tbody_1kote_99",
-	row: "_row_1kote_105",
-	rowSelectable: "_rowSelectable_1kote_114",
-	rowSelected: "_rowSelected_1kote_126",
-	td: "_td_1kote_136",
-	alignStart: "_alignStart_1kote_148",
-	alignCenter: "_alignCenter_1kote_152",
-	alignEnd: "_alignEnd_1kote_156",
-	checkboxCol: "_checkboxCol_1kote_162",
-	checkbox: "_checkbox_1kote_162",
-	emptyCell: "_emptyCell_1kote_178",
-	emptyLabel: "_emptyLabel_1kote_183"
+	outer: "_outer_1o4pk_3",
+	scroll: "_scroll_1o4pk_14",
+	table: "_table_1o4pk_21",
+	thead: "_thead_1o4pk_29",
+	th: "_th_1o4pk_29",
+	headerLabel: "_headerLabel_1o4pk_50",
+	sortBtn: "_sortBtn_1o4pk_57",
+	sortBtnActive: "_sortBtnActive_1o4pk_86",
+	sortActive: "_sortActive_1o4pk_91",
+	sortNeutral: "_sortNeutral_1o4pk_95",
+	tbody: "_tbody_1o4pk_101",
+	row: "_row_1o4pk_107",
+	rowSelectable: "_rowSelectable_1o4pk_116",
+	rowSelected: "_rowSelected_1o4pk_128",
+	td: "_td_1o4pk_138",
+	alignStart: "_alignStart_1o4pk_150",
+	alignCenter: "_alignCenter_1o4pk_154",
+	alignEnd: "_alignEnd_1o4pk_158",
+	checkboxCol: "_checkboxCol_1o4pk_164",
+	checkbox: "_checkbox_1o4pk_164",
+	emptyCell: "_emptyCell_1o4pk_180",
+	emptyLabel: "_emptyLabel_1o4pk_185"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnView.module.css.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #ffffff);\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgba(0, 0, 0, 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgba(0, 0, 0, 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgba(0, 0, 0, 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ColumnView.module.css.js","names":[],"sources":["../../../src/components/ColumnView/ColumnView.module.css"],"sourcesContent":["/* ─── Outer container (border + radius, no overflow to preserve sticky) ────── */\n\n.outer {\n  border: 1px solid var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-lg, 12px);\n  background: var(--gnome-card-bg-color, #fff);\n\n  /* overflow:clip clips to border-radius without creating a scroll ctx */\n  overflow: clip;\n}\n\n/* ─── Scroll container ──────────────────────────────────────────────────────── */\n\n.scroll {\n  overflow-y: auto;\n  width: 100%;\n}\n\n/* ─── Table ─────────────────────────────────────────────────────────────────── */\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: auto;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.thead {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--gnome-card-bg-color, #fff);\n\n  /* Separator below sticky header */\n  box-shadow: 0 1px 0 var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n}\n\n.th {\n  padding: 0 var(--gnome-space-4, 24px);\n  height: 40px;\n  text-align: start;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  white-space: nowrap;\n  vertical-align: middle;\n}\n\n.headerLabel {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n}\n\n/* ─── Sort button ───────────────────────────────────────────────────────────── */\n\n.sortBtn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  appearance: none;\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: 700;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n  outline: none;\n  border-radius: var(--gnome-radius-sm, 4px);\n  transition: opacity var(--gnome-transition-fast, 100ms) ease;\n}\n\n.sortBtn:hover {\n  opacity: 0.8;\n}\n\n.sortBtn:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 2px;\n  opacity: 0.8;\n}\n\n.sortBtnActive {\n  opacity: 1;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortActive {\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n.sortNeutral {\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Body ──────────────────────────────────────────────────────────────────── */\n\n.tbody {\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Row ───────────────────────────────────────────────────────────────────── */\n\n.row {\n  outline: none;\n  transition: background-color var(--gnome-transition-fast, 100ms) ease;\n}\n\n.row:focus-visible {\n  box-shadow: inset 0 0 0 2px var(--gnome-accent-color, #3584e4);\n}\n\n.rowSelectable {\n  cursor: pointer;\n}\n\n.rowSelectable:hover {\n  background-color: var(--gnome-hover-overlay, rgb(0 0 0 / 0.07));\n}\n\n.rowSelectable:active {\n  background-color: var(--gnome-active-overlay, rgb(0 0 0 / 0.12));\n}\n\n.rowSelected {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 15%, transparent);\n}\n\n.rowSelected:hover {\n  background-color: color-mix(in srgb, var(--gnome-accent-color, #3584e4) 22%, transparent);\n}\n\n/* ─── Cell ──────────────────────────────────────────────────────────────────── */\n\n.td {\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  vertical-align: middle;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Alignment ─────────────────────────────────────────────────────────────── */\n\n.alignStart {\n  text-align: start;\n}\n\n.alignCenter {\n  text-align: center;\n}\n\n.alignEnd {\n  text-align: end;\n}\n\n/* ─── Checkbox column ───────────────────────────────────────────────────────── */\n\n.checkboxCol {\n  width: 48px;\n  padding-inline: var(--gnome-space-3, 18px);\n  text-align: center;\n}\n\n.checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--gnome-accent-color, #3584e4);\n  vertical-align: middle;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.emptyCell {\n  padding: var(--gnome-space-6, 36px) var(--gnome-space-4, 24px);\n  text-align: center;\n}\n\n.emptyLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.55;\n}\n\n/* ─── High contrast ─────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .outer {\n    border-width: 2px;\n  }\n\n  .row + .row .td {\n    border-top: 1px solid var(--gnome-divider-color, rgb(0 0 0 / 0.15));\n  }\n\n  .sortBtn {\n    text-decoration: underline;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={row:`_row_1rib3_3`,disabled:`_disabled_1rib3_16`,leading:`_leading_1rib3_23`,content:`_content_1rib3_32`,title:`_title_1rib3_40`,subtitle:`_subtitle_1rib3_51`,comboWrap:`_comboWrap_1rib3_65`,trigger:`_trigger_1rib3_73`,triggerOpen:`_triggerOpen_1rib3_126`,triggerLabel:`_triggerLabel_1rib3_136`,placeholder:`_placeholder_1rib3_144`,chevron:`_chevron_1rib3_150`,chevronOpen:`_chevronOpen_1rib3_157`,list:`_list_1rib3_163`,"list-in":`_list-in_1rib3_1`,listDown:`_listDown_1rib3_200`,listUp:`_listUp_1rib3_204`,"list-in-up":`_list-in-up_1rib3_1`,option:`_option_1rib3_224`,optionActive:`_optionActive_1rib3_241`,optionSelected:`_optionSelected_1rib3_245`,optionDisabled:`_optionDisabled_1rib3_249`,optionLabel:`_optionLabel_1rib3_255`,checkIcon:`_checkIcon_1rib3_263`};exports.default=e;
+var e={row:`_row_lh83j_3`,disabled:`_disabled_lh83j_16`,leading:`_leading_lh83j_23`,content:`_content_lh83j_32`,title:`_title_lh83j_40`,subtitle:`_subtitle_lh83j_51`,comboWrap:`_comboWrap_lh83j_65`,trigger:`_trigger_lh83j_73`,triggerOpen:`_triggerOpen_lh83j_121`,triggerLabel:`_triggerLabel_lh83j_131`,placeholder:`_placeholder_lh83j_139`,chevron:`_chevron_lh83j_145`,chevronOpen:`_chevronOpen_lh83j_152`,list:`_list_lh83j_158`,"list-in":`_list-in_lh83j_1`,listDown:`_listDown_lh83j_192`,listUp:`_listUp_lh83j_196`,"list-in-up":`_list-in-up_lh83j_1`,option:`_option_lh83j_217`,optionActive:`_optionActive_lh83j_231`,optionSelected:`_optionSelected_lh83j_235`,optionDisabled:`_optionDisabled_lh83j_239`,optionLabel:`_optionLabel_lh83j_245`,checkIcon:`_checkIcon_lh83j_253`};exports.default=e;
 //# sourceMappingURL=ComboRow.module.css.cjs.map