@proyecto-viviana/solidaria 0.4.0 → 0.4.2

package/dist/_chunk/tag.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"tag.jsx","names":[],"sources":["../../src/tag/createTagGroup.ts","../../src/tag/createTag.ts"],"sourcesContent":["/**\n * TagGroup hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tag group component.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * Based on @react-aria/tag useTagGroup\n */\n\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { createLabel } from \"../label/createLabel\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { ListState, Key } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaTagGroupProps {\n  /** An ID for the tag group. */\n  id?: string;\n  /** Whether the tag group is disabled. */\n  isDisabled?: boolean;\n  /** The label for the tag group. */\n  label?: string;\n  /** An accessible label for the tag group when no visible label is provided. */\n  \"aria-label\"?: string;\n  /** The ID of an element that labels the tag group. */\n  \"aria-labelledby\"?: string;\n  /** The ID of an element that describes the tag group. */\n  \"aria-describedby\"?: string;\n  /** A description of the tag group. */\n  description?: string;\n  /** An error message for the tag group. */\n  errorMessage?: string;\n  /** Handler that is called when a user removes a tag. */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport interface TagGroupAria {\n  /** Props for the tag group container element. */\n  gridProps: Record<string, unknown>;\n  /** Props for the tag group's visible label (if any). */\n  labelProps: Record<string, unknown>;\n  /** Props for the tag group description element, if any. */\n  descriptionProps: Record<string, unknown>;\n  /** Props for the tag group error message element, if any. */\n  errorMessageProps: Record<string, unknown>;\n}\n\n// Shared data between tag group and tags\nconst tagGroupData = new WeakMap<object, TagGroupData>();\n\ninterface TagGroupData {\n  id: string;\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function getTagGroupData(state: ListState): TagGroupData | undefined {\n  return tagGroupData.get(state);\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag group component.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\nexport function createTagGroup<T>(\n  props: MaybeAccessor<AriaTagGroupProps>,\n  state: ListState<T>,\n  _ref?: () => HTMLElement | null,\n): TagGroupAria {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n  const descriptionId = createId();\n  const errorMessageId = createId();\n  const getFallbackAriaLabel = () => {\n    const p = getProps();\n    return !p.label && !p[\"aria-label\"] && !p[\"aria-labelledby\"] ? \"Tag list\" : undefined;\n  };\n  const sharedData: TagGroupData = {\n    id,\n    get onRemove() {\n      return getProps().onRemove;\n    },\n  };\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Create label handling\n  const { labelProps, fieldProps } = createLabel({\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"] ?? getFallbackAriaLabel();\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    labelElementType: \"span\",\n  });\n\n  // Share data with child tags before they create their aria state.\n  tagGroupData.set(state, sharedData);\n\n  // Clean up the shared state when the tag group owner is disposed.\n  createEffect(() => {\n    tagGroupData.set(state, sharedData);\n\n    onCleanup(() => {\n      if (tagGroupData.get(state) === sharedData) {\n        tagGroupData.delete(state);\n      }\n    });\n  });\n\n  // Build aria-describedby\n  const getAriaDescribedBy = () => {\n    const p = getProps();\n    const ids: string[] = [];\n    if (p[\"aria-describedby\"]) {\n      ids.push(p[\"aria-describedby\"]);\n    }\n    if (p.description) {\n      ids.push(descriptionId);\n    }\n    if (p.errorMessage) {\n      ids.push(errorMessageId);\n    }\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  };\n\n  return {\n    get gridProps() {\n      const p = getProps();\n      const hasItems = state.collection().size > 0;\n\n      return mergeProps(domProps(), fieldProps as Record<string, unknown>, {\n        id,\n        role: hasItems ? \"grid\" : \"group\",\n        \"aria-multiselectable\": hasItems && state.selectionMode() === \"multiple\" ? true : undefined,\n        \"aria-atomic\": false,\n        \"aria-relevant\": \"additions\",\n        \"aria-describedby\": getAriaDescribedBy(),\n        \"aria-disabled\": p.isDisabled || undefined,\n      });\n    },\n    get labelProps() {\n      return labelProps as Record<string, unknown>;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      };\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      };\n    },\n  };\n}\n","/**\n * Tag hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tag component.\n * Tags are individual items within a TagGroup.\n *\n * Based on @react-aria/tag useTag\n */\n\nimport { createMemo } from \"solid-js\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { createPress } from \"../interactions/createPress\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport { getTagGroupData } from \"./createTagGroup\";\nimport type { ListState, Key } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaTagProps {\n  /** The unique key for this tag. */\n  key: Key;\n  /** The role for the tag root. Components use row semantics inside a grid. */\n  role?: \"option\" | \"row\";\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /** A text value for the tag used for accessibility. */\n  textValue?: string;\n}\n\nexport interface TagAria {\n  /** Props for the tag row element. */\n  rowProps: Record<string, unknown>;\n  /** Props for the tag cell element. */\n  gridCellProps: Record<string, unknown>;\n  /** Props for the tag remove button. */\n  removeButtonProps: Record<string, unknown>;\n  /** Whether the tag can be removed. */\n  allowsRemoving: boolean;\n  /** Whether the tag is selected. */\n  isSelected: boolean;\n  /** Whether the tag is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag is focused. */\n  isFocused: boolean;\n  /** Whether the tag is pressed. */\n  isPressed: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag component.\n * Tags are individual items within a TagGroup.\n */\nexport function createTag<T>(\n  props: MaybeAccessor<AriaTagProps>,\n  state: ListState<T>,\n  ref: () => HTMLElement | null,\n): TagAria {\n  const getProps = () => access(props);\n  const rowId = createId();\n  const cellId = createId();\n  const removeButtonId = createId();\n\n  // Get shared data from tag group\n  const getData = () => getTagGroupData(state);\n\n  // Get key\n  const key = () => getProps().key;\n\n  // Compute states\n  const isDisabled = createMemo(() => {\n    const p = getProps();\n    return p.isDisabled || state.isDisabled(key());\n  });\n\n  const isSelected = createMemo(() => {\n    return state.isSelected(key());\n  });\n\n  const isSelectable = createMemo(() => state.selectionMode() !== \"none\");\n\n  const isFocused = createMemo(() => {\n    return state.focusedKey() === key();\n  });\n\n  const getFirstFocusableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getFirstKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyAfter(candidate);\n    }\n    return candidate;\n  };\n\n  const getLastFocusableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getLastKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyBefore(candidate);\n    }\n    return candidate;\n  };\n\n  const getNextFocusableKey = (fromKey: Key): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getKeyAfter(fromKey);\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyAfter(candidate);\n    }\n\n    if (candidate != null) {\n      return candidate;\n    }\n\n    return getFirstFocusableKey();\n  };\n\n  const getPreviousFocusableKey = (fromKey: Key): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getKeyBefore(fromKey);\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyBefore(candidate);\n    }\n\n    if (candidate != null) {\n      return candidate;\n    }\n\n    return getLastFocusableKey();\n  };\n\n  const focusKey = (nextKey: Key | null) => {\n    if (nextKey == null) {\n      return;\n    }\n\n    state.setFocusedKey(nextKey);\n    const currentElement = ref();\n\n    if (!currentElement) {\n      return;\n    }\n\n    if (nextKey === key()) {\n      currentElement.focus();\n      return;\n    }\n\n    const tagList = currentElement.parentElement;\n    if (!tagList) {\n      return;\n    }\n\n    const nextTag = Array.from(\n      tagList.querySelectorAll<HTMLElement>('[role=\"option\"], [role=\"row\"]'),\n    ).find((el) => el.getAttribute(\"data-key\") === String(nextKey));\n\n    nextTag?.focus();\n  };\n\n  // Handle press for selection\n  const { pressProps, isPressed } = createPress({\n    isDisabled,\n    onPress: () => {\n      if (!isDisabled()) {\n        state.setFocusedKey(key());\n        state.toggleSelection(key());\n      }\n    },\n  });\n\n  // Handle focusable\n  const { focusableProps } = createFocusable(\n    {\n      isDisabled,\n      onFocus: () => {\n        state.setFocusedKey(key());\n      },\n    },\n    ref,\n  );\n\n  // Handle keyboard for navigation and removal\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (isDisabled()) return;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n      case \"ArrowDown\":\n        e.preventDefault();\n        focusKey(getNextFocusableKey(key()));\n        return;\n      case \"ArrowLeft\":\n      case \"ArrowUp\":\n        e.preventDefault();\n        focusKey(getPreviousFocusableKey(key()));\n        return;\n      case \"Home\":\n        e.preventDefault();\n        focusKey(getFirstFocusableKey());\n        return;\n      case \"End\":\n        e.preventDefault();\n        focusKey(getLastFocusableKey());\n        return;\n      default:\n        break;\n    }\n\n    if (e.key === \"Delete\" || e.key === \"Backspace\") {\n      e.preventDefault();\n      const data = getData();\n      if (data?.onRemove) {\n        // Remove selected keys if this tag is selected, otherwise just this tag\n        if (isSelected()) {\n          const selection = state.selectedKeys();\n          const keysToRemove =\n            selection === \"all\"\n              ? new Set(Array.from(state.collection()).map((item) => (item as { key: Key }).key))\n              : new Set(selection);\n          data.onRemove(keysToRemove);\n        } else {\n          data.onRemove(new Set([key()]));\n        }\n      }\n    }\n  };\n\n  // Compute tabIndex\n  const tabIndex = createMemo(() => {\n    if (isDisabled()) return -1;\n\n    if (isFocused()) {\n      return 0;\n    }\n\n    if (state.focusedKey() !== null) {\n      return -1;\n    }\n\n    const collection = state.collection();\n    let defaultTabStop: Key | null = null;\n\n    if (state.selectionMode() !== \"none\") {\n      for (const item of collection) {\n        if (!state.isDisabled(item.key) && state.isSelected(item.key)) {\n          defaultTabStop = item.key;\n          break;\n        }\n      }\n    }\n\n    if (defaultTabStop == null) {\n      defaultTabStop = getFirstFocusableKey();\n    }\n\n    if (key() === defaultTabStop) {\n      return 0;\n    }\n\n    return -1;\n  });\n\n  // Filter DOM props\n  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>);\n\n  // Check if removal is allowed\n  const allowsRemoving = createMemo(() => {\n    const data = getData();\n    return !!data?.onRemove;\n  });\n\n  const rootRole = createMemo(() => getProps().role ?? \"option\");\n\n  return {\n    get rowProps() {\n      return mergeProps(\n        domProps(),\n        focusableProps as Record<string, unknown>,\n        pressProps as Record<string, unknown>,\n        {\n          id: rowId,\n          role: rootRole(),\n          tabIndex: tabIndex(),\n          \"data-key\": String(key()),\n          \"aria-label\": getProps().textValue,\n          \"aria-selected\": isSelectable() ? isSelected() : undefined,\n          \"aria-disabled\": isDisabled() || undefined,\n          onKeyDown: handleKeyDown,\n        },\n      );\n    },\n    get gridCellProps() {\n      return {\n        id: cellId,\n        role: \"gridcell\",\n        \"aria-describedby\": allowsRemoving() ? removeButtonId : undefined,\n      };\n    },\n    get removeButtonProps() {\n      const data = getData();\n      return {\n        id: removeButtonId,\n        \"aria-label\": \"Remove\",\n        \"aria-labelledby\": `${removeButtonId} ${rowId}`,\n        isDisabled: isDisabled(),\n        onPress: () => {\n          if (data?.onRemove && !isDisabled()) {\n            data.onRemove(new Set([key()]));\n          }\n        },\n      };\n    },\n    get allowsRemoving() {\n      return allowsRemoving();\n    },\n    get isSelected() {\n      return isSelected();\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n    get isFocused() {\n      return isFocused();\n    },\n    get isPressed() {\n      return isPressed();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAmDA,MAAM,+BAAe,IAAI,QAA8B;AAOvD,SAAgB,gBAAgB,OAA4C;CAC1E,OAAO,aAAa,IAAI,KAAK;AAC/B;;;;;;AAOA,SAAgB,eACd,OACA,OACA,MACc;CACd,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,KAAK,SAAS,SAAS,CAAC,CAAC,EAAE;CACjC,MAAM,gBAAgB,SAAS;CAC/B,MAAM,iBAAiB,SAAS;CAChC,MAAM,6BAA6B;EACjC,MAAM,IAAI,SAAS;EACnB,OAAO,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB,CAAC,EAAE,qBAAqB,aAAa,KAAA;CAC9E;CACA,MAAM,aAA2B;EAC/B;EACA,IAAI,WAAW;GACb,OAAO,SAAS,CAAC,CAAC;EACpB;CACF;CAGA,MAAM,iBACJ,eAAe,SAAS,GAAyC,EAAE,WAAW,KAAK,CAAC;CAGtF,MAAM,EAAE,YAAY,eAAe,YAAY;EAC7C,IAAI,QAAQ;GACV,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,SAAS,CAAC,CAAC,iBAAiB,qBAAqB;EAC1D;EACA,IAAI,oBAAoB;GACtB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,kBAAkB;CACpB,CAAC;CAGD,aAAa,IAAI,OAAO,UAAU;CAGlC,mBAAmB;EACjB,aAAa,IAAI,OAAO,UAAU;EAElC,gBAAgB;GACd,IAAI,aAAa,IAAI,KAAK,MAAM,YAC9B,aAAa,OAAO,KAAK;EAE7B,CAAC;CACH,CAAC;CAGD,MAAM,2BAA2B;EAC/B,MAAM,IAAI,SAAS;EACnB,MAAM,MAAgB,CAAC;EACvB,IAAI,EAAE,qBACJ,IAAI,KAAK,EAAE,mBAAmB;EAEhC,IAAI,EAAE,aACJ,IAAI,KAAK,aAAa;EAExB,IAAI,EAAE,cACJ,IAAI,KAAK,cAAc;EAEzB,OAAO,IAAI,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI,KAAA;CAC1C;CAEA,OAAO;EACL,IAAI,YAAY;GACd,MAAM,IAAI,SAAS;GACnB,MAAM,WAAW,MAAM,WAAW,CAAC,CAAC,OAAO;GAE3C,OAAO,WAAW,SAAS,GAAG,YAAuC;IACnE;IACA,MAAM,WAAW,SAAS;IAC1B,wBAAwB,YAAY,MAAM,cAAc,MAAM,aAAa,OAAO,KAAA;IAClF,eAAe;IACf,iBAAiB;IACjB,oBAAoB,mBAAmB;IACvC,iBAAiB,EAAE,cAAc,KAAA;GACnC,CAAC;EACH;EACA,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,mBAAmB;GACrB,OAAO,EACL,IAAI,cACN;EACF;EACA,IAAI,oBAAoB;GACtB,OAAO,EACL,IAAI,eACN;EACF;CACF;AACF;;;;;;;;;;;;;;;AC/GA,SAAgB,UACd,OACA,OACA,KACS;CACT,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,QAAQ,SAAS;CACvB,MAAM,SAAS,SAAS;CACxB,MAAM,iBAAiB,SAAS;CAGhC,MAAM,gBAAgB,gBAAgB,KAAK;CAG3C,MAAM,YAAY,SAAS,CAAC,CAAC;CAG7B,MAAM,aAAa,iBAAiB;EAElC,OADU,SACH,CAAC,CAAC,cAAc,MAAM,WAAW,IAAI,CAAC;CAC/C,CAAC;CAED,MAAM,aAAa,iBAAiB;EAClC,OAAO,MAAM,WAAW,IAAI,CAAC;CAC/B,CAAC;CAED,MAAM,eAAe,iBAAiB,MAAM,cAAc,MAAM,MAAM;CAEtE,MAAM,YAAY,iBAAiB;EACjC,OAAO,MAAM,WAAW,MAAM,IAAI;CACpC,CAAC;CAED,MAAM,6BAAyC;EAC7C,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,YAAY,WAAW,YAAY;EACvC,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,GACpD,YAAY,WAAW,YAAY,SAAS;EAE9C,OAAO;CACT;CAEA,MAAM,4BAAwC;EAC5C,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,YAAY,WAAW,WAAW;EACtC,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,GACpD,YAAY,WAAW,aAAa,SAAS;EAE/C,OAAO;CACT;CAEA,MAAM,uBAAuB,YAA6B;EACxD,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,YAAY,WAAW,YAAY,OAAO;EAC9C,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,GACpD,YAAY,WAAW,YAAY,SAAS;EAG9C,IAAI,aAAa,MACf,OAAO;EAGT,OAAO,qBAAqB;CAC9B;CAEA,MAAM,2BAA2B,YAA6B;EAC5D,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,YAAY,WAAW,aAAa,OAAO;EAC/C,OAAO,aAAa,QAAQ,MAAM,WAAW,SAAS,GACpD,YAAY,WAAW,aAAa,SAAS;EAG/C,IAAI,aAAa,MACf,OAAO;EAGT,OAAO,oBAAoB;CAC7B;CAEA,MAAM,YAAY,YAAwB;EACxC,IAAI,WAAW,MACb;EAGF,MAAM,cAAc,OAAO;EAC3B,MAAM,iBAAiB,IAAI;EAE3B,IAAI,CAAC,gBACH;EAGF,IAAI,YAAY,IAAI,GAAG;GACrB,eAAe,MAAM;GACrB;EACF;EAEA,MAAM,UAAU,eAAe;EAC/B,IAAI,CAAC,SACH;EAOF,MAJsB,KACpB,QAAQ,iBAA8B,mCAA+B,CACvE,CAAC,CAAC,MAAM,OAAO,GAAG,aAAa,UAAU,MAAM,OAAO,OAAO,CAEvD,CAAC,EAAE,MAAM;CACjB;CAGA,MAAM,EAAE,YAAY,cAAc,YAAY;EAC5C;EACA,eAAe;GACb,IAAI,CAAC,WAAW,GAAG;IACjB,MAAM,cAAc,IAAI,CAAC;IACzB,MAAM,gBAAgB,IAAI,CAAC;GAC7B;EACF;CACF,CAAC;CAGD,MAAM,EAAE,mBAAmB,gBACzB;EACE;EACA,eAAe;GACb,MAAM,cAAc,IAAI,CAAC;EAC3B;CACF,GACA,GACF;CAGA,MAAM,iBAAiB,MAAqB;EAC1C,IAAI,WAAW,GAAG;EAElB,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,EAAE,eAAe;IACjB,SAAS,oBAAoB,IAAI,CAAC,CAAC;IACnC;GACF,KAAK;GACL,KAAK;IACH,EAAE,eAAe;IACjB,SAAS,wBAAwB,IAAI,CAAC,CAAC;IACvC;GACF,KAAK;IACH,EAAE,eAAe;IACjB,SAAS,qBAAqB,CAAC;IAC/B;GACF,KAAK;IACH,EAAE,eAAe;IACjB,SAAS,oBAAoB,CAAC;IAC9B;GACF,SACE;EACJ;EAEA,IAAI,EAAE,QAAQ,YAAY,EAAE,QAAQ,aAAa;GAC/C,EAAE,eAAe;GACjB,MAAM,OAAO,QAAQ;GACrB,IAAI,MAAM,UAER,IAAI,WAAW,GAAG;IAChB,MAAM,YAAY,MAAM,aAAa;IACrC,MAAM,eACJ,cAAc,QACV,IAAI,IAAI,MAAM,KAAK,MAAM,WAAW,CAAC,CAAC,CAAC,KAAK,SAAU,KAAsB,GAAG,CAAC,IAChF,IAAI,IAAI,SAAS;IACvB,KAAK,SAAS,YAAY;GAC5B,OACE,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;EAGpC;CACF;CAGA,MAAM,WAAW,iBAAiB;EAChC,IAAI,WAAW,GAAG,OAAO;EAEzB,IAAI,UAAU,GACZ,OAAO;EAGT,IAAI,MAAM,WAAW,MAAM,MACzB,OAAO;EAGT,MAAM,aAAa,MAAM,WAAW;EACpC,IAAI,iBAA6B;EAEjC,IAAI,MAAM,cAAc,MAAM;QACvB,MAAM,QAAQ,YACjB,IAAI,CAAC,MAAM,WAAW,KAAK,GAAG,KAAK,MAAM,WAAW,KAAK,GAAG,GAAG;IAC7D,iBAAiB,KAAK;IACtB;GACF;;EAIJ,IAAI,kBAAkB,MACpB,iBAAiB,qBAAqB;EAGxC,IAAI,IAAI,MAAM,gBACZ,OAAO;EAGT,OAAO;CACT,CAAC;CAGD,MAAM,iBAAiB,eAAe,SAAS,CAAuC;CAGtF,MAAM,iBAAiB,iBAAiB;EAEtC,OAAO,CAAC,CADK,QACD,CAAC,EAAE;CACjB,CAAC;CAED,MAAM,WAAW,iBAAiB,SAAS,CAAC,CAAC,QAAQ,QAAQ;CAE7D,OAAO;EACL,IAAI,WAAW;GACb,OAAO,WACL,SAAS,GACT,gBACA,YACA;IACE,IAAI;IACJ,MAAM,SAAS;IACf,UAAU,SAAS;IACnB,YAAY,OAAO,IAAI,CAAC;IACxB,cAAc,SAAS,CAAC,CAAC;IACzB,iBAAiB,aAAa,IAAI,WAAW,IAAI,KAAA;IACjD,iBAAiB,WAAW,KAAK,KAAA;IACjC,WAAW;GACb,CACF;EACF;EACA,IAAI,gBAAgB;GAClB,OAAO;IACL,IAAI;IACJ,MAAM;IACN,oBAAoB,eAAe,IAAI,iBAAiB,KAAA;GAC1D;EACF;EACA,IAAI,oBAAoB;GACtB,MAAM,OAAO,QAAQ;GACrB,OAAO;IACL,IAAI;IACJ,cAAc;IACd,mBAAmB,GAAG,eAAe,GAAG;IACxC,YAAY,WAAW;IACvB,eAAe;KACb,IAAI,MAAM,YAAY,CAAC,WAAW,GAChC,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;IAElC;GACF;EACF;EACA,IAAI,iBAAiB;GACnB,OAAO,eAAe;EACxB;EACA,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,YAAY;GACd,OAAO,UAAU;EACnB;EACA,IAAI,YAAY;GACd,OAAO,UAAU;EACnB;CACF;AACF"}
+{"version":3,"file":"tag.jsx","names":["mergeProps","mergeProps"],"sources":["../../src/tag/createTagGroup.ts","../../src/tag/createTag.ts"],"sourcesContent":["/**\n * TagGroup hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tag group component.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n *\n * Based on @react-aria/tag useTagGroup\n */\n\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { createLabel } from \"../label/createLabel\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport type { ListState, Key } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaTagGroupProps {\n  /** An ID for the tag group. */\n  id?: string;\n  /** Whether the tag group is disabled. */\n  isDisabled?: boolean;\n  /** The label for the tag group. */\n  label?: string;\n  /** An accessible label for the tag group when no visible label is provided. */\n  \"aria-label\"?: string;\n  /** The ID of an element that labels the tag group. */\n  \"aria-labelledby\"?: string;\n  /** The ID of an element that describes the tag group. */\n  \"aria-describedby\"?: string;\n  /** A description of the tag group. */\n  description?: string;\n  /** An error message for the tag group. */\n  errorMessage?: string;\n  /** Handler that is called when a user removes a tag. */\n  onRemove?: (keys: Set<Key>) => void;\n  /**\n   * The layout direction, threaded from `useLocale`. A TagGroup navigates on the\n   * inline axis, so ArrowLeft/ArrowRight flip under RTL (mirrors the direction\n   * the ListKeyboardDelegate receives from useTagGroup).\n   */\n  direction?: \"ltr\" | \"rtl\";\n}\n\nexport interface TagGroupAria {\n  /** Props for the tag group container element. */\n  gridProps: Record<string, unknown>;\n  /** Props for the tag group's visible label (if any). */\n  labelProps: Record<string, unknown>;\n  /** Props for the tag group description element, if any. */\n  descriptionProps: Record<string, unknown>;\n  /** Props for the tag group error message element, if any. */\n  errorMessageProps: Record<string, unknown>;\n}\n\n// Shared data between tag group and tags\nconst tagGroupData = new WeakMap<object, TagGroupData>();\n\ninterface TagGroupData {\n  id: string;\n  onRemove?: (keys: Set<Key>) => void;\n  direction: \"ltr\" | \"rtl\";\n}\n\nexport function getTagGroupData(state: ListState): TagGroupData | undefined {\n  return tagGroupData.get(state);\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag group component.\n * A tag group is a focusable list of labels, categories, keywords, filters, or other items,\n * with support for keyboard navigation, selection, and removal.\n */\nexport function createTagGroup<T>(\n  props: MaybeAccessor<AriaTagGroupProps>,\n  state: ListState<T>,\n  _ref?: () => HTMLElement | null,\n): TagGroupAria {\n  const getProps = () => access(props);\n  const id = createId(getProps().id);\n  const descriptionId = createId();\n  const errorMessageId = createId();\n  const getFallbackAriaLabel = () => {\n    const p = getProps();\n    return !p.label && !p[\"aria-label\"] && !p[\"aria-labelledby\"] ? \"Tag list\" : undefined;\n  };\n  const sharedData: TagGroupData = {\n    id,\n    get onRemove() {\n      return getProps().onRemove;\n    },\n    get direction() {\n      return getProps().direction ?? \"ltr\";\n    },\n  };\n\n  // Filter DOM props\n  const domProps = () =>\n    filterDOMProps(getProps() as unknown as Record<string, unknown>, { labelable: true });\n\n  // Create label handling\n  const { labelProps, fieldProps } = createLabel({\n    get label() {\n      return getProps().label;\n    },\n    get \"aria-label\"() {\n      return getProps()[\"aria-label\"] ?? getFallbackAriaLabel();\n    },\n    get \"aria-labelledby\"() {\n      return getProps()[\"aria-labelledby\"];\n    },\n    labelElementType: \"span\",\n  });\n\n  // Share data with child tags before they create their aria state.\n  tagGroupData.set(state, sharedData);\n\n  // Clean up the shared state when the tag group owner is disposed.\n  createEffect(() => {\n    tagGroupData.set(state, sharedData);\n\n    onCleanup(() => {\n      if (tagGroupData.get(state) === sharedData) {\n        tagGroupData.delete(state);\n      }\n    });\n  });\n\n  // Build aria-describedby\n  const getAriaDescribedBy = () => {\n    const p = getProps();\n    const ids: string[] = [];\n    if (p[\"aria-describedby\"]) {\n      ids.push(p[\"aria-describedby\"]);\n    }\n    if (p.description) {\n      ids.push(descriptionId);\n    }\n    if (p.errorMessage) {\n      ids.push(errorMessageId);\n    }\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  };\n\n  const getRef = () => _ref?.() ?? null;\n\n  // First/last navigable (non-disabled) row keys — the entry targets.\n  const getFirstNavigableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getFirstKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyAfter(candidate);\n    }\n    return candidate;\n  };\n\n  const getLastNavigableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getLastKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyBefore(candidate);\n    }\n    return candidate;\n  };\n\n  // Focus marshalling — the grid container is a trampoline. Its roving tabIndex\n  // is 0 only while `focusedKey == null` (see gridProps below), so a forward Tab\n  // that reaches the standalone container lands on the container itself; move the\n  // focused key onto the first/last row and the post-commit effect below pulls\n  // REAL DOM focus there while the container rolls to tabIndex -1. Mirrors\n  // useSelectableCollection's `onFocus` (via useTagGroup → useGridList). A\n  // Shift+Tab arriving directly on a row is handled by the row's own focusable\n  // onFocus, since every non-disabled row is a tab stop when nothing is focused.\n  const onFocus = (e: FocusEvent) => {\n    state.setFocused(true);\n\n    // `focus` is non-bubbling in Solid, so this fires only when the container\n    // itself receives focus; ignore anything that bubbled from a descendant.\n    const container = e.currentTarget as HTMLElement | null;\n    if (container && e.target && !container.contains(e.target as Node)) return;\n    if (state.focusedKey() != null || getProps().isDisabled) return;\n\n    const relatedTarget = e.relatedTarget as Element | null;\n    // Focus arriving from an element that FOLLOWS the group in document order\n    // means the user shift-tabbed backward into it → enter at the LAST row;\n    // otherwise (forward Tab, or programmatic) enter at the FIRST.\n    const enterKey =\n      relatedTarget &&\n      container &&\n      container.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING\n        ? getLastNavigableKey()\n        : getFirstNavigableKey();\n    if (enterKey != null) {\n      state.setFocusedKey(enterKey);\n    }\n  };\n\n  const onBlur = () => {\n    state.setFocused(false);\n  };\n\n  // Once the roving tabindex for the focused key has committed to the DOM, move\n  // browser focus onto that row (looked up by its stable data-key), mirroring\n  // useSelectableCollection. Only manage focus while it already lives inside the\n  // container — i.e. the user is navigating via the trampoline — so a background\n  // focusedKey change never yanks focus from elsewhere on the page.\n  createEffect(() => {\n    const key = state.focusedKey();\n    const el = getRef();\n    if (!el || key == null) return;\n\n    const active = document.activeElement;\n    if (!active || (active !== el && !el.contains(active))) return;\n\n    const target = el.querySelector<HTMLElement>(`[data-key=\"${CSS.escape(String(key))}\"]`);\n    if (target && target !== active) {\n      target.focus();\n    }\n  });\n\n  return {\n    get gridProps() {\n      const p = getProps();\n      const hasItems = state.collection().size > 0;\n\n      return mergeProps(domProps(), fieldProps as Record<string, unknown>, {\n        id,\n        role: hasItems ? \"grid\" : \"group\",\n        \"aria-multiselectable\": hasItems && state.selectionMode() === \"multiple\" ? true : undefined,\n        \"aria-atomic\": false,\n        \"aria-relevant\": \"additions\",\n        \"aria-describedby\": getAriaDescribedBy(),\n        \"aria-disabled\": p.isDisabled || undefined,\n        // Roving container tabIndex mirrors useSelectableCollection: the container\n        // is tabbable (0) only while nothing is focused, then rolls to -1 once a\n        // row takes focus so Tab exits the group.\n        tabIndex: p.isDisabled ? undefined : state.focusedKey() != null ? -1 : 0,\n        onFocus,\n        onBlur,\n      });\n    },\n    get labelProps() {\n      return labelProps as Record<string, unknown>;\n    },\n    get descriptionProps() {\n      return {\n        id: descriptionId,\n      };\n    },\n    get errorMessageProps() {\n      return {\n        id: errorMessageId,\n      };\n    },\n  };\n}\n","/**\n * Tag hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a tag component.\n * Tags are individual items within a TagGroup.\n *\n * Based on @react-aria/tag useTag\n */\n\nimport { createMemo } from \"solid-js\";\nimport { createFocusable } from \"../interactions/createFocusable\";\nimport { createPress } from \"../interactions/createPress\";\nimport { filterDOMProps } from \"../utils/filterDOMProps\";\nimport { mergeProps } from \"../utils/mergeProps\";\nimport { createId } from \"../ssr\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\nimport { getTagGroupData } from \"./createTagGroup\";\nimport type { ListState, Key } from \"@proyecto-viviana/solid-stately\";\n\nexport interface AriaTagProps {\n  /** The unique key for this tag. */\n  key: Key;\n  /** The role for the tag root. Components use row semantics inside a grid. */\n  role?: \"option\" | \"row\";\n  /** Whether the tag is disabled. */\n  isDisabled?: boolean;\n  /** A text value for the tag used for accessibility. */\n  textValue?: string;\n}\n\nexport interface TagAria {\n  /** Props for the tag row element. */\n  rowProps: Record<string, unknown>;\n  /** Props for the tag cell element. */\n  gridCellProps: Record<string, unknown>;\n  /** Props for the tag remove button. */\n  removeButtonProps: Record<string, unknown>;\n  /** Whether the tag can be removed. */\n  allowsRemoving: boolean;\n  /** Whether the tag is selected. */\n  isSelected: boolean;\n  /** Whether the tag is disabled. */\n  isDisabled: boolean;\n  /** Whether the tag is focused. */\n  isFocused: boolean;\n  /** Whether the tag is pressed. */\n  isPressed: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a tag component.\n * Tags are individual items within a TagGroup.\n */\nexport function createTag<T>(\n  props: MaybeAccessor<AriaTagProps>,\n  state: ListState<T>,\n  ref: () => HTMLElement | null,\n): TagAria {\n  const getProps = () => access(props);\n  const rowId = createId();\n  const cellId = createId();\n  const removeButtonId = createId();\n\n  // Get shared data from tag group\n  const getData = () => getTagGroupData(state);\n\n  // Get key\n  const key = () => getProps().key;\n\n  // Compute states\n  const isDisabled = createMemo(() => {\n    const p = getProps();\n    return p.isDisabled || state.isDisabled(key());\n  });\n\n  const isSelected = createMemo(() => {\n    return state.isSelected(key());\n  });\n\n  const isSelectable = createMemo(() => state.selectionMode() !== \"none\");\n\n  const isFocused = createMemo(() => {\n    return state.focusedKey() === key();\n  });\n\n  const getFirstFocusableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getFirstKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyAfter(candidate);\n    }\n    return candidate;\n  };\n\n  const getLastFocusableKey = (): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getLastKey();\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyBefore(candidate);\n    }\n    return candidate;\n  };\n\n  const getNextFocusableKey = (fromKey: Key): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getKeyAfter(fromKey);\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyAfter(candidate);\n    }\n\n    if (candidate != null) {\n      return candidate;\n    }\n\n    return getFirstFocusableKey();\n  };\n\n  const getPreviousFocusableKey = (fromKey: Key): Key | null => {\n    const collection = state.collection();\n    let candidate = collection.getKeyBefore(fromKey);\n    while (candidate != null && state.isDisabled(candidate)) {\n      candidate = collection.getKeyBefore(candidate);\n    }\n\n    if (candidate != null) {\n      return candidate;\n    }\n\n    return getLastFocusableKey();\n  };\n\n  const focusKey = (nextKey: Key | null) => {\n    if (nextKey == null) {\n      return;\n    }\n\n    state.setFocusedKey(nextKey);\n    const currentElement = ref();\n\n    if (!currentElement) {\n      return;\n    }\n\n    if (nextKey === key()) {\n      currentElement.focus();\n      return;\n    }\n\n    const tagList = currentElement.parentElement;\n    if (!tagList) {\n      return;\n    }\n\n    const nextTag = Array.from(\n      tagList.querySelectorAll<HTMLElement>('[role=\"option\"], [role=\"row\"]'),\n    ).find((el) => el.getAttribute(\"data-key\") === String(nextKey));\n\n    nextTag?.focus();\n  };\n\n  // Handle press for selection\n  const { pressProps, isPressed } = createPress({\n    isDisabled,\n    onPress: () => {\n      if (!isDisabled()) {\n        state.setFocusedKey(key());\n        state.toggleSelection(key());\n      }\n    },\n  });\n\n  // Handle focusable\n  const { focusableProps } = createFocusable(\n    {\n      isDisabled,\n      onFocus: () => {\n        state.setFocusedKey(key());\n      },\n    },\n    ref,\n  );\n\n  // Handle keyboard for navigation and removal\n  const handleKeyDown = (e: KeyboardEvent) => {\n    if (isDisabled()) return;\n\n    // A TagGroup is inherently horizontal (useTagGroup passes\n    // `orientation: 'horizontal'` to the ListKeyboardDelegate), so the inline\n    // (Left/Right) axis is the navigation axis and flips under RTL, while the\n    // block (Up/Down) axis stays DOM-ordered. Mirror ListKeyboardDelegate:\n    // getKeyRightOf = rtl ? previous : next; getKeyLeftOf = rtl ? next : previous;\n    // getKeyBelow/Above are never direction-flipped.\n    const isRtl = getData()?.direction === \"rtl\";\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        e.preventDefault();\n        focusKey(isRtl ? getPreviousFocusableKey(key()) : getNextFocusableKey(key()));\n        return;\n      case \"ArrowLeft\":\n        e.preventDefault();\n        focusKey(isRtl ? getNextFocusableKey(key()) : getPreviousFocusableKey(key()));\n        return;\n      case \"ArrowDown\":\n        e.preventDefault();\n        focusKey(getNextFocusableKey(key()));\n        return;\n      case \"ArrowUp\":\n        e.preventDefault();\n        focusKey(getPreviousFocusableKey(key()));\n        return;\n      case \"Home\":\n        e.preventDefault();\n        focusKey(getFirstFocusableKey());\n        return;\n      case \"End\":\n        e.preventDefault();\n        focusKey(getLastFocusableKey());\n        return;\n      default:\n        break;\n    }\n\n    if (e.key === \"Delete\" || e.key === \"Backspace\") {\n      e.preventDefault();\n      const data = getData();\n      if (data?.onRemove) {\n        // Remove selected keys if this tag is selected, otherwise just this tag\n        if (isSelected()) {\n          const selection = state.selectedKeys();\n          const keysToRemove =\n            selection === \"all\"\n              ? new Set(Array.from(state.collection()).map((item) => (item as { key: Key }).key))\n              : new Set(selection);\n          data.onRemove(keysToRemove);\n        } else {\n          data.onRemove(new Set([key()]));\n        }\n      }\n    }\n  };\n\n  // Compute tabIndex. Mirror useTag (vendored @react-aria/tag/src/useTag.ts):\n  //   tabIndex = (!isDisabled && (isFocused || focusedKey == null)) ? 0 : -1\n  // Every non-disabled row is a tab stop when nothing is focused yet (so native\n  // Shift+Tab from a following element lands on the LAST row); once a key is\n  // focused, only that row keeps tabIndex 0 (roving single tab stop).\n  const tabIndex = createMemo(() => {\n    if (isDisabled()) return -1;\n    return isFocused() || state.focusedKey() == null ? 0 : -1;\n  });\n\n  // Filter DOM props\n  const domProps = () => filterDOMProps(getProps() as unknown as Record<string, unknown>);\n\n  // Check if removal is allowed\n  const allowsRemoving = createMemo(() => {\n    const data = getData();\n    return !!data?.onRemove;\n  });\n\n  const rootRole = createMemo(() => getProps().role ?? \"option\");\n\n  return {\n    get rowProps() {\n      return mergeProps(\n        domProps(),\n        focusableProps as Record<string, unknown>,\n        pressProps as Record<string, unknown>,\n        {\n          id: rowId,\n          role: rootRole(),\n          tabIndex: tabIndex(),\n          \"data-key\": String(key()),\n          \"aria-label\": getProps().textValue,\n          \"aria-selected\": isSelectable() ? isSelected() : undefined,\n          \"aria-disabled\": isDisabled() || undefined,\n          onKeyDown: handleKeyDown,\n        },\n      );\n    },\n    get gridCellProps() {\n      return {\n        id: cellId,\n        role: \"gridcell\",\n        \"aria-describedby\": allowsRemoving() ? removeButtonId : undefined,\n      };\n    },\n    get removeButtonProps() {\n      const data = getData();\n      return {\n        id: removeButtonId,\n        \"aria-label\": \"Remove\",\n        \"aria-labelledby\": `${removeButtonId} ${rowId}`,\n        isDisabled: isDisabled(),\n        onPress: () => {\n          if (data?.onRemove && !isDisabled()) {\n            data.onRemove(new Set([key()]));\n          }\n        },\n      };\n    },\n    get allowsRemoving() {\n      return allowsRemoving();\n    },\n    get isSelected() {\n      return isSelected();\n    },\n    get isDisabled() {\n      return isDisabled();\n    },\n    get isFocused() {\n      return isFocused();\n    },\n    get isPressed() {\n      return isPressed();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/textfield.js

@@ -1,5 +1,6 @@
-import { i as access, o as mergeProps } from "./env.js";
+import { i as mergeProps } from "./env.js";
 import { t as filterDOMProps } from "./filterDOMProps.js";
+import { t as access } from "./reactivity.js";
 import { n as createFocusable } from "./createFocusable.js";
 import { t as createField } from "./createField.js";
 //#region src/textfield/createTextField.ts

package/dist/_chunk/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","names":[],"sources":["../../src/textfield/createTextField.ts"],"sourcesContent":["/**\n * TextField hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a text field.\n *\n * This is a 1:1 port of @react-aria/textfield's useTextField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField, type AriaFieldProps, type FieldAria } from \"../label\";\nimport { createFocusable, type FocusableDOMProps, type FocusableProps } from \"../interactions\";\nimport { mergeProps, filterDOMProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {\n  /** The current value (controlled). */\n  value?: string;\n  /** The default value (uncontrolled). */\n  defaultValue?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is read only. */\n  isReadOnly?: boolean;\n  /** Whether the input is required. */\n  isRequired?: boolean;\n  /** Whether to use native HTML form validation or ARIA validation semantics. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The type of input to render. */\n  type?: \"text\" | \"search\" | \"url\" | \"tel\" | \"email\" | \"password\" | string;\n  /** The input mode hint for virtual keyboards. */\n  inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n  /** Hint for the enter key action on virtual keyboards. */\n  enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\";\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the input with a form element by id. */\n  form?: string;\n  /** Regex pattern to validate the input value. */\n  pattern?: string;\n  /** The maximum number of characters supported by the input. */\n  maxLength?: number;\n  /** The minimum number of characters required by the input. */\n  minLength?: number;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Whether to enable auto complete. */\n  autoComplete?: string;\n  /** Whether to enable auto correct. */\n  autoCorrect?: string;\n  /** Whether to enable spell check. */\n  spellCheck?: \"true\" | \"false\";\n  /** Controls whether and how text input is automatically capitalized. */\n  autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\";\n  /** The element type to use for the input. Defaults to 'input'. */\n  inputElementType?: \"input\" | \"textarea\";\n\n  // Clipboard events\n  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n\n  // Composition events\n  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n\n  // Selection events\n  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;\n\n  // Input events\n  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n}\n\nexport interface TextFieldAria<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends Omit<FieldAria, \"fieldProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<T>;\n  /** Whether the text field is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * Text fields allow users to input text with a keyboard.\n *\n * @param props - Props for the text field.\n * @param ref - Optional ref callback for the input element.\n */\nexport function createTextField<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {\n  const getProps = () => access(props);\n  let lastInputValue: string | undefined;\n\n  const eventWithCurrentTarget = (\n    event: InputEvent,\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) =>\n    new Proxy(event, {\n      get(target, property, receiver) {\n        if (property === \"target\" || property === \"currentTarget\") {\n          return element;\n        }\n\n        const value = Reflect.get(target, property, receiver);\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n\n  // Get field accessibility props (label, description, error message)\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);\n\n  // Get focusable props\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return getProps().isDisabled;\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n      onFocus: getProps().onFocus,\n      onBlur: getProps().onBlur,\n      onFocusChange: getProps().onFocusChange,\n      onKeyDown: getProps().onKeyDown,\n      onKeyUp: getProps().onKeyUp,\n    },\n    ref as ((el: HTMLElement) => void) | undefined,\n  );\n\n  // Filter DOM props\n  const getDomProps = () =>\n    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });\n\n  // Build input props\n  const getInputProps = (): JSX.InputHTMLAttributes<T> => {\n    const p = getProps();\n    const isInvalid = p.isInvalid ?? false;\n    const isTextarea = p.inputElementType === \"textarea\";\n    const validationBehavior = p.validationBehavior ?? \"native\";\n\n    return mergeProps(\n      getDomProps(),\n      {\n        disabled: p.isDisabled,\n        readOnly: p.isReadOnly,\n        required: validationBehavior === \"native\" && p.isRequired,\n        \"aria-required\": (validationBehavior === \"aria\" && p.isRequired) || undefined,\n        \"aria-invalid\": isInvalid || undefined,\n        value: p.value ?? p.defaultValue ?? \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          if (target.value !== lastInputValue) {\n            p.onChange?.(target.value);\n          }\n        },\n        // Don't include type and pattern for textarea elements\n        type: isTextarea ? undefined : (p.type ?? \"text\"),\n        inputMode: p.inputMode,\n        enterKeyHint: p.enterKeyHint,\n        name: p.name,\n        form: p.form,\n        pattern: isTextarea ? undefined : p.pattern,\n        maxLength: p.maxLength,\n        minLength: p.minLength,\n        placeholder: p.placeholder,\n        autoComplete: p.autoComplete,\n        autoCorrect: p.autoCorrect,\n        autoCapitalize: p.autoCapitalize,\n        spellCheck: p.spellCheck,\n\n        // Clipboard events\n        onCopy: p.onCopy,\n        onCut: p.onCut,\n        onPaste: p.onPaste,\n\n        // Composition events\n        onCompositionStart: p.onCompositionStart,\n        onCompositionEnd: p.onCompositionEnd,\n        onCompositionUpdate: p.onCompositionUpdate,\n\n        // Selection events\n        onSelect: p.onSelect,\n\n        // Input events\n        onBeforeInput: p.onBeforeInput,\n        onInput: (e: InputEvent) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          const nextValue = target.value;\n          p.onInput?.(\n            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],\n          );\n          lastInputValue = nextValue;\n          p.onChange?.(nextValue);\n        },\n      },\n      focusableProps as Record<string, unknown>,\n      fieldProps as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<T>;\n  };\n\n  const getIsInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get inputProps() {\n      return getInputProps();\n    },\n    get descriptionProps() {\n      return descriptionProps;\n    },\n    get errorMessageProps() {\n      return errorMessageProps;\n    },\n    get isInvalid() {\n      return getIsInvalid();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AA4FA,SAAgB,gBAEd,OAA0C,KAAyC;CACnF,MAAM,iBAAiB,OAAO,KAAK;CACnC,IAAI;CAEJ,MAAM,0BACJ,OACA,YAEA,IAAI,MAAM,OAAO,EACf,IAAI,QAAQ,UAAU,UAAU;EAC9B,IAAI,aAAa,YAAY,aAAa,iBACxC,OAAO;EAGT,MAAM,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;EACpD,OAAO,OAAO,UAAU,aAAa,MAAM,KAAK,MAAM,IAAI;CAC5D,EACF,CAAC;CAGH,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,YAAY,KAAK;CAGzF,MAAM,EAAE,mBAAmB,gBACzB;EACE,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,sBAAsB;GACxB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,SAAS,SAAS,CAAC,CAAC;EACpB,QAAQ,SAAS,CAAC,CAAC;EACnB,eAAe,SAAS,CAAC,CAAC;EAC1B,WAAW,SAAS,CAAC,CAAC;EACtB,SAAS,SAAS,CAAC,CAAC;CACtB,GACA,GACF;CAGA,MAAM,oBACJ,eAAe,SAAS,GAA8B,EAAE,WAAW,KAAK,CAAC;CAG3E,MAAM,sBAAkD;EACtD,MAAM,IAAI,SAAS;EACnB,MAAM,YAAY,EAAE,aAAa;EACjC,MAAM,aAAa,EAAE,qBAAqB;EAC1C,MAAM,qBAAqB,EAAE,sBAAsB;EAEnD,OAAO,WACL,YAAY,GACZ;GACE,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,UAAU,uBAAuB,YAAY,EAAE;GAC/C,iBAAkB,uBAAuB,UAAU,EAAE,cAAe,KAAA;GACpE,gBAAgB,aAAa,KAAA;GAC7B,OAAO,EAAE,SAAS,EAAE,gBAAgB;GACpC,WAAW,MAAa;IACtB,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,UAAU,gBACnB,EAAE,WAAW,OAAO,KAAK;GAE7B;GAEA,MAAM,aAAa,KAAA,IAAa,EAAE,QAAQ;GAC1C,WAAW,EAAE;GACb,cAAc,EAAE;GAChB,MAAM,EAAE;GACR,MAAM,EAAE;GACR,SAAS,aAAa,KAAA,IAAY,EAAE;GACpC,WAAW,EAAE;GACb,WAAW,EAAE;GACb,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,YAAY,EAAE;GAGd,QAAQ,EAAE;GACV,OAAO,EAAE;GACT,SAAS,EAAE;GAGX,oBAAoB,EAAE;GACtB,kBAAkB,EAAE;GACpB,qBAAqB,EAAE;GAGvB,UAAU,EAAE;GAGZ,eAAe,EAAE;GACjB,UAAU,MAAkB;IAC1B,MAAM,SAAS,EAAE;IACjB,MAAM,YAAY,OAAO;IACzB,EAAE,UACA,uBAAuB,GAAG,MAAM,CAClC;IACA,iBAAiB;IACjB,EAAE,WAAW,SAAS;GACxB;EACF,GACA,gBACA,UACF;CACF;CAEA,MAAM,qBAAqB;EACzB,OAAO,SAAS,CAAC,CAAC,aAAa;CACjC;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO;EACT;EACA,IAAI,oBAAoB;GACtB,OAAO;EACT;EACA,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;CACF;AACF"}
+{"version":3,"file":"textfield.js","names":[],"sources":["../../src/textfield/createTextField.ts"],"sourcesContent":["/**\n * TextField hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a text field.\n *\n * This is a 1:1 port of @react-aria/textfield's useTextField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField, type AriaFieldProps, type FieldAria } from \"../label\";\nimport { createFocusable, type FocusableDOMProps, type FocusableProps } from \"../interactions\";\nimport { mergeProps, filterDOMProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {\n  /** The current value (controlled). */\n  value?: string;\n  /** The default value (uncontrolled). */\n  defaultValue?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is read only. */\n  isReadOnly?: boolean;\n  /** Whether the input is required. */\n  isRequired?: boolean;\n  /** Whether to use native HTML form validation or ARIA validation semantics. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The type of input to render. */\n  type?: \"text\" | \"search\" | \"url\" | \"tel\" | \"email\" | \"password\" | string;\n  /** The input mode hint for virtual keyboards. */\n  inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n  /** Hint for the enter key action on virtual keyboards. */\n  enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\";\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the input with a form element by id. */\n  form?: string;\n  /** Regex pattern to validate the input value. */\n  pattern?: string;\n  /** The maximum number of characters supported by the input. */\n  maxLength?: number;\n  /** The minimum number of characters required by the input. */\n  minLength?: number;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Whether to enable auto complete. */\n  autoComplete?: string;\n  /** Whether to enable auto correct. */\n  autoCorrect?: string;\n  /** Whether to enable spell check. */\n  spellCheck?: \"true\" | \"false\";\n  /** Controls whether and how text input is automatically capitalized. */\n  autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\";\n  /** The element type to use for the input. Defaults to 'input'. */\n  inputElementType?: \"input\" | \"textarea\";\n\n  // Clipboard events\n  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n\n  // Composition events\n  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n\n  // Selection events\n  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;\n\n  // Input events\n  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n}\n\nexport interface TextFieldAria<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends Omit<FieldAria, \"fieldProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<T>;\n  /** Whether the text field is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * Text fields allow users to input text with a keyboard.\n *\n * @param props - Props for the text field.\n * @param ref - Optional ref callback for the input element.\n */\nexport function createTextField<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {\n  const getProps = () => access(props);\n  let lastInputValue: string | undefined;\n\n  const eventWithCurrentTarget = (\n    event: InputEvent,\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) =>\n    new Proxy(event, {\n      get(target, property, receiver) {\n        if (property === \"target\" || property === \"currentTarget\") {\n          return element;\n        }\n\n        const value = Reflect.get(target, property, receiver);\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n\n  // Get field accessibility props (label, description, error message)\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);\n\n  // Get focusable props\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return getProps().isDisabled;\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n      onFocus: getProps().onFocus,\n      onBlur: getProps().onBlur,\n      onFocusChange: getProps().onFocusChange,\n      onKeyDown: getProps().onKeyDown,\n      onKeyUp: getProps().onKeyUp,\n    },\n    ref as ((el: HTMLElement) => void) | undefined,\n  );\n\n  // Filter DOM props\n  const getDomProps = () =>\n    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });\n\n  // Build input props\n  const getInputProps = (): JSX.InputHTMLAttributes<T> => {\n    const p = getProps();\n    const isInvalid = p.isInvalid ?? false;\n    const isTextarea = p.inputElementType === \"textarea\";\n    const validationBehavior = p.validationBehavior ?? \"native\";\n\n    return mergeProps(\n      getDomProps(),\n      {\n        disabled: p.isDisabled,\n        readOnly: p.isReadOnly,\n        required: validationBehavior === \"native\" && p.isRequired,\n        \"aria-required\": (validationBehavior === \"aria\" && p.isRequired) || undefined,\n        \"aria-invalid\": isInvalid || undefined,\n        value: p.value ?? p.defaultValue ?? \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          if (target.value !== lastInputValue) {\n            p.onChange?.(target.value);\n          }\n        },\n        // Don't include type and pattern for textarea elements\n        type: isTextarea ? undefined : (p.type ?? \"text\"),\n        inputMode: p.inputMode,\n        enterKeyHint: p.enterKeyHint,\n        name: p.name,\n        form: p.form,\n        pattern: isTextarea ? undefined : p.pattern,\n        maxLength: p.maxLength,\n        minLength: p.minLength,\n        placeholder: p.placeholder,\n        autoComplete: p.autoComplete,\n        autoCorrect: p.autoCorrect,\n        autoCapitalize: p.autoCapitalize,\n        spellCheck: p.spellCheck,\n\n        // Clipboard events\n        onCopy: p.onCopy,\n        onCut: p.onCut,\n        onPaste: p.onPaste,\n\n        // Composition events\n        onCompositionStart: p.onCompositionStart,\n        onCompositionEnd: p.onCompositionEnd,\n        onCompositionUpdate: p.onCompositionUpdate,\n\n        // Selection events\n        onSelect: p.onSelect,\n\n        // Input events\n        onBeforeInput: p.onBeforeInput,\n        onInput: (e: InputEvent) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          const nextValue = target.value;\n          p.onInput?.(\n            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],\n          );\n          lastInputValue = nextValue;\n          p.onChange?.(nextValue);\n        },\n      },\n      focusableProps as Record<string, unknown>,\n      fieldProps as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<T>;\n  };\n\n  const getIsInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get inputProps() {\n      return getInputProps();\n    },\n    get descriptionProps() {\n      return descriptionProps;\n    },\n    get errorMessageProps() {\n      return errorMessageProps;\n    },\n    get isInvalid() {\n      return getIsInvalid();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA4FA,SAAgB,gBAEd,OAA0C,KAAyC;CACnF,MAAM,iBAAiB,OAAO,KAAK;CACnC,IAAI;CAEJ,MAAM,0BACJ,OACA,YAEA,IAAI,MAAM,OAAO,EACf,IAAI,QAAQ,UAAU,UAAU;EAC9B,IAAI,aAAa,YAAY,aAAa,iBACxC,OAAO;EAGT,MAAM,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;EACpD,OAAO,OAAO,UAAU,aAAa,MAAM,KAAK,MAAM,IAAI;CAC5D,EACF,CAAC;CAGH,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,YAAY,KAAK;CAGzF,MAAM,EAAE,mBAAmB,gBACzB;EACE,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,sBAAsB;GACxB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,SAAS,SAAS,CAAC,CAAC;EACpB,QAAQ,SAAS,CAAC,CAAC;EACnB,eAAe,SAAS,CAAC,CAAC;EAC1B,WAAW,SAAS,CAAC,CAAC;EACtB,SAAS,SAAS,CAAC,CAAC;CACtB,GACA,GACF;CAGA,MAAM,oBACJ,eAAe,SAAS,GAA8B,EAAE,WAAW,KAAK,CAAC;CAG3E,MAAM,sBAAkD;EACtD,MAAM,IAAI,SAAS;EACnB,MAAM,YAAY,EAAE,aAAa;EACjC,MAAM,aAAa,EAAE,qBAAqB;EAC1C,MAAM,qBAAqB,EAAE,sBAAsB;EAEnD,OAAO,WACL,YAAY,GACZ;GACE,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,UAAU,uBAAuB,YAAY,EAAE;GAC/C,iBAAkB,uBAAuB,UAAU,EAAE,cAAe,KAAA;GACpE,gBAAgB,aAAa,KAAA;GAC7B,OAAO,EAAE,SAAS,EAAE,gBAAgB;GACpC,WAAW,MAAa;IACtB,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,UAAU,gBACnB,EAAE,WAAW,OAAO,KAAK;GAE7B;GAEA,MAAM,aAAa,KAAA,IAAa,EAAE,QAAQ;GAC1C,WAAW,EAAE;GACb,cAAc,EAAE;GAChB,MAAM,EAAE;GACR,MAAM,EAAE;GACR,SAAS,aAAa,KAAA,IAAY,EAAE;GACpC,WAAW,EAAE;GACb,WAAW,EAAE;GACb,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,YAAY,EAAE;GAGd,QAAQ,EAAE;GACV,OAAO,EAAE;GACT,SAAS,EAAE;GAGX,oBAAoB,EAAE;GACtB,kBAAkB,EAAE;GACpB,qBAAqB,EAAE;GAGvB,UAAU,EAAE;GAGZ,eAAe,EAAE;GACjB,UAAU,MAAkB;IAC1B,MAAM,SAAS,EAAE;IACjB,MAAM,YAAY,OAAO;IACzB,EAAE,UACA,uBAAuB,GAAG,MAAM,CAClC;IACA,iBAAiB;IACjB,EAAE,WAAW,SAAS;GACxB;EACF,GACA,gBACA,UACF;CACF;CAEA,MAAM,qBAAqB;EACzB,OAAO,SAAS,CAAC,CAAC,aAAa;CACjC;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO;EACT;EACA,IAAI,oBAAoB;GACtB,OAAO;EACT;EACA,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;CACF;AACF"}

package/dist/_chunk/textfield.jsx

@@ -1,5 +1,6 @@
-import { i as access, o as mergeProps } from "./env.jsx";
+import { i as mergeProps } from "./env.jsx";
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
+import { t as access } from "./reactivity.jsx";
 import { n as createFocusable } from "./createFocusable.jsx";
 import { t as createField } from "./createField.jsx";
 //#region src/textfield/createTextField.ts

package/dist/_chunk/textfield.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.jsx","names":[],"sources":["../../src/textfield/createTextField.ts"],"sourcesContent":["/**\n * TextField hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a text field.\n *\n * This is a 1:1 port of @react-aria/textfield's useTextField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField, type AriaFieldProps, type FieldAria } from \"../label\";\nimport { createFocusable, type FocusableDOMProps, type FocusableProps } from \"../interactions\";\nimport { mergeProps, filterDOMProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {\n  /** The current value (controlled). */\n  value?: string;\n  /** The default value (uncontrolled). */\n  defaultValue?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is read only. */\n  isReadOnly?: boolean;\n  /** Whether the input is required. */\n  isRequired?: boolean;\n  /** Whether to use native HTML form validation or ARIA validation semantics. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The type of input to render. */\n  type?: \"text\" | \"search\" | \"url\" | \"tel\" | \"email\" | \"password\" | string;\n  /** The input mode hint for virtual keyboards. */\n  inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n  /** Hint for the enter key action on virtual keyboards. */\n  enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\";\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the input with a form element by id. */\n  form?: string;\n  /** Regex pattern to validate the input value. */\n  pattern?: string;\n  /** The maximum number of characters supported by the input. */\n  maxLength?: number;\n  /** The minimum number of characters required by the input. */\n  minLength?: number;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Whether to enable auto complete. */\n  autoComplete?: string;\n  /** Whether to enable auto correct. */\n  autoCorrect?: string;\n  /** Whether to enable spell check. */\n  spellCheck?: \"true\" | \"false\";\n  /** Controls whether and how text input is automatically capitalized. */\n  autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\";\n  /** The element type to use for the input. Defaults to 'input'. */\n  inputElementType?: \"input\" | \"textarea\";\n\n  // Clipboard events\n  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n\n  // Composition events\n  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n\n  // Selection events\n  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;\n\n  // Input events\n  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n}\n\nexport interface TextFieldAria<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends Omit<FieldAria, \"fieldProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<T>;\n  /** Whether the text field is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * Text fields allow users to input text with a keyboard.\n *\n * @param props - Props for the text field.\n * @param ref - Optional ref callback for the input element.\n */\nexport function createTextField<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {\n  const getProps = () => access(props);\n  let lastInputValue: string | undefined;\n\n  const eventWithCurrentTarget = (\n    event: InputEvent,\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) =>\n    new Proxy(event, {\n      get(target, property, receiver) {\n        if (property === \"target\" || property === \"currentTarget\") {\n          return element;\n        }\n\n        const value = Reflect.get(target, property, receiver);\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n\n  // Get field accessibility props (label, description, error message)\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);\n\n  // Get focusable props\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return getProps().isDisabled;\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n      onFocus: getProps().onFocus,\n      onBlur: getProps().onBlur,\n      onFocusChange: getProps().onFocusChange,\n      onKeyDown: getProps().onKeyDown,\n      onKeyUp: getProps().onKeyUp,\n    },\n    ref as ((el: HTMLElement) => void) | undefined,\n  );\n\n  // Filter DOM props\n  const getDomProps = () =>\n    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });\n\n  // Build input props\n  const getInputProps = (): JSX.InputHTMLAttributes<T> => {\n    const p = getProps();\n    const isInvalid = p.isInvalid ?? false;\n    const isTextarea = p.inputElementType === \"textarea\";\n    const validationBehavior = p.validationBehavior ?? \"native\";\n\n    return mergeProps(\n      getDomProps(),\n      {\n        disabled: p.isDisabled,\n        readOnly: p.isReadOnly,\n        required: validationBehavior === \"native\" && p.isRequired,\n        \"aria-required\": (validationBehavior === \"aria\" && p.isRequired) || undefined,\n        \"aria-invalid\": isInvalid || undefined,\n        value: p.value ?? p.defaultValue ?? \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          if (target.value !== lastInputValue) {\n            p.onChange?.(target.value);\n          }\n        },\n        // Don't include type and pattern for textarea elements\n        type: isTextarea ? undefined : (p.type ?? \"text\"),\n        inputMode: p.inputMode,\n        enterKeyHint: p.enterKeyHint,\n        name: p.name,\n        form: p.form,\n        pattern: isTextarea ? undefined : p.pattern,\n        maxLength: p.maxLength,\n        minLength: p.minLength,\n        placeholder: p.placeholder,\n        autoComplete: p.autoComplete,\n        autoCorrect: p.autoCorrect,\n        autoCapitalize: p.autoCapitalize,\n        spellCheck: p.spellCheck,\n\n        // Clipboard events\n        onCopy: p.onCopy,\n        onCut: p.onCut,\n        onPaste: p.onPaste,\n\n        // Composition events\n        onCompositionStart: p.onCompositionStart,\n        onCompositionEnd: p.onCompositionEnd,\n        onCompositionUpdate: p.onCompositionUpdate,\n\n        // Selection events\n        onSelect: p.onSelect,\n\n        // Input events\n        onBeforeInput: p.onBeforeInput,\n        onInput: (e: InputEvent) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          const nextValue = target.value;\n          p.onInput?.(\n            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],\n          );\n          lastInputValue = nextValue;\n          p.onChange?.(nextValue);\n        },\n      },\n      focusableProps as Record<string, unknown>,\n      fieldProps as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<T>;\n  };\n\n  const getIsInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get inputProps() {\n      return getInputProps();\n    },\n    get descriptionProps() {\n      return descriptionProps;\n    },\n    get errorMessageProps() {\n      return errorMessageProps;\n    },\n    get isInvalid() {\n      return getIsInvalid();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;AA4FA,SAAgB,gBAEd,OAA0C,KAAyC;CACnF,MAAM,iBAAiB,OAAO,KAAK;CACnC,IAAI;CAEJ,MAAM,0BACJ,OACA,YAEA,IAAI,MAAM,OAAO,EACf,IAAI,QAAQ,UAAU,UAAU;EAC9B,IAAI,aAAa,YAAY,aAAa,iBACxC,OAAO;EAGT,MAAM,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;EACpD,OAAO,OAAO,UAAU,aAAa,MAAM,KAAK,MAAM,IAAI;CAC5D,EACF,CAAC;CAGH,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,YAAY,KAAK;CAGzF,MAAM,EAAE,mBAAmB,gBACzB;EACE,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,sBAAsB;GACxB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,SAAS,SAAS,CAAC,CAAC;EACpB,QAAQ,SAAS,CAAC,CAAC;EACnB,eAAe,SAAS,CAAC,CAAC;EAC1B,WAAW,SAAS,CAAC,CAAC;EACtB,SAAS,SAAS,CAAC,CAAC;CACtB,GACA,GACF;CAGA,MAAM,oBACJ,eAAe,SAAS,GAA8B,EAAE,WAAW,KAAK,CAAC;CAG3E,MAAM,sBAAkD;EACtD,MAAM,IAAI,SAAS;EACnB,MAAM,YAAY,EAAE,aAAa;EACjC,MAAM,aAAa,EAAE,qBAAqB;EAC1C,MAAM,qBAAqB,EAAE,sBAAsB;EAEnD,OAAO,WACL,YAAY,GACZ;GACE,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,UAAU,uBAAuB,YAAY,EAAE;GAC/C,iBAAkB,uBAAuB,UAAU,EAAE,cAAe,KAAA;GACpE,gBAAgB,aAAa,KAAA;GAC7B,OAAO,EAAE,SAAS,EAAE,gBAAgB;GACpC,WAAW,MAAa;IACtB,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,UAAU,gBACnB,EAAE,WAAW,OAAO,KAAK;GAE7B;GAEA,MAAM,aAAa,KAAA,IAAa,EAAE,QAAQ;GAC1C,WAAW,EAAE;GACb,cAAc,EAAE;GAChB,MAAM,EAAE;GACR,MAAM,EAAE;GACR,SAAS,aAAa,KAAA,IAAY,EAAE;GACpC,WAAW,EAAE;GACb,WAAW,EAAE;GACb,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,YAAY,EAAE;GAGd,QAAQ,EAAE;GACV,OAAO,EAAE;GACT,SAAS,EAAE;GAGX,oBAAoB,EAAE;GACtB,kBAAkB,EAAE;GACpB,qBAAqB,EAAE;GAGvB,UAAU,EAAE;GAGZ,eAAe,EAAE;GACjB,UAAU,MAAkB;IAC1B,MAAM,SAAS,EAAE;IACjB,MAAM,YAAY,OAAO;IACzB,EAAE,UACA,uBAAuB,GAAG,MAAM,CAClC;IACA,iBAAiB;IACjB,EAAE,WAAW,SAAS;GACxB;EACF,GACA,gBACA,UACF;CACF;CAEA,MAAM,qBAAqB;EACzB,OAAO,SAAS,CAAC,CAAC,aAAa;CACjC;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO;EACT;EACA,IAAI,oBAAoB;GACtB,OAAO;EACT;EACA,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;CACF;AACF"}
+{"version":3,"file":"textfield.jsx","names":[],"sources":["../../src/textfield/createTextField.ts"],"sourcesContent":["/**\n * TextField hook for Solidaria\n *\n * Provides the behavior and accessibility implementation for a text field.\n *\n * This is a 1:1 port of @react-aria/textfield's useTextField hook.\n */\n\nimport { JSX } from \"solid-js\";\nimport { createField, type AriaFieldProps, type FieldAria } from \"../label\";\nimport { createFocusable, type FocusableDOMProps, type FocusableProps } from \"../interactions\";\nimport { mergeProps, filterDOMProps } from \"../utils\";\nimport { type MaybeAccessor, access } from \"../utils/reactivity\";\n\nexport interface AriaTextFieldProps extends AriaFieldProps, FocusableProps, FocusableDOMProps {\n  /** The current value (controlled). */\n  value?: string;\n  /** The default value (uncontrolled). */\n  defaultValue?: string;\n  /** Handler that is called when the value changes. */\n  onChange?: (value: string) => void;\n  /** Whether the input is disabled. */\n  isDisabled?: boolean;\n  /** Whether the input is read only. */\n  isReadOnly?: boolean;\n  /** Whether the input is required. */\n  isRequired?: boolean;\n  /** Whether to use native HTML form validation or ARIA validation semantics. */\n  validationBehavior?: \"aria\" | \"native\";\n  /** The type of input to render. */\n  type?: \"text\" | \"search\" | \"url\" | \"tel\" | \"email\" | \"password\" | string;\n  /** The input mode hint for virtual keyboards. */\n  inputMode?: \"none\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | \"search\";\n  /** Hint for the enter key action on virtual keyboards. */\n  enterKeyHint?: \"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\";\n  /** The name of the input element, used when submitting an HTML form. */\n  name?: string;\n  /** Associates the input with a form element by id. */\n  form?: string;\n  /** Regex pattern to validate the input value. */\n  pattern?: string;\n  /** The maximum number of characters supported by the input. */\n  maxLength?: number;\n  /** The minimum number of characters required by the input. */\n  minLength?: number;\n  /** Placeholder text for the input. */\n  placeholder?: string;\n  /** Whether to enable auto complete. */\n  autoComplete?: string;\n  /** Whether to enable auto correct. */\n  autoCorrect?: string;\n  /** Whether to enable spell check. */\n  spellCheck?: \"true\" | \"false\";\n  /** Controls whether and how text input is automatically capitalized. */\n  autoCapitalize?: \"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\";\n  /** The element type to use for the input. Defaults to 'input'. */\n  inputElementType?: \"input\" | \"textarea\";\n\n  // Clipboard events\n  onCopy?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onCut?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n  onPaste?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, ClipboardEvent>;\n\n  // Composition events\n  onCompositionStart?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionEnd?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n  onCompositionUpdate?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, CompositionEvent>;\n\n  // Selection events\n  onSelect?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, Event>;\n\n  // Input events\n  onBeforeInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n  onInput?: JSX.EventHandler<HTMLInputElement | HTMLTextAreaElement, InputEvent>;\n}\n\nexport interface TextFieldAria<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n> extends Omit<FieldAria, \"fieldProps\"> {\n  /** Props for the input element. */\n  inputProps: JSX.InputHTMLAttributes<T>;\n  /** Whether the text field is invalid. */\n  isInvalid: boolean;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a text field.\n * Text fields allow users to input text with a keyboard.\n *\n * @param props - Props for the text field.\n * @param ref - Optional ref callback for the input element.\n */\nexport function createTextField<\n  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,\n>(props: MaybeAccessor<AriaTextFieldProps>, ref?: (el: T) => void): TextFieldAria<T> {\n  const getProps = () => access(props);\n  let lastInputValue: string | undefined;\n\n  const eventWithCurrentTarget = (\n    event: InputEvent,\n    element: HTMLInputElement | HTMLTextAreaElement,\n  ) =>\n    new Proxy(event, {\n      get(target, property, receiver) {\n        if (property === \"target\" || property === \"currentTarget\") {\n          return element;\n        }\n\n        const value = Reflect.get(target, property, receiver);\n        return typeof value === \"function\" ? value.bind(target) : value;\n      },\n    });\n\n  // Get field accessibility props (label, description, error message)\n  const { labelProps, fieldProps, descriptionProps, errorMessageProps } = createField(props);\n\n  // Get focusable props\n  const { focusableProps } = createFocusable(\n    {\n      get isDisabled() {\n        return getProps().isDisabled;\n      },\n      get autoFocus() {\n        return getProps().autoFocus;\n      },\n      get excludeFromTabOrder() {\n        return getProps().excludeFromTabOrder;\n      },\n      onFocus: getProps().onFocus,\n      onBlur: getProps().onBlur,\n      onFocusChange: getProps().onFocusChange,\n      onKeyDown: getProps().onKeyDown,\n      onKeyUp: getProps().onKeyUp,\n    },\n    ref as ((el: HTMLElement) => void) | undefined,\n  );\n\n  // Filter DOM props\n  const getDomProps = () =>\n    filterDOMProps(getProps() as Record<string, unknown>, { labelable: true });\n\n  // Build input props\n  const getInputProps = (): JSX.InputHTMLAttributes<T> => {\n    const p = getProps();\n    const isInvalid = p.isInvalid ?? false;\n    const isTextarea = p.inputElementType === \"textarea\";\n    const validationBehavior = p.validationBehavior ?? \"native\";\n\n    return mergeProps(\n      getDomProps(),\n      {\n        disabled: p.isDisabled,\n        readOnly: p.isReadOnly,\n        required: validationBehavior === \"native\" && p.isRequired,\n        \"aria-required\": (validationBehavior === \"aria\" && p.isRequired) || undefined,\n        \"aria-invalid\": isInvalid || undefined,\n        value: p.value ?? p.defaultValue ?? \"\",\n        onChange: (e: Event) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          if (target.value !== lastInputValue) {\n            p.onChange?.(target.value);\n          }\n        },\n        // Don't include type and pattern for textarea elements\n        type: isTextarea ? undefined : (p.type ?? \"text\"),\n        inputMode: p.inputMode,\n        enterKeyHint: p.enterKeyHint,\n        name: p.name,\n        form: p.form,\n        pattern: isTextarea ? undefined : p.pattern,\n        maxLength: p.maxLength,\n        minLength: p.minLength,\n        placeholder: p.placeholder,\n        autoComplete: p.autoComplete,\n        autoCorrect: p.autoCorrect,\n        autoCapitalize: p.autoCapitalize,\n        spellCheck: p.spellCheck,\n\n        // Clipboard events\n        onCopy: p.onCopy,\n        onCut: p.onCut,\n        onPaste: p.onPaste,\n\n        // Composition events\n        onCompositionStart: p.onCompositionStart,\n        onCompositionEnd: p.onCompositionEnd,\n        onCompositionUpdate: p.onCompositionUpdate,\n\n        // Selection events\n        onSelect: p.onSelect,\n\n        // Input events\n        onBeforeInput: p.onBeforeInput,\n        onInput: (e: InputEvent) => {\n          const target = e.target as HTMLInputElement | HTMLTextAreaElement;\n          const nextValue = target.value;\n          p.onInput?.(\n            eventWithCurrentTarget(e, target) as Parameters<NonNullable<typeof p.onInput>>[0],\n          );\n          lastInputValue = nextValue;\n          p.onChange?.(nextValue);\n        },\n      },\n      focusableProps as Record<string, unknown>,\n      fieldProps as Record<string, unknown>,\n    ) as JSX.InputHTMLAttributes<T>;\n  };\n\n  const getIsInvalid = () => {\n    return getProps().isInvalid ?? false;\n  };\n\n  return {\n    get labelProps() {\n      return labelProps;\n    },\n    get inputProps() {\n      return getInputProps();\n    },\n    get descriptionProps() {\n      return descriptionProps;\n    },\n    get errorMessageProps() {\n      return errorMessageProps;\n    },\n    get isInvalid() {\n      return getIsInvalid();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA4FA,SAAgB,gBAEd,OAA0C,KAAyC;CACnF,MAAM,iBAAiB,OAAO,KAAK;CACnC,IAAI;CAEJ,MAAM,0BACJ,OACA,YAEA,IAAI,MAAM,OAAO,EACf,IAAI,QAAQ,UAAU,UAAU;EAC9B,IAAI,aAAa,YAAY,aAAa,iBACxC,OAAO;EAGT,MAAM,QAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;EACpD,OAAO,OAAO,UAAU,aAAa,MAAM,KAAK,MAAM,IAAI;CAC5D,EACF,CAAC;CAGH,MAAM,EAAE,YAAY,YAAY,kBAAkB,sBAAsB,YAAY,KAAK;CAGzF,MAAM,EAAE,mBAAmB,gBACzB;EACE,IAAI,aAAa;GACf,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,YAAY;GACd,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,IAAI,sBAAsB;GACxB,OAAO,SAAS,CAAC,CAAC;EACpB;EACA,SAAS,SAAS,CAAC,CAAC;EACpB,QAAQ,SAAS,CAAC,CAAC;EACnB,eAAe,SAAS,CAAC,CAAC;EAC1B,WAAW,SAAS,CAAC,CAAC;EACtB,SAAS,SAAS,CAAC,CAAC;CACtB,GACA,GACF;CAGA,MAAM,oBACJ,eAAe,SAAS,GAA8B,EAAE,WAAW,KAAK,CAAC;CAG3E,MAAM,sBAAkD;EACtD,MAAM,IAAI,SAAS;EACnB,MAAM,YAAY,EAAE,aAAa;EACjC,MAAM,aAAa,EAAE,qBAAqB;EAC1C,MAAM,qBAAqB,EAAE,sBAAsB;EAEnD,OAAO,WACL,YAAY,GACZ;GACE,UAAU,EAAE;GACZ,UAAU,EAAE;GACZ,UAAU,uBAAuB,YAAY,EAAE;GAC/C,iBAAkB,uBAAuB,UAAU,EAAE,cAAe,KAAA;GACpE,gBAAgB,aAAa,KAAA;GAC7B,OAAO,EAAE,SAAS,EAAE,gBAAgB;GACpC,WAAW,MAAa;IACtB,MAAM,SAAS,EAAE;IACjB,IAAI,OAAO,UAAU,gBACnB,EAAE,WAAW,OAAO,KAAK;GAE7B;GAEA,MAAM,aAAa,KAAA,IAAa,EAAE,QAAQ;GAC1C,WAAW,EAAE;GACb,cAAc,EAAE;GAChB,MAAM,EAAE;GACR,MAAM,EAAE;GACR,SAAS,aAAa,KAAA,IAAY,EAAE;GACpC,WAAW,EAAE;GACb,WAAW,EAAE;GACb,aAAa,EAAE;GACf,cAAc,EAAE;GAChB,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,YAAY,EAAE;GAGd,QAAQ,EAAE;GACV,OAAO,EAAE;GACT,SAAS,EAAE;GAGX,oBAAoB,EAAE;GACtB,kBAAkB,EAAE;GACpB,qBAAqB,EAAE;GAGvB,UAAU,EAAE;GAGZ,eAAe,EAAE;GACjB,UAAU,MAAkB;IAC1B,MAAM,SAAS,EAAE;IACjB,MAAM,YAAY,OAAO;IACzB,EAAE,UACA,uBAAuB,GAAG,MAAM,CAClC;IACA,iBAAiB;IACjB,EAAE,WAAW,SAAS;GACxB;EACF,GACA,gBACA,UACF;CACF;CAEA,MAAM,qBAAqB;EACzB,OAAO,SAAS,CAAC,CAAC,aAAa;CACjC;CAEA,OAAO;EACL,IAAI,aAAa;GACf,OAAO;EACT;EACA,IAAI,aAAa;GACf,OAAO,cAAc;EACvB;EACA,IAAI,mBAAmB;GACrB,OAAO;EACT;EACA,IAAI,oBAAoB;GACtB,OAAO;EACT;EACA,IAAI,YAAY;GACd,OAAO,aAAa;EACtB;CACF;AACF"}

package/dist/_chunk/toolbar.js

@@ -1,6 +1,6 @@
-import { i as access } from "./env.js";
+import { t as access } from "./reactivity.js";
 import { g as isTabbable, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.js";
-import { a as useLocale } from "./createCollator.js";
+import { i as useLocale } from "./locale.js";
 import { createSignal, onCleanup, onMount } from "solid-js";
 //#region src/toolbar/createToolbar.ts
 /**
@@ -25,32 +25,6 @@ function getActiveElement(doc) {
 	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
 	return activeElement;
 }
-const TEXT_INPUT_TYPES = new Set([
-	"",
-	"text",
-	"search",
-	"url",
-	"tel",
-	"password",
-	"email",
-	"number",
-	"date",
-	"datetime-local",
-	"month",
-	"time",
-	"week"
-]);
-function isTextInputLikeElement(target) {
-	if (!(target instanceof HTMLElement)) return false;
-	if (target.isContentEditable || !!target.closest("[contenteditable=\"true\"]")) return true;
-	if (target.getAttribute("role") === "textbox") return true;
-	if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
-	if (target instanceof HTMLInputElement) {
-		const type = target.type.toLowerCase();
-		return TEXT_INPUT_TYPES.has(type);
-	}
-	return false;
-}
 function createFocusManager(ref) {
 	return {
 		focusNext(opts = {}) {
@@ -157,12 +131,6 @@ function createToolbar(props = {}) {
 		const target = e.target;
 		if (!(target instanceof Element) || !root.contains(target)) return;
 		const doc = getOwnerDocument(root);
-		if (isTextInputLikeElement(target)) switch (e.key) {
-			case "ArrowRight":
-			case "ArrowLeft":
-			case "ArrowDown":
-			case "ArrowUp": return;
-		}
 		const isRTL = locale().direction === "rtl";
 		const isHorizontal = orientation() === "horizontal";
 		let handled = false;
@@ -239,13 +207,13 @@ function createToolbar(props = {}) {
 				return isInToolbar() ? "group" : "toolbar";
 			},
 			get "aria-orientation"() {
-				return isInToolbar() ? void 0 : orientation();
+				return orientation();
 			},
 			get "aria-label"() {
 				return ariaLabel();
 			},
 			get "aria-labelledby"() {
-				return ariaLabel() ? void 0 : ariaLabelledby();
+				return ariaLabel() == null ? ariaLabelledby() : void 0;
 			},
 			ref: setRef
 		},

package/dist/_chunk/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nconst TEXT_INPUT_TYPES = new Set([\n  \"\",\n  \"text\",\n  \"search\",\n  \"url\",\n  \"tel\",\n  \"password\",\n  \"email\",\n  \"number\",\n  \"date\",\n  \"datetime-local\",\n  \"month\",\n  \"time\",\n  \"week\",\n]);\n\nfunction isTextInputLikeElement(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) {\n    return false;\n  }\n\n  if (target.isContentEditable || !!target.closest('[contenteditable=\"true\"]')) {\n    return true;\n  }\n\n  if (target.getAttribute(\"role\") === \"textbox\") {\n    return true;\n  }\n\n  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {\n    return true;\n  }\n\n  if (target instanceof HTMLInputElement) {\n    const type = target.type.toLowerCase();\n    return TEXT_INPUT_TYPES.has(type);\n  }\n\n  return false;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    // Text entry controls keep the arrow keys for caret/value navigation.\n    // Upstream useToolbar has no such guard; a text input placed inside a\n    // toolbar would otherwise lose caret movement. Kept (narrowed to arrows)\n    // as a suspected divergence pending a dedicated ActionBar/Toolbar cert.\n    if (isTextInputLikeElement(target)) {\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n        case \"ArrowUp\":\n          return;\n      }\n    }\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        return isInToolbar() ? undefined : orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Only use aria-labelledby if no aria-label is provided\n        return ariaLabel() ? undefined : ariaLabelledby();\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/toolbar.jsx

@@ -1,6 +1,6 @@
-import { i as access } from "./env.jsx";
+import { t as access } from "./reactivity.jsx";
 import { g as isTabbable, p as isFocusable, s as getOwnerDocument, t as focusSafely } from "./focus.jsx";
-import { a as useLocale } from "./createCollator.jsx";
+import { i as useLocale } from "./locale.jsx";
 import { createSignal, onCleanup, onMount } from "solid-js";
 //#region src/toolbar/createToolbar.ts
 /**
@@ -25,32 +25,6 @@ function getActiveElement(doc) {
 	while (activeElement?.shadowRoot?.activeElement) activeElement = activeElement.shadowRoot.activeElement;
 	return activeElement;
 }
-const TEXT_INPUT_TYPES = new Set([
-	"",
-	"text",
-	"search",
-	"url",
-	"tel",
-	"password",
-	"email",
-	"number",
-	"date",
-	"datetime-local",
-	"month",
-	"time",
-	"week"
-]);
-function isTextInputLikeElement(target) {
-	if (!(target instanceof HTMLElement)) return false;
-	if (target.isContentEditable || !!target.closest("[contenteditable=\"true\"]")) return true;
-	if (target.getAttribute("role") === "textbox") return true;
-	if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) return true;
-	if (target instanceof HTMLInputElement) {
-		const type = target.type.toLowerCase();
-		return TEXT_INPUT_TYPES.has(type);
-	}
-	return false;
-}
 function createFocusManager(ref) {
 	return {
 		focusNext(opts = {}) {
@@ -157,12 +131,6 @@ function createToolbar(props = {}) {
 		const target = e.target;
 		if (!(target instanceof Element) || !root.contains(target)) return;
 		const doc = getOwnerDocument(root);
-		if (isTextInputLikeElement(target)) switch (e.key) {
-			case "ArrowRight":
-			case "ArrowLeft":
-			case "ArrowDown":
-			case "ArrowUp": return;
-		}
 		const isRTL = locale().direction === "rtl";
 		const isHorizontal = orientation() === "horizontal";
 		let handled = false;
@@ -239,13 +207,13 @@ function createToolbar(props = {}) {
 				return isInToolbar() ? "group" : "toolbar";
 			},
 			get "aria-orientation"() {
-				return isInToolbar() ? void 0 : orientation();
+				return orientation();
 			},
 			get "aria-label"() {
 				return ariaLabel();
 			},
 			get "aria-labelledby"() {
-				return ariaLabel() ? void 0 : ariaLabelledby();
+				return ariaLabel() == null ? ariaLabelledby() : void 0;
 			},
 			ref: setRef
 		},

package/dist/_chunk/toolbar.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.jsx","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nconst TEXT_INPUT_TYPES = new Set([\n  \"\",\n  \"text\",\n  \"search\",\n  \"url\",\n  \"tel\",\n  \"password\",\n  \"email\",\n  \"number\",\n  \"date\",\n  \"datetime-local\",\n  \"month\",\n  \"time\",\n  \"week\",\n]);\n\nfunction isTextInputLikeElement(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) {\n    return false;\n  }\n\n  if (target.isContentEditable || !!target.closest('[contenteditable=\"true\"]')) {\n    return true;\n  }\n\n  if (target.getAttribute(\"role\") === \"textbox\") {\n    return true;\n  }\n\n  if (target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {\n    return true;\n  }\n\n  if (target instanceof HTMLInputElement) {\n    const type = target.type.toLowerCase();\n    return TEXT_INPUT_TYPES.has(type);\n  }\n\n  return false;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    // Text entry controls keep the arrow keys for caret/value navigation.\n    // Upstream useToolbar has no such guard; a text input placed inside a\n    // toolbar would otherwise lose caret movement. Kept (narrowed to arrows)\n    // as a suspected divergence pending a dedicated ActionBar/Toolbar cert.\n    if (isTextInputLikeElement(target)) {\n      switch (e.key) {\n        case \"ArrowRight\":\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n        case \"ArrowUp\":\n          return;\n      }\n    }\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        return isInToolbar() ? undefined : orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Only use aria-labelledby if no aria-label is provided\n        return ariaLabel() ? undefined : ariaLabelledby();\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"toolbar.jsx","names":[],"sources":["../../src/toolbar/createToolbar.ts"],"sourcesContent":["/**\n * createToolbar - Accessibility hook for toolbar elements\n *\n * Provides keyboard navigation between toolbar items using arrow keys.\n * Based on @react-aria/toolbar useToolbar.\n */\n\nimport { createSignal, onMount, onCleanup, type Accessor } from \"solid-js\";\nimport { type MaybeAccessor, access } from \"../utils\";\nimport { useLocale } from \"../i18n\";\nimport { getOwnerDocument, isFocusable, isTabbable } from \"../utils\";\nimport { focusSafely } from \"../utils/focus\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface AriaToolbarProps {\n  /** The orientation of the toolbar. @default 'horizontal' */\n  orientation?: MaybeAccessor<Orientation>;\n  /** An accessibility label for the toolbar. */\n  \"aria-label\"?: MaybeAccessor<string>;\n  /** Identifies the element (or elements) that labels the toolbar. */\n  \"aria-labelledby\"?: MaybeAccessor<string>;\n}\n\nexport interface ToolbarAria {\n  /** Props for the toolbar container element. */\n  toolbarProps: {\n    role: \"toolbar\" | \"group\";\n    \"aria-orientation\"?: Orientation;\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n    tabIndex?: number;\n    ref: (el: HTMLElement) => void;\n  };\n  /** The orientation of the toolbar. */\n  orientation: Accessor<Orientation>;\n}\n\ninterface FocusManagerOptions {\n  from?: Element;\n  tabbable?: boolean;\n  wrap?: boolean;\n  accept?: (node: Element) => boolean;\n}\n\ninterface FocusManager {\n  focusNext(opts?: FocusManagerOptions): HTMLElement | null;\n  focusPrevious(opts?: FocusManagerOptions): HTMLElement | null;\n  focusFirst(opts?: FocusManagerOptions): HTMLElement | null;\n  focusLast(opts?: FocusManagerOptions): HTMLElement | null;\n}\n\nfunction getFocusableElements(root: Element, tabbable = false): HTMLElement[] {\n  const elements: HTMLElement[] = [];\n  const filter = tabbable ? isTabbable : isFocusable;\n\n  // Check the root element itself\n  if (filter(root)) {\n    elements.push(root as HTMLElement);\n  }\n\n  // Check all descendants\n  const descendants = root.querySelectorAll(\"*\");\n  for (let i = 0; i < descendants.length; i++) {\n    const el = descendants[i];\n    if (filter(el)) {\n      elements.push(el as HTMLElement);\n    }\n  }\n\n  return elements;\n}\n\nfunction getActiveElement(doc: Document): Element | null {\n  let activeElement = doc.activeElement;\n  while (activeElement?.shadowRoot?.activeElement) {\n    activeElement = activeElement.shadowRoot.activeElement;\n  }\n  return activeElement;\n}\n\nfunction createFocusManager(ref: Accessor<HTMLElement | undefined>): FocusManager {\n  return {\n    focusNext(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let nextIndex = currentIndex + 1;\n\n      if (nextIndex >= elements.length) {\n        if (wrap) {\n          nextIndex = 0;\n        } else {\n          return null;\n        }\n      }\n\n      const nextElement = elements[nextIndex];\n      if (nextElement) {\n        focusSafely(nextElement);\n        return nextElement;\n      }\n\n      return null;\n    },\n\n    focusPrevious(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { from, tabbable = true, wrap = false, accept } = opts;\n      const doc = getOwnerDocument(root);\n      const current = from || getActiveElement(doc);\n\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (!current || elements.length === 0) return null;\n\n      const currentIndex = elements.indexOf(current as HTMLElement);\n      let prevIndex = currentIndex - 1;\n\n      if (prevIndex < 0) {\n        if (wrap) {\n          prevIndex = elements.length - 1;\n        } else {\n          return null;\n        }\n      }\n\n      const prevElement = elements[prevIndex];\n      if (prevElement) {\n        focusSafely(prevElement);\n        return prevElement;\n      }\n\n      return null;\n    },\n\n    focusFirst(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        focusSafely(elements[0]);\n        return elements[0];\n      }\n\n      return null;\n    },\n\n    focusLast(opts: FocusManagerOptions = {}) {\n      const root = ref();\n      if (!root) return null;\n\n      const { tabbable = true, accept } = opts;\n      let elements = getFocusableElements(root, tabbable);\n      if (accept) {\n        elements = elements.filter(accept);\n      }\n\n      if (elements.length > 0) {\n        const lastElement = elements[elements.length - 1];\n        focusSafely(lastElement);\n        return lastElement;\n      }\n\n      return null;\n    },\n  };\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toolbar.\n * A toolbar is a container for a set of interactive controls with arrow key navigation.\n *\n * @example\n * ```tsx\n * let ref;\n * const { toolbarProps } = createToolbar({ orientation: 'horizontal' });\n * return (\n *   <div {...toolbarProps}>\n *     <Button>Cut</Button>\n *     <Button>Copy</Button>\n *     <Button>Paste</Button>\n *   </div>\n * );\n * ```\n */\nexport function createToolbar(props: AriaToolbarProps = {}): ToolbarAria {\n  let toolbarRef: HTMLElement | undefined;\n  const [isInToolbar, setIsInToolbar] = createSignal(false);\n  let lastFocusedElement: Element | null = null;\n\n  const locale = useLocale();\n  const orientation = () => access(props.orientation) ?? \"horizontal\";\n  const ariaLabel = () => access(props[\"aria-label\"]);\n  const ariaLabelledby = () => access(props[\"aria-labelledby\"]);\n\n  const focusManager = createFocusManager(() => toolbarRef);\n\n  // Check if this toolbar is nested inside another toolbar\n  onMount(() => {\n    if (toolbarRef) {\n      const parentToolbar = toolbarRef.parentElement?.closest('[role=\"toolbar\"]');\n      setIsInToolbar(!!parentToolbar);\n    }\n  });\n\n  // Keyboard event handler\n  const onKeyDown = (e: KeyboardEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n\n    // Don't handle if nested toolbar (parent handles navigation)\n    if (isInToolbar()) return;\n\n    const target = e.target;\n    if (!(target instanceof Element) || !root.contains(target)) {\n      return;\n    }\n\n    const doc = getOwnerDocument(root);\n\n    const dir = locale().direction;\n    const isRTL = dir === \"rtl\";\n    const isHorizontal = orientation() === \"horizontal\";\n\n    let handled = false;\n\n    switch (e.key) {\n      case \"ArrowRight\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusPrevious({ tabbable: true });\n          } else {\n            focusManager.focusNext({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowLeft\":\n        if (isHorizontal) {\n          if (isRTL) {\n            focusManager.focusNext({ tabbable: true });\n          } else {\n            focusManager.focusPrevious({ tabbable: true });\n          }\n          handled = true;\n        }\n        break;\n      case \"ArrowDown\":\n        if (!isHorizontal) {\n          focusManager.focusNext({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"ArrowUp\":\n        if (!isHorizontal) {\n          focusManager.focusPrevious({ tabbable: true });\n          handled = true;\n        }\n        break;\n      case \"Tab\":\n        // Move focus to the first/last child so the browser's own Tab handling\n        // then carries focus OUT of the whole toolbar. Faithful to upstream\n        // useToolbar: there is no roving tabindex — every item stays tabbable,\n        // so a bare Tab would otherwise step to the next item instead of leaving.\n        lastFocusedElement = getActiveElement(doc);\n        if (e.shiftKey) {\n          focusManager.focusFirst({ tabbable: true });\n        } else {\n          focusManager.focusLast({ tabbable: true });\n        }\n        return;\n    }\n\n    if (handled) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n  };\n\n  // Record the last focused child when focus moves out of the toolbar.\n  const onBlur = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    if (!(relatedTarget && root.contains(relatedTarget)) && !lastFocusedElement) {\n      lastFocusedElement = e.target as Element;\n    }\n  };\n\n  // Restore focus to the last focused child when focus returns into the toolbar.\n  // If that element was removed, focus() is a no-op and the browser lands on the\n  // first/last child per direction — matching upstream useToolbar.\n  const onFocus = (e: FocusEvent) => {\n    const root = toolbarRef;\n    if (!root) return;\n    if (isInToolbar()) return;\n\n    const relatedTarget = e.relatedTarget as Node | null;\n    const target = e.target;\n    if (\n      lastFocusedElement &&\n      !(relatedTarget && root.contains(relatedTarget)) &&\n      target instanceof Node &&\n      root.contains(target)\n    ) {\n      focusSafely(lastFocusedElement as HTMLElement);\n      lastFocusedElement = null;\n    }\n  };\n\n  // Set up capture event listeners\n  const setRef = (el: HTMLElement) => {\n    toolbarRef = el;\n\n    // Use capture phase so container handlers run before the focused child's.\n    el.addEventListener(\"keydown\", onKeyDown, true);\n    el.addEventListener(\"focus\", onFocus, true);\n    el.addEventListener(\"blur\", onBlur, true);\n\n    onCleanup(() => {\n      el.removeEventListener(\"keydown\", onKeyDown, true);\n      el.removeEventListener(\"focus\", onFocus, true);\n      el.removeEventListener(\"blur\", onBlur, true);\n    });\n  };\n\n  return {\n    toolbarProps: {\n      get role() {\n        return isInToolbar() ? \"group\" : \"toolbar\";\n      },\n      get \"aria-orientation\"() {\n        // Upstream useToolbar emits aria-orientation unconditionally, on the\n        // nested role=\"group\" too — not only on the root role=\"toolbar\".\n        return orientation();\n      },\n      get \"aria-label\"() {\n        return ariaLabel();\n      },\n      get \"aria-labelledby\"() {\n        // Mirror useToolbar: `aria-label == null ? aria-labelledby : undefined`.\n        // An explicit empty-string aria-label still suppresses labelledby.\n        return ariaLabel() == null ? ariaLabelledby() : undefined;\n      },\n      ref: setRef,\n    },\n    orientation,\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/tooltip.js

@@ -1,4 +1,4 @@
-import { o as mergeProps } from "./env.js";
+import { i as mergeProps$1 } from "./env.js";
 import { t as filterDOMProps } from "./filterDOMProps.js";
 import { n as createFocusable } from "./createFocusable.js";
 import { t as createHover } from "./createHover.js";
@@ -34,7 +34,7 @@ function createTooltip(props = {}, state) {
 		onHoverStart: () => state?.open(true),
 		onHoverEnd: () => state?.close()
 	});
-	return { tooltipProps: mergeProps(domProps, hoverProps, { role: "tooltip" }) };
+	return { tooltipProps: mergeProps$1(domProps, hoverProps, { role: "tooltip" }) };
 }
 //#endregion
 //#region src/tooltip/createTooltipTrigger.ts