@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/popover/calculatePosition.ts

@@ -116,7 +116,7 @@ const AXIS_SIZE: Record<string, SizeAxis> = {
   left: 'width',
 };
 
-const TOTAL_SIZE: Record<string, string> = {
+const TOTAL_SIZE: Record<SizeAxis, 'totalWidth' | 'totalHeight'> = {
   width: 'totalWidth',
   height: 'totalHeight',
 };
@@ -307,7 +307,7 @@ function computePosition(
   if (placement === axis) {
     const containerHeight = isContainerPositioned
       ? containerDimensions[size]
-      : (containerDimensions as any)[TOTAL_SIZE[size]];
+      : containerDimensions[TOTAL_SIZE[size]];
     position[FLIPPED_DIRECTION[axis] as keyof Position] = Math.floor(
       containerHeight - childOffset[axis] + offset
     );
@@ -333,7 +333,7 @@ function getMaxHeight(
   const overlayTop =
     (position.top != null
       ? position.top
-      : (containerDimensions as any)[TOTAL_SIZE.height] -
+      : containerDimensions[TOTAL_SIZE.height] -
         (position.bottom ?? 0) -
         overlayHeight) - (containerDimensions.scroll.top ?? 0);
 
@@ -620,7 +620,7 @@ export function getRect(node: Element, ignoreScale: boolean) {
   let width = bWidth;
   let height = bHeight;
 
-  if (ignoreScale && node instanceof (node.ownerDocument.defaultView as any).HTMLElement) {
+  if (ignoreScale && node instanceof (node.ownerDocument.defaultView?.HTMLElement ?? HTMLElement)) {
     width = (node as HTMLElement).offsetWidth;
     height = (node as HTMLElement).offsetHeight;
   }
@@ -690,8 +690,8 @@ function isContainingBlock(node: Element): boolean {
     /transform|perspective/.test(style.willChange) ||
     style.filter !== 'none' ||
     style.contain === 'paint' ||
-    ('backdropFilter' in style && (style as any).backdropFilter !== 'none') ||
-    ('WebkitBackdropFilter' in style && (style as any).WebkitBackdropFilter !== 'none')
+    ('backdropFilter' in style && style.getPropertyValue('backdrop-filter') !== 'none') ||
+    ('WebkitBackdropFilter' in style && style.getPropertyValue('-webkit-backdrop-filter') !== 'none')
   );
 }
 

package/src/popover/createOverlayPosition.ts

@@ -6,6 +6,7 @@
  */
 
 import { createEffect, createSignal, onCleanup, type JSX } from 'solid-js';
+import { useLocale } from '../i18n';
 import {
   calculatePosition,
   getRect,
@@ -122,7 +123,8 @@ function translateRTL(position: string, direction: string): string {
  * element, and updating the position when the window resizes.
  */
 export function createOverlayPosition(props: AriaPositionProps): PositionAria {
-  const direction = 'ltr'; // TODO: get from locale context
+  const locale = useLocale();
+  const direction = () => locale().direction;
 
   const arrowSize = () => props.arrowSize ?? 0;
   const targetRef = () => props.targetRef();
@@ -178,7 +180,7 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     }
 
     const result = calculatePosition({
-      placement: translateRTL(placement(), direction) as Placement,
+      placement: translateRTL(placement(), direction()) as Placement,
       overlayNode,
       targetNode,
       scrollNode: scrollNode || overlayNode,
@@ -202,8 +204,9 @@ export function createOverlayPosition(props: AriaPositionProps): PositionAria {
     overlay.style.left = '';
     overlay.style.right = '';
 
-    Object.keys(result.position).forEach((key) => {
-      (overlay.style as any)[key] = (result.position as any)[key] + 'px';
+    const pos = result.position as Record<string, number | undefined>;
+    Object.keys(pos).forEach((key) => {
+      overlay.style.setProperty(key, pos[key] + 'px');
     });
     overlay.style.maxHeight = result.maxHeight != null ? result.maxHeight + 'px' : '';
 

package/src/popover/createPopover.ts

@@ -109,12 +109,20 @@ export function createPopover(
   // Overlay behavior (dismiss handling)
   const { overlayProps, underlayProps } = createOverlay(
     {
-      isOpen: state.isOpen(),
+      get isOpen() {
+        return state.isOpen();
+      },
       onClose: state.close,
       shouldCloseOnBlur: true,
-      isDismissable: !isNonModal() || isSubmenu(),
-      isKeyboardDismissDisabled: isKeyboardDismissDisabled(),
-      shouldCloseOnInteractOutside,
+      get isDismissable() {
+        return !isNonModal() || isSubmenu();
+      },
+      get isKeyboardDismissDisabled() {
+        return isKeyboardDismissDisabled();
+      },
+      get shouldCloseOnInteractOutside() {
+        return shouldCloseOnInteractOutside;
+      },
     },
     () => groupRef() ?? popoverRef()
   );
@@ -129,13 +137,19 @@ export function createPopover(
     ...props,
     targetRef: triggerRef,
     overlayRef: popoverRef,
-    isOpen: state.isOpen(),
-    onClose: isNonModal() && !isSubmenu() ? state.close : null,
+    get isOpen() {
+      return state.isOpen();
+    },
+    get onClose() {
+      return isNonModal() && !isSubmenu() ? state.close : null;
+    },
   });
 
   // Prevent scroll when modal popover is open
   createPreventScroll({
-    isDisabled: isNonModal() || !state.isOpen(),
+    get isDisabled() {
+      return isNonModal() || !state.isOpen();
+    },
   });
 
   // Aria-hide outside elements

package/src/progress/createProgressBar.ts

@@ -57,6 +57,11 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+function getSafeRange(min: number, max: number): number {
+  const range = max - min;
+  return Number.isFinite(range) && range > 0 ? range : 1;
+}
+
 // ============================================
 // IMPLEMENTATION
 // ============================================
@@ -91,7 +96,7 @@ export function createProgressBar(
     const formatOptions = p.formatOptions ?? { style: 'percent' as const };
 
     const clampedValue = clamp(value, minValue, maxValue);
-    const percentage = (clampedValue - minValue) / (maxValue - minValue);
+    const percentage = (clampedValue - minValue) / getSafeRange(minValue, maxValue);
 
     // Format value label
     let valueLabel = p.valueLabel;

package/src/radio/createRadioGroup.ts

@@ -12,9 +12,11 @@ import { createField } from '../label/createField';
 import { createFocusWithin } from '../interactions/createFocusWithin';
 import { mergeProps } from '../utils/mergeProps';
 import { filterDOMProps } from '../utils/filterDOMProps';
+import { focusSafely, getEventTarget } from '../utils';
+import { useLocale } from '../i18n';
 import { createId } from '../ssr';
 import { type MaybeAccessor, access } from '../utils/reactivity';
-import { type RadioGroupState } from '@proyecto-viviana/solid-stately';
+import { type RadioGroupState, type ValidityState } from '@proyecto-viviana/solid-stately';
 
 // ============================================
 // TYPES
@@ -75,7 +77,7 @@ export interface RadioGroupAria {
   /** Validation errors, if any. */
   validationErrors: string[];
   /** Validation details, if any. */
-  validationDetails: Record<string, boolean>;
+  validationDetails: ValidityState;
 }
 
 // WeakMap to share data between radio group and radio items
@@ -102,19 +104,31 @@ export function createRadioGroup(
   state: RadioGroupState
 ): RadioGroupAria {
   const getProps = () => access(props);
+  const locale = useLocale();
 
   const orientation = () => getProps().orientation ?? 'vertical';
   const isReadOnly = () => getProps().isReadOnly ?? false;
   const isRequired = () => getProps().isRequired ?? false;
   const isDisabled = () => getProps().isDisabled ?? false;
   const validationBehavior = () => getProps().validationBehavior ?? 'aria';
+  const displayValidation = () => state.displayValidation();
+  const validationErrors = () => displayValidation().validationErrors;
+  const validationDetails = () => displayValidation().validationDetails;
+  const isInvalid = () => displayValidation().isInvalid;
+  const fallbackErrorMessage = () => {
+    const errors = validationErrors();
+    return errors.length > 0 ? errors : undefined;
+  };
 
   // Use field for label, description, error message
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField({
+    get id() { return getProps().id; },
     get label() { return getProps().label; },
+    get 'aria-label'() { return getProps()['aria-label']; },
+    get 'aria-labelledby'() { return getProps()['aria-labelledby']; },
     get description() { return getProps().description; },
-    get errorMessage() { return getProps().errorMessage; },
-    get isInvalid() { return state.isInvalid; },
+    get errorMessage() { return getProps().errorMessage ?? fallbackErrorMessage(); },
+    get isInvalid() { return isInvalid(); },
     // Radio group is not an HTML input element so it
     // shouldn't be labeled by a <label> element.
     labelElementType: 'span',
@@ -147,12 +161,72 @@ export function createRadioGroup(
     validationBehavior: validationBehavior(),
   });
 
-  // Keyboard navigation handler for arrow keys
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const onKeyDown = (_e: KeyboardEvent) => {
-    // For now, we rely on native radio behavior
-    // The complex tree walker implementation can be added later if needed
-    // Most browsers handle arrow key navigation natively for radio groups
+  const getNavigableRadios = (root: HTMLElement): HTMLInputElement[] => {
+    return Array.from(root.querySelectorAll('input[type="radio"]'))
+      .filter((el): el is HTMLInputElement => {
+        return el instanceof HTMLInputElement && !el.matches(':disabled');
+      });
+  };
+
+  // Keyboard navigation parity with React Aria.
+  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (e) => {
+    let nextDir: 'next' | 'prev' | null = null;
+    const currentOrientation = orientation();
+    const isHorizontal = currentOrientation !== 'vertical';
+    const isRTL = locale().direction === 'rtl' && isHorizontal;
+
+    switch (e.key) {
+      case 'ArrowRight':
+        nextDir = isRTL ? 'prev' : 'next';
+        break;
+      case 'ArrowLeft':
+        nextDir = isRTL ? 'next' : 'prev';
+        break;
+      case 'ArrowDown':
+        nextDir = 'next';
+        break;
+      case 'ArrowUp':
+        nextDir = 'prev';
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+
+    const root = e.currentTarget;
+    if (!(root instanceof HTMLElement)) {
+      return;
+    }
+
+    const radios = getNavigableRadios(root);
+    if (radios.length === 0) {
+      return;
+    }
+
+    const eventTarget = getEventTarget<Element>(e);
+    const activeElement = root.ownerDocument.activeElement;
+
+    const currentRadio = eventTarget instanceof HTMLInputElement && eventTarget.type === 'radio'
+      ? eventTarget
+      : (activeElement instanceof HTMLInputElement && activeElement.type === 'radio' ? activeElement : null);
+
+    const currentIndex = currentRadio ? radios.indexOf(currentRadio) : -1;
+
+    let nextIndex: number;
+    if (nextDir === 'next') {
+      nextIndex = currentIndex >= 0 ? (currentIndex + 1) % radios.length : 0;
+    } else {
+      nextIndex = currentIndex >= 0 ? (currentIndex - 1 + radios.length) % radios.length : radios.length - 1;
+    }
+
+    const nextRadio = radios[nextIndex];
+    if (!nextRadio) {
+      return;
+    }
+
+    focusSafely(nextRadio);
+    state.setSelectedValue(nextRadio.value);
   };
 
   return {
@@ -163,7 +237,7 @@ export function createRadioGroup(
         {
           role: 'radiogroup',
           onKeyDown,
-          'aria-invalid': state.isInvalid || undefined,
+          'aria-invalid': isInvalid() || undefined,
           'aria-errormessage': getProps()['aria-errormessage'],
           'aria-readonly': isReadOnly() || undefined,
           'aria-required': isRequired() || undefined,
@@ -177,13 +251,13 @@ export function createRadioGroup(
     descriptionProps,
     errorMessageProps,
     get isInvalid() {
-      return state.isInvalid;
+      return isInvalid();
     },
     get validationErrors() {
-      return []; // Simplified - full validation can be added later
+      return validationErrors();
     },
     get validationDetails() {
-      return {}; // Simplified - full validation can be added later
+      return validationDetails();
     },
   };
 }