@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/dist/build/chunks/disclosure-widget-CdjCdx7t.js

@@ -0,0 +1,129 @@
+import { m as makeAnchor } from "./utilities-Ci7wwNeg.js";
+class DisclosureWidget {
+  options;
+  context;
+  trigger;
+  element;
+  id;
+  isOpen;
+  attached;
+  constructor(trigger, element, overrides, context = document) {
+    if (!trigger) {
+      throw new Error("toggle is required.");
+    }
+    if (!element) {
+      throw new Error("element is required.");
+    }
+    const options = {
+      attribute: "inert",
+      shouldPreventDefault: true,
+      setInitialAttribute: true,
+      clickEvent: "click"
+    };
+    this.options = { ...options, ...overrides };
+    this.context = context || document;
+    this.trigger = trigger;
+    this.element = element;
+    this.id = this.element.id || this.generatedId();
+  }
+  init = () => {
+    if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget")) return;
+    const { attribute, setInitialAttribute } = this.options;
+    this.trigger.disclosureWidget = this;
+    if (setInitialAttribute) this.element.setAttribute(attribute, "");
+    this.attach();
+  };
+  handleToggle = () => {
+    const { attribute, setInitialAttribute } = this.options;
+    this.element.toggleAttribute(attribute);
+    const hasAttribute = this.element.hasAttribute(attribute);
+    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute;
+    this.trigger.setAttribute("aria-expanded", String(this.isOpen));
+    const newEvent = new CustomEvent("disclosure-toggle", {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        isOpen: this.isOpen,
+        id: this.id,
+        options: this.options,
+        target: this.element
+      }
+    });
+    this.trigger.dispatchEvent(newEvent);
+  };
+  handleMouse = (event) => {
+    const { currentTarget, type, relatedTarget } = event;
+    if (type === "mouseover" || type === "mouseout") {
+      const triggerParent = this.trigger.parentNode;
+      if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget))
+        return;
+    } else if (this.trigger !== currentTarget) return;
+    const { shouldPreventDefault } = this.options;
+    this.handleToggle();
+    if (shouldPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+  handleKeyboard = (event) => {
+    const { key, target } = event;
+    if (this.trigger !== target) return;
+    const { isOpen } = this;
+    const { shouldPreventDefault } = this.options;
+    switch (key) {
+      // Down/Enter should open it.
+      case "ArrowDown":
+      case "Enter":
+        if (!isOpen) this.handleToggle();
+        if (shouldPreventDefault) event.preventDefault();
+        break;
+      // Up/Esc should close it.
+      case "ArrowUp":
+      case "Escape":
+        if (isOpen) this.handleToggle();
+        if (shouldPreventDefault) event.preventDefault();
+        break;
+    }
+  };
+  attach = () => {
+    if (this.attached) return;
+    const { clickEvent } = this.options;
+    if (clickEvent === "mouseover") {
+      const parent = this.trigger.parentNode;
+      parent.addEventListener("mouseover", this.handleMouse);
+      parent.addEventListener("mouseout", this.handleMouse);
+    } else {
+      this.trigger.addEventListener("click", this.handleMouse);
+    }
+    this.trigger.addEventListener("keydown", this.handleKeyboard);
+    this.trigger.setAttribute("aria-expanded", "false");
+    if (!this.trigger.hasAttribute("aria-controls"))
+      this.trigger.setAttribute("aria-controls", this.id);
+    this.attached = true;
+  };
+  detach = () => {
+    if (!this.attached) return;
+    if (this.isOpen) {
+      this.handleToggle();
+    }
+    const { clickEvent } = this.options;
+    if (clickEvent === "mouseover") {
+      const parent = this.trigger.parentNode;
+      parent.removeEventListener("mouseover", this.handleMouse);
+      parent.removeEventListener("mouseout", this.handleMouse);
+    } else {
+      this.trigger.removeEventListener("click", this.handleMouse);
+    }
+    this.trigger.removeEventListener("keydown", this.handleKeyboard);
+    this.trigger.removeAttribute("aria-expanded");
+    this.attached = false;
+  };
+  generatedId = () => {
+    const string = this.trigger?.textContent?.trim();
+    return !string ? "" : makeAnchor(string);
+  };
+}
+export {
+  DisclosureWidget as D
+};
+//# sourceMappingURL=disclosure-widget-CdjCdx7t.js.map

package/dist/build/chunks/disclosure-widget-CdjCdx7t.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"disclosure-widget-CdjCdx7t.js","sources":["../../../src/Utility/Elements/disclosure-widget.ts"],"sourcesContent":["/**\n * Class for a generic Disclosure Widget.\n */\nimport { makeAnchor } from \"../utilities\"\n\ntype DisclosureWidgetOptions = {\n  attribute?: string\n  shouldPreventDefault?: boolean\n  setInitialAttribute?: boolean\n  clickEvent?: \"click\" | \"mouseover\"\n}\n\nexport type DisclosureWidgetEvent = {\n  isOpen: boolean\n  id: string\n  options: DisclosureWidgetOptions\n  target: Element\n}\n\nexport default class DisclosureWidget {\n  options: DisclosureWidgetOptions\n  context: Document | Element\n  trigger: Element & { disclosureWidget?: DisclosureWidget }\n  element: Element\n  id: string\n  isOpen?: boolean\n  attached?: boolean\n\n  constructor(\n    trigger: Element,\n    element: Element,\n    overrides?: DisclosureWidgetOptions,\n    context: Element | Document = document,\n  ) {\n    if (!trigger) {\n      throw new Error(\"toggle is required.\")\n    }\n    if (!element) {\n      throw new Error(\"element is required.\")\n    }\n    const options: DisclosureWidgetOptions = {\n      attribute: \"inert\",\n      shouldPreventDefault: true,\n      setInitialAttribute: true,\n      clickEvent: \"click\",\n    }\n\n    this.options = { ...options, ...overrides }\n    this.context = context || document\n    this.trigger = trigger\n    this.element = element\n    this.id = this.element.id || this.generatedId()\n  }\n\n  init = (): void => {\n    if (Object.prototype.hasOwnProperty.call(this.trigger, \"disclosureWidget\")) return\n    const { attribute, setInitialAttribute } = this.options\n    this.trigger.disclosureWidget = this\n    if (setInitialAttribute) this.element.setAttribute(attribute, \"\")\n    this.attach()\n  }\n\n  handleToggle = (): void => {\n    const { attribute, setInitialAttribute } = this.options\n    this.element.toggleAttribute(attribute)\n    const hasAttribute: boolean = this.element.hasAttribute(attribute)\n    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute\n    this.trigger.setAttribute(\"aria-expanded\", String(this.isOpen))\n    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(\"disclosure-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        isOpen: this.isOpen,\n        id: this.id,\n        options: this.options,\n        target: this.element,\n      },\n    })\n    this.trigger.dispatchEvent(newEvent)\n  }\n\n  handleMouse = (event: MouseEvent): void => {\n    const { currentTarget, type, relatedTarget } = event\n\n    if (type === \"mouseover\" || type === \"mouseout\") {\n      const triggerParent = this.trigger.parentNode\n      if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget as HTMLElement))\n        return\n    } else if (this.trigger !== currentTarget) return\n\n    const { shouldPreventDefault } = this.options\n    this.handleToggle()\n    if (shouldPreventDefault) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  handleKeyboard = (event: KeyboardEvent): void => {\n    const { key, target } = event\n    if (this.trigger !== target) return\n    const { isOpen } = this\n    const { shouldPreventDefault } = this.options\n\n    switch (key) {\n      // Down/Enter should open it.\n      case \"ArrowDown\":\n      case \"Enter\":\n        if (!isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      // Up/Esc should close it.\n      case \"ArrowUp\":\n      case \"Escape\":\n        if (isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      default:\n        break\n    }\n  }\n\n  attach = (): void => {\n    if (this.attached) return\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.addEventListener(\"mouseover\", this.handleMouse)\n      parent.addEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.addEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.addEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.setAttribute(\"aria-expanded\", \"false\")\n    if (!this.trigger.hasAttribute(\"aria-controls\"))\n      this.trigger.setAttribute(\"aria-controls\", this.id)\n    this.attached = true\n  }\n\n  detach = (): void => {\n    if (!this.attached) return\n    if (this.isOpen) {\n      this.handleToggle()\n    }\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.removeEventListener(\"mouseover\", this.handleMouse)\n      parent.removeEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.removeEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.removeEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.removeAttribute(\"aria-expanded\")\n    this.attached = false\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n"],"names":[],"mappings":";AAmBA,MAAqB,iBAAiB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA,YACE,SACA,SACA,WACA,UAA8B,UAC9B;AACA,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AACA,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,sBAAsB;AAAA,IACxC;AACA,UAAM,UAAmC;AAAA,MACvC,WAAW;AAAA,MACX,sBAAsB;AAAA,MACtB,qBAAqB;AAAA,MACrB,YAAY;AAAA,IAAA;AAGd,SAAK,UAAU,EAAE,GAAG,SAAS,GAAG,UAAA;AAChC,SAAK,UAAU,WAAW;AAC1B,SAAK,UAAU;AACf,SAAK,UAAU;AACf,SAAK,KAAK,KAAK,QAAQ,MAAM,KAAK,YAAA;AAAA,EACpC;AAAA,EAEA,OAAO,MAAY;AACjB,QAAI,OAAO,UAAU,eAAe,KAAK,KAAK,SAAS,kBAAkB,EAAG;AAC5E,UAAM,EAAE,WAAW,oBAAA,IAAwB,KAAK;AAChD,SAAK,QAAQ,mBAAmB;AAChC,QAAI,oBAAqB,MAAK,QAAQ,aAAa,WAAW,EAAE;AAChE,SAAK,OAAA;AAAA,EACP;AAAA,EAEA,eAAe,MAAY;AACzB,UAAM,EAAE,WAAW,oBAAA,IAAwB,KAAK;AAChD,SAAK,QAAQ,gBAAgB,SAAS;AACtC,UAAM,eAAwB,KAAK,QAAQ,aAAa,SAAS;AACjE,SAAK,SAAS,sBAAsB,CAAC,eAAe;AACpD,SAAK,QAAQ,aAAa,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAC9D,UAAM,WAA+C,IAAI,YAAY,qBAAqB;AAAA,MACxF,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,QACN,QAAQ,KAAK;AAAA,QACb,IAAI,KAAK;AAAA,QACT,SAAS,KAAK;AAAA,QACd,QAAQ,KAAK;AAAA,MAAA;AAAA,IACf,CACD;AACD,SAAK,QAAQ,cAAc,QAAQ;AAAA,EACrC;AAAA,EAEA,cAAc,CAAC,UAA4B;AACzC,UAAM,EAAE,eAAe,MAAM,cAAA,IAAkB;AAE/C,QAAI,SAAS,eAAe,SAAS,YAAY;AAC/C,YAAM,gBAAgB,KAAK,QAAQ;AACnC,UAAI,kBAAkB,iBAAiB,cAAc,SAAS,aAA4B;AACxF;AAAA,IACJ,WAAW,KAAK,YAAY,cAAe;AAE3C,UAAM,EAAE,yBAAyB,KAAK;AACtC,SAAK,aAAA;AACL,QAAI,sBAAsB;AACxB,YAAM,eAAA;AACN,YAAM,gBAAA;AAAA,IACR;AAAA,EACF;AAAA,EAEA,iBAAiB,CAAC,UAA+B;AAC/C,UAAM,EAAE,KAAK,OAAA,IAAW;AACxB,QAAI,KAAK,YAAY,OAAQ;AAC7B,UAAM,EAAE,WAAW;AACnB,UAAM,EAAE,yBAAyB,KAAK;AAEtC,YAAQ,KAAA;AAAA;AAAA,MAEN,KAAK;AAAA,MACL,KAAK;AACH,YAAI,CAAC,OAAQ,MAAK,aAAA;AAClB,YAAI,4BAA4B,eAAA;AAChC;AAAA;AAAA,MAGF,KAAK;AAAA,MACL,KAAK;AACH,YAAI,aAAa,aAAA;AACjB,YAAI,4BAA4B,eAAA;AAChC;AAAA,IAGA;AAAA,EAEN;AAAA,EAEA,SAAS,MAAY;AACnB,QAAI,KAAK,SAAU;AACnB,UAAM,EAAE,eAAe,KAAK;AAC5B,QAAI,eAAe,aAAa;AAC9B,YAAM,SAAS,KAAK,QAAQ;AAC5B,aAAO,iBAAiB,aAAa,KAAK,WAAW;AACrD,aAAO,iBAAiB,YAAY,KAAK,WAAW;AAAA,IACtD,OAAO;AACL,WAAK,QAAQ,iBAAiB,SAAS,KAAK,WAAW;AAAA,IACzD;AACA,SAAK,QAAQ,iBAAiB,WAAW,KAAK,cAAc;AAE5D,SAAK,QAAQ,aAAa,iBAAiB,OAAO;AAClD,QAAI,CAAC,KAAK,QAAQ,aAAa,eAAe;AAC5C,WAAK,QAAQ,aAAa,iBAAiB,KAAK,EAAE;AACpD,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,SAAS,MAAY;AACnB,QAAI,CAAC,KAAK,SAAU;AACpB,QAAI,KAAK,QAAQ;AACf,WAAK,aAAA;AAAA,IACP;AACA,UAAM,EAAE,eAAe,KAAK;AAC5B,QAAI,eAAe,aAAa;AAC9B,YAAM,SAAS,KAAK,QAAQ;AAC5B,aAAO,oBAAoB,aAAa,KAAK,WAAW;AACxD,aAAO,oBAAoB,YAAY,KAAK,WAAW;AAAA,IACzD,OAAO;AACL,WAAK,QAAQ,oBAAoB,SAAS,KAAK,WAAW;AAAA,IAC5D;AACA,SAAK,QAAQ,oBAAoB,WAAW,KAAK,cAAc;AAE/D,SAAK,QAAQ,gBAAgB,eAAe;AAC5C,SAAK,WAAW;AAAA,EAClB;AAAA,EAEA,cAAc,MAAc;AAC1B,UAAM,SAA6B,KAAK,SAAS,aAAa,KAAA;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AACF;"}

package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js

@@ -0,0 +1,70 @@
+import { P as Popover } from "./popover.entry-BQvyR0d5.js";
+class DropMenu extends Popover {
+  controller;
+  closeOnClick;
+  constructor() {
+    super();
+    this.controller = new AbortController();
+  }
+  async connectedCallback() {
+    await super.connectedCallback();
+    if (!this.container || !this.trigger) return;
+    this.closeOnClick = this.hasAttribute("closeonclick");
+    const { signal } = this.controller;
+    document.addEventListener(
+      "click",
+      (event) => {
+        const targetElement = event.target;
+        const selectable = targetElement.closest("a, button");
+        if (targetElement !== this.container && ![...this.items].includes(selectable))
+          return;
+        this.handleSelect(event);
+        event.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+    document.addEventListener(
+      "keydown",
+      (event) => {
+        const { target, key } = event;
+        if (target !== this.container && ![...this.items].includes(target))
+          return;
+        if (key === "Enter") this.handleSelect(event);
+        event.preventDefault();
+      },
+      {
+        signal
+      }
+    );
+  }
+  disconnectedCallback() {
+    this.controller.abort();
+  }
+  handleSelect = (event) => {
+    const target = event.target;
+    this.items?.forEach((item) => {
+      if (!(item instanceof HTMLButtonElement)) return;
+      item.setAttribute("aria-checked", String(item === target));
+    });
+    const newEvent = new CustomEvent("drop-menu-select", {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        event,
+        target
+      }
+    });
+    this.container.dispatchEvent(newEvent);
+    if (this.closeOnClick) this.container.togglePopover();
+  };
+  get items() {
+    return this.container.querySelectorAll("a, button");
+  }
+}
+if (!customElements.get("mx-dropmenu")) customElements.define("mx-dropmenu", DropMenu);
+export {
+  DropMenu as D
+};
+//# sourceMappingURL=drop-menu.entry-fzV-_VFl.js.map

package/dist/build/chunks/drop-menu.entry-fzV-_VFl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-menu.entry-fzV-_VFl.js","sources":["../../../src/Component/DropMenu/Elements/DropMenu.ts"],"sourcesContent":["/**\n * DropMenu\n * @file Create a DropMenu using the Popover and Anchor APIs.\n * Handle's menu item select.\n *\n * Once polyfills are no longer needed, this can just extent HTMLElement\n * instead of Popover.\n */\n\nimport Popover from \"../../Popover/Elements/Popover\"\n\nexport type DropMenuEvent = CustomEvent<{\n  event: MouseEvent | KeyboardEvent\n  target: HTMLButtonElement | HTMLAnchorElement\n}>\n\nexport default class DropMenu extends Popover {\n  controller: AbortController\n  closeOnClick: boolean\n\n  constructor() {\n    super()\n    this.controller = new AbortController()\n  }\n\n  async connectedCallback() {\n    await super.connectedCallback()\n    if (!this.container || !this.trigger) return\n\n    this.closeOnClick = this.hasAttribute(\"closeonclick\")\n\n    const { signal }: AbortController = this.controller\n    document.addEventListener(\n      \"click\",\n      (event: MouseEvent): void => {\n        const targetElement = event.target as HTMLElement\n        const selectable = targetElement.closest(\"a, button\")\n        if (\n          (targetElement as HTMLElement) !== this.container &&\n          ![...this.items].includes(selectable as HTMLButtonElement | HTMLAnchorElement)\n        )\n          return\n        this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n\n    document.addEventListener(\n      \"keydown\",\n      (event: KeyboardEvent): void => {\n        const { target, key } = event\n        if (\n          (target as HTMLElement) !== this.container &&\n          ![...this.items].includes(target as HTMLButtonElement | HTMLAnchorElement)\n        )\n          return\n        if (key === \"Enter\") this.handleSelect(event)\n        event.preventDefault()\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleSelect = (event: MouseEvent | KeyboardEvent): void => {\n    const target = event.target as HTMLButtonElement | HTMLAnchorElement\n    this.items?.forEach(item => {\n      if (!(item instanceof HTMLButtonElement)) return\n      item.setAttribute(\"aria-checked\", String(item === target))\n    })\n    const newEvent: DropMenuEvent = new CustomEvent(\"drop-menu-select\", {\n      bubbles: true,\n      cancelable: true,\n      detail: {\n        event,\n        target,\n      },\n    })\n    this.container.dispatchEvent(newEvent)\n    if (this.closeOnClick) this.container.togglePopover()\n  }\n\n  get items(): NodeListOf<HTMLButtonElement | HTMLAnchorElement> | null {\n    return this.container.querySelectorAll(\"a, button\")\n  }\n}\n\nif (!customElements.get(\"mx-dropmenu\")) customElements.define(\"mx-dropmenu\", DropMenu)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-dropmenu\": DropMenu\n  }\n}\n"],"names":[],"mappings":";AAgBA,MAAqB,iBAAiB,QAAQ;AAAA,EAC5C;AAAA,EACA;AAAA,EAEA,cAAc;AACZ,UAAA;AACA,SAAK,aAAa,IAAI,gBAAA;AAAA,EACxB;AAAA,EAEA,MAAM,oBAAoB;AACxB,UAAM,MAAM,kBAAA;AACZ,QAAI,CAAC,KAAK,aAAa,CAAC,KAAK,QAAS;AAEtC,SAAK,eAAe,KAAK,aAAa,cAAc;AAEpD,UAAM,EAAE,WAA4B,KAAK;AACzC,aAAS;AAAA,MACP;AAAA,MACA,CAAC,UAA4B;AAC3B,cAAM,gBAAgB,MAAM;AAC5B,cAAM,aAAa,cAAc,QAAQ,WAAW;AACpD,YACG,kBAAkC,KAAK,aACxC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,SAAS,UAAmD;AAE7E;AACF,aAAK,aAAa,KAAK;AACvB,cAAM,eAAA;AAAA,MACR;AAAA,MACA;AAAA,QACE;AAAA,MAAA;AAAA,IACF;AAGF,aAAS;AAAA,MACP;AAAA,MACA,CAAC,UAA+B;AAC9B,cAAM,EAAE,QAAQ,IAAA,IAAQ;AACxB,YACG,WAA2B,KAAK,aACjC,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,SAAS,MAA+C;AAEzE;AACF,YAAI,QAAQ,QAAS,MAAK,aAAa,KAAK;AAC5C,cAAM,eAAA;AAAA,MACR;AAAA,MACA;AAAA,QACE;AAAA,MAAA;AAAA,IACF;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEA,eAAe,CAAC,UAA4C;AAC1D,UAAM,SAAS,MAAM;AACrB,SAAK,OAAO,QAAQ,CAAA,SAAQ;AAC1B,UAAI,EAAE,gBAAgB,mBAAoB;AAC1C,WAAK,aAAa,gBAAgB,OAAO,SAAS,MAAM,CAAC;AAAA,IAC3D,CAAC;AACD,UAAM,WAA0B,IAAI,YAAY,oBAAoB;AAAA,MAClE,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,QACN;AAAA,QACA;AAAA,MAAA;AAAA,IACF,CACD;AACD,SAAK,UAAU,cAAc,QAAQ;AACrC,QAAI,KAAK,aAAc,MAAK,UAAU,cAAA;AAAA,EACxC;AAAA,EAEA,IAAI,QAAkE;AACpE,WAAO,KAAK,UAAU,iBAAiB,WAAW;AAAA,EACpD;AACF;AAEA,IAAI,CAAC,eAAe,IAAI,aAAa,EAAG,gBAAe,OAAO,eAAe,QAAQ;"}

package/dist/build/chunks/{polyfills-C-B7iqDG.js → polyfills-DnrsypYs.js}

@@ -228,7 +228,7 @@ function isOverflowElement(element) {
     overflowX,
     overflowY,
     display
-  } = getComputedStyle(element);
+  } = getComputedStyle$1(element);
   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
 }
 const tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
@@ -250,7 +250,7 @@ const willChangeValues = ["transform", "translate", "scale", "rotate", "perspect
 const containValues = ["paint", "layout", "strict", "content"];
 function isContainingBlock(elementOrCss) {
   const webkit = isWebKit();
-  const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
+  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
   return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
 }
 function getContainingBlock(element) {
@@ -273,7 +273,7 @@ const lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#docu
 function isLastTraversableNode(node) {
   return lastTraversableNodeNames.has(getNodeName(node));
 }
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 function getNodeScroll(element) {
@@ -329,7 +329,7 @@ function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
 }
 function getCssDimensions(element) {
-  const css = getComputedStyle(element);
+  const css = getComputedStyle$1(element);
   let width = parseFloat(css.width) || 0;
   let height = parseFloat(css.height) || 0;
   const hasOffset = isHTMLElement(element);
@@ -425,7 +425,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -452,15 +452,9 @@ function getWindowScrollBarX(element, rect) {
   }
   return rect.left + leftScroll;
 }
-function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
-  if (ignoreScrollbarX === void 0) {
-    ignoreScrollbarX = false;
-  }
+function getHTMLOffset(documentElement, scroll) {
   const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
-    // RTL <body> scrollbar.
-    getWindowScrollBarX(documentElement, htmlRect)
-  ));
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
   const y = htmlRect.top + scroll.scrollTop;
   return {
     x,
@@ -498,7 +492,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
       offsets.y = offsetRect.y + offsetParent.clientTop;
     }
   }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
   return {
     width: rect.width * scale.x,
     height: rect.height * scale.y,
@@ -517,7 +511,7 @@ function getDocumentRect(element) {
   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
-  if (getComputedStyle(body).direction === "rtl") {
+  if (getComputedStyle$1(body).direction === "rtl") {
     x += max(html.clientWidth, body.clientWidth) - width;
   }
   return {
@@ -527,6 +521,7 @@ function getDocumentRect(element) {
     y
   };
 }
+const SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -544,6 +539,19 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    width += windowScrollbarX;
+  }
   return {
     width,
     height,
@@ -592,7 +600,7 @@ function hasFixedPositionAncestor(element, stopNode) {
   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
     return false;
   }
-  return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  return getComputedStyle$1(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
 }
 function getClippingElementAncestors(element, cache) {
   const cachedResult = cache.get(element);
@@ -601,10 +609,10 @@ function getClippingElementAncestors(element, cache) {
   }
   let result = getOverflowAncestors(element, []).filter((el) => isElement(el) && getNodeName(el) !== "body");
   let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle(element).position === "fixed";
+  const elementIsFixed = getComputedStyle$1(element).position === "fixed";
   let currentNode = elementIsFixed ? getParentNode(element) : element;
   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle(currentNode);
+    const computedStyle = getComputedStyle$1(currentNode);
     const currentNodeIsContaining = isContainingBlock(currentNode);
     if (!currentNodeIsContaining && computedStyle.position === "fixed") {
       currentContainingBlockComputedStyle = null;
@@ -694,10 +702,10 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
   };
 }
 function isStaticPositioned(element) {
-  return getComputedStyle(element).position === "static";
+  return getComputedStyle$1(element).position === "static";
 }
 function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
     return null;
   }
   if (polyfill) {
@@ -748,7 +756,7 @@ const getElementRects = async function(data) {
   };
 };
 function isRTL(element) {
-  return getComputedStyle(element).direction === "rtl";
+  return getComputedStyle$1(element).direction === "rtl";
 }
 const platform = {
   convertOffsetParentRelativeRectToViewportRelativeRect,
@@ -780,24 +788,25 @@ const computePosition = (reference, floating, options) => {
 class Polyfills {
   constructor(popover) {
     this.popover = popover;
-    this.trigger = document.querySelector(
-      `[popovertarget="${popover.getAttribute("id")}"`
-    );
+    this.trigger = document.querySelector(`[popovertarget="${popover.getAttribute("id")}"`);
     this.positionPopover = this.positionPopover.bind(this);
     this.popover.addEventListener("toggle", this.positionPopover);
   }
   positionPopover = ({ newState }) => {
     if (newState === "open") {
       computePosition(this.trigger, this.popover, {
-        placement: "bottom-start"
+        placement: this.placement || "bottom-start"
       }).then(({ x, y }) => {
         this.popover.style.insetInlineStart = `${x}px`;
         this.popover.style.insetBlockStart = `${y}px`;
       });
     }
   };
+  get placement() {
+    return this.popover.getAttribute("data-placement");
+  }
 }
 export {
   Polyfills as default
 };
-//# sourceMappingURL=polyfills-C-B7iqDG.js.map
+//# sourceMappingURL=polyfills-DnrsypYs.js.map