@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/select/index.ts

@@ -1,14 +1,9 @@
-export {
-  createSelect,
-  getSelectData,
-  type AriaSelectProps,
-  type SelectAria,
-} from './createSelect';
-
-export {
-  createHiddenSelect,
-  HiddenSelect,
-  type AriaHiddenSelectProps,
-  type HiddenSelectAria,
-  type HiddenSelectProps,
-} from './createHiddenSelect.jsx';
+export { createSelect, getSelectData, type AriaSelectProps, type SelectAria } from "./createSelect";
+
+export {
+  createHiddenSelect,
+  HiddenSelect,
+  type AriaHiddenSelectProps,
+  type HiddenSelectAria,
+  type HiddenSelectProps,
+} from "./createHiddenSelect.jsx";

package/src/selection/createTypeSelect.ts

@@ -6,8 +6,8 @@
  * item text values. Supports multi-character search with debouncing.
  */
 
-import type { JSX, Accessor } from 'solid-js';
-import type { Key, Collection, CollectionNode } from '@proyecto-viviana/solid-stately';
+import type { JSX, Accessor } from "solid-js";
+import type { Key, Collection, CollectionNode } from "@proyecto-viviana/solid-stately";
 
 /**
  * Controls how long to wait before clearing the typeahead buffer.
@@ -53,7 +53,7 @@ function getStringForKey(key: string): string {
   if (key.length === 1 || !/^[A-Z]/i.test(key)) {
     return key;
   }
-  return '';
+  return "";
 }
 
 /**
@@ -64,14 +64,14 @@ function getKeyForSearch<T>(
   collection: Collection<T>,
   search: string,
   fromKey: Key | null,
-  isKeyDisabled?: (key: Key) => boolean
+  isKeyDisabled?: (key: Key) => boolean,
 ): Key | null {
   const searchLower = search.toLowerCase();
 
   // Collect all items in order
   const items: CollectionNode<T>[] = [];
   for (const item of collection) {
-    if (item.type === 'item') {
+    if (item.type === "item") {
       items.push(item);
     }
   }
@@ -81,7 +81,7 @@ function getKeyForSearch<T>(
   // Find the starting index
   let startIndex = 0;
   if (fromKey != null) {
-    const fromIndex = items.findIndex(item => item.key === fromKey);
+    const fromIndex = items.findIndex((item) => item.key === fromKey);
     if (fromIndex !== -1) {
       // Start searching from the item AFTER the current one
       startIndex = (fromIndex + 1) % items.length;
@@ -99,7 +99,7 @@ function getKeyForSearch<T>(
     }
 
     // Check if the text value starts with the search string
-    const textValue = item.textValue || '';
+    const textValue = item.textValue || "";
     if (textValue.toLowerCase().startsWith(searchLower)) {
       return item.key;
     }
@@ -125,7 +125,7 @@ function getKeyForSearch<T>(
 export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAria {
   // Create mutable state object to persist across keystrokes
   const state: TypeSelectState = {
-    search: '',
+    search: "",
     timeout: undefined,
   };
 
@@ -147,13 +147,13 @@ export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAr
     }
 
     // Don't start search with space (common action key)
-    if (state.search.length === 0 && character === ' ') {
+    if (state.search.length === 0 && character === " ") {
       return;
     }
 
     // If there's already search text and the user types a space,
     // prevent it from triggering selection and include it in the search
-    if (character === ' ' && state.search.trim().length > 0) {
+    if (character === " " && state.search.trim().length > 0) {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -183,7 +183,7 @@ export function createTypeSelect<T>(options: TypeSelectOptions<T>): TypeSelectAr
       clearTimeout(state.timeout);
     }
     state.timeout = setTimeout(() => {
-      state.search = '';
+      state.search = "";
     }, TYPEAHEAD_DEBOUNCE_WAIT_MS);
   };
 

package/src/selection/index.ts

@@ -3,4 +3,4 @@
  * in collection components.
  */
 
-export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from './createTypeSelect';
+export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from "./createTypeSelect";

package/src/separator/createSeparator.ts

@@ -5,15 +5,11 @@
  * e.g. groups of menu items or sections of a page.
  */
 
-import type { JSX } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
-import { filterDOMProps } from '../utils';
+import type { JSX } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
+import { filterDOMProps } from "../utils";
 
-// ============================================
-// TYPES
-// ============================================
-
-export type Orientation = 'horizontal' | 'vertical';
+export type Orientation = "horizontal" | "vertical";
 
 export interface AriaSeparatorProps {
   /**
@@ -27,9 +23,13 @@ export interface AriaSeparatorProps {
    */
   elementType?: string;
   /** An accessibility label for the separator. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Identifies the element(s) that labels the separator. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
+  /** Identifies the element(s) that describes the separator. */
+  "aria-describedby"?: string;
+  /** Identifies the element(s) that provide a detailed description. */
+  "aria-details"?: string;
   /** The element's unique identifier. */
   id?: string;
 }
@@ -39,39 +39,34 @@ export interface SeparatorAria {
   separatorProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// CREATE SEPARATOR
-// ============================================
-
 /**
  * Provides the accessibility implementation for a separator.
  * A separator is a visual divider between two groups of content,
  * e.g. groups of menu items or sections of a page.
  */
-export function createSeparator(
-  props: MaybeAccessor<AriaSeparatorProps> = {}
-): SeparatorAria {
+export function createSeparator(props: MaybeAccessor<AriaSeparatorProps> = {}): SeparatorAria {
   const getSeparatorProps = (): JSX.HTMLAttributes<HTMLElement> => {
     const p = access(props);
     const domProps = filterDOMProps(p as Record<string, unknown>, { labelable: true });
 
     // if orientation is horizontal, aria-orientation default is horizontal, so we leave it undefined
     // if it's vertical, we need to specify it
-    let ariaOrientation: 'vertical' | undefined;
-    if (p.orientation === 'vertical') {
-      ariaOrientation = 'vertical';
+    let ariaOrientation: "vertical" | undefined;
+    if (p.orientation === "vertical") {
+      ariaOrientation = "vertical";
     }
 
-    // hr elements implicitly have role = separator and a horizontal orientation
-    if (p.elementType !== 'hr') {
+    if (p.elementType !== "hr") {
       return {
         ...domProps,
-        role: 'separator',
-        'aria-orientation': ariaOrientation,
+        role: "separator",
+        "aria-orientation": ariaOrientation,
       };
     }
 
-    return domProps;
+    return {
+      ...domProps,
+    };
   };
 
   return {

package/src/separator/index.ts

@@ -3,4 +3,4 @@ export {
   type AriaSeparatorProps,
   type SeparatorAria,
   type Orientation,
-} from './createSeparator';
+} from "./createSeparator";