placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/dist/internal/placer-form-control.d.ts

@@ -0,0 +1,23 @@
+import { PlacerElement } from "./placer-element.js";
+/** An interface designed for Placer form controls. */
+export interface PlacerFormControl extends PlacerElement {
+    name: string;
+    value: unknown;
+    disabled?: boolean;
+    defaultValue?: unknown;
+    defaultChecked?: boolean;
+    form?: string;
+    pattern?: string;
+    min?: number | string | Date;
+    max?: number | string | Date;
+    step?: number | "any";
+    required?: boolean;
+    minlength?: number;
+    maxlength?: number;
+    readonly validity: ValidityState;
+    readonly validationMessage: string;
+    checkValidity: () => boolean;
+    getForm: () => HTMLFormElement | null;
+    reportValidity: () => boolean;
+    setCustomValidity: (message: string) => void;
+}

package/dist/internal/scroll.d.ts

@@ -1,3 +1,6 @@
+/** Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible without premature unlocking. */
 export declare function lockBodyScrolling(lockingElement: HTMLElement): void;
+/** Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method. */
 export declare function unlockBodyScrolling(lockingElement: HTMLElement): void;
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
 export declare function scrollIntoView(element: HTMLElement, container: HTMLElement, direction?: "horizontal" | "vertical" | "both", behavior?: "smooth" | "auto"): void;

package/dist/internal/scroll.js

@@ -1,70 +1,92 @@
-import { getOffset } from './offset.js';
+// src/internal/offset.ts
+function getOffset(element, parent) {
+  return {
+    top: Math.round(
+      element.getBoundingClientRect().top - parent.getBoundingClientRect().top
+    ),
+    left: Math.round(
+      element.getBoundingClientRect().left - parent.getBoundingClientRect().left
+    )
+  };
+}
 
-const locks = new Set();
+// src/internal/scroll.ts
+var locks = /* @__PURE__ */ new Set();
 function getScrollbarWidth() {
-    const documentWidth = document.documentElement.clientWidth;
-    return Math.abs(window.innerWidth - documentWidth);
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
 }
 function getExistingBodyPadding() {
-    const padding = Number(getComputedStyle(document.body).paddingRight.replace(/px/, ""));
-    if (isNaN(padding) || !padding) {
-        return 0;
-    }
-    return padding;
+  const padding = Number(
+    getComputedStyle(document.body).paddingRight.replace(/px/, "")
+  );
+  if (isNaN(padding) || !padding) {
+    return 0;
+  }
+  return padding;
 }
 function lockBodyScrolling(lockingElement) {
-    locks.add(lockingElement);
-    if (!document.documentElement.classList.contains("pc-scroll-lock")) {
-        const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
-        let scrollbarGutterProperty = getComputedStyle(document.documentElement).scrollbarGutter;
-        if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
-            scrollbarGutterProperty = "stable";
-        }
-        if (scrollbarWidth < 2) {
-            scrollbarGutterProperty = "";
-        }
-        document.documentElement.style.setProperty("--pc-scroll-lock-gutter", scrollbarGutterProperty);
-        document.documentElement.classList.add("pc-scroll-lock");
-        document.documentElement.style.setProperty("--pc-scroll-lock-size", `${scrollbarWidth}px`);
+  locks.add(lockingElement);
+  if (!document.documentElement.classList.contains("pc-scroll-lock")) {
+    const scrollbarWidth = getScrollbarWidth() + getExistingBodyPadding();
+    let scrollbarGutterProperty = getComputedStyle(
+      document.documentElement
+    ).scrollbarGutter;
+    if (!scrollbarGutterProperty || scrollbarGutterProperty === "auto") {
+      scrollbarGutterProperty = "stable";
+    }
+    if (scrollbarWidth < 2) {
+      scrollbarGutterProperty = "";
     }
+    document.documentElement.style.setProperty(
+      "--pc-scroll-lock-gutter",
+      scrollbarGutterProperty
+    );
+    document.documentElement.classList.add("pc-scroll-lock");
+    document.documentElement.style.setProperty(
+      "--pc-scroll-lock-size",
+      `${scrollbarWidth}px`
+    );
+  }
 }
 function unlockBodyScrolling(lockingElement) {
-    locks.delete(lockingElement);
-    if (locks.size === 0) {
-        document.documentElement.classList.remove("pc-scroll-lock");
-        document.documentElement.style.removeProperty("--pc-scroll-lock-size");
-    }
+  locks.delete(lockingElement);
+  if (locks.size === 0) {
+    document.documentElement.classList.remove("pc-scroll-lock");
+    document.documentElement.style.removeProperty("--pc-scroll-lock-size");
+  }
 }
 function scrollIntoView(element, container, direction = "vertical", behavior = "smooth") {
-    const offset = getOffset(element, container);
-    const offsetTop = offset.top + container.scrollTop;
-    const offsetLeft = offset.left + container.scrollLeft;
-    const minX = container.scrollLeft;
-    const maxX = container.scrollLeft + container.offsetWidth;
-    const minY = container.scrollTop;
-    const maxY = container.scrollTop + container.offsetHeight;
-    if (direction === "horizontal" || direction === "both") {
-        if (offsetLeft < minX) {
-            container.scrollTo({ left: offsetLeft, behavior });
-        }
-        else if (offsetLeft + element.clientWidth > maxX) {
-            container.scrollTo({
-                left: offsetLeft - container.offsetWidth + element.clientWidth,
-                behavior,
-            });
-        }
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+  if (direction === "horizontal" || direction === "both") {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({
+        left: offsetLeft - container.offsetWidth + element.clientWidth,
+        behavior
+      });
     }
-    if (direction === "vertical" || direction === "both") {
-        if (offsetTop < minY) {
-            container.scrollTo({ top: offsetTop, behavior });
-        }
-        else if (offsetTop + element.clientHeight > maxY) {
-            container.scrollTo({
-                top: offsetTop - container.offsetHeight + element.clientHeight,
-                behavior,
-            });
-        }
+  }
+  if (direction === "vertical" || direction === "both") {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({
+        top: offsetTop - container.offsetHeight + element.clientHeight,
+        behavior
+      });
     }
+  }
 }
-
-export { lockBodyScrolling, scrollIntoView, unlockBodyScrolling };
+export {
+  lockBodyScrolling,
+  scrollIntoView,
+  unlockBodyScrolling
+};

package/dist/internal/scrollend-polyfill.js

@@ -1,65 +1,73 @@
-const debounce = (fn, delay) => {
-    let timerId = 0;
-    return function (...args) {
-        window.clearTimeout(timerId);
-        timerId = window.setTimeout(() => {
-            fn.call(this, ...args);
-        }, delay);
-    };
+// src/internal/scrollend-polyfill.ts
+var debounce = (fn, delay) => {
+  let timerId = 0;
+  return function(...args) {
+    window.clearTimeout(timerId);
+    timerId = window.setTimeout(() => {
+      fn.call(this, ...args);
+    }, delay);
+  };
 };
-const decorate = (proto, method, decorateFn) => {
-    const superFn = proto[method];
-    proto[method] = function (...args) {
-        superFn.call(this, ...args);
-        decorateFn.call(this, superFn, ...args);
-    };
+var decorate = (proto, method, decorateFn) => {
+  const superFn = proto[method];
+  proto[method] = function(...args) {
+    superFn.call(this, ...args);
+    decorateFn.call(this, superFn, ...args);
+  };
 };
 (() => {
-    if (typeof window === "undefined") {
-        return;
-    }
-    const isSupported = "onscrollend" in window;
-    if (!isSupported) {
-        const pointers = new Set();
-        const scrollHandlers = new WeakMap();
-        const handlePointerDown = (event) => {
-            for (const touch of Array.from(event.changedTouches)) {
-                pointers.add(touch.identifier);
-            }
-        };
-        const handlePointerUp = (event) => {
-            for (const touch of Array.from(event.changedTouches)) {
-                pointers.delete(touch.identifier);
-            }
-        };
-        document.addEventListener("touchstart", handlePointerDown, true);
-        document.addEventListener("touchend", handlePointerUp, true);
-        document.addEventListener("touchcancel", handlePointerUp, true);
-        decorate(EventTarget.prototype, "addEventListener", function (addEventListener, type) {
-            if (type !== "scrollend")
-                return;
-            const handleScrollEnd = debounce(() => {
-                if (!pointers.size) {
-                    this.dispatchEvent(new Event("scrollend"));
-                }
-                else {
-                    handleScrollEnd();
-                }
-            }, 100);
-            addEventListener.call(this, "scroll", handleScrollEnd, {
-                passive: true,
-            });
-            scrollHandlers.set(this, handleScrollEnd);
-        });
-        decorate(EventTarget.prototype, "removeEventListener", function (removeEventListener, type) {
-            if (type !== "scrollend")
-                return;
-            const scrollHandler = scrollHandlers.get(this);
-            if (scrollHandler) {
-                removeEventListener.call(this, "scroll", scrollHandler, {
-                    passive: true,
-                });
-            }
+  if (typeof window === "undefined") {
+    return;
+  }
+  const isSupported = "onscrollend" in window;
+  if (!isSupported) {
+    const pointers = /* @__PURE__ */ new Set();
+    const scrollHandlers = /* @__PURE__ */ new WeakMap();
+    const handlePointerDown = (event) => {
+      for (const touch of Array.from(event.changedTouches)) {
+        pointers.add(touch.identifier);
+      }
+    };
+    const handlePointerUp = (event) => {
+      for (const touch of Array.from(event.changedTouches)) {
+        pointers.delete(touch.identifier);
+      }
+    };
+    document.addEventListener("touchstart", handlePointerDown, true);
+    document.addEventListener("touchend", handlePointerUp, true);
+    document.addEventListener("touchcancel", handlePointerUp, true);
+    decorate(
+      EventTarget.prototype,
+      "addEventListener",
+      function(addEventListener, type) {
+        if (type !== "scrollend") return;
+        const handleScrollEnd = debounce(() => {
+          if (!pointers.size) {
+            this.dispatchEvent(new Event("scrollend"));
+          } else {
+            handleScrollEnd();
+          }
+        }, 100);
+        addEventListener.call(this, "scroll", handleScrollEnd, {
+          passive: true
         });
-    }
+        scrollHandlers.set(this, handleScrollEnd);
+      }
+    );
+    decorate(
+      EventTarget.prototype,
+      "removeEventListener",
+      function(removeEventListener, type) {
+        if (type !== "scrollend") {
+          return;
+        }
+        const scrollHandler = scrollHandlers.get(this);
+        if (scrollHandler) {
+          removeEventListener.call(this, "scroll", scrollHandler, {
+            passive: true
+          });
+        }
+      }
+    );
+  }
 })();

package/dist/internal/slot.d.ts

@@ -1,4 +1,5 @@
 import type { ReactiveController, ReactiveControllerHost } from "lit";
+/** A reactive controller that determines when slots exist. */
 export declare class HasSlotController implements ReactiveController {
     host: ReactiveControllerHost & Element;
     slotNames: string[];
@@ -10,5 +11,7 @@ export declare class HasSlotController implements ReactiveController {
     hostDisconnected(): void;
     private handleSlotChange;
 }
+/** Given a slot, this function iterates over all of its assigned element and text nodes and returns the concatenated HTML as a string. This is useful because `slot.innerHTML` does not work. */
 export declare function getInnerHTML(slot: HTMLSlotElement): string;
+/** Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated string. This is useful because `slot.textContent` does not work. */
 export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/internal/slot.js

@@ -1,75 +1,81 @@
-class HasSlotController {
-    constructor(host, ...slotNames) {
-        this.slotNames = [];
-        this.handleSlotChange = (event) => {
-            const slot = event.target;
-            if ((this.slotNames.includes("[default]") && !slot.name) ||
-                (slot.name && this.slotNames.includes(slot.name))) {
-                this.host.requestUpdate();
-            }
-        };
-        (this.host = host).addController(this);
-        this.slotNames = slotNames;
-    }
-    hasDefaultSlot() {
-        return Array.from(this.host.childNodes).some((node) => {
-            if (node.nodeType === node.TEXT_NODE &&
-                node.textContent.trim() !== "") {
-                return true;
-            }
-            if (node.nodeType === node.ELEMENT_NODE) {
-                const element = node;
-                const tagName = element.tagName.toLowerCase();
-                if (tagName === "sl-visually-hidden") {
-                    return false;
-                }
-                if (!element.hasAttribute("slot")) {
-                    return true;
-                }
-            }
-            return false;
-        });
-    }
-    hasNamedSlot(name) {
-        return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
-    }
-    test(slotName) {
-        return slotName === "[default]"
-            ? this.hasDefaultSlot()
-            : this.hasNamedSlot(slotName);
-    }
-    hostConnected() {
-        this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
-    }
-    hostDisconnected() {
-        this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
-    }
-}
-function getInnerHTML(slot) {
-    const nodes = slot.assignedNodes({ flatten: true });
-    let html = "";
-    [...nodes].forEach((node) => {
-        if (node.nodeType === Node.ELEMENT_NODE) {
-            html += node.outerHTML;
+// src/internal/slot.ts
+var HasSlotController = class {
+  constructor(host, ...slotNames) {
+    this.slotNames = [];
+    this.handleSlotChange = (event) => {
+      const slot = event.target;
+      if (this.slotNames.includes("[default]") && !slot.name || slot.name && this.slotNames.includes(slot.name)) {
+        this.host.requestUpdate();
+      }
+    };
+    (this.host = host).addController(this);
+    this.slotNames = slotNames;
+  }
+  hasDefaultSlot() {
+    return Array.from(this.host.childNodes).some((node) => {
+      if (node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "") {
+        return true;
+      }
+      if (node.nodeType === node.ELEMENT_NODE) {
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === "sl-visually-hidden") {
+          return false;
         }
-        if (node.nodeType === Node.TEXT_NODE) {
-            html += node.textContent;
+        if (!element.hasAttribute("slot")) {
+          return true;
         }
+      }
+      return false;
     });
-    return html;
+  }
+  hasNamedSlot(name) {
+    return this.host.querySelector(`:scope > [slot="${name}"]`) !== null;
+  }
+  test(slotName) {
+    return slotName === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(slotName);
+  }
+  hostConnected() {
+    this.host.shadowRoot.addEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+  hostDisconnected() {
+    this.host.shadowRoot.removeEventListener(
+      "slotchange",
+      this.handleSlotChange
+    );
+  }
+};
+function getInnerHTML(slot) {
+  const nodes = slot.assignedNodes({ flatten: true });
+  let html = "";
+  [...nodes].forEach((node) => {
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      html += node.outerHTML;
+    }
+    if (node.nodeType === Node.TEXT_NODE) {
+      html += node.textContent;
+    }
+  });
+  return html;
 }
 function getTextContent(slot) {
-    if (!slot) {
-        return "";
+  if (!slot) {
+    return "";
+  }
+  const nodes = slot.assignedNodes({ flatten: true });
+  let text = "";
+  [...nodes].forEach((node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      text += node.textContent;
     }
-    const nodes = slot.assignedNodes({ flatten: true });
-    let text = "";
-    [...nodes].forEach((node) => {
-        if (node.nodeType === Node.TEXT_NODE) {
-            text += node.textContent;
-        }
-    });
-    return text;
+  });
+  return text;
 }
-
-export { HasSlotController, getInnerHTML, getTextContent };
+export {
+  HasSlotController,
+  getInnerHTML,
+  getTextContent
+};

package/dist/internal/string.d.ts

@@ -1 +1,2 @@
+/** Converts the first letter of a string to uppercase. */
 export declare function uppercaseFirstLetter(string: string): string;

package/dist/internal/string.js

@@ -1,5 +1,7 @@
+// src/internal/string.ts
 function uppercaseFirstLetter(string) {
-    return string.charAt(0).toUpperCase() + string.slice(1);
+  return string.charAt(0).toUpperCase() + string.slice(1);
 }
-
-export { uppercaseFirstLetter };
+export {
+  uppercaseFirstLetter
+};

package/dist/internal/tabbable.d.ts

@@ -1,3 +1,4 @@
+/** Returns the first and last bounding elements that are tabbable. This is more performant than checking every single element because it short‐circuits after finding the first and last ones. */
 export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
     start: HTMLElement;
     end: HTMLElement;