@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/gridlist/index.ts

@@ -5,6 +5,7 @@
 export { createGridList, getGridListData } from "./createGridList";
 export { createGridListItem } from "./createGridListItem";
 export { createGridListSelectionCheckbox } from "./createGridListSelectionCheckbox";
+export { createGridListSection } from "./createGridListSection";
 
 export type {
   AriaGridListProps,
@@ -13,4 +14,6 @@ export type {
   GridListItemAria,
   AriaGridListSelectionCheckboxProps,
   GridListSelectionCheckboxAria,
+  AriaGridListSectionProps,
+  GridListSectionAria,
 } from "./types";

package/src/gridlist/types.ts

@@ -26,8 +26,30 @@ export interface AriaGridListProps {
   shouldSelectOnPressUp?: boolean;
   /** How selection should behave when pressing an item. */
   selectionBehavior?: "replace" | "toggle";
+  /**
+   * How keyboard navigation should behave within rows.
+   *
+   * `"arrow"` treats the collection as a single tab stop and uses arrow keys to
+   * move through row children. `"tab"` lets tabbable row children participate in
+   * normal tab order and stops child key events before collection navigation.
+   *
+   * @default "arrow"
+   */
+  keyboardNavigationBehavior?: "arrow" | "tab";
   /** Whether the grid list is disabled. */
   isDisabled?: boolean;
+  /**
+   * The primary orientation of the items. In a horizontal stack the inline
+   * (left/right) axis becomes the primary keyboard-navigation axis.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * The text direction, used to flip the inline navigation axis in a horizontal
+   * orientation.
+   * @default "ltr"
+   */
+  direction?: "ltr" | "rtl";
 }
 
 /**
@@ -83,3 +105,28 @@ export interface GridListSelectionCheckboxAria {
   /** Props to spread on the checkbox input element. */
   checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
 }
+
+/**
+ * Props for the createGridListSection hook.
+ */
+export interface AriaGridListSectionProps {
+  /** ARIA label for the section, when it has no visible header. */
+  "aria-label"?: string;
+}
+
+/**
+ * Return value from createGridListSection.
+ */
+export interface GridListSectionAria {
+  /** Props to spread on the section header's outer (row) element. */
+  rowProps: { role: "row" };
+  /** Props to spread on the section header's inner (rowheader) element. */
+  rowHeaderProps: { id: string | undefined; role: "rowheader" };
+  /** Props to spread on the section's wrapper (rowgroup) element. */
+  rowGroupProps: {
+    role: "rowgroup";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+  };
+}

package/src/index.ts

@@ -124,6 +124,7 @@ export {
   // Basic utilities
   createIsSSR,
   createId,
+  createSlotId,
   canUseDOM,
   // SSR Provider
   SSRProvider,
@@ -326,6 +327,7 @@ export {
 export {
   FocusScope,
   useFocusManager,
+  createFocusManager,
   type FocusScopeProps,
   type FocusManager,
   type FocusManagerOptions,
@@ -339,6 +341,10 @@ export {
   createVirtualFocus,
   type VirtualFocusOptions,
   type VirtualFocusResult,
+  moveVirtualFocus,
+  dispatchVirtualBlur,
+  dispatchVirtualFocus,
+  getVirtuallyFocusedElement,
   createAutoFocus,
   clearAutoFocusQueue,
   getAutoFocusQueueLength,
@@ -371,6 +377,15 @@ export {
   createCalendar,
   type AriaCalendarProps,
   type CalendarAria,
+  createCalendarMonthPicker,
+  type CalendarMonthPickerProps,
+  type CalendarMonthPickerItem,
+  type CalendarMonthPickerAria,
+  createCalendarYearPicker,
+  type CalendarYearPickerProps,
+  type CalendarYearPickerFormatOptions,
+  type CalendarYearPickerItem,
+  type CalendarYearPickerAria,
   createCalendarGrid,
   type AriaCalendarGridProps,
   type CalendarGridAria,
@@ -395,9 +410,6 @@ export {
   createTimeField,
   type AriaTimeFieldProps,
   type TimeFieldAria,
-  createTimeSegment,
-  type AriaTimeSegmentProps,
-  type TimeSegmentAria,
   createDatePicker,
   createDateRangePicker,
   type AriaDatePickerProps,
@@ -456,6 +468,7 @@ export {
   createGridList,
   createGridListItem,
   createGridListSelectionCheckbox,
+  createGridListSection,
   getGridListData,
   type AriaGridListProps,
   type GridListAria,
@@ -463,6 +476,8 @@ export {
   type GridListItemAria,
   type AriaGridListSelectionCheckboxProps,
   type GridListSelectionCheckboxAria,
+  type AriaGridListSectionProps,
+  type GridListSectionAria,
 } from "./gridlist";
 
 export {
@@ -503,6 +518,10 @@ export {
   createDroppableCollection,
   createDraggableItem,
   createDroppableItem,
+  createDragSession,
+  isVirtualDragging,
+  registerDropItem,
+  dndIntlStrings,
   setGlobalDraggingCollectionRef,
   getGlobalDraggingCollectionRef,
   setGlobalDraggingKeys,
@@ -524,6 +543,8 @@ export {
   type DraggableItemAria,
   type DroppableItemOptions,
   type DroppableItemAria,
+  type DragSession,
+  type DndIntlStrings,
   CUSTOM_DRAG_TYPE,
   NATIVE_DRAG_TYPES,
   GENERIC_TYPE,
@@ -614,7 +635,34 @@ export {
 } from "./steplist";
 
 export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from "./selection";
+export { createScrollIntoViewOnFocus, type ScrollIntoViewOnFocusOptions } from "./selection";
+export {
+  createSelectableItem,
+  ITEM_ACTION_EVENT,
+  type CreateSelectableItemOptions,
+  type SelectableItemAria,
+  type LinkBehavior,
+} from "./selection";
+export {
+  createSelectableCollection,
+  createSelectableList,
+  ListKeyboardDelegate,
+  DOMLayoutDelegate,
+  getItemElement,
+  isNonContiguousSelectionModifier,
+  FOCUS_EVENT,
+  CLEAR_FOCUS_EVENT,
+  type CreateSelectableCollectionOptions,
+  type SelectableCollectionAria,
+  type CreateSelectableListOptions,
+  type SelectableListAria,
+  type ListKeyboardDelegateOptions,
+  type LayoutDelegate,
+  type Rect,
+  type Size,
+} from "./selection";
 
 export { mergeProps, filterDOMProps, focusSafely, type FilterDOMPropsOptions } from "./utils";
 export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from "./utils";
 export { createDescription, type DescriptionProps } from "./utils";
+export { createEnterAnimation, createExitAnimation, type ElementAccessor } from "./utils";

package/src/interactions/FocusableProvider.tsx

@@ -4,7 +4,7 @@
  * This is a 1-1 port of React-Aria's FocusableProvider adapted for SolidJS.
  */
 
-import { JSX, ParentComponent } from "solid-js";
+import { JSX, mergeProps, ParentComponent, splitProps } from "solid-js";
 import { FocusableContext, FocusableContextValue, FocusableProviderProps } from "./createFocusable";
 
 /**
@@ -27,14 +27,19 @@ import { FocusableContext, FocusableContextValue, FocusableProviderProps } from
 export const FocusableProvider: ParentComponent<
   FocusableProviderProps & JSX.HTMLAttributes<HTMLElement>
 > = (props) => {
-  const { children, ...otherProps } = props;
+  // Don't destructure: `const { children, ...otherProps } = props` evaluates the
+  // `children` getter immediately (2nd statement of the body), instantiating the
+  // nested subtree BEFORE this provider mounts — so a child that reads
+  // FocusableContext during its own setup would miss us. splitProps keeps
+  // otherProps a reactive proxy; children is read lazily inside the JSX, under
+  // the mounted provider. Same pattern as solidaria-components' useRenderProps.
+  const [, otherProps] = splitProps(props, ["children"]);
 
-  const context: FocusableContextValue = {
-    ...otherProps,
+  const context = mergeProps(otherProps, {
     ref: (_el: HTMLElement) => {
       // Store ref if needed by parent
     },
-  };
+  }) as FocusableContextValue;
 
-  return <FocusableContext.Provider value={context}>{children}</FocusableContext.Provider>;
+  return <FocusableContext.Provider value={context}>{props.children}</FocusableContext.Provider>;
 };

package/src/interactions/PressEvent.ts

@@ -18,6 +18,11 @@ export interface PressEventSource {
   altKey?: boolean;
   clientX?: number;
   clientY?: number;
+  /**
+   * The key that triggered the event, present on keyboard interactions
+   * (the native `KeyboardEvent` is passed through unchanged).
+   */
+  key?: string;
 }
 
 export interface IPressEvent {
@@ -39,6 +44,11 @@ export interface IPressEvent {
   x: number;
   /** Y position of the press relative to the target element. */
   y: number;
+  /**
+   * The key that triggered the press event, if it was triggered by a keyboard
+   * interaction. Useful for differentiating between Space and Enter key presses.
+   */
+  key?: string;
   /**
    * By default, press events stop propagation to parent elements.
    * Call continuePropagation() to allow the event to bubble up.
@@ -60,6 +70,7 @@ export class PressEvent implements IPressEvent {
   altKey: boolean;
   x: number;
   y: number;
+  key?: string;
 
   #shouldStopPropagation = true;
 
@@ -79,6 +90,9 @@ export class PressEvent implements IPressEvent {
     this.ctrlKey = originalEvent?.ctrlKey ?? false;
     this.metaKey = originalEvent?.metaKey ?? false;
     this.altKey = originalEvent?.altKey ?? false;
+    // Present only for keyboard interactions (the native KeyboardEvent carries
+    // `key`); pointer events leave this undefined, matching upstream.
+    this.key = originalEvent?.key;
 
     // Calculate position relative to target
     this.x = 0;

package/src/interactions/createFocus.ts

@@ -102,8 +102,10 @@ function createSyntheticBlurHandler(): (
  * Based on react-aria's useFocus but adapted for SolidJS.
  */
 export function createFocus(props: CreateFocusProps = {}): FocusResult {
-  const { isDisabled, onFocus: onFocusProp, onBlur: onBlurProp, onFocusChange } = props;
-
+  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid
+  // hook body runs once, so a destructure would freeze them at call time. The
+  // handlers read props.x live and the returned props are getters, mirroring
+  // upstream useFocus's per-render re-read. guard:idiomatic-solid.
   let cleanupRef: (() => void) | undefined;
   const syntheticBlurHandler = createSyntheticBlurHandler();
 
@@ -117,12 +119,12 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
   const onBlur: JSX.EventHandler<HTMLElement, FocusEvent> = (e) => {
     // Only handle if target is the currentTarget (not bubbled from children)
     if (e.target === e.currentTarget) {
-      if (onBlurProp) {
-        onBlurProp(e);
+      if (props.onBlur) {
+        props.onBlur(e);
       }
 
-      if (onFocusChange) {
-        onFocusChange(false);
+      if (props.onFocusChange) {
+        props.onFocusChange(false);
       }
 
       cleanupRef?.();
@@ -137,12 +139,12 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 
     if (e.target === e.currentTarget && activeElement === getEventTarget(e)) {
-      if (onFocusProp) {
-        onFocusProp(e);
+      if (props.onFocus) {
+        props.onFocus(e);
       }
 
-      if (onFocusChange) {
-        onFocusChange(true);
+      if (props.onFocusChange) {
+        props.onFocusChange(true);
       }
 
       // Set up synthetic blur handler for Firefox bug
@@ -150,19 +152,22 @@ export function createFocus(props: CreateFocusProps = {}): FocusResult {
     }
   };
 
-  // If disabled or no handlers, return empty props
-  if (isDisabled) {
-    return {
-      focusProps: {},
-    };
-  }
-
-  const hasHandlers = onFocusProp || onFocusChange || onBlurProp;
-
+  // If disabled or no handlers, return empty props. Getters re-read props so a
+  // later isDisabled/handler change is reflected (the body itself runs once).
   return {
     focusProps: {
-      onFocus: hasHandlers ? onFocus : undefined,
-      onBlur: onBlurProp || onFocusChange ? onBlur : undefined,
+      get onFocus() {
+        if (props.isDisabled) {
+          return undefined;
+        }
+        return props.onFocus || props.onFocusChange || props.onBlur ? onFocus : undefined;
+      },
+      get onBlur() {
+        if (props.isDisabled) {
+          return undefined;
+        }
+        return props.onBlur || props.onFocusChange ? onBlur : undefined;
+      },
     },
   };
 }

package/src/interactions/createFocusWithin.ts

@@ -92,7 +92,11 @@ function createSyntheticBlurHandler(): (
  * Based on react-aria's useFocusWithin but adapted for SolidJS.
  */
 export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResult {
-  const { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
+  // Read isDisabled/handlers off `props` directly (not via destructure): a Solid
+  // hook body runs once, so destructuring would freeze them at call time and drop
+  // reactive updates — createOverlay/createVisuallyHidden pass a live isDisabled
+  // getter. The handlers below read props.x live; the return is getter-based so a
+  // later isDisabled flip re-computes. Mirrors upstream useFocusWithin's re-read.
 
   // State tracking
   let isFocusWithin = false;
@@ -123,12 +127,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
       cleanupRef?.();
       cleanupRef = undefined;
 
-      if (onBlurWithin) {
-        onBlurWithin(e);
+      if (props.onBlurWithin) {
+        props.onBlurWithin(e);
       }
 
-      if (onFocusWithinChange) {
-        onFocusWithinChange(false);
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(false);
       }
     }
   };
@@ -145,12 +149,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
     const activeElement = ownerDocument ? getActiveElement(ownerDocument) : null;
 
     if (!isFocusWithin && activeElement === getEventTarget(e)) {
-      if (onFocusWithin) {
-        onFocusWithin(e);
+      if (props.onFocusWithin) {
+        props.onFocusWithin(e);
       }
 
-      if (onFocusWithinChange) {
-        onFocusWithinChange(true);
+      if (props.onFocusWithinChange) {
+        props.onFocusWithinChange(true);
       }
 
       isFocusWithin = true;
@@ -179,12 +183,12 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
               isFocusWithin = false;
               removeAllGlobalListeners();
 
-              if (onBlurWithin) {
-                onBlurWithin(nativeEvent);
+              if (props.onBlurWithin) {
+                props.onBlurWithin(nativeEvent);
               }
 
-              if (onFocusWithinChange) {
-                onFocusWithinChange(false);
+              if (props.onFocusWithinChange) {
+                props.onFocusWithinChange(false);
               }
               cleanupRef?.();
               cleanupRef = undefined;
@@ -196,19 +200,14 @@ export function createFocusWithin(props: FocusWithinProps = {}): FocusWithinResu
     }
   };
 
-  if (isDisabled) {
-    return {
-      focusWithinProps: {
-        onFocus: undefined,
-        onBlur: undefined,
-      },
-    };
-  }
-
   return {
     focusWithinProps: {
-      onFocus,
-      onBlur,
+      get onFocus() {
+        return props.isDisabled ? undefined : onFocus;
+      },
+      get onBlur() {
+        return props.isDisabled ? undefined : onBlur;
+      },
     },
   };
 }

package/src/interactions/createInteractionModality.ts

@@ -40,7 +40,7 @@ const changeHandlers = new Set<Handler>();
 
 export let hasSetupGlobalListeners: Map<
   Window,
-  { focus: typeof window.HTMLElement.prototype.focus; canOverride: boolean }
+  { focus: typeof window.HTMLElement.prototype.focus }
 > = new Map();
 let hasEventBeforeFocus = false;
 let hasBlurredWindowRecently = false;
@@ -145,16 +145,21 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
 
   const documentObject = getOwnerDocument(element);
 
+  // Programmatic focus() calls shouldn't affect the current input modality, so we
+  // patch HTMLElement.prototype.focus to record that an event preceded the focus.
+  // Use Reflect.defineProperty (not assignment) so this works even when `focus` is
+  // currently a getter-only accessor — e.g. when a test library's setup() has
+  // instrumented it. Plain assignment throws in that case; Reflect.defineProperty
+  // returns false rather than throwing (and succeeds on the configurable prototype).
   const originalFocus = windowObject.HTMLElement.prototype.focus;
-  let canOverride = true;
-  try {
-    windowObject.HTMLElement.prototype.focus = function () {
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: function () {
       hasEventBeforeFocus = true;
       originalFocus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);
-    };
-  } catch {
-    canOverride = false;
-  }
+    },
+  });
 
   documentObject.addEventListener("keydown", handleKeyboardEvent, true);
   documentObject.addEventListener("keyup", handleKeyboardEvent, true);
@@ -181,7 +186,7 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
     { once: true },
   );
 
-  hasSetupGlobalListeners.set(windowObject, { focus: originalFocus, canOverride });
+  hasSetupGlobalListeners.set(windowObject, { focus: originalFocus });
 }
 
 function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?: () => void) {
@@ -201,9 +206,13 @@ function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?
   }
 
   const entry = hasSetupGlobalListeners.get(windowObject)!;
-  if (entry.canOverride) {
-    windowObject.HTMLElement.prototype.focus = entry.focus;
-  }
+  // Mirror the setup path: defineProperty (not assignment) restores the original
+  // focus even if it had been replaced with a getter-only accessor.
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: entry.focus,
+  });
 
   documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
   documentObject.removeEventListener("keyup", handleKeyboardEvent, true);
@@ -352,11 +361,13 @@ export function createFocusVisible(props: FocusVisibleProps = {}): FocusVisibleR
     return { isFocusVisible: () => false };
   }
 
-  const { isTextInput, autoFocus } = props;
-  const [isVisible, setIsVisible] = createSignal<boolean>(autoFocus || isFocusVisible());
+  // autoFocus seeds the initial value once; isTextInput is read inside the effect
+  // so it re-subscribes reactively (a top-level destructure would freeze it — the
+  // body runs once). Mirrors upstream useFocusVisible's [isTextInput] dep.
+  const [isVisible, setIsVisible] = createSignal<boolean>(props.autoFocus || isFocusVisible());
 
   createEffect(() => {
-    const cleanup = createFocusVisibleListener(setIsVisible, { isTextInput });
+    const cleanup = createFocusVisibleListener(setIsVisible, { isTextInput: props.isTextInput });
     onCleanup(cleanup);
   });
 

package/src/interactions/createKeyboard.ts

@@ -46,10 +46,20 @@ function createEventHandler<T extends globalThis.KeyboardEvent>(
   return (e: T) => {
     let shouldStopPropagation = true;
 
+    // A nested createEventHandler may already have installed continuePropagation
+    // on this event; capture it so continuing here continues on the wrapper too.
+    const parentContinuePropagation = (e as { continuePropagation?: () => void })
+      .continuePropagation;
+
     // Create a wrapped event with continuePropagation
     const event = Object.assign(e, {
       continuePropagation() {
         shouldStopPropagation = false;
+        // Nested createEventHandler might have set continuePropagation, so we
+        // should continue propagation on the wrappers too.
+        if (typeof parentContinuePropagation === "function") {
+          parentContinuePropagation.call(e);
+        }
       },
     }) as KeyboardEvent;
 

package/src/interactions/createPress.ts

@@ -25,6 +25,7 @@ import {
   isMac,
   createGlobalListeners,
   setEventTarget,
+  focusWithoutScrolling,
 } from "../utils";
 
 export { PressEvent, type PointerType } from "./PressEvent";
@@ -83,6 +84,28 @@ function isPressedValue(isPressed: Accessor<boolean> | boolean | undefined): boo
   return isPressed ?? false;
 }
 
+function eventPathContains(parent: EventTarget | null | undefined, event: Event): boolean {
+  if (!parent) {
+    return false;
+  }
+
+  const target = getEventTarget(event);
+  if (
+    typeof Node !== "undefined" &&
+    parent instanceof Node &&
+    target instanceof Node &&
+    nodeContains(parent, target)
+  ) {
+    return true;
+  }
+
+  if (typeof event.composedPath === "function") {
+    return event.composedPath().includes(parent);
+  }
+
+  return false;
+}
+
 // Track which links have been programmatically clicked to avoid double activation
 const linkClickedSet = new WeakSet<HTMLElement>();
 
@@ -280,7 +303,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
   const onPointerDown: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
     // Only handle left clicks, and ignore events that bubbled through portals
     const button = e.button ?? 0;
-    if (button !== 0 || !nodeContains(e.currentTarget, getEventTarget(e))) {
+    if (button !== 0 || !eventPathContains(e.currentTarget, e)) {
       return;
     }
 
@@ -316,7 +339,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
   // Mouse down handler when using pointer events - only prevents focus, doesn't trigger press
   const onMouseDownPointer: JSX.EventHandler<HTMLElement, MouseEvent> = (e) => {
-    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
+    if (!eventPathContains(e.currentTarget, e)) {
       return;
     }
 
@@ -341,7 +364,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
       return;
     }
 
-    const isOverTarget = nodeContains(pressState.target, getEventTarget(e) as Element);
+    const isOverTarget = eventPathContains(pressState.target, e);
     if (isOverTarget && pressState.pointerType != null && pressState.pointerType !== "virtual") {
       // Pointer released over target - wait for onClick to complete the press sequence.
       // This matches React-Aria's behavior for compatibility with DOM mutations and third-party libraries.
@@ -366,7 +389,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
             cancel(e);
           } else {
             // Click didn't happen (probably due to stopPropagation), trigger it manually
-            pressState.target.focus();
+            focusWithoutScrolling(pressState.target);
             pressState.target.click();
           }
         }
@@ -400,7 +423,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
   };
 
   const onPointerUpTarget: JSX.EventHandler<HTMLElement, PointerEvent> = (e) => {
-    if (!nodeContains(e.currentTarget, getEventTarget(e)) || pressState.pointerType === "virtual") {
+    if (!eventPathContains(e.currentTarget, e) || pressState.pointerType === "virtual") {
       return;
     }
 
@@ -781,7 +804,7 @@ export function createPress(props: CreatePressProps = {}): PressResult {
 
   const onClick: JSX.EventHandler<HTMLElement, MouseEvent> = (e) => {
     // Don't handle click if it's not on the target
-    if (!nodeContains(e.currentTarget, e.target as Element)) {
+    if (!eventPathContains(e.currentTarget, e)) {
       return;
     }
 

package/src/label/createLabels.ts

@@ -19,10 +19,13 @@ export function createLabels(
   props: DOMProps & AriaLabelingProps,
   defaultLabel?: string,
 ): DOMProps & AriaLabelingProps {
-  let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
-
-  // Generate an ID if not provided
-  id = createId(id);
+  // Read props directly rather than destructuring: in Solid a destructure
+  // freezes the value at call time. This is a pure snapshot transform, so it is
+  // behaviourally identical, but keeping the reactive read explicit matches the
+  // rest of the port and satisfies guard:idiomatic-solid.
+  let id = createId(props.id);
+  let label = props["aria-label"];
+  let labelledBy = props["aria-labelledby"];
 
   // If there is both an aria-label and aria-labelledby,
   // combine them by pointing to the element itself.