toggle-event-source-polyfill 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Jeroen Zwartepoorte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,208 @@
+# ToggleEvent.source Polyfill
+
+[![Node CI](https://github.com/jpzwarte/toggle-event-source-polyfill/actions/workflows/test.yml/badge.svg)](https://github.com/jpzwarte/toggle-event-source-polyfill/actions/workflows/test.yml)
+
+This polyfills [`ToggleEvent.source`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/source):
+the element which caused a popover or `<dialog>` to be shown or hidden.
+
+```html
+<button commandfor="my-popover" command="toggle-popover">Toggle</button>
+<div popover id="my-popover">I'm a popover!</div>
+<script>
+  document.getElementById("my-popover").addEventListener("toggle", (event) => {
+    // The button which opened or closed the popover, or null if it was
+    // toggled programmatically.
+    console.log(event.source);
+  });
+</script>
+```
+
+`source` landed well after popovers, dialogs and invoker commands themselves
+(Chrome 140, Firefox 145, Safari 26.5), so it is missing in plenty of browsers
+which otherwise support everything you would use it with.
+
+## Installation
+
+### With npm
+
+If you're using npm, you only need to import the package, like so:
+
+```js
+import "toggle-event-source-polyfill";
+```
+
+This will automatically apply the polyfill if required.
+
+If you'd like to manually apply the polyfill, you can instead import the
+`isSupported` and `apply` functions directly from the `./toggle-event-source.js`
+file, which is mapped to `/fn`:
+
+```js
+import { isSupported, apply } from "toggle-event-source-polyfill/fn";
+if (!isSupported()) apply();
+```
+
+An `isPolyfilled` function is also available, to detect if it has been polyfilled:
+
+```js
+import { isSupported, isPolyfilled, apply } from "toggle-event-source-polyfill/fn";
+if (!isSupported() && !isPolyfilled()) apply();
+```
+
+Alternatively, if you're not using a package manager, you can use the `unpkg` script:
+
+```html
+<!-- polyfill automatically -->
+<script
+  type="module"
+  async
+  src="https://unpkg.com/toggle-event-source-polyfill@latest/toggle-event-source.min.js"
+></script>
+```
+
+## Usage
+
+A source is reported for popovers and dialogs toggled by:
+
+- a [`command`/`commandfor`](https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API) button
+- a [`popovertarget`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#popovertarget) button
+- `showPopover({ source })` and `togglePopover({ source })`
+
+As per spec, `hidePopover()` and the `<dialog>` `show()`, `showModal()`,
+`close()` and `requestClose()` methods have no source, and neither does a
+popover closed by light dismiss or by a close request - in all of those cases
+`event.source` is `null`.
+
+The polyfill also makes `new ToggleEvent(type, { source })` accept a source.
+
+### Together with a `command`/`commandfor` polyfill
+
+The polyfill reads `commandForElement`, `command`, `popoverTargetElement` and
+`popoverTargetAction` off the button, so it works both with native invoker
+commands and with a polyfill such as
+[invokers-polyfill](https://github.com/keithamus/invokers-polyfill) providing
+them. No cooperation between the two is needed, but **apply this polyfill
+first**:
+
+```js
+import "toggle-event-source-polyfill";
+import "invokers-polyfill";
+```
+
+A `command`/`commandfor` polyfill hides popovers and opens dialogs by calling
+`hidePopover()`, `showModal()`, `close()` and `requestClose()`, none of which
+carry a source of their own. This polyfill recognises those calls as belonging
+to the click it is handling, which requires its click listener to run first. In
+the other order the `toggle` event still reports the right source, but
+`beforetoggle` - which those methods fire synchronously, before this polyfill
+has seen the click - reports `null`.
+
+## Limitations
+
+- The polyfill hands the source to `toggle`/`beforetoggle` listeners from a
+  capture phase listener on the popover's root node, so a capture phase
+  listener registered on that root _before_ the polyfill is applied will see
+  `event.source` as `null`. Apply the polyfill as early as possible.
+- Setting a source does not make that element the popover's
+  [implicit anchor element](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning),
+  which cannot be polyfilled.
+- Buttons inside a closed shadow root that was created before the polyfill was
+  applied are not detected as sources.
+- If a popover polyfill is used, it must be loaded _before_ this polyfill, as it
+  replaces the popover methods this polyfill wraps.
+- If an invoker's activation is cancelled (by calling `preventDefault()` on its
+  `command` event, for example) and the same popover or dialog is later changed
+  in the same direction without a source, that earlier invoker may be reported
+  as the source.
+
+## Demo
+
+`npm start` opens the demo in Playwright's WebKit 26.0 - a real browser without
+`ToggleEvent.source` - so you can try the polyfill in a browser which actually
+needs it. Closing the browser window stops the dev server. `npm run dev` serves
+the same page in your own browser at http://localhost:5173/ instead.
+
+The page logs the source of every toggle event, and the button in its header
+reports whether the polyfill is loaded:
+
+- **Apply polyfill** - this browser has no `ToggleEvent.source`. Clicking
+  reloads the page with `?polyfill`, which applies it.
+- **Polyfill applied** - loaded with `?polyfill`. Clicking drops the parameter
+  again, so you can see the same buttons with and without it.
+- **No polyfill needed** - disabled, because the browser implements
+  `ToggleEvent.source` itself.
+
+The button reloads rather than applying the polyfill in place, because the
+polyfill hands sources to listeners from a capture phase listener on the
+popover's root node: anything registered before it applies would see a null
+source. Reloading with a query parameter keeps it first on the page.
+
+## Testing
+
+The suite runs in [Playwright](https://playwright.dev) and drives `index.html` -
+the demo's own buttons are clicked, and the source each `toggle` and
+`beforetoggle` reports is checked against the spec. Cases with no button of
+their own - the `ToggleEvent` constructor, the popover and dialog methods,
+shadow DOM retargeting - run as scripts inside the same page.
+
+```sh
+npm install
+npx playwright install
+npm test
+```
+
+There are two projects:
+
+- **WebKit 26.0**, the newest build Playwright ships which has popovers, dialogs
+  and `command`/`commandfor` but _not_ `ToggleEvent.source`. The polyfill is the
+  only missing piece there, so this is where it is exercised for real.
+- **Chromium**, which implements `ToggleEvent.source` itself. As well as running
+  the polyfill suites, it runs `native.spec.js`: the same expectations against
+  the browser's own implementation. That is what keeps the suite honest, rather
+  than only proving the polyfill agrees with itself.
+
+`@playwright/test` is pinned to an exact version on purpose: Playwright 1.59 and
+later bundle WebKit 26.4, which has `ToggleEvent.source` natively and would
+leave the polyfill untested. `support.spec.js` asserts what each project is
+expected to support, so an accidental upgrade fails loudly instead of quietly
+testing nothing.
+
+`npm run test:ui` opens Playwright's UI mode.
+
+## Releasing
+
+`0.0.1` has to be published by hand, because npm can only be told to trust a
+publisher for a package which already exists:
+
+```sh
+npm login
+npm version 0.0.1 --git-tag-version=false
+npm publish --access public          # prompts for your 2FA one-time password
+git checkout package.json package-lock.json
+```
+
+`prepublishOnly` builds `toggle-event-source.min.js`, and the version is
+reverted afterwards because the repository keeps a placeholder version in git -
+releases take their version from the tag instead.
+
+Then set up trusted publishing, so CI never needs a token. On npmjs.com, under
+the package's **Settings → Trusted Publisher**, choose GitHub Actions and enter:
+
+| Field                | Value                          |
+| -------------------- | ------------------------------ |
+| Organization or user | `jpzwarte`                     |
+| Repository           | `toggle-event-source-polyfill` |
+| Workflow filename    | `publish.yml`                  |
+| Environment          | leave empty                    |
+
+Every release after that is automatic: create a GitHub release tagged `v0.0.2`,
+`v0.1.0` and so on, and `.github/workflows/publish.yml` runs the tests, builds
+the minified bundle, sets the version from the tag, and publishes with
+provenance.
+
+## Acknowledgements
+
+Extracted from, and designed to work alongside,
+[invokers-polyfill](https://github.com/keithamus/invokers-polyfill) by Keith
+Cirkel, which polyfills the `command`/`commandfor` attributes themselves and is
+MIT licensed.

package/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="./toggle-event-source.d.ts" />
+
+export {};

package/index.js

@@ -0,0 +1,2 @@
+import { apply, isSupported } from "./toggle-event-source.js";
+if (!isSupported()) apply();

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "toggle-event-source-polyfill",
+  "version": "0.0.1",
+  "description": "This polyfills `ToggleEvent.source`, the element which caused a popover or `<dialog>` to be shown or hidden.",
+  "keywords": [
+    "command",
+    "commandfor",
+    "dialog",
+    "invokers",
+    "polyfill",
+    "popover",
+    "toggleevent"
+  ],
+  "homepage": "https://github.com/jpzwarte/toggle-event-source-polyfill#readme",
+  "bugs": {
+    "url": "https://github.com/jpzwarte/toggle-event-source-polyfill/issues"
+  },
+  "license": "MIT",
+  "author": "Jeroen Zwartepoorte",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jpzwarte/toggle-event-source-polyfill.git"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "toggle-event-source.js",
+    "toggle-event-source.d.ts",
+    "toggle-event-source.min.js"
+  ],
+  "type": "module",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "typesVersions": {
+    "*": {
+      "fn": [
+        "./toggle-event-source.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "browser": "./toggle-event-source.min.js",
+      "require": "./toggle-event-source.min.js"
+    },
+    "./fn": {
+      "types": "./toggle-event-source.d.ts",
+      "import": "./toggle-event-source.js"
+    }
+  },
+  "scripts": {
+    "start": "node scripts/start.js",
+    "dev": "vite",
+    "minify": "esbuild --bundle --minify index.js > toggle-event-source.min.js",
+    "prepublishOnly": "npm run minify",
+    "format": "oxfmt .",
+    "test": "playwright test",
+    "test:ui": "playwright test --ui"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.58.2",
+    "esbuild": "^0.28.2",
+    "oxfmt": "^0.64.0",
+    "vite": "^8.2.2"
+  }
+}

package/toggle-event-source.d.ts

@@ -0,0 +1,12 @@
+export declare function isSupported(): boolean;
+export declare function isPolyfilled(): boolean;
+export declare function apply(): void;
+
+declare global {
+  interface ToggleEvent {
+    readonly source: Element | null;
+  }
+  interface ToggleEventInit {
+    source?: Element | null;
+  }
+}

package/toggle-event-source.js

@@ -0,0 +1,357 @@
+// Polyfill for `ToggleEvent.source`: the element which caused a popover or
+// `<dialog>` to be shown or hidden.
+//
+// The `toggle`/`beforetoggle` events themselves are dispatched by the browser,
+// so this polyfill records the element responsible for a state change right
+// before the change happens, then hands it to the event during the capture
+// phase - which runs before any listener on the popover/dialog itself.
+
+const ELEMENT_NODE = 1;
+
+const NativeToggleEvent = globalThis.ToggleEvent;
+
+// event -> source element (or null)
+const eventSources = new WeakMap();
+// popover/dialog -> { source, newState, activation } for the state change which
+// is about to happen
+const pendingSources = new WeakMap();
+const observedRoots = new WeakSet();
+
+let applied = false;
+// The click event currently being dispatched, if it activated an invoker.
+let clickActivation = null;
+
+function isElement(node) {
+  return Boolean(node) && node.nodeType === ELEMENT_NODE;
+}
+
+function getRootNode(node) {
+  if (node && typeof node.getRootNode === "function") {
+    return node.getRootNode();
+  }
+  if (node && node.parentNode) return getRootNode(node.parentNode);
+  return node;
+}
+
+// Node returning IDL attributes are retargeted against the tree the event is
+// being observed in, so a source inside a shadow tree is reported as its host.
+function retarget(source, event) {
+  if (!isElement(source)) return null;
+  const sourceRoot = getRootNode(source);
+  if (sourceRoot !== getRootNode(event.target || document)) {
+    return sourceRoot.host || null;
+  }
+  return source;
+}
+
+function isPopoverOpen(element) {
+  try {
+    return element.matches(":popover-open");
+  } catch {
+    return false;
+  }
+}
+
+function isDialogOpen(element) {
+  return element.localName === "dialog" && element.hasAttribute("open");
+}
+
+class ToggleEvent extends (NativeToggleEvent || Event) {
+  constructor(type, toggleEventInit = {}) {
+    super(type, toggleEventInit);
+    const { source } = toggleEventInit;
+    if (source != null && !isElement(source)) {
+      throw new TypeError(`source must be an element`);
+    }
+    eventSources.set(this, source || null);
+    if (!NativeToggleEvent) {
+      const { oldState = "", newState = "" } = toggleEventInit;
+      Object.defineProperties(this, {
+        oldState: { value: String(oldState), enumerable: true },
+        newState: { value: String(newState), enumerable: true },
+      });
+    }
+  }
+
+  get [Symbol.toStringTag]() {
+    return "ToggleEvent";
+  }
+}
+
+// Events dispatched by the browser are instances of the native class, so
+// `instanceof` has to keep working for those too.
+if (NativeToggleEvent) {
+  Object.defineProperty(ToggleEvent, Symbol.hasInstance, {
+    configurable: true,
+    value: (value) => value instanceof NativeToggleEvent,
+  });
+}
+
+function setEventSource(event, source) {
+  eventSources.set(event, source);
+  // Events which aren't instances of the `ToggleEvent` we patched (for example
+  // ones dispatched by a popover polyfill) don't inherit the `source` getter.
+  if (!("source" in event)) {
+    Object.defineProperty(event, "source", {
+      enumerable: true,
+      configurable: true,
+      get() {
+        return retarget(eventSources.get(event) || null, event);
+      },
+    });
+  }
+}
+
+function handleToggleEvent(event) {
+  const pending = pendingSources.get(event.target);
+  if (!pending) return;
+  // A state change we didn't predict isn't the one we recorded a source for.
+  if (event.newState !== pending.newState) return;
+  if (event.type === "toggle") pendingSources.delete(event.target);
+  if (!pending.source) return;
+  setEventSource(event, pending.source);
+}
+
+function observeRootOf(element) {
+  const root = getRootNode(element);
+  if (!root || observedRoots.has(root)) return;
+  if (typeof root.addEventListener !== "function") return;
+  observedRoots.add(root);
+  root.addEventListener("beforetoggle", handleToggleEvent, true);
+  root.addEventListener("toggle", handleToggleEvent, true);
+}
+
+function setPendingSource(element, source, newState) {
+  if (!isElement(element)) return () => {};
+  const existing = pendingSources.get(element);
+  // `hidePopover()` and the `<dialog>` methods carry no source of their own.
+  // When one of them is called while an invoker click is being dispatched -
+  // which is how a `command`/`commandfor` polyfill drives them - it is that
+  // click, not the sourceless call, which describes the state change.
+  if (
+    !isElement(source) &&
+    existing &&
+    existing.source &&
+    existing.newState === newState &&
+    clickActivation !== null &&
+    existing.activation === clickActivation
+  ) {
+    return () => {};
+  }
+  const pending = {
+    source: isElement(source) ? source : null,
+    newState,
+    activation: clickActivation,
+  };
+  pendingSources.set(element, pending);
+  observeRootOf(element);
+  return () => {
+    if (pendingSources.get(element) === pending) pendingSources.delete(element);
+  };
+}
+
+function patchMethod(prototype, name, getPending) {
+  const method = prototype && prototype[name];
+  if (typeof method !== "function") return;
+  Object.defineProperty(prototype, name, {
+    ...Object.getOwnPropertyDescriptor(prototype, name),
+    value: function (...args) {
+      const { source, newState } = getPending.call(this, args);
+      const undo = setPendingSource(this, source, newState);
+      try {
+        return method.apply(this, args);
+      } catch (error) {
+        undo();
+        throw error;
+      }
+    },
+  });
+}
+
+function patchPopoverMethods() {
+  const prototype = globalThis.HTMLElement && HTMLElement.prototype;
+  if (!prototype || typeof prototype.showPopover !== "function") return;
+
+  patchMethod(prototype, "showPopover", function ([options]) {
+    return { source: options && options.source, newState: "open" };
+  });
+
+  // `hidePopover()` is specified to always hide with a null source.
+  patchMethod(prototype, "hidePopover", function () {
+    return { source: null, newState: "closed" };
+  });
+
+  patchMethod(prototype, "togglePopover", function ([options]) {
+    const dictionary = typeof options === "object" && options ? options : null;
+    const force = typeof options === "boolean" ? options : dictionary?.force;
+    const willShow = force == null ? !isPopoverOpen(this) : Boolean(force);
+    return {
+      // Only the showing branch of `togglePopover()` carries a source.
+      source: willShow && dictionary ? dictionary.source : null,
+      newState: willShow ? "open" : "closed",
+    };
+  });
+}
+
+function patchDialogMethods() {
+  const prototype = globalThis.HTMLDialogElement && HTMLDialogElement.prototype;
+  if (!prototype) return;
+  // None of these take a source; they are patched so a state change they cause
+  // isn't attributed to an invoker which is no longer responsible for it.
+  for (const [name, newState] of [
+    ["show", "open"],
+    ["showModal", "open"],
+    ["close", "closed"],
+    ["requestClose", "closed"],
+  ]) {
+    patchMethod(prototype, name, () => ({ source: null, newState }));
+  }
+}
+
+function recordActivationSource(element, source, newState, possible) {
+  const pending = pendingSources.get(element);
+  if (pending) {
+    // Something already performed the state change during this click - most
+    // likely a `command`/`commandfor` or popover polyfill acting on the button
+    // before this listener ran. It is recorded, it just has no source yet.
+    if (!pending.source) {
+      pending.source = source;
+      return;
+    }
+    // Or it recorded this same source itself, via `showPopover({ source })`.
+    if (pending.source === source) return;
+  }
+  if (possible) setPendingSource(element, source, newState);
+}
+
+function recordCommandSource(target, command, source) {
+  switch (command) {
+    case "show-popover":
+      if (target.popover) {
+        recordActivationSource(target, source, "open", !isPopoverOpen(target));
+      }
+      break;
+    case "hide-popover":
+      if (target.popover) {
+        recordActivationSource(target, source, "closed", isPopoverOpen(target));
+      }
+      break;
+    case "toggle-popover":
+      if (target.popover) {
+        const open = isPopoverOpen(target);
+        recordActivationSource(target, source, open ? "closed" : "open", true);
+      }
+      break;
+    case "show-modal":
+      if (target.localName === "dialog") {
+        recordActivationSource(target, source, "open", !isDialogOpen(target));
+      }
+      break;
+    case "close":
+    case "request-close":
+      if (target.localName === "dialog") {
+        recordActivationSource(target, source, "closed", isDialogOpen(target));
+      }
+      break;
+  }
+}
+
+function recordInvokerSource(node) {
+  if (node.localName !== "button" && node.localName !== "input") return false;
+
+  const commandFor = node.commandForElement;
+  const command = typeof node.command === "string" ? node.command : "";
+  if (commandFor && command) {
+    recordCommandSource(commandFor, command.toLowerCase(), node);
+    return true;
+  }
+
+  const popover = node.popoverTargetElement;
+  if (popover) {
+    const action = String(node.popoverTargetAction || "toggle").toLowerCase();
+    const open = isPopoverOpen(popover);
+    const possible = (action !== "show" || !open) && (action !== "hide" || open);
+    recordActivationSource(popover, node, open ? "closed" : "open", possible);
+    return true;
+  }
+
+  return false;
+}
+
+// Both `command`/`commandfor` and `popovertarget` buttons act on their target
+// after the click event has finished dispatching, so recording the source
+// during the capture phase is early enough.
+function handleClick(event) {
+  if (event.type !== "click" || event.defaultPrevented) return;
+  const path = typeof event.composedPath === "function" ? event.composedPath() : [event.target];
+  clickActivation = event;
+  let activated = false;
+  for (const node of path) {
+    // Only the innermost button/input can be the activation target.
+    if (isElement(node) && recordInvokerSource(node)) {
+      activated = true;
+      break;
+    }
+  }
+  if (!activated) {
+    clickActivation = null;
+    return;
+  }
+  // A polyfill driving this click acts on the target synchronously, so the
+  // activation only needs to outlive the current task.
+  setTimeout(() => {
+    if (clickActivation === event) clickActivation = null;
+  }, 0);
+}
+
+function observeShadowRoots(ElementClass, callback) {
+  const attachShadow = ElementClass.prototype.attachShadow;
+  ElementClass.prototype.attachShadow = function (init) {
+    const shadow = attachShadow.call(this, init);
+    callback(shadow);
+    return shadow;
+  };
+  const attachInternals = ElementClass.prototype.attachInternals;
+  if (typeof attachInternals !== "function") return;
+  ElementClass.prototype.attachInternals = function () {
+    const internals = attachInternals.call(this);
+    if (internals.shadowRoot) callback(internals.shadowRoot);
+    return internals;
+  };
+}
+
+export function isSupported() {
+  return (
+    typeof globalThis.ToggleEvent !== "undefined" && "source" in globalThis.ToggleEvent.prototype
+  );
+}
+
+export function isPolyfilled() {
+  return Boolean(globalThis.ToggleEvent) && !/native code/i.test(String(globalThis.ToggleEvent));
+}
+
+export function apply() {
+  if (applied) return;
+  applied = true;
+
+  Object.defineProperty((NativeToggleEvent || ToggleEvent).prototype, "source", {
+    enumerable: true,
+    configurable: true,
+    get() {
+      return retarget(eventSources.get(this) || null, this);
+    },
+  });
+
+  patchPopoverMethods();
+  patchDialogMethods();
+
+  document.addEventListener("click", handleClick, true);
+  observeRootOf(document);
+
+  observeShadowRoots(HTMLElement, (shadow) => {
+    shadow.addEventListener("click", handleClick, true);
+    observeRootOf(shadow);
+  });
+
+  Object.assign(globalThis, { ToggleEvent });
+}

package/toggle-event-source.min.js

@@ -0,0 +1 @@
+(()=>{var f=globalThis.ToggleEvent,h=new WeakMap,i=new WeakMap,w=new WeakSet,m=!1,u=null;function l(e){return!!e&&e.nodeType===1}function g(e){return e&&typeof e.getRootNode=="function"?e.getRootNode():e&&e.parentNode?g(e.parentNode):e}function E(e,t){if(!l(e))return null;let o=g(e);return o!==g(t.target||document)?o.host||null:e}function a(e){try{return e.matches(":popover-open")}catch{return!1}}function S(e){return e.localName==="dialog"&&e.hasAttribute("open")}var p=class extends(f||Event){constructor(t,o={}){super(t,o);let{source:n}=o;if(n!=null&&!l(n))throw new TypeError("source must be an element");if(h.set(this,n||null),!f){let{oldState:r="",newState:c=""}=o;Object.defineProperties(this,{oldState:{value:String(r),enumerable:!0},newState:{value:String(c),enumerable:!0}})}}get[Symbol.toStringTag](){return"ToggleEvent"}};f&&Object.defineProperty(p,Symbol.hasInstance,{configurable:!0,value:e=>e instanceof f});function O(e,t){h.set(e,t),"source"in e||Object.defineProperty(e,"source",{enumerable:!0,configurable:!0,get(){return E(h.get(e)||null,e)}})}function v(e){let t=i.get(e.target);t&&e.newState===t.newState&&(e.type==="toggle"&&i.delete(e.target),t.source&&O(e,t.source))}function b(e){let t=g(e);!t||w.has(t)||typeof t.addEventListener=="function"&&(w.add(t),t.addEventListener("beforetoggle",v,!0),t.addEventListener("toggle",v,!0))}function P(e,t,o){if(!l(e))return()=>{};let n=i.get(e);if(!l(t)&&n&&n.source&&n.newState===o&&u!==null&&n.activation===u)return()=>{};let r={source:l(t)?t:null,newState:o,activation:u};return i.set(e,r),b(e),()=>{i.get(e)===r&&i.delete(e)}}function d(e,t,o){let n=e&&e[t];typeof n=="function"&&Object.defineProperty(e,t,{...Object.getOwnPropertyDescriptor(e,t),value:function(...r){let{source:c,newState:y}=o.call(this,r),L=P(this,c,y);try{return n.apply(this,r)}catch(M){throw L(),M}}})}function R(){let e=globalThis.HTMLElement&&HTMLElement.prototype;!e||typeof e.showPopover!="function"||(d(e,"showPopover",function([t]){return{source:t&&t.source,newState:"open"}}),d(e,"hidePopover",function(){return{source:null,newState:"closed"}}),d(e,"togglePopover",function([t]){let o=typeof t=="object"&&t?t:null,n=typeof t=="boolean"?t:o?.force,r=n==null?!a(this):!!n;return{source:r&&o?o.source:null,newState:r?"open":"closed"}}))}function j(){let e=globalThis.HTMLDialogElement&&HTMLDialogElement.prototype;if(e)for(let[t,o]of[["show","open"],["showModal","open"],["close","closed"],["requestClose","closed"]])d(e,t,()=>({source:null,newState:o}))}function s(e,t,o,n){let r=i.get(e);if(r){if(!r.source){r.source=t;return}if(r.source===t)return}n&&P(e,t,o)}function D(e,t,o){switch(t){case"show-popover":e.popover&&s(e,o,"open",!a(e));break;case"hide-popover":e.popover&&s(e,o,"closed",a(e));break;case"toggle-popover":if(e.popover){let n=a(e);s(e,o,n?"closed":"open",!0)}break;case"show-modal":e.localName==="dialog"&&s(e,o,"open",!S(e));break;case"close":case"request-close":e.localName==="dialog"&&s(e,o,"closed",S(e));break}}function x(e){if(e.localName!=="button"&&e.localName!=="input")return!1;let t=e.commandForElement,o=typeof e.command=="string"?e.command:"";if(t&&o)return D(t,o.toLowerCase(),e),!0;let n=e.popoverTargetElement;if(n){let r=String(e.popoverTargetAction||"toggle").toLowerCase(),c=a(n);return s(n,e,c?"closed":"open",(r!=="show"||!c)&&(r!=="hide"||c)),!0}return!1}function T(e){if(e.type!=="click"||e.defaultPrevented)return;let t=typeof e.composedPath=="function"?e.composedPath():[e.target];u=e;let o=!1;for(let n of t)if(l(n)&&x(n)){o=!0;break}if(!o){u=null;return}setTimeout(()=>{u===e&&(u=null)},0)}function H(e,t){let o=e.prototype.attachShadow;e.prototype.attachShadow=function(r){let c=o.call(this,r);return t(c),c};let n=e.prototype.attachInternals;typeof n=="function"&&(e.prototype.attachInternals=function(){let r=n.call(this);return r.shadowRoot&&t(r.shadowRoot),r})}function N(){return typeof globalThis.ToggleEvent<"u"&&"source"in globalThis.ToggleEvent.prototype}function k(){m||(m=!0,Object.defineProperty((f||p).prototype,"source",{enumerable:!0,configurable:!0,get(){return E(h.get(this)||null,this)}}),R(),j(),document.addEventListener("click",T,!0),b(document),H(HTMLElement,e=>{e.addEventListener("click",T,!0),b(e)}),Object.assign(globalThis,{ToggleEvent:p}))}N()||k();})();