placer-toolkit 0.5.1

package/dist/internal/scroll.js

@@ -0,0 +1,70 @@
+import { getOffset } from './offset.js';
+
+const locks = new Set();
+function getScrollbarWidth() {
+    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;
+}
+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`);
+    }
+}
+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");
+    }
+}
+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,
+            });
+        }
+    }
+    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 };

package/dist/internal/scrollend-polyfill.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/internal/scrollend-polyfill.js

@@ -0,0 +1,65 @@
+const 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);
+    };
+};
+(() => {
+    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,
+                });
+            }
+        });
+    }
+})();

package/dist/internal/slot.d.ts

@@ -0,0 +1,14 @@
+import type { ReactiveController, ReactiveControllerHost } from "lit";
+export declare class HasSlotController implements ReactiveController {
+    host: ReactiveControllerHost & Element;
+    slotNames: string[];
+    constructor(host: ReactiveControllerHost & Element, ...slotNames: string[]);
+    private hasDefaultSlot;
+    private hasNamedSlot;
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private handleSlotChange;
+}
+export declare function getInnerHTML(slot: HTMLSlotElement): string;
+export declare function getTextContent(slot: HTMLSlotElement | undefined | null): string;

package/dist/internal/slot.js

@@ -0,0 +1,75 @@
+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;
+        }
+        if (node.nodeType === Node.TEXT_NODE) {
+            html += node.textContent;
+        }
+    });
+    return html;
+}
+function getTextContent(slot) {
+    if (!slot) {
+        return "";
+    }
+    const nodes = slot.assignedNodes({ flatten: true });
+    let text = "";
+    [...nodes].forEach((node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            text += node.textContent;
+        }
+    });
+    return text;
+}
+
+export { HasSlotController, getInnerHTML, getTextContent };

package/dist/internal/string.d.ts

@@ -0,0 +1 @@
+export declare function uppercaseFirstLetter(string: string): string;

package/dist/internal/string.js

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

package/dist/internal/tabbable.d.ts

@@ -0,0 +1,5 @@
+export declare function getTabbableBoundary(root: HTMLElement | ShadowRoot): {
+    start: HTMLElement;
+    end: HTMLElement;
+};
+export declare function getTabbableElements(root: HTMLElement | ShadowRoot): HTMLElement[];

package/dist/internal/tabbable.js

@@ -0,0 +1,145 @@
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(element) {
+    if (typeof element.checkVisibility === "function") {
+        return element.checkVisibility({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    const computedStyle = getCachedComputedStyle(element);
+    return (computedStyle.visibility !== "hidden" &&
+        computedStyle.display !== "none");
+}
+function isOverflowingAndTabbable(element) {
+    const computedStyle = getCachedComputedStyle(element);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === "scroll" || overflowX === "scroll") {
+        return true;
+    }
+    if (overflowY !== "auto" || overflowX !== "auto") {
+        return false;
+    }
+    const isOverflowingY = element.scrollHeight > element.clientHeight;
+    if (isOverflowingY && overflowY === "auto") {
+        return true;
+    }
+    const isOverflowingX = element.scrollWidth > element.clientWidth;
+    if (isOverflowingX && overflowX === "auto") {
+        return true;
+    }
+    return false;
+}
+function isTabbable(element) {
+    const tag = element.tagName.toLowerCase();
+    const tabindex = Number(element.getAttribute("tabindex"));
+    const hasTabindex = element.hasAttribute("tabindex");
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
+        return false;
+    }
+    if (element.hasAttribute("disabled")) {
+        return false;
+    }
+    if (element.closest("[inert]")) {
+        return false;
+    }
+    if (tag === "input" && element.getAttribute("type") === "radio") {
+        const rootNode = element.getRootNode();
+        const findRadios = `input[type='radio'][name="${element.getAttribute("name")}"]`;
+        const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+        if (firstChecked) {
+            return firstChecked === element;
+        }
+        const firstRadio = rootNode.querySelector(findRadios);
+        return firstRadio === element;
+    }
+    if (!isVisible(element)) {
+        return false;
+    }
+    if ((tag === "audio" || tag === "video") &&
+        element.hasAttribute("controls")) {
+        return true;
+    }
+    if (element.hasAttribute("tabindex")) {
+        return true;
+    }
+    if (element.hasAttribute("contenteditable") &&
+        element.getAttribute("contenteditable") !== "false") {
+        return true;
+    }
+    const isNativelyTabbable = [
+        "button",
+        "input",
+        "select",
+        "textarea",
+        "a",
+        "audio",
+        "video",
+        "summary",
+        "iframe",
+    ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    return isOverflowingAndTabbable(element);
+}
+function getTabbableBoundary(root) {
+    const tabbableElements = getTabbableElements(root);
+    const start = tabbableElements[0] ?? null;
+    const end = tabbableElements[tabbableElements.length - 1] ?? null;
+    return { start, end };
+}
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    return (slotElement.getRootNode({ composed: true })
+        ?.host !== root);
+}
+function getTabbableElements(root) {
+    const walkedElements = new WeakMap();
+    const tabbableElements = [];
+    function walk(element) {
+        if (element instanceof Element) {
+            if (element.hasAttribute("inert") || element.closest("[inert]")) {
+                return;
+            }
+            if (walkedElements.has(element)) {
+                return;
+            }
+            walkedElements.set(element, true);
+            if (!tabbableElements.includes(element) && isTabbable(element)) {
+                tabbableElements.push(element);
+            }
+            if (element instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(element, root)) {
+                element
+                    .assignedElements({ flatten: true })
+                    .forEach((assignedElement) => {
+                    if (assignedElement instanceof HTMLElement) {
+                        walk(assignedElement);
+                    }
+                });
+            }
+            if (element.shadowRoot !== null &&
+                element.shadowRoot.mode === "open") {
+                walk(element.shadowRoot);
+            }
+        }
+        for (const e of Array.from(element.children)) {
+            walk(e);
+        }
+    }
+    walk(root);
+    return tabbableElements.sort((a, b) => {
+        const aTabindex = Number(a.getAttribute("tabindex")) || 0;
+        const bTabindex = Number(b.getAttribute("tabindex")) || 0;
+        return bTabindex - aTabindex;
+    });
+}
+
+export { getTabbableBoundary, getTabbableElements };

package/dist/internal/watch.d.ts

@@ -0,0 +1,11 @@
+import type { LitElement } from "lit";
+type UpdateHandler = (prev?: unknown, next?: unknown) => void;
+type NonUndefined<A> = A extends undefined ? never : A;
+type UpdateHandlerFunctionKeys<T extends object> = {
+    [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;
+}[keyof T];
+interface WatchOptions {
+    waitUntilFirstUpdate?: boolean;
+}
+export declare function watch(propertyName: string | string[], options?: WatchOptions): <ElemClass extends LitElement>(proto: ElemClass, decoratedFnName: UpdateHandlerFunctionKeys<ElemClass>) => void;
+export {};

package/dist/internal/watch.js

@@ -0,0 +1,32 @@
+function watch(propertyName, options) {
+    const resolvedOptions = {
+        waitUntilFirstUpdate: false,
+        ...options,
+    };
+    return (proto, decoratedFnName) => {
+        // @ts-expect-error — “update” is a protected property
+        const { update } = proto;
+        const watchedProperties = Array.isArray(propertyName)
+            ? propertyName
+            : [propertyName];
+        // @ts-expect-error — “update” is a protected property
+        proto.update = function (changedProps) {
+            watchedProperties.forEach((property) => {
+                const key = property;
+                if (changedProps.has(key)) {
+                    const oldValue = changedProps.get(key);
+                    const newValue = this[key];
+                    if (oldValue !== newValue) {
+                        if (!resolvedOptions.waitUntilFirstUpdate ||
+                            this.hasUpdated) {
+                            this[decoratedFnName](oldValue, newValue);
+                        }
+                    }
+                }
+            });
+            update.call(this, changedProps);
+        };
+    };
+}
+
+export { watch };

package/dist/native-styles.css

@@ -0,0 +1,261 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--pc-font-sans);
+    font-weight: var(--pc-font-weight-bold);
+    line-height: var(--pc-line-height-dense);
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: var(--pc-font-size-xxxl);
+}
+
+h2 {
+    font-size: var(--pc-font-size-xxl);
+}
+
+h3 {
+    font-size: var(--pc-font-size-xl);
+}
+
+h4 {
+    font-size: var(--pc-font-size-l);
+}
+
+h5 {
+    font-size: var(--pc-font-size-m);
+}
+
+h6 {
+    font-size: var(--pc-font-size-s);
+}
+
+hr {
+    display: block;
+    width: 100%;
+    height: 1px;
+    border: none;
+    border-radius: var(--pc-border-radius-pill);
+    background-color: var(--pc-panel-border-color);
+    margin: var(--pc-spacing-l) 0;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+b,
+strong {
+    font-weight: var(--pc-font-weight-bold);
+}
+
+s {
+    text-decoration: line-through;
+}
+
+del,
+ins,
+mark {
+    padding: var(--pc-spacing-xxs) var(--pc-spacing-xs);
+}
+
+ins {
+    background-color: var(--pc-color-success-200);
+    color: var(--pc-color-success-800);
+    border-radius: var(--pc-border-radius-m);
+    text-decoration: none;
+}
+
+del {
+    background-color: var(--pc-color-danger-200);
+    color: var(--pc-color-danger-800);
+    border-radius: var(--pc-border-radius-m);
+    text-decoration: none;
+}
+
+mark {
+    background-color: var(--pc-color-warning-200);
+    color: var(--pc-color-warning-800);
+    border-radius: var(--pc-border-radius-m);
+}
+
+small {
+    font-size: var(--pc-font-size-s);
+}
+
+sup,
+sub {
+    position: relative;
+    font-size: var(--pc-font-size-s);
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sub {
+    bottom: -0.25rem;
+}
+
+sup {
+    top: -0.5rem;
+}
+
+abbr[title] {
+    text-decoration: none;
+    border-bottom: 1px dashed currentColor;
+    cursor: help;
+}
+
+a {
+    color: var(--pc-color-primary-500);
+    text-decoration: 1px underline dotted;
+    transition: all var(--pc-transition-fast) ease-in-out;
+}
+
+a:hover {
+    color: var(--pc-color-primary-600);
+    text-decoration-style: solid;
+}
+
+a:active {
+    color: var(--pc-color-primary-400);
+}
+
+a:focus-visible {
+    outline: var(--pc-focus-ring);
+    outline-offset: var(--pc-focus-ring-offset);
+}
+
+img,
+svg,
+picture,
+video {
+    max-width: 100%;
+    height: auto;
+}
+
+embed,
+iframe,
+object {
+    max-width: 100%;
+}
+
+iframe {
+    border: none;
+}
+
+blockquote {
+    border-left: 4px solid var(--pc-color-neutral-400);
+    padding-left: var(--pc-spacing-l);
+    margin-left: 0;
+}
+
+pre {
+    background-color: var(--pc-color-neutral-100);
+    border-radius: var(--pc-border-radius-m);
+    padding: var(--pc-spacing-m);
+    line-height: var(--pc-line-height-dense);
+    overflow-x: auto;
+}
+
+code {
+    background-color: var(--pc-color-neutral-100);
+    font-size: var(--pc-font-size-xs);
+    border-radius: var(--pc-border-radius-s);
+    font-family: var(--pc-font-mono);
+}
+
+code:not(pre > code) {
+    padding: var(--pc-spacing-xs);
+}
+
+pc-callout code,
+pc-callout[appearance="primary"] code {
+    background-color: var(--pc-color-primary-100);
+}
+
+pc-callout[appearance="success"] code {
+    background-color: var(--pc-color-success-100);
+}
+
+pc-callout[appearance="neutral"] code {
+    background-color: var(--pc-color-neutral-100);
+}
+
+pc-callout[appearance="warning"] code {
+    background-color: var(--pc-color-warning-100);
+}
+
+pc-callout[appearance="danger"] code {
+    background-color: var(--pc-color-danger-100);
+}
+
+kbd {
+    background-color: var(--pc-color-neutral-100);
+    color: var(--pc-color-neutral-700);
+    border: 1px solid var(--pc-color-neutral-300);
+    border-radius: var(--pc-border-radius-s);
+    padding: var(--pc-spacing-xs) var(--pc-spacing-s);
+    font-family: var(--pc-font-mono);
+    font-size: var(--pc-font-size-xs);
+    white-space: nowrap;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+    box-shadow: 0 2px 0 var(--pc-color-neutral-300);
+}
+
+kbd:hover {
+    background-color: var(--pc-color-neutral-300);
+    border-color: var(--pc-color-neutral-400);
+    box-shadow: 0 2px 0 var(--pc-color-neutral-400);
+}
+
+kbd:active {
+    position: relative;
+    top: 2px;
+    background-color: var(--pc-color-neutral-300);
+    border-color: var(--pc-color-neutral-300);
+    box-shadow: none;
+}
+
+table {
+    display: table;
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+}
+
+thead {
+    border-bottom: 2px solid var(--pc-color-neutral-400);
+}
+
+th {
+    font-weight: var(--pc-font-weight-bold);
+}
+
+td {
+    font-weight: var(--pc-font-weight-normal);
+}
+
+tbody > tr:not(:last-of-type) {
+    border-bottom: 1px solid var(--pc-color-neutral-400);
+}
+
+th,
+td {
+    padding: var(--pc-spacing-s) var(--pc-spacing-m);
+    text-align: left;
+}
+
+/* Finds every hyperlink and converts it to e.g., “Example link
+   (https://example.com)” when printing a page with this declaration */
+@media print {
+    a[href]::after {
+        content: " (" attr(href) ")";
+    }
+}

package/dist/placer-autoloader.d.ts

@@ -0,0 +1 @@
+export declare function discover(root: Element | ShadowRoot): Promise<void>;