@gnome-ui/react 1.45.0 → 1.45.1

package/dist/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  type PointerEvent,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./Slider.module.css\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  \"aria-describedby\"?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) return;\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange]\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;\n      setFromX(e.clientX);\n    },\n    [setFromX]\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          set(value + step);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          set(value - step);\n          break;\n        case \"PageUp\":\n          set(value + step * 10);\n          break;\n        case \"PageDown\":\n          set(value - step * 10);\n          break;\n        case \"Home\":\n          set(min);\n          break;\n        case \"End\":\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange]\n  );\n\n  const hasMarks   = marks && marks.length > 0;\n  const hasLabels  = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[\n        styles.wrapper,\n        hasLabels ? styles.hasLabels : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div\n          className={styles.thumb}\n          style={{ left: `${pct}%` }}\n          aria-hidden=\"true\"\n        />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <span\n                key={m.value}\n                className={styles.markLabel}\n                style={{ left: `${mPct}%` }}\n              >\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/Slider/Slider.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current value. Must be between `min` and `max`. */
     value: number;
     /** Called when the value changes. */
@@ -26,11 +26,11 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
         label?: string;
     }>;
     /** Accessible label. Required when no visible `<label>` is present. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     /** Associates the control with a visible label element. */
-    "aria-labelledby"?: string;
+    'aria-labelledby'?: string;
     /** `id` of an element that describes the current value (e.g. a live region). */
-    "aria-describedby"?: string;
+    'aria-describedby'?: string;
 }
 /**
  * Draggable range slider following the Adwaita `GtkScale` pattern.
@@ -42,4 +42,4 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, "onCha
  *
  * @see https://developer.gnome.org/hig/patterns/controls/sliders.html
  */
-export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  useRef,\n  useCallback,\n  type PointerEvent,\n  type KeyboardEvent,\n  type HTMLAttributes,\n} from \"react\";\nimport styles from \"./Slider.module.css\";\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  \"aria-describedby\"?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) return;\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange]\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) return;\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) return;\n      setFromX(e.clientX);\n    },\n    [setFromX]\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          set(value + step);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          set(value - step);\n          break;\n        case \"PageUp\":\n          set(value + step * 10);\n          break;\n        case \"PageDown\":\n          set(value - step * 10);\n          break;\n        case \"Home\":\n          set(min);\n          break;\n        case \"End\":\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange]\n  );\n\n  const hasMarks   = marks && marks.length > 0;\n  const hasLabels  = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[\n        styles.wrapper,\n        hasLabels ? styles.hasLabels : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null]\n          .filter(Boolean)\n          .join(\" \")}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div\n          className={styles.thumb}\n          style={{ left: `${pct}%` }}\n          aria-hidden=\"true\"\n        />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n            return (\n              <span\n                key={m.value}\n                className={styles.markLabel}\n                style={{ left: `${mPct}%` }}\n              >\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-var e={wrapper:`_wrapper_11zhs_3`,hasLabels:`_hasLabels_11zhs_11`,track:`_track_11zhs_17`,disabled:`_disabled_11zhs_42`,fill:`_fill_11zhs_50`,thumb:`_thumb_11zhs_64`,tick:`_tick_11zhs_97`,labels:`_labels_11zhs_112`,markLabel:`_markLabel_11zhs_119`};exports.default=e;
+var e={wrapper:`_wrapper_qpwn3_3`,hasLabels:`_hasLabels_qpwn3_11`,track:`_track_qpwn3_17`,disabled:`_disabled_qpwn3_42`,fill:`_fill_qpwn3_50`,thumb:`_thumb_qpwn3_64`,tick:`_tick_qpwn3_97`,labels:`_labels_qpwn3_112`,markLabel:`_markLabel_qpwn3_119`};exports.default=e;
 //# sourceMappingURL=Slider.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.module.css.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\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\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Slider.module.css.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\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\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 var e = {
-	wrapper: "_wrapper_11zhs_3",
-	hasLabels: "_hasLabels_11zhs_11",
-	track: "_track_11zhs_17",
-	disabled: "_disabled_11zhs_42",
-	fill: "_fill_11zhs_50",
-	thumb: "_thumb_11zhs_64",
-	tick: "_tick_11zhs_97",
-	labels: "_labels_11zhs_112",
-	markLabel: "_markLabel_11zhs_119"
+	wrapper: "_wrapper_qpwn3_3",
+	hasLabels: "_hasLabels_qpwn3_11",
+	track: "_track_qpwn3_17",
+	disabled: "_disabled_qpwn3_42",
+	fill: "_fill_qpwn3_50",
+	thumb: "_thumb_qpwn3_64",
+	tick: "_tick_qpwn3_97",
+	labels: "_labels_qpwn3_112",
+	markLabel: "_markLabel_qpwn3_119"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.module.css.js","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\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\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Slider.module.css.js","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":["/* ─── Outer wrapper ──────────────────────────────────────────────────────────── */\n\n.wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  /* Vertical space for thumb overflow */\n  padding: 10px 0;\n}\n\n.hasLabels {\n  padding-bottom: 0;\n}\n\n/* ─── Track ──────────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: 6px;\n\n  background-color: var(--gnome-card-shade-color, rgba(0, 0, 0, 0.15));\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  cursor: pointer;\n  touch-action: none; /* prevent scroll interference during drag */\n  user-select: none;\n\n  outline: none;\n}\n\n.track:focus-visible {\n  /* Focus ring on the track itself as a fallback */\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ───────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Filled section (left of thumb) ────────────────────────────────────────── */\n\n.fill {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n\n  pointer-events: none;\n}\n\n/* ─── Thumb ──────────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  /* Translate left by half thumb width so it centres on the left edge of .fill */\n  transform: translate(-50%, -50%);\n\n  width: 22px;\n  height: 22px;\n  border-radius: var(--gnome-radius-pill, 9999px);\n\n  background-color: var(--gnome-accent-bg-color, #3584e4);\n  box-shadow:\n    0 1px 3px rgba(0, 0, 0, 0.25),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n\n  pointer-events: none;\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\n/* Slightly larger thumb on focus / active drag */\n.track:focus-visible .thumb,\n.track:active .thumb {\n  transform: translate(-50%, -50%) scale(1.18);\n  box-shadow:\n    0 2px 6px rgba(0, 0, 0, 0.3),\n    0 0 0 2px var(--gnome-window-bg-color, #fafafa);\n}\n\n/* ─── Tick marks ─────────────────────────────────────────────────────────────── */\n\n.tick {\n  position: absolute;\n  top: 50%;\n  transform: translate(-50%, -50%);\n\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n\n  background-color: var(--gnome-window-bg-color, #fafafa);\n  pointer-events: none;\n}\n\n/* ─── Labels row ─────────────────────────────────────────────────────────────── */\n\n.labels {\n  position: relative;\n  width: 100%;\n  height: 20px;\n  margin-top: var(--gnome-space-1, 6px);\n}\n\n.markLabel {\n  position: absolute;\n  transform: translateX(-50%);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-caption, 0.8125rem);\n  line-height: 1;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: var(--gnome-opacity-dim, 0.55);\n\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n}\n\n/* ─── Dark mode ──────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .track {\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  .thumb {\n    box-shadow:\n      0 1px 4px rgba(0, 0, 0, 0.5),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .track:focus-visible .thumb,\n  .track:active .thumb {\n    box-shadow:\n      0 2px 8px rgba(0, 0, 0, 0.6),\n      0 0 0 2px var(--gnome-window-bg-color, #242424);\n  }\n\n  .tick {\n    background-color: var(--gnome-window-bg-color, #242424);\n  }\n}\n\n/* ─── Reduced motion ─────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
+export { Slider } from './Slider';

package/dist/components/SpinButton/SpinButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { useCallback, type KeyboardEvent, type HTMLAttributes } from \"react\";\nimport styles from \"./SpinButton.module.css\";\n\nexport interface SpinButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport function SpinButton({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: SpinButtonProps) {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case \"ArrowUp\":   e.preventDefault(); set(value + step); break;\n        case \"ArrowDown\": e.preventDefault(); set(value - step); break;\n        case \"PageUp\":    e.preventDefault(); set(value + step * 10); break;\n        case \"PageDown\":  e.preventDefault(); set(value - step * 10); break;\n        case \"Home\":      e.preventDefault(); set(min); break;\n        case \"End\":       e.preventDefault(); set(max); break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n}\n"],"mappings":"qGAyBA,SAAS,EAAc,EAAmB,CACxC,IAAM,EAAI,EAAE,UAAU,CAChB,EAAM,EAAE,QAAQ,IAAI,CAC1B,OAAO,IAAQ,GAAK,EAAI,EAAE,OAAS,EAAM,EAG3C,SAAS,EAAM,EAAe,EAAa,EAAqB,CAC9D,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,EAAM,CAAC,CAW5C,SAAgB,EAAW,CACzB,QACA,WACA,MAAM,EACN,MAAM,IACN,OAAO,EACP,WACA,WAAW,GACX,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,GACe,CAClB,IAAM,EAAK,GAAY,EAAc,EAAK,CAEpC,GAAA,EAAA,EAAA,aACH,GAAiB,EAAS,WAAW,EAAM,EAAM,EAAK,EAAI,CAAC,QAAQ,EAAG,CAAC,CAAC,CACzE,CAAC,EAAU,EAAK,EAAK,EAAG,CACzB,CAEK,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,OAAQ,EAAE,IAAV,CACE,IAAK,UAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAK,CAAE,MACzD,IAAK,YAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAK,CAAE,MACzD,IAAK,SAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAO,GAAG,CAAE,MAC9D,IAAK,WAAa,EAAE,gBAAgB,CAAE,EAAI,EAAQ,EAAO,GAAG,CAAE,MAC9D,IAAK,OAAa,EAAE,gBAAgB,CAAE,EAAI,EAAI,CAAE,MAChD,IAAK,MAAa,EAAE,gBAAgB,CAAE,EAAI,EAAI,CAAE,QAGpD,CAAC,EAAO,EAAM,EAAK,EAAK,EAAI,CAC7B,CAED,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAY,EACZ,kBAAiB,EACjB,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,UAAW,EAAW,IAAA,GAAY,EAClC,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAY,gBACxC,EAAM,QAAQ,EAAG,CACb,CAAA,EAEP,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,CACL"}
+{"version":3,"file":"SpinButton.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, useCallback } from 'react';\n\nimport styles from './SpinButton.module.css';\n\nexport interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport function SpinButton({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: SpinButtonProps) {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          set(value + step);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          set(value - step);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          set(value - step * 10);\n          break;\n        case 'Home':\n          e.preventDefault();\n          set(min);\n          break;\n        case 'End':\n          e.preventDefault();\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n}\n"],"mappings":"qGAyBA,SAAS,EAAc,EAAmB,CACxC,IAAM,EAAI,EAAE,UAAU,CAChB,EAAM,EAAE,QAAQ,IAAI,CAE1B,OAAO,IAAQ,GAAK,EAAI,EAAE,OAAS,EAAM,EAG3C,SAAS,EAAM,EAAe,EAAa,EAAqB,CAC9D,OAAO,KAAK,IAAI,EAAK,KAAK,IAAI,EAAK,EAAM,CAAC,CAW5C,SAAgB,EAAW,CACzB,QACA,WACA,MAAM,EACN,MAAM,IACN,OAAO,EACP,WACA,WAAW,GACX,YACA,aAAc,EACd,kBAAmB,EACnB,GAAG,GACe,CAClB,IAAM,EAAK,GAAY,EAAc,EAAK,CAEpC,GAAA,EAAA,EAAA,aACH,GAAiB,EAAS,WAAW,EAAM,EAAM,EAAK,EAAI,CAAC,QAAQ,EAAG,CAAC,CAAC,CACzE,CAAC,EAAU,EAAK,EAAK,EAAG,CACzB,CAEK,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,OAAQ,EAAE,IAAV,CACE,IAAK,UACH,EAAE,gBAAgB,CAClB,EAAI,EAAQ,EAAK,CACjB,MACF,IAAK,YACH,EAAE,gBAAgB,CAClB,EAAI,EAAQ,EAAK,CACjB,MACF,IAAK,SACH,EAAE,gBAAgB,CAClB,EAAI,EAAQ,EAAO,GAAG,CACtB,MACF,IAAK,WACH,EAAE,gBAAgB,CAClB,EAAI,EAAQ,EAAO,GAAG,CACtB,MACF,IAAK,OACH,EAAE,gBAAgB,CAClB,EAAI,EAAI,CACR,MACF,IAAK,MACH,EAAE,gBAAgB,CAClB,EAAI,EAAI,CACR,QAGN,CAAC,EAAO,EAAM,EAAK,EAAK,EAAI,CAC7B,CAED,OACE,EAAA,EAAA,MAAC,MAAD,CACE,KAAK,aACL,gBAAe,EACf,gBAAe,EACf,gBAAe,EACf,aAAY,EACZ,kBAAiB,EACjB,gBAAe,GAAY,IAAA,GAC3B,SAAU,EAAW,GAAK,EAC1B,UAAW,EAAW,IAAA,GAAY,EAClC,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAbN,EAeE,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,EAET,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAO,cAAY,gBACxC,EAAM,QAAQ,EAAG,CACb,CAAA,EAEP,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,SAAU,GACV,cAAY,OACZ,SAAU,GAAY,GAAS,EAC/B,UAAW,EAAA,QAAO,IAClB,YAAe,EAAI,EAAQ,EAAK,UACjC,IAEQ,CAAA,CACL"}

package/dist/components/SpinButton/SpinButton.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from 'react';
-export interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Current value. */
     value: number;
     /** Called when the value changes. */
@@ -15,9 +15,9 @@ export interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "o
     /** Disables the control. */
     disabled?: boolean;
     /** Accessible label. Required when no visible `<label>` is associated. */
-    "aria-label"?: string;
+    'aria-label'?: string;
     /** Associates the control with a visible label element. */
-    "aria-labelledby"?: string;
+    'aria-labelledby'?: string;
 }
 /**
  * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.
@@ -27,4 +27,4 @@ export interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, "o
  *
  * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html
  */
-export declare function SpinButton({ value, onChange, min, max, step, decimals, disabled, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SpinButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function SpinButton({ value, onChange, min, max, step, decimals, disabled, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: SpinButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/SpinButton/SpinButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.js","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { useCallback, type KeyboardEvent, type HTMLAttributes } from \"react\";\nimport styles from \"./SpinButton.module.css\";\n\nexport interface SpinButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  \"aria-label\"?: string;\n  /** Associates the control with a visible label element. */\n  \"aria-labelledby\"?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport function SpinButton({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: SpinButtonProps) {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case \"ArrowUp\":   e.preventDefault(); set(value + step); break;\n        case \"ArrowDown\": e.preventDefault(); set(value - step); break;\n        case \"PageUp\":    e.preventDefault(); set(value + step * 10); break;\n        case \"PageDown\":  e.preventDefault(); set(value - step * 10); break;\n        case \"Home\":      e.preventDefault(); set(min); break;\n        case \"End\":       e.preventDefault(); set(max); break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAS,EAAc,GAAmB;CACxC,IAAM,IAAI,EAAE,UAAU,EAChB,IAAM,EAAE,QAAQ,IAAI;AAC1B,QAAO,MAAQ,KAAK,IAAI,EAAE,SAAS,IAAM;;AAG3C,SAAS,EAAM,GAAe,GAAa,GAAqB;AAC9D,QAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC;;AAW5C,SAAgB,EAAW,EACzB,UACA,aACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,cAAW,IACX,cACA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACe;CAClB,IAAM,IAAK,KAAY,EAAc,EAAK,EAEpC,IAAM,GACT,MAAiB,EAAS,WAAW,EAAM,GAAM,GAAK,EAAI,CAAC,QAAQ,EAAG,CAAC,CAAC,EACzE;EAAC;EAAU;EAAK;EAAK;EAAG,CACzB,EAEK,IAAgB,GACnB,MAAqC;AACpC,UAAQ,EAAE,KAAV;GACE,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,EAAK;AAAE;GACzD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,EAAK;AAAE;GACzD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,IAAO,GAAG;AAAE;GAC9D,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,IAAO,GAAG;AAAE;GAC9D,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,EAAI;AAAE;GAChD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,EAAI;AAAE;;IAGpD;EAAC;EAAO;EAAM;EAAK;EAAK;EAAI,CAC7B;AAED,QACE,kBAAC,OAAD;EACE,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,KAAY,KAAA;EAC3B,UAAU,IAAW,KAAK;EAC1B,WAAW,IAAW,KAAA,IAAY;EAClC,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAbN;GAeE,kBAAC,UAAD;IACE,MAAK;IACL,UAAU;IACV,eAAY;IACZ,UAAU,KAAY,KAAS;IAC/B,WAAW,EAAO;IAClB,eAAe,EAAI,IAAQ,EAAK;cACjC;IAEQ,CAAA;GAET,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAO,eAAY;cACxC,EAAM,QAAQ,EAAG;IACb,CAAA;GAEP,kBAAC,UAAD;IACE,MAAK;IACL,UAAU;IACV,eAAY;IACZ,UAAU,KAAY,KAAS;IAC/B,WAAW,EAAO;IAClB,eAAe,EAAI,IAAQ,EAAK;cACjC;IAEQ,CAAA;GACL"}
+{"version":3,"file":"SpinButton.js","names":[],"sources":["../../../src/components/SpinButton/SpinButton.tsx"],"sourcesContent":["import { type HTMLAttributes, type KeyboardEvent, useCallback } from 'react';\n\nimport styles from './SpinButton.module.css';\n\nexport interface SpinButtonProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, value));\n}\n\n/**\n * Numeric input with − and + buttons following the Adwaita `GtkSpinButton` style.\n *\n * Supports keyboard interaction: ↑/↓ increment by one step,\n * Page Up/Down increment by 10×, Home/End jump to min/max.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/spin-buttons.html\n */\nexport function SpinButton({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: SpinButtonProps) {\n  const dp = decimals ?? countDecimals(step);\n\n  const set = useCallback(\n    (next: number) => onChange(parseFloat(clamp(next, min, max).toFixed(dp))),\n    [onChange, min, max, dp],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          set(value + step);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          set(value - step);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          set(value - step * 10);\n          break;\n        case 'Home':\n          e.preventDefault();\n          set(min);\n          break;\n        case 'End':\n          e.preventDefault();\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      role=\"spinbutton\"\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      aria-disabled={disabled || undefined}\n      tabIndex={disabled ? -1 : 0}\n      onKeyDown={disabled ? undefined : handleKeyDown}\n      className={[styles.spin, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value <= min}\n        className={styles.btn}\n        onClick={() => set(value - step)}\n      >\n        −\n      </button>\n\n      <span className={styles.value} aria-hidden=\"true\">\n        {value.toFixed(dp)}\n      </span>\n\n      <button\n        type=\"button\"\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        disabled={disabled || value >= max}\n        className={styles.btn}\n        onClick={() => set(value + step)}\n      >\n        +\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;AAyBA,SAAS,EAAc,GAAmB;CACxC,IAAM,IAAI,EAAE,UAAU,EAChB,IAAM,EAAE,QAAQ,IAAI;AAE1B,QAAO,MAAQ,KAAK,IAAI,EAAE,SAAS,IAAM;;AAG3C,SAAS,EAAM,GAAe,GAAa,GAAqB;AAC9D,QAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAM,CAAC;;AAW5C,SAAgB,EAAW,EACzB,UACA,aACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,cAAW,IACX,cACA,cAAc,GACd,mBAAmB,GACnB,GAAG,KACe;CAClB,IAAM,IAAK,KAAY,EAAc,EAAK,EAEpC,IAAM,GACT,MAAiB,EAAS,WAAW,EAAM,GAAM,GAAK,EAAI,CAAC,QAAQ,EAAG,CAAC,CAAC,EACzE;EAAC;EAAU;EAAK;EAAK;EAAG,CACzB,EAEK,IAAgB,GACnB,MAAqC;AACpC,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,EAAK;AACjB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,EAAK;AACjB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,IAAO,GAAG;AACtB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,IAAO,GAAG;AACtB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,EAAI;AACR;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,EAAI;AACR;;IAGN;EAAC;EAAO;EAAM;EAAK;EAAK;EAAI,CAC7B;AAED,QACE,kBAAC,OAAD;EACE,MAAK;EACL,iBAAe;EACf,iBAAe;EACf,iBAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,KAAY,KAAA;EAC3B,UAAU,IAAW,KAAK;EAC1B,WAAW,IAAW,KAAA,IAAY;EAClC,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAbN;GAeE,kBAAC,UAAD;IACE,MAAK;IACL,UAAU;IACV,eAAY;IACZ,UAAU,KAAY,KAAS;IAC/B,WAAW,EAAO;IAClB,eAAe,EAAI,IAAQ,EAAK;cACjC;IAEQ,CAAA;GAET,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAO,eAAY;cACxC,EAAM,QAAQ,EAAG;IACb,CAAA;GAEP,kBAAC,UAAD;IACE,MAAK;IACL,UAAU;IACV,eAAY;IACZ,UAAU,KAAY,KAAS;IAC/B,WAAW,EAAO;IAClB,eAAe,EAAI,IAAQ,EAAK;cACjC;IAEQ,CAAA;GACL"}

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

@@ -1,2 +1,2 @@
-var e={spin:`_spin_7d4yi_3`,disabled:`_disabled_7d4yi_36`,btn:`_btn_7d4yi_43`,value:`_value_7d4yi_96`};exports.default=e;
+var e={spin:`_spin_1hjdp_3`,disabled:`_disabled_1hjdp_37`,btn:`_btn_1hjdp_44`,value:`_value_1hjdp_89`};exports.default=e;
 //# sourceMappingURL=SpinButton.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.module.css.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n              border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── +/− buttons ──────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-view-bg-color, #ffffff) 90%,\n    black 10%\n  );\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-view-bg-color, #ffffff) 80%,\n    black 20%\n  );\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* Dividers between button and value */\n.btn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.btn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ────────────────────────────────────────────────────────── */\n\n.value {\n  flex: 1;\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 56px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .btn:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-view-bg-color, #1e1e1e) 85%,\n      white 15%\n    );\n  }\n\n  .btn:active:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-view-bg-color, #1e1e1e) 75%,\n      white 25%\n    );\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SpinButton.module.css.cjs","names":[],"sources":["../../../src/components/SpinButton/SpinButton.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition:\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── +/− buttons ──────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 90%, black 10%);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 80%, black 20%);\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* Dividers between button and value */\n.btn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.btn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ────────────────────────────────────────────────────────── */\n\n.value {\n  flex: 1;\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 56px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .btn:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 85%, white 15%);\n  }\n\n  .btn:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 75%, white 25%);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,8 +1,8 @@
 var e = {
-	spin: "_spin_7d4yi_3",
-	disabled: "_disabled_7d4yi_36",
-	btn: "_btn_7d4yi_43",
-	value: "_value_7d4yi_96"
+	spin: "_spin_1hjdp_3",
+	disabled: "_disabled_1hjdp_37",
+	btn: "_btn_1hjdp_44",
+	value: "_value_1hjdp_89"
 };
 //#endregion
 export { e as default };

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

@@ -1 +1 @@
-{"version":3,"file":"SpinButton.module.css.js","names":[],"sources":["../../../src/components/SpinButton/SpinButton.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition: box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n              border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n      var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── +/− buttons ──────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-view-bg-color, #ffffff) 90%,\n    black 10%\n  );\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(\n    in srgb,\n    var(--gnome-view-bg-color, #ffffff) 80%,\n    black 20%\n  );\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* Dividers between button and value */\n.btn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.btn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ────────────────────────────────────────────────────────── */\n\n.value {\n  flex: 1;\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 56px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .btn:hover:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-view-bg-color, #1e1e1e) 85%,\n      white 15%\n    );\n  }\n\n  .btn:active:not(:disabled) {\n    background-color: color-mix(\n      in srgb,\n      var(--gnome-view-bg-color, #1e1e1e) 75%,\n      white 25%\n    );\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SpinButton.module.css.js","names":[],"sources":["../../../src/components/SpinButton/SpinButton.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body, 1rem);\n  color: var(--gnome-view-fg-color, rgba(0, 0, 0, 0.8));\n\n  transition:\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\n    0 0 0 var(--gnome-focus-ring-offset, 2px) var(--gnome-window-bg-color, #fafafa),\n    0 0 0 calc(var(--gnome-focus-ring-offset, 2px) + var(--gnome-focus-ring-width, 3px))\n    var(--gnome-focus-ring-color, #3584e4);\n}\n\n/* ─── Disabled ─────────────────────────────────────────────────────────────── */\n\n.disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  pointer-events: none;\n}\n\n/* ─── +/− buttons ──────────────────────────────────────────────────────────── */\n\n.btn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.btn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 90%, black 10%);\n}\n\n.btn:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 80%, black 20%);\n}\n\n.btn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n/* Dividers between button and value */\n.btn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.btn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ────────────────────────────────────────────────────────── */\n\n.value {\n  flex: 1;\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 56px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .btn:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 85%, white 15%);\n  }\n\n  .btn:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 75%, white 25%);\n  }\n}\n\n/* ─── Reduced motion ───────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .btn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,2 +1,2 @@
-export { SpinButton } from './SpinButton';
 export type { SpinButtonProps } from './SpinButton';
+export { SpinButton } from './SpinButton';

package/dist/components/SpinRow/SpinRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SpinRow.cjs","names":[],"sources":["../../../src/components/SpinRow/SpinRow.tsx"],"sourcesContent":["import { useState, useId, useCallback, type HTMLAttributes, type ReactNode, type KeyboardEvent } from \"react\";\nimport styles from \"./SpinRow.module.css\";\n\nexport interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** Current value (controlled). */\n  value?: number;\n  /** Initial value when uncontrolled. Defaults to `0`. */\n  defaultValue?: number;\n  /** Called when the value changes. */\n  onValueChange?: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(v: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, v));\n}\n\n/**\n * Settings row with an integrated spin button for numeric values.\n *\n * Mirrors `AdwSpinRow` — a standard row layout with − / + buttons at the\n * trailing edge. Use inside a `BoxedList` for settings with numeric ranges\n * (volume, timeout duration, count limits, etc.).\n *\n * Supports both controlled (`value`) and uncontrolled (`defaultValue`) modes.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html\n */\nexport function SpinRow({\n  title,\n  subtitle,\n  leading,\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  ...props\n}: SpinRowProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const dp = decimals ?? countDecimals(step);\n  const spinId = useId();\n\n  const set = useCallback(\n    (next: number) => {\n      const clamped = parseFloat(clamp(next, min, max).toFixed(dp));\n      if (!isControlled) setUncontrolledValue(clamped);\n      onValueChange?.(clamped);\n    },\n    [isControlled, min, max, dp, onValueChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case \"ArrowUp\":   e.preventDefault(); set(value + step); break;\n        case \"ArrowDown\": e.preventDefault(); set(value - step); break;\n        case \"PageUp\":    e.preventDefault(); set(value + step * 10); break;\n        case \"PageDown\":  e.preventDefault(); set(value - step * 10); break;\n        case \"Home\":      e.preventDefault(); set(min); break;\n        case \"End\":       e.preventDefault(); set(max); break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Spin button widget */}\n      <div\n        role=\"spinbutton\"\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-labelledby={spinId}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        className={styles.spin}\n      >\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value <= min}\n          className={styles.spinBtn}\n          onClick={(e) => { e.stopPropagation(); set(value - step); }}\n        >\n          −\n        </button>\n\n        <span id={spinId} className={styles.spinValue} aria-hidden=\"true\">\n          {value.toFixed(dp)}\n        </span>\n\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value >= max}\n          className={styles.spinBtn}\n          onClick={(e) => { e.stopPropagation(); set(value + step); }}\n        >\n          +\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SpinRow.cjs","names":[],"sources":["../../../src/components/SpinRow/SpinRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from 'react';\n\nimport styles from './SpinRow.module.css';\n\nexport interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** Current value (controlled). */\n  value?: number;\n  /** Initial value when uncontrolled. Defaults to `0`. */\n  defaultValue?: number;\n  /** Called when the value changes. */\n  onValueChange?: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(v: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, v));\n}\n\n/**\n * Settings row with an integrated spin button for numeric values.\n *\n * Mirrors `AdwSpinRow` — a standard row layout with − / + buttons at the\n * trailing edge. Use inside a `BoxedList` for settings with numeric ranges\n * (volume, timeout duration, count limits, etc.).\n *\n * Supports both controlled (`value`) and uncontrolled (`defaultValue`) modes.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html\n */\nexport function SpinRow({\n  title,\n  subtitle,\n  leading,\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  ...props\n}: SpinRowProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const dp = decimals ?? countDecimals(step);\n  const spinId = useId();\n\n  const set = useCallback(\n    (next: number) => {\n      const clamped = parseFloat(clamp(next, min, max).toFixed(dp));\n\n      if (!isControlled) {\n        setUncontrolledValue(clamped);\n      }\n\n      onValueChange?.(clamped);\n    },\n    [isControlled, min, max, dp, onValueChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          set(value + step);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          set(value - step);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          set(value - step * 10);\n          break;\n        case 'Home':\n          e.preventDefault();\n          set(min);\n          break;\n        case 'End':\n          e.preventDefault();\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Spin button widget */}\n      <div\n        role=\"spinbutton\"\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-labelledby={spinId}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        className={styles.spin}\n      >\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value <= min}\n          className={styles.spinBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            set(value - step);\n          }}\n        >\n          −\n        </button>\n\n        <span id={spinId} className={styles.spinValue} aria-hidden=\"true\">\n          {value.toFixed(dp)}\n        </span>\n\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value >= max}\n          className={styles.spinBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            set(value + step);\n          }}\n        >\n          +\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/SpinRow/SpinRow.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+export interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /** Primary label. */
     title: string;
     /** Secondary line below the title. */

package/dist/components/SpinRow/SpinRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinRow.js","names":[],"sources":["../../../src/components/SpinRow/SpinRow.tsx"],"sourcesContent":["import { useState, useId, useCallback, type HTMLAttributes, type ReactNode, type KeyboardEvent } from \"react\";\nimport styles from \"./SpinRow.module.css\";\n\nexport interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** Current value (controlled). */\n  value?: number;\n  /** Initial value when uncontrolled. Defaults to `0`. */\n  defaultValue?: number;\n  /** Called when the value changes. */\n  onValueChange?: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf(\".\");\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(v: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, v));\n}\n\n/**\n * Settings row with an integrated spin button for numeric values.\n *\n * Mirrors `AdwSpinRow` — a standard row layout with − / + buttons at the\n * trailing edge. Use inside a `BoxedList` for settings with numeric ranges\n * (volume, timeout duration, count limits, etc.).\n *\n * Supports both controlled (`value`) and uncontrolled (`defaultValue`) modes.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html\n */\nexport function SpinRow({\n  title,\n  subtitle,\n  leading,\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  ...props\n}: SpinRowProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const dp = decimals ?? countDecimals(step);\n  const spinId = useId();\n\n  const set = useCallback(\n    (next: number) => {\n      const clamped = parseFloat(clamp(next, min, max).toFixed(dp));\n      if (!isControlled) setUncontrolledValue(clamped);\n      onValueChange?.(clamped);\n    },\n    [isControlled, min, max, dp, onValueChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case \"ArrowUp\":   e.preventDefault(); set(value + step); break;\n        case \"ArrowDown\": e.preventDefault(); set(value - step); break;\n        case \"PageUp\":    e.preventDefault(); set(value + step * 10); break;\n        case \"PageDown\":  e.preventDefault(); set(value - step * 10); break;\n        case \"Home\":      e.preventDefault(); set(min); break;\n        case \"End\":       e.preventDefault(); set(max); break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Spin button widget */}\n      <div\n        role=\"spinbutton\"\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-labelledby={spinId}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        className={styles.spin}\n      >\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value <= min}\n          className={styles.spinBtn}\n          onClick={(e) => { e.stopPropagation(); set(value - step); }}\n        >\n          −\n        </button>\n\n        <span id={spinId} className={styles.spinValue} aria-hidden=\"true\">\n          {value.toFixed(dp)}\n        </span>\n\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value >= max}\n          className={styles.spinBtn}\n          onClick={(e) => { e.stopPropagation(); set(value + step); }}\n        >\n          +\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AA4BA,SAAS,EAAc,GAAmB;CACxC,IAAM,IAAI,EAAE,UAAU,EAChB,IAAM,EAAE,QAAQ,IAAI;AAC1B,QAAO,MAAQ,KAAK,IAAI,EAAE,SAAS,IAAM;;AAG3C,SAAS,EAAM,GAAW,GAAa,GAAqB;AAC1D,QAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;;AAcxC,SAAgB,EAAQ,EACtB,UACA,aACA,YACA,OAAO,GACP,kBAAe,GACf,kBACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,cAAW,IACX,cACA,GAAG,KACY;CACf,IAAM,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,EAAa,EAClE,IAAQ,IAAe,IAAkB,GAEzC,IAAK,KAAY,EAAc,EAAK,EACpC,IAAS,GAAO,EAEhB,IAAM,GACT,MAAiB;EAChB,IAAM,IAAU,WAAW,EAAM,GAAM,GAAK,EAAI,CAAC,QAAQ,EAAG,CAAC;AAE7D,EADK,KAAc,EAAqB,EAAQ,EAChD,IAAgB,EAAQ;IAE1B;EAAC;EAAc;EAAK;EAAK;EAAI;EAAc,CAC5C,EAEK,IAAgB,GACnB,MAAqC;AACpC,UAAQ,EAAE,KAAV;GACE,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,EAAK;AAAE;GACzD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,EAAK;AAAE;GACzD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,IAAO,GAAG;AAAE;GAC9D,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,IAAQ,IAAO,GAAG;AAAE;GAC9D,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,EAAI;AAAE;GAChD,KAAK;AAAiC,IAApB,EAAE,gBAAgB,EAAE,EAAI,EAAI;AAAE;;IAGpD;EAAC;EAAO;EAAM;EAAK;EAAK;EAAI,CAC7B;AAED,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAK,IAAW,EAAO,WAAW;GAAM;GAAU,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAMG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,EAC5C,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAW;KAAgB,CAAA,CAC3D;;GAGP,kBAAC,OAAD;IACE,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,mBAAiB;IACjB,iBAAe,KAAY,KAAA;IAC3B,UAAU,IAAW,KAAK;IAC1B,WAAW,IAAW,KAAA,IAAY;IAClC,WAAW,EAAO;cATpB;KAWE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAY;MACZ,UAAU,KAAY,KAAS;MAC/B,WAAW,EAAO;MAClB,UAAU,MAAM;AAAuB,OAArB,EAAE,iBAAiB,EAAE,EAAI,IAAQ,EAAK;;gBACzD;MAEQ,CAAA;KAET,kBAAC,QAAD;MAAM,IAAI;MAAQ,WAAW,EAAO;MAAW,eAAY;gBACxD,EAAM,QAAQ,EAAG;MACb,CAAA;KAEP,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAY;MACZ,UAAU,KAAY,KAAS;MAC/B,WAAW,EAAO;MAClB,UAAU,MAAM;AAAuB,OAArB,EAAE,iBAAiB,EAAE,EAAI,IAAQ,EAAK;;gBACzD;MAEQ,CAAA;KACL;;GACF"}
+{"version":3,"file":"SpinRow.js","names":[],"sources":["../../../src/components/SpinRow/SpinRow.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useId,\n  useState,\n} from 'react';\n\nimport styles from './SpinRow.module.css';\n\nexport interface SpinRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge. */\n  leading?: ReactNode;\n  /** Current value (controlled). */\n  value?: number;\n  /** Initial value when uncontrolled. Defaults to `0`. */\n  defaultValue?: number;\n  /** Called when the value changes. */\n  onValueChange?: (value: number) => void;\n  /** Minimum allowed value. Defaults to `0`. */\n  min?: number;\n  /** Maximum allowed value. Defaults to `100`. */\n  max?: number;\n  /** Amount to increment/decrement per step. Defaults to `1`. */\n  step?: number;\n  /** Number of decimal places shown. Derived from `step` when omitted. */\n  decimals?: number;\n  /** Disables the row. */\n  disabled?: boolean;\n}\n\nfunction countDecimals(n: number): number {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\nfunction clamp(v: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, v));\n}\n\n/**\n * Settings row with an integrated spin button for numeric values.\n *\n * Mirrors `AdwSpinRow` — a standard row layout with − / + buttons at the\n * trailing edge. Use inside a `BoxedList` for settings with numeric ranges\n * (volume, timeout duration, count limits, etc.).\n *\n * Supports both controlled (`value`) and uncontrolled (`defaultValue`) modes.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SpinRow.html\n */\nexport function SpinRow({\n  title,\n  subtitle,\n  leading,\n  value: controlledValue,\n  defaultValue = 0,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  decimals,\n  disabled = false,\n  className,\n  ...props\n}: SpinRowProps) {\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const value = isControlled ? controlledValue : uncontrolledValue;\n\n  const dp = decimals ?? countDecimals(step);\n  const spinId = useId();\n\n  const set = useCallback(\n    (next: number) => {\n      const clamped = parseFloat(clamp(next, min, max).toFixed(dp));\n\n      if (!isControlled) {\n        setUncontrolledValue(clamped);\n      }\n\n      onValueChange?.(clamped);\n    },\n    [isControlled, min, max, dp, onValueChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      switch (e.key) {\n        case 'ArrowUp':\n          e.preventDefault();\n          set(value + step);\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          set(value - step);\n          break;\n        case 'PageUp':\n          e.preventDefault();\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          e.preventDefault();\n          set(value - step * 10);\n          break;\n        case 'Home':\n          e.preventDefault();\n          set(min);\n          break;\n        case 'End':\n          e.preventDefault();\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, set],\n  );\n\n  return (\n    <div\n      className={[styles.row, disabled ? styles.disabled : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.content}>\n        <span className={styles.title}>{title}</span>\n        {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n      </span>\n\n      {/* Spin button widget */}\n      <div\n        role=\"spinbutton\"\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-labelledby={spinId}\n        aria-disabled={disabled || undefined}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n        className={styles.spin}\n      >\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value <= min}\n          className={styles.spinBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            set(value - step);\n          }}\n        >\n          −\n        </button>\n\n        <span id={spinId} className={styles.spinValue} aria-hidden=\"true\">\n          {value.toFixed(dp)}\n        </span>\n\n        <button\n          type=\"button\"\n          tabIndex={-1}\n          aria-hidden=\"true\"\n          disabled={disabled || value >= max}\n          className={styles.spinBtn}\n          onClick={(e) => {\n            e.stopPropagation();\n            set(value + step);\n          }}\n        >\n          +\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;AAoCA,SAAS,EAAc,GAAmB;CACxC,IAAM,IAAI,EAAE,UAAU,EAChB,IAAM,EAAE,QAAQ,IAAI;AAE1B,QAAO,MAAQ,KAAK,IAAI,EAAE,SAAS,IAAM;;AAG3C,SAAS,EAAM,GAAW,GAAa,GAAqB;AAC1D,QAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;;AAcxC,SAAgB,EAAQ,EACtB,UACA,aACA,YACA,OAAO,GACP,kBAAe,GACf,kBACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,aACA,cAAW,IACX,cACA,GAAG,KACY;CACf,IAAM,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,EAAa,EAClE,IAAQ,IAAe,IAAkB,GAEzC,IAAK,KAAY,EAAc,EAAK,EACpC,IAAS,GAAO,EAEhB,IAAM,GACT,MAAiB;EAChB,IAAM,IAAU,WAAW,EAAM,GAAM,GAAK,EAAI,CAAC,QAAQ,EAAG,CAAC;AAM7D,EAJK,KACH,EAAqB,EAAQ,EAG/B,IAAgB,EAAQ;IAE1B;EAAC;EAAc;EAAK;EAAK;EAAI;EAAc,CAC5C,EAEK,IAAgB,GACnB,MAAqC;AACpC,UAAQ,EAAE,KAAV;GACE,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,EAAK;AACjB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,EAAK;AACjB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,IAAO,GAAG;AACtB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,IAAQ,IAAO,GAAG;AACtB;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,EAAI;AACR;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAI,EAAI;AACR;;IAGN;EAAC;EAAO;EAAM;EAAK;EAAK;EAAI,CAC7B;AAED,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAK,IAAW,EAAO,WAAW;GAAM;GAAU,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN;GAMG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAQ;KAAa,CAAA,EAC5C,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAW;KAAgB,CAAA,CAC3D;;GAGP,kBAAC,OAAD;IACE,MAAK;IACL,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,mBAAiB;IACjB,iBAAe,KAAY,KAAA;IAC3B,UAAU,IAAW,KAAK;IAC1B,WAAW,IAAW,KAAA,IAAY;IAClC,WAAW,EAAO;cATpB;KAWE,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAY;MACZ,UAAU,KAAY,KAAS;MAC/B,WAAW,EAAO;MAClB,UAAU,MAAM;AAEd,OADA,EAAE,iBAAiB,EACnB,EAAI,IAAQ,EAAK;;gBAEpB;MAEQ,CAAA;KAET,kBAAC,QAAD;MAAM,IAAI;MAAQ,WAAW,EAAO;MAAW,eAAY;gBACxD,EAAM,QAAQ,EAAG;MACb,CAAA;KAEP,kBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,eAAY;MACZ,UAAU,KAAY,KAAS;MAC/B,WAAW,EAAO;MAClB,UAAU,MAAM;AAEd,OADA,EAAE,iBAAiB,EACnB,EAAI,IAAQ,EAAK;;gBAEpB;MAEQ,CAAA;KACL;;GACF"}

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

@@ -1,2 +1,2 @@
-var e={row:`_row_ycg6f_3`,disabled:`_disabled_ycg6f_16`,leading:`_leading_ycg6f_23`,content:`_content_ycg6f_32`,title:`_title_ycg6f_40`,subtitle:`_subtitle_ycg6f_51`,spin:`_spin_ycg6f_65`,spinBtn:`_spinBtn_ycg6f_100`,spinValue:`_spinValue_ycg6f_144`};exports.default=e;
+var e={row:`_row_8oywh_3`,disabled:`_disabled_8oywh_16`,leading:`_leading_8oywh_23`,content:`_content_8oywh_32`,title:`_title_8oywh_40`,subtitle:`_subtitle_8oywh_51`,spin:`_spin_8oywh_65`,spinBtn:`_spinBtn_8oywh_100`,spinValue:`_spinValue_8oywh_144`};exports.default=e;
 //# sourceMappingURL=SpinRow.module.css.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SpinRow.module.css.cjs","names":[],"sources":["../../../src/components/SpinRow/SpinRow.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 ───────────────────────────────────────────────────────────────── */\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/* ─── Spin widget ───────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\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  transition:\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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/* ─── −/+ buttons ───────────────────────────────────────────────────────────── */\n\n.spinBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 34px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spinBtn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 90%, black 10%);\n}\n\n.spinBtn:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 80%, black 20%);\n}\n\n.spinBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.spinBtn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.spinBtn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ─────────────────────────────────────────────────────────── */\n\n.spinValue {\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 48px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .spinBtn:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 85%, white 15%);\n  }\n\n  .spinBtn:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 75%, white 25%);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .spinBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"SpinRow.module.css.cjs","names":[],"sources":["../../../src/components/SpinRow/SpinRow.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 ───────────────────────────────────────────────────────────────── */\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/* ─── Spin widget ───────────────────────────────────────────────────────────── */\n\n.spin {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n\n  background-color: var(--gnome-view-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: inset 0 1px 2px rgba(0, 0, 0, 0.06);\n  overflow: hidden;\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  transition:\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    border-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spin:focus {\n  outline: none;\n}\n\n.spin:focus-visible {\n  border-color: var(--gnome-accent-color, #3584e4);\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.06),\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/* ─── −/+ buttons ───────────────────────────────────────────────────────────── */\n\n.spinBtn {\n  appearance: none;\n  -webkit-appearance: none;\n  border: none;\n  background: transparent;\n  font: inherit;\n  font-size: 1.1rem;\n  line-height: 1;\n  cursor: pointer;\n  color: inherit;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 34px;\n  flex-shrink: 0;\n\n  transition: background-color var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n.spinBtn:hover:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 90%, black 10%);\n}\n\n.spinBtn:active:not(:disabled) {\n  background-color: color-mix(in srgb, var(--gnome-view-bg-color, #ffffff) 80%, black 20%);\n}\n\n.spinBtn:disabled {\n  opacity: var(--gnome-opacity-disabled, 0.5);\n  cursor: not-allowed;\n}\n\n.spinBtn:first-child {\n  border-right: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n.spinBtn:last-child {\n  border-left: 1px solid var(--gnome-card-shade-color, rgba(0, 0, 0, 0.12));\n}\n\n/* ─── Value display ─────────────────────────────────────────────────────────── */\n\n.spinValue {\n  text-align: center;\n  padding: 0 var(--gnome-space-2, 12px);\n  min-width: 48px;\n  font-variant-numeric: tabular-nums;\n  user-select: none;\n  white-space: nowrap;\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .spin {\n    background-color: var(--gnome-view-bg-color, #1e1e1e);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);\n  }\n\n  .spinBtn:hover:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 85%, white 15%);\n  }\n\n  .spinBtn:active:not(:disabled) {\n    background-color: color-mix(in srgb, var(--gnome-view-bg-color, #1e1e1e) 75%, white 25%);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .spin,\n  .spinBtn {\n    transition: none;\n  }\n}\n"],"mappings":""}

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

@@ -1,13 +1,13 @@
 var e = {
-	row: "_row_ycg6f_3",
-	disabled: "_disabled_ycg6f_16",
-	leading: "_leading_ycg6f_23",
-	content: "_content_ycg6f_32",
-	title: "_title_ycg6f_40",
-	subtitle: "_subtitle_ycg6f_51",
-	spin: "_spin_ycg6f_65",
-	spinBtn: "_spinBtn_ycg6f_100",
-	spinValue: "_spinValue_ycg6f_144"
+	row: "_row_8oywh_3",
+	disabled: "_disabled_8oywh_16",
+	leading: "_leading_8oywh_23",
+	content: "_content_8oywh_32",
+	title: "_title_8oywh_40",
+	subtitle: "_subtitle_8oywh_51",
+	spin: "_spin_8oywh_65",
+	spinBtn: "_spinBtn_8oywh_100",
+	spinValue: "_spinValue_8oywh_144"
 };
 //#endregion
 export { e as default };