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

package/dist/_chunk/toast.js

@@ -1,9 +1,34 @@
-import { n as focusWithoutScrolling } from "./focus.js";
-import { o as getInteractionModality } from "./createInteractionModality.js";
+/*
+* 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/toast/useToast.ts
+/*
+* Copyright 2025 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/toast/useToastRegion.ts
+import { t as onOwnedCleanup } from "./owner.js";
+import { N as getInteractionModality, T as focusWithoutScrolling } from "./dom.js";
 import { t as createHover } from "./createHover.js";
 import { createId } from "../ssr/index.js";
 import { t as createLandmark } from "./createLandmark.js";
-import { createEffect, createMemo, onCleanup } from "solid-js";
+import { createMemo, createRenderEffect, createSignal, createTrackedEffect } from "solid-js";
+import { isServer } from "@solidjs/web";
 //#region src/toast/createToast.ts
 /**
 * createToast hook for Solidaria
@@ -49,6 +74,10 @@ function createToast(props) {
 	const close = () => {
 		props.state.close(props.toast.key);
 	};
+	const [isVisible, setIsVisible] = createSignal(false, { ownedWrite: true });
+	createRenderEffect(() => isServer, (server) => {
+		if (!server) setIsVisible(true);
+	});
 	const toastProps = createMemo(() => ({
 		role: "alertdialog",
 		"aria-modal": "false",
@@ -58,11 +87,13 @@ function createToast(props) {
 		"data-animation": props.toast.animation,
 		"data-key": props.toast.key
 	}));
-	const contentProps = createMemo(() => ({
+	const contentProps = {
 		role: "alert",
 		"aria-atomic": "true",
-		"aria-live": "assertive"
-	}));
+		get "aria-hidden"() {
+			return isVisible() ? void 0 : "true";
+		}
+	};
 	const titleProps = createMemo(() => ({ id: titleId }));
 	const descriptionProps = createMemo(() => ({ id: descriptionId }));
 	const closeButtonProps = createMemo(() => ({
@@ -74,7 +105,7 @@ function createToast(props) {
 			return toastProps();
 		},
 		get contentProps() {
-			return contentProps();
+			return contentProps;
 		},
 		get titleProps() {
 			return titleProps();
@@ -106,7 +137,7 @@ function createToast(props) {
 * @example
 * ```tsx
 * import { createToastRegion } from 'solidaria';
-* import { For, Show } from 'solid-js';
+* import { For, Show } from "solid-js";
 *
 * function ToastRegion(props) {
 *   let ref;
@@ -186,7 +217,7 @@ function createToastRegion(props) {
 			updateTimers();
 		}
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const currentVisibleToasts = visibleToasts();
 		const element = regionRef();
 		if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {
@@ -204,32 +235,34 @@ function createToastRegion(props) {
 			isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key)
 		}));
 		const removedFocusedToastIndex = allToasts.findIndex((toast) => toast.index === focusedToastIndex && toast.isRemoved);
-		if (removedFocusedToastIndex > -1) if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
-		else {
-			let index = 0;
-			let nextToast;
-			let previousToast;
-			while (index <= removedFocusedToastIndex) {
-				if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
-				index++;
-			}
-			while (index < allToasts.length) {
-				if (!allToasts[index]?.isRemoved) {
-					nextToast = index - 1;
-					break;
+		if (removedFocusedToastIndex > -1) {
+			if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
+			else {
+				let index = 0;
+				let nextToast;
+				let previousToast;
+				while (index <= removedFocusedToastIndex) {
+					if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
+					index++;
+				}
+				while (index < allToasts.length) {
+					if (!allToasts[index]?.isRemoved) {
+						nextToast = index - 1;
+						break;
+					}
+					index++;
 				}
-				index++;
+				if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
+				if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
+				else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
 			}
-			if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
-			if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
-			else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
 		}
 		previousVisibleToasts = currentVisibleToasts;
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (visibleToasts().length === 0) restoreLastFocused();
 	});
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		restoreLastFocused();
 	});
 	const regionProps = createMemo(() => ({

package/dist/_chunk/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":[],"sources":["../../src/toast/createToast.ts","../../src/toast/createToastRegion.ts"],"sourcesContent":["/**\n * createToast hook for Solidaria\n *\n * Provides the accessibility implementation for a Toast component.\n *\n * Port of @react-aria/toast useToast.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { type QueuedToast, type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\n\nexport interface AriaToastProps<T> {\n  /** The toast to display. */\n  toast: QueuedToast<T>;\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** Whether the rendered toast includes a title element. */\n  hasTitle?: boolean;\n  /** Whether the rendered toast includes a description element. */\n  hasDescription?: boolean;\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast content element (contains the message). */\n  contentProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast title element. */\n  titleProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the close button. */\n  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Toast component.\n *\n * The toast uses role=\"alertdialog\" to announce content to screen readers.\n * The content area uses role=\"alert\" for the actual message.\n *\n * @example\n * ```tsx\n * import { createToast } from 'solidaria';\n *\n * function Toast(props) {\n *   const {\n *     toastProps,\n *     contentProps,\n *     titleProps,\n *     closeButtonProps\n *   } = createToast({ toast: props.toast, state: props.state });\n *\n *   return (\n *     <div {...toastProps}>\n *       <div {...contentProps}>\n *         <div {...titleProps}>{props.toast.content.title}</div>\n *       </div>\n *       <button {...closeButtonProps}>×</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createToast<T>(props: AriaToastProps<T>): ToastAria {\n  const titleId = createId();\n  const descriptionId = createId();\n  const hasTitle = props.hasTitle ?? true;\n  const hasDescription = props.hasDescription ?? true;\n\n  const close = () => {\n    props.state.close(props.toast.key);\n  };\n\n  // Toast container - role=\"alertdialog\" for screen readers\n  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alertdialog\",\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": hasTitle ? titleId : undefined,\n    \"aria-describedby\": hasDescription ? descriptionId : undefined,\n    tabIndex: 0,\n    \"data-animation\": props.toast.animation,\n    \"data-key\": props.toast.key,\n  }));\n\n  // Content area with role=\"alert\" for immediate announcement\n  const contentProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alert\",\n    \"aria-atomic\": \"true\",\n    \"aria-live\": \"assertive\",\n  }));\n\n  // Title props\n  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: titleId,\n  }));\n\n  // Description props\n  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: descriptionId,\n  }));\n\n  // Close button\n  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({\n    \"aria-label\": \"Close\",\n    onClick: close,\n  }));\n\n  return {\n    get toastProps() {\n      return toastProps();\n    },\n    get contentProps() {\n      return contentProps();\n    },\n    get titleProps() {\n      return titleProps();\n    },\n    get descriptionProps() {\n      return descriptionProps();\n    },\n    get closeButtonProps() {\n      return closeButtonProps();\n    },\n  };\n}\n","/**\n * createToastRegion hook for Solidaria\n *\n * Provides the accessibility implementation for a ToastRegion component.\n * The region is a landmark that contains all visible toasts.\n *\n * Port of @react-aria/toast useToastRegion.\n */\n\nimport { type Accessor, type JSX, createEffect, createMemo, onCleanup } from \"solid-js\";\nimport { type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { getInteractionModality } from \"../interactions/createInteractionModality\";\nimport { createLandmark } from \"../landmark/createLandmark\";\nimport { focusWithoutScrolling } from \"../utils/focus\";\n\nexport interface AriaToastRegionProps<T> {\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** The toast region element. Required for landmark navigation and focus recovery. */\n  ref?: Accessor<HTMLElement | undefined>;\n  /** An accessible label for the region. */\n  \"aria-label\"?: string;\n}\n\nexport interface ToastRegionAria {\n  /** Props for the toast region container element. */\n  regionProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a ToastRegion component.\n *\n * The region is a landmark (role=\"region\") that contains all visible toasts.\n * It pauses toast timers on hover or focus to give users time to read/interact.\n *\n * @example\n * ```tsx\n * import { createToastRegion } from 'solidaria';\n * import { For, Show } from 'solid-js';\n *\n * function ToastRegion(props) {\n *   let ref;\n *   const { regionProps } = createToastRegion({ state: props.state });\n *\n *   return (\n *     <Show when={props.state.visibleToasts().length > 0}>\n *       <div {...regionProps} ref={ref}>\n *         <For each={props.state.visibleToasts()}>\n *           {(toast) => <Toast toast={toast} state={props.state} />}\n *         </For>\n *       </div>\n *     </Show>\n *   );\n * }\n * ```\n */\nexport function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {\n  const visibleToasts = () =>\n    typeof props.state.visibleToasts === \"function\" ? props.state.visibleToasts() : [];\n  const regionRef = () => props.ref?.();\n  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);\n\n  const { landmarkProps } = createLandmark(\n    () => ({\n      role: \"region\",\n      \"aria-label\": props[\"aria-label\"] ?? \"Notifications\",\n    }),\n    activeRegionRef,\n  );\n\n  let isHovered = false;\n  let isFocused = false;\n  let toastElements: HTMLElement[] = [];\n  let previousVisibleToasts = visibleToasts();\n  let focusedToastIndex = -1;\n  let lastFocused: HTMLElement | null = null;\n\n  const updateTimers = () => {\n    if (isHovered || isFocused) {\n      props.state.pauseAll();\n    } else {\n      props.state.resumeAll();\n    }\n  };\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => {\n      isHovered = true;\n      updateTimers();\n    },\n    onHoverEnd: () => {\n      isHovered = false;\n      updateTimers();\n    },\n  });\n\n  const getToastElements = () => {\n    const element = regionRef();\n    return element ? [...element.querySelectorAll<HTMLElement>('[role=\"alertdialog\"]')] : [];\n  };\n\n  const restoreLastFocused = () => {\n    if (!lastFocused?.isConnected) {\n      lastFocused = null;\n      return;\n    }\n\n    if (getInteractionModality() === \"pointer\") {\n      focusWithoutScrolling(lastFocused);\n    } else {\n      lastFocused.focus();\n    }\n\n    lastFocused = null;\n  };\n\n  const handleFocusIn = (e: FocusEvent) => {\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement | null;\n\n    if (!isFocused) {\n      isFocused = true;\n      if (relatedTarget && !currentTarget.contains(relatedTarget)) {\n        lastFocused = relatedTarget;\n      }\n      updateTimers();\n    }\n\n    toastElements = getToastElements();\n    const target =\n      e.target instanceof Element ? e.target.closest<HTMLElement>('[role=\"alertdialog\"]') : null;\n    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;\n  };\n\n  const handleFocusOut = (e: FocusEvent) => {\n    const target = e.relatedTarget as HTMLElement | null;\n    const currentTarget = e.currentTarget as HTMLElement;\n    if (!target || !currentTarget.contains(target)) {\n      isFocused = false;\n      focusedToastIndex = -1;\n      updateTimers();\n    }\n  };\n\n  createEffect(() => {\n    const currentVisibleToasts = visibleToasts();\n    const element = regionRef();\n\n    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {\n      toastElements = [];\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    toastElements = getToastElements();\n\n    const unchanged =\n      previousVisibleToasts.length === currentVisibleToasts.length &&\n      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);\n\n    if (unchanged) {\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    const allToasts = previousVisibleToasts.map((toast, index) => ({\n      index,\n      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),\n    }));\n    const removedFocusedToastIndex = allToasts.findIndex(\n      (toast) => toast.index === focusedToastIndex && toast.isRemoved,\n    );\n\n    if (removedFocusedToastIndex > -1) {\n      if (getInteractionModality() === \"pointer\" && lastFocused?.isConnected) {\n        focusWithoutScrolling(lastFocused);\n      } else {\n        let index = 0;\n        let nextToast: number | undefined;\n        let previousToast: number | undefined;\n\n        while (index <= removedFocusedToastIndex) {\n          if (!allToasts[index]?.isRemoved) {\n            previousToast = Math.max(0, index - 1);\n          }\n          index++;\n        }\n\n        while (index < allToasts.length) {\n          if (!allToasts[index]?.isRemoved) {\n            nextToast = index - 1;\n            break;\n          }\n          index++;\n        }\n\n        if (previousToast === undefined && nextToast === undefined) {\n          previousToast = 0;\n        }\n\n        if (\n          previousToast !== undefined &&\n          previousToast >= 0 &&\n          previousToast < toastElements.length\n        ) {\n          focusWithoutScrolling(toastElements[previousToast]);\n        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {\n          focusWithoutScrolling(toastElements[nextToast]);\n        }\n      }\n    }\n\n    previousVisibleToasts = currentVisibleToasts;\n  });\n\n  createEffect(() => {\n    if (visibleToasts().length === 0) {\n      restoreLastFocused();\n    }\n  });\n\n  onCleanup(() => {\n    restoreLastFocused();\n  });\n\n  // Region props\n  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...landmarkProps,\n    ...hoverProps,\n    tabIndex: -1,\n    \"data-solidaria-top-layer\": \"true\",\n    onFocusIn: handleFocusIn,\n    onFocusOut: handleFocusOut,\n  }));\n\n  return {\n    get regionProps() {\n      return regionProps();\n    },\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"toast.js","names":[],"sources":["../../src/toast/createToast.ts","../../src/toast/createToastRegion.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/toast/useToast.ts\n\n/**\n * createToast hook for Solidaria\n *\n * Provides the accessibility implementation for a Toast component.\n *\n * Port of @react-aria/toast useToast.\n */\n\nimport { createMemo, createRenderEffect, createSignal } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { isServer } from \"@solidjs/web\";\nimport { type QueuedToast, type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\n\nexport interface AriaToastProps<T> {\n  /** The toast to display. */\n  toast: QueuedToast<T>;\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** Whether the rendered toast includes a title element. */\n  hasTitle?: boolean;\n  /** Whether the rendered toast includes a description element. */\n  hasDescription?: boolean;\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast content element (contains the message). */\n  contentProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast title element. */\n  titleProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the close button. */\n  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Toast component.\n *\n * The toast uses role=\"alertdialog\" to announce content to screen readers.\n * The content area uses role=\"alert\" for the actual message.\n *\n * @example\n * ```tsx\n * import { createToast } from 'solidaria';\n *\n * function Toast(props) {\n *   const {\n *     toastProps,\n *     contentProps,\n *     titleProps,\n *     closeButtonProps\n *   } = createToast({ toast: props.toast, state: props.state });\n *\n *   return (\n *     <div {...toastProps}>\n *       <div {...contentProps}>\n *         <div {...titleProps}>{props.toast.content.title}</div>\n *       </div>\n *       <button {...closeButtonProps}>×</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createToast<T>(props: AriaToastProps<T>): ToastAria {\n  const titleId = createId();\n  const descriptionId = createId();\n  const hasTitle = props.hasTitle ?? true;\n  const hasDescription = props.hasDescription ?? true;\n\n  const close = () => {\n    props.state.close(props.toast.key);\n  };\n\n  // RAC useToast hides the alert until after layout so the live region\n  // announces on appear, not during SSR. `useLayoutEffect` → createRenderEffect.\n  const [isVisible, setIsVisible] = createSignal(false, { ownedWrite: true });\n  createRenderEffect(\n    () => isServer,\n    (server) => {\n      if (!server) {\n        setIsVisible(true);\n      }\n    },\n  );\n\n  // Toast container - role=\"alertdialog\" for screen readers\n  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alertdialog\",\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": hasTitle ? titleId : undefined,\n    \"aria-describedby\": hasDescription ? descriptionId : undefined,\n    tabIndex: 0,\n    \"data-animation\": props.toast.animation,\n    \"data-key\": props.toast.key,\n  }));\n\n  // Content area. Match RAC useToast: role=\"alert\" + aria-atomic; aria-hidden\n  // until mounted. Getters keep the object stable so slotted context still\n  // sees the post-layout visible state. role=alert is implicitly assertive —\n  // do not add aria-live (RAC does not).\n  const contentProps: JSX.HTMLAttributes<HTMLElement> = {\n    role: \"alert\",\n    \"aria-atomic\": \"true\",\n    get \"aria-hidden\"() {\n      return isVisible() ? undefined : \"true\";\n    },\n  };\n\n  // Title props\n  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: titleId,\n  }));\n\n  // Description props\n  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: descriptionId,\n  }));\n\n  // Close button\n  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({\n    \"aria-label\": \"Close\",\n    onClick: close,\n  }));\n\n  return {\n    get toastProps() {\n      return toastProps();\n    },\n    get contentProps() {\n      return contentProps;\n    },\n    get titleProps() {\n      return titleProps();\n    },\n    get descriptionProps() {\n      return descriptionProps();\n    },\n    get closeButtonProps() {\n      return closeButtonProps();\n    },\n  };\n}\n","/*\n * Copyright 2025 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/toast/useToastRegion.ts\n\n/**\n * createToastRegion hook for Solidaria\n *\n * Provides the accessibility implementation for a ToastRegion component.\n * The region is a landmark that contains all visible toasts.\n *\n * Port of @react-aria/toast useToastRegion.\n */\n\nimport { onOwnedCleanup } from \"../utils/owner\";\nimport { createMemo, createTrackedEffect } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { getInteractionModality } from \"../interactions/createInteractionModality\";\nimport { createLandmark } from \"../landmark/createLandmark\";\nimport { focusWithoutScrolling } from \"../utils/focus\";\nexport interface AriaToastRegionProps<T> {\n  /** The toast state from createToastState. */ state: ToastState<T>;\n  /** The toast region element. Required for landmark navigation and focus recovery. */ ref?: Accessor<\n    HTMLElement | undefined\n  >;\n  /** An accessible label for the region. */ \"aria-label\"?: string;\n}\nexport interface ToastRegionAria {\n  /** Props for the toast region container element. */ regionProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a ToastRegion component.\n *\n * The region is a landmark (role=\"region\") that contains all visible toasts.\n * It pauses toast timers on hover or focus to give users time to read/interact.\n *\n * @example\n * ```tsx\n * import { createToastRegion } from 'solidaria';\n * import { For, Show } from \"solid-js\";\n *\n * function ToastRegion(props) {\n *   let ref;\n *   const { regionProps } = createToastRegion({ state: props.state });\n *\n *   return (\n *     <Show when={props.state.visibleToasts().length > 0}>\n *       <div {...regionProps} ref={ref}>\n *         <For each={props.state.visibleToasts()}>\n *           {(toast) => <Toast toast={toast} state={props.state} />}\n *         </For>\n *       </div>\n *     </Show>\n *   );\n * }\n * ```\n */\nexport function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {\n  const visibleToasts = () =>\n    typeof props.state.visibleToasts === \"function\" ? props.state.visibleToasts() : [];\n  const regionRef = () => props.ref?.();\n  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);\n\n  const { landmarkProps } = createLandmark(\n    () => ({\n      role: \"region\",\n      \"aria-label\": props[\"aria-label\"] ?? \"Notifications\",\n    }),\n    activeRegionRef,\n  );\n\n  let isHovered = false;\n  let isFocused = false;\n  let toastElements: HTMLElement[] = [];\n  let previousVisibleToasts = visibleToasts();\n  let focusedToastIndex = -1;\n  let lastFocused: HTMLElement | null = null;\n\n  const updateTimers = () => {\n    if (isHovered || isFocused) {\n      props.state.pauseAll();\n    } else {\n      props.state.resumeAll();\n    }\n  };\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => {\n      isHovered = true;\n      updateTimers();\n    },\n    onHoverEnd: () => {\n      isHovered = false;\n      updateTimers();\n    },\n  });\n\n  const getToastElements = () => {\n    const element = regionRef();\n    return element ? [...element.querySelectorAll<HTMLElement>('[role=\"alertdialog\"]')] : [];\n  };\n\n  const restoreLastFocused = () => {\n    if (!lastFocused?.isConnected) {\n      lastFocused = null;\n      return;\n    }\n\n    if (getInteractionModality() === \"pointer\") {\n      focusWithoutScrolling(lastFocused);\n    } else {\n      lastFocused.focus();\n    }\n\n    lastFocused = null;\n  };\n\n  const handleFocusIn = (e: FocusEvent) => {\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement | null;\n\n    if (!isFocused) {\n      isFocused = true;\n      if (relatedTarget && !currentTarget.contains(relatedTarget)) {\n        lastFocused = relatedTarget;\n      }\n      updateTimers();\n    }\n\n    toastElements = getToastElements();\n    const target =\n      e.target instanceof Element ? e.target.closest<HTMLElement>('[role=\"alertdialog\"]') : null;\n    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;\n  };\n\n  const handleFocusOut = (e: FocusEvent) => {\n    const target = e.relatedTarget as HTMLElement | null;\n    const currentTarget = e.currentTarget as HTMLElement;\n    if (!target || !currentTarget.contains(target)) {\n      isFocused = false;\n      focusedToastIndex = -1;\n      updateTimers();\n    }\n  };\n\n  createTrackedEffect(() => {\n    const currentVisibleToasts = visibleToasts();\n    const element = regionRef();\n\n    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {\n      toastElements = [];\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    toastElements = getToastElements();\n\n    const unchanged =\n      previousVisibleToasts.length === currentVisibleToasts.length &&\n      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);\n\n    if (unchanged) {\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    const allToasts = previousVisibleToasts.map((toast, index) => ({\n      index,\n      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),\n    }));\n    const removedFocusedToastIndex = allToasts.findIndex(\n      (toast) => toast.index === focusedToastIndex && toast.isRemoved,\n    );\n\n    if (removedFocusedToastIndex > -1) {\n      if (getInteractionModality() === \"pointer\" && lastFocused?.isConnected) {\n        focusWithoutScrolling(lastFocused);\n      } else {\n        let index = 0;\n        let nextToast: number | undefined;\n        let previousToast: number | undefined;\n\n        while (index <= removedFocusedToastIndex) {\n          if (!allToasts[index]?.isRemoved) {\n            previousToast = Math.max(0, index - 1);\n          }\n          index++;\n        }\n\n        while (index < allToasts.length) {\n          if (!allToasts[index]?.isRemoved) {\n            nextToast = index - 1;\n            break;\n          }\n          index++;\n        }\n\n        if (previousToast === undefined && nextToast === undefined) {\n          previousToast = 0;\n        }\n\n        if (\n          previousToast !== undefined &&\n          previousToast >= 0 &&\n          previousToast < toastElements.length\n        ) {\n          focusWithoutScrolling(toastElements[previousToast]);\n        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {\n          focusWithoutScrolling(toastElements[nextToast]);\n        }\n      }\n    }\n\n    previousVisibleToasts = currentVisibleToasts;\n  });\n\n  createTrackedEffect(() => {\n    if (visibleToasts().length === 0) {\n      restoreLastFocused();\n    }\n  });\n\n  onOwnedCleanup(() => {\n    restoreLastFocused();\n  });\n\n  // Region props\n  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...landmarkProps,\n    ...hoverProps,\n    tabIndex: -1,\n    \"data-solidaria-top-layer\": \"true\",\n    onFocusIn: handleFocusIn,\n    onFocusOut: handleFocusOut,\n  }));\n\n  return {\n    get regionProps() {\n      return regionProps();\n    },\n  };\n}\n"],"mappings":"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"}

package/dist/_chunk/toast.jsx

@@ -1,9 +1,34 @@
-import { n as focusWithoutScrolling } from "./focus.jsx";
-import { o as getInteractionModality } from "./createInteractionModality.jsx";
+/*
+* 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/toast/useToast.ts
+/*
+* Copyright 2025 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/toast/useToastRegion.ts
+import { t as onOwnedCleanup } from "./owner.jsx";
+import { N as getInteractionModality, T as focusWithoutScrolling } from "./dom.jsx";
 import { t as createHover } from "./createHover.jsx";
 import { createId } from "../ssr/index.jsx";
 import { t as createLandmark } from "./createLandmark.jsx";
-import { createEffect, createMemo, onCleanup } from "solid-js";
+import { createMemo, createRenderEffect, createSignal, createTrackedEffect } from "solid-js";
+import { isServer } from "@solidjs/web";
 //#region src/toast/createToast.ts
 /**
 * createToast hook for Solidaria
@@ -49,6 +74,10 @@ function createToast(props) {
 	const close = () => {
 		props.state.close(props.toast.key);
 	};
+	const [isVisible, setIsVisible] = createSignal(false, { ownedWrite: true });
+	createRenderEffect(() => isServer, (server) => {
+		if (!server) setIsVisible(true);
+	});
 	const toastProps = createMemo(() => ({
 		role: "alertdialog",
 		"aria-modal": "false",
@@ -58,11 +87,13 @@ function createToast(props) {
 		"data-animation": props.toast.animation,
 		"data-key": props.toast.key
 	}));
-	const contentProps = createMemo(() => ({
+	const contentProps = {
 		role: "alert",
 		"aria-atomic": "true",
-		"aria-live": "assertive"
-	}));
+		get "aria-hidden"() {
+			return isVisible() ? void 0 : "true";
+		}
+	};
 	const titleProps = createMemo(() => ({ id: titleId }));
 	const descriptionProps = createMemo(() => ({ id: descriptionId }));
 	const closeButtonProps = createMemo(() => ({
@@ -74,7 +105,7 @@ function createToast(props) {
 			return toastProps();
 		},
 		get contentProps() {
-			return contentProps();
+			return contentProps;
 		},
 		get titleProps() {
 			return titleProps();
@@ -106,7 +137,7 @@ function createToast(props) {
 * @example
 * ```tsx
 * import { createToastRegion } from 'solidaria';
-* import { For, Show } from 'solid-js';
+* import { For, Show } from "solid-js";
 *
 * function ToastRegion(props) {
 *   let ref;
@@ -186,7 +217,7 @@ function createToastRegion(props) {
 			updateTimers();
 		}
 	};
-	createEffect(() => {
+	createTrackedEffect(() => {
 		const currentVisibleToasts = visibleToasts();
 		const element = regionRef();
 		if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {
@@ -204,32 +235,34 @@ function createToastRegion(props) {
 			isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key)
 		}));
 		const removedFocusedToastIndex = allToasts.findIndex((toast) => toast.index === focusedToastIndex && toast.isRemoved);
-		if (removedFocusedToastIndex > -1) if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
-		else {
-			let index = 0;
-			let nextToast;
-			let previousToast;
-			while (index <= removedFocusedToastIndex) {
-				if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
-				index++;
-			}
-			while (index < allToasts.length) {
-				if (!allToasts[index]?.isRemoved) {
-					nextToast = index - 1;
-					break;
+		if (removedFocusedToastIndex > -1) {
+			if (getInteractionModality() === "pointer" && lastFocused?.isConnected) focusWithoutScrolling(lastFocused);
+			else {
+				let index = 0;
+				let nextToast;
+				let previousToast;
+				while (index <= removedFocusedToastIndex) {
+					if (!allToasts[index]?.isRemoved) previousToast = Math.max(0, index - 1);
+					index++;
+				}
+				while (index < allToasts.length) {
+					if (!allToasts[index]?.isRemoved) {
+						nextToast = index - 1;
+						break;
+					}
+					index++;
 				}
-				index++;
+				if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
+				if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
+				else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
 			}
-			if (previousToast === void 0 && nextToast === void 0) previousToast = 0;
-			if (previousToast !== void 0 && previousToast >= 0 && previousToast < toastElements.length) focusWithoutScrolling(toastElements[previousToast]);
-			else if (nextToast !== void 0 && nextToast >= 0 && nextToast < toastElements.length) focusWithoutScrolling(toastElements[nextToast]);
 		}
 		previousVisibleToasts = currentVisibleToasts;
 	});
-	createEffect(() => {
+	createTrackedEffect(() => {
 		if (visibleToasts().length === 0) restoreLastFocused();
 	});
-	onCleanup(() => {
+	onOwnedCleanup(() => {
 		restoreLastFocused();
 	});
 	const regionProps = createMemo(() => ({

package/dist/_chunk/toast.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"toast.jsx","names":[],"sources":["../../src/toast/createToast.ts","../../src/toast/createToastRegion.ts"],"sourcesContent":["/**\n * createToast hook for Solidaria\n *\n * Provides the accessibility implementation for a Toast component.\n *\n * Port of @react-aria/toast useToast.\n */\n\nimport { type JSX, createMemo } from \"solid-js\";\nimport { type QueuedToast, type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\n\nexport interface AriaToastProps<T> {\n  /** The toast to display. */\n  toast: QueuedToast<T>;\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** Whether the rendered toast includes a title element. */\n  hasTitle?: boolean;\n  /** Whether the rendered toast includes a description element. */\n  hasDescription?: boolean;\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast content element (contains the message). */\n  contentProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast title element. */\n  titleProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the close button. */\n  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Toast component.\n *\n * The toast uses role=\"alertdialog\" to announce content to screen readers.\n * The content area uses role=\"alert\" for the actual message.\n *\n * @example\n * ```tsx\n * import { createToast } from 'solidaria';\n *\n * function Toast(props) {\n *   const {\n *     toastProps,\n *     contentProps,\n *     titleProps,\n *     closeButtonProps\n *   } = createToast({ toast: props.toast, state: props.state });\n *\n *   return (\n *     <div {...toastProps}>\n *       <div {...contentProps}>\n *         <div {...titleProps}>{props.toast.content.title}</div>\n *       </div>\n *       <button {...closeButtonProps}>×</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createToast<T>(props: AriaToastProps<T>): ToastAria {\n  const titleId = createId();\n  const descriptionId = createId();\n  const hasTitle = props.hasTitle ?? true;\n  const hasDescription = props.hasDescription ?? true;\n\n  const close = () => {\n    props.state.close(props.toast.key);\n  };\n\n  // Toast container - role=\"alertdialog\" for screen readers\n  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alertdialog\",\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": hasTitle ? titleId : undefined,\n    \"aria-describedby\": hasDescription ? descriptionId : undefined,\n    tabIndex: 0,\n    \"data-animation\": props.toast.animation,\n    \"data-key\": props.toast.key,\n  }));\n\n  // Content area with role=\"alert\" for immediate announcement\n  const contentProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alert\",\n    \"aria-atomic\": \"true\",\n    \"aria-live\": \"assertive\",\n  }));\n\n  // Title props\n  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: titleId,\n  }));\n\n  // Description props\n  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: descriptionId,\n  }));\n\n  // Close button\n  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({\n    \"aria-label\": \"Close\",\n    onClick: close,\n  }));\n\n  return {\n    get toastProps() {\n      return toastProps();\n    },\n    get contentProps() {\n      return contentProps();\n    },\n    get titleProps() {\n      return titleProps();\n    },\n    get descriptionProps() {\n      return descriptionProps();\n    },\n    get closeButtonProps() {\n      return closeButtonProps();\n    },\n  };\n}\n","/**\n * createToastRegion hook for Solidaria\n *\n * Provides the accessibility implementation for a ToastRegion component.\n * The region is a landmark that contains all visible toasts.\n *\n * Port of @react-aria/toast useToastRegion.\n */\n\nimport { type Accessor, type JSX, createEffect, createMemo, onCleanup } from \"solid-js\";\nimport { type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { getInteractionModality } from \"../interactions/createInteractionModality\";\nimport { createLandmark } from \"../landmark/createLandmark\";\nimport { focusWithoutScrolling } from \"../utils/focus\";\n\nexport interface AriaToastRegionProps<T> {\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** The toast region element. Required for landmark navigation and focus recovery. */\n  ref?: Accessor<HTMLElement | undefined>;\n  /** An accessible label for the region. */\n  \"aria-label\"?: string;\n}\n\nexport interface ToastRegionAria {\n  /** Props for the toast region container element. */\n  regionProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a ToastRegion component.\n *\n * The region is a landmark (role=\"region\") that contains all visible toasts.\n * It pauses toast timers on hover or focus to give users time to read/interact.\n *\n * @example\n * ```tsx\n * import { createToastRegion } from 'solidaria';\n * import { For, Show } from 'solid-js';\n *\n * function ToastRegion(props) {\n *   let ref;\n *   const { regionProps } = createToastRegion({ state: props.state });\n *\n *   return (\n *     <Show when={props.state.visibleToasts().length > 0}>\n *       <div {...regionProps} ref={ref}>\n *         <For each={props.state.visibleToasts()}>\n *           {(toast) => <Toast toast={toast} state={props.state} />}\n *         </For>\n *       </div>\n *     </Show>\n *   );\n * }\n * ```\n */\nexport function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {\n  const visibleToasts = () =>\n    typeof props.state.visibleToasts === \"function\" ? props.state.visibleToasts() : [];\n  const regionRef = () => props.ref?.();\n  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);\n\n  const { landmarkProps } = createLandmark(\n    () => ({\n      role: \"region\",\n      \"aria-label\": props[\"aria-label\"] ?? \"Notifications\",\n    }),\n    activeRegionRef,\n  );\n\n  let isHovered = false;\n  let isFocused = false;\n  let toastElements: HTMLElement[] = [];\n  let previousVisibleToasts = visibleToasts();\n  let focusedToastIndex = -1;\n  let lastFocused: HTMLElement | null = null;\n\n  const updateTimers = () => {\n    if (isHovered || isFocused) {\n      props.state.pauseAll();\n    } else {\n      props.state.resumeAll();\n    }\n  };\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => {\n      isHovered = true;\n      updateTimers();\n    },\n    onHoverEnd: () => {\n      isHovered = false;\n      updateTimers();\n    },\n  });\n\n  const getToastElements = () => {\n    const element = regionRef();\n    return element ? [...element.querySelectorAll<HTMLElement>('[role=\"alertdialog\"]')] : [];\n  };\n\n  const restoreLastFocused = () => {\n    if (!lastFocused?.isConnected) {\n      lastFocused = null;\n      return;\n    }\n\n    if (getInteractionModality() === \"pointer\") {\n      focusWithoutScrolling(lastFocused);\n    } else {\n      lastFocused.focus();\n    }\n\n    lastFocused = null;\n  };\n\n  const handleFocusIn = (e: FocusEvent) => {\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement | null;\n\n    if (!isFocused) {\n      isFocused = true;\n      if (relatedTarget && !currentTarget.contains(relatedTarget)) {\n        lastFocused = relatedTarget;\n      }\n      updateTimers();\n    }\n\n    toastElements = getToastElements();\n    const target =\n      e.target instanceof Element ? e.target.closest<HTMLElement>('[role=\"alertdialog\"]') : null;\n    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;\n  };\n\n  const handleFocusOut = (e: FocusEvent) => {\n    const target = e.relatedTarget as HTMLElement | null;\n    const currentTarget = e.currentTarget as HTMLElement;\n    if (!target || !currentTarget.contains(target)) {\n      isFocused = false;\n      focusedToastIndex = -1;\n      updateTimers();\n    }\n  };\n\n  createEffect(() => {\n    const currentVisibleToasts = visibleToasts();\n    const element = regionRef();\n\n    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {\n      toastElements = [];\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    toastElements = getToastElements();\n\n    const unchanged =\n      previousVisibleToasts.length === currentVisibleToasts.length &&\n      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);\n\n    if (unchanged) {\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    const allToasts = previousVisibleToasts.map((toast, index) => ({\n      index,\n      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),\n    }));\n    const removedFocusedToastIndex = allToasts.findIndex(\n      (toast) => toast.index === focusedToastIndex && toast.isRemoved,\n    );\n\n    if (removedFocusedToastIndex > -1) {\n      if (getInteractionModality() === \"pointer\" && lastFocused?.isConnected) {\n        focusWithoutScrolling(lastFocused);\n      } else {\n        let index = 0;\n        let nextToast: number | undefined;\n        let previousToast: number | undefined;\n\n        while (index <= removedFocusedToastIndex) {\n          if (!allToasts[index]?.isRemoved) {\n            previousToast = Math.max(0, index - 1);\n          }\n          index++;\n        }\n\n        while (index < allToasts.length) {\n          if (!allToasts[index]?.isRemoved) {\n            nextToast = index - 1;\n            break;\n          }\n          index++;\n        }\n\n        if (previousToast === undefined && nextToast === undefined) {\n          previousToast = 0;\n        }\n\n        if (\n          previousToast !== undefined &&\n          previousToast >= 0 &&\n          previousToast < toastElements.length\n        ) {\n          focusWithoutScrolling(toastElements[previousToast]);\n        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {\n          focusWithoutScrolling(toastElements[nextToast]);\n        }\n      }\n    }\n\n    previousVisibleToasts = currentVisibleToasts;\n  });\n\n  createEffect(() => {\n    if (visibleToasts().length === 0) {\n      restoreLastFocused();\n    }\n  });\n\n  onCleanup(() => {\n    restoreLastFocused();\n  });\n\n  // Region props\n  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...landmarkProps,\n    ...hoverProps,\n    tabIndex: -1,\n    \"data-solidaria-top-layer\": \"true\",\n    onFocusIn: handleFocusIn,\n    onFocusOut: handleFocusOut,\n  }));\n\n  return {\n    get regionProps() {\n      return regionProps();\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA,SAAgB,YAAe,OAAqC;CAClE,MAAM,UAAU,SAAS;CACzB,MAAM,gBAAgB,SAAS;CAC/B,MAAM,WAAW,MAAM,YAAY;CACnC,MAAM,iBAAiB,MAAM,kBAAkB;CAE/C,MAAM,cAAc;EAClB,MAAM,MAAM,MAAM,MAAM,MAAM,GAAG;CACnC;CAGA,MAAM,aAAa,kBAAmD;EACpE,MAAM;EACN,cAAc;EACd,mBAAmB,WAAW,UAAU,KAAA;EACxC,oBAAoB,iBAAiB,gBAAgB,KAAA;EACrD,UAAU;EACV,kBAAkB,MAAM,MAAM;EAC9B,YAAY,MAAM,MAAM;CAC1B,EAAE;CAGF,MAAM,eAAe,kBAAmD;EACtE,MAAM;EACN,eAAe;EACf,aAAa;CACf,EAAE;CAGF,MAAM,aAAa,kBAAmD,EACpE,IAAI,QACN,EAAE;CAGF,MAAM,mBAAmB,kBAAmD,EAC1E,IAAI,cACN,EAAE;CAGF,MAAM,mBAAmB,kBAA+D;EACtF,cAAc;EACd,SAAS;CACX,EAAE;CAEF,OAAO;EACL,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,aAAa;EACtB;EACA,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,mBAAmB;GACrB,OAAO,iBAAiB;EAC1B;EACA,IAAI,mBAAmB;GACrB,OAAO,iBAAiB;EAC1B;CACF;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrEA,SAAgB,kBAAqB,OAAiD;CACpF,MAAM,sBACJ,OAAO,MAAM,MAAM,kBAAkB,aAAa,MAAM,MAAM,cAAc,IAAI,CAAC;CACnF,MAAM,kBAAkB,MAAM,MAAM;CACpC,MAAM,wBAAyB,cAAc,CAAC,CAAC,SAAS,IAAI,UAAU,IAAI,KAAA;CAE1E,MAAM,EAAE,kBAAkB,sBACjB;EACL,MAAM;EACN,cAAc,MAAM,iBAAiB;CACvC,IACA,eACF;CAEA,IAAI,YAAY;CAChB,IAAI,YAAY;CAChB,IAAI,gBAA+B,CAAC;CACpC,IAAI,wBAAwB,cAAc;CAC1C,IAAI,oBAAoB;CACxB,IAAI,cAAkC;CAEtC,MAAM,qBAAqB;EACzB,IAAI,aAAa,WACf,MAAM,MAAM,SAAS;OAErB,MAAM,MAAM,UAAU;CAE1B;CAEA,MAAM,EAAE,eAAe,YAAY;EACjC,oBAAoB;GAClB,YAAY;GACZ,aAAa;EACf;EACA,kBAAkB;GAChB,YAAY;GACZ,aAAa;EACf;CACF,CAAC;CAED,MAAM,yBAAyB;EAC7B,MAAM,UAAU,UAAU;EAC1B,OAAO,UAAU,CAAC,GAAG,QAAQ,iBAA8B,wBAAsB,CAAC,IAAI,CAAC;CACzF;CAEA,MAAM,2BAA2B;EAC/B,IAAI,CAAC,aAAa,aAAa;GAC7B,cAAc;GACd;EACF;EAEA,IAAI,uBAAuB,MAAM,WAC/B,sBAAsB,WAAW;OAEjC,YAAY,MAAM;EAGpB,cAAc;CAChB;CAEA,MAAM,iBAAiB,MAAkB;EACvC,MAAM,gBAAgB,EAAE;EACxB,MAAM,gBAAgB,EAAE;EAExB,IAAI,CAAC,WAAW;GACd,YAAY;GACZ,IAAI,iBAAiB,CAAC,cAAc,SAAS,aAAa,GACxD,cAAc;GAEhB,aAAa;EACf;EAEA,gBAAgB,iBAAiB;EACjC,MAAM,SACJ,EAAE,kBAAkB,UAAU,EAAE,OAAO,QAAqB,wBAAsB,IAAI;EACxF,oBAAoB,SAAS,cAAc,WAAW,UAAU,UAAU,MAAM,IAAI;CACtF;CAEA,MAAM,kBAAkB,MAAkB;EACxC,MAAM,SAAS,EAAE;EACjB,MAAM,gBAAgB,EAAE;EACxB,IAAI,CAAC,UAAU,CAAC,cAAc,SAAS,MAAM,GAAG;GAC9C,YAAY;GACZ,oBAAoB;GACpB,aAAa;EACf;CACF;CAEA,mBAAmB;EACjB,MAAM,uBAAuB,cAAc;EAC3C,MAAM,UAAU,UAAU;EAE1B,IAAI,sBAAsB,MAAM,qBAAqB,WAAW,KAAK,CAAC,SAAS;GAC7E,gBAAgB,CAAC;GACjB,wBAAwB;GACxB;EACF;EAEA,gBAAgB,iBAAiB;EAMjC,IAHE,sBAAsB,WAAW,qBAAqB,UACtD,qBAAqB,OAAO,OAAO,UAAU,MAAM,QAAQ,sBAAsB,MAAM,EAAE,GAAG,GAE/E;GACb,wBAAwB;GACxB;EACF;EAEA,MAAM,YAAY,sBAAsB,KAAK,OAAO,WAAW;GAC7D;GACA,WAAW,CAAC,qBAAqB,MAAM,iBAAiB,aAAa,QAAQ,MAAM,GAAG;EACxF,EAAE;EACF,MAAM,2BAA2B,UAAU,WACxC,UAAU,MAAM,UAAU,qBAAqB,MAAM,SACxD;EAEA,IAAI,2BAA2B,IAC7B,IAAI,uBAAuB,MAAM,aAAa,aAAa,aACzD,sBAAsB,WAAW;OAC5B;GACL,IAAI,QAAQ;GACZ,IAAI;GACJ,IAAI;GAEJ,OAAO,SAAS,0BAA0B;IACxC,IAAI,CAAC,UAAU,MAAM,EAAE,WACrB,gBAAgB,KAAK,IAAI,GAAG,QAAQ,CAAC;IAEvC;GACF;GAEA,OAAO,QAAQ,UAAU,QAAQ;IAC/B,IAAI,CAAC,UAAU,MAAM,EAAE,WAAW;KAChC,YAAY,QAAQ;KACpB;IACF;IACA;GACF;GAEA,IAAI,kBAAkB,KAAA,KAAa,cAAc,KAAA,GAC/C,gBAAgB;GAGlB,IACE,kBAAkB,KAAA,KAClB,iBAAiB,KACjB,gBAAgB,cAAc,QAE9B,sBAAsB,cAAc,cAAc;QAC7C,IAAI,cAAc,KAAA,KAAa,aAAa,KAAK,YAAY,cAAc,QAChF,sBAAsB,cAAc,UAAU;EAElD;EAGF,wBAAwB;CAC1B,CAAC;CAED,mBAAmB;EACjB,IAAI,cAAc,CAAC,CAAC,WAAW,GAC7B,mBAAmB;CAEvB,CAAC;CAED,gBAAgB;EACd,mBAAmB;CACrB,CAAC;CAGD,MAAM,cAAc,kBAAmD;EACrE,GAAG;EACH,GAAG;EACH,UAAU;EACV,4BAA4B;EAC5B,WAAW;EACX,YAAY;CACd,EAAE;CAEF,OAAO,EACL,IAAI,cAAc;EAChB,OAAO,YAAY;CACrB,EACF;AACF"}
+{"version":3,"file":"toast.jsx","names":[],"sources":["../../src/toast/createToast.ts","../../src/toast/createToastRegion.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/toast/useToast.ts\n\n/**\n * createToast hook for Solidaria\n *\n * Provides the accessibility implementation for a Toast component.\n *\n * Port of @react-aria/toast useToast.\n */\n\nimport { createMemo, createRenderEffect, createSignal } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { isServer } from \"@solidjs/web\";\nimport { type QueuedToast, type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createId } from \"../ssr\";\n\nexport interface AriaToastProps<T> {\n  /** The toast to display. */\n  toast: QueuedToast<T>;\n  /** The toast state from createToastState. */\n  state: ToastState<T>;\n  /** Whether the rendered toast includes a title element. */\n  hasTitle?: boolean;\n  /** Whether the rendered toast includes a description element. */\n  hasDescription?: boolean;\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast content element (contains the message). */\n  contentProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast title element. */\n  titleProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the toast description element. */\n  descriptionProps: JSX.HTMLAttributes<HTMLElement>;\n  /** Props for the close button. */\n  closeButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/**\n * Provides the accessibility implementation for a Toast component.\n *\n * The toast uses role=\"alertdialog\" to announce content to screen readers.\n * The content area uses role=\"alert\" for the actual message.\n *\n * @example\n * ```tsx\n * import { createToast } from 'solidaria';\n *\n * function Toast(props) {\n *   const {\n *     toastProps,\n *     contentProps,\n *     titleProps,\n *     closeButtonProps\n *   } = createToast({ toast: props.toast, state: props.state });\n *\n *   return (\n *     <div {...toastProps}>\n *       <div {...contentProps}>\n *         <div {...titleProps}>{props.toast.content.title}</div>\n *       </div>\n *       <button {...closeButtonProps}>×</button>\n *     </div>\n *   );\n * }\n * ```\n */\nexport function createToast<T>(props: AriaToastProps<T>): ToastAria {\n  const titleId = createId();\n  const descriptionId = createId();\n  const hasTitle = props.hasTitle ?? true;\n  const hasDescription = props.hasDescription ?? true;\n\n  const close = () => {\n    props.state.close(props.toast.key);\n  };\n\n  // RAC useToast hides the alert until after layout so the live region\n  // announces on appear, not during SSR. `useLayoutEffect` → createRenderEffect.\n  const [isVisible, setIsVisible] = createSignal(false, { ownedWrite: true });\n  createRenderEffect(\n    () => isServer,\n    (server) => {\n      if (!server) {\n        setIsVisible(true);\n      }\n    },\n  );\n\n  // Toast container - role=\"alertdialog\" for screen readers\n  const toastProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    role: \"alertdialog\",\n    \"aria-modal\": \"false\",\n    \"aria-labelledby\": hasTitle ? titleId : undefined,\n    \"aria-describedby\": hasDescription ? descriptionId : undefined,\n    tabIndex: 0,\n    \"data-animation\": props.toast.animation,\n    \"data-key\": props.toast.key,\n  }));\n\n  // Content area. Match RAC useToast: role=\"alert\" + aria-atomic; aria-hidden\n  // until mounted. Getters keep the object stable so slotted context still\n  // sees the post-layout visible state. role=alert is implicitly assertive —\n  // do not add aria-live (RAC does not).\n  const contentProps: JSX.HTMLAttributes<HTMLElement> = {\n    role: \"alert\",\n    \"aria-atomic\": \"true\",\n    get \"aria-hidden\"() {\n      return isVisible() ? undefined : \"true\";\n    },\n  };\n\n  // Title props\n  const titleProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: titleId,\n  }));\n\n  // Description props\n  const descriptionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    id: descriptionId,\n  }));\n\n  // Close button\n  const closeButtonProps = createMemo<JSX.ButtonHTMLAttributes<HTMLButtonElement>>(() => ({\n    \"aria-label\": \"Close\",\n    onClick: close,\n  }));\n\n  return {\n    get toastProps() {\n      return toastProps();\n    },\n    get contentProps() {\n      return contentProps;\n    },\n    get titleProps() {\n      return titleProps();\n    },\n    get descriptionProps() {\n      return descriptionProps();\n    },\n    get closeButtonProps() {\n      return closeButtonProps();\n    },\n  };\n}\n","/*\n * Copyright 2025 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/toast/useToastRegion.ts\n\n/**\n * createToastRegion hook for Solidaria\n *\n * Provides the accessibility implementation for a ToastRegion component.\n * The region is a landmark that contains all visible toasts.\n *\n * Port of @react-aria/toast useToastRegion.\n */\n\nimport { onOwnedCleanup } from \"../utils/owner\";\nimport { createMemo, createTrackedEffect } from \"solid-js\";\nimport type { Accessor } from \"solid-js\";\nimport type { JSX } from \"@solidjs/web\";\nimport { type ToastState } from \"@proyecto-viviana/solid-stately\";\nimport { createHover } from \"../interactions/createHover\";\nimport { getInteractionModality } from \"../interactions/createInteractionModality\";\nimport { createLandmark } from \"../landmark/createLandmark\";\nimport { focusWithoutScrolling } from \"../utils/focus\";\nexport interface AriaToastRegionProps<T> {\n  /** The toast state from createToastState. */ state: ToastState<T>;\n  /** The toast region element. Required for landmark navigation and focus recovery. */ ref?: Accessor<\n    HTMLElement | undefined\n  >;\n  /** An accessible label for the region. */ \"aria-label\"?: string;\n}\nexport interface ToastRegionAria {\n  /** Props for the toast region container element. */ regionProps: JSX.HTMLAttributes<HTMLElement>;\n}\n\n/**\n * Provides the accessibility implementation for a ToastRegion component.\n *\n * The region is a landmark (role=\"region\") that contains all visible toasts.\n * It pauses toast timers on hover or focus to give users time to read/interact.\n *\n * @example\n * ```tsx\n * import { createToastRegion } from 'solidaria';\n * import { For, Show } from \"solid-js\";\n *\n * function ToastRegion(props) {\n *   let ref;\n *   const { regionProps } = createToastRegion({ state: props.state });\n *\n *   return (\n *     <Show when={props.state.visibleToasts().length > 0}>\n *       <div {...regionProps} ref={ref}>\n *         <For each={props.state.visibleToasts()}>\n *           {(toast) => <Toast toast={toast} state={props.state} />}\n *         </For>\n *       </div>\n *     </Show>\n *   );\n * }\n * ```\n */\nexport function createToastRegion<T>(props: AriaToastRegionProps<T>): ToastRegionAria {\n  const visibleToasts = () =>\n    typeof props.state.visibleToasts === \"function\" ? props.state.visibleToasts() : [];\n  const regionRef = () => props.ref?.();\n  const activeRegionRef = () => (visibleToasts().length > 0 ? regionRef() : undefined);\n\n  const { landmarkProps } = createLandmark(\n    () => ({\n      role: \"region\",\n      \"aria-label\": props[\"aria-label\"] ?? \"Notifications\",\n    }),\n    activeRegionRef,\n  );\n\n  let isHovered = false;\n  let isFocused = false;\n  let toastElements: HTMLElement[] = [];\n  let previousVisibleToasts = visibleToasts();\n  let focusedToastIndex = -1;\n  let lastFocused: HTMLElement | null = null;\n\n  const updateTimers = () => {\n    if (isHovered || isFocused) {\n      props.state.pauseAll();\n    } else {\n      props.state.resumeAll();\n    }\n  };\n\n  const { hoverProps } = createHover({\n    onHoverStart: () => {\n      isHovered = true;\n      updateTimers();\n    },\n    onHoverEnd: () => {\n      isHovered = false;\n      updateTimers();\n    },\n  });\n\n  const getToastElements = () => {\n    const element = regionRef();\n    return element ? [...element.querySelectorAll<HTMLElement>('[role=\"alertdialog\"]')] : [];\n  };\n\n  const restoreLastFocused = () => {\n    if (!lastFocused?.isConnected) {\n      lastFocused = null;\n      return;\n    }\n\n    if (getInteractionModality() === \"pointer\") {\n      focusWithoutScrolling(lastFocused);\n    } else {\n      lastFocused.focus();\n    }\n\n    lastFocused = null;\n  };\n\n  const handleFocusIn = (e: FocusEvent) => {\n    const currentTarget = e.currentTarget as HTMLElement;\n    const relatedTarget = e.relatedTarget as HTMLElement | null;\n\n    if (!isFocused) {\n      isFocused = true;\n      if (relatedTarget && !currentTarget.contains(relatedTarget)) {\n        lastFocused = relatedTarget;\n      }\n      updateTimers();\n    }\n\n    toastElements = getToastElements();\n    const target =\n      e.target instanceof Element ? e.target.closest<HTMLElement>('[role=\"alertdialog\"]') : null;\n    focusedToastIndex = target ? toastElements.findIndex((toast) => toast === target) : -1;\n  };\n\n  const handleFocusOut = (e: FocusEvent) => {\n    const target = e.relatedTarget as HTMLElement | null;\n    const currentTarget = e.currentTarget as HTMLElement;\n    if (!target || !currentTarget.contains(target)) {\n      isFocused = false;\n      focusedToastIndex = -1;\n      updateTimers();\n    }\n  };\n\n  createTrackedEffect(() => {\n    const currentVisibleToasts = visibleToasts();\n    const element = regionRef();\n\n    if (focusedToastIndex === -1 || currentVisibleToasts.length === 0 || !element) {\n      toastElements = [];\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    toastElements = getToastElements();\n\n    const unchanged =\n      previousVisibleToasts.length === currentVisibleToasts.length &&\n      currentVisibleToasts.every((toast, index) => toast.key === previousVisibleToasts[index]?.key);\n\n    if (unchanged) {\n      previousVisibleToasts = currentVisibleToasts;\n      return;\n    }\n\n    const allToasts = previousVisibleToasts.map((toast, index) => ({\n      index,\n      isRemoved: !currentVisibleToasts.some((currentToast) => currentToast.key === toast.key),\n    }));\n    const removedFocusedToastIndex = allToasts.findIndex(\n      (toast) => toast.index === focusedToastIndex && toast.isRemoved,\n    );\n\n    if (removedFocusedToastIndex > -1) {\n      if (getInteractionModality() === \"pointer\" && lastFocused?.isConnected) {\n        focusWithoutScrolling(lastFocused);\n      } else {\n        let index = 0;\n        let nextToast: number | undefined;\n        let previousToast: number | undefined;\n\n        while (index <= removedFocusedToastIndex) {\n          if (!allToasts[index]?.isRemoved) {\n            previousToast = Math.max(0, index - 1);\n          }\n          index++;\n        }\n\n        while (index < allToasts.length) {\n          if (!allToasts[index]?.isRemoved) {\n            nextToast = index - 1;\n            break;\n          }\n          index++;\n        }\n\n        if (previousToast === undefined && nextToast === undefined) {\n          previousToast = 0;\n        }\n\n        if (\n          previousToast !== undefined &&\n          previousToast >= 0 &&\n          previousToast < toastElements.length\n        ) {\n          focusWithoutScrolling(toastElements[previousToast]);\n        } else if (nextToast !== undefined && nextToast >= 0 && nextToast < toastElements.length) {\n          focusWithoutScrolling(toastElements[nextToast]);\n        }\n      }\n    }\n\n    previousVisibleToasts = currentVisibleToasts;\n  });\n\n  createTrackedEffect(() => {\n    if (visibleToasts().length === 0) {\n      restoreLastFocused();\n    }\n  });\n\n  onOwnedCleanup(() => {\n    restoreLastFocused();\n  });\n\n  // Region props\n  const regionProps = createMemo<JSX.HTMLAttributes<HTMLElement>>(() => ({\n    ...landmarkProps,\n    ...hoverProps,\n    tabIndex: -1,\n    \"data-solidaria-top-layer\": \"true\",\n    onFocusIn: handleFocusIn,\n    onFocusOut: handleFocusOut,\n  }));\n\n  return {\n    get regionProps() {\n      return regionProps();\n    },\n  };\n}\n"],"mappings":"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"}