@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/slider/createSlider.ts

@@ -4,15 +4,16 @@
  * Based on @react-aria/slider useSlider.
  */
 
-import { type JSX, onCleanup, onMount } from 'solid-js';
-import { createLabel } from '../label/createLabel';
-import { createFocusRing } from '../interactions/createFocusRing';
-import { filterDOMProps } from '../utils/filterDOMProps';
-import { mergeProps } from '../utils/mergeProps';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { SliderState, SliderOrientation } from '@proyecto-viviana/solid-stately';
-import { useLocale } from '../i18n';
+import { type JSX, onCleanup, onMount } from "solid-js";
+import { createLabel } from "../label/createLabel";
+import { createFocusRing } from "../interactions/createFocusRing";
+import { filterDOMProps } from "../utils/filterDOMProps";
+import { focusWithoutScrolling } from "../utils/focus";
+import { mergeProps } from "../utils/mergeProps";
+import { createId } from "../ssr";
+import { useLocale } from "../i18n";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { SliderState, SliderOrientation } from "@proyecto-viviana/solid-stately";
 
 export interface AriaSliderProps {
   /** An ID for the slider. */
@@ -22,13 +23,17 @@ export interface AriaSliderProps {
   /** The label for the slider. */
   label?: JSX.Element;
   /** An accessible label for the slider when no visible label is provided. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the slider. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the slider. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
   /** The orientation of the slider. */
   orientation?: SliderOrientation;
+  /** The name for the form input. */
+  name?: string;
+  /** The form element this input belongs to. */
+  form?: string;
 }
 
 export interface SliderAria {
@@ -52,7 +57,8 @@ export interface SliderAria {
 export function createSlider(
   props: MaybeAccessor<AriaSliderProps>,
   state: SliderState,
-  trackRef?: () => HTMLElement | null
+  trackRef?: () => HTMLElement | null,
+  inputRef?: () => HTMLInputElement | null,
 ): SliderAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
@@ -74,13 +80,13 @@ export function createSlider(
     get label() {
       return getProps().label;
     },
-    get 'aria-label'() {
-      return getProps()['aria-label'];
+    get "aria-label"() {
+      return getProps()["aria-label"];
     },
-    get 'aria-labelledby'() {
-      return getProps()['aria-labelledby'];
+    get "aria-labelledby"() {
+      return getProps()["aria-labelledby"];
     },
-    labelElementType: 'span',
+    labelElementType: "span",
   });
 
   // Focus ring for keyboard focus styling
@@ -97,7 +103,7 @@ export function createSlider(
     if (!track) return 0;
 
     const rect = track.getBoundingClientRect();
-    const isVertical = state.orientation === 'vertical';
+    const isVertical = state.orientation === "vertical";
 
     let position: number;
     if (isVertical) {
@@ -123,6 +129,7 @@ export function createSlider(
 
     const percent = getPositionFromPointer(e.clientX, e.clientY);
     state.setValuePercent(percent);
+    focusWithoutScrolling(inputRef?.() ?? null);
     state.setDragging(true);
   };
 
@@ -144,56 +151,60 @@ export function createSlider(
     }
 
     currentPointerId = null;
+    focusWithoutScrolling(inputRef?.() ?? null);
     state.setDragging(false);
   };
 
-  // Keyboard navigation for thumb
+  // Keyboard navigation that is not consistently handled by the native range input.
   const onThumbKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled) return;
 
-    const isVertical = state.orientation === 'vertical';
-    const isRTL = locale().direction === 'rtl';
-    const shouldIncrementOnArrowRight = !isVertical && !isRTL;
-    const shouldIncrementOnArrowLeft = !isVertical && isRTL;
-
     switch (e.key) {
-      case 'ArrowRight':
-      case 'ArrowUp':
+      case "ArrowRight":
+        e.preventDefault();
+        if (state.orientation === "horizontal" && locale().direction === "rtl") {
+          state.decrement();
+        } else {
+          state.increment();
+        }
+        break;
+      case "ArrowLeft":
         e.preventDefault();
-        if (
-          (e.key === 'ArrowRight' && shouldIncrementOnArrowRight) ||
-          (e.key === 'ArrowUp' && isVertical)
-        ) {
+        if (state.orientation === "horizontal" && locale().direction === "rtl") {
           state.increment();
         } else {
           state.decrement();
         }
         break;
-      case 'ArrowLeft':
-      case 'ArrowDown':
+      case "ArrowUp":
         e.preventDefault();
-        if (
-          (e.key === 'ArrowLeft' && shouldIncrementOnArrowLeft) ||
-          (e.key === 'ArrowDown' && isVertical)
-        ) {
+        if (state.orientation === "vertical") {
           state.increment();
         } else {
           state.decrement();
         }
         break;
-      case 'PageUp':
+      case "ArrowDown":
+        e.preventDefault();
+        if (state.orientation === "vertical") {
+          state.decrement();
+        } else {
+          state.increment();
+        }
+        break;
+      case "PageUp":
         e.preventDefault();
         state.increment(state.pageStep / state.step);
         break;
-      case 'PageDown':
+      case "PageDown":
         e.preventDefault();
         state.decrement(state.pageStep / state.step);
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
         state.setValue(state.minValue);
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
         state.setValue(state.maxValue);
         break;
@@ -216,6 +227,7 @@ export function createSlider(
     e.preventDefault();
     e.stopPropagation(); // Prevent track from also handling
     currentPointerId = e.pointerId;
+    focusWithoutScrolling(inputRef?.() ?? null);
 
     // Capture pointer on document for smooth dragging
     document.body.setPointerCapture(e.pointerId);
@@ -241,27 +253,28 @@ export function createSlider(
     }
 
     currentPointerId = null;
+    focusWithoutScrolling(inputRef?.() ?? null);
     state.setDragging(false);
   };
 
   // Set up global listeners on mount (client-side only)
   onMount(() => {
-    if (typeof document === 'undefined') return;
+    if (typeof document === "undefined") return;
 
-    document.addEventListener('pointermove', onDocumentPointerMove);
-    document.addEventListener('pointerup', onDocumentPointerUp);
-    document.addEventListener('pointercancel', onDocumentPointerUp);
+    document.addEventListener("pointermove", onDocumentPointerMove);
+    document.addEventListener("pointerup", onDocumentPointerUp);
+    document.addEventListener("pointercancel", onDocumentPointerUp);
 
     // Cleanup when component unmounts
     onCleanup(() => {
-      document.removeEventListener('pointermove', onDocumentPointerMove);
-      document.removeEventListener('pointerup', onDocumentPointerUp);
-      document.removeEventListener('pointercancel', onDocumentPointerUp);
+      document.removeEventListener("pointermove", onDocumentPointerMove);
+      document.removeEventListener("pointerup", onDocumentPointerUp);
+      document.removeEventListener("pointercancel", onDocumentPointerUp);
     });
   });
 
-  const labelledBy = () => (fieldProps as { 'aria-labelledby'?: string })['aria-labelledby'];
-  const ariaLabel = () => (fieldProps as { 'aria-label'?: string })['aria-label'];
+  const labelledBy = () => (fieldProps as { "aria-labelledby"?: string })["aria-labelledby"];
+  const ariaLabel = () => (fieldProps as { "aria-label"?: string })["aria-label"];
 
   return {
     get labelProps() {
@@ -272,10 +285,10 @@ export function createSlider(
         domProps(),
         fieldProps as Record<string, unknown>,
         {
-          role: 'group',
-          'data-disabled': state.isDisabled || undefined,
-          'data-orientation': state.orientation,
-        } as Record<string, unknown>
+          role: "group",
+          "data-disabled": state.isDisabled || undefined,
+          "data-orientation": state.orientation,
+        } as Record<string, unknown>,
       ) as JSX.HTMLAttributes<HTMLElement>;
     },
     get trackProps() {
@@ -285,79 +298,82 @@ export function createSlider(
         onPointerUp: onTrackPointerUp,
         onPointerCancel: onTrackPointerUp,
         style: {
-          position: 'relative',
-          'touch-action': 'none',
+          position: "relative",
+          "touch-action": "none",
         },
-        'data-disabled': state.isDisabled || undefined,
-        'data-orientation': state.orientation,
-        'data-dragging': state.isDragging() || undefined,
+        "data-disabled": state.isDisabled || undefined,
+        "data-orientation": state.orientation,
+        "data-dragging": state.isDragging() || undefined,
       } as JSX.HTMLAttributes<HTMLElement>;
     },
     get thumbProps() {
       const percent = state.getValuePercent();
-      const isVertical = state.orientation === 'vertical';
+      const isVertical = state.orientation === "vertical";
+
+      return {
+        role: "slider",
+        "aria-valuemin": state.minValue,
+        "aria-valuemax": state.maxValue,
+        "aria-valuenow": state.value(),
+        "aria-valuetext": state.getFormattedValue(),
+        "aria-orientation": state.orientation,
+        "aria-disabled": state.isDisabled || undefined,
+        "aria-labelledby": labelledBy(),
+        "aria-label": labelledBy() ? undefined : ariaLabel(),
+        tabIndex: state.isDisabled ? undefined : 0,
+        onPointerDown: onThumbPointerDown,
+        onKeyDown: onThumbKeyDown,
+        onFocus,
+        onBlur,
+        style: {
+          position: "absolute",
+          [isVertical ? "bottom" : "left"]: `${percent * 100}%`,
+          transform: isVertical ? "translateY(50%)" : "translateX(-50%)",
+          "touch-action": "none",
+        },
+        "data-disabled": state.isDisabled || undefined,
+        "data-dragging": state.isDragging() || undefined,
+      } as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get inputProps() {
+      const p = getProps();
 
       return mergeProps(
         focusProps as Record<string, unknown>,
         {
-          role: 'slider',
-          tabIndex: state.isDisabled ? undefined : 0,
-          'aria-valuemin': state.minValue,
-          'aria-valuemax': state.maxValue,
-          'aria-valuenow': state.value(),
-          'aria-valuetext': state.getFormattedValue(),
-          'aria-orientation': state.orientation,
-          'aria-disabled': state.isDisabled || undefined,
-          'aria-labelledby': labelledBy(),
-          'aria-label': labelledBy() ? undefined : ariaLabel(),
-          onPointerDown: onThumbPointerDown,
-          onKeyDown: onThumbKeyDown,
+          type: "range",
+          id: inputId,
+          "aria-hidden": true,
+          min: state.minValue,
+          max: state.maxValue,
+          step: state.step,
+          value: state.value(),
+          name: p.name,
+          form: p.form,
+          disabled: state.isDisabled,
+          "aria-orientation": state.orientation,
+          "aria-valuetext": state.getFormattedValue(),
+          "aria-labelledby": labelledBy(),
+          "aria-label": labelledBy() ? undefined : ariaLabel(),
+          tabIndex: -1,
+          onInput: (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            state.setValue(parseFloat(target.value));
+          },
+          onChange: (e: Event) => {
+            const target = e.target as HTMLInputElement;
+            state.setValue(parseFloat(target.value));
+          },
           onFocus,
           onBlur,
-          style: {
-            position: 'absolute',
-            [isVertical ? 'bottom' : 'left']: `${percent * 100}%`,
-            transform: isVertical ? 'translateY(50%)' : 'translateX(-50%)',
-          },
-          'data-disabled': state.isDisabled || undefined,
-          'data-dragging': state.isDragging() || undefined,
-          'data-focus-visible': isFocusVisible() || undefined,
-        } as Record<string, unknown>
-      ) as JSX.HTMLAttributes<HTMLElement>;
-    },
-    get inputProps() {
-      return {
-        type: 'range',
-        id: inputId,
-        min: state.minValue,
-        max: state.maxValue,
-        step: state.step,
-        value: state.value(),
-        disabled: state.isDisabled,
-        'aria-hidden': true,
-        tabIndex: -1,
-        style: {
-          position: 'absolute',
-          width: '1px',
-          height: '1px',
-          padding: '0',
-          margin: '-1px',
-          overflow: 'hidden',
-          clip: 'rect(0, 0, 0, 0)',
-          'white-space': 'nowrap',
-          border: '0',
-        },
-        onChange: (e: Event) => {
-          const target = e.target as HTMLInputElement;
-          state.setValue(parseFloat(target.value));
-        },
-      } as JSX.InputHTMLAttributes<HTMLInputElement>;
+        } as Record<string, unknown>,
+      ) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
     get outputProps() {
       return {
         id: outputId,
-        'for': inputId,
-        'aria-live': 'off',
+        for: inputId,
+        "aria-live": "off",
       } as JSX.HTMLAttributes<HTMLElement>;
     },
   };

package/src/slider/index.ts

@@ -1,2 +1,2 @@
-export { createSlider } from './createSlider';
-export type { AriaSliderProps, SliderAria } from './createSlider';
+export { createSlider } from "./createSlider";
+export type { AriaSliderProps, SliderAria } from "./createSlider";

package/src/ssr/index.tsx

@@ -18,12 +18,8 @@ import {
   onMount,
   useContext,
   createUniqueId,
-} from 'solid-js';
-import { isServer } from 'solid-js/web';
-
-// ============================================
-// TYPES
-// ============================================
+} from "solid-js";
+import { isServer } from "solid-js/web";
 
 export interface SSRProviderProps extends ParentProps {}
 
@@ -34,19 +30,11 @@ export interface SSRContextValue {
   prefix: string;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 const SSRContext = createContext<SSRContextValue>({
   isSSR: isServer,
-  prefix: '',
+  prefix: "",
 });
 
-// ============================================
-// BASIC UTILITIES
-// ============================================
-
 /**
  * Returns whether the component is currently being server side rendered.
  * Can be used to delay browser-specific rendering until after hydration.
@@ -92,9 +80,36 @@ export function createId(defaultId?: string): string {
   return ctx.prefix ? `solidaria-${ctx.prefix}-${uniqueId}` : `solidaria-${uniqueId}`;
 }
 
-// ============================================
-// SSR PROVIDER
-// ============================================
+/**
+ * Generates an id, but only resolves to it once an element with that id is
+ * actually present in the DOM. Returns `undefined` otherwise.
+ *
+ * This is a 1:1 port of @react-aria/utils's `useSlotId`. It exists so that an
+ * `aria-labelledby` can point at an optional slot (e.g. a section header) and
+ * automatically fall back to `undefined` when the slot is not rendered, instead
+ * of leaving a dangling reference to a non-existent id.
+ *
+ * The initial value is the generated id so that server and first client render
+ * agree (no hydration mismatch); a client-only effect then probes the DOM and
+ * clears the value when no matching element exists.
+ *
+ * @param deps - Accessors re-probed when their values change (mirrors the
+ *   dependency array of the upstream hook).
+ */
+export function createSlotId(deps: Array<Accessor<unknown>> = []): Accessor<string | undefined> {
+  const id = createId();
+  const [resolvedId, setResolvedId] = createSignal<string | undefined>(id);
+
+  createEffect(() => {
+    // Re-probe when any explicit dependency changes.
+    for (const dep of deps) {
+      dep();
+    }
+    setResolvedId(document.getElementById(id) ? id : undefined);
+  });
+
+  return resolvedId;
+}
 
 /**
  * Provides SSR context to the component tree.
@@ -130,17 +145,9 @@ export function SSRProvider(props: SSRProviderProps & { prefix?: string }): JSX.
       : parentContext.prefix,
   }));
 
-  return (
-    <SSRContext.Provider value={value()}>
-      {props.children}
-    </SSRContext.Provider>
-  );
+  return <SSRContext.Provider value={value()}>{props.children}</SSRContext.Provider>;
 }
 
-// ============================================
-// HYDRATION STATE
-// ============================================
-
 /**
  * Tracks whether the component is currently hydrating.
  *
@@ -204,10 +211,6 @@ export function useIsSSR(): Accessor<boolean> {
   return createHydrationState();
 }
 
-// ============================================
-// SAFE BROWSER EFFECTS
-// ============================================
-
 /**
  * Creates an effect that only runs on the client after hydration.
  * This is a convenience wrapper that ensures browser-specific code
@@ -234,7 +237,7 @@ export function createBrowserEffect(fn: () => void | (() => void)): void {
 
   createEffect(() => {
     const cleanup = fn();
-    if (typeof cleanup === 'function') {
+    if (typeof cleanup === "function") {
       onCleanup(cleanup);
     }
   });
@@ -259,10 +262,7 @@ export function createBrowserEffect(fn: () => void | (() => void)): void {
  * }
  * ```
  */
-export function createBrowserValue<T>(
-  fn: () => T,
-  fallback: T
-): Accessor<T> {
+export function createBrowserValue<T>(fn: () => T, fallback: T): Accessor<T> {
   if (isServer) {
     return () => fallback;
   }
@@ -276,10 +276,6 @@ export function createBrowserValue<T>(
   return value;
 }
 
-// ============================================
-// WINDOW/DOCUMENT SAFE ACCESS
-// ============================================
-
 /**
  * Returns the window object if available, or undefined during SSR.
  * Useful for accessing browser globals safely.
@@ -293,7 +289,7 @@ export function createBrowserValue<T>(
  * ```
  */
 export function getWindow(): Window | undefined {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     return window;
   }
   return undefined;
@@ -312,7 +308,7 @@ export function getWindow(): Window | undefined {
  * ```
  */
 export function getDocument(): Document | undefined {
-  if (typeof document !== 'undefined') {
+  if (typeof document !== "undefined") {
     return document;
   }
   return undefined;
@@ -336,10 +332,6 @@ export function getOwnerWindow(el: Element | null | undefined): Window | undefin
   return getOwnerDocument(el)?.defaultView ?? getWindow();
 }
 
-// ============================================
-// PORTAL HELPERS
-// ============================================
-
 /**
  * Gets the appropriate container for portals, with SSR safety.
  * Returns the specified container, or document.body on the client,

package/src/steplist/createStepList.ts

@@ -0,0 +1,106 @@
+/**
+ * ARIA hooks for StepList components.
+ * Provides accessible step list and step item props.
+ */
+
+import type { JSX } from "solid-js";
+import type { StepListState } from "@proyecto-viviana/solid-stately";
+import type { Key } from "@proyecto-viviana/solid-stately";
+
+export interface AriaStepListProps {
+  /** Accessible label for the step list. */
+  "aria-label"?: string;
+  /** ID of element that labels the step list. */
+  "aria-labelledby"?: string;
+}
+
+export interface StepListAria {
+  /** Props for the step list container element. */
+  stepListProps: JSX.HTMLAttributes<HTMLOListElement>;
+}
+
+/**
+ * Creates ARIA props for a step list container.
+ */
+export function createStepList(props: AriaStepListProps, _state: StepListState): StepListAria {
+  return {
+    stepListProps: {
+      get "aria-label"() {
+        return props["aria-label"] ?? "Step List";
+      },
+      get "aria-labelledby"() {
+        return props["aria-labelledby"];
+      },
+    },
+  };
+}
+
+export interface AriaStepProps {
+  /** The key of this step. */
+  key: Key;
+}
+
+export interface StepAria {
+  /** Props for the step element (anchor/link). */
+  stepProps: JSX.HTMLAttributes<HTMLAnchorElement>;
+  /** Accessible text describing the step state. */
+  stepStateText: string;
+}
+
+/**
+ * Creates ARIA props for an individual step within a step list.
+ */
+export function createStep(props: AriaStepProps, state: StepListState): StepAria {
+  const isSelected = () => state.selectedKey() === props.key;
+  const isCompleted = () => state.isCompleted(props.key);
+  const selectable = () => state.isSelectable(props.key);
+
+  const getStepStateText = (): string => {
+    if (isSelected()) return "Current";
+    if (isCompleted()) return "Completed";
+    return "Not completed";
+  };
+
+  const handleClick: JSX.EventHandler<HTMLAnchorElement, MouseEvent> = (e) => {
+    e.preventDefault();
+    if (selectable()) {
+      state.setSelectedKey(props.key);
+    }
+  };
+
+  const handleKeyDown: JSX.EventHandler<HTMLAnchorElement, KeyboardEvent> = (e) => {
+    // Prevent arrow key scrolling — tab order handles navigation
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (selectable()) {
+        state.setSelectedKey(props.key);
+      }
+    }
+  };
+
+  return {
+    get stepProps() {
+      return {
+        role: "link" as const,
+        get "aria-current"() {
+          return isSelected() ? ("step" as const) : undefined;
+        },
+        get "aria-disabled"() {
+          return !selectable() ? true : undefined;
+        },
+        get tabIndex() {
+          return selectable() ? 0 : undefined;
+        },
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+      };
+    },
+    get stepStateText() {
+      return getStepStateText();
+    },
+  };
+}

package/src/steplist/index.ts

@@ -0,0 +1,8 @@
+export {
+  createStepList,
+  createStep,
+  type AriaStepListProps,
+  type StepListAria,
+  type AriaStepProps,
+  type StepAria,
+} from "./createStepList";