@proyecto-viviana/solidaria 0.2.4 → 0.2.8

package/src/actiongroup/createActionGroup.ts

@@ -0,0 +1,324 @@
+import { onCleanup, type JSX, type Accessor } from 'solid-js';
+import { createButton } from '../button';
+import { filterDOMProps, getEventTarget, mergeProps, nodeContains, isFocusable, focusSafely } from '../utils';
+import { useLocale } from '../i18n';
+import type { Orientation } from '../toolbar';
+import type { Key, ListState } from '@proyecto-viviana/solid-stately';
+
+export interface AriaActionGroupProps<T = unknown> {
+  /** List items (optional, parity with React Aria prop shape). */
+  items?: T[];
+  /** Whether the whole action group is disabled. */
+  isDisabled?: boolean;
+  /** Group orientation. */
+  orientation?: Orientation;
+  /** Accessible label. */
+  'aria-label'?: string;
+  /** Labelled-by id. */
+  'aria-labelledby'?: string;
+  /** Handler called when an item action is triggered. */
+  onAction?: (key: Key) => void;
+}
+
+export interface ActionGroupAria {
+  actionGroupProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+export interface AriaActionGroupItemProps {
+  key: Key;
+}
+
+export interface ActionGroupItemAria {
+  buttonProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+interface ActionGroupData {
+  onAction?: (key: Key) => void;
+}
+
+const actionGroupData = new WeakMap<object, ActionGroupData>();
+
+const GROUP_ROLE_BY_MODE = {
+  none: 'toolbar',
+  single: 'radiogroup',
+  multiple: 'toolbar',
+} as const;
+
+const ITEM_ROLE_BY_MODE = {
+  none: undefined,
+  single: 'radio',
+  multiple: 'checkbox',
+} as const;
+
+function isActionGroupDisabled<T>(props: AriaActionGroupProps<T>, state: ListState<T>): boolean {
+  if (props.isDisabled) return true;
+  const keys = [...state.collection().getKeys()];
+  if (keys.length === 0) return true;
+  return !keys.some((key) => !state.isDisabled(key));
+}
+
+export function createActionGroup<T>(
+  props: AriaActionGroupProps<T>,
+  state: ListState<T>,
+  _ref?: Accessor<HTMLElement | null>
+): ActionGroupAria {
+  const locale = useLocale();
+  let groupRef: HTMLElement | undefined;
+  const applyRoleAttributes = (): void => {
+    if (!groupRef) return;
+    const selectionMode = state.selectionMode();
+    const mappedRole = GROUP_ROLE_BY_MODE[selectionMode];
+    const nestedToolbar = Boolean(groupRef.parentElement?.closest('[role="toolbar"]'));
+    const role = mappedRole === 'toolbar' && nestedToolbar ? 'group' : mappedRole;
+    groupRef.setAttribute('role', role);
+    if (mappedRole === 'toolbar' && !nestedToolbar) {
+      groupRef.setAttribute('aria-orientation', props.orientation ?? 'horizontal');
+    } else {
+      groupRef.removeAttribute('aria-orientation');
+    }
+  };
+
+  const getFocusableItems = (root: HTMLElement): HTMLElement[] => {
+    const out: HTMLElement[] = [];
+    const pushIfFocusable = (el: Element | null | undefined): void => {
+      if (!el || !(el instanceof HTMLElement)) return;
+      if (isFocusable(el) && el.getAttribute('aria-disabled') !== 'true') {
+        out.push(el);
+      }
+    };
+
+    pushIfFocusable(root);
+    for (const node of root.querySelectorAll('*')) {
+      pushIfFocusable(node);
+    }
+    return out;
+  };
+
+  const focusRelative = (root: HTMLElement, direction: 'next' | 'previous' | 'first' | 'last'): HTMLElement | null => {
+    const focusables = getFocusableItems(root);
+    if (focusables.length === 0) return null;
+
+    if (direction === 'first') {
+      const first = focusables[0];
+      focusSafely(first);
+      return first;
+    }
+
+    if (direction === 'last') {
+      const last = focusables[focusables.length - 1];
+      focusSafely(last);
+      return last;
+    }
+
+    const active = root.ownerDocument.activeElement as HTMLElement | null;
+    const currentIndex = active ? focusables.indexOf(active) : -1;
+    const delta = direction === 'next' ? 1 : -1;
+    const nextIndex = currentIndex === -1
+      ? (direction === 'next' ? 0 : focusables.length - 1)
+      : (currentIndex + delta + focusables.length) % focusables.length;
+    const next = focusables[nextIndex];
+    focusSafely(next);
+    return next;
+  };
+
+  const resolveKeyFromElement = (element: HTMLElement | null): Key | null => {
+    if (!element) return null;
+    const keyedElement = element.closest('[data-key]');
+    if (!(keyedElement instanceof HTMLElement)) return null;
+    const rawKey = keyedElement.getAttribute('data-key');
+    if (!rawKey) return null;
+    for (const item of state.collection()) {
+      if (String(item.key) === rawKey) {
+        return item.key;
+      }
+    }
+    return null;
+  };
+
+  const handleFocusMove = (movedTo: HTMLElement | null): void => {
+    const key = resolveKeyFromElement(movedTo);
+    if (key == null) return;
+    state.setFocusedKey(key);
+    if (state.selectionMode() === 'single') {
+      state.replaceSelection(key);
+    }
+  };
+
+  const onKeyDown: JSX.EventHandler<HTMLElement, KeyboardEvent> = (e) => {
+    const root = groupRef;
+    if (!root || isActionGroupDisabled(props, state)) return;
+    if (!nodeContains(e.currentTarget, getEventTarget(e))) return;
+
+    const orientation = props.orientation ?? 'horizontal';
+    const isHorizontal = orientation === 'horizontal';
+    const isRTL = locale().direction === 'rtl' && isHorizontal;
+
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown': {
+        if (e.key === 'ArrowRight' && isHorizontal && isRTL) {
+          e.preventDefault();
+          e.stopPropagation();
+          handleFocusMove(focusRelative(root, 'previous'));
+          return;
+        }
+        if ((e.key === 'ArrowRight' && isHorizontal) || (e.key === 'ArrowDown' && !isHorizontal)) {
+          e.preventDefault();
+          e.stopPropagation();
+          handleFocusMove(focusRelative(root, 'next'));
+        }
+        return;
+      }
+      case 'ArrowLeft':
+      case 'ArrowUp': {
+        if (e.key === 'ArrowLeft' && isHorizontal && isRTL) {
+          e.preventDefault();
+          e.stopPropagation();
+          handleFocusMove(focusRelative(root, 'next'));
+          return;
+        }
+        if ((e.key === 'ArrowLeft' && isHorizontal) || (e.key === 'ArrowUp' && !isHorizontal)) {
+          e.preventDefault();
+          e.stopPropagation();
+          handleFocusMove(focusRelative(root, 'previous'));
+        }
+        return;
+      }
+      case 'Home': {
+        e.preventDefault();
+        e.stopPropagation();
+        handleFocusMove(focusRelative(root, 'first'));
+        return;
+      }
+      case 'End': {
+        e.preventDefault();
+        e.stopPropagation();
+        handleFocusMove(focusRelative(root, 'last'));
+        return;
+      }
+    }
+  };
+
+  const actionGroupProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(
+    filterDOMProps(props as Record<string, unknown>, { labelable: true }),
+    {
+      ref: (el: HTMLElement) => {
+        groupRef = el;
+        applyRoleAttributes();
+        queueMicrotask(() => {
+          if (!groupRef) return;
+          applyRoleAttributes();
+        });
+      },
+      onKeyDown,
+      get 'aria-label'() {
+        return props['aria-label'];
+      },
+      get 'aria-labelledby'() {
+        return props['aria-label'] ? undefined : props['aria-labelledby'];
+      },
+      get 'aria-disabled'() {
+        return isActionGroupDisabled(props, state) || undefined;
+      },
+    }
+  );
+
+  actionGroupData.set(state, {
+    get onAction() {
+      return props.onAction;
+    },
+  });
+
+  onCleanup(() => {
+    actionGroupData.delete(state);
+  });
+
+  return { actionGroupProps };
+}
+
+export function createActionGroupItem<T>(
+  props: AriaActionGroupItemProps,
+  state: ListState<T>
+): ActionGroupItemAria {
+  const button = createButton({
+    elementType: 'button',
+    isDisabled: state.isDisabled(props.key),
+    onPress: () => {
+      state.setFocusedKey(props.key);
+      actionGroupData.get(state)?.onAction?.(props.key);
+      if (state.selectionMode() !== 'none') {
+        state.select(props.key);
+      }
+    },
+  });
+
+  const isFocused = () => props.key === state.focusedKey();
+  const getFirstEnabledKey = (): Key | null => {
+    const collection = state.collection();
+    let key = collection.getFirstKey();
+    while (key != null && state.isDisabled(key)) {
+      key = collection.getKeyAfter(key);
+    }
+    return key;
+  };
+
+  const getDefaultTabStopKey = (): Key | null => {
+    const selectionMode = state.selectionMode();
+    if (selectionMode !== 'none') {
+      const selectedKeys = state.selectedKeys();
+      if (selectedKeys === 'all') {
+        return getFirstEnabledKey();
+      }
+
+      for (const item of state.collection()) {
+        if (!state.isDisabled(item.key) && selectedKeys.has(item.key)) {
+          return item.key;
+        }
+      }
+    }
+
+    return getFirstEnabledKey();
+  };
+
+  onCleanup(() => {
+    if (isFocused()) {
+      state.setFocusedKey(null);
+    }
+  });
+
+  const buttonProps: JSX.HTMLAttributes<HTMLElement> = mergeProps(
+    button.buttonProps,
+    {
+      get role() {
+        return ITEM_ROLE_BY_MODE[state.selectionMode()];
+      },
+      get 'aria-checked'() {
+        const mode = state.selectionMode();
+        if (mode === 'none') return undefined;
+        return state.isSelected(props.key);
+      },
+      get tabIndex() {
+        if (state.isDisabled(props.key)) {
+          return -1;
+        }
+
+        if (isFocused()) {
+          return 0;
+        }
+
+        if (state.focusedKey() != null) {
+          return -1;
+        }
+
+        const defaultTabStopKey = getDefaultTabStopKey();
+        return defaultTabStopKey === props.key ? 0 : -1;
+      },
+      'data-key': String(props.key),
+      onFocus: () => {
+        state.setFocusedKey(props.key);
+      },
+    }
+  );
+
+  return { buttonProps };
+}

package/src/actiongroup/index.ts

@@ -0,0 +1,8 @@
+export {
+  createActionGroup,
+  createActionGroupItem,
+  type AriaActionGroupProps,
+  type ActionGroupAria,
+  type AriaActionGroupItemProps,
+  type ActionGroupItemAria,
+} from './createActionGroup';

package/src/autocomplete/createAutocomplete.ts

@@ -58,11 +58,15 @@ export interface AutocompleteInputProps {
   autoComplete: 'off'
 }
 
-export interface AriaAutocompleteOptions<T = unknown> {
+export interface AriaAutocompleteOptions<_T = unknown> {
   /** Ref accessor for the input element. */
   inputRef: Accessor<HTMLInputElement | undefined>
   /** Ref accessor for the collection element. */
   collectionRef: Accessor<HTMLElement | undefined>
+  /** Optional id override for the controlled collection element. */
+  collectionId?: string
+  /** Optional accessible name for the controlled collection element. */
+  collectionAriaLabel?: string
   /**
    * An optional filter function used to determine if an option should be included.
    * @param textValue - The text value of the item
@@ -81,7 +85,7 @@ export interface AriaAutocompleteOptions<T = unknown> {
   disableVirtualFocus?: boolean
 }
 
-export interface AutocompleteAria<T = unknown> {
+export interface AutocompleteAria<_T = unknown> {
   /** Props for the autocomplete input element. */
   inputProps: AutocompleteInputProps
   /** Props for the collection (ListBox/Menu). */
@@ -90,6 +94,22 @@ export interface AutocompleteAria<T = unknown> {
   filter?: (textValue: string) => boolean
 }
 
+function toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {
+  return {
+    key: e.key,
+    code: e.code,
+    location: e.location,
+    repeat: e.repeat,
+    isComposing: e.isComposing,
+    ctrlKey: e.ctrlKey,
+    shiftKey: e.shiftKey,
+    altKey: e.altKey,
+    metaKey: e.metaKey,
+    bubbles: e.bubbles,
+    cancelable: e.cancelable,
+  }
+}
+
 // ============================================
 // CONSTANTS
 // ============================================
@@ -139,11 +159,13 @@ export function createAutocomplete<T = unknown>(
     inputRef,
     collectionRef,
     filter,
+    collectionId: collectionIdProp,
+    collectionAriaLabel,
     disableAutoFocusFirst = false,
     disableVirtualFocus = false,
   } = props
 
-  const collectionId = createId()
+  const collectionId = collectionIdProp ?? createId()
   const [shouldUseVirtualFocus] = createSignal(!disableVirtualFocus)
   let lastInputType = ''
 
@@ -212,12 +234,13 @@ export function createAutocomplete<T = unknown>(
 
   // Handle keyboard navigation
   const onKeyDown = (e: KeyboardEvent) => {
-    if ((e as any).isComposing) {
+    if ('isComposing' in e && e.isComposing) {
       return
     }
 
     const focusedNodeId = state.focusedNodeId()
     const collection = collectionRef()
+    const ownerDocument = getOwnerDocument(inputRef() ?? collection)
 
     switch (e.key) {
       case 'Escape':
@@ -265,7 +288,7 @@ export function createAutocomplete<T = unknown>(
       case 'Enter':
         // Trigger click on focused item
         if (focusedNodeId) {
-          const item = document.getElementById(focusedNodeId)
+          const item = ownerDocument?.getElementById(focusedNodeId)
           if (item) {
             item.click()
             e.preventDefault()
@@ -279,12 +302,12 @@ export function createAutocomplete<T = unknown>(
       e.stopPropagation()
 
       if (focusedNodeId) {
-        const item = document.getElementById(focusedNodeId)
+        const item = ownerDocument?.getElementById(focusedNodeId)
         if (item) {
-          item.dispatchEvent(new KeyboardEvent(e.type, e))
+          item.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)))
         }
       } else {
-        collection.dispatchEvent(new KeyboardEvent(e.type, e))
+        collection.dispatchEvent(new KeyboardEvent(e.type, toKeyboardEventInit(e)))
       }
     }
   }
@@ -332,7 +355,7 @@ export function createAutocomplete<T = unknown>(
     },
     collectionProps: {
       id: collectionId,
-      'aria-label': 'Suggestions',
+      'aria-label': collectionAriaLabel,
       shouldUseVirtualFocus: shouldUseVirtualFocus(),
       disallowTypeAhead: shouldUseVirtualFocus(),
     },

package/src/breadcrumbs/createBreadcrumbs.ts

@@ -31,6 +31,8 @@ export interface BreadcrumbsAria {
 }
 
 export interface AriaBreadcrumbItemProps extends Omit<AriaLinkProps, 'aria-current'> {
+  /** The DOM id for the breadcrumb item. */
+  id?: string;
   /** Whether this is the current/last item in the breadcrumb trail. */
   isCurrent?: boolean;
   /** The type of current location for aria-current. @default 'page' */
@@ -59,8 +61,9 @@ export function createBreadcrumbs(
   const getNavProps = (): Record<string, unknown> => {
     const p = getProps();
 
-    // Default aria-label to "Breadcrumbs" if not provided
-    const ariaLabel = p['aria-label'] ?? 'Breadcrumbs';
+    // Only apply a default label when no other label source exists.
+    const ariaLabel =
+      p['aria-label'] ?? (p['aria-labelledby'] ? undefined : 'Breadcrumbs');
 
     return mergeProps(
       filterDOMProps(p as Record<string, unknown>, { labelable: true }),
@@ -89,9 +92,6 @@ export function createBreadcrumbItem(
   const isDisabled = () => getProps().isDisabled ?? false;
   const elementType = () => getProps().elementType ?? 'a';
 
-  // Check if element is a heading
-  const isHeading = () => /^h[1-6]$/.test(elementType());
-
   // Use createLink for base link behavior
   // Current items are treated as disabled (can't navigate to current page)
   const { linkProps, isPressed } = createLink({
@@ -102,7 +102,7 @@ export function createBreadcrumbItem(
       return elementType();
     },
     get href() {
-      return getProps().href;
+      return isCurrent() ? undefined : getProps().href;
     },
     get target() {
       return getProps().target;
@@ -155,8 +155,10 @@ export function createBreadcrumbItem(
     const p = getProps();
     const current = isCurrent();
 
-    // Start with link props (unless it's a heading)
-    let baseProps: Record<string, unknown> = isHeading() ? {} : linkProps;
+    // Start with link props, forwarding id if provided
+    let baseProps: Record<string, unknown> = p.id
+      ? mergeProps(linkProps, { id: p.id })
+      : linkProps;
 
     // Add aria-current for current page
     if (current) {
@@ -165,13 +167,6 @@ export function createBreadcrumbItem(
         'aria-current': ariaCurrent,
       });
 
-      // Adjust tabIndex for current item
-      // If autoFocus is true, we want the item focusable
-      if (p.autoFocus) {
-        baseProps = mergeProps(baseProps, {
-          tabIndex: -1,
-        });
-      }
     }
 
     // Add aria-disabled for disabled items

package/src/button/createButton.ts

@@ -93,7 +93,7 @@ export function createButton(props: AriaButtonProps = {}): ButtonAria {
     };
 
     if (isLink) {
-      additionalProps.href = props.href;
+      additionalProps.href = disabled ? undefined : props.href;
       additionalProps.target = props.target;
       additionalProps.rel = props.rel;
     }

package/src/button/createToggleButtonGroup.ts

@@ -0,0 +1,128 @@
+import type { JSX } from 'solid-js';
+import type {
+  Key,
+  ToggleGroupProps,
+  ToggleGroupState,
+} from '@proyecto-viviana/solid-stately';
+import { createToolbar, type Orientation } from '../toolbar';
+import { mergeProps } from '../utils';
+import {
+  createToggleButton,
+  type AriaToggleButtonProps,
+  type ToggleButtonAria,
+} from './createToggleButton';
+
+export interface AriaToggleButtonGroupProps extends ToggleGroupProps {
+  /**
+   * The orientation of the toggle button group.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation;
+  /** Accessible label. */
+  'aria-label'?: string;
+  /** Labelled-by id. */
+  'aria-labelledby'?: string;
+}
+
+export interface ToggleButtonGroupAria {
+  /** Props for the group container. */
+  groupProps: JSX.HTMLAttributes<HTMLElement>;
+}
+
+export interface AriaToggleButtonGroupItemProps
+  extends Omit<AriaToggleButtonProps, 'children'> {
+  /** Key used in the group selection state. */
+  id: Key;
+}
+
+function isDisabledValue(
+  isDisabled: AriaToggleButtonProps['isDisabled']
+): boolean {
+  if (typeof isDisabled === 'function') {
+    return isDisabled();
+  }
+  return !!isDisabled;
+}
+
+/**
+ * Provides ARIA behavior for a toggle button group container.
+ */
+export function createToggleButtonGroup(
+  props: AriaToggleButtonGroupProps,
+  state: ToggleGroupState
+): ToggleButtonGroupAria {
+  const { toolbarProps } = createToolbar({
+    get orientation() {
+      return props.orientation;
+    },
+    get 'aria-label'() {
+      return props['aria-label'];
+    },
+    get 'aria-labelledby'() {
+      return props['aria-labelledby'];
+    },
+  });
+
+  const groupProps = mergeProps(toolbarProps as Record<string, unknown>, {
+    get role() {
+      return state.selectionMode === 'single' ? 'radiogroup' : toolbarProps.role;
+    },
+    get 'aria-disabled'() {
+      return props.isDisabled || undefined;
+    },
+  }) as JSX.HTMLAttributes<HTMLElement>;
+
+  return { groupProps };
+}
+
+/**
+ * Provides ARIA behavior for an item within a toggle button group.
+ */
+export function createToggleButtonGroupItem(
+  props: AriaToggleButtonGroupItemProps,
+  state: ToggleGroupState
+): ToggleButtonAria {
+  const { id: _id, ...toggleProps } = props;
+
+  const toggleButton = createToggleButton({
+    ...toggleProps,
+    get isSelected() {
+      return state.selectedKeys.has(props.id);
+    },
+    onChange(isSelected) {
+      state.setSelected(props.id, isSelected);
+      props.onChange?.(isSelected);
+    },
+    get isDisabled() {
+      return isDisabledValue(props.isDisabled) || state.isDisabled;
+    },
+  });
+
+  const baseButtonProps = toggleButton.buttonProps as Record<string, unknown>;
+  const buttonProps: Record<string, unknown> = {
+    ...baseButtonProps,
+    get role() {
+      if (state.selectionMode === 'single') {
+        return 'radio';
+      }
+      return baseButtonProps.role as string | undefined;
+    },
+    get 'aria-checked'() {
+      if (state.selectionMode !== 'single') {
+        return undefined;
+      }
+      return state.selectedKeys.has(props.id);
+    },
+    get 'aria-pressed'() {
+      if (state.selectionMode === 'single') {
+        return undefined;
+      }
+      return baseButtonProps['aria-pressed'];
+    },
+  };
+
+  return {
+    ...toggleButton,
+    buttonProps,
+  };
+}

package/src/button/index.ts

@@ -1,4 +1,13 @@
 export { createButton } from './createButton';
 export { createToggleButton } from './createToggleButton';
+export {
+  createToggleButtonGroup,
+  createToggleButtonGroupItem,
+} from './createToggleButtonGroup';
 export type { AriaButtonProps, ButtonAria } from './types';
 export type { AriaToggleButtonProps, ToggleButtonAria } from './createToggleButton';
+export type {
+  AriaToggleButtonGroupProps,
+  ToggleButtonGroupAria,
+  AriaToggleButtonGroupItemProps,
+} from './createToggleButtonGroup';

package/src/calendar/createCalendarCell.ts

@@ -5,7 +5,7 @@
  * Based on @react-aria/calendar useCalendarCell
  */
 
-import { createSignal, createMemo, onMount } from 'solid-js';
+import { createSignal, createMemo, createEffect } from 'solid-js';
 import { access, type MaybeAccessor } from '../utils/reactivity';
 import type { CalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
 import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
@@ -19,6 +19,8 @@ export interface AriaCalendarCellProps {
   date: DateValue;
   /** Whether the cell is disabled. */
   isDisabled?: boolean;
+  /** Whether the date is outside the current month grid. */
+  isOutsideMonth?: boolean;
 }
 
 export interface CalendarCellAria {
@@ -70,7 +72,7 @@ export function createCalendarCell<T extends CalendarState>(
     return getProps().isDisabled || state.isCellDisabled(date());
   });
   const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
-  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isOutsideMonth = createMemo(() => getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date()));
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
 
   // Format the date for display
@@ -105,8 +107,8 @@ export function createCalendarCell<T extends CalendarState>(
     setIsPressed(false);
   };
 
-  // Focus the button when it becomes focused in state
-  onMount(() => {
+  // Keep DOM focus synchronized with focused date updates.
+  createEffect(() => {
     const element = ref?.();
     if (element && isFocused()) {
       element.focus();