@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/color/createColorSlider.ts

@@ -4,10 +4,12 @@
  * Provides ARIA attributes and keyboard handling for a color slider.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { ColorSliderState } from '@proyecto-viviana/solid-stately';
-import { createId } from '../ssr';
-import type { AriaColorSliderOptions, ColorSliderAria } from './types';
+import { createMemo, onCleanup, type Accessor } from "solid-js";
+import type { ColorSliderState } from "@proyecto-viviana/solid-stately";
+import { useLocale } from "../i18n";
+import { createId } from "../ssr";
+import { focusWithoutScrolling } from "../utils/focus";
+import type { AriaColorSliderOptions, ColorSliderAria } from "./types";
 
 /**
  * Creates ARIA props for a color slider.
@@ -15,31 +17,68 @@ import type { AriaColorSliderOptions, ColorSliderAria } from './types';
 export function createColorSlider(
   props: Accessor<AriaColorSliderOptions>,
   state: Accessor<ColorSliderState>,
-  trackRef: Accessor<HTMLDivElement | null>
+  trackRef: Accessor<HTMLDivElement | null>,
+  inputRef?: Accessor<HTMLInputElement | null>,
 ): ColorSliderAria {
   const getProps = () => props();
   const getState = () => state();
+  const locale = useLocale();
+  const isRTL = () => locale().direction === "rtl";
 
   // Generate IDs
+  const trackId = createId();
   const inputId = createId();
   const labelId = createId();
+  let cleanupPointerDrag: (() => void) | undefined;
+  let cleanupMouseDrag: (() => void) | undefined;
+
+  const getInput = () =>
+    inputRef?.() ?? trackRef()?.querySelector<HTMLInputElement>('input[type="range"]') ?? null;
+  const focusInput = () => {
+    focusWithoutScrolling(getInput());
+    queueMicrotask(() => focusWithoutScrolling(getInput()));
+  };
 
   // Get channel name for ARIA label
   const channelName = createMemo(() => {
     const p = getProps();
     if (p.channelName) return p.channelName;
     const s = getState();
-    return s.value.getChannelName(s.channel, 'en-US');
+    return s.value.getChannelName(s.channel, "en-US");
   });
 
-  const updateFromClientX = (clientX: number) => {
+  const orientation = () => getProps().orientation ?? "horizontal";
+  const hasVisibleLabel = () => getProps().label != null;
+  const trackElementId = () => getProps().id ?? trackId;
+  const trackLabelledBy = () => {
+    const p = getProps();
+    return p["aria-labelledby"] ?? (hasVisibleLabel() ? labelId : undefined);
+  };
+  const inputLabelledBy = () => (hasVisibleLabel() ? labelId : trackElementId());
+  const trackAriaLabel = () => {
+    const p = getProps();
+    if (p["aria-label"]) return p["aria-label"];
+    if (p["aria-labelledby"] || hasVisibleLabel()) return undefined;
+    return channelName();
+  };
+
+  const updateFromPointer = (clientX: number, clientY: number) => {
     if (getProps().isDisabled || getState().isDisabled) return;
 
     const track = trackRef();
     if (!track) return;
 
     const rect = track.getBoundingClientRect();
-    const percent = (clientX - rect.left) / rect.width;
+    if (rect.width === 0 || rect.height === 0) return;
+
+    let percent: number;
+    if (orientation() === "vertical") {
+      percent = 1 - (clientY - rect.top) / rect.height;
+    } else {
+      const physicalPercent = (clientX - rect.left) / rect.width;
+      percent = isRTL() ? 1 - physicalPercent : physicalPercent;
+    }
+
     getState().setThumbPercent(Math.max(0, Math.min(1, percent)));
   };
 
@@ -47,74 +86,160 @@ export function createColorSlider(
     const s = getState();
     if (!s.isDragging) return;
     s.setDragging(false);
+    focusInput();
     if (pointerId == null) return;
-    (target as HTMLElement | null)?.releasePointerCapture?.(pointerId);
+    try {
+      (target as HTMLElement | null)?.releasePointerCapture?.(pointerId);
+    } catch {
+      // Some synthetic pointer sequences do not have active capture by the time
+      // drag end runs. React Aria treats capture as best-effort as well.
+    }
+  };
+
+  const installPointerDragListeners = () => {
+    if (typeof window === "undefined") return;
+    cleanupPointerDrag?.();
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (!getState().isDragging) return;
+      updateFromPointer(e.clientX, e.clientY);
+    };
+    const onPointerEnd = (e: PointerEvent) => {
+      cleanupPointerDrag?.();
+      cleanupPointerDrag = undefined;
+      endDrag(trackRef(), e.pointerId);
+    };
+
+    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;
+      updateFromPointer(e.clientX, e.clientY);
+    };
+    const onMouseEnd = () => {
+      cleanupMouseDrag?.();
+      cleanupMouseDrag = undefined;
+      endDrag(trackRef());
+    };
+
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseEnd);
+
+    cleanupMouseDrag = () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseEnd);
+    };
   };
 
+  onCleanup(() => {
+    cleanupPointerDrag?.();
+    cleanupMouseDrag?.();
+  });
+
   // Handle pointer interaction on the track
   const onTrackPointerDown = (e: PointerEvent) => {
     if (getProps().isDisabled || getState().isDisabled) return;
-    updateFromClientX(e.clientX);
+    updateFromPointer(e.clientX, e.clientY);
+    focusInput();
     getState().setDragging(true);
-    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    try {
+      (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+    } catch {
+      // Keep drag behavior working in environments where pointer capture is not
+      // active for this event, including Playwright's synthetic mouse pointer.
+    }
+    installPointerDragListeners();
     e.preventDefault();
   };
 
   const onTrackPointerMove = (e: PointerEvent) => {
     if (!getState().isDragging) return;
-    updateFromClientX(e.clientX);
+    updateFromPointer(e.clientX, e.clientY);
   };
 
   const onTrackPointerUp = (e: PointerEvent) => {
+    cleanupPointerDrag?.();
+    cleanupPointerDrag = undefined;
     endDrag(e.currentTarget, e.pointerId);
   };
 
   const onTrackPointerCancel = (e: PointerEvent) => {
+    cleanupPointerDrag?.();
+    cleanupPointerDrag = undefined;
     endDrag(e.currentTarget, e.pointerId);
   };
 
   const onTrackMouseDown = (e: MouseEvent) => {
     if (getProps().isDisabled || getState().isDisabled) return;
-    updateFromClientX(e.clientX);
+    updateFromPointer(e.clientX, e.clientY);
     getState().setDragging(true);
+    installMouseDragListeners();
     e.preventDefault();
   };
 
   const onTrackMouseMove = (e: MouseEvent) => {
     if (!getState().isDragging) return;
-    updateFromClientX(e.clientX);
+    updateFromPointer(e.clientX, e.clientY);
   };
 
   const onTrackMouseUp = (e: MouseEvent) => {
+    cleanupMouseDrag?.();
+    cleanupMouseDrag = undefined;
     endDrag(e.currentTarget);
   };
 
   // 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 "ArrowUp":
         s.incrementThumb();
         break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
+      case "ArrowDown":
         s.decrementThumb();
         break;
-      case 'PageUp':
+      case "ArrowRight":
+        if (orientation() === "horizontal" && isRTL()) {
+          s.decrementThumb();
+        } else {
+          s.incrementThumb();
+        }
+        break;
+      case "ArrowLeft":
+        if (orientation() === "horizontal" && isRTL()) {
+          s.incrementThumb();
+        } else {
+          s.decrementThumb();
+        }
+        break;
+      case "PageUp":
         s.incrementThumb(s.pageSize);
         break;
-      case 'PageDown':
+      case "PageDown":
         s.decrementThumb(s.pageSize);
         break;
-      case 'Home':
+      case "Home":
         s.setThumbValue(s.minValue);
         break;
-      case 'End':
+      case "End":
         s.setThumbValue(s.maxValue);
         break;
       default:
@@ -130,33 +255,33 @@ export function createColorSlider(
   // Generate gradient background for the slider track
   const generateBackground = () => {
     const s = getState();
-    const value = s.value;
+    const value = s.getDisplayColor();
     const channel = s.channel;
-    const to = 'right';
+    const to = orientation() === "vertical" ? "top" : isRTL() ? "left" : "right";
 
     switch (channel) {
-      case 'hue': {
+      case "hue": {
         const stops = [0, 60, 120, 180, 240, 300, 360]
-          .map(hue => value.withChannelValue('hue', hue).toString('css'))
-          .join(', ');
+          .map((hue) => value.withChannelValue("hue", hue).toString("css"))
+          .join(", ");
         return `linear-gradient(to ${to}, ${stops})`;
       }
-      case 'lightness': {
+      case "lightness": {
         const min = s.minValue;
         const max = s.maxValue;
-        const start = value.withChannelValue(channel, min).toString('css');
-        const middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
-        const end = value.withChannelValue(channel, max).toString('css');
+        const start = value.withChannelValue(channel, min).toString("css");
+        const middle = value.withChannelValue(channel, (max - min) / 2).toString("css");
+        const end = value.withChannelValue(channel, max).toString("css");
         return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
       }
-      case 'saturation':
-      case 'brightness':
-      case 'red':
-      case 'green':
-      case 'blue':
-      case 'alpha': {
-        const start = value.withChannelValue(channel, s.minValue).toString('css');
-        const end = value.withChannelValue(channel, s.maxValue).toString('css');
+      case "saturation":
+      case "brightness":
+      case "red":
+      case "green":
+      case "blue":
+      case "alpha": {
+        const start = value.withChannelValue(channel, s.minValue).toString("css");
+        const end = value.withChannelValue(channel, s.maxValue).toString("css");
         return `linear-gradient(to ${to}, ${start}, ${end})`;
       }
       default:
@@ -167,9 +292,13 @@ export function createColorSlider(
   // Track props
   const trackProps = createMemo(() => {
     const s = getState();
+    const p = getProps();
     const bg = generateBackground();
     return {
-      role: 'presentation' as const,
+      id: trackElementId(),
+      role: "group" as const,
+      "aria-label": trackAriaLabel(),
+      "aria-labelledby": trackLabelledBy(),
       onPointerDown: onTrackPointerDown,
       onPointerMove: onTrackPointerMove,
       onPointerUp: onTrackPointerUp,
@@ -178,11 +307,12 @@ export function createColorSlider(
       onMouseMove: onTrackMouseMove,
       onMouseUp: onTrackMouseUp,
       style: {
-        position: 'relative' as const,
-        'touch-action': 'none',
-        ...(bg ? { background: bg, 'forced-color-adjust': 'none' as const } : {}),
+        position: "relative" as const,
+        "touch-action": "none",
+        "forced-color-adjust": "none" as const,
+        ...(bg ? { background: bg } : {}),
       },
-      'data-disabled': s.isDisabled || undefined,
+      "data-disabled": s.isDisabled || undefined,
     };
   });
 
@@ -191,39 +321,66 @@ export function createColorSlider(
     const s = getState();
     const p = getProps();
     const percent = s.getThumbPercent();
+    const x = orientation() === "horizontal" ? (isRTL() ? 1 - percent : percent) : 0.5;
+    const y = orientation() === "horizontal" ? 0.5 : 1 - percent;
 
     return {
-      role: 'presentation' as const,
+      role: "presentation" as const,
+      onKeyDown,
       style: {
-        position: 'absolute' as const,
-        left: `${percent * 100}%`,
-        top: '50%',
-        transform: 'translate(-50%, -50%)',
-        'touch-action': 'none',
+        position: "absolute" as const,
+        left: `${x * 100}%`,
+        top: `${y * 100}%`,
+        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,
     };
   });
 
+  const ariaValueText = () => {
+    const s = getState();
+    const loc = locale().locale;
+    const displayColor = s.getDisplayColor();
+    let valueText = s.getThumbValueLabel();
+
+    if (s.channel === "hue") {
+      valueText += `, ${displayColor.getHueName(loc)}`;
+    } else if (s.channel !== "alpha") {
+      valueText += `, ${displayColor.getColorName(loc)}`;
+    }
+
+    return valueText;
+  };
+
   // Input props (hidden, for accessibility)
   const inputProps = createMemo(() => {
     const s = getState();
     const p = getProps();
 
     return {
-      type: 'range',
+      type: "range",
       id: inputId,
       min: s.minValue,
       max: s.maxValue,
       step: s.step,
       value: s.getThumbValue(),
+      name: p.name,
+      form: p.form,
       disabled: s.isDisabled || p.isDisabled,
-      'aria-label': p['aria-label'] ?? channelName(),
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-valuetext': s.getThumbValueLabel(),
+      tabIndex: s.isDisabled || p.isDisabled ? undefined : 0,
+      "aria-orientation": orientation(),
+      "aria-labelledby": inputLabelledBy(),
+      "aria-describedby": p["aria-describedby"] ?? "",
+      "aria-details": p["aria-details"] ?? "",
+      "aria-valuetext": ariaValueText(),
       onKeyDown,
+      onInput: (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        s.setThumbValue(parseFloat(target.value));
+      },
       onChange: (e: Event) => {
         const target = e.target as HTMLInputElement;
         s.setThumbValue(parseFloat(target.value));
@@ -231,21 +388,18 @@ export function createColorSlider(
       onFocus: () => {
         // Focus handling
       },
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
       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,
+        opacity: "0.0001",
+        width: "100%",
+        height: "100%",
+        padding: "0",
+        margin: "-1px",
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        "white-space": "nowrap",
+        border: "0",
+        "pointer-events": "none" as const,
       },
     };
   });
@@ -253,7 +407,7 @@ export function createColorSlider(
   // Output props
   const outputProps = createMemo(() => {
     return {
-      'aria-live': 'off' as const,
+      "aria-live": "off" as const,
       for: inputId,
     };
   });
@@ -262,7 +416,11 @@ export function createColorSlider(
   const labelProps = createMemo(() => {
     return {
       id: labelId,
-      for: inputId,
+      onClick: () => {
+        if (typeof document !== "undefined") {
+          document.getElementById(inputId)?.focus();
+        }
+      },
     };
   });
 

package/src/color/createColorSwatch.ts

@@ -4,30 +4,52 @@
  * Provides ARIA attributes for a color swatch display.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import { normalizeColor } from '@proyecto-viviana/solid-stately';
-import type { AriaColorSwatchOptions, ColorSwatchAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import { normalizeColor } from "@proyecto-viviana/solid-stately";
+import { useLocale } from "../i18n";
+import { createId } from "../ssr";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import type { AriaColorSwatchOptions, ColorSwatchAria } from "./types";
 
 /**
  * Creates ARIA props for a color swatch.
  */
-export function createColorSwatch(
-  props: Accessor<AriaColorSwatchOptions>
-): ColorSwatchAria {
+export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): ColorSwatchAria {
   const getProps = () => props();
+  const locale = useLocale();
+  const generatedId = createId();
+  const id = () => getProps().id ?? generatedId;
+
+  const color = createMemo(() => normalizeColor(getProps().color ?? "#fff0"));
+
+  const colorName = createMemo(() => {
+    const p = getProps();
+    if (p.colorName) return p.colorName;
+
+    const resolvedColor = color();
+    if (resolvedColor.getChannelValue("alpha") === 0) {
+      return "transparent";
+    }
+
+    return resolvedColor.getColorName(locale().locale);
+  });
 
-  // Swatch props
   const swatchProps = createMemo(() => {
     const p = getProps();
-    const color = normalizeColor(p.color);
-    const colorName = color.getColorName('en-US');
+    const domProps = filterDOMProps(p as Record<string, unknown>, { labelable: true });
+    const ariaLabel = [colorName(), p["aria-label"] || ""].filter(Boolean).join(", ");
 
     return {
-      role: 'img' as const,
-      'aria-label': p['aria-label'] ?? colorName,
-      'aria-roledescription': 'color swatch',
+      ...domProps,
+      id: id(),
+      slot: p.slot,
+      role: "img" as const,
+      "aria-roledescription": "color swatch",
+      "aria-label": ariaLabel,
+      "aria-labelledby": p["aria-labelledby"] ? `${id()} ${p["aria-labelledby"]}` : undefined,
       style: {
-        'background-color': color.toString('css'),
+        "background-color": color().toString("css"),
+        "forced-color-adjust": "none" as const,
       },
     };
   });
@@ -36,5 +58,8 @@ export function createColorSwatch(
     get swatchProps() {
       return swatchProps();
     },
+    get color() {
+      return color();
+    },
   };
 }