@proyecto-viviana/solidaria 0.4.2 → 0.6.0-rc.0

package/dist/_chunk/createLandmark.js.map

@@ -1 +1 @@
-{"version":3,"file":"createLandmark.js","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n */\n\nimport type { JSX, Accessor } from \"solid-js\";\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createEffect(() => {\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    onCleanup(() => {\n      manager.unregister(element);\n    });\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":";;;;;;;AAwEA,IAAM,kBAAN,MAAsB;CACpB,YAAqC,CAAC;CACtC,eAAuB;CACvB,YAAoB;CAEpB,cAAc;EACZ,IAAI,OAAO,WAAW,aACpB,KAAK,eAAe;CAExB;CAEA,iBAAyB;EACvB,IAAI,KAAK,WAAW;EACpB,KAAK,YAAY;EAEjB,OAAO,iBAAiB,WAAW,KAAK,cAAc,KAAK,IAAI,GAAG,IAAI;CACxE;CAEA,cAAsB,OAAsB;EAE1C,IAAI,MAAM,QAAQ,MAAM;GACtB,MAAM,eAAe;GACrB,IAAI,MAAM,UACR,KAAK,cAAc;QAEnB,KAAK,UAAU;EAEnB;CACF;CAEA,SAAS,OAA4B;EAEnC,MAAM,QAAQ,KAAK,mBAAmB,MAAM,GAAG;EAC/C,KAAK,UAAU,OAAO,OAAO,GAAG,KAAK;EAGrC,KAAK,eAAe;CACtB;CAEA,WAAW,KAAwB;EACjC,MAAM,QAAQ,KAAK,UAAU,WAAW,MAAM,EAAE,QAAQ,GAAG;EAC3D,IAAI,UAAU,IAAI;GAChB,KAAK,UAAU,OAAO,OAAO,CAAC;GAE9B,IAAI,KAAK,gBAAgB,KAAK,UAAU,QACtC,KAAK,eAAe,KAAK,UAAU,SAAS;EAEhD;CACF;CAEA,mBAA2B,KAA0B;EAEnD,IAAI,MAAM;EACV,IAAI,OAAO,KAAK,UAAU;EAE1B,OAAO,MAAM,MAAM;GACjB,MAAM,MAAM,KAAK,OAAO,MAAM,QAAQ,CAAC;GAIvC,IAHmB,KAAK,UAAU,IAAI,CAAC,IAAI,wBAAwB,GAGtD,IAAI,KAAK,6BACpB,MAAM,MAAM;QAEZ,OAAO;EAEX;EAEA,OAAO;CACT;CAEA,iBAA+B;EAE7B,MAAM,6BAAa,IAAI,IAAuC;EAC9D,KAAK,MAAM,YAAY,KAAK,WAAW;GACrC,MAAM,QAAQ,WAAW,IAAI,SAAS,IAAI,KAAK,CAAC;GAChD,MAAM,KAAK,QAAQ;GACnB,WAAW,IAAI,SAAS,MAAM,KAAK;EACrC;EAGA,KAAK,MAAM,CAAC,MAAM,UAAU,YAC1B,IAAI,MAAM,SAAS,GAAG;GACpB,MAAM,SAAS,MAAM,KAAK,MAAM,EAAE,KAAK;GAEvC,IAAI,IADqB,IAAI,OAAO,OAAO,OAAO,CACnC,CAAC,CAAC,OAAO,MAAM,QAC5B,QAAQ,KACN,iCAAiC,KAAK,kEACxC;EAEJ;CAEJ;CAEA,YAAkB;EAChB,IAAI,KAAK,UAAU,WAAW,GAAG;EAGjC,MAAM,gBAAgB,SAAS;EAC/B,KAAK,eAAe,KAAK,yBAAyB,aAAa;EAG/D,KAAK,gBAAgB,KAAK,eAAe,KAAK,KAAK,UAAU;EAC7D,KAAK,cAAc,KAAK,UAAU,KAAK,aAAa;CACtD;CAEA,gBAAsB;EACpB,IAAI,KAAK,UAAU,WAAW,GAAG;EAGjC,MAAM,gBAAgB,SAAS;EAC/B,KAAK,eAAe,KAAK,yBAAyB,aAAa;EAG/D,KAAK,gBAAgB,KAAK,eAAe,IAAI,KAAK,UAAU,UAAU,KAAK,UAAU;EACrF,KAAK,cAAc,KAAK,UAAU,KAAK,aAAa;CACtD;CAEA,YAAkB;EAChB,MAAM,OAAO,KAAK,UAAU,MAAM,MAAM,EAAE,SAAS,MAAM;EACzD,IAAI,MACF,KAAK,cAAc,IAAI;CAE3B;CAEA,SAAS,MAA8B;EACrC,MAAM,WAAW,KAAK,UAAU,MAAM,MAAM,EAAE,SAAS,IAAI;EAC3D,IAAI,UACF,KAAK,cAAc,QAAQ;CAE/B;CAEA,yBAAiC,eAAuC;EACtE,IAAI,CAAC,eAAe,OAAO;EAG3B,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,UAAU,QAAQ,KACzC,IAAI,KAAK,UAAU,EAAE,CAAC,IAAI,SAAS,aAAa,GAAG;GAEjD,IAAI,yBAAyB,aAC3B,KAAK,UAAU,EAAE,CAAC,cAAc;GAElC,OAAO;EACT;EAGF,OAAO;CACT;CAEA,cAAsB,UAA+B;EAEnD,IAAI,SAAS,OAAO;GAClB,SAAS,MAAM;GACf;EACF;EAGA,IAAI,SAAS,eAAe,SAAS,IAAI,SAAS,SAAS,WAAW,GAAG;GACvE,SAAS,YAAY,MAAM;GAC3B;EACF;EAGA,MAAM,YAAY,KAAK,mBAAmB,SAAS,GAAG;EACtD,IAAI,WAAW;GACb,UAAU,MAAM;GAChB;EACF;EAGA,IAAI,CAAC,SAAS,IAAI,aAAa,UAAU,GACvC,SAAS,IAAI,aAAa,YAAY,IAAI;EAE5C,SAAS,IAAI,MAAM;CACrB;CAEA,mBAA2B,WAA4C;EACrE,MAAM,qBAAqB;GACzB;GACA;GACA;GACA;GACA;GACA;EACF,CAAC,CAAC,KAAK,IAAI;EAEX,OAAO,UAAU,cAA2B,kBAAkB;CAChE;CAEA,gBAAoC;EAClC,OAAO;GACL,iBAAiB,KAAK,UAAU;GAChC,qBAAqB,KAAK,cAAc;GACxC,iBAAiB,KAAK,UAAU;GAChC,WAAW,SAAS,KAAK,SAAS,IAAI;EACxC;CACF;AACF;AAGA,IAAI,kBAA0C;AAE9C,SAAS,qBAAsC;CAC7C,IAAI,CAAC,iBACH,kBAAkB,IAAI,gBAAgB;CAExC,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,eACd,OACA,KACiB;CAEjB,mBAAmB;EACjB,MAAM,UAAU,IAAI;EACpB,IAAI,CAAC,SAAS;EAEd,MAAM,IAAI,OAAO,KAAK;EACtB,MAAM,QAAuB;GAC3B,KAAK;GACL,MAAM,EAAE;GACR,OAAO,EAAE;GACT,OAAO,EAAE;EACX;EAEA,MAAM,UAAU,mBAAmB;EACnC,QAAQ,SAAS,KAAK;EAEtB,gBAAgB;GACd,QAAQ,WAAW,OAAO;EAC5B,CAAC;CACH,CAAC;CAED,MAAM,yBAAgD;EACpD,MAAM,IAAI,OAAO,KAAK;EAGtB,OAAO;GACL,GAHe,eAAe,GAAyC,EAAE,WAAW,KAAK,CAG/E;GACV,MAAM,EAAE;EACV;CACF;CAEA,OAAO,EACL,IAAI,gBAAgB;EAClB,OAAO,iBAAiB;CAC1B,EACF;AACF;;;;;;;;;;;AAYA,SAAgB,wBAA4C;CAC1D,OAAO,mBAAmB,CAAC,CAAC,cAAc;AAC5C"}
+{"version":3,"file":"createLandmark.js","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/landmark/useLandmark.ts\n\n/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n *\n * Ported from packages/react-aria/src/landmark/useLandmark.ts.\n */\n\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createTrackedEffect } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    _s2Cleanups.push(() => {\n      manager.unregister(element);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":"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"}

package/dist/_chunk/createLandmark.jsx

@@ -1,6 +1,18 @@
+/*
+* Copyright 2022 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/landmark/useLandmark.ts
 import { t as filterDOMProps } from "./filterDOMProps.jsx";
 import { t as access } from "./reactivity.jsx";
-import { createEffect, onCleanup } from "solid-js";
+import { createTrackedEffect } from "solid-js";
 //#region src/landmark/createLandmark.ts
 /**
 * Manages all registered landmarks and handles F6 keyboard navigation.
@@ -152,7 +164,8 @@ function getLandmarkManager() {
 * ```
 */
 function createLandmark(props, ref) {
-	createEffect(() => {
+	createTrackedEffect(() => {
+		const _s2Cleanups = [];
 		const element = ref();
 		if (!element) return;
 		const p = access(props);
@@ -164,9 +177,12 @@ function createLandmark(props, ref) {
 		};
 		const manager = getLandmarkManager();
 		manager.register(entry);
-		onCleanup(() => {
+		_s2Cleanups.push(() => {
 			manager.unregister(element);
 		});
+		return () => {
+			for (const c of _s2Cleanups) c();
+		};
 	});
 	const getLandmarkProps = () => {
 		const p = access(props);

package/dist/_chunk/createLandmark.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"createLandmark.jsx","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n */\n\nimport type { JSX, Accessor } from \"solid-js\";\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createEffect(() => {\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    onCleanup(() => {\n      manager.unregister(element);\n    });\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":"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"}
+{"version":3,"file":"createLandmark.jsx","names":[],"sources":["../../src/landmark/createLandmark.ts"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/landmark/useLandmark.ts\n\n/**\n * createLandmark - SolidJS implementation of React Aria's useLandmark\n *\n * Provides landmark navigation in an application. Call this with a role and label\n * to register a landmark navigable with the F6 key.\n *\n * ARIA landmarks help screen reader users navigate between major sections of a page.\n * The F6 key (or Shift+F6) cycles through all registered landmarks.\n *\n * Ported from packages/react-aria/src/landmark/useLandmark.ts.\n */\n\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createTrackedEffect } from \"solid-js\";\nimport { access, type MaybeAccessor } from \"../utils\";\nimport { filterDOMProps } from \"../utils\";\n\n/** ARIA landmark roles */\nexport type AriaLandmarkRole =\n  | \"main\"\n  | \"region\"\n  | \"search\"\n  | \"navigation\"\n  | \"form\"\n  | \"banner\"\n  | \"contentinfo\"\n  | \"complementary\";\n\nexport interface AriaLandmarkProps {\n  /** The ARIA landmark role. */\n  role: AriaLandmarkRole;\n  /**\n   * A human-readable label for the landmark.\n   * Required when multiple landmarks with the same role exist on a page.\n   */\n  \"aria-label\"?: string;\n  /** Identifies the element(s) that labels the landmark. */\n  \"aria-labelledby\"?: string;\n  /** The element's unique identifier. */\n  id?: string;\n  /**\n   * A custom focus handler called when this landmark receives focus via F6 navigation.\n   * Use this to focus a specific element within the landmark instead of the container.\n   */\n  focus?: () => void;\n}\n\nexport interface LandmarkAria<T extends HTMLElement = HTMLElement> {\n  /** Props to spread on the landmark element. */\n  landmarkProps: JSX.HTMLAttributes<T>;\n}\n\nexport interface LandmarkController {\n  /** Focus the next landmark in DOM order. */\n  focusNext: () => void;\n  /** Focus the previous landmark in DOM order. */\n  focusPrevious: () => void;\n  /** Focus the main landmark. */\n  focusMain: () => void;\n  /** Navigate to a specific landmark by role. If multiple exist, the first one is focused. */\n  navigate: (role: AriaLandmarkRole) => void;\n}\n\ninterface LandmarkEntry {\n  ref: HTMLElement;\n  role: AriaLandmarkRole;\n  label?: string;\n  focus?: () => void;\n  lastFocused?: HTMLElement;\n}\n\n/**\n * Manages all registered landmarks and handles F6 keyboard navigation.\n */\nclass LandmarkManager {\n  private landmarks: LandmarkEntry[] = [];\n  private currentIndex = -1;\n  private listening = false;\n\n  constructor() {\n    if (typeof window !== \"undefined\") {\n      this.startListening();\n    }\n  }\n\n  private startListening() {\n    if (this.listening) return;\n    this.listening = true;\n\n    window.addEventListener(\"keydown\", this.handleKeyDown.bind(this), true);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // F6 to navigate landmarks\n    if (event.key === \"F6\") {\n      event.preventDefault();\n      if (event.shiftKey) {\n        this.focusPrevious();\n      } else {\n        this.focusNext();\n      }\n    }\n  }\n\n  register(entry: LandmarkEntry): void {\n    // Insert in DOM order using compareDocumentPosition\n    const index = this.findInsertionIndex(entry.ref);\n    this.landmarks.splice(index, 0, entry);\n\n    // Validate: if multiple landmarks have the same role, they should have different labels\n    this.validateLabels();\n  }\n\n  unregister(ref: HTMLElement): void {\n    const index = this.landmarks.findIndex((l) => l.ref === ref);\n    if (index !== -1) {\n      this.landmarks.splice(index, 1);\n      // Adjust currentIndex if needed\n      if (this.currentIndex >= this.landmarks.length) {\n        this.currentIndex = this.landmarks.length - 1;\n      }\n    }\n  }\n\n  private findInsertionIndex(ref: HTMLElement): number {\n    // Binary search for insertion point based on DOM order\n    let low = 0;\n    let high = this.landmarks.length;\n\n    while (low < high) {\n      const mid = Math.floor((low + high) / 2);\n      const comparison = this.landmarks[mid].ref.compareDocumentPosition(ref);\n\n      // Node.DOCUMENT_POSITION_FOLLOWING = 4\n      if (comparison & Node.DOCUMENT_POSITION_FOLLOWING) {\n        low = mid + 1;\n      } else {\n        high = mid;\n      }\n    }\n\n    return low;\n  }\n\n  private validateLabels(): void {\n    // Group landmarks by role\n    const roleGroups = new Map<AriaLandmarkRole, LandmarkEntry[]>();\n    for (const landmark of this.landmarks) {\n      const group = roleGroups.get(landmark.role) || [];\n      group.push(landmark);\n      roleGroups.set(landmark.role, group);\n    }\n\n    // Warn if multiple landmarks with the same role lack unique labels\n    for (const [role, group] of roleGroups) {\n      if (group.length > 1) {\n        const labels = group.map((l) => l.label);\n        const uniqueLabels = new Set(labels.filter(Boolean));\n        if (uniqueLabels.size < group.length) {\n          console.warn(\n            `Multiple landmarks with role \"${role}\" exist. Each should have a unique aria-label or aria-labelledby.`,\n          );\n        }\n      }\n    }\n  }\n\n  focusNext(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to next\n    this.currentIndex = (this.currentIndex + 1) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusPrevious(): void {\n    if (this.landmarks.length === 0) return;\n\n    // Find the currently focused landmark\n    const activeElement = document.activeElement;\n    this.currentIndex = this.findCurrentLandmarkIndex(activeElement);\n\n    // Move to previous\n    this.currentIndex = (this.currentIndex - 1 + this.landmarks.length) % this.landmarks.length;\n    this.focusLandmark(this.landmarks[this.currentIndex]);\n  }\n\n  focusMain(): void {\n    const main = this.landmarks.find((l) => l.role === \"main\");\n    if (main) {\n      this.focusLandmark(main);\n    }\n  }\n\n  navigate(role: AriaLandmarkRole): void {\n    const landmark = this.landmarks.find((l) => l.role === role);\n    if (landmark) {\n      this.focusLandmark(landmark);\n    }\n  }\n\n  private findCurrentLandmarkIndex(activeElement: Element | null): number {\n    if (!activeElement) return -1;\n\n    // Check if active element is within any landmark\n    for (let i = 0; i < this.landmarks.length; i++) {\n      if (this.landmarks[i].ref.contains(activeElement)) {\n        // Store the last focused element for this landmark\n        if (activeElement instanceof HTMLElement) {\n          this.landmarks[i].lastFocused = activeElement;\n        }\n        return i;\n      }\n    }\n\n    return -1;\n  }\n\n  private focusLandmark(landmark: LandmarkEntry): void {\n    // If a custom focus handler is provided, use it\n    if (landmark.focus) {\n      landmark.focus();\n      return;\n    }\n\n    // If we previously focused an element in this landmark, try to restore it\n    if (landmark.lastFocused && landmark.ref.contains(landmark.lastFocused)) {\n      landmark.lastFocused.focus();\n      return;\n    }\n\n    // Try to find the first focusable element\n    const focusable = this.findFirstFocusable(landmark.ref);\n    if (focusable) {\n      focusable.focus();\n      return;\n    }\n\n    // Fallback: make the landmark itself focusable and focus it\n    if (!landmark.ref.hasAttribute(\"tabindex\")) {\n      landmark.ref.setAttribute(\"tabindex\", \"-1\");\n    }\n    landmark.ref.focus();\n  }\n\n  private findFirstFocusable(container: HTMLElement): HTMLElement | null {\n    const focusableSelectors = [\n      \"a[href]\",\n      \"button:not([disabled])\",\n      \"input:not([disabled])\",\n      \"select:not([disabled])\",\n      \"textarea:not([disabled])\",\n      '[tabindex]:not([tabindex=\"-1\"])',\n    ].join(\", \");\n\n    return container.querySelector<HTMLElement>(focusableSelectors);\n  }\n\n  getController(): LandmarkController {\n    return {\n      focusNext: () => this.focusNext(),\n      focusPrevious: () => this.focusPrevious(),\n      focusMain: () => this.focusMain(),\n      navigate: (role) => this.navigate(role),\n    };\n  }\n}\n\n// Global singleton instance\nlet landmarkManager: LandmarkManager | null = null;\n\nfunction getLandmarkManager(): LandmarkManager {\n  if (!landmarkManager) {\n    landmarkManager = new LandmarkManager();\n  }\n  return landmarkManager;\n}\n\n/**\n * Provides landmark navigation in an application.\n * Call this with a role and label to register a landmark navigable with F6.\n *\n * @example\n * ```tsx\n * function Navigation(props) {\n *   let ref: HTMLElement;\n *   const { landmarkProps } = createLandmark({\n *     role: 'navigation',\n *     'aria-label': 'Main navigation'\n *   });\n *\n *   return (\n *     <nav {...landmarkProps} ref={ref}>\n *       {props.children}\n *     </nav>\n *   );\n * }\n * ```\n */\nexport function createLandmark<T extends HTMLElement = HTMLElement>(\n  props: MaybeAccessor<AriaLandmarkProps>,\n  ref: Accessor<T | undefined>,\n): LandmarkAria<T> {\n  // Register with the landmark manager\n  createTrackedEffect(() => {\n    const _s2Cleanups: Array<() => void> = [];\n\n    const element = ref();\n    if (!element) return;\n\n    const p = access(props);\n    const entry: LandmarkEntry = {\n      ref: element,\n      role: p.role,\n      label: p[\"aria-label\"],\n      focus: p.focus,\n    };\n\n    const manager = getLandmarkManager();\n    manager.register(entry);\n\n    _s2Cleanups.push(() => {\n      manager.unregister(element);\n    });\n\n    return () => {\n      for (const c of _s2Cleanups) c();\n    };\n  });\n\n  const getLandmarkProps = (): JSX.HTMLAttributes<T> => {\n    const p = access(props);\n    const domProps = filterDOMProps(p as unknown as Record<string, unknown>, { labelable: true });\n\n    return {\n      ...domProps,\n      role: p.role,\n    };\n  };\n\n  return {\n    get landmarkProps() {\n      return getLandmarkProps();\n    },\n  };\n}\n\n/**\n * Returns a controller for programmatic landmark navigation.\n *\n * @example\n * ```tsx\n * const controller = getLandmarkController();\n * controller.focusMain(); // Focus the main landmark\n * controller.focusNext(); // Focus the next landmark\n * ```\n */\nexport function getLandmarkController(): LandmarkController {\n  return getLandmarkManager().getController();\n}\n"],"mappings":"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"}

package/dist/_chunk/createLongPress.js

@@ -0,0 +1,105 @@
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useLongPress.ts
+import { t as mergeProps } from "./mergeProps.js";
+import { i as createDescription, s as createGlobalListeners } from "./utils.js";
+import { t as onOwnedCleanup } from "./owner.js";
+import { t as access } from "./reactivity.js";
+import { T as focusWithoutScrolling } from "./dom.js";
+import { t as createPress } from "./createPress.js";
+//#region src/interactions/createLongPress.ts
+/**
+* createLongPress - Handles long press interactions across mouse and touch.
+*
+* Port of @react-aria/interactions useLongPress, adapted for SolidJS.
+*/
+const DEFAULT_THRESHOLD = 500;
+function isDisabledValue(isDisabled) {
+	return typeof isDisabled === "function" ? isDisabled() : !!isDisabled;
+}
+function createLongPressEvent(type, e) {
+	return {
+		type,
+		pointerType: e.pointerType,
+		target: e.target,
+		shiftKey: e.shiftKey,
+		ctrlKey: e.ctrlKey,
+		metaKey: e.metaKey,
+		altKey: e.altKey,
+		x: e.x,
+		y: e.y
+	};
+}
+/**
+* Handles long press interactions across mouse and touch devices.
+*/
+function createLongPress(props = {}) {
+	const { isDisabled, pointerType, onLongPressStart, onLongPressEnd, onLongPress, threshold = DEFAULT_THRESHOLD } = props;
+	let timeoutId;
+	const { addGlobalListener } = createGlobalListeners();
+	const isAcceptedPointerType = (e) => pointerType ? e.pointerType === pointerType : e.pointerType === "mouse" || e.pointerType === "touch";
+	const { pressProps } = createPress({
+		isDisabled,
+		onPressStart(e) {
+			e.continuePropagation();
+			if (isAcceptedPointerType(e)) {
+				onLongPressStart?.(createLongPressEvent("longpressstart", e));
+				timeoutId = setTimeout(() => {
+					e.target.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true }));
+					if (document.activeElement !== e.target) focusWithoutScrolling(e.target);
+					onLongPress?.(createLongPressEvent("longpress", e));
+					timeoutId = void 0;
+				}, threshold);
+				if (e.pointerType === "touch") {
+					const onContextMenu = (event) => {
+						event.preventDefault();
+					};
+					const target = e.target;
+					target.addEventListener("contextmenu", onContextMenu, { once: true });
+					addGlobalListener("pointerup", () => {
+						setTimeout(() => {
+							target.removeEventListener("contextmenu", onContextMenu);
+						}, 30);
+					}, {
+						isWindow: true,
+						once: true
+					});
+				}
+			}
+		},
+		onPressEnd(e) {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = void 0;
+			}
+			if (onLongPressEnd && isAcceptedPointerType(e)) onLongPressEnd(createLongPressEvent("longpressend", e));
+		}
+	});
+	const descriptionProps = createDescription(() => onLongPress && !isDisabledValue(props.isDisabled) ? access(props.accessibilityDescription) : void 0);
+	onOwnedCleanup(() => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = void 0;
+		}
+	});
+	const longPressProps = mergeProps(pressProps);
+	Object.defineProperty(longPressProps, "aria-describedby", {
+		get: () => descriptionProps["aria-describedby"],
+		enumerable: true,
+		configurable: true
+	});
+	return { longPressProps };
+}
+//#endregion
+export { createLongPress as t };
+
+//# sourceMappingURL=createLongPress.js.map

package/dist/_chunk/createLongPress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLongPress.js","names":[],"sources":["../../src/interactions/createLongPress.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useLongPress.ts\n\n/**\n * createLongPress - Handles long press interactions across mouse and touch.\n *\n * Port of @react-aria/interactions useLongPress, adapted for SolidJS.\n */\n\nimport { mergeProps, focusWithoutScrolling, createGlobalListeners, onOwnedCleanup } from \"../utils\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress, type PressEvent } from \"./createPress\";\nimport { createDescription } from \"../utils/createDescription\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\n\nexport interface LongPressEvent {\n  /** The type of long press event being fired. */\n  type: \"longpressstart\" | \"longpressend\" | \"longpress\";\n  /** The pointer type that triggered the long press. */\n  pointerType: PressEvent[\"pointerType\"];\n  /** The target element of the long press event. */\n  target: Element;\n  /** Whether the shift keyboard modifier was held during the long press event. */\n  shiftKey: boolean;\n  /** Whether the ctrl keyboard modifier was held during the long press event. */\n  ctrlKey: boolean;\n  /** Whether the meta keyboard modifier was held during the long press event. */\n  metaKey: boolean;\n  /** Whether the alt keyboard modifier was held during the long press event. */\n  altKey: boolean;\n  /** X position relative to the target. */\n  x: number;\n  /** Y position relative to the target. */\n  y: number;\n}\n\nexport interface LongPressProps {\n  /** Whether long press events should be disabled. */\n  isDisabled?: MaybeAccessor<boolean>;\n  /** Which pointer type to listen for. By default, both mouse and touch are listened for. */\n  pointerType?: \"mouse\" | \"touch\";\n  /** Handler that is called when a long press interaction starts. */\n  onLongPressStart?: (e: LongPressEvent) => void;\n  /**\n   * Handler that is called when a long press interaction ends, either\n   * over the target or when the pointer leaves the target.\n   */\n  onLongPressEnd?: (e: LongPressEvent) => void;\n  /**\n   * Handler that is called when the threshold time is met while\n   * the press is over the target.\n   */\n  onLongPress?: (e: LongPressEvent) => void;\n  /**\n   * The amount of time in milliseconds to wait before triggering a long press.\n   * @default 500ms\n   */\n  threshold?: number;\n  /**\n   * A description for assistive technology users indicating that a long press\n   * action is available, e.g. \"Long press to open menu\".\n   */\n  accessibilityDescription?: MaybeAccessor<string | undefined>;\n}\n\nexport interface LongPressResult {\n  /** Props to spread on the target element. */\n  longPressProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nconst DEFAULT_THRESHOLD = 500;\n\nfunction isDisabledValue(isDisabled: MaybeAccessor<boolean> | undefined): boolean {\n  return typeof isDisabled === \"function\" ? isDisabled() : !!isDisabled;\n}\n\nfunction createLongPressEvent(type: LongPressEvent[\"type\"], e: PressEvent): LongPressEvent {\n  return {\n    type,\n    pointerType: e.pointerType,\n    target: e.target,\n    shiftKey: e.shiftKey,\n    ctrlKey: e.ctrlKey,\n    metaKey: e.metaKey,\n    altKey: e.altKey,\n    x: e.x,\n    y: e.y,\n  };\n}\n\n/**\n * Handles long press interactions across mouse and touch devices.\n */\nexport function createLongPress(props: LongPressProps = {}): LongPressResult {\n  const {\n    isDisabled,\n    pointerType,\n    onLongPressStart,\n    onLongPressEnd,\n    onLongPress,\n    threshold = DEFAULT_THRESHOLD,\n  } = props;\n\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  const { addGlobalListener } = createGlobalListeners();\n  const isAcceptedPointerType = (e: PressEvent) =>\n    pointerType\n      ? e.pointerType === pointerType\n      : e.pointerType === \"mouse\" || e.pointerType === \"touch\";\n\n  const { pressProps } = createPress({\n    isDisabled,\n    onPressStart(e) {\n      e.continuePropagation();\n      if (isAcceptedPointerType(e)) {\n        onLongPressStart?.(createLongPressEvent(\"longpressstart\", e));\n\n        timeoutId = setTimeout(() => {\n          // Prevent other press handlers from also handling this event.\n          e.target.dispatchEvent(new PointerEvent(\"pointercancel\", { bubbles: true }));\n\n          // Ensure target is focused. On touch devices, browsers typically focus on pointer up.\n          if (document.activeElement !== e.target) {\n            focusWithoutScrolling(e.target as HTMLElement);\n          }\n\n          onLongPress?.(createLongPressEvent(\"longpress\", e));\n          timeoutId = undefined;\n        }, threshold);\n\n        if (e.pointerType === \"touch\") {\n          const onContextMenu = (event: Event) => {\n            event.preventDefault();\n          };\n          const target = e.target as HTMLElement;\n          target.addEventListener(\"contextmenu\", onContextMenu, { once: true });\n\n          addGlobalListener(\n            \"pointerup\",\n            () => {\n              setTimeout(() => {\n                target.removeEventListener(\"contextmenu\", onContextMenu);\n              }, 30);\n            },\n            { isWindow: true, once: true },\n          );\n        }\n      }\n    },\n    onPressEnd(e) {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n        timeoutId = undefined;\n      }\n\n      if (onLongPressEnd && isAcceptedPointerType(e)) {\n        onLongPressEnd(createLongPressEvent(\"longpressend\", e));\n      }\n    },\n  });\n\n  const descriptionProps = createDescription(() =>\n    onLongPress && !isDisabledValue(props.isDisabled)\n      ? access(props.accessibilityDescription)\n      : undefined,\n  );\n\n  onOwnedCleanup(() => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n      timeoutId = undefined;\n    }\n  });\n\n  const longPressProps = mergeProps(pressProps) as JSX.HTMLAttributes<HTMLElement>;\n  Object.defineProperty(longPressProps, \"aria-describedby\", {\n    get: () => descriptionProps[\"aria-describedby\"],\n    enumerable: true,\n    configurable: true,\n  });\n\n  return {\n    longPressProps,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAM,oBAAoB;AAE1B,SAAS,gBAAgB,YAAyD;CAChF,OAAO,OAAO,eAAe,aAAa,WAAW,IAAI,CAAC,CAAC;AAC7D;AAEA,SAAS,qBAAqB,MAA8B,GAA+B;CACzF,OAAO;EACL;EACA,aAAa,EAAE;EACf,QAAQ,EAAE;EACV,UAAU,EAAE;EACZ,SAAS,EAAE;EACX,SAAS,EAAE;EACX,QAAQ,EAAE;EACV,GAAG,EAAE;EACL,GAAG,EAAE;CACP;AACF;;;;AAKA,SAAgB,gBAAgB,QAAwB,CAAC,GAAoB;CAC3E,MAAM,EACJ,YACA,aACA,kBACA,gBACA,aACA,YAAY,sBACV;CAEJ,IAAI;CACJ,MAAM,EAAE,sBAAsB,sBAAsB;CACpD,MAAM,yBAAyB,MAC7B,cACI,EAAE,gBAAgB,cAClB,EAAE,gBAAgB,WAAW,EAAE,gBAAgB;CAErD,MAAM,EAAE,eAAe,YAAY;EACjC;EACA,aAAa,GAAG;GACd,EAAE,oBAAoB;GACtB,IAAI,sBAAsB,CAAC,GAAG;IAC5B,mBAAmB,qBAAqB,kBAAkB,CAAC,CAAC;IAE5D,YAAY,iBAAiB;KAE3B,EAAE,OAAO,cAAc,IAAI,aAAa,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC;KAG3E,IAAI,SAAS,kBAAkB,EAAE,QAC/B,sBAAsB,EAAE,MAAqB;KAG/C,cAAc,qBAAqB,aAAa,CAAC,CAAC;KAClD,YAAY,KAAA;IACd,GAAG,SAAS;IAEZ,IAAI,EAAE,gBAAgB,SAAS;KAC7B,MAAM,iBAAiB,UAAiB;MACtC,MAAM,eAAe;KACvB;KACA,MAAM,SAAS,EAAE;KACjB,OAAO,iBAAiB,eAAe,eAAe,EAAE,MAAM,KAAK,CAAC;KAEpE,kBACE,mBACM;MACJ,iBAAiB;OACf,OAAO,oBAAoB,eAAe,aAAa;MACzD,GAAG,EAAE;KACP,GACA;MAAE,UAAU;MAAM,MAAM;KAAK,CAC/B;IACF;GACF;EACF;EACA,WAAW,GAAG;GACZ,IAAI,WAAW;IACb,aAAa,SAAS;IACtB,YAAY,KAAA;GACd;GAEA,IAAI,kBAAkB,sBAAsB,CAAC,GAC3C,eAAe,qBAAqB,gBAAgB,CAAC,CAAC;EAE1D;CACF,CAAC;CAED,MAAM,mBAAmB,wBACvB,eAAe,CAAC,gBAAgB,MAAM,UAAU,IAC5C,OAAO,MAAM,wBAAwB,IACrC,KAAA,CACN;CAEA,qBAAqB;EACnB,IAAI,WAAW;GACb,aAAa,SAAS;GACtB,YAAY,KAAA;EACd;CACF,CAAC;CAED,MAAM,iBAAiB,WAAW,UAAU;CAC5C,OAAO,eAAe,gBAAgB,oBAAoB;EACxD,WAAW,iBAAiB;EAC5B,YAAY;EACZ,cAAc;CAChB,CAAC;CAED,OAAO,EACL,eACF;AACF"}

package/dist/_chunk/createLongPress.jsx

@@ -0,0 +1,105 @@
+/*
+* Copyright 2020 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useLongPress.ts
+import { t as mergeProps } from "./mergeProps.jsx";
+import { i as createDescription, s as createGlobalListeners } from "./utils.jsx";
+import { t as onOwnedCleanup } from "./owner.jsx";
+import { t as access } from "./reactivity.jsx";
+import { T as focusWithoutScrolling } from "./dom.jsx";
+import { t as createPress } from "./createPress.jsx";
+//#region src/interactions/createLongPress.ts
+/**
+* createLongPress - Handles long press interactions across mouse and touch.
+*
+* Port of @react-aria/interactions useLongPress, adapted for SolidJS.
+*/
+const DEFAULT_THRESHOLD = 500;
+function isDisabledValue(isDisabled) {
+	return typeof isDisabled === "function" ? isDisabled() : !!isDisabled;
+}
+function createLongPressEvent(type, e) {
+	return {
+		type,
+		pointerType: e.pointerType,
+		target: e.target,
+		shiftKey: e.shiftKey,
+		ctrlKey: e.ctrlKey,
+		metaKey: e.metaKey,
+		altKey: e.altKey,
+		x: e.x,
+		y: e.y
+	};
+}
+/**
+* Handles long press interactions across mouse and touch devices.
+*/
+function createLongPress(props = {}) {
+	const { isDisabled, pointerType, onLongPressStart, onLongPressEnd, onLongPress, threshold = DEFAULT_THRESHOLD } = props;
+	let timeoutId;
+	const { addGlobalListener } = createGlobalListeners();
+	const isAcceptedPointerType = (e) => pointerType ? e.pointerType === pointerType : e.pointerType === "mouse" || e.pointerType === "touch";
+	const { pressProps } = createPress({
+		isDisabled,
+		onPressStart(e) {
+			e.continuePropagation();
+			if (isAcceptedPointerType(e)) {
+				onLongPressStart?.(createLongPressEvent("longpressstart", e));
+				timeoutId = setTimeout(() => {
+					e.target.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true }));
+					if (document.activeElement !== e.target) focusWithoutScrolling(e.target);
+					onLongPress?.(createLongPressEvent("longpress", e));
+					timeoutId = void 0;
+				}, threshold);
+				if (e.pointerType === "touch") {
+					const onContextMenu = (event) => {
+						event.preventDefault();
+					};
+					const target = e.target;
+					target.addEventListener("contextmenu", onContextMenu, { once: true });
+					addGlobalListener("pointerup", () => {
+						setTimeout(() => {
+							target.removeEventListener("contextmenu", onContextMenu);
+						}, 30);
+					}, {
+						isWindow: true,
+						once: true
+					});
+				}
+			}
+		},
+		onPressEnd(e) {
+			if (timeoutId) {
+				clearTimeout(timeoutId);
+				timeoutId = void 0;
+			}
+			if (onLongPressEnd && isAcceptedPointerType(e)) onLongPressEnd(createLongPressEvent("longpressend", e));
+		}
+	});
+	const descriptionProps = createDescription(() => onLongPress && !isDisabledValue(props.isDisabled) ? access(props.accessibilityDescription) : void 0);
+	onOwnedCleanup(() => {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+			timeoutId = void 0;
+		}
+	});
+	const longPressProps = mergeProps(pressProps);
+	Object.defineProperty(longPressProps, "aria-describedby", {
+		get: () => descriptionProps["aria-describedby"],
+		enumerable: true,
+		configurable: true
+	});
+	return { longPressProps };
+}
+//#endregion
+export { createLongPress as t };
+
+//# sourceMappingURL=createLongPress.jsx.map

package/dist/_chunk/createLongPress.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"createLongPress.jsx","names":[],"sources":["../../src/interactions/createLongPress.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/interactions/useLongPress.ts\n\n/**\n * createLongPress - Handles long press interactions across mouse and touch.\n *\n * Port of @react-aria/interactions useLongPress, adapted for SolidJS.\n */\n\nimport { mergeProps, focusWithoutScrolling, createGlobalListeners, onOwnedCleanup } from \"../utils\";\nimport type { JSX } from \"@solidjs/web\";\nimport { createPress, type PressEvent } from \"./createPress\";\nimport { createDescription } from \"../utils/createDescription\";\nimport { access, type MaybeAccessor } from \"../utils/reactivity\";\n\nexport interface LongPressEvent {\n  /** The type of long press event being fired. */\n  type: \"longpressstart\" | \"longpressend\" | \"longpress\";\n  /** The pointer type that triggered the long press. */\n  pointerType: PressEvent[\"pointerType\"];\n  /** The target element of the long press event. */\n  target: Element;\n  /** Whether the shift keyboard modifier was held during the long press event. */\n  shiftKey: boolean;\n  /** Whether the ctrl keyboard modifier was held during the long press event. */\n  ctrlKey: boolean;\n  /** Whether the meta keyboard modifier was held during the long press event. */\n  metaKey: boolean;\n  /** Whether the alt keyboard modifier was held during the long press event. */\n  altKey: boolean;\n  /** X position relative to the target. */\n  x: number;\n  /** Y position relative to the target. */\n  y: number;\n}\n\nexport interface LongPressProps {\n  /** Whether long press events should be disabled. */\n  isDisabled?: MaybeAccessor<boolean>;\n  /** Which pointer type to listen for. By default, both mouse and touch are listened for. */\n  pointerType?: \"mouse\" | \"touch\";\n  /** Handler that is called when a long press interaction starts. */\n  onLongPressStart?: (e: LongPressEvent) => void;\n  /**\n   * Handler that is called when a long press interaction ends, either\n   * over the target or when the pointer leaves the target.\n   */\n  onLongPressEnd?: (e: LongPressEvent) => void;\n  /**\n   * Handler that is called when the threshold time is met while\n   * the press is over the target.\n   */\n  onLongPress?: (e: LongPressEvent) => void;\n  /**\n   * The amount of time in milliseconds to wait before triggering a long press.\n   * @default 500ms\n   */\n  threshold?: number;\n  /**\n   * A description for assistive technology users indicating that a long press\n   * action is available, e.g. \"Long press to open menu\".\n   */\n  accessibilityDescription?: MaybeAccessor<string | undefined>;\n}\n\nexport interface LongPressResult {\n  /** Props to spread on the target element. */\n  longPressProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\nconst DEFAULT_THRESHOLD = 500;\n\nfunction isDisabledValue(isDisabled: MaybeAccessor<boolean> | undefined): boolean {\n  return typeof isDisabled === \"function\" ? isDisabled() : !!isDisabled;\n}\n\nfunction createLongPressEvent(type: LongPressEvent[\"type\"], e: PressEvent): LongPressEvent {\n  return {\n    type,\n    pointerType: e.pointerType,\n    target: e.target,\n    shiftKey: e.shiftKey,\n    ctrlKey: e.ctrlKey,\n    metaKey: e.metaKey,\n    altKey: e.altKey,\n    x: e.x,\n    y: e.y,\n  };\n}\n\n/**\n * Handles long press interactions across mouse and touch devices.\n */\nexport function createLongPress(props: LongPressProps = {}): LongPressResult {\n  const {\n    isDisabled,\n    pointerType,\n    onLongPressStart,\n    onLongPressEnd,\n    onLongPress,\n    threshold = DEFAULT_THRESHOLD,\n  } = props;\n\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  const { addGlobalListener } = createGlobalListeners();\n  const isAcceptedPointerType = (e: PressEvent) =>\n    pointerType\n      ? e.pointerType === pointerType\n      : e.pointerType === \"mouse\" || e.pointerType === \"touch\";\n\n  const { pressProps } = createPress({\n    isDisabled,\n    onPressStart(e) {\n      e.continuePropagation();\n      if (isAcceptedPointerType(e)) {\n        onLongPressStart?.(createLongPressEvent(\"longpressstart\", e));\n\n        timeoutId = setTimeout(() => {\n          // Prevent other press handlers from also handling this event.\n          e.target.dispatchEvent(new PointerEvent(\"pointercancel\", { bubbles: true }));\n\n          // Ensure target is focused. On touch devices, browsers typically focus on pointer up.\n          if (document.activeElement !== e.target) {\n            focusWithoutScrolling(e.target as HTMLElement);\n          }\n\n          onLongPress?.(createLongPressEvent(\"longpress\", e));\n          timeoutId = undefined;\n        }, threshold);\n\n        if (e.pointerType === \"touch\") {\n          const onContextMenu = (event: Event) => {\n            event.preventDefault();\n          };\n          const target = e.target as HTMLElement;\n          target.addEventListener(\"contextmenu\", onContextMenu, { once: true });\n\n          addGlobalListener(\n            \"pointerup\",\n            () => {\n              setTimeout(() => {\n                target.removeEventListener(\"contextmenu\", onContextMenu);\n              }, 30);\n            },\n            { isWindow: true, once: true },\n          );\n        }\n      }\n    },\n    onPressEnd(e) {\n      if (timeoutId) {\n        clearTimeout(timeoutId);\n        timeoutId = undefined;\n      }\n\n      if (onLongPressEnd && isAcceptedPointerType(e)) {\n        onLongPressEnd(createLongPressEvent(\"longpressend\", e));\n      }\n    },\n  });\n\n  const descriptionProps = createDescription(() =>\n    onLongPress && !isDisabledValue(props.isDisabled)\n      ? access(props.accessibilityDescription)\n      : undefined,\n  );\n\n  onOwnedCleanup(() => {\n    if (timeoutId) {\n      clearTimeout(timeoutId);\n      timeoutId = undefined;\n    }\n  });\n\n  const longPressProps = mergeProps(pressProps) as JSX.HTMLAttributes<HTMLElement>;\n  Object.defineProperty(longPressProps, \"aria-describedby\", {\n    get: () => descriptionProps[\"aria-describedby\"],\n    enumerable: true,\n    configurable: true,\n  });\n\n  return {\n    longPressProps,\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAM,oBAAoB;AAE1B,SAAS,gBAAgB,YAAyD;CAChF,OAAO,OAAO,eAAe,aAAa,WAAW,IAAI,CAAC,CAAC;AAC7D;AAEA,SAAS,qBAAqB,MAA8B,GAA+B;CACzF,OAAO;EACL;EACA,aAAa,EAAE;EACf,QAAQ,EAAE;EACV,UAAU,EAAE;EACZ,SAAS,EAAE;EACX,SAAS,EAAE;EACX,QAAQ,EAAE;EACV,GAAG,EAAE;EACL,GAAG,EAAE;CACP;AACF;;;;AAKA,SAAgB,gBAAgB,QAAwB,CAAC,GAAoB;CAC3E,MAAM,EACJ,YACA,aACA,kBACA,gBACA,aACA,YAAY,sBACV;CAEJ,IAAI;CACJ,MAAM,EAAE,sBAAsB,sBAAsB;CACpD,MAAM,yBAAyB,MAC7B,cACI,EAAE,gBAAgB,cAClB,EAAE,gBAAgB,WAAW,EAAE,gBAAgB;CAErD,MAAM,EAAE,eAAe,YAAY;EACjC;EACA,aAAa,GAAG;GACd,EAAE,oBAAoB;GACtB,IAAI,sBAAsB,CAAC,GAAG;IAC5B,mBAAmB,qBAAqB,kBAAkB,CAAC,CAAC;IAE5D,YAAY,iBAAiB;KAE3B,EAAE,OAAO,cAAc,IAAI,aAAa,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC;KAG3E,IAAI,SAAS,kBAAkB,EAAE,QAC/B,sBAAsB,EAAE,MAAqB;KAG/C,cAAc,qBAAqB,aAAa,CAAC,CAAC;KAClD,YAAY,KAAA;IACd,GAAG,SAAS;IAEZ,IAAI,EAAE,gBAAgB,SAAS;KAC7B,MAAM,iBAAiB,UAAiB;MACtC,MAAM,eAAe;KACvB;KACA,MAAM,SAAS,EAAE;KACjB,OAAO,iBAAiB,eAAe,eAAe,EAAE,MAAM,KAAK,CAAC;KAEpE,kBACE,mBACM;MACJ,iBAAiB;OACf,OAAO,oBAAoB,eAAe,aAAa;MACzD,GAAG,EAAE;KACP,GACA;MAAE,UAAU;MAAM,MAAM;KAAK,CAC/B;IACF;GACF;EACF;EACA,WAAW,GAAG;GACZ,IAAI,WAAW;IACb,aAAa,SAAS;IACtB,YAAY,KAAA;GACd;GAEA,IAAI,kBAAkB,sBAAsB,CAAC,GAC3C,eAAe,qBAAqB,gBAAgB,CAAC,CAAC;EAE1D;CACF,CAAC;CAED,MAAM,mBAAmB,wBACvB,eAAe,CAAC,gBAAgB,MAAM,UAAU,IAC5C,OAAO,MAAM,wBAAwB,IACrC,KAAA,CACN;CAEA,qBAAqB;EACnB,IAAI,WAAW;GACb,aAAa,SAAS;GACtB,YAAY,KAAA;EACd;CACF,CAAC;CAED,MAAM,iBAAiB,WAAW,UAAU;CAC5C,OAAO,eAAe,gBAAgB,oBAAoB;EACxD,WAAW,iBAAiB;EAC5B,YAAY;EACZ,cAAc;CAChB,CAAC;CAED,OAAO,EACL,eACF;AACF"}