@brytdesigns/web-component-drawer 1.1.12 → 3.0.0

package/dist/main/components/drawer-backdrop.js

@@ -1,80 +1,53 @@
-import { createEffect, on, onMount, onCleanup } from 'solid-js';
-import { animate } from 'motion';
-import { getTransitionConfig } from '@brytdesigns/web-component-core/animation';
-import { useDrawer } from '../hooks/index.js';
-
-const Name = `drawer-backdrop`;
-const Component = (_, { element }) => {
-  const [state, { updateAnimationQueue, close }] = useDrawer(element);
-  const controller = new AbortController();
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`]
-      },
-      options
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const options = getTransitionConfig(style);
-    return animate(
-      element2,
-      {
-        opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`]
-      },
-      options
-    );
-  }
-  element.addEventListener(
-    "click",
-    () => {
-      if (state.isAnimating) return;
-      close();
-    },
-    {
-      signal: controller.signal
-    }
-  );
-  onCleanup(() => {
-    controller.abort();
-  });
-  isFirstRender = false;
+import { useDrawer } from "../hooks/useDrawer.js";
+import "../hooks/index.js";
+import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
+import { getTransitionConfig } from "@brytdesigns/web-component-core/animation";
+import { animate } from "motion";
+import { onCleanup, onSettled } from "solid-js";
+//#region src/components/drawer-backdrop.ts
+var Name = `drawer-backdrop`;
+var Component = (_, { element }) => {
+	const [state, { updateAnimationQueue, close }] = useDrawer(element);
+	const controller = new AbortController();
+	let isFirstRender = true;
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		if (!isOpen || isFirstRender) return;
+		const animation = enter(element);
+		updateAnimationQueue(animation);
+		return () => {
+			if (animation.state !== "finished") animation.complete();
+		};
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		if (isOpen || isFirstRender) return;
+		const animation = exit(element);
+		updateAnimationQueue(animation);
+		return () => {
+			if (animation.state !== "finished") animation.complete();
+		};
+	});
+	onSettled(() => {
+		isFirstRender = false;
+	});
+	function enter(element) {
+		const style = window.getComputedStyle(element);
+		const options = getTransitionConfig(style);
+		return animate(element, { opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`] }, options);
+	}
+	function exit(element) {
+		const style = window.getComputedStyle(element);
+		const options = getTransitionConfig(style);
+		return animate(element, { opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`] }, options);
+	}
+	element.addEventListener("click", () => {
+		if (state.isAnimating) return;
+		close();
+	}, { signal: controller.signal });
+	onCleanup(() => {
+		controller.abort();
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=drawer-backdrop.js.map
+
 //# sourceMappingURL=drawer-backdrop.js.map

package/dist/main/components/drawer-backdrop.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/drawer-backdrop.ts"],"names":["element"],"mappings":";;;;;AAUO,MAAM,IAAO,GAAA,CAAA,eAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,CAAG,EAAA,EAAE,SAAc,KAAA;AACxE,EAAM,MAAA,CAAC,OAAO,EAAE,oBAAA,EAAsB,OAAO,CAAA,GAAI,UAAU,OAAO,CAAA;AAClE,EAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AAEvC,EAAA,IAAI,aAAgB,GAAA,IAAA;AAEpB,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAI,IAAA,CAAC,UAAU,aAAe,EAAA;AAC9B,QAAM,MAAA,SAAA,GAAY,MAAM,OAAO,CAAA;AAC/B,QAAA,oBAAA,CAAqB,SAAS,CAAA;AAC9B,QAAA,OAAO,UAAU,MAAM;AACrB,UAAA,IAAI,SAAU,CAAA,KAAA,KAAU,UAAY,EAAA,SAAA,CAAU,QAAS,EAAA;AAAA,SACxD,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,MAAA;AAAA,MACZ,CAAC,MAAW,KAAA;AACV,QAAA,IAAI,UAAU,aAAe,EAAA;AAC7B,QAAM,MAAA,SAAA,GAAY,KAAK,OAAO,CAAA;AAC9B,QAAA,oBAAA,CAAqB,SAAS,CAAA;AAC9B,QAAA,OAAO,UAAU,MAAM;AACrB,UAAA,IAAI,SAAU,CAAA,KAAA,KAAU,UAAY,EAAA,SAAA,CAAU,QAAS,EAAA;AAAA,SACxD,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAgB,aAAA,GAAA,KAAA;AAAA,GACjB,CAAA;AAED,EAAA,SAAS,MAAMA,QAAsB,EAAA;AACnC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,2BAAA,CAAA,EAA+B,CAA2B,yBAAA,CAAA;AAAA,OACtE;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAA,SAAS,KAAKA,QAAsB,EAAA;AAClC,IAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiBA,QAAO,CAAA;AAC7C,IAAM,MAAA,OAAA,GAAU,oBAAoB,KAAK,CAAA;AACzC,IAAO,OAAA,OAAA;AAAA,MACLA,QAAAA;AAAA,MACA;AAAA,QACE,OAAA,EAAS,CAAC,CAAA,yBAAA,CAAA,EAA6B,CAA6B,2BAAA,CAAA;AAAA,OACtE;AAAA,MACA;AAAA,KACF;AAAA;AAGF,EAAQ,OAAA,CAAA,gBAAA;AAAA,IACN,OAAA;AAAA,IACA,MAAM;AACJ,MAAA,IAAI,MAAM,WAAa,EAAA;AACvB,MAAM,KAAA,EAAA;AAAA,KACR;AAAA,IACA;AAAA,MACE,QAAQ,UAAW,CAAA;AAAA;AACrB,GACF;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,KAAM,EAAA;AAAA,GAClB,CAAA;AAED,EAAgB,aAAA,GAAA,KAAA;AAClB","file":"drawer-backdrop.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, onMount, on, onCleanup } from \"solid-js\";\r\nimport { animate } from \"motion\";\r\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\r\n\r\nimport { useDrawer } from \"../hooks/index.js\";\r\n\r\nexport type Props = {};\r\n\r\nexport const Name = `drawer-backdrop`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\r\n  const [state, { updateAnimationQueue, close }] = useDrawer(element);\r\n  const controller = new AbortController();\r\n\r\n  let isFirstRender = true;\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (!isOpen || isFirstRender) return;\r\n        const animation = enter(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (isOpen || isFirstRender) return;\r\n        const animation = exit(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onMount(() => {\r\n    isFirstRender = false;\r\n  });\r\n\r\n  function enter(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const options = getTransitionConfig(style);\r\n    return animate(\r\n      element,\r\n      {\r\n        opacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\r\n      },\r\n      options,\r\n    );\r\n  }\r\n\r\n  function exit(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const options = getTransitionConfig(style);\r\n    return animate(\r\n      element,\r\n      {\r\n        opacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\r\n      },\r\n      options,\r\n    );\r\n  }\r\n\r\n  element.addEventListener(\r\n    \"click\",\r\n    () => {\r\n      if (state.isAnimating) return;\r\n      close();\r\n    },\r\n    {\r\n      signal: controller.signal,\r\n    },\r\n  );\r\n\r\n  onCleanup(() => {\r\n    controller.abort();\r\n  });\r\n\r\n  isFirstRender = false;\r\n};\r\n"]}
+{"version":3,"file":"drawer-backdrop.js","names":[],"sources":["../../../src/components/drawer-backdrop.ts"],"sourcesContent":["import { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { animate } from \"motion\";\nimport { onCleanup, onSettled } from \"solid-js\";\n\nimport { useDrawer } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `drawer-backdrop`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst [state, { updateAnimationQueue, close }] = useDrawer(element);\n\tconst controller = new AbortController();\n\n\tlet isFirstRender = true;\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (!isOpen || isFirstRender) return;\n\t\t\tconst animation = enter(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (isOpen || isFirstRender) return;\n\t\t\tconst animation = exit(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tonSettled(() => {\n\t\tisFirstRender = false;\n\t});\n\n\tfunction enter(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst options = getTransitionConfig(style);\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\topacity: [`var(--drawer--opacity-from)`, `var(--drawer--opacity-to)`],\n\t\t\t},\n\t\t\toptions,\n\t\t);\n\t}\n\n\tfunction exit(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst options = getTransitionConfig(style);\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\topacity: [`var(--drawer--opacity-to)`, `var(--drawer--opacity-from)`],\n\t\t\t},\n\t\t\toptions,\n\t\t);\n\t}\n\n\telement.addEventListener(\n\t\t\"click\",\n\t\t() => {\n\t\t\tif (state.isAnimating) return;\n\t\t\tclose();\n\t\t},\n\t\t{\n\t\t\tsignal: controller.signal,\n\t\t},\n\t);\n\n\tonCleanup(() => {\n\t\tcontroller.abort();\n\t});\n};\n"],"mappings":";;;;;;;AAUA,IAAa,OAAO;AAEpB,IAAa,aAA0C,GAAG,EAAE,cAAc;CACzE,MAAM,CAAC,OAAO,EAAE,sBAAsB,WAAW,UAAU,OAAO;CAClE,MAAM,aAAa,IAAI,gBAAgB;CAEvC,IAAI,gBAAgB;CAEpB,0BACO,MAAM,SACX,WAAW;EACX,IAAI,CAAC,UAAU,eAAe;EAC9B,MAAM,YAAY,MAAM,OAAO;EAC/B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,UAAU,eAAe;EAC7B,MAAM,YAAY,KAAK,OAAO;EAC9B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,gBAAgB;EACf,gBAAgB;CACjB,CAAC;CAED,SAAS,MAAM,SAAsB;EACpC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,UAAU,oBAAoB,KAAK;EACzC,OAAO,QACN,SACA,EACC,SAAS,CAAC,+BAA+B,2BAA2B,EACrE,GACA,OACD;CACD;CAEA,SAAS,KAAK,SAAsB;EACnC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,UAAU,oBAAoB,KAAK;EACzC,OAAO,QACN,SACA,EACC,SAAS,CAAC,6BAA6B,6BAA6B,EACrE,GACA,OACD;CACD;CAEA,QAAQ,iBACP,eACM;EACL,IAAI,MAAM,aAAa;EACvB,MAAM;CACP,GACA,EACC,QAAQ,WAAW,OACpB,CACD;CAEA,gBAAgB;EACf,WAAW,MAAM;CAClB,CAAC;AACF"}

package/dist/main/components/drawer-content.js

@@ -1,86 +1,63 @@
-import { createEffect, on, onMount, onCleanup } from 'solid-js';
-import { animate } from 'motion';
-import { getTransitionConfig } from '@brytdesigns/web-component-core/animation';
-import { useDrawer } from '../hooks/index.js';
-import { POSITION } from '../consts.js';
-
-const Name = `drawer-content`;
-const Component = (_, { element }) => {
-  const [state, { updateAnimationQueue }] = useDrawer(element);
-  let isFirstRender = true;
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (!isOpen || isFirstRender) return;
-        const animation = enter(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        if (isOpen || isFirstRender) return;
-        const animation = exit(element);
-        updateAnimationQueue(animation);
-        return onCleanup(() => {
-          if (animation.state !== "finished") animation.complete();
-        });
-      }
-    )
-  );
-  onMount(() => {
-    isFirstRender = false;
-  });
-  function enter(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    let position = style.getPropertyValue(`--drawer--position`);
-    if (!position) position = POSITION.LEFT;
-    let transform = {
-      x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`]
-    };
-    if (position === POSITION.TOP || position === POSITION.BOTTOM) {
-      transform = {
-        y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`]
-      };
-    }
-    return animate(
-      element2,
-      {
-        ...transform
-      },
-      transition
-    );
-  }
-  function exit(element2) {
-    const style = window.getComputedStyle(element2);
-    const transition = getTransitionConfig(style);
-    let position = style.getPropertyValue(`--drawer--position`);
-    if (!position) position = POSITION.LEFT;
-    let transform = {
-      x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
-    };
-    if (position === POSITION.TOP || position === POSITION.BOTTOM) {
-      transform = {
-        y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`]
-      };
-    }
-    return animate(
-      element2,
-      {
-        ...transform
-      },
-      transition
-    );
-  }
+import { useDrawer } from "../hooks/useDrawer.js";
+import "../hooks/index.js";
+import { POSITION } from "../consts.js";
+import { createGuardedEffect } from "@brytdesigns/web-component-core/utils";
+import { getTransitionConfig } from "@brytdesigns/web-component-core/animation";
+import { animate } from "motion";
+import { onSettled } from "solid-js";
+//#region src/components/drawer-content.ts
+var Name = `drawer-content`;
+var Component = (_, { element }) => {
+	const [state, { updateAnimationQueue }] = useDrawer(element);
+	let isFirstRender = true;
+	if (!element.hasAttribute("role")) element.setAttribute("role", "dialog");
+	if (!element.hasAttribute("tabindex")) element.setAttribute("tabindex", "-1");
+	onSettled(() => {
+		if (!(element.hasAttribute("aria-labelledby") || element.hasAttribute("aria-label"))) console.warn("drawer-content: no accessible name. Add an aria-label, or an aria-labelledby pointing at the heading inside it.", element);
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		if (isOpen) element.setAttribute("aria-modal", "true");
+		else element.removeAttribute("aria-modal");
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		if (!isOpen || isFirstRender) return;
+		const animation = enter(element);
+		updateAnimationQueue(animation);
+		return () => {
+			if (animation.state !== "finished") animation.complete();
+		};
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		if (isOpen || isFirstRender) return;
+		const animation = exit(element);
+		updateAnimationQueue(animation);
+		return () => {
+			if (animation.state !== "finished") animation.complete();
+		};
+	});
+	onSettled(() => {
+		isFirstRender = false;
+	});
+	function enter(element) {
+		const style = window.getComputedStyle(element);
+		const transition = getTransitionConfig(style);
+		let position = style.getPropertyValue(`--drawer--position`);
+		if (!position) position = POSITION.LEFT;
+		let transform = { x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`] };
+		if (position === POSITION.TOP || position === POSITION.BOTTOM) transform = { y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`] };
+		return animate(element, { ...transform }, transition);
+	}
+	function exit(element) {
+		const style = window.getComputedStyle(element);
+		const transition = getTransitionConfig(style);
+		let position = style.getPropertyValue(`--drawer--position`);
+		if (!position) position = POSITION.LEFT;
+		let transform = { x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`] };
+		if (position === POSITION.TOP || position === POSITION.BOTTOM) transform = { y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`] };
+		return animate(element, { ...transform }, transition);
+	}
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=drawer-content.js.map
+
 //# sourceMappingURL=drawer-content.js.map

package/dist/main/components/drawer-content.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/drawer-content.ts"],"names":["element"],"mappings":"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","file":"drawer-content.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, on, onCleanup, onMount } from \"solid-js\";\r\nimport { animate } from \"motion\";\r\nimport { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\r\n\r\nimport { useDrawer } from \"../hooks/index.js\";\r\nimport { POSITION, type Position } from \"../consts.js\";\r\n\r\nexport type Props = {};\r\n\r\nexport const Name = `drawer-content`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\r\n  const [state, { updateAnimationQueue }] = useDrawer(element);\r\n\r\n  let isFirstRender = true;\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (!isOpen || isFirstRender) return;\r\n        const animation = enter(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        if (isOpen || isFirstRender) return;\r\n        const animation = exit(element);\r\n        updateAnimationQueue(animation);\r\n        return onCleanup(() => {\r\n          if (animation.state !== \"finished\") animation.complete();\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onMount(() => {\r\n    isFirstRender = false;\r\n  });\r\n\r\n  function enter(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const transition = getTransitionConfig(style);\r\n    let position = style.getPropertyValue(`--drawer--position`) as Position;\r\n    if (!position) position = POSITION.LEFT;\r\n\r\n    let transform: Record<string, string[]> = {\r\n      x: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\r\n    };\r\n\r\n    if (position === POSITION.TOP || position === POSITION.BOTTOM) {\r\n      transform = {\r\n        y: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\r\n      };\r\n    }\r\n\r\n    return animate(\r\n      element,\r\n      {\r\n        ...transform,\r\n      },\r\n      transition,\r\n    );\r\n  }\r\n\r\n  function exit(element: HTMLElement) {\r\n    const style = window.getComputedStyle(element);\r\n    const transition = getTransitionConfig(style);\r\n    let position = style.getPropertyValue(`--drawer--position`) as Position;\r\n    if (!position) position = POSITION.LEFT;\r\n\r\n    let transform: Record<string, string[]> = {\r\n      x: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\r\n    };\r\n\r\n    if (position === POSITION.TOP || position === POSITION.BOTTOM) {\r\n      transform = {\r\n        y: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\r\n      };\r\n    }\r\n\r\n    return animate(\r\n      element,\r\n      {\r\n        ...transform,\r\n      },\r\n      transition,\r\n    );\r\n  }\r\n};\r\n"]}
+{"version":3,"file":"drawer-content.js","names":[],"sources":["../../../src/components/drawer-content.ts"],"sourcesContent":["import { getTransitionConfig } from \"@brytdesigns/web-component-core/animation\";\nimport type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport { createGuardedEffect } from \"@brytdesigns/web-component-core/utils\";\nimport { animate } from \"motion\";\nimport { onSettled } from \"solid-js\";\nimport { POSITION, type Position } from \"../consts.js\";\nimport { useDrawer } from \"../hooks/index.js\";\n\nexport type Props = {};\n\nexport const Name = `drawer-content`;\n\nexport const Component: CorrectComponentType<Props> = (_, { element }) => {\n\tconst [state, { updateAnimationQueue }] = useDrawer(element);\n\n\tlet isFirstRender = true;\n\n\t// The element that *is* the dialog, as far as assistive tech is concerned.\n\t// Until now this published nothing: no role, no name, no aria-modal, so a\n\t// screen reader saw an unlabelled div that happened to hold the focus.\n\t//\n\t// An authored role or tabindex is left alone — a theme that already made\n\t// this an alertdialog knows something this component does not.\n\tif (!element.hasAttribute(\"role\")) element.setAttribute(\"role\", \"dialog\");\n\tif (!element.hasAttribute(\"tabindex\")) element.setAttribute(\"tabindex\", \"-1\");\n\n\tonSettled(() => {\n\t\tconst named =\n\t\t\telement.hasAttribute(\"aria-labelledby\") ||\n\t\t\telement.hasAttribute(\"aria-label\");\n\t\tif (!named) {\n\t\t\tconsole.warn(\n\t\t\t\t\"drawer-content: no accessible name. Add an aria-label, or an aria-labelledby pointing at the heading inside it.\",\n\t\t\t\telement,\n\t\t\t);\n\t\t}\n\t});\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\t// `aria-modal` claims focus is confined to this subtree, which is only\n\t\t\t// true while it is open. Left on a closed overlay it tells assistive\n\t\t\t// tech the rest of the page is unavailable when it is not.\n\t\t\tif (isOpen) element.setAttribute(\"aria-modal\", \"true\");\n\t\t\telse element.removeAttribute(\"aria-modal\");\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (!isOpen || isFirstRender) return;\n\t\t\tconst animation = enter(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tif (isOpen || isFirstRender) return;\n\t\t\tconst animation = exit(element);\n\t\t\tupdateAnimationQueue(animation);\n\t\t\treturn () => {\n\t\t\t\tif (animation.state !== \"finished\") animation.complete();\n\t\t\t};\n\t\t},\n\t);\n\n\tonSettled(() => {\n\t\tisFirstRender = false;\n\t});\n\n\tfunction enter(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst transition = getTransitionConfig(style);\n\t\tlet position = style.getPropertyValue(`--drawer--position`) as Position;\n\t\tif (!position) position = POSITION.LEFT;\n\n\t\tlet transform: Record<string, string[]> = {\n\t\t\tx: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\n\t\t};\n\n\t\tif (position === POSITION.TOP || position === POSITION.BOTTOM) {\n\t\t\ttransform = {\n\t\t\t\ty: [`var(--drawer--slide-from)`, `var(--drawer--slide-to)`],\n\t\t\t};\n\t\t}\n\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\t...transform,\n\t\t\t},\n\t\t\ttransition,\n\t\t);\n\t}\n\n\tfunction exit(element: HTMLElement) {\n\t\tconst style = window.getComputedStyle(element);\n\t\tconst transition = getTransitionConfig(style);\n\t\tlet position = style.getPropertyValue(`--drawer--position`) as Position;\n\t\tif (!position) position = POSITION.LEFT;\n\n\t\tlet transform: Record<string, string[]> = {\n\t\t\tx: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\n\t\t};\n\n\t\tif (position === POSITION.TOP || position === POSITION.BOTTOM) {\n\t\t\ttransform = {\n\t\t\t\ty: [`var(--drawer--slide-to)`, `var(--drawer--slide-from)`],\n\t\t\t};\n\t\t}\n\n\t\treturn animate(\n\t\t\telement,\n\t\t\t{\n\t\t\t\t...transform,\n\t\t\t},\n\t\t\ttransition,\n\t\t);\n\t}\n};\n"],"mappings":";;;;;;;;AAUA,IAAa,OAAO;AAEpB,IAAa,aAA0C,GAAG,EAAE,cAAc;CACzE,MAAM,CAAC,OAAO,EAAE,0BAA0B,UAAU,OAAO;CAE3D,IAAI,gBAAgB;CAQpB,IAAI,CAAC,QAAQ,aAAa,MAAM,GAAG,QAAQ,aAAa,QAAQ,QAAQ;CACxE,IAAI,CAAC,QAAQ,aAAa,UAAU,GAAG,QAAQ,aAAa,YAAY,IAAI;CAE5E,gBAAgB;EAIf,IAAI,EAFH,QAAQ,aAAa,iBAAiB,KACtC,QAAQ,aAAa,YAAY,IAEjC,QAAQ,KACP,mHACA,OACD;CAEF,CAAC;CAED,0BACO,MAAM,SACX,WAAW;EAIX,IAAI,QAAQ,QAAQ,aAAa,cAAc,MAAM;OAChD,QAAQ,gBAAgB,YAAY;CAC1C,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,CAAC,UAAU,eAAe;EAC9B,MAAM,YAAY,MAAM,OAAO;EAC/B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,0BACO,MAAM,SACX,WAAW;EACX,IAAI,UAAU,eAAe;EAC7B,MAAM,YAAY,KAAK,OAAO;EAC9B,qBAAqB,SAAS;EAC9B,aAAa;GACZ,IAAI,UAAU,UAAU,YAAY,UAAU,SAAS;EACxD;CACD,CACD;CAEA,gBAAgB;EACf,gBAAgB;CACjB,CAAC;CAED,SAAS,MAAM,SAAsB;EACpC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,aAAa,oBAAoB,KAAK;EAC5C,IAAI,WAAW,MAAM,iBAAiB,oBAAoB;EAC1D,IAAI,CAAC,UAAU,WAAW,SAAS;EAEnC,IAAI,YAAsC,EACzC,GAAG,CAAC,6BAA6B,yBAAyB,EAC3D;EAEA,IAAI,aAAa,SAAS,OAAO,aAAa,SAAS,QACtD,YAAY,EACX,GAAG,CAAC,6BAA6B,yBAAyB,EAC3D;EAGD,OAAO,QACN,SACA,EACC,GAAG,UACJ,GACA,UACD;CACD;CAEA,SAAS,KAAK,SAAsB;EACnC,MAAM,QAAQ,OAAO,iBAAiB,OAAO;EAC7C,MAAM,aAAa,oBAAoB,KAAK;EAC5C,IAAI,WAAW,MAAM,iBAAiB,oBAAoB;EAC1D,IAAI,CAAC,UAAU,WAAW,SAAS;EAEnC,IAAI,YAAsC,EACzC,GAAG,CAAC,2BAA2B,2BAA2B,EAC3D;EAEA,IAAI,aAAa,SAAS,OAAO,aAAa,SAAS,QACtD,YAAY,EACX,GAAG,CAAC,2BAA2B,2BAA2B,EAC3D;EAGD,OAAO,QACN,SACA,EACC,GAAG,UACJ,GACA,UACD;CACD;AACD"}

package/dist/main/components/drawer-context.js

@@ -1,116 +1,122 @@
-import { disableBodyScroll, enableBodyScroll } from '@brytdesigns/web-component-core/utils';
-import { splitProps, createEffect, on, onCleanup } from 'solid-js';
-import { createFocusTrap } from '@brytdesigns/web-component-core/focusTrap';
-import { provideDrawerContext, useDrawerContext } from '../hooks/index.js';
-import { showElement, hideElement } from '../utils.js';
-
-const Name = `drawer-context`;
-const Component = (props, { element }) => {
-  const [contextProps, restProps] = splitProps(props, [
-    "isOpen",
-    "isAnimating"
-  ]);
-  const context = provideDrawerContext(contextProps, element);
-  const [state, { setElementState }] = context;
-  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);
-  element.actions = events;
-  const focusTrap = createFocusTrap(element, () => ({
-    allowOutsideClick: true,
-    escapeDeactivates: restProps.closeOnEscape,
-    onDeactivate: () => {
-      setElementState("isOpen", false);
-    }
-  }));
-  createEffect(() => {
-    if (!props.debug) return;
-    console.table({
-      ...state
-    });
-  });
-  createEffect(
-    on(
-      () => state.isOpen,
-      (isOpen) => {
-        const eventName = isOpen ? "drawer:open" : "drawer:close";
-        element.dispatchEvent(
-          new CustomEvent(eventName, {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-        element.dispatchEvent(
-          new CustomEvent("drawer:toggle", {
-            bubbles: true,
-            detail: { isOpen, relatedTarget: element }
-          })
-        );
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        focusTrap: focusTrap(),
-        shouldTrapFocus: restProps.shouldTrapFocus
-      }),
-      ({ isOpen, focusTrap: focusTrap2, shouldTrapFocus }) => {
-        if (!isOpen) return;
-        if (props.debug) console.log("Showing element", element);
-        showElement(element);
-        if (!shouldTrapFocus) return;
-        focusTrap2.activate();
-        onCleanup(focusTrap2.deactivate);
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({
-        isOpen: state.isOpen,
-        isAnimating: state.isAnimating,
-        shouldTrapFocus: props.shouldTrapFocus
-      }),
-      ({ isOpen, isAnimating, shouldTrapFocus }) => {
-        if (isOpen && !isAnimating && shouldTrapFocus)
-          return disableBodyScroll(element, {
-            allowTouchMove: (el) => {
-              if (el instanceof HTMLElement) {
-                let element2 = el;
-                while (element2 && element2 !== document.body) {
-                  if (element2.tagName === "DRAWER-CONTENT") {
-                    return true;
-                  }
-                  element2 = element2.parentElement;
-                }
-              }
-              return false;
-            }
-          });
-        onCleanup(() => {
-          enableBodyScroll(element);
-        });
-      }
-    )
-  );
-  createEffect(
-    on(
-      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),
-      ({ isOpen, animationQueue }) => {
-        if (isOpen) return;
-        if (props.debug)
-          console.log("Waiting for animations to complete...", animationQueue);
-        return Promise.all(animationQueue).then(() => hideElement(element)).then(() => {
-          if (props.debug) console.log("Hiding element", element);
-        });
-      }
-    )
-  );
-  onCleanup(() => {
-    enableBodyScroll(element);
-  });
+import { provideDrawerContext, useDrawerContext } from "../hooks/useDrawer.js";
+import "../hooks/index.js";
+import { hideElement, showElement } from "../utils.js";
+import { closeNestedOverlays, createEscapeHandler, createFocusReturn, createGuardedEffect, disableBodyScroll, enableBodyScroll, findOverlayPanel } from "@brytdesigns/web-component-core/utils";
+import { omit, onCleanup, untrack } from "solid-js";
+import { createFocusTrap } from "@brytdesigns/web-component-core/focusTrap";
+//#region src/components/drawer-context.ts
+var Name = `drawer-context`;
+var Component = (props, { element }) => {
+	const debug = untrack(() => props.debug);
+	const restProps = omit(props, "isOpen", "isAnimating");
+	const context = provideDrawerContext({
+		get isOpen() {
+			return props.isOpen;
+		},
+		get isAnimating() {
+			return props.isAnimating;
+		}
+	}, element);
+	const [state, { setElementState }] = context;
+	const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);
+	element.actions = events;
+	const panel = () => findOverlayPanel(element, "drawer-content");
+	const focusReturn = createFocusReturn(element);
+	const focusTrap = createFocusTrap(element, () => ({
+		allowOutsideClick: true,
+		escapeDeactivates: false,
+		returnFocusOnDeactivate: false,
+		initialFocus: () => panel() ?? false,
+		fallbackFocus: () => panel() ?? element
+	}));
+	createGuardedEffect(() => ({
+		isOpen: state.isOpen,
+		closeOnEscape: restProps.closeOnEscape
+	}), ({ isOpen, closeOnEscape }) => {
+		if (!isOpen || !closeOnEscape) return;
+		return createEscapeHandler({
+			element,
+			onEscape: () => setElementState("isOpen", false)
+		});
+	});
+	createGuardedEffect(() => ({
+		debug,
+		snapshot: { ...state }
+	}), ({ debug, snapshot }) => {
+		if (!debug) return;
+		console.table(snapshot);
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen) => {
+		const eventName = isOpen ? "drawer:open" : "drawer:close";
+		element.dispatchEvent(new CustomEvent(eventName, {
+			bubbles: true,
+			detail: {
+				isOpen,
+				relatedTarget: element
+			}
+		}));
+		element.dispatchEvent(new CustomEvent("drawer:toggle", {
+			bubbles: true,
+			detail: {
+				isOpen,
+				relatedTarget: element
+			}
+		}));
+	});
+	createGuardedEffect(() => ({
+		isOpen: state.isOpen,
+		isAnimating: state.isAnimating,
+		focusTrap: focusTrap(),
+		shouldTrapFocus: restProps.shouldTrapFocus
+	}), ({ isOpen, isAnimating, focusTrap, shouldTrapFocus }) => {
+		if (!isOpen) return;
+		if (debug) console.log("Showing element", element);
+		showElement(element);
+		if (!shouldTrapFocus || isAnimating) return;
+		focusReturn.record();
+		focusTrap.activate();
+		return () => {
+			focusTrap.deactivate();
+			focusReturn.restore();
+		};
+	});
+	createGuardedEffect(() => ({
+		isOpen: state.isOpen,
+		isAnimating: state.isAnimating,
+		shouldTrapFocus: props.shouldTrapFocus
+	}), ({ isOpen, isAnimating, shouldTrapFocus }) => {
+		if (!isOpen || isAnimating || !shouldTrapFocus) return;
+		disableBodyScroll(element, { allowTouchMove: (el) => {
+			if (el instanceof HTMLElement) {
+				let element = el;
+				while (element && element !== document.body) {
+					if (element.tagName === "DRAWER-CONTENT") return true;
+					element = element.parentElement;
+				}
+			}
+			return false;
+		} });
+		return () => enableBodyScroll(element);
+	});
+	createGuardedEffect(() => state.isOpen, (isOpen, previous) => {
+		if (previous === void 0 || isOpen) return;
+		closeNestedOverlays(element);
+	});
+	createGuardedEffect(() => ({
+		isOpen: state.isOpen,
+		animationQueue: state.animationQueue
+	}), ({ isOpen, animationQueue }) => {
+		if (isOpen) return;
+		if (debug) console.log("Waiting for animations to complete...", animationQueue);
+		Promise.all(animationQueue).then(() => hideElement(element)).then(() => {
+			if (debug) console.log("Hiding element", element);
+		});
+	});
+	onCleanup(() => {
+		enableBodyScroll(element);
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=drawer-context.js.map
+
 //# sourceMappingURL=drawer-context.js.map