@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/color/createColorWheel.ts

@@ -4,10 +4,12 @@
  * Provides ARIA attributes and keyboard/pointer handling for a circular hue selector.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { ColorWheelState } from '@proyecto-viviana/solid-stately';
-import { createId } from '../ssr';
-import type { AriaColorWheelOptions, ColorWheelAria } from './types';
+import { createMemo, onCleanup, type Accessor } from "solid-js";
+import type { ColorWheelState } from "@proyecto-viviana/solid-stately";
+import { useLocale } from "../i18n";
+import { createId } from "../ssr";
+import { focusWithoutScrolling } from "../utils/focus";
+import type { AriaColorWheelOptions, ColorWheelAria } from "./types";
 
 /**
  * Creates ARIA props for a color wheel.
@@ -15,86 +17,191 @@ import type { AriaColorWheelOptions, ColorWheelAria } from './types';
 export function createColorWheel(
   props: Accessor<AriaColorWheelOptions>,
   state: Accessor<ColorWheelState>,
-  wheelRef: Accessor<HTMLDivElement | null>
+  wheelRef: Accessor<HTMLDivElement | null>,
 ): ColorWheelAria {
   const getProps = () => props();
   const getState = () => state();
+  const locale = useLocale();
 
   // Generate IDs
   const inputId = createId();
+  let cleanupPointerDrag: (() => void) | undefined;
+  let cleanupMouseDrag: (() => void) | undefined;
+  let dragElement: HTMLElement | null = null;
 
-  // Calculate angle from pointer position
-  const getAngleFromEvent = (e: MouseEvent | PointerEvent) => {
-    const wheel = wheelRef();
+  const outerRadius = () => getProps().outerRadius ?? 100;
+  const innerRadius = () => getProps().innerRadius ?? 74;
+  const thumbRadius = () => (innerRadius() + outerRadius()) / 2;
+
+  const getInput = () => wheelRef()?.querySelector<HTMLInputElement>('input[type="range"]') ?? null;
+  const focusInput = () => {
+    focusWithoutScrolling(getInput());
+    queueMicrotask(() => focusWithoutScrolling(getInput()));
+  };
+
+  const getPointFromEvent = (clientX: number, clientY: number, element?: HTMLElement | null) => {
+    const wheel = element ?? dragElement ?? wheelRef();
     if (!wheel) return null;
 
     const rect = wheel.getBoundingClientRect();
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
 
-    const dx = e.clientX - centerX;
-    const dy = e.clientY - centerY;
-
-    return Math.atan2(-dy, dx); // Negative dy because Y is inverted in screen coords
+    return {
+      x: clientX - centerX,
+      y: clientY - centerY,
+    };
   };
 
-  // Handle pointer down
-  const onPointerDown = (e: PointerEvent) => {
-    if (getProps().isDisabled || getState().isDisabled) return;
+  const updateFromPoint = (
+    clientX: number,
+    clientY: number,
+    requireTrackHit = false,
+    element?: HTMLElement | null,
+  ) => {
+    if (getProps().isDisabled || getState().isDisabled) return false;
 
-    const angle = getAngleFromEvent(e);
-    if (angle === null) return;
+    const point = getPointFromEvent(clientX, clientY, element);
+    if (!point) return false;
 
-    getState().setHueFromAngle(angle);
-    getState().setDragging(true);
+    const distance = Math.sqrt(point.x ** 2 + point.y ** 2);
+    if (requireTrackHit && (distance <= innerRadius() || distance >= outerRadius())) {
+      return false;
+    }
 
-    (e.target as HTMLElement).setPointerCapture?.(e.pointerId);
+    getState().setHueFromPoint(point.x, point.y, thumbRadius());
+    return true;
   };
 
-  // Handle pointer move
-  const onPointerMove = (e: PointerEvent) => {
+  const endDrag = () => {
     if (!getState().isDragging) return;
+    getState().setDragging(false);
+    dragElement = null;
+    focusInput();
+  };
 
-    const angle = getAngleFromEvent(e);
-    if (angle === null) return;
+  const installPointerDragListeners = () => {
+    if (typeof window === "undefined") return;
+    cleanupPointerDrag?.();
 
-    getState().setHueFromAngle(angle);
+    const onPointerMove = (e: PointerEvent) => {
+      if (!getState().isDragging) return;
+      updateFromPoint(e.clientX, e.clientY);
+    };
+    const onPointerEnd = () => {
+      cleanupPointerDrag?.();
+      cleanupPointerDrag = undefined;
+      endDrag();
+    };
+
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerEnd);
+    window.addEventListener("pointercancel", onPointerEnd);
+
+    cleanupPointerDrag = () => {
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerEnd);
+      window.removeEventListener("pointercancel", onPointerEnd);
+    };
+  };
+
+  const installMouseDragListeners = () => {
+    if (typeof window === "undefined") return;
+    cleanupMouseDrag?.();
+
+    const onMouseMove = (e: MouseEvent) => {
+      if (!getState().isDragging) return;
+      updateFromPoint(e.clientX, e.clientY);
+    };
+    const onMouseEnd = () => {
+      cleanupMouseDrag?.();
+      cleanupMouseDrag = undefined;
+      endDrag();
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseEnd);
+
+    cleanupMouseDrag = () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseEnd);
+    };
   };
 
-  // Handle pointer up
-  const onPointerUp = (e: PointerEvent) => {
-    if (getState().isDragging) {
-      getState().setDragging(false);
-      (e.target as HTMLElement).releasePointerCapture?.(e.pointerId);
+  onCleanup(() => {
+    cleanupPointerDrag?.();
+    cleanupMouseDrag?.();
+  });
+
+  const onTrackPointerDown = (e: PointerEvent) => {
+    dragElement = e.currentTarget as HTMLElement;
+    if (!updateFromPoint(e.clientX, e.clientY, true, dragElement)) {
+      dragElement = null;
+      return;
+    }
+    focusInput();
+    getState().setDragging(true);
+    installPointerDragListeners();
+    e.preventDefault();
+  };
+
+  const onTrackMouseDown = (e: MouseEvent) => {
+    dragElement = e.currentTarget as HTMLElement;
+    if (!updateFromPoint(e.clientX, e.clientY, true, dragElement)) {
+      dragElement = null;
+      return;
     }
+    focusInput();
+    getState().setDragging(true);
+    installMouseDragListeners();
+    e.preventDefault();
+  };
+
+  const onThumbPointerDown = (e: PointerEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    focusInput();
+    getState().setDragging(true);
+    installPointerDragListeners();
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const onThumbMouseDown = (e: MouseEvent) => {
+    if (getProps().isDisabled || getState().isDisabled) return;
+    focusInput();
+    getState().setDragging(true);
+    installMouseDragListeners();
+    e.preventDefault();
+    e.stopPropagation();
   };
 
   // Handle keyboard
   const onKeyDown = (e: KeyboardEvent) => {
+    if (e.defaultPrevented) return;
     if (getProps().isDisabled || getState().isDisabled) return;
 
     const s = getState();
     let handled = true;
 
     switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowUp':
+      case "ArrowRight":
+      case "ArrowUp":
         s.increment();
         break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
+      case "ArrowLeft":
+      case "ArrowDown":
         s.decrement();
         break;
-      case 'PageUp':
+      case "PageUp":
         s.increment(s.pageStep);
         break;
-      case 'PageDown':
+      case "PageDown":
         s.decrement(s.pageStep);
         break;
-      case 'Home':
+      case "Home":
         s.setHue(0);
         break;
-      case 'End':
+      case "End":
         s.setHue(359);
         break;
       default:
@@ -102,6 +209,8 @@ export function createColorWheel(
     }
 
     if (handled) {
+      s.setDragging(true);
+      s.setDragging(false);
       e.preventDefault();
       e.stopPropagation();
     }
@@ -110,28 +219,36 @@ export function createColorWheel(
   // Hue spectrum conic gradient
   const conicGradient = `conic-gradient(from 90deg, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%), hsl(330, 100%, 50%), hsl(360, 100%, 50%))`;
 
+  const ringPath = () => {
+    const outer = outerRadius();
+    const inner = innerRadius();
+    const circlePath = (radius: number) =>
+      [
+        `M ${outer}, ${outer} m ${-radius}, 0`,
+        `a ${radius}, ${radius}, 0, 1, 0, ${radius * 2}, 0`,
+        `a ${radius}, ${radius}, 0, 1, 0 ${-radius * 2}, 0`,
+      ].join(" ");
+    return `path(evenodd, "${circlePath(outer)} ${circlePath(inner)}")`;
+  };
+
   // Track props (the wheel container)
   const trackProps = createMemo(() => {
     const s = getState();
     const p = getProps();
 
     return {
-      role: 'presentation' as const,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
+      onPointerDown: onTrackPointerDown,
+      onMouseDown: onTrackMouseDown,
       style: {
-        position: 'relative' as const,
-        'touch-action': 'none',
-        'border-radius': '50%',
+        position: "relative" as const,
+        "touch-action": "none",
+        width: `${outerRadius() * 2}px`,
+        height: `${outerRadius() * 2}px`,
         background: conicGradient,
-        // Use radial-gradient mask to cut out center hole (creates ring shape)
-        // 35% inner radius leaves a nice thick ring
-        '-webkit-mask-image': 'radial-gradient(circle, transparent 35%, black 36%)',
-        'mask-image': 'radial-gradient(circle, transparent 35%, black 36%)',
-        'forced-color-adjust': 'none' as const,
+        "clip-path": ringPath(),
+        "forced-color-adjust": "none" as const,
       },
-      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+      "data-disabled": s.isDisabled || p.isDisabled || undefined,
     };
   });
 
@@ -139,27 +256,22 @@ export function createColorWheel(
   const thumbProps = createMemo(() => {
     const s = getState();
     const p = getProps();
-    const angle = s.getThumbAngle();
-
-    // Calculate thumb position on the wheel edge
-    // Assumes wheel is circular and thumb is at the outer edge
-    // Angle 0 = right (3 o'clock)
-    const thumbX = Math.cos(angle);
-    const thumbY = -Math.sin(angle); // Negative because CSS Y is inverted
+    const position = s.getThumbPosition(thumbRadius());
 
     return {
-      role: 'presentation' as const,
+      onPointerDown: onThumbPointerDown,
+      onMouseDown: onThumbMouseDown,
+      onKeyDown,
       style: {
-        position: 'absolute' as const,
-        // Position relative to center, scaled to radius
-        // These will be overridden by the component with actual radius
-        left: `calc(50% + ${thumbX * 50}%)`,
-        top: `calc(50% + ${thumbY * 50}%)`,
-        transform: 'translate(-50%, -50%)',
-        'touch-action': 'none',
+        position: "absolute" as const,
+        left: `${outerRadius() + position.x}px`,
+        top: `${outerRadius() + position.y}px`,
+        transform: "translate(-50%, -50%)",
+        "touch-action": "none",
+        "forced-color-adjust": "none" as const,
       },
-      'data-dragging': s.isDragging || undefined,
-      'data-disabled': s.isDisabled || p.isDisabled || undefined,
+      "data-dragging": s.isDragging || undefined,
+      "data-disabled": s.isDisabled || p.isDisabled || undefined,
     };
   });
 
@@ -169,18 +281,29 @@ export function createColorWheel(
     const p = getProps();
 
     return {
-      type: 'range',
-      id: inputId,
+      type: "range",
+      id: p.id ?? inputId,
       min: 0,
       max: 360,
       step: s.step,
       value: s.getHue(),
+      name: p.name,
+      form: p.form,
       disabled: s.isDisabled || p.isDisabled,
-      'aria-label': p['aria-label'] ?? 'Hue',
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-valuetext': `${s.getHue()}°`,
+      tabIndex: s.isDisabled || p.isDisabled ? undefined : 0,
+      "aria-label":
+        p["aria-label"] ??
+        (p["aria-labelledby"] ? undefined : s.value.getChannelName("hue", locale().locale)),
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-details": p["aria-details"],
+      "aria-errormessage": p["aria-errormessage"],
+      "aria-valuetext": `${s.value.formatChannelValue("hue", locale().locale)}, ${s.value.getHueName(locale().locale)}`,
       onKeyDown,
+      onInput: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setHue(parseFloat(target.value));
+      },
       onChange: (e: Event) => {
         const target = e.target as HTMLInputElement;
         s.setHue(parseFloat(target.value));
@@ -191,15 +314,17 @@ export function createColorWheel(
         }
       },
       style: {
-        position: 'absolute' as const,
-        width: '1px',
-        height: '1px',
-        padding: '0',
-        margin: '-1px',
-        overflow: 'hidden',
-        clip: 'rect(0, 0, 0, 0)',
-        'white-space': 'nowrap',
-        border: '0',
+        position: "absolute" as const,
+        width: "100%",
+        height: "100%",
+        opacity: "0.0001",
+        padding: "0",
+        margin: "0",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        "white-space": "nowrap",
+        border: "0",
+        "pointer-events": "none" as const,
       },
     };
   });

package/src/color/index.ts

@@ -14,11 +14,11 @@ export type {
   ColorFieldAria,
   AriaColorSwatchOptions,
   ColorSwatchAria,
-} from './types';
+} from "./types";
 
 // Hooks
-export { createColorSlider } from './createColorSlider';
-export { createColorArea } from './createColorArea';
-export { createColorWheel } from './createColorWheel';
-export { createColorField } from './createColorField';
-export { createColorSwatch } from './createColorSwatch';
+export { createColorSlider } from "./createColorSlider";
+export { createColorArea } from "./createColorArea";
+export { createColorWheel } from "./createColorWheel";
+export { createColorField } from "./createColorField";
+export { createColorSwatch } from "./createColorSwatch";

package/src/color/types.ts

@@ -2,18 +2,30 @@
  * Color ARIA types.
  */
 
-import type { JSX } from 'solid-js';
-import type { ColorChannel, Color } from '@proyecto-viviana/solid-stately';
+import type { JSX } from "solid-js";
+import type { ColorChannel, Color, ColorSpace } from "@proyecto-viviana/solid-stately";
 
 export interface AriaColorSliderOptions {
+  /** Element id for the slider track group. */
+  id?: string;
   /** The channel this slider controls. */
   channel: ColorChannel;
+  /** Visible label content, used to connect custom labels with the slider. */
+  label?: JSX.Element;
   /** Accessible label for the slider. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the slider. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the slider. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** ID of element that provides detailed information about the slider. */
+  "aria-details"?: string;
+  /** Name for the hidden range input. */
+  name?: string;
+  /** Associated form owner for the hidden range input. */
+  form?: string;
+  /** The slider orientation. */
+  orientation?: "horizontal" | "vertical";
   /** Whether the slider is disabled. */
   isDisabled?: boolean;
   /** Localized channel name. */
@@ -34,16 +46,28 @@ export interface ColorSliderAria {
 }
 
 export interface AriaColorAreaOptions {
+  /** Element id for the color area. */
+  id?: string;
   /** The X channel. */
   xChannel?: ColorChannel;
   /** The Y channel. */
   yChannel?: ColorChannel;
   /** Accessible label for the area. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the area. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the area. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** ID of element that provides detailed information about the area. */
+  "aria-details"?: string;
+  /** Color space to use for channel axes. */
+  colorSpace?: ColorSpace;
+  /** Name for the hidden X-axis range input. */
+  xName?: string;
+  /** Name for the hidden Y-axis range input. */
+  yName?: string;
+  /** Associated form owner for the hidden range inputs. */
+  form?: string;
   /** Whether the area is disabled. */
   isDisabled?: boolean;
 }
@@ -62,12 +86,26 @@ export interface ColorAreaAria {
 }
 
 export interface AriaColorWheelOptions {
+  /** Element id for the hidden hue range input. */
+  id?: string;
   /** Accessible label for the wheel. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the wheel. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the wheel. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** ID of element that provides detailed information about the wheel. */
+  "aria-details"?: string;
+  /** ID of element that provides the error message. */
+  "aria-errormessage"?: string;
+  /** Name for the hidden hue range input. */
+  name?: string;
+  /** Associated form owner for the hidden hue range input. */
+  form?: string;
+  /** Outer radius of the circular track in pixels. */
+  outerRadius?: number;
+  /** Inner radius of the circular track in pixels. */
+  innerRadius?: number;
   /** Whether the wheel is disabled. */
   isDisabled?: boolean;
 }
@@ -82,18 +120,44 @@ export interface ColorWheelAria {
 }
 
 export interface AriaColorFieldOptions {
+  /** Element id for the input. */
+  id?: string;
   /** Accessible label for the field. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of element that labels the field. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of element that describes the field. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** ID of element that provides detailed information about the field. */
+  "aria-details"?: string;
+  /** ID of element that provides the error message. */
+  "aria-errormessage"?: string;
+  /** Form field name. */
+  name?: string;
+  /** Associated form owner. */
+  form?: string;
+  /** Whether browser wheel events should be ignored. */
+  isWheelDisabled?: boolean;
   /** Whether the field is disabled. */
   isDisabled?: boolean;
   /** Whether the field is read-only. */
   isReadOnly?: boolean;
+  /** Whether the field is required. */
+  isRequired?: boolean;
+  /** Whether the field is invalid. */
+  isInvalid?: boolean;
+  /** Whether to use native or ARIA validation semantics. */
+  validationBehavior?: "aria" | "native";
+  /** Whether the input should receive focus on mount. */
+  autoFocus?: boolean;
+  /** Whether the input should be excluded from tab order. */
+  excludeFromTabOrder?: boolean;
+  /** Placeholder text. */
+  placeholder?: string;
   /** The color channel being edited (for single channel mode). */
   channel?: ColorChannel;
+  /** Color space used for channel mode. */
+  colorSpace?: ColorSpace;
 }
 
 export interface ColorFieldAria {
@@ -101,16 +165,34 @@ export interface ColorFieldAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the description element. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the error message element. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
 export interface AriaColorSwatchOptions {
+  /** Element id for the swatch. */
+  id?: string;
+  /** A named slot for the swatch element. */
+  slot?: string;
   /** The color to display. */
-  color: Color | string;
+  color?: Color | string;
+  /** Localized color name override. */
+  colorName?: string;
   /** Accessible label for the swatch. */
-  'aria-label'?: string;
+  "aria-label"?: string;
+  /** ID of element that labels the swatch. */
+  "aria-labelledby"?: string;
+  /** ID of element that describes the swatch. */
+  "aria-describedby"?: string;
+  /** ID of element that provides detailed information about the swatch. */
+  "aria-details"?: string;
 }
 
 export interface ColorSwatchAria {
   /** Props for the swatch element. */
   swatchProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** The normalized color displayed by the swatch. */
+  color: Color;
 }