@gnome-ui/react 1.48.0 → 1.49.1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.module.css.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\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    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboRow.module.css.cjs","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\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    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #fff));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgb(0 0 0 / 0.12),\n    0 1px 3px rgb(0 0 0 / 0.08);\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  user-select: none;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.1);\n    box-shadow:\n      0 4px 16px rgb(0 0 0 / 0.4),\n      0 1px 3px rgb(0 0 0 / 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ComboRow.module.css.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\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    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #ffffff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #ffffff));\n  border: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgba(0, 0, 0, 0.12),\n    0 1px 3px rgba(0, 0, 0, 0.08);\n\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  cursor: pointer;\n  user-select: none;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.1);\n    box-shadow:\n      0 4px 16px rgba(0, 0, 0, 0.4),\n      0 1px 3px rgba(0, 0, 0, 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"ComboRow.module.css.js","names":[],"sources":["../../../src/components/ComboRow/ComboRow.module.css"],"sourcesContent":["/* ─── Row container ─────────────────────────────────────────────────────────── */\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: var(--gnome-space-2, 12px) var(--gnome-space-4, 24px);\n  min-height: 52px;\n  width: 100%;\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  text-align: start;\n}\n\n/* ─── Disabled ──────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── Leading icon/avatar ───────────────────────────────────────────────────── */\n\n.leading {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n}\n\n/* ─── Text content ──────────────────────────────────────────────────────────── */\n\n.content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n  gap: 2px;\n}\n\n.title {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-card-fg-color, rgb(0 0 0 / 0.8));\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.subtitle {\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.75rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  line-height: var(--gnome-line-height-body, 1.5);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.55));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* ─── Combo wrapper ─────────────────────────────────────────────────────────── */\n\n.comboWrap {\n  position: relative;\n  flex-shrink: 0;\n  min-width: 120px;\n}\n\n/* ─── Trigger button ────────────────────────────────────────────────────────── */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--gnome-space-1, 6px);\n  width: 100%;\n  padding: 5px var(--gnome-space-2, 12px);\n  min-height: 32px;\n  appearance: none;\n  background-color: var(--gnome-card-bg-color, #fff);\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.15));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow: var(--gnome-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.08));\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  font-weight: var(--gnome-font-weight-normal, 400);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  user-select: none;\n  text-align: left;\n  white-space: nowrap;\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    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.trigger:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-card-bg-color, #fff) 90%, black 10%);\n}\n\n.trigger:focus {\n  outline: none;\n}\n\n.trigger:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\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.trigger:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.triggerOpen {\n  border-color: var(--gnome-accent-color, #3584e4);\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/* ─── Trigger label ─────────────────────────────────────────────────────────── */\n\n.triggerLabel {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.placeholder {\n  opacity: var(--gnome-opacity-dim, 0.55);\n}\n\n/* ─── Chevron ───────────────────────────────────────────────────────────────── */\n\n.chevron {\n  flex-shrink: 0;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n  transition: transform var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.chevronOpen {\n  transform: rotate(180deg);\n}\n\n/* ─── Listbox ───────────────────────────────────────────────────────────────── */\n\n.list {\n  position: absolute;\n  left: 0;\n  right: 0;\n  z-index: 1000;\n  margin: 0;\n  padding: 4px 0;\n  list-style: none;\n  background-color: var(--gnome-popover-bg-color, var(--gnome-card-bg-color, #fff));\n  border: 1px solid var(--gnome-card-shade-color, rgb(0 0 0 / 0.12));\n  border-radius: var(--gnome-radius-md, 8px);\n  box-shadow:\n    0 4px 16px rgb(0 0 0 / 0.12),\n    0 1px 3px rgb(0 0 0 / 0.08);\n  max-height: 260px;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  animation: list-in var(--gnome-duration-fast) var(--gnome-easing-default) both;\n}\n\n@keyframes list-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: top center;\n  }\n\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: top center;\n  }\n}\n\n.listDown {\n  top: calc(100% + 4px);\n}\n\n.listUp {\n  bottom: calc(100% + 4px);\n  animation-name: list-in-up;\n}\n\n@keyframes list-in-up {\n  from {\n    opacity: 0;\n    transform: scaleY(0.95);\n    transform-origin: bottom center;\n  }\n\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n    transform-origin: bottom center;\n  }\n}\n\n/* ─── Option ────────────────────────────────────────────────────────────────── */\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--gnome-space-2, 12px);\n  padding: 6px var(--gnome-space-2, 12px);\n  min-height: 36px;\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  cursor: pointer;\n  user-select: none;\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.optionActive {\n  background-color: color-mix(in srgb, var(--gnome-accent-bg-color, #3584e4) 12%, transparent);\n}\n\n.optionSelected {\n  font-weight: var(--gnome-font-weight-semibold, 600);\n}\n\n.optionDisabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.optionLabel {\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.checkIcon {\n  flex-shrink: 0;\n  color: var(--gnome-accent-color, #3584e4);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .trigger {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.12);\n    box-shadow: none;\n  }\n\n  .trigger:hover:not(:disabled) {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  .list {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgb(255 255 255 / 0.1);\n    box-shadow:\n      0 4px 16px rgb(0 0 0 / 0.4),\n      0 1px 3px rgb(0 0 0 / 0.3);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .trigger,\n  .chevron {\n    transition: none;\n  }\n\n  .list {\n    animation: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_1onba_1`,graphViewport:`_graphViewport_1onba_10`,svg:`_svg_1onba_17`,label:`_label_1onba_22`,cell:`_cell_1onba_30`,tooltip:`_tooltip_1onba_67`,legend:`_legend_1onba_86`,legendLabel:`_legendLabel_1onba_93`,legendCell:`_legendCell_1onba_101`};exports.default=e;
+var e={wrapper:`_wrapper_17kps_1`,graphViewport:`_graphViewport_17kps_10`,svg:`_svg_17kps_16`,label:`_label_17kps_21`,cell:`_cell_17kps_29`,tooltip:`_tooltip_17kps_66`,legend:`_legend_17kps_85`,legendLabel:`_legendLabel_17kps_92`,legendCell:`_legendCell_17kps_100`};exports.default=e;
 //# sourceMappingURL=ContributionGraph.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ContributionGraph.module.css.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.graphViewport {\n  width: 100%;\n  min-width: 0;\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.svg {\n  display: block;\n  flex-shrink: 0;\n}\n\n.label {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  fill: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.cell {\n  cursor: default;\n  transition:\n    stroke-opacity var(--gnome-transition-fast, 100ms) ease,\n    stroke-width var(--gnome-transition-fast, 100ms) ease;\n  outline: none;\n}\n\n.cell:not([aria-disabled=\"true\"]):hover {\n  stroke: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  stroke-opacity: 0.35;\n  stroke-width: 1;\n}\n\n.cell:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n.cell:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  .cell {\n    stroke: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    stroke-width: 0.5;\n    stroke-opacity: 0.3;\n  }\n}\n\n.tooltip {\n  position: fixed;\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n  background: var(--gnome-popover-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n  padding: 4px 8px;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 12px;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  box-shadow: var(--gnome-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));\n  pointer-events: none;\n  overflow-wrap: anywhere;\n  text-align: center;\n  white-space: normal;\n  z-index: 10001;\n}\n\n.legend {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.legendLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.legendCell {\n  display: block;\n  flex-shrink: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"ContributionGraph.module.css.cjs","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.graphViewport {\n  width: 100%;\n  min-width: 0;\n  overflow: auto visible;\n}\n\n.svg {\n  display: block;\n  flex-shrink: 0;\n}\n\n.label {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  fill: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.cell {\n  cursor: default;\n  transition:\n    stroke-opacity var(--gnome-transition-fast, 100ms) ease,\n    stroke-width var(--gnome-transition-fast, 100ms) ease;\n  outline: none;\n}\n\n.cell:not([aria-disabled=\"true\"]):hover {\n  stroke: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  stroke-opacity: 0.35;\n  stroke-width: 1;\n}\n\n.cell:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n.cell:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  .cell {\n    stroke: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n    stroke-width: 0.5;\n    stroke-opacity: 0.3;\n  }\n}\n\n.tooltip {\n  position: fixed;\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n  background: var(--gnome-popover-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n  padding: 4px 8px;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 12px;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  box-shadow: var(--gnome-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.12));\n  pointer-events: none;\n  overflow-wrap: anywhere;\n  text-align: center;\n  white-space: normal;\n  z-index: 10001;\n}\n\n.legend {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.legendLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.legendCell {\n  display: block;\n  flex-shrink: 0;\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 var e = {
-	wrapper: "_wrapper_1onba_1",
-	graphViewport: "_graphViewport_1onba_10",
-	svg: "_svg_1onba_17",
-	label: "_label_1onba_22",
-	cell: "_cell_1onba_30",
-	tooltip: "_tooltip_1onba_67",
-	legend: "_legend_1onba_86",
-	legendLabel: "_legendLabel_1onba_93",
-	legendCell: "_legendCell_1onba_101"
+	wrapper: "_wrapper_17kps_1",
+	graphViewport: "_graphViewport_17kps_10",
+	svg: "_svg_17kps_16",
+	label: "_label_17kps_21",
+	cell: "_cell_17kps_29",
+	tooltip: "_tooltip_17kps_66",
+	legend: "_legend_17kps_85",
+	legendLabel: "_legendLabel_17kps_92",
+	legendCell: "_legendCell_17kps_100"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"ContributionGraph.module.css.js","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.graphViewport {\n  width: 100%;\n  min-width: 0;\n  overflow-x: auto;\n  overflow-y: visible;\n}\n\n.svg {\n  display: block;\n  flex-shrink: 0;\n}\n\n.label {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  fill: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.cell {\n  cursor: default;\n  transition:\n    stroke-opacity var(--gnome-transition-fast, 100ms) ease,\n    stroke-width var(--gnome-transition-fast, 100ms) ease;\n  outline: none;\n}\n\n.cell:not([aria-disabled=\"true\"]):hover {\n  stroke: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  stroke-opacity: 0.35;\n  stroke-width: 1;\n}\n\n.cell:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n.cell:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  .cell {\n    stroke: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n    stroke-width: 0.5;\n    stroke-opacity: 0.3;\n  }\n}\n\n.tooltip {\n  position: fixed;\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n  background: var(--gnome-popover-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n  padding: 4px 8px;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 12px;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  box-shadow: var(--gnome-shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));\n  pointer-events: none;\n  overflow-wrap: anywhere;\n  text-align: center;\n  white-space: normal;\n  z-index: 10001;\n}\n\n.legend {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.legendLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.legendCell {\n  display: block;\n  flex-shrink: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"ContributionGraph.module.css.js","names":[],"sources":["../../../src/components/ContributionGraph/ContributionGraph.module.css"],"sourcesContent":[".wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: var(--gnome-space-1, 6px);\n  min-width: 0;\n}\n\n.graphViewport {\n  width: 100%;\n  min-width: 0;\n  overflow: auto visible;\n}\n\n.svg {\n  display: block;\n  flex-shrink: 0;\n}\n\n.label {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  fill: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.cell {\n  cursor: default;\n  transition:\n    stroke-opacity var(--gnome-transition-fast, 100ms) ease,\n    stroke-width var(--gnome-transition-fast, 100ms) ease;\n  outline: none;\n}\n\n.cell:not([aria-disabled=\"true\"]):hover {\n  stroke: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  stroke-opacity: 0.35;\n  stroke-width: 1;\n}\n\n.cell:not([aria-disabled=\"true\"]) {\n  cursor: pointer;\n}\n\n.cell:focus-visible {\n  outline: 2px solid var(--gnome-accent-color, #3584e4);\n  outline-offset: 1px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .cell {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: more) {\n  .cell {\n    stroke: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n    stroke-width: 0.5;\n    stroke-opacity: 0.3;\n  }\n}\n\n.tooltip {\n  position: fixed;\n  box-sizing: border-box;\n  max-width: calc(100vw - 16px);\n  background: var(--gnome-popover-bg-color, #fff);\n  border: 1px solid var(--gnome-light-3, #deddda);\n  border-radius: var(--gnome-radius-md, 8px);\n  padding: 4px 8px;\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 12px;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  box-shadow: var(--gnome-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.12));\n  pointer-events: none;\n  overflow-wrap: anywhere;\n  text-align: center;\n  white-space: normal;\n  z-index: 10001;\n}\n\n.legend {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--gnome-space-1, 6px);\n}\n\n.legendLabel {\n  font-family: var(--gnome-font-family, system-ui);\n  font-size: 11px;\n  color: var(--gnome-window-fg-color, rgb(0 0 0 / 0.8));\n  opacity: 0.6;\n  user-select: none;\n}\n\n.legendCell {\n  display: block;\n  flex-shrink: 0;\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-var e={countdownTimer:`_countdownTimer_twhbs_3`,value:`_value_twhbs_25`,accent:`_accent_twhbs_34`,success:`_success_twhbs_46`,warning:`_warning_twhbs_58`,destructive:`_destructive_twhbs_70`,finished:`_finished_twhbs_82`};exports.default=e;
+var e={countdownTimer:`_countdownTimer_zisa7_3`,value:`_value_zisa7_22`,accent:`_accent_zisa7_31`,success:`_success_zisa7_43`,warning:`_warning_zisa7_55`,destructive:`_destructive_zisa7_67`,finished:`_finished_zisa7_79`};exports.default=e;
 //# sourceMappingURL=CountDownTimer.module.css.cjs.map