@brytdesigns/web-component-drawer 1.1.12 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/drawer-context.ts"],"names":["focusTrap","element"],"mappings":"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","file":"drawer-context.js","sourcesContent":["import {\r\n  type CorrectComponentType,\r\n  enableBodyScroll,\r\n  disableBodyScroll,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\nimport { createEffect, on, onCleanup, splitProps } from \"solid-js\";\r\nimport { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\r\n\r\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\r\nimport { hideElement, showElement } from \"../utils.js\";\r\n\r\nexport type Props = {\r\n  isOpen: boolean;\r\n  id: string;\r\n  closeOnEscape: boolean;\r\n  shouldTrapFocus: boolean;\r\n  isAnimating: boolean;\r\n  debug?: boolean;\r\n};\r\n\r\nexport const Name = `drawer-context`;\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n  const [contextProps, restProps] = splitProps(props, [\r\n    \"isOpen\",\r\n    \"isAnimating\",\r\n  ]);\r\n\r\n  const context = provideDrawerContext(contextProps, element);\r\n\r\n  const [state, { setElementState }] = context;\r\n\r\n  const [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\r\n\r\n  element.actions = events;\r\n\r\n  const focusTrap = createFocusTrap(element, () => ({\r\n    allowOutsideClick: true,\r\n    escapeDeactivates: restProps.closeOnEscape,\r\n    onDeactivate: () => {\r\n      setElementState(\"isOpen\", false);\r\n    },\r\n  }));\r\n\r\n  createEffect(() => {\r\n    if (!props.debug) return;\r\n    console.table({\r\n      ...state,\r\n    });\r\n  });\r\n\r\n  createEffect(\r\n    on(\r\n      () => state.isOpen,\r\n      (isOpen) => {\r\n        const eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\r\n        element.dispatchEvent(\r\n          new CustomEvent(eventName, {\r\n            bubbles: true,\r\n            detail: { isOpen, relatedTarget: element },\r\n          }),\r\n        );\r\n        element.dispatchEvent(\r\n          new CustomEvent(\"drawer:toggle\", {\r\n            bubbles: true,\r\n            detail: { isOpen, relatedTarget: element },\r\n          }),\r\n        );\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({\r\n        isOpen: state.isOpen,\r\n        focusTrap: focusTrap(),\r\n        shouldTrapFocus: restProps.shouldTrapFocus,\r\n      }),\r\n      ({ isOpen, focusTrap, shouldTrapFocus }) => {\r\n        if (!isOpen) return;\r\n        if (props.debug) console.log(\"Showing element\", element);\r\n        showElement(element);\r\n        if (!shouldTrapFocus) return;\r\n        focusTrap.activate();\r\n        onCleanup(focusTrap.deactivate);\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({\r\n        isOpen: state.isOpen,\r\n        isAnimating: state.isAnimating,\r\n        shouldTrapFocus: props.shouldTrapFocus,\r\n      }),\r\n      ({ isOpen, isAnimating, shouldTrapFocus }) => {\r\n        if (isOpen && !isAnimating && shouldTrapFocus)\r\n          return disableBodyScroll(element, {\r\n            allowTouchMove: (el: EventTarget) => {\r\n              if (el instanceof HTMLElement) {\r\n                let element = el as (EventTarget & HTMLElement) | null;\r\n                while (element && element !== document.body) {\r\n                  if (element.tagName === \"DRAWER-CONTENT\") {\r\n                    return true;\r\n                  }\r\n\r\n                  element = element.parentElement;\r\n                }\r\n              }\r\n              return false;\r\n            },\r\n          });\r\n        onCleanup(() => {\r\n          enableBodyScroll(element);\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  createEffect(\r\n    on(\r\n      () => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\r\n      ({ isOpen, animationQueue }) => {\r\n        if (isOpen) return;\r\n        if (props.debug)\r\n          console.log(\"Waiting for animations to complete...\", animationQueue);\r\n        return Promise.all(animationQueue)\r\n          .then(() => hideElement(element))\r\n          .then(() => {\r\n            if (props.debug) console.log(\"Hiding element\", element);\r\n          });\r\n      },\r\n    ),\r\n  );\r\n\r\n  onCleanup(() => {\r\n    enableBodyScroll(element);\r\n  });\r\n};\r\n"]}
+{"version":3,"file":"drawer-context.js","names":[],"sources":["../../../src/components/drawer-context.ts"],"sourcesContent":["import { createFocusTrap } from \"@brytdesigns/web-component-core/focusTrap\";\nimport {\n\ttype CorrectComponentType,\n\tcloseNestedOverlays,\n\tcreateEscapeHandler,\n\tcreateFocusReturn,\n\tcreateGuardedEffect,\n\tdisableBodyScroll,\n\tenableBodyScroll,\n\tfindOverlayPanel,\n} from \"@brytdesigns/web-component-core/utils\";\nimport { omit, onCleanup, onSettled, untrack } from \"solid-js\";\n\nimport { provideDrawerContext, useDrawerContext } from \"../hooks/index.js\";\nimport { hideElement, showElement } from \"../utils.js\";\n\nexport type Props = {\n\tisOpen: boolean;\n\tid: string;\n\tcloseOnEscape: boolean;\n\tshouldTrapFocus: boolean;\n\tisAnimating: boolean;\n\tdebug?: boolean;\n};\n\nexport const Name = `drawer-context`;\n\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\n\t// `debug` is a mount-time switch; snapshot it rather than tracking.\n\tconst debug = untrack(() => props.debug);\n\t// `splitProps` is gone. `omit` gives the rest; the picked half is a getter\n\t// object so it stays reactive, which is what splitProps returned.\n\tconst restProps = omit(props, \"isOpen\", \"isAnimating\");\n\tconst contextProps = {\n\t\tget isOpen() {\n\t\t\treturn props.isOpen;\n\t\t},\n\t\tget isAnimating() {\n\t\t\treturn props.isAnimating;\n\t\t},\n\t};\n\n\tconst context = provideDrawerContext(contextProps, element);\n\n\tconst [state, { setElementState }] = context;\n\n\tconst [_, { updateAnimationQueue, ...events }] = useDrawerContext(context);\n\n\telement.actions = events;\n\n\tconst panel = () => findOverlayPanel(element, \"drawer-content\");\n\tconst focusReturn = createFocusReturn(element);\n\n\tconst focusTrap = createFocusTrap(element, () => ({\n\t\tallowOutsideClick: true,\n\t\t// Escape and focus return are handled explicitly below rather than as\n\t\t// focus-trap options. As options they only applied while a trap was\n\t\t// active, so `close-on-escape=\"true\" should-trap-focus=\"false\"` silently\n\t\t// did nothing, and returning focus was a side effect of trapping it.\n\t\tescapeDeactivates: false,\n\t\treturnFocusOnDeactivate: false,\n\t\t// The panel, not its first button: a screen reader then announces the\n\t\t// dialog's name and role on open instead of \"Close\".\n\t\tinitialFocus: () => panel() ?? false,\n\t\t// Without this, an overlay holding nothing tabbable throws on activate.\n\t\tfallbackFocus: () => panel() ?? element,\n\t\t// No `onDeactivate`. It used to close the overlay, because deactivation\n\t\t// was how focus-trap's `escapeDeactivates` reported an Escape press —\n\t\t// and with Escape handled explicitly above, closing on *any* deactivation\n\t\t// is actively wrong: the trap is also deactivated whenever this effect\n\t\t// re-runs, so an overlay would close itself the moment it started\n\t\t// animating open.\n\t}));\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tcloseOnEscape: restProps.closeOnEscape,\n\t\t}),\n\t\t({ isOpen, closeOnEscape }) => {\n\t\t\tif (!isOpen || !closeOnEscape) return;\n\t\t\t// Only the innermost open overlay responds, so Escape inside a nested\n\t\t\t// overlay closes that one rather than collapsing the whole stack.\n\t\t\treturn createEscapeHandler({\n\t\t\t\telement,\n\t\t\t\tonEscape: () => setElementState(\"isOpen\", false),\n\t\t\t});\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ debug: debug, snapshot: { ...state } }),\n\t\t({ debug, snapshot }) => {\n\t\t\tif (!debug) return;\n\t\t\tconsole.table(snapshot);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen) => {\n\t\t\tconst eventName = isOpen ? \"drawer:open\" : \"drawer:close\";\n\t\t\telement.dispatchEvent(\n\t\t\t\tnew CustomEvent(eventName, {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { isOpen, relatedTarget: element },\n\t\t\t\t}),\n\t\t\t);\n\t\t\telement.dispatchEvent(\n\t\t\t\tnew CustomEvent(\"drawer:toggle\", {\n\t\t\t\t\tbubbles: true,\n\t\t\t\t\tdetail: { isOpen, relatedTarget: element },\n\t\t\t\t}),\n\t\t\t);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tisAnimating: state.isAnimating,\n\t\t\tfocusTrap: focusTrap(),\n\t\t\tshouldTrapFocus: restProps.shouldTrapFocus,\n\t\t}),\n\t\t({ isOpen, isAnimating, focusTrap, shouldTrapFocus }) => {\n\t\t\tif (!isOpen) return;\n\t\t\tif (debug) console.log(\"Showing element\", element);\n\t\t\tshowElement(element);\n\t\t\t// Waiting out the enter animation keeps the trap off content that is\n\t\t\t// still transitioning, and means `record()` reads the trigger rather\n\t\t\t// than whatever the animation left focused.\n\t\t\tif (!shouldTrapFocus || isAnimating) return;\n\t\t\tfocusReturn.record();\n\t\t\tfocusTrap.activate();\n\t\t\t// The apply phase is not a computation, so `onCleanup` here would\n\t\t\t// never register. Its return value IS the cleanup.\n\t\t\treturn () => {\n\t\t\t\tfocusTrap.deactivate();\n\t\t\t\tfocusReturn.restore();\n\t\t\t};\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({\n\t\t\tisOpen: state.isOpen,\n\t\t\tisAnimating: state.isAnimating,\n\t\t\tshouldTrapFocus: props.shouldTrapFocus,\n\t\t}),\n\t\t({ isOpen, isAnimating, shouldTrapFocus }) => {\n\t\t\tif (!isOpen || isAnimating || !shouldTrapFocus) return;\n\n\t\t\tdisableBodyScroll(element, {\n\t\t\t\tallowTouchMove: (el: EventTarget) => {\n\t\t\t\t\tif (el instanceof HTMLElement) {\n\t\t\t\t\t\tlet element = el as (EventTarget & HTMLElement) | null;\n\t\t\t\t\t\twhile (element && element !== document.body) {\n\t\t\t\t\t\t\tif (element.tagName === \"DRAWER-CONTENT\") {\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\telement = element.parentElement;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\t},\n\t\t\t});\n\n\t\t\t// The apply phase’s return value IS the cleanup, and\n\t\t\t// `disableBodyScroll` returns void — so returning its call registered\n\t\t\t// no cleanup at all. The lock was only released on the *next* run’s\n\t\t\t// cleanup, i.e. when the drawer reopened, so closing it left the page\n\t\t\t// unscrollable.\n\t\t\treturn () => enableBodyScroll(element);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => state.isOpen,\n\t\t(isOpen, previous) => {\n\t\t\t// Nothing to close on the mount run: a descendant that starts open was\n\t\t\t// authored that way, and closing it here would fight the markup.\n\t\t\tif (previous === undefined || isOpen) return;\n\t\t\t// Closing this one hides everything inside it, but a nested overlay\n\t\t\t// keeps its own `isOpen` until something changes it — so it would stay\n\t\t\t// \"open\" while invisible, never fire its close event, and reappear\n\t\t\t// still open when this one is opened again.\n\t\t\tcloseNestedOverlays(element);\n\t\t},\n\t);\n\n\tcreateGuardedEffect(\n\t\t() => ({ isOpen: state.isOpen, animationQueue: state.animationQueue }),\n\t\t({ isOpen, animationQueue }) => {\n\t\t\tif (isOpen) return;\n\t\t\tif (debug)\n\t\t\t\tconsole.log(\"Waiting for animations to complete...\", animationQueue);\n\t\t\t// Deliberately not returned: in v2 the apply phase's return value is\n\t\t\t// the cleanup function, and this is a promise chain.\n\t\t\tvoid Promise.all(animationQueue)\n\t\t\t\t.then(() => hideElement(element))\n\t\t\t\t.then(() => {\n\t\t\t\t\tif (debug) console.log(\"Hiding element\", element);\n\t\t\t\t});\n\t\t},\n\t);\n\n\tonCleanup(() => {\n\t\tenableBodyScroll(element);\n\t});\n};\n"],"mappings":"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"}

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\";\r\nimport type { Action } from \"../consts\";\r\n\r\nimport { createEffect, onCleanup } from \"solid-js\";\r\nimport { observeElementInViewport } from \"observe-element-in-viewport\";\r\n\r\nimport { withDrawerElementContext, useDrawerContext } from \"../hooks/index.js\";\r\n\r\nexport type Props = {\r\n  target?: string;\r\n  action?: Action | \"\";\r\n  on?: keyof HTMLElementEventMap | \"enter\" | \"exit\";\r\n  preventDefault: boolean;\r\n};\r\n\r\nexport const Name = \"drawer-trigger\";\r\n\r\nexport const Component: CorrectComponentType<Props> = (props, { element }) => {\r\n  withDrawerElementContext(\r\n    () => props.target || \"\",\r\n    () => {\r\n      return {\r\n        action: props.action,\r\n        on: props.on,\r\n        preventDefault: props.preventDefault,\r\n      };\r\n    },\r\n    (context, props) => {\r\n      const controller = new AbortController();\r\n      const { action, on, preventDefault } = props;\r\n      const [state, { open, close, toggle }] = useDrawerContext(context);\r\n\r\n      switch (on) {\r\n        case \"enter\": {\r\n          let unsubscribe = null;\r\n          if (action === \"toggle\") {\r\n            unsubscribe = observeElementInViewport(element, open, close);\r\n          }\r\n\r\n          if (unsubscribe) onCleanup(unsubscribe);\r\n          break;\r\n        }\r\n        case \"exit\": {\r\n          let unsubscribe = null;\r\n          if (action === \"toggle\") {\r\n            unsubscribe = observeElementInViewport(element, close, open);\r\n          }\r\n\r\n          if (unsubscribe) onCleanup(unsubscribe);\r\n          break;\r\n        }\r\n\r\n        default: {\r\n          element.addEventListener(\r\n            //@ts-ignore\r\n            on,\r\n            (event) => {\r\n              if (preventDefault) event.preventDefault();\r\n              if (state.isAnimating) return;\r\n              switch (action) {\r\n                case \"close\":\r\n                  close();\r\n                  break;\r\n                case \"open\":\r\n                  open();\r\n                  break;\r\n                case \"toggle\":\r\n                  toggle();\r\n                  break;\r\n              }\r\n            },\r\n            { signal: controller.signal },\r\n          );\r\n          break;\r\n        }\r\n      }\r\n\r\n      createEffect(() => {\r\n        element.setAttribute(\"is-open\", `${state.isOpen}`);\r\n        element.setAttribute(\"is-animating\", `${state.isAnimating}`);\r\n      });\r\n\r\n      onCleanup(() => {\r\n        controller.abort();\r\n      });\r\n    },\r\n  );\r\n};\r\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];\r\nexport type Action = (typeof ACTION)[keyof typeof ACTION];\r\n\r\nexport const POSITION = {\r\n  TOP: \"top\",\r\n  BOTTOM: \"bottom\",\r\n  LEFT: \"left\",\r\n  RIGHT: \"right\",\r\n} as const;\r\n\r\nexport const ACTION = {\r\n  OPEN: \"open\",\r\n  CLOSE: \"close\",\r\n  TOGGLE: \"toggle\",\r\n};\r\n\r\nexport const EVENT_NAMESPACE = `bryt:drawer` as const;\r\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":";;;;;;;AAwCA,SAAS,wBAAwB,KAA6B,EAAA;AAC5D,EAAM,MAAA,CAAC,WAAW,MAAM,CAAA,GAAI,WAAW,KAAO,EAAA,CAAC,MAAM,CAAC,CAAA;AACtD,EAAM,MAAA,CAAC,OAAO,QAAQ,CAAA,GAAI,YAA0B,EAAE,cAAA,EAAgB,EAAC,EAAG,CAAA;AAE1E,EAAA,YAAA;AAAA,IACE,EAAA;AAAA,MACE,MAAM,KAAM,CAAA,cAAA;AAAA,MACZ,CAAC,cAAmB,KAAA;AAClB,QAAI,IAAA,CAAC,eAAe,MAAQ,EAAA;AAC5B,QAAM,MAAA,UAAA,GAAa,IAAI,eAAgB,EAAA;AACvC,QAAM,MAAA,UAAA,GAAa,mBAAmB,cAAc,CAAA;AACpD,QAAA,MAAM,mBAAsB,GAAA,gBAAA;AAAA,UAC1B,UAAA;AAAA,UACA,UAAW,CAAA;AAAA,SACb;AACA,QAAA,eAAA,CAAgB,eAAe,IAAI,CAAA;AACnC,QAAA,mBAAA,CAAoB,QAAQ,MAAM;AAChC,UAAA,KAAA,CAAM,MAAM;AACV,YAAA,eAAA,CAAgB,eAAe,KAAK,CAAA;AACpC,YAAS,QAAA,CAAA,gBAAA,EAAkB,EAAE,CAAA;AAAA,WAC9B,CAAA;AAAA,SACF,CAAA;AAED,QAAA,OAAO,UAAU,MAAM;AACrB,UAAA,UAAA,CAAW,MAAM,4BAA4B,CAAA;AAAA,SAC9C,CAAA;AAAA;AACH;AACF,GACF;AAEA,EAAS,SAAA,eAAA,CACP,KACA,KACA,EAAA;AACA,IAAA,MAAM,YAAe,GAAA,OAAA,CAAQ,MAAM,KAAA,CAAM,GAAG,CAAC,CAAA;AAC7C,IAAI,IAAA,OAAO,UAAU,UAAY,EAAA;AAC/B,MAAM,MAAA,MAAA,GAAS,KAAM,CAAA,YAAA,IAAgB,KAAK,CAAA;AAC1C,MAAA,IAAI,CAAG,EAAA,YAAY,CAAO,CAAA,KAAA,CAAA,EAAG,MAAM,CAAI,CAAA,EAAA;AACvC,MAAA,SAAA,CAAU,KAAK,YAAa,CAAA,YAAA,CAAa,GAAG,CAAG,EAAA,CAAA,EAAG,MAAM,CAAE,CAAA,CAAA;AAC1D,MAAA;AAAA;AAEF,IAAA,IAAI,CAAG,EAAA,YAAY,CAAO,CAAA,KAAA,CAAA,EAAG,KAAK,CAAI,CAAA,EAAA;AACtC,IAAO,OAAA,SAAA,CAAU,KAAK,YAAa,CAAA,YAAA,CAAa,GAAG,CAAG,EAAA,CAAA,EAAG,KAAK,CAAE,CAAA,CAAA;AAAA;AAGlE,EAAO,OAAA,CAAC,WAAW,MAAQ,EAAA,KAAK,GAAG,EAAE,eAAA,EAAiB,UAAU,CAAA;AAClE;AAEA,MAAM,kBAAA,GAAqB,cAAc,uBAAuB,CAAA;AAEnD,MAAA,oBAAA,GAAuB,CAClC,YAAA,EACA,OACkB,KAAA;AAClB,EAAA,MAAM,QAAQ,UAAW,CAAA,YAAA,EAAc,EAAE,IAAA,EAAM,SAAS,CAAA;AACxD,EAAO,OAAA,OAAA,CAAQ,kBAAoB,EAAA,KAAA,EAAO,OAAO,CAAA;AACnD;AAEa,MAAA,gBAAA,GAAmB,CAAC,OAA2B,KAAA;AAC1D,EAAA,MAAM,CAAC,KAAO,EAAA,EAAE,iBAAiB,QAAU,EAAA,QAAA,EAAU,CAAI,GAAA,OAAA;AAEzD,EAAA,SAAS,qBAAqB,SAA8C,EAAA;AAC1E,IAAA,QAAA,CAAS,kBAAkB,CAACA,MAAAA,KAAU,CAAC,GAAGA,MAAAA,EAAO,SAAS,CAAC,CAAA;AAAA;AAG7D,EAAA,SAAS,KAAQ,GAAA;AACf,IAAA,eAAA,CAAgB,UAAU,KAAK,CAAA;AAAA;AAGjC,EAAA,SAAS,IAAO,GAAA;AACd,IAAA,eAAA,CAAgB,UAAU,IAAI,CAAA;AAAA;AAGhC,EAAA,SAAS,MAAS,GAAA;AAChB,IAAA,eAAA,CAAgB,QAAU,EAAA,CAACC,KAAS,KAAA,CAACA,KAAI,CAAA;AAAA;AAG3C,EAAA,OAAO,CAAC,KAAO,EAAA,EAAE,sBAAsB,KAAO,EAAA,IAAA,EAAM,QAAQ,CAAA;AAC9D;AAEa,MAAA,SAAA,GAAY,CAAC,OAA0C,KAAA;AAClE,EAAM,MAAA,OAAA,GAAyB,OAAQ,CAAA,kBAAA,EAAoB,OAAO,CAAA;AAElE,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,OAAQ,CAAA,KAAA;AAAA,MACZ;AAAA,KACF;AAAA;AAGF,EAAA,OAAO,iBAAiB,OAAO,CAAA;AACjC;AAEa,MAAA,wBAAA,GAA2B,yBAGtC,kBAAkB;AAEP,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AACpD,EAAA,MAAM,OAAU,GAAA,sBAAA;AAAA,IACd,kBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,OAAO,iBAAiB,OAAO,CAAA;AACjC","file":"useDrawer.js","sourcesContent":["import {\r\n  type ICustomElement,\r\n  createContext,\r\n  provide,\r\n  consume,\r\n} from \"component-register\";\r\nimport {\r\n  createEffect,\r\n  on,\r\n  batch,\r\n  splitProps,\r\n  untrack,\r\n  mergeProps,\r\n  onCleanup,\r\n} from \"solid-js\";\r\nimport { createStore } from \"solid-js/store\";\r\n\r\nimport type { AnimationPlaybackControlsWithThen } from \"motion\";\r\nimport { abortablePromise } from \"@brytdesigns/web-component-core/promise\";\r\nimport { awaitAllAnimations } from \"@brytdesigns/web-component-core/animation\";\r\nimport {\r\n  createWithElementContext,\r\n  toHyphenated,\r\n  getContextFromProvider,\r\n} from \"@brytdesigns/web-component-core/utils\";\r\n\r\ntype StoreContext = {\r\n  animationQueue: AnimationPlaybackControlsWithThen[];\r\n};\r\n\r\ntype CreateContextOptions = {\r\n  root: HTMLElement & ICustomElement;\r\n  isOpen: boolean;\r\n  isAnimating: boolean;\r\n};\r\n\r\ntype WalkableNode = Parameters<typeof provide>[2];\r\n\r\ntype DrawerContext = ReturnType<typeof initializeDrawerContext>;\r\n\r\nfunction initializeDrawerContext(props: CreateContextOptions) {\r\n  const [_internal, _state] = splitProps(props, [\"root\"]);\r\n  const [store, setStore] = createStore<StoreContext>({ animationQueue: [] });\r\n\r\n  createEffect(\r\n    on(\r\n      () => store.animationQueue,\r\n      (animationQueue) => {\r\n        if (!animationQueue.length) return;\r\n        const controller = new AbortController();\r\n        const animations = awaitAllAnimations(animationQueue);\r\n        const abortableAnimations = abortablePromise(\r\n          animations,\r\n          controller.signal,\r\n        );\r\n        setElementState(\"isAnimating\", true);\r\n        abortableAnimations.finally(() => {\r\n          batch(() => {\r\n            setElementState(\"isAnimating\", false);\r\n            setStore(\"animationQueue\", []);\r\n          });\r\n        });\r\n\r\n        return onCleanup(() => {\r\n          controller.abort(\"Aborting drawer animations\");\r\n        });\r\n      },\r\n    ),\r\n  );\r\n\r\n  function setElementState(\r\n    key: keyof Omit<CreateContextOptions, \"root\">,\r\n    value: boolean | ((v: boolean) => boolean),\r\n  ) {\r\n    const currentValue = untrack(() => props[key]);\r\n    if (typeof value === \"function\") {\r\n      const result = value(currentValue || false);\r\n      if (`${currentValue}` === `${result}`) return;\r\n      _internal.root.setAttribute(toHyphenated(key), `${result}`);\r\n      return;\r\n    }\r\n    if (`${currentValue}` === `${value}`) return;\r\n    return _internal.root.setAttribute(toHyphenated(key), `${value}`);\r\n  }\r\n\r\n  return [mergeProps(_state, store), { setElementState, setStore }] as const;\r\n}\r\n\r\nconst DrawerContextState = createContext(initializeDrawerContext);\r\n\r\nexport const provideDrawerContext = (\r\n  initialState: Omit<CreateContextOptions, \"root\">,\r\n  element: WalkableNode,\r\n): DrawerContext => {\r\n  const props = mergeProps(initialState, { root: element });\r\n  return provide(DrawerContextState, props, element);\r\n};\r\n\r\nexport const useDrawerContext = (context: DrawerContext) => {\r\n  const [state, { setElementState, setStore: setState }] = context;\r\n\r\n  function updateAnimationQueue(animation: AnimationPlaybackControlsWithThen) {\r\n    setState(\"animationQueue\", (state) => [...state, animation]);\r\n  }\r\n\r\n  function close() {\r\n    setElementState(\"isOpen\", false);\r\n  }\r\n\r\n  function open() {\r\n    setElementState(\"isOpen\", true);\r\n  }\r\n\r\n  function toggle() {\r\n    setElementState(\"isOpen\", (open) => !open);\r\n  }\r\n\r\n  return [state, { updateAnimationQueue, close, open, toggle }] as const;\r\n};\r\n\r\nexport const useDrawer = (element: HTMLElement & ICustomElement) => {\r\n  const context: DrawerContext = consume(DrawerContextState, element);\r\n\r\n  if (!context) {\r\n    throw console.error(\r\n      \"DrawerContext not found! Please ensure to wrap your custom element with drawer-context element.\",\r\n    );\r\n  }\r\n\r\n  return useDrawerContext(context);\r\n};\r\n\r\nexport const withDrawerElementContext = createWithElementContext<\r\n  typeof DrawerContextState,\r\n  DrawerContext\r\n>(DrawerContextState);\r\n\r\nexport const getDrawerContext = (element: Element) => {\r\n  const context = getContextFromProvider<DrawerContext>(\r\n    DrawerContextState,\r\n    element,\r\n  );\r\n  return useDrawerContext(context);\r\n};\r\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"}