@gnome-ui/react 1.45.0 → 1.45.2

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(\n    14% 44%,\n    0 58%,\n    36% 100%,\n    100% 12%,\n    84% 0%,\n    36% 68%\n  );\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(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\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(\n      in srgb,\n      var(--gnome-card-bg-color, #383838) 85%,\n      white 15%\n    );\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .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  -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":""}

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

@@ -1,4 +1,4 @@
-var e = { checkbox: "_checkbox_jnffk_3" };
+var e = { checkbox: "_checkbox_15vcc_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(\n    14% 44%,\n    0 58%,\n    36% 100%,\n    100% 12%,\n    84% 0%,\n    36% 68%\n  );\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(\n    in srgb,\n    var(--gnome-card-bg-color, #ffffff) 94%,\n    black 6%\n  );\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(\n      in srgb,\n      var(--gnome-card-bg-color, #383838) 85%,\n      white 15%\n    );\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .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  -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":""}

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

@@ -1,2 +1,2 @@
-export { Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
+export { Checkbox } from './Checkbox';

package/dist/components/Checkbox.cjs

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

package/dist/components/Chip/Chip.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Chip.module.css.cjs`);let n=require(`react/jsx-runtime`),r=require(`@gnome-ui/icons`);function i({label:i,icon:a,onRemove:o,selectable:s=!1,selected:c=!1,onToggle:l,disabled:u=!1,className:d,...f}){let p=s&&!o,m=[t.default.chip,c?t.default.selected:null,u?t.default.disabled:null,p?t.default.selectable:null,d].filter(Boolean).join(` `),h=(0,n.jsxs)(n.Fragment,{children:[a&&(0,n.jsx)(`span`,{className:t.default.icon,children:(0,n.jsx)(e.Icon,{icon:a,size:`sm`,"aria-hidden":!0})}),(0,n.jsx)(`span`,{className:t.default.label,children:i}),o&&(0,n.jsx)(`button`,{type:`button`,className:t.default.remove,"aria-label":`Remove ${i}`,disabled:u,onClick:e=>{e.stopPropagation(),o()},tabIndex:u?-1:0,children:(0,n.jsx)(e.Icon,{icon:r.Close,size:`sm`,"aria-hidden":!0})})]});return p?(0,n.jsx)(`button`,{type:`button`,role:`checkbox`,"aria-checked":c,"aria-label":i,disabled:u,onClick:l,className:m,...f,children:h}):(0,n.jsx)(`span`,{className:m,...f,children:h})}exports.Chip=i;
+const e=require("../Icon/Icon.cjs"),t=require("./Chip.module.css.cjs");let n=require("react/jsx-runtime"),r=require("@gnome-ui/icons");var i=({label:i,icon:a,onRemove:o,selectable:s=!1,selected:c=!1,onToggle:l,disabled:u=!1,className:d,...f})=>{let p=s&&!o,m=[t.default.chip,c?t.default.selected:null,u?t.default.disabled:null,p?t.default.selectable:null,d].filter(Boolean).join(` `),h=(0,n.jsxs)(n.Fragment,{children:[a&&(0,n.jsx)(`span`,{className:t.default.icon,children:(0,n.jsx)(e.Icon,{icon:a,size:`sm`,"aria-hidden":!0})}),(0,n.jsx)(`span`,{className:t.default.label,children:i}),o&&(0,n.jsx)(`button`,{type:`button`,className:t.default.remove,"aria-label":`Remove ${i}`,disabled:u,onClick:e=>{e.stopPropagation(),o()},tabIndex:u?-1:0,children:(0,n.jsx)(e.Icon,{icon:r.Close,size:`sm`,"aria-hidden":!0})})]});return p?(0,n.jsx)(`button`,{type:`button`,role:`checkbox`,"aria-checked":c,"aria-label":i,disabled:u,onClick:l,className:m,...f,children:h}):(0,n.jsx)(`span`,{className:m,...f,children:h})};exports.Chip=i;
 //# sourceMappingURL=Chip.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.cjs","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Close } from \"@gnome-ui/icons\";\nimport styles from \"./Chip.module.css\";\n\nexport interface ChipProps extends HTMLAttributes<HTMLElement> {\n  /** Text label displayed inside the chip. */\n  label: string;\n  /** Leading icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * When provided, renders a remove (×) button and calls this handler.\n   * The chip root becomes a `<span>`; only the remove button is interactive.\n   */\n  onRemove?: () => void;\n  /**\n   * When true the chip renders as a toggle button.\n   * Use `selected` + `onToggle` to control its state.\n   */\n  selectable?: boolean;\n  /** Active/selected state. Only relevant when `selectable` is true. */\n  selected?: boolean;\n  /**\n   * Called when a selectable chip is clicked.\n   * Only relevant when `selectable` is true.\n   */\n  onToggle?: () => void;\n  /** Disabled state — applies to both selectable chips and the remove button. */\n  disabled?: boolean;\n}\n\n/**\n * Compact pill-shaped label for tags, filters, and selection states.\n *\n * Three usage modes:\n * - **Static** — just a visual label (no `onRemove`, no `selectable`).\n * - **Removable** — add `onRemove` to show a × button.\n * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.\n *\n * Pair with `WrapBox` for multi-chip layouts.\n */\nexport function Chip({\n  label,\n  icon,\n  onRemove,\n  selectable = false,\n  selected = false,\n  onToggle,\n  disabled = false,\n  className,\n  ...props\n}: ChipProps) {\n  const isInteractive = selectable && !onRemove;\n\n  const chipClasses = [\n    styles.chip,\n    selected ? styles.selected : null,\n    disabled ? styles.disabled : null,\n    isInteractive ? styles.selectable : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const content = (\n    <>\n      {icon && (\n        <span className={styles.icon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className={styles.remove}\n          aria-label={`Remove ${label}`}\n          disabled={disabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon icon={Close} size=\"sm\" aria-hidden />\n        </button>\n      )}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-label={label}\n        disabled={disabled}\n        onClick={onToggle}\n        className={chipClasses}\n        {...(props as HTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      className={chipClasses}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":"uIA0CA,SAAgB,EAAK,CACnB,QACA,OACA,WACA,aAAa,GACb,WAAW,GACX,WACA,WAAW,GACX,YACA,GAAG,GACS,CACZ,IAAM,EAAgB,GAAc,CAAC,EAE/B,EAAc,CAClB,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAgB,EAAA,QAAO,WAAa,KACpC,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAEN,GACJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,UAAU,IACZ,WACV,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAU,EAEZ,SAAU,EAAW,GAAK,YAE1B,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,GAAc,CAAA,CACpC,CAAA,CAEV,CAAA,CAAA,CAoBL,OAjBI,GAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,WACL,eAAc,EACd,aAAY,EACF,WACV,QAAS,EACT,UAAW,EACX,GAAK,WAEJ,EACM,CAAA,EAKX,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,EACX,GAAI,WAEH,EACI,CAAA"}
+{"version":3,"file":"Chip.cjs","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { Close } from '@gnome-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Chip.module.css';\n\nexport interface ChipProps extends HTMLAttributes<HTMLElement> {\n  /** Text label displayed inside the chip. */\n  label: string;\n  /** Leading icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * When provided, renders a remove (×) button and calls this handler.\n   * The chip root becomes a `<span>`; only the remove button is interactive.\n   */\n  onRemove?: () => void;\n  /**\n   * When true the chip renders as a toggle button.\n   * Use `selected` + `onToggle` to control its state.\n   */\n  selectable?: boolean;\n  /** Active/selected state. Only relevant when `selectable` is true. */\n  selected?: boolean;\n  /**\n   * Called when a selectable chip is clicked.\n   * Only relevant when `selectable` is true.\n   */\n  onToggle?: () => void;\n  /** Disabled state — applies to both selectable chips and the remove button. */\n  disabled?: boolean;\n}\n\n/**\n * Compact pill-shaped label for tags, filters, and selection states.\n *\n * Three usage modes:\n * - **Static** — just a visual label (no `onRemove`, no `selectable`).\n * - **Removable** — add `onRemove` to show a × button.\n * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.\n *\n * Pair with `WrapBox` for multi-chip layouts.\n */\nexport const Chip = ({\n  label,\n  icon,\n  onRemove,\n  selectable = false,\n  selected = false,\n  onToggle,\n  disabled = false,\n  className,\n  ...props\n}: ChipProps) => {\n  const isInteractive = selectable && !onRemove;\n\n  const chipClasses = [\n    styles.chip,\n    selected ? styles.selected : null,\n    disabled ? styles.disabled : null,\n    isInteractive ? styles.selectable : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {icon && (\n        <span className={styles.icon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className={styles.remove}\n          aria-label={`Remove ${label}`}\n          disabled={disabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon icon={Close} size=\"sm\" aria-hidden />\n        </button>\n      )}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-label={label}\n        disabled={disabled}\n        onClick={onToggle}\n        className={chipClasses}\n        {...(props as HTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span className={chipClasses} {...props}>\n      {content}\n    </span>\n  );\n};\n"],"mappings":"uIA4CA,IAAa,GAAQ,CACnB,QACA,OACA,WACA,aAAa,GACb,WAAW,GACX,WACA,WAAW,GACX,YACA,GAAG,KACY,CACf,IAAM,EAAgB,GAAc,CAAC,EAE/B,EAAc,CAClB,EAAA,QAAO,KACP,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAW,EAAA,QAAO,SAAW,KAC7B,EAAgB,EAAA,QAAO,WAAa,KACpC,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAEL,GACJ,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,GAER,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC3C,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,OAClB,aAAY,UAAU,IACZ,WACV,QAAU,GAAM,CACd,EAAE,gBAAgB,EAClB,EAAS,CACX,EACA,SAAU,EAAW,GAAK,YAE1B,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAA,MAAO,KAAK,KAAK,cAAA,EAAa,CAAA,CACpC,CAAA,CAEV,CAAA,CAAA,EAoBJ,OAjBI,GAEA,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,WACL,eAAc,EACd,aAAY,EACF,WACV,QAAS,EACT,UAAW,EACX,GAAK,WAEJ,CACK,CAAA,GAKV,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAa,GAAI,WAC/B,CACG,CAAA,CAEV"}

package/dist/components/Chip/Chip.d.ts

@@ -1,5 +1,5 @@
-import { HTMLAttributes } from 'react';
 import { IconDefinition } from '@gnome-ui/icons';
+import { HTMLAttributes } from 'react';
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
     /** Text label displayed inside the chip. */
     label: string;
@@ -35,4 +35,4 @@ export interface ChipProps extends HTMLAttributes<HTMLElement> {
  *
  * Pair with `WrapBox` for multi-chip layouts.
  */
-export declare function Chip({ label, icon, onRemove, selectable, selected, onToggle, disabled, className, ...props }: ChipProps): import("react/jsx-runtime").JSX.Element;
+export declare const Chip: ({ label, icon, onRemove, selectable, selected, onToggle, disabled, className, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Chip/Chip.js

@@ -3,7 +3,7 @@ import t from "./Chip.module.css.js";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Close as a } from "@gnome-ui/icons";
 //#region src/components/Chip/Chip.tsx
-function o({ label: o, icon: s, onRemove: c, selectable: l = !1, selected: u = !1, onToggle: d, disabled: f = !1, className: p, ...m }) {
+var o = ({ label: o, icon: s, onRemove: c, selectable: l = !1, selected: u = !1, onToggle: d, disabled: f = !1, className: p, ...m }) => {
 	let h = l && !c, g = [
 		t.chip,
 		u ? t.selected : null,
@@ -54,7 +54,7 @@ function o({ label: o, icon: s, onRemove: c, selectable: l = !1, selected: u = !
 		...m,
 		children: _
 	});
-}
+};
 //#endregion
 export { o as Chip };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { HTMLAttributes } from \"react\";\nimport type { IconDefinition } from \"@gnome-ui/icons\";\nimport { Icon } from \"../Icon\";\nimport { Close } from \"@gnome-ui/icons\";\nimport styles from \"./Chip.module.css\";\n\nexport interface ChipProps extends HTMLAttributes<HTMLElement> {\n  /** Text label displayed inside the chip. */\n  label: string;\n  /** Leading icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * When provided, renders a remove (×) button and calls this handler.\n   * The chip root becomes a `<span>`; only the remove button is interactive.\n   */\n  onRemove?: () => void;\n  /**\n   * When true the chip renders as a toggle button.\n   * Use `selected` + `onToggle` to control its state.\n   */\n  selectable?: boolean;\n  /** Active/selected state. Only relevant when `selectable` is true. */\n  selected?: boolean;\n  /**\n   * Called when a selectable chip is clicked.\n   * Only relevant when `selectable` is true.\n   */\n  onToggle?: () => void;\n  /** Disabled state — applies to both selectable chips and the remove button. */\n  disabled?: boolean;\n}\n\n/**\n * Compact pill-shaped label for tags, filters, and selection states.\n *\n * Three usage modes:\n * - **Static** — just a visual label (no `onRemove`, no `selectable`).\n * - **Removable** — add `onRemove` to show a × button.\n * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.\n *\n * Pair with `WrapBox` for multi-chip layouts.\n */\nexport function Chip({\n  label,\n  icon,\n  onRemove,\n  selectable = false,\n  selected = false,\n  onToggle,\n  disabled = false,\n  className,\n  ...props\n}: ChipProps) {\n  const isInteractive = selectable && !onRemove;\n\n  const chipClasses = [\n    styles.chip,\n    selected ? styles.selected : null,\n    disabled ? styles.disabled : null,\n    isInteractive ? styles.selectable : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const content = (\n    <>\n      {icon && (\n        <span className={styles.icon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className={styles.remove}\n          aria-label={`Remove ${label}`}\n          disabled={disabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon icon={Close} size=\"sm\" aria-hidden />\n        </button>\n      )}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-label={label}\n        disabled={disabled}\n        onClick={onToggle}\n        className={chipClasses}\n        {...(props as HTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span\n      className={chipClasses}\n      {...props}\n    >\n      {content}\n    </span>\n  );\n}\n"],"mappings":";;;;;AA0CA,SAAgB,EAAK,EACnB,UACA,SACA,aACA,gBAAa,IACb,cAAW,IACX,aACA,cAAW,IACX,cACA,GAAG,KACS;CACZ,IAAM,IAAgB,KAAc,CAAC,GAE/B,IAAc;EAClB,EAAO;EACP,IAAW,EAAO,WAAW;EAC7B,IAAW,EAAO,WAAW;EAC7B,IAAgB,EAAO,aAAa;EACpC;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,EAEN,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;IAAc,CAAA;GACrC,CAAA;EAET,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;GAAa,CAAA;EAC5C,KACC,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,cAAY,UAAU;GACZ;GACV,UAAU,MAAM;AAEd,IADA,EAAE,iBAAiB,EACnB,GAAU;;GAEZ,UAAU,IAAW,KAAK;aAE1B,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAK;IAAK,eAAA;IAAc,CAAA;GACpC,CAAA;EAEV,EAAA,CAAA;AAoBL,QAjBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY;EACF;EACV,SAAS;EACT,WAAW;EACX,GAAK;YAEJ;EACM,CAAA,GAKX,kBAAC,QAAD;EACE,WAAW;EACX,GAAI;YAEH;EACI,CAAA"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { Close } from '@gnome-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Chip.module.css';\n\nexport interface ChipProps extends HTMLAttributes<HTMLElement> {\n  /** Text label displayed inside the chip. */\n  label: string;\n  /** Leading icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /**\n   * When provided, renders a remove (×) button and calls this handler.\n   * The chip root becomes a `<span>`; only the remove button is interactive.\n   */\n  onRemove?: () => void;\n  /**\n   * When true the chip renders as a toggle button.\n   * Use `selected` + `onToggle` to control its state.\n   */\n  selectable?: boolean;\n  /** Active/selected state. Only relevant when `selectable` is true. */\n  selected?: boolean;\n  /**\n   * Called when a selectable chip is clicked.\n   * Only relevant when `selectable` is true.\n   */\n  onToggle?: () => void;\n  /** Disabled state — applies to both selectable chips and the remove button. */\n  disabled?: boolean;\n}\n\n/**\n * Compact pill-shaped label for tags, filters, and selection states.\n *\n * Three usage modes:\n * - **Static** — just a visual label (no `onRemove`, no `selectable`).\n * - **Removable** — add `onRemove` to show a × button.\n * - **Selectable** — add `selectable` + `selected` + `onToggle` for toggle behaviour.\n *\n * Pair with `WrapBox` for multi-chip layouts.\n */\nexport const Chip = ({\n  label,\n  icon,\n  onRemove,\n  selectable = false,\n  selected = false,\n  onToggle,\n  disabled = false,\n  className,\n  ...props\n}: ChipProps) => {\n  const isInteractive = selectable && !onRemove;\n\n  const chipClasses = [\n    styles.chip,\n    selected ? styles.selected : null,\n    disabled ? styles.disabled : null,\n    isInteractive ? styles.selectable : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {icon && (\n        <span className={styles.icon}>\n          <Icon icon={icon} size=\"sm\" aria-hidden />\n        </span>\n      )}\n      <span className={styles.label}>{label}</span>\n      {onRemove && (\n        <button\n          type=\"button\"\n          className={styles.remove}\n          aria-label={`Remove ${label}`}\n          disabled={disabled}\n          onClick={(e) => {\n            e.stopPropagation();\n            onRemove();\n          }}\n          tabIndex={disabled ? -1 : 0}\n        >\n          <Icon icon={Close} size=\"sm\" aria-hidden />\n        </button>\n      )}\n    </>\n  );\n\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-label={label}\n        disabled={disabled}\n        onClick={onToggle}\n        className={chipClasses}\n        {...(props as HTMLAttributes<HTMLButtonElement>)}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  return (\n    <span className={chipClasses} {...props}>\n      {content}\n    </span>\n  );\n};\n"],"mappings":";;;;;AA4CA,IAAa,KAAQ,EACnB,UACA,SACA,aACA,gBAAa,IACb,cAAW,IACX,aACA,cAAW,IACX,cACA,GAAG,QACY;CACf,IAAM,IAAgB,KAAc,CAAC,GAE/B,IAAc;EAClB,EAAO;EACP,IAAW,EAAO,WAAW;EAC7B,IAAW,EAAO,WAAW;EAC7B,IAAgB,EAAO,aAAa;EACpC;CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,GAEL,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG,KACC,kBAAC,QAAD;GAAM,WAAW,EAAO;aACtB,kBAAC,GAAD;IAAY;IAAM,MAAK;IAAK,eAAA;GAAa,CAAA;EACrC,CAAA;EAER,kBAAC,QAAD;GAAM,WAAW,EAAO;aAAQ;EAAY,CAAA;EAC3C,KACC,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,cAAY,UAAU;GACZ;GACV,UAAU,MAAM;IAEd,AADA,EAAE,gBAAgB,GAClB,EAAS;GACX;GACA,UAAU,IAAW,KAAK;aAE1B,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAK;IAAK,eAAA;GAAa,CAAA;EACpC,CAAA;CAEV,EAAA,CAAA;CAoBJ,OAjBI,IAEA,kBAAC,UAAD;EACE,MAAK;EACL,MAAK;EACL,gBAAc;EACd,cAAY;EACF;EACV,SAAS;EACT,WAAW;EACX,GAAK;YAEJ;CACK,CAAA,IAKV,kBAAC,QAAD;EAAM,WAAW;EAAa,GAAI;YAC/B;CACG,CAAA;AAEV"}

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

@@ -1,2 +1,2 @@
-var e={chip:`_chip_e26qc_3`,selectable:`_selectable_e26qc_31`,selected:`_selected_e26qc_55`,disabled:`_disabled_e26qc_68`,icon:`_icon_e26qc_76`,label:`_label_e26qc_85`,remove:`_remove_e26qc_91`};exports.default=e;
+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;
 //# 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\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":""}

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

@@ -1,11 +1,11 @@
 var e = {
-	chip: "_chip_e26qc_3",
-	selectable: "_selectable_e26qc_31",
-	selected: "_selected_e26qc_55",
-	disabled: "_disabled_e26qc_68",
-	icon: "_icon_e26qc_76",
-	label: "_label_e26qc_85",
-	remove: "_remove_e26qc_91"
+	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"
 };
 //#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\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":""}

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

@@ -1,2 +1,2 @@
-export { Chip } from './Chip';
 export type { ChipProps } from './Chip';
+export { Chip } from './Chip';

package/dist/components/Chip.cjs

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

package/dist/components/Clamp/Clamp.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Clamp.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({maximumSize:n=600,children:r,className:i,style:a,...o}){return(0,t.jsx)(`div`,{className:[e.default.clamp,i].filter(Boolean).join(` `),style:{maxWidth:n,...a},...o,children:r})}exports.Clamp=n;
+const e=require("./Clamp.module.css.cjs");let t=require("react/jsx-runtime");var n=({maximumSize:n=600,children:r,className:i,style:a,...o})=>(0,t.jsx)(`div`,{className:[e.default.clamp,i].filter(Boolean).join(` `),style:{maxWidth:n,...a},...o,children:r});exports.Clamp=n;
 //# sourceMappingURL=Clamp.cjs.map

package/dist/components/Clamp/Clamp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Clamp.cjs","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Clamp.module.css\";\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport function Clamp({\n  maximumSize = 600,\n  children,\n  className,\n  style,\n  ...props\n}: ClampProps) {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(\" \")}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":"6EAkCA,SAAgB,EAAM,CACpB,cAAc,IACd,WACA,YACA,QACA,GAAG,GACU,CACb,OACE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,MAAO,CAAE,SAAU,EAAa,GAAG,EAAO,CAC1C,GAAI,EAEH,WACG,CAAA"}
+{"version":3,"file":"Clamp.cjs","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Clamp.module.css';\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport const Clamp = ({ maximumSize = 600, children, className, style, ...props }: ClampProps) => {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(' ')}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":"6EAmCA,IAAa,GAAS,CAAE,cAAc,IAAK,WAAU,YAAW,QAAO,GAAG,MAEtE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,MAAO,CAAE,SAAU,EAAa,GAAG,CAAM,EACzC,GAAI,EAEH,UACE,CAAA"}

package/dist/components/Clamp/Clamp.d.ts

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

package/dist/components/Clamp/Clamp.js

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

package/dist/components/Clamp/Clamp.js.map

@@ -1 +1 @@
-{"version":3,"file":"Clamp.js","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport styles from \"./Clamp.module.css\";\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport function Clamp({\n  maximumSize = 600,\n  children,\n  className,\n  style,\n  ...props\n}: ClampProps) {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(\" \")}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;AAkCA,SAAgB,EAAM,EACpB,iBAAc,KACd,aACA,cACA,UACA,GAAG,KACU;AACb,QACE,kBAAC,OAAD;EACE,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,OAAO;GAAE,UAAU;GAAa,GAAG;GAAO;EAC1C,GAAI;EAEH;EACG,CAAA"}
+{"version":3,"file":"Clamp.js","names":[],"sources":["../../../src/components/Clamp/Clamp.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Clamp.module.css';\n\nexport interface ClampProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum content width in pixels.\n   * The element shrinks freely below this value.\n   * Defaults to `600` — the Adwaita recommended narrow-content width.\n   */\n  maximumSize?: number;\n  /**\n   * Fractional width (0–1) of the viewport to use when the viewport is\n   * narrower than `maximumSize`. Useful for keeping a comfortable margin\n   * on medium-width screens. Set to `1` (default) to always fill the width.\n   */\n  tighteningThreshold?: number;\n  children?: ReactNode;\n}\n\n/**\n * Constrains its child to a maximum width while allowing it to shrink freely,\n * mirroring the Adwaita `AdwClamp` widget.\n *\n * Use this to keep readable line lengths and comfortable reading widths on\n * large screens while still filling the available space on narrow screens.\n *\n * @example\n * // Settings page — content never wider than 600 px\n * <Clamp maximumSize={600}>\n *   <BoxedList>…</BoxedList>\n * </Clamp>\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Clamp.html\n */\nexport const Clamp = ({ maximumSize = 600, children, className, style, ...props }: ClampProps) => {\n  return (\n    <div\n      className={[styles.clamp, className].filter(Boolean).join(' ')}\n      style={{ maxWidth: maximumSize, ...style }}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;AAmCA,IAAa,KAAS,EAAE,iBAAc,KAAK,aAAU,cAAW,UAAO,GAAG,QAEtE,kBAAC,OAAD;CACE,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CAC7D,OAAO;EAAE,UAAU;EAAa,GAAG;CAAM;CACzC,GAAI;CAEH;AACE,CAAA"}

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

@@ -1,2 +1,2 @@
-export { Clamp } from './Clamp';
 export type { ClampProps } from './Clamp';
+export { Clamp } from './Clamp';

package/dist/components/Clamp.cjs

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

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`);function r({color:t,selected:r=!1,size:i=`md`,onSelect:a,disabled:o=!1,className:s,style:c,"aria-label":l,...u}){return(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`})})})}var 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`}];function 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 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;
 //# 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 {\n  useRef,\n  type CSSProperties,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from \"react\";\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 function 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\n          className={styles.checkmark}\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          aria-hidden=\"true\"\n        >\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). */\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 function 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>(\n        `[role=\"radio\"]:not([disabled])`\n      )\n    );\n    const focused = document.activeElement as HTMLButtonElement;\n    const idx = all.indexOf(focused);\n    if (idx === -1) return;\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    if (next >= 0) {\n      all[next].focus();\n      const color = all[next].dataset.color;\n      if (color) onChange?.(color);\n    }\n  }\n\n  // Decide whether the current `value` is a custom (not in palette) color.\n  const isCustom =\n    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.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":"sGA6BA,IAAa,GAAe,CAC1B,QACA,WAAW,GACX,OAAO,KACP,WACA,WAAW,GACX,YACA,QACA,aAAc,EACd,GAAG,MAGD,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,KAAK,QACL,eAAc,EACd,aAAY,GAAa,EACf,WACV,UAAW,CACT,EAAA,QAAO,OACP,EAAA,QAAO,UAAU,KACjB,EAAW,EAAA,QAAO,eAAiB,KACnC,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CAAE,iBAAkB,EAAO,GAAG,CAAM,EAC3C,YAAe,IAAW,CAAK,EAC/B,GAAI,WAEH,IACC,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,UAAW,QAAQ,YAAY,KAAK,OAAO,cAAY,iBAC5E,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,oBACF,OAAO,QACP,YAAY,IACZ,cAAc,QACd,eAAe,OAChB,CAAA,CACE,CAAA,CAED,CAAA,EAeC,EAAoC,CAC/C,CAAE,MAAO,UAAW,MAAO,MAAO,EAClC,CAAE,MAAO,UAAW,MAAO,OAAQ,EACnC,CAAE,MAAO,UAAW,MAAO,QAAS,EACpC,CAAE,MAAO,UAAW,MAAO,QAAS,EACpC,CAAE,MAAO,UAAW,MAAO,KAAM,EACjC,CAAE,MAAO,UAAW,MAAO,QAAS,EACpC,CAAE,MAAO,UAAW,MAAO,OAAQ,EACnC,CAAE,MAAO,UAAW,MAAO,MAAO,EAClC,CAAE,MAAO,UAAW,MAAO,OAAQ,CACrC,EA0Ca,GAAe,CAC1B,QACA,WACA,SAAS,EACT,cAAc,GACd,OAAO,KACP,YACA,QACA,aAAc,EACd,GAAG,KACmB,CACtB,IAAM,GAAA,EAAA,EAAA,QAA0C,IAAI,EAG9C,EAAc,EAAO,UAAW,GAAM,EAAE,QAAU,CAAK,EACvD,EAAc,GAAe,EAAI,EAAc,EAGrD,SAAS,EAAc,EAAkC,CACvD,IAAM,EAAM,MAAM,KAChB,EAAE,cAAc,iBAAoC,gCAAgC,CACtF,EACM,EAAU,SAAS,cACnB,EAAM,EAAI,QAAQ,CAAO,EAE/B,GAAI,IAAQ,GACV,OAGF,IAAI,EAAO,GASX,GARI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,aACtC,EAAE,eAAe,EACjB,GAAQ,EAAM,GAAK,EAAI,SACd,EAAE,MAAQ,aAAe,EAAE,MAAQ,aAC5C,EAAE,eAAe,EACjB,GAAQ,EAAM,EAAI,EAAI,QAAU,EAAI,QAGlC,GAAQ,EAAG,CACb,EAAI,GAAM,MAAM,EAChB,IAAM,EAAQ,EAAI,GAAM,QAAQ,MAE5B,GACF,IAAW,CAAK,CAEpB,CACF,CAGA,IAAM,EAAW,IAAU,IAAA,IAAa,CAAC,EAAO,KAAM,GAAM,EAAE,QAAU,CAAK,EAE7E,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,aAAY,GAAa,QACzB,UAAW,CAAC,EAAA,QAAO,OAAQ,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACvD,QACP,UAAW,EACX,GAAI,WANN,CAQG,EAAO,KAAK,EAAO,KAClB,EAAA,EAAA,KAAC,EAAD,CAEE,MAAO,EAAM,MACP,OACN,SAAU,EAAM,QAAU,EAC1B,SAAU,EACV,aAAY,EAAM,OAAS,EAAM,MACjC,SAAU,IAAM,GAAe,CAAC,EAAW,EAAI,GAC/C,aAAY,EAAM,KACnB,EARM,EAAM,KAQZ,CACF,EAEA,IACC,EAAA,EAAA,MAAA,EAAA,SAAA,CAAA,SAAA,CAEG,GAAY,IACX,EAAA,EAAA,KAAC,EAAD,CACE,MAAO,EACD,OACN,SAAA,GACA,aAAgB,EAAe,SAAS,MAAM,EAC9C,aAAW,eACX,SAAU,EACV,aAAY,CACb,CAAA,GAIH,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,aAAW,sBACX,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAA,QAAO,UAAU,KAAS,EAAA,QAAO,YAAY,EACrE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,SAAqB,GACrB,YAAe,EAAe,SAAS,MAAM,YAE7C,EAAA,EAAA,KAAC,MAAD,CAAK,QAAQ,YAAY,UAAW,EAAA,QAAO,SAAU,cAAY,iBAC/D,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,iBACF,OAAO,eACP,YAAY,IACZ,cAAc,OACf,CAAA,CACE,CAAA,CACC,CAAA,GAER,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,KAAK,QACL,MAAO,GAAY,EAAQ,EAAQ,UACnC,UAAW,EAAA,QAAO,YAClB,cAAY,OACZ,SAAU,GACV,SAAW,GAAM,IAAW,EAAE,OAAO,KAAK,CAC3C,CAAA,CACD,CAAA,CAAA,CAED,GAET"}

package/dist/components/ColorPicker/ColorPicker.d.ts

@@ -1,6 +1,6 @@
 import { HTMLAttributes } from 'react';
-export type ColorSwatchSize = "sm" | "md" | "lg";
-export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> {
+export type ColorSwatchSize = 'sm' | 'md' | 'lg';
+export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick' | 'onSelect'> {
     /** CSS color value displayed as the swatch background. */
     color: string;
     /** Whether this swatch is the currently selected color. */
@@ -10,7 +10,7 @@ export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>
     /** Called when the user clicks or activates the swatch. */
     onSelect?: (color: string) => void;
     /** Accessible label. Defaults to the color value. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     disabled?: boolean;
 }
 /**
@@ -19,7 +19,7 @@ export interface ColorSwatchProps extends Omit<HTMLAttributes<HTMLButtonElement>
  * Can be used standalone or composed inside `ColorPicker`.
  * Shows a white checkmark when `selected`.
  */
-export declare function ColorSwatch({ color, selected, size, onSelect, disabled, className, style, "aria-label": ariaLabel, ...props }: ColorSwatchProps): import("react/jsx-runtime").JSX.Element;
+export declare const ColorSwatch: ({ color, selected, size, onSelect, disabled, className, style, "aria-label": ariaLabel, ...props }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
 export interface ColorPickerColor {
     /** CSS color value (hex recommended). */
     value: string;
@@ -28,7 +28,7 @@ export interface ColorPickerColor {
 }
 /** Default Adwaita-named palette (matches Avatar color set). */
 export declare const GNOME_PALETTE: ColorPickerColor[];
-export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Currently selected color value. */
     value?: string;
     /** Called when the user selects a color. */
@@ -67,4 +67,4 @@ export interface ColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ColorButton.html
  */
-export declare function ColorPicker({ value, onChange, colors, allowCustom, size, className, style, "aria-label": ariaLabel, ...props }: ColorPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const ColorPicker: ({ value, onChange, colors, allowCustom, size, className, style, "aria-label": ariaLabel, ...props }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ColorPicker/ColorPicker.js

@@ -2,41 +2,38 @@ import e from "./ColorPicker.module.css.js";
 import { useRef as t } from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/ColorPicker/ColorPicker.tsx
-function a({ color: t, selected: n = !1, size: i = "md", onSelect: a, disabled: o = !1, className: s, style: c, "aria-label": l, ...u }) {
-	return /* @__PURE__ */ r("button", {
-		type: "button",
-		role: "radio",
-		"aria-checked": n,
-		"aria-label": l ?? t,
-		disabled: o,
-		className: [
-			e.swatch,
-			e[`swatch-${i}`],
-			n ? e.swatchSelected : null,
-			s
-		].filter(Boolean).join(" "),
-		style: {
-			"--swatch-color": t,
-			...c
-		},
-		onClick: () => a?.(t),
-		...u,
-		children: n && /* @__PURE__ */ r("svg", {
-			className: e.checkmark,
-			viewBox: "0 0 16 16",
-			fill: "none",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ r("path", {
-				d: "M3 8l3.5 3.5L13 5",
-				stroke: "white",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			})
+var a = ({ color: t, selected: n = !1, size: i = "md", onSelect: a, disabled: o = !1, className: s, style: c, "aria-label": l, ...u }) => /* @__PURE__ */ r("button", {
+	type: "button",
+	role: "radio",
+	"aria-checked": n,
+	"aria-label": l ?? t,
+	disabled: o,
+	className: [
+		e.swatch,
+		e[`swatch-${i}`],
+		n ? e.swatchSelected : null,
+		s
+	].filter(Boolean).join(" "),
+	style: {
+		"--swatch-color": t,
+		...c
+	},
+	onClick: () => a?.(t),
+	...u,
+	children: n && /* @__PURE__ */ r("svg", {
+		className: e.checkmark,
+		viewBox: "0 0 16 16",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ r("path", {
+			d: "M3 8l3.5 3.5L13 5",
+			stroke: "white",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
 		})
-	});
-}
-var o = [
+	})
+}), o = [
 	{
 		value: "#3584e4",
 		label: "Blue"
@@ -73,8 +70,7 @@ var o = [
 		value: "#5e5c64",
 		label: "Slate"
 	}
-];
-function s({ value: s, onChange: c, colors: l = o, allowCustom: u = !1, size: d = "md", className: f, style: p, "aria-label": m, ...h }) {
+], s = ({ value: s, onChange: c, colors: l = o, allowCustom: u = !1, size: d = "md", className: f, style: p, "aria-label": m, ...h }) => {
 	let g = t(null), _ = l.findIndex((e) => e.value === s), v = _ >= 0 ? _ : 0;
 	function y(e) {
 		let t = Array.from(e.currentTarget.querySelectorAll("[role=\"radio\"]:not([disabled])")), n = document.activeElement, r = t.indexOf(n);
@@ -145,7 +141,7 @@ function s({ value: s, onChange: c, colors: l = o, allowCustom: u = !1, size: d
 			})
 		] })]
 	});
-}
+};
 //#endregion
 export { s as ColorPicker, a as ColorSwatch, o as GNOME_PALETTE };