@brytdesigns/web-component-drawer 1.1.11 → 3.0.0

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

@@ -1,74 +1,93 @@
-import { onCleanup, createEffect } from 'solid-js';
-import { observeElementInViewport } from 'observe-element-in-viewport';
-import { withDrawerElementContext, useDrawerContext } from '../hooks/index.js';
-
-const Name = "drawer-trigger";
-const Component = (props, { element }) => {
-  withDrawerElementContext(
-    () => props.target || "",
-    () => {
-      return {
-        action: props.action,
-        on: props.on,
-        preventDefault: props.preventDefault
-      };
-    },
-    (context, props2) => {
-      const controller = new AbortController();
-      const { action, on, preventDefault } = props2;
-      const [state, { open, close, toggle }] = useDrawerContext(context);
-      switch (on) {
-        case "enter": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, open, close);
-          }
-          if (unsubscribe) onCleanup(unsubscribe);
-          break;
-        }
-        case "exit": {
-          let unsubscribe = null;
-          if (action === "toggle") {
-            unsubscribe = observeElementInViewport(element, close, open);
-          }
-          if (unsubscribe) onCleanup(unsubscribe);
-          break;
-        }
-        default: {
-          element.addEventListener(
-            //@ts-ignore
-            on,
-            (event) => {
-              if (preventDefault) event.preventDefault();
-              if (state.isAnimating) return;
-              switch (action) {
-                case "close":
-                  close();
-                  break;
-                case "open":
-                  open();
-                  break;
-                case "toggle":
-                  toggle();
-                  break;
-              }
-            },
-            { signal: controller.signal }
-          );
-          break;
-        }
-      }
-      createEffect(() => {
-        element.setAttribute("is-open", `${state.isOpen}`);
-        element.setAttribute("is-animating", `${state.isAnimating}`);
-      });
-      onCleanup(() => {
-        controller.abort();
-      });
-    }
-  );
+import { useDrawerAt, useDrawerContext } from "../hooks/useDrawer.js";
+import "../hooks/index.js";
+import { createGuardedEffect, ensureId, findDisclosureControl } from "@brytdesigns/web-component-core/utils";
+import { observeElementInViewport } from "observe-element-in-viewport";
+//#region src/components/drawer-trigger.ts
+var Name = "drawer-trigger";
+var Component = (props, { element }) => {
+	const drawer = useDrawerAt(() => props.target, element);
+	createGuardedEffect(() => ({
+		context: drawer(),
+		action: props.action,
+		on: props.on,
+		preventDefault: props.preventDefault
+	}), ({ context, action, on, preventDefault }) => {
+		const controller = new AbortController();
+		const [state, { open, close, toggle }] = useDrawerContext(context);
+		switch (on) {
+			case "enter":
+				if (action === "toggle") {
+					const unsubscribe = observeElementInViewport(element, open, close);
+					return () => {
+						unsubscribe();
+						controller.abort();
+					};
+				}
+				break;
+			case "exit":
+				if (action === "toggle") {
+					const unsubscribe = observeElementInViewport(element, close, open);
+					return () => {
+						unsubscribe();
+						controller.abort();
+					};
+				}
+				break;
+			default: element.addEventListener(on, (event) => {
+				if (preventDefault) event.preventDefault();
+				if (state.isAnimating) return;
+				switch (action) {
+					case "close":
+						close();
+						break;
+					case "open":
+						open();
+						break;
+					case "toggle": toggle();
+				}
+			}, { signal: controller.signal });
+		}
+		return () => {
+			controller.abort();
+		};
+	});
+	/**
+	* ARIA for the control that opens the overlay.
+	*
+	* `aria-haspopup="dialog"` rather than `aria-expanded`: this opens an
+	* overlay and moves focus into it, which is not the disclosure pattern
+	* `aria-expanded` describes. None of this was published before.
+	*
+	* A trigger with no button inside warns and sets nothing, matching
+	* `dialog-trigger` — ARIA on a non-interactive wrapper would claim a
+	* control that assistive tech cannot operate.
+	*/
+	createGuardedEffect(() => ({
+		context: drawer(),
+		selector: props.target
+	}), ({ selector }) => {
+		const control = findDisclosureControl(element);
+		if (!control) {
+			console.warn("drawer-trigger: no <button> inside it, so no ARIA was applied. Wrap the trigger content in a <button type=\"button\">.", element);
+			return;
+		}
+		control.setAttribute("aria-haspopup", "dialog");
+		const root = selector ? document.querySelector(selector) : null;
+		if (root && !control.hasAttribute("aria-controls")) control.setAttribute("aria-controls", ensureId(root, "drawer"));
+	});
+	createGuardedEffect(() => {
+		const context = drawer();
+		const [state] = useDrawerContext(context);
+		return {
+			isOpen: state.isOpen,
+			isAnimating: state.isAnimating
+		};
+	}, ({ isOpen, isAnimating }) => {
+		element.setAttribute("is-open", `${isOpen}`);
+		element.setAttribute("is-animating", `${isAnimating}`);
+	});
 };
-
+//#endregion
 export { Component, Name };
-//# sourceMappingURL=drawer-trigger.js.map
+
 //# sourceMappingURL=drawer-trigger.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/drawer-trigger.ts"],"names":["props"],"mappings":";;;;AAeO,MAAM,IAAO,GAAA;AAEb,MAAM,SAAyC,GAAA,CAAC,KAAO,EAAA,EAAE,SAAc,KAAA;AAC5E,EAAA,wBAAA;AAAA,IACE,MAAM,MAAM,MAAU,IAAA,EAAA;AAAA,IACtB,MAAM;AACJ,MAAO,OAAA;AAAA,QACL,QAAQ,KAAM,CAAA,MAAA;AAAA,QACd,IAAI,KAAM,CAAA,EAAA;AAAA,QACV,gBAAgB,KAAM,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,SAASA,MAAU,KAAA;AAClB,MAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AACvC,MAAA,MAAM,EAAE,MAAA,EAAQ,EAAI,EAAA,cAAA,EAAmBA,GAAAA,MAAAA;AACvC,MAAM,MAAA,CAAC,OAAO,EAAE,IAAA,EAAM,OAAO,MAAO,EAAC,CAAI,GAAA,gBAAA,CAAiB,OAAO,CAAA;AAEjE,MAAA,QAAQ,EAAI;AAAA,QACV,KAAK,OAAS,EAAA;AACZ,UAAA,IAAI,WAAc,GAAA,IAAA;AAClB,UAAA,IAAI,WAAW,QAAU,EAAA;AACvB,YAAc,WAAA,GAAA,wBAAA,CAAyB,OAAS,EAAA,IAAA,EAAM,KAAK,CAAA;AAAA;AAG7D,UAAI,IAAA,WAAA,YAAuB,WAAW,CAAA;AACtC,UAAA;AAAA;AACF,QACA,KAAK,MAAQ,EAAA;AACX,UAAA,IAAI,WAAc,GAAA,IAAA;AAClB,UAAA,IAAI,WAAW,QAAU,EAAA;AACvB,YAAc,WAAA,GAAA,wBAAA,CAAyB,OAAS,EAAA,KAAA,EAAO,IAAI,CAAA;AAAA;AAG7D,UAAI,IAAA,WAAA,YAAuB,WAAW,CAAA;AACtC,UAAA;AAAA;AACF,QAEA,SAAS;AACP,UAAQ,OAAA,CAAA,gBAAA;AAAA;AAAA,YAEN,EAAA;AAAA,YACA,CAAC,KAAU,KAAA;AACT,cAAI,IAAA,cAAA,QAAsB,cAAe,EAAA;AACzC,cAAA,IAAI,MAAM,WAAa,EAAA;AACvB,cAAA,QAAQ,MAAQ;AAAA,gBACd,KAAK,OAAA;AACH,kBAAM,KAAA,EAAA;AACN,kBAAA;AAAA,gBACF,KAAK,MAAA;AACH,kBAAK,IAAA,EAAA;AACL,kBAAA;AAAA,gBACF,KAAK,QAAA;AACH,kBAAO,MAAA,EAAA;AACP,kBAAA;AAAA;AACJ,aACF;AAAA,YACA,EAAE,MAAQ,EAAA,UAAA,CAAW,MAAO;AAAA,WAC9B;AACA,UAAA;AAAA;AACF;AAGF,MAAA,YAAA,CAAa,MAAM;AACjB,QAAA,OAAA,CAAQ,YAAa,CAAA,SAAA,EAAW,CAAG,EAAA,KAAA,CAAM,MAAM,CAAE,CAAA,CAAA;AACjD,QAAA,OAAA,CAAQ,YAAa,CAAA,cAAA,EAAgB,CAAG,EAAA,KAAA,CAAM,WAAW,CAAE,CAAA,CAAA;AAAA,OAC5D,CAAA;AAED,MAAA,SAAA,CAAU,MAAM;AACd,QAAA,UAAA,CAAW,KAAM,EAAA;AAAA,OAClB,CAAA;AAAA;AACH,GACF;AACF","file":"drawer-trigger.js","sourcesContent":["import type { CorrectComponentType } from \"@brytdesigns/web-component-core/utils\";\nimport type { Action } from \"../consts\";\n\nimport { createEffect, onCleanup } from \"solid-js\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport { withDrawerElementContext, useDrawerContext } from \"../hooks/index.js\";\n\nexport type Props = {\n  target?: string;\n  action?: Action | \"\";\n  on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n  preventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n  withDrawerElementContext(\n    () => props.target || \"\",\n    () => {\n      return {\n        action: props.action,\n        on: props.on,\n        preventDefault: props.preventDefault,\n      };\n    },\n    (context, props) => {\n      const controller = new AbortController();\n      const { action, on, preventDefault } = props;\n      const [state, { open, close, toggle }] = useDrawerContext(context);\n\n      switch (on) {\n        case \"enter\": {\n          let unsubscribe = null;\n          if (action === \"toggle\") {\n            unsubscribe = observeElementInViewport(element, open, close);\n          }\n\n          if (unsubscribe) onCleanup(unsubscribe);\n          break;\n        }\n        case \"exit\": {\n          let unsubscribe = null;\n          if (action === \"toggle\") {\n            unsubscribe = observeElementInViewport(element, close, open);\n          }\n\n          if (unsubscribe) onCleanup(unsubscribe);\n          break;\n        }\n\n        default: {\n          element.addEventListener(\n            //@ts-ignore\n            on,\n            (event) => {\n              if (preventDefault) event.preventDefault();\n              if (state.isAnimating) return;\n              switch (action) {\n                case \"close\":\n                  close();\n                  break;\n                case \"open\":\n                  open();\n                  break;\n                case \"toggle\":\n                  toggle();\n                  break;\n              }\n            },\n            { signal: controller.signal },\n          );\n          break;\n        }\n      }\n\n      createEffect(() => {\n        element.setAttribute(\"is-open\", `${state.isOpen}`);\n        element.setAttribute(\"is-animating\", `${state.isAnimating}`);\n      });\n\n      onCleanup(() => {\n        controller.abort();\n      });\n    },\n  );\n};\n"]}
+{"version":3,"file":"drawer-trigger.js","names":[],"sources":["../../../src/components/drawer-trigger.ts"],"sourcesContent":["import {\n\ttype CorrectComponentType,\n\tcreateGuardedEffect,\n\tensureId,\n\tfindDisclosureControl,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\n\nimport type { Action } from \"../consts\";\n\nimport { useDrawerAt, useDrawerContext } from \"../hooks/index.js\";\n\nexport type Props = {\n\ttarget?: string;\n\taction?: Action | \"\";\n\ton?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\n\tpreventDefault: boolean;\n};\n\nexport const Name = \"drawer-trigger\";\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// The drawer is not an ancestor, so this is a lateral lookup. It resolves\n\t// asynchronously — waiting for a provider that may mount later, and\n\t// re-resolving if one replaces it — and reading it in an effect's compute\n\t// phase simply defers the apply until it is ready. No boundary needed.\n\tconst drawer = useDrawerAt(() => props.target, element);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tcontext: drawer(),\n\t\t\taction: props.action,\n\t\t\ton: props.on,\n\t\t\tpreventDefault: props.preventDefault,\n\t\t}),\n\t\t({ context, action, on, preventDefault }) => {\n\t\t\tconst controller = new AbortController();\n\t\t\tconst [state, { open, close, toggle }] = useDrawerContext(context);\n\n\t\t\tswitch (on) {\n\t\t\t\tcase \"enter\": {\n\t\t\t\t\tif (action === \"toggle\") {\n\t\t\t\t\t\tconst unsubscribe = observeElementInViewport(element, open, close);\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tunsubscribe();\n\t\t\t\t\t\t\tcontroller.abort();\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tcase \"exit\": {\n\t\t\t\t\tif (action === \"toggle\") {\n\t\t\t\t\t\tconst unsubscribe = observeElementInViewport(element, close, open);\n\t\t\t\t\t\treturn () => {\n\t\t\t\t\t\t\tunsubscribe();\n\t\t\t\t\t\t\tcontroller.abort();\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\n\t\t\t\tdefault: {\n\t\t\t\t\telement.addEventListener(\n\t\t\t\t\t\t//@ts-expect-error `on` is a free-form attribute\n\t\t\t\t\t\ton,\n\t\t\t\t\t\t(event) => {\n\t\t\t\t\t\t\tif (preventDefault) event.preventDefault();\n\t\t\t\t\t\t\tif (state.isAnimating) return;\n\t\t\t\t\t\t\tswitch (action) {\n\t\t\t\t\t\t\t\tcase \"close\":\n\t\t\t\t\t\t\t\t\tclose();\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\tcase \"open\":\n\t\t\t\t\t\t\t\t\topen();\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t\tcase \"toggle\":\n\t\t\t\t\t\t\t\t\ttoggle();\n\t\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ signal: controller.signal },\n\t\t\t\t\t);\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tcontroller.abort();\n\t\t\t};\n\t\t},\n\t);\n\n\t/**\n\t * ARIA for the control that opens the overlay.\n\t *\n\t * `aria-haspopup=\"dialog\"` rather than `aria-expanded`: this opens an\n\t * overlay and moves focus into it, which is not the disclosure pattern\n\t * `aria-expanded` describes. None of this was published before.\n\t *\n\t * A trigger with no button inside warns and sets nothing, matching\n\t * `dialog-trigger` — ARIA on a non-interactive wrapper would claim a\n\t * control that assistive tech cannot operate.\n\t */\n\tcreateGuardedEffect(\n\t\t// `target` belongs in the dependency list. It was read from the apply\n\t\t// phase, which does not track, so a trigger whose `target` changed kept\n\t\t// publishing `aria-controls` for the element it used to point at — the\n\t\t// same shape of defect as `product-variant-input` writing a stale\n\t\t// variant id, and just as quiet.\n\t\t() => ({ context: drawer(), selector: props.target }),\n\t\t({ selector }) => {\n\t\t\tconst control = findDisclosureControl(element);\n\t\t\tif (!control) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'drawer-trigger: no <button> inside it, so no ARIA was applied. Wrap the trigger content in a <button type=\"button\">.',\n\t\t\t\t\telement,\n\t\t\t\t);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcontrol.setAttribute(\"aria-haspopup\", \"dialog\");\n\t\t\tconst root = selector\n\t\t\t\t? document.querySelector<HTMLElement>(selector)\n\t\t\t\t: null;\n\t\t\t// An authored aria-controls is left alone.\n\t\t\tif (root && !control.hasAttribute(\"aria-controls\")) {\n\t\t\t\tcontrol.setAttribute(\"aria-controls\", ensureId(root, \"drawer\"));\n\t\t\t}\n\t\t},\n\t);\n\n\t// Mirroring drawer state onto the trigger is independent of which listener\n\t// is wired, so it is its own effect rather than nested inside the one above.\n\tcreateGuardedEffect(\n\t\t() => {\n\t\t\tconst context = drawer();\n\t\t\tconst [state] = useDrawerContext(context);\n\t\t\treturn { isOpen: state.isOpen, isAnimating: state.isAnimating };\n\t\t},\n\t\t({ isOpen, isAnimating }) => {\n\t\t\telement.setAttribute(\"is-open\", `${isOpen}`);\n\t\t\telement.setAttribute(\"is-animating\", `${isAnimating}`);\n\t\t},\n\t);\n};\n"],"mappings":";;;;;AAmBA,IAAa,OAAO;AAEpB,IAAa,aAA0C,OAAO,EAAE,cAAc;CAK7E,MAAM,SAAS,kBAAkB,MAAM,QAAQ,OAAO;CAEtD,2BACQ;EACN,SAAS,OAAO;EAChB,QAAQ,MAAM;EACd,IAAI,MAAM;EACV,gBAAgB,MAAM;CACvB,KACC,EAAE,SAAS,QAAQ,IAAI,qBAAqB;EAC5C,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,CAAC,OAAO,EAAE,MAAM,OAAO,YAAY,iBAAiB,OAAO;EAEjE,QAAQ,IAAR;GACC,KAAK;IACJ,IAAI,WAAW,UAAU;KACxB,MAAM,cAAc,yBAAyB,SAAS,MAAM,KAAK;KACjE,aAAa;MACZ,YAAY;MACZ,WAAW,MAAM;KAClB;IACD;IACA;GAED,KAAK;IACJ,IAAI,WAAW,UAAU;KACxB,MAAM,cAAc,yBAAyB,SAAS,OAAO,IAAI;KACjE,aAAa;MACZ,YAAY;MACZ,WAAW,MAAM;KAClB;IACD;IACA;GAGD,SACC,QAAQ,iBAEP,KACC,UAAU;IACV,IAAI,gBAAgB,MAAM,eAAe;IACzC,IAAI,MAAM,aAAa;IACvB,QAAQ,QAAR;KACC,KAAK;MACJ,MAAM;MACN;KACD,KAAK;MACJ,KAAK;MACL;KACD,KAAK,UACJ,OAAO;IAET;GACD,GACA,EAAE,QAAQ,WAAW,OAAO,CAC7B;EAGF;EAEA,aAAa;GACZ,WAAW,MAAM;EAClB;CACD,CACD;;;;;;;;;;;;CAaA,2BAMQ;EAAE,SAAS,OAAO;EAAG,UAAU,MAAM;CAAO,KAClD,EAAE,eAAe;EACjB,MAAM,UAAU,sBAAsB,OAAO;EAC7C,IAAI,CAAC,SAAS;GACb,QAAQ,KACP,0HACA,OACD;GACA;EACD;EACA,QAAQ,aAAa,iBAAiB,QAAQ;EAC9C,MAAM,OAAO,WACV,SAAS,cAA2B,QAAQ,IAC5C;EAEH,IAAI,QAAQ,CAAC,QAAQ,aAAa,eAAe,GAChD,QAAQ,aAAa,iBAAiB,SAAS,MAAM,QAAQ,CAAC;CAEhE,CACD;CAIA,0BACO;EACL,MAAM,UAAU,OAAO;EACvB,MAAM,CAAC,SAAS,iBAAiB,OAAO;EACxC,OAAO;GAAE,QAAQ,MAAM;GAAQ,aAAa,MAAM;EAAY;CAC/D,IACC,EAAE,QAAQ,kBAAkB;EAC5B,QAAQ,aAAa,WAAW,GAAG,QAAQ;EAC3C,QAAQ,aAAa,gBAAgB,GAAG,aAAa;CACtD,CACD;AACD"}

package/dist/main/components/index.js

@@ -1,10 +1,4 @@
-import * as drawerContent_js from './drawer-content.js';
-export { drawerContent_js as DrawerContent };
-import * as drawerTrigger_js from './drawer-trigger.js';
-export { drawerTrigger_js as DrawerTrigger };
-import * as drawerBackdrop_js from './drawer-backdrop.js';
-export { drawerBackdrop_js as DrawerBackdrop };
-import * as drawerContext_js from './drawer-context.js';
-export { drawerContext_js as DrawerContext };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import "./drawer-backdrop.js";
+import "./drawer-content.js";
+import "./drawer-context.js";
+import "./drawer-trigger.js";

package/dist/main/consts.js

@@ -1,16 +1,11 @@
-const POSITION = {
-  TOP: "top",
-  BOTTOM: "bottom",
-  LEFT: "left",
-  RIGHT: "right"
+//#region src/consts.ts
+var POSITION = {
+	TOP: "top",
+	BOTTOM: "bottom",
+	LEFT: "left",
+	RIGHT: "right"
 };
-const ACTION = {
-  OPEN: "open",
-  CLOSE: "close",
-  TOGGLE: "toggle"
-};
-const EVENT_NAMESPACE = `bryt:drawer`;
+//#endregion
+export { POSITION };
 
-export { ACTION, EVENT_NAMESPACE, POSITION };
-//# sourceMappingURL=consts.js.map
 //# sourceMappingURL=consts.js.map

package/dist/main/consts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/consts.ts"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA;AAAA,EACtB,GAAK,EAAA,KAAA;AAAA,EACL,MAAQ,EAAA,QAAA;AAAA,EACR,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA;AACT;AAEO,MAAM,MAAS,GAAA;AAAA,EACpB,IAAM,EAAA,MAAA;AAAA,EACN,KAAO,EAAA,OAAA;AAAA,EACP,MAAQ,EAAA;AACV;AAEO,MAAM,eAAkB,GAAA,CAAA,WAAA","file":"consts.js","sourcesContent":["export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n  TOP: \"top\",\n  BOTTOM: \"bottom\",\n  LEFT: \"left\",\n  RIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n  OPEN: \"open\",\n  CLOSE: \"close\",\n  TOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n"]}
+{"version":3,"file":"consts.js","names":[],"sources":["../../src/consts.ts"],"sourcesContent":["export type Position = (typeof POSITION)[keyof typeof POSITION];\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\n\nexport const POSITION = {\n\tTOP: \"top\",\n\tBOTTOM: \"bottom\",\n\tLEFT: \"left\",\n\tRIGHT: \"right\",\n} as const;\n\nexport const ACTION = {\n\tOPEN: \"open\",\n\tCLOSE: \"close\",\n\tTOGGLE: \"toggle\",\n};\n\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\n"],"mappings":";AAGA,IAAa,WAAW;CACvB,KAAK;CACL,QAAQ;CACR,MAAM;CACN,OAAO;AACR"}

package/dist/main/hooks/index.js

@@ -1,3 +1,2 @@
-export * from './useDrawer.js';
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import { getDrawerContext, provideDrawerContext, useDrawer, useDrawerAt, useDrawerContext } from "./useDrawer.js";
+export { getDrawerContext, provideDrawerContext, useDrawer, useDrawerAt, useDrawerContext };

package/dist/main/hooks/useDrawer.js

@@ -1,89 +1,93 @@
-import { createContext, provide, consume } from 'component-register';
-import { splitProps, createEffect, on, batch, onCleanup, untrack, mergeProps } from 'solid-js';
-import { createStore } from 'solid-js/store';
-import { abortablePromise } from '@brytdesigns/web-component-core/promise';
-import { awaitAllAnimations } from '@brytdesigns/web-component-core/animation';
-import { createWithElementContext, toHyphenated, getContextFromProvider } from '@brytdesigns/web-component-core/utils';
-
+import { createGuardedEffect, createRemoteContext, getContextFromProvider, toHyphenated } from "@brytdesigns/web-component-core/utils";
+import { awaitAllAnimations } from "@brytdesigns/web-component-core/animation";
+import { createSignal, merge, omit, untrack } from "solid-js";
+import { abortablePromise } from "@brytdesigns/web-component-core/promise";
+import { consume, createContext, provide } from "component-register";
+//#region src/hooks/useDrawer.ts
 function initializeDrawerContext(props) {
-  const [_internal, _state] = splitProps(props, ["root"]);
-  const [store, setStore] = createStore({ animationQueue: [] });
-  createEffect(
-    on(
-      () => store.animationQueue,
-      (animationQueue) => {
-        if (!animationQueue.length) return;
-        const controller = new AbortController();
-        const animations = awaitAllAnimations(animationQueue);
-        const abortableAnimations = abortablePromise(
-          animations,
-          controller.signal
-        );
-        setElementState("isAnimating", true);
-        abortableAnimations.finally(() => {
-          batch(() => {
-            setElementState("isAnimating", false);
-            setStore("animationQueue", []);
-          });
-        });
-        return onCleanup(() => {
-          controller.abort("Aborting drawer animations");
-        });
-      }
-    )
-  );
-  function setElementState(key, value) {
-    const currentValue = untrack(() => props[key]);
-    if (typeof value === "function") {
-      const result = value(currentValue || false);
-      if (`${currentValue}` === `${result}`) return;
-      _internal.root.setAttribute(toHyphenated(key), `${result}`);
-      return;
-    }
-    if (`${currentValue}` === `${value}`) return;
-    return _internal.root.setAttribute(toHyphenated(key), `${value}`);
-  }
-  return [mergeProps(_state, store), { setElementState, setStore }];
+	const _state = omit(props, "root");
+	/**
+	* The animation queue is a SIGNAL, not a store.
+	*
+	* A store deep-proxies what you put in it, and what goes in here is a list of
+	* live Motion playback controls. Proxied, every `.finished`, `.state` and
+	* `.then` on them became a reactive read from a non-tracking scope — hundreds
+	* of STRICT_READ_UNTRACKED reports under any interaction, and a proxy hop on
+	* every property access of an object that is not state at all.
+	*
+	* Nothing here needs per-property reactivity: the queue is replaced wholesale
+	* and read wholesale. A signal is the right primitive, and it hands the
+	* controls back exactly as they went in.
+	*/
+	const [animationQueue, setAnimationQueue] = createSignal([]);
+	createGuardedEffect(animationQueue, (queue) => {
+		if (!queue.length) return;
+		const controller = new AbortController();
+		const animations = awaitAllAnimations(queue);
+		const abortableAnimations = abortablePromise(animations, controller.signal);
+		setElementState("isAnimating", true);
+		abortableAnimations.finally(() => {
+			setElementState("isAnimating", false);
+			setAnimationQueue([]);
+		});
+		return () => {
+			controller.abort("Aborting drawer animations");
+		};
+	});
+	function setElementState(key, value) {
+		const currentValue = untrack(() => props[key]);
+		if (typeof value === "function") {
+			const result = value(currentValue || false);
+			if (`${currentValue}` === `${result}`) return;
+			props.root.setAttribute(toHyphenated(key), `${result}`);
+			return;
+		}
+		if (`${currentValue}` === `${value}`) return;
+		return props.root.setAttribute(toHyphenated(key), `${value}`);
+	}
+	return [merge(_state, { get animationQueue() {
+		return animationQueue();
+	} }), {
+		setElementState,
+		setAnimationQueue
+	}];
 }
-const DrawerContextState = createContext(initializeDrawerContext);
-const provideDrawerContext = (initialState, element) => {
-  const props = mergeProps(initialState, { root: element });
-  return provide(DrawerContextState, props, element);
+var DrawerContextState = createContext(initializeDrawerContext);
+var provideDrawerContext = (initialState, element) => {
+	const props = merge(initialState, { root: element });
+	return provide(DrawerContextState, props, element);
 };
-const useDrawerContext = (context) => {
-  const [state, { setElementState, setStore: setState }] = context;
-  function updateAnimationQueue(animation) {
-    setState("animationQueue", (state2) => [...state2, animation]);
-  }
-  function close() {
-    setElementState("isOpen", false);
-  }
-  function open() {
-    setElementState("isOpen", true);
-  }
-  function toggle() {
-    setElementState("isOpen", (open2) => !open2);
-  }
-  return [state, { updateAnimationQueue, close, open, toggle }];
+var useDrawerContext = (context) => {
+	const [state, { setElementState, setAnimationQueue }] = context;
+	function updateAnimationQueue(animation) {
+		setAnimationQueue((queue) => [...queue, animation]);
+	}
+	function close() {
+		setElementState("isOpen", false);
+	}
+	function open() {
+		setElementState("isOpen", true);
+	}
+	function toggle() {
+		setElementState("isOpen", (open) => !open);
+	}
+	return [state, {
+		updateAnimationQueue,
+		close,
+		open,
+		toggle
+	}];
 };
-const useDrawer = (element) => {
-  const context = consume(DrawerContextState, element);
-  if (!context) {
-    throw console.error(
-      "DrawerContext not found! Please ensure to wrap your custom element with drawer-context element."
-    );
-  }
-  return useDrawerContext(context);
+var useDrawer = (element) => {
+	const context = consume(DrawerContextState, element);
+	if (!context) throw new Error("DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.");
+	return useDrawerContext(context);
 };
-const withDrawerElementContext = createWithElementContext(DrawerContextState);
-const getDrawerContext = (element) => {
-  const context = getContextFromProvider(
-    DrawerContextState,
-    element
-  );
-  return useDrawerContext(context);
+var useDrawerAt = createRemoteContext(DrawerContextState);
+var getDrawerContext = (element) => {
+	return useDrawerContext(getContextFromProvider(DrawerContextState, element));
 };
+//#endregion
+export { getDrawerContext, provideDrawerContext, useDrawer, useDrawerAt, useDrawerContext };
 
-export { getDrawerContext, provideDrawerContext, useDrawer, useDrawerContext, withDrawerElementContext };
-//# sourceMappingURL=useDrawer.js.map
 //# sourceMappingURL=useDrawer.js.map

package/dist/main/hooks/useDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDrawer.ts"],"names":["state","open"],"mappings":"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","file":"useDrawer.js","sourcesContent":["import {\n  type ICustomElement,\n  createContext,\n  provide,\n  consume,\n} from \"component-register\";\nimport {\n  createEffect,\n  on,\n  batch,\n  splitProps,\n  untrack,\n  mergeProps,\n  onCleanup,\n} from \"solid-js\";\nimport { createStore } from \"solid-js/store\";\n\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport {\n  createWithElementContext,\n  toHyphenated,\n  getContextFromProvider,\n} from \"@brytdesigns/web-component-core/utils\";\n\ntype StoreContext = {\n  animationQueue: AnimationPlaybackControlsWithThen[];\n};\n\ntype CreateContextOptions = {\n  root: HTMLElement & ICustomElement;\n  isOpen: boolean;\n  isAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n  const [_internal, _state] = splitProps(props, [\"root\"]);\n  const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\n\n  createEffect(\n    on(\n      () => store.animationQueue,\n      (animationQueue) => {\n        if (!animationQueue.length) return;\n        const controller = new AbortController();\n        const animations = awaitAllAnimations(animationQueue);\n        const abortableAnimations = abortablePromise(\n          animations,\n          controller.signal,\n        );\n        setElementState(\"isAnimating\", true);\n        abortableAnimations.finally(() => {\n          batch(() => {\n            setElementState(\"isAnimating\", false);\n            setStore(\"animationQueue\", []);\n          });\n        });\n\n        return onCleanup(() => {\n          controller.abort(\"Aborting drawer animations\");\n        });\n      },\n    ),\n  );\n\n  function setElementState(\n    key: keyof Omit<CreateContextOptions, \"root\">,\n    value: boolean | ((v: boolean) => boolean),\n  ) {\n    const currentValue = untrack(() => props[key]);\n    if (typeof value === \"function\") {\n      const result = value(currentValue || false);\n      if (`${currentValue}` === `${result}`) return;\n      _internal.root.setAttribute(toHyphenated(key), `${result}`);\n      return;\n    }\n    if (`${currentValue}` === `${value}`) return;\n    return _internal.root.setAttribute(toHyphenated(key), `${value}`);\n  }\n\n  return [mergeProps(_state, store), { setElementState, setStore }] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n  initialState: Omit<CreateContextOptions, \"root\">,\n  element: WalkableNode,\n): DrawerContext => {\n  const props = mergeProps(initialState, { root: element });\n  return provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n  const [state, { setElementState, setStore: setState }] = context;\n\n  function updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\n    setState(\"animationQueue\", (state) => [...state, animation]);\n  }\n\n  function close() {\n    setElementState(\"isOpen\", false);\n  }\n\n  function open() {\n    setElementState(\"isOpen\", true);\n  }\n\n  function toggle() {\n    setElementState(\"isOpen\", (open) => !open);\n  }\n\n  return [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n  const context: DrawerContext = consume(DrawerContextState, element);\n\n  if (!context) {\n    throw console.error(\n      \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n    );\n  }\n\n  return useDrawerContext(context);\n};\n\nexport const withDrawerElementContext = createWithElementContext<\n  typeof DrawerContextState,\n  DrawerContext\n>(DrawerContextState);\n\nexport const getDrawerContext = (element: Element) => {\n  const context = getContextFromProvider<DrawerContext>(\n    DrawerContextState,\n    element,\n  );\n  return useDrawerContext(context);\n};\n"]}
+{"version":3,"file":"useDrawer.js","names":[],"sources":["../../../src/hooks/useDrawer.ts"],"sourcesContent":["import { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\nimport {\n\tcreateGuardedEffect,\n\tcreateRemoteContext,\n\tgetContextFromProvider,\n\ttoHyphenated,\n} from \"@brytdesigns/web-component-core/utils\";\nimport {\n\tconsume,\n\tcreateContext,\n\ttype ICustomElement,\n\tprovide,\n} from \"component-register\";\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\nimport { createSignal, merge, omit, untrack } from \"solid-js\";\n\ntype StoreContext = {\n\tanimationQueue: AnimationPlaybackControlsWithThen[];\n};\n\ntype CreateContextOptions = {\n\troot: HTMLElement & ICustomElement;\n\tisOpen: boolean;\n\tisAnimating: boolean;\n};\n\ntype WalkableNode = Parameters<typeof provide>[2];\n\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\n\nfunction initializeDrawerContext(props: CreateContextOptions) {\n\t// `omit` returns only the rest; `root` is read straight off `props`.\n\tconst _state = omit(props, \"root\");\n\t/**\n\t * The animation queue is a SIGNAL, not a store.\n\t *\n\t * A store deep-proxies what you put in it, and what goes in here is a list of\n\t * live Motion playback controls. Proxied, every `.finished`, `.state` and\n\t * `.then` on them became a reactive read from a non-tracking scope — hundreds\n\t * of STRICT_READ_UNTRACKED reports under any interaction, and a proxy hop on\n\t * every property access of an object that is not state at all.\n\t *\n\t * Nothing here needs per-property reactivity: the queue is replaced wholesale\n\t * and read wholesale. A signal is the right primitive, and it hands the\n\t * controls back exactly as they went in.\n\t */\n\tconst [animationQueue, setAnimationQueue] = createSignal<\n\t\tAnimationPlaybackControlsWithThen[]\n\t>([]);\n\n\tcreateGuardedEffect(animationQueue, (queue) => {\n\t\tif (!queue.length) return;\n\t\tconst controller = new AbortController();\n\t\tconst animations = awaitAllAnimations(queue);\n\t\tconst abortableAnimations = abortablePromise(animations, controller.signal);\n\t\tsetElementState(\"isAnimating\", true);\n\t\tabortableAnimations.finally(() => {\n\t\t\t// No `batch` in v2 — writes stage and flush together by default.\n\t\t\tsetElementState(\"isAnimating\", false);\n\t\t\tsetAnimationQueue([]);\n\t\t});\n\n\t\t// v2 treats the apply phase's return value as the cleanup.\n\t\treturn () => {\n\t\t\tcontroller.abort(\"Aborting drawer animations\");\n\t\t};\n\t});\n\n\tfunction setElementState(\n\t\tkey: keyof Omit<CreateContextOptions, \"root\">,\n\t\tvalue: boolean | ((v: boolean) => boolean),\n\t) {\n\t\tconst currentValue = untrack(() => props[key]);\n\t\tif (typeof value === \"function\") {\n\t\t\tconst result = value(currentValue || false);\n\t\t\tif (`${currentValue}` === `${result}`) return;\n\t\t\tprops.root.setAttribute(toHyphenated(key), `${result}`);\n\t\t\treturn;\n\t\t}\n\t\tif (`${currentValue}` === `${value}`) return;\n\t\treturn props.root.setAttribute(toHyphenated(key), `${value}`);\n\t}\n\n\treturn [\n\t\tmerge(_state, {\n\t\t\tget animationQueue() {\n\t\t\t\treturn animationQueue();\n\t\t\t},\n\t\t}),\n\t\t{ setElementState, setAnimationQueue },\n\t] as const;\n}\n\nconst DrawerContextState = createContext(initializeDrawerContext);\n\nexport const provideDrawerContext = (\n\tinitialState: Omit<CreateContextOptions, \"root\">,\n\telement: WalkableNode,\n): DrawerContext => {\n\tconst props = merge(initialState, { root: element });\n\treturn provide(DrawerContextState, props, element);\n};\n\nexport const useDrawerContext = (context: DrawerContext) => {\n\tconst [state, { setElementState, setAnimationQueue }] = context;\n\n\tfunction updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\n\t\t// v2 store setters are draft-first, but this one REPLACES the array\n\t\t// rather than pushing into it. The effect above tracks\n\t\t// `store.animationQueue` — the property, not its contents — and an\n\t\t// in-place `push` leaves that property pointing at the same array, so\n\t\t// the effect never re-ran and `is-animating` was never published at\n\t\t// any point, open or closed.\n\t\tsetAnimationQueue((queue) => [...queue, animation]);\n\t}\n\n\tfunction close() {\n\t\tsetElementState(\"isOpen\", false);\n\t}\n\n\tfunction open() {\n\t\tsetElementState(\"isOpen\", true);\n\t}\n\n\tfunction toggle() {\n\t\tsetElementState(\"isOpen\", (open) => !open);\n\t}\n\n\treturn [state, { updateAnimationQueue, close, open, toggle }] as const;\n};\n\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\n\tconst context: DrawerContext = consume(DrawerContextState, element);\n\n\tif (!context) {\n\t\tthrow new Error(\n\t\t\t\"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\n\t\t);\n\t}\n\n\treturn useDrawerContext(context);\n};\n\nexport const useDrawerAt =\n\tcreateRemoteContext<DrawerContext>(DrawerContextState);\n\nexport const getDrawerContext = (element: Element) => {\n\tconst context = getContextFromProvider<DrawerContext>(\n\t\tDrawerContextState,\n\t\telement,\n\t);\n\treturn useDrawerContext(context);\n};\n"],"mappings":";;;;;;AA+BA,SAAS,wBAAwB,OAA6B;CAE7D,MAAM,SAAS,KAAK,OAAO,MAAM;;;;;;;;;;;;;;CAcjC,MAAM,CAAC,gBAAgB,qBAAqB,aAE1C,CAAC,CAAC;CAEJ,oBAAoB,iBAAiB,UAAU;EAC9C,IAAI,CAAC,MAAM,QAAQ;EACnB,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,aAAa,mBAAmB,KAAK;EAC3C,MAAM,sBAAsB,iBAAiB,YAAY,WAAW,MAAM;EAC1E,gBAAgB,eAAe,IAAI;EACnC,oBAAoB,cAAc;GAEjC,gBAAgB,eAAe,KAAK;GACpC,kBAAkB,CAAC,CAAC;EACrB,CAAC;EAGD,aAAa;GACZ,WAAW,MAAM,4BAA4B;EAC9C;CACD,CAAC;CAED,SAAS,gBACR,KACA,OACC;EACD,MAAM,eAAe,cAAc,MAAM,IAAI;EAC7C,IAAI,OAAO,UAAU,YAAY;GAChC,MAAM,SAAS,MAAM,gBAAgB,KAAK;GAC1C,IAAI,GAAG,mBAAmB,GAAG,UAAU;GACvC,MAAM,KAAK,aAAa,aAAa,GAAG,GAAG,GAAG,QAAQ;GACtD;EACD;EACA,IAAI,GAAG,mBAAmB,GAAG,SAAS;EACtC,OAAO,MAAM,KAAK,aAAa,aAAa,GAAG,GAAG,GAAG,OAAO;CAC7D;CAEA,OAAO,CACN,MAAM,QAAQ,EACb,IAAI,iBAAiB;EACpB,OAAO,eAAe;CACvB,EACD,CAAC,GACD;EAAE;EAAiB;CAAkB,CACtC;AACD;AAEA,IAAM,qBAAqB,cAAc,uBAAuB;AAEhE,IAAa,wBACZ,cACA,YACmB;CACnB,MAAM,QAAQ,MAAM,cAAc,EAAE,MAAM,QAAQ,CAAC;CACnD,OAAO,QAAQ,oBAAoB,OAAO,OAAO;AAClD;AAEA,IAAa,oBAAoB,YAA2B;CAC3D,MAAM,CAAC,OAAO,EAAE,iBAAiB,uBAAuB;CAExD,SAAS,qBAAqB,WAA8C;EAO3E,mBAAmB,UAAU,CAAC,GAAG,OAAO,SAAS,CAAC;CACnD;CAEA,SAAS,QAAQ;EAChB,gBAAgB,UAAU,KAAK;CAChC;CAEA,SAAS,OAAO;EACf,gBAAgB,UAAU,IAAI;CAC/B;CAEA,SAAS,SAAS;EACjB,gBAAgB,WAAW,SAAS,CAAC,IAAI;CAC1C;CAEA,OAAO,CAAC,OAAO;EAAE;EAAsB;EAAO;EAAM;CAAO,CAAC;AAC7D;AAEA,IAAa,aAAa,YAA0C;CACnE,MAAM,UAAyB,QAAQ,oBAAoB,OAAO;CAElE,IAAI,CAAC,SACJ,MAAM,IAAI,MACT,iGACD;CAGD,OAAO,iBAAiB,OAAO;AAChC;AAEA,IAAa,cACZ,oBAAmC,kBAAkB;AAEtD,IAAa,oBAAoB,YAAqB;CAKrD,OAAO,iBAJS,uBACf,oBACA,OAEuB,CAAO;AAChC"}

package/dist/main/index.d.ts

@@ -3,43 +3,45 @@
 import { ICustomElement } from 'component-register';
 import { AnimationPlaybackControlsWithThen } from 'motion';
 
+/**
+ * `component-register` types `options.element` as a bare `ICustomElement`, but
+ * at runtime it is always also an `HTMLElement`. Every component in this repo
+ * needs the DOM half.
+ */
 export type CorrectComponentOptions = {
 	element: HTMLElement & ICustomElement;
 };
 export type CorrectComponentType<T> = (props: T, options: CorrectComponentOptions) => unknown;
 export type Props = {};
-declare const Name = "drawer-content";
+declare const Name = "drawer-backdrop";
 declare const Component: CorrectComponentType<Props>;
+type Props$1 = {};
+declare const Name$1 = "drawer-content";
+declare const Component$1: CorrectComponentType<Props$1>;
+type Props$2 = {
+	isOpen: boolean;
+	id: string;
+	closeOnEscape: boolean;
+	shouldTrapFocus: boolean;
+	isAnimating: boolean;
+	debug?: boolean;
+};
+declare const Name$2 = "drawer-context";
+declare const Component$2: CorrectComponentType<Props$2>;
 export type Action = (typeof ACTION)[keyof typeof ACTION];
 declare const ACTION: {
 	OPEN: string;
 	CLOSE: string;
 	TOGGLE: string;
 };
-type Props$1 = {
+type Props$3 = {
 	target?: string;
 	action?: Action | "";
 	on?: keyof HTMLElementEventMap | "enter" | "exit";
 	preventDefault: boolean;
 };
-declare const Name$1 = "drawer-trigger";
-declare const Component$1: CorrectComponentType<Props$1>;
-type Props$2 = {};
-declare const Name$2 = "drawer-backdrop";
-declare const Component$2: CorrectComponentType<Props$2>;
-type Props$3 = {
-	isOpen: boolean;
-	id: string;
-	closeOnEscape: boolean;
-	shouldTrapFocus: boolean;
-	isAnimating: boolean;
-	debug?: boolean;
-};
-declare const Name$3 = "drawer-context";
+declare const Name$3 = "drawer-trigger";
 declare const Component$3: CorrectComponentType<Props$3>;
-export type StoreContext = {
-	animationQueue: AnimationPlaybackControlsWithThen[];
-};
 export type CreateContextOptions = {
 	root: HTMLElement & ICustomElement;
 	isOpen: boolean;
@@ -49,7 +51,7 @@ export declare const useDrawer: (element: HTMLElement & ICustomElement) => reado
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly updateAnimationQueue: (animation: AnimationPlaybackControlsWithThen) => void;
@@ -58,22 +60,22 @@ export declare const useDrawer: (element: HTMLElement & ICustomElement) => reado
 		readonly toggle: () => void;
 	}
 ];
-export declare const withDrawerElementContext: <D extends unknown>(target: string | import("solid-js").Accessor<string> | import("solid-js").Accessor<() => Element>, dependencies: import("solid-js").Accessor<D> | undefined, cb: (context: readonly [
+export declare const useDrawerAt: (target: () => string | undefined, host: HTMLElement) => import("solid-js").SourceAccessor<readonly [
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly setElementState: (key: keyof Omit<CreateContextOptions, "root">, value: boolean | ((v: boolean) => boolean)) => void;
-		readonly setStore: import("solid-js/store").SetStoreFunction<StoreContext>;
+		readonly setAnimationQueue: import("solid-js").Setter<AnimationPlaybackControlsWithThen[]>;
 	}
-], dependencies: D) => void | (() => void)) => void;
+]>;
 export declare const getDrawerContext: (element: Element) => readonly [
 	{
 		isOpen: boolean;
 		isAnimating: boolean;
-		animationQueue: AnimationPlaybackControlsWithThen[];
+		readonly animationQueue: AnimationPlaybackControlsWithThen[];
 	},
 	{
 		readonly updateAnimationQueue: (animation: AnimationPlaybackControlsWithThen) => void;
@@ -82,12 +84,12 @@ export declare const getDrawerContext: (element: Element) => readonly [
 		readonly toggle: () => void;
 	}
 ];
-export type DrawerContentProps = Props;
-export type DrawerContextProps = DrawerContext.Props;
-export type DrawerTriggerProps = Props$1;
-export type DrawerBackdropProps = Props$2;
+export type DrawerContentProps = Props$1;
+export type DrawerContextProps = Props$2;
+export type DrawerTriggerProps = DrawerTrigger.Props;
+export type DrawerBackdropProps = Props;
 
-declare namespace DrawerContext {
+declare namespace DrawerTrigger {
 	export { Component$3 as Component, Name$3 as Name, Props$3 as Props };
 }