@proyecto-viviana/solidaria 0.2.8 → 0.3.0

package/src/tooltip/createTooltip.ts

@@ -6,24 +6,20 @@
  * Port of @react-aria/tooltip useTooltip.
  */
 
-import { type JSX } from 'solid-js';
-import { type TooltipTriggerState } from '@proyecto-viviana/solid-stately';
-import { createHover } from '../interactions/createHover';
-import { filterDOMProps, mergeProps } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX } from "solid-js";
+import { type TooltipTriggerState } from "@proyecto-viviana/solid-stately";
+import { createHover } from "../interactions/createHover";
+import { filterDOMProps, mergeProps } from "../utils";
 
 export interface TooltipProps {
   /** Whether the tooltip is disabled. */
   isDisabled?: boolean;
   /** Custom aria-label for the tooltip. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of an element that labels the tooltip. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of an element that describes the tooltip. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
 export interface TooltipAria {
@@ -31,10 +27,6 @@ export interface TooltipAria {
   tooltipProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a Tooltip component.
  *
@@ -58,10 +50,7 @@ export interface TooltipAria {
  * }
  * ```
  */
-export function createTooltip(
-  props: TooltipProps = {},
-  state?: TooltipTriggerState
-): TooltipAria {
+export function createTooltip(props: TooltipProps = {}, state?: TooltipTriggerState): TooltipAria {
   const domProps = filterDOMProps(props, { labelable: true });
 
   const { hoverProps } = createHover({
@@ -70,10 +59,8 @@ export function createTooltip(
   });
 
   return {
-    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(
-      domProps,
-      hoverProps,
-      { role: 'tooltip' }
-    ),
+    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(domProps, hoverProps, {
+      role: "tooltip",
+    }),
   };
 }

package/src/tooltip/createTooltipTrigger.ts

@@ -7,66 +7,71 @@
  * Port of @react-aria/tooltip useTooltipTrigger.
  */
 
-import { type JSX, createEffect, onCleanup } from 'solid-js';
-import { type TooltipTriggerState } from '@proyecto-viviana/solid-stately';
-import { createHover } from '../interactions/createHover';
-import { createFocusable } from '../interactions/createFocusable';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX, createEffect, onCleanup } from "solid-js";
+import { type TooltipTriggerState } from "@proyecto-viviana/solid-stately";
+import { createHover } from "../interactions/createHover";
+import { createFocusable } from "../interactions/createFocusable";
+import { createId } from "../ssr";
 
 export interface TooltipTriggerProps {
   /** Whether the tooltip should be disabled. */
   isDisabled?: boolean;
   /**
    * The trigger mechanism for the tooltip.
-   * @default 'focus'
+   * @default 'hover'
    */
-  trigger?: 'focus';
+  trigger?: "focus" | "hover";
   /**
    * Whether the tooltip should close when the trigger is pressed.
    * @default true
    */
   shouldCloseOnPress?: boolean;
+  /**
+   * ID of the tooltip element.
+   * @internal Used by component wrappers to merge explicit tooltip ids with trigger aria-describedby.
+   */
+  tooltipId?: string;
 }
 
 export interface TooltipTriggerAria {
   /** Props to spread on the trigger element. */
   triggerProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props to spread on the tooltip element (id for accessibility). */
-  tooltipProps: { id: string };
+  tooltipProps: { readonly id: string };
 }
 
-// ============================================
-// GLOBAL STATE
-// ============================================
-
-type Modality = 'keyboard' | 'pointer' | 'virtual';
+type Modality = "keyboard" | "pointer" | "virtual";
 let currentModality: Modality | null = null;
 
 // Track interaction modality (pointer vs keyboard)
-if (typeof document !== 'undefined') {
-  document.addEventListener('keydown', () => {
-    currentModality = 'keyboard';
-  }, true);
-  document.addEventListener('pointerdown', () => {
-    currentModality = 'pointer';
-  }, true);
-  document.addEventListener('pointermove', () => {
-    currentModality = 'pointer';
-  }, true);
+if (typeof document !== "undefined") {
+  document.addEventListener(
+    "keydown",
+    () => {
+      currentModality = "keyboard";
+    },
+    true,
+  );
+  document.addEventListener(
+    "pointerdown",
+    () => {
+      currentModality = "pointer";
+    },
+    true,
+  );
+  document.addEventListener(
+    "pointermove",
+    () => {
+      currentModality = "pointer";
+    },
+    true,
+  );
 }
 
 function isFocusVisible(): boolean {
-  return currentModality === 'keyboard';
+  return currentModality === "keyboard";
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a tooltip trigger.
  *
@@ -100,20 +105,21 @@ function isFocusVisible(): boolean {
 export function createTooltipTrigger(
   props: TooltipTriggerProps,
   state: TooltipTriggerState,
-  ref: () => HTMLElement | null | undefined
+  ref: () => HTMLElement | null | undefined,
 ): TooltipTriggerAria {
   const isDisabled = () => props.isDisabled ?? false;
-  const trigger = () => props.trigger;
+  const trigger = () => props.trigger ?? "hover";
   const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;
 
-  const tooltipId = createId();
+  const generatedTooltipId = createId();
+  const tooltipId = () => props.tooltipId ?? generatedTooltipId;
 
   // Track hover and focus state
   let isHovered = false;
   let isFocused = false;
 
   const handleShow = () => {
-    if (isHovered || isFocused) {
+    if (!isDisabled() && (isHovered || isFocused)) {
       state.open(isFocused);
     }
   };
@@ -131,21 +137,21 @@ export function createTooltipTrigger(
     const onKeyDown = (e: KeyboardEvent) => {
       const element = ref();
       if (element) {
-        if (e.key === 'Escape') {
+        if (e.key === "Escape") {
           e.stopPropagation();
           state.close(true);
         }
       }
     };
 
-    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener("keydown", onKeyDown, true);
     onCleanup(() => {
-      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
     });
   });
 
   const onHoverStart = () => {
-    if (trigger() === 'focus') {
+    if (isDisabled() || trigger() === "focus") {
       return;
     }
     // Hover events (onPointerEnter) only fire from pointer interactions,
@@ -155,7 +161,7 @@ export function createTooltipTrigger(
   };
 
   const onHoverEnd = () => {
-    if (trigger() === 'focus') {
+    if (isDisabled() || trigger() === "focus") {
       return;
     }
     isFocused = false;
@@ -164,7 +170,7 @@ export function createTooltipTrigger(
   };
 
   const closeOnPress = () => {
-    if (!shouldCloseOnPress()) {
+    if (isDisabled() || !shouldCloseOnPress()) {
       return;
     }
     isFocused = false;
@@ -173,13 +179,17 @@ export function createTooltipTrigger(
   };
 
   const onKeyDownPress = (event: KeyboardEvent) => {
-    if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") {
       return;
     }
     closeOnPress();
   };
 
   const onFocus = () => {
+    if (isDisabled()) {
+      return;
+    }
+
     const visible = isFocusVisible();
     if (visible) {
       isFocused = true;
@@ -193,14 +203,14 @@ export function createTooltipTrigger(
     handleHide(true);
   };
 
-  const { hoverProps } = createHover({
+  const { hoverProps } = createHover(() => ({
     isDisabled: isDisabled(),
     onHoverStart,
     onHoverEnd,
-  });
+  }));
 
   const { focusableProps } = createFocusable({
-    isDisabled: isDisabled(),
+    isDisabled,
     onFocus,
     onBlur,
   });
@@ -208,8 +218,8 @@ export function createTooltipTrigger(
   const triggerProps = {
     ...focusableProps,
     ...hoverProps,
-    get 'aria-describedby'() {
-      return state.isOpen() ? tooltipId : undefined;
+    get "aria-describedby"() {
+      return !isDisabled() && state.isOpen() ? tooltipId() : undefined;
     },
     onPointerDown: closeOnPress,
     onKeyDown: onKeyDownPress,
@@ -220,7 +230,9 @@ export function createTooltipTrigger(
   return {
     triggerProps: triggerProps as JSX.HTMLAttributes<HTMLElement>,
     tooltipProps: {
-      id: tooltipId,
+      get id() {
+        return tooltipId();
+      },
     },
   };
 }

package/src/tooltip/index.ts

@@ -1,6 +1,6 @@
-export { createTooltip, type TooltipProps, type TooltipAria } from './createTooltip';
+export { createTooltip, type TooltipProps, type TooltipAria } from "./createTooltip";
 export {
   createTooltipTrigger,
   type TooltipTriggerProps,
   type TooltipTriggerAria,
-} from './createTooltipTrigger';
+} from "./createTooltipTrigger";

package/src/tree/createTree.ts

@@ -3,11 +3,11 @@
  * Based on @react-aria/tree/useTree.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { TreeState, TreeCollection, Key } from '@proyecto-viviana/solid-stately';
-import type { AriaTreeProps, TreeAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { TreeState, TreeCollection, Key } from "@proyecto-viviana/solid-stately";
+import type { AriaTreeProps, TreeAria } from "./types";
 
 /**
  * Metadata stored for a tree instance.
@@ -30,7 +30,7 @@ const treeDataMap = new WeakMap<object, TreeData>();
  * Gets the tree data for a given state.
  */
 export function getTreeData<T extends object, C extends TreeCollection<T>>(
-  state: TreeState<T, C>
+  state: TreeState<T, C>,
 ): TreeData | undefined {
   return treeDataMap.get(state);
 }
@@ -41,7 +41,7 @@ export function getTreeData<T extends object, C extends TreeCollection<T>>(
 export function createTree<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeProps>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLDivElement | null>
+  _ref: Accessor<HTMLDivElement | null>,
 ): TreeAria {
   // Generate a unique ID for the tree
   const treeId = props().id ?? createId();
@@ -65,15 +65,15 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     const p = props();
     const collection = s.collection;
     const focusedKey = s.focusedKey;
-    const direction = p.direction ?? 'ltr';
+    const direction = p.direction ?? "ltr";
     // In RTL, ArrowLeft expands and ArrowRight collapses (opposite of LTR)
-    const expandKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
-    const collapseKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    const expandKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const collapseKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
 
     if (p.isDisabled) return;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      case "ArrowDown": {
         e.preventDefault();
         if (focusedKey != null) {
           const nextKey = collection.getKeyAfter(focusedKey);
@@ -88,7 +88,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'ArrowUp': {
+      case "ArrowUp": {
         e.preventDefault();
         if (focusedKey != null) {
           const prevKey = collection.getKeyBefore(focusedKey);
@@ -103,8 +103,8 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'ArrowRight':
-      case 'ArrowLeft': {
+      case "ArrowRight":
+      case "ArrowLeft": {
         e.preventDefault();
         if (focusedKey != null) {
           const node = collection.getItem(focusedKey);
@@ -131,7 +131,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
         const firstKey = collection.getFirstKey();
         if (firstKey != null) {
@@ -139,7 +139,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
         const lastKey = collection.getLastKey();
         if (lastKey != null) {
@@ -147,38 +147,38 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'a':
-      case 'A': {
-        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+      case "a":
+      case "A": {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === "multiple") {
           e.preventDefault();
           s.selectAll();
         }
         break;
       }
-      case ' ':
-      case 'Space':
-      case 'Spacebar': {
-        if (focusedKey != null && s.selectionMode !== 'none' && !s.isDisabled(focusedKey)) {
+      case " ":
+      case "Space":
+      case "Spacebar": {
+        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
           e.preventDefault();
           s.toggleSelection(focusedKey);
         }
         break;
       }
-      case 'Enter': {
+      case "Enter": {
         if (focusedKey != null && !s.isDisabled(focusedKey)) {
           e.preventDefault();
           p.onAction?.(focusedKey);
         }
         break;
       }
-      case 'Escape': {
-        if (s.selectionMode !== 'none') {
+      case "Escape": {
+        if (s.selectionMode !== "none") {
           e.preventDefault();
           s.clearSelection();
         }
         break;
       }
-      case '*': {
+      case "*": {
         // Expand all siblings at current level
         e.preventDefault();
         if (focusedKey != null) {
@@ -191,9 +191,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
               siblings = [...collection.getChildren(parentKey)].map((n) => n.key);
             } else {
               // Root level siblings
-              siblings = collection.rows
-                .filter((n) => n.level === 0)
-                .map((n) => n.key);
+              siblings = collection.rows.filter((n) => n.level === 0).map((n) => n.key);
             }
             // Expand all expandable siblings
             for (const siblingKey of siblings) {
@@ -232,13 +230,13 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'treegrid',
+      role: "treegrid",
       id: treeId,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? true : undefined,
-      'aria-disabled': p.isDisabled || undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
+      "aria-disabled": p.isDisabled || undefined,
       tabIndex: p.isDisabled ? undefined : 0,
       onKeyDown,
       onFocus,
@@ -247,7 +245,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
 
     // Add row count for virtualized trees
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLDivElement>;

package/src/tree/createTreeItem.ts

@@ -3,12 +3,12 @@
  * Based on @react-aria/tree/useTreeItem.
  */
 
-import { createMemo, createSignal, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { TreeState, TreeCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaTreeItemProps, TreeItemAria } from './types';
-import { getTreeData } from './createTree';
+import { createMemo, createSignal, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { TreeState, TreeCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaTreeItemProps, TreeItemAria } from "./types";
+import { getTreeData } from "./createTree";
 
 /**
  * Creates accessibility props for a tree item.
@@ -16,7 +16,7 @@ import { getTreeData } from './createTree';
 export function createTreeItem<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeItemProps<T>>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLDivElement | null>
+  _ref: Accessor<HTMLElement | null>,
 ): TreeItemAria {
   const [isPressed, setIsPressed] = createSignal(false);
   const rowId = createId();
@@ -31,7 +31,7 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
   const isDisabled = createMemo(() => {
     const s = state();
     const p = props();
-    return s.isDisabled(p.node.key);
+    return p.isDisabled === true || s.isDisabled(p.node.key);
   });
 
   const isFocused = createMemo(() => {
@@ -68,14 +68,14 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
     const onAction = treeData?.actions.onAction;
 
     // Handle selection
-    if (s.selectionMode !== 'none') {
-      if (e.shiftKey && s.selectionMode === 'multiple') {
+    if (s.selectionMode !== "none") {
+      if (e.shiftKey && s.selectionMode === "multiple") {
         s.extendSelection(p.node.key);
-      } else if (e.ctrlKey || e.metaKey) {
+      } else if (p.selectionBehavior === "toggle" || e.ctrlKey || e.metaKey) {
         s.toggleSelection(p.node.key);
       } else {
         // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== 'all') {
+        if (isSelected() && s.selectedKeys !== "all") {
           const selectedKeys = s.selectedKeys as Set<unknown>;
           if (selectedKeys.size === 1) {
             // Single selection, trigger action
@@ -109,7 +109,7 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
 
     if (isDisabled()) return;
 
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       // Get tree metadata for actions
       const treeData = getTreeData(s);
       const onAction = treeData?.actions.onAction;
@@ -125,9 +125,9 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
           p.onAction();
         }
       }
-    } else if (e.key === ' ' || e.key === 'Space' || e.key === 'Spacebar') {
+    } else if (e.key === " " || e.key === "Space" || e.key === "Spacebar") {
       // Space toggles selection
-      if (s.selectionMode !== 'none') {
+      if (s.selectionMode !== "none") {
         e.preventDefault();
         s.toggleSelection(p.node.key);
       }
@@ -184,15 +184,15 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
     const textValue = p.textValue ?? node.textValue;
 
     const baseProps: Record<string, unknown> = {
-      role: 'row',
+      role: "row",
       id: rowId,
-      'aria-label': textValue || undefined,
-      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
-      'aria-disabled': isDisabled() || undefined,
-      'aria-expanded': isExpandable() ? isExpanded() : undefined,
-      'aria-level': node.level + 1, // 1-based for ARIA
-      'aria-posinset': posinset,
-      'aria-setsize': setsize,
+      "aria-label": textValue || undefined,
+      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
+      "aria-disabled": isDisabled() || undefined,
+      "aria-expanded": isExpandable() ? isExpanded() : undefined,
+      "aria-level": node.level + 1, // 1-based for ARIA
+      "aria-posinset": posinset,
+      "aria-setsize": setsize,
       tabIndex: isFocused() ? 0 : -1,
       onClick,
       onKeyDown,
@@ -203,7 +203,7 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
 
     // Add aria-rowindex for virtualized trees
     if (p.isVirtualized && node.rowIndex != null) {
-      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+      baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLDivElement>;
@@ -211,7 +211,7 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
 
   const gridCellProps = createMemo(() => {
     return {
-      role: 'gridcell',
+      role: "gridcell",
     } as JSX.HTMLAttributes<HTMLDivElement>;
   });
 
@@ -234,17 +234,17 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
 
   const expandButtonProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
-      type: 'button',
+      type: "button",
       id: expandButtonId,
-      'aria-label': isExpanded() ? 'Collapse' : 'Expand',
-      'aria-labelledby': isExpandable() ? `${expandButtonId} ${rowId}` : undefined,
+      "aria-label": isExpanded() ? "Collapse" : "Expand",
+      "aria-labelledby": isExpandable() ? `${expandButtonId} ${rowId}` : undefined,
       onClick: onExpandClick,
       onPointerDown: stopPointerPropagation,
       onPointerUp: stopPointerPropagation,
       onMouseDown: stopPointerPropagation,
       onMouseUp: stopPointerPropagation,
       tabIndex: -1, // Not in tab order, use arrow keys
-      'aria-hidden': !isExpandable() ? true : undefined,
+      "aria-hidden": !isExpandable() ? true : undefined,
     };
 
     return baseProps as JSX.ButtonHTMLAttributes<HTMLButtonElement>;

package/src/tree/createTreeSelectionCheckbox.ts

@@ -3,17 +3,20 @@
  * Based on @react-aria/gridlist/useGridListSelectionCheckbox.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import type { TreeState, TreeCollection } from '@proyecto-viviana/solid-stately';
-import type { AriaTreeSelectionCheckboxProps, TreeSelectionCheckboxAria } from './types';
+import { createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import type { TreeState, TreeCollection } from "@proyecto-viviana/solid-stately";
+import type { AriaTreeSelectionCheckboxProps, TreeSelectionCheckboxAria } from "./types";
 
 /**
  * Creates accessibility props for a tree selection checkbox.
  */
-export function createTreeSelectionCheckbox<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
+export function createTreeSelectionCheckbox<
+  T extends object,
+  C extends TreeCollection<T> = TreeCollection<T>,
+>(
   props: Accessor<AriaTreeSelectionCheckboxProps>,
-  state: Accessor<TreeState<T, C>>
+  state: Accessor<TreeState<T, C>>,
 ): TreeSelectionCheckboxAria {
   const isSelected = createMemo(() => {
     const s = state();
@@ -48,8 +51,8 @@ export function createTreeSelectionCheckbox<T extends object, C extends TreeColl
 
   const checkboxProps = createMemo(() => {
     const baseProps: Record<string, unknown> = {
-      type: 'checkbox',
-      'aria-label': 'Select',
+      type: "checkbox",
+      "aria-label": "Select",
       checked: isSelected(),
       disabled: isDisabled(),
       onChange,