placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/dist/events/pc-request-close.d.ts

@@ -1,8 +0,0 @@
-export type PcRequestCloseEvent = CustomEvent<{
-    source: "close-button" | "keyboard" | "overlay";
-}>;
-declare global {
-    interface GlobalEventHandlersEventMap {
-        "pc-request-close": PcRequestCloseEvent;
-    }
-}

package/dist/events/pc-request-close.js

@@ -1 +0,0 @@
-

package/dist/internal/modal.d.ts

@@ -1,19 +0,0 @@
-export declare class Modal {
-    element: HTMLElement;
-    isExternalActivated?: boolean;
-    tabDirection: "forward" | "backward";
-    currentFocus?: HTMLElement | null;
-    previousFocus?: HTMLElement | null;
-    elementsWithTabbableControls: string[];
-    constructor(element: HTMLElement);
-    activate(): void;
-    deactivate(): void;
-    isActive(): boolean;
-    activateExternal(): void;
-    deactivateExternal(): void;
-    private checkFocus;
-    private handleFocusIn;
-    private possiblyHasTabbableChildren;
-    private handleKeyDown;
-    private handleKeyUp;
-}

package/dist/internal/modal.js

@@ -1,116 +0,0 @@
-import { getDeepestActiveElement, activeElements } from './active-elements.js';
-import { getTabbableElements } from './tabbable.js';
-
-let activeModals = [];
-class Modal {
-    constructor(element) {
-        this.tabDirection = "forward";
-        this.handleFocusIn = () => {
-            if (!this.isActive()) {
-                return;
-            }
-            this.checkFocus();
-        };
-        this.handleKeyDown = (event) => {
-            if (event.key !== "Tab" || this.isExternalActivated) {
-                return;
-            }
-            if (!this.isActive()) {
-                return;
-            }
-            const currentActiveElement = getDeepestActiveElement();
-            this.previousFocus = currentActiveElement;
-            if (this.previousFocus &&
-                this.possiblyHasTabbableChildren(this.previousFocus)) {
-                return;
-            }
-            if (event.shiftKey) {
-                this.tabDirection = "backward";
-            }
-            else {
-                this.tabDirection = "forward";
-            }
-            const tabbableElements = getTabbableElements(this.element);
-            let currentFocusIndex = tabbableElements.findIndex((element) => element === currentActiveElement);
-            this.previousFocus = this.currentFocus;
-            const addition = this.tabDirection === "forward" ? 1 : -1;
-            while (true) {
-                if (currentFocusIndex + addition >= tabbableElements.length) {
-                    currentFocusIndex = 0;
-                }
-                else if (currentFocusIndex + addition < 0) {
-                    currentFocusIndex = tabbableElements.length - 1;
-                }
-                else {
-                    currentFocusIndex += addition;
-                }
-                this.previousFocus = this.currentFocus;
-                const nextFocus = tabbableElements[currentFocusIndex];
-                if (this.tabDirection === "backward") {
-                    if (this.previousFocus &&
-                        this.possiblyHasTabbableChildren(this.previousFocus)) {
-                        return;
-                    }
-                }
-                if (nextFocus && this.possiblyHasTabbableChildren(nextFocus)) {
-                    return;
-                }
-                event.preventDefault();
-                this.currentFocus = nextFocus;
-                this.currentFocus?.focus({ preventScroll: false });
-                const allActiveElements = [...activeElements()];
-                if (allActiveElements.includes(this.currentFocus) ||
-                    !allActiveElements.includes(this.previousFocus)) {
-                    break;
-                }
-            }
-            setTimeout(() => this.checkFocus());
-        };
-        this.handleKeyUp = () => {
-            this.tabDirection = "forward";
-        };
-        this.element = element;
-        this.elementsWithTabbableControls = ["iframe"];
-    }
-    activate() {
-        activeModals.push(this.element);
-        document.addEventListener("focusin", this.handleFocusIn);
-        document.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener("keyup", this.handleKeyUp);
-    }
-    deactivate() {
-        activeModals = activeModals.filter((modal) => modal !== this.element);
-        this.currentFocus = null;
-        document.removeEventListener("focusin", this.handleFocusIn);
-        document.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener("keyup", this.handleKeyUp);
-    }
-    isActive() {
-        return activeModals[activeModals.length - 1] === this.element;
-    }
-    activateExternal() {
-        this.isExternalActivated = true;
-    }
-    deactivateExternal() {
-        this.isExternalActivated = false;
-    }
-    checkFocus() {
-        if (this.isActive() && !this.isExternalActivated) {
-            const tabbableElements = getTabbableElements(this.element);
-            if (!this.element.matches(":focus-within")) {
-                const start = tabbableElements[0];
-                const end = tabbableElements[tabbableElements.length - 1];
-                const target = this.tabDirection === "forward" ? start : end;
-                if (typeof target?.focus === "function") {
-                    this.currentFocus = target;
-                    target.focus({ preventScroll: false });
-                }
-            }
-        }
-    }
-    possiblyHasTabbableChildren(element) {
-        return (this.elementsWithTabbableControls.includes(element.tagName.toLowerCase()) || element.hasAttribute("controls"));
-    }
-}
-
-export { Modal };

package/dist/native-styles.css

@@ -1,261 +0,0 @@
-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/style-utilities/fouce.css

@@ -1,13 +0,0 @@
-.pc-cloak:has(:not(:defined)) {
-    animation: pc-fouce-cloak 2s step-end;
-}
-
-@keyframes pc-fouce-cloak {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}

package/dist/style-utilities/style-utilities.css

@@ -1,2 +0,0 @@
-@import "./fouce.css";
-@import "./visually-hidden.css";

package/dist/style-utilities/visually-hidden.css

@@ -1,12 +0,0 @@
-.pc-visually-hidden:not(:focus-within),
-.pc-visually-hidden-force {
-    position: absolute !important;
-    margin: -1px !important;
-    padding: 0 !important;
-    width: 1px !important;
-    height: 1px !important;
-    clip-path: inset(50%) !important;
-    border: none !important;
-    overflow: hidden !important;
-    white-space: nowrap !important;
-}

package/dist/utilities/base-path.d.ts

@@ -1,2 +0,0 @@
-export declare function setBasePath(path: string): void;
-export declare function getBasePath(subpath?: string): string;

package/dist/utilities/base-path.js

@@ -1,8 +0,0 @@
-let basePath = "";
-function setBasePath(path) {
-}
-function getBasePath(subpath = "") {
-    return basePath + (subpath ? `/${subpath.replace(/^\//, "")}` : "");
-}
-
-export { getBasePath, setBasePath };

package/dist/utility.css

@@ -1,41 +0,0 @@
-/* This file contains utility classes that can’t be contained in a component
-   and must be applied to the light DOM. None of the rules in this stylesheet
-   should target component tags or HTML tags, and all classes must start with
-   “.pc-” to reduce the possibility of collisions. */
-
-.pc-toast-stack {
-    position: fixed;
-    top: 0;
-    inset-inline-end: 0;
-    z-index: var(--pc-z-index-toast);
-    width: 28rem;
-    max-width: 100%;
-    max-height: 100%;
-    overflow: auto;
-}
-
-.pc-toast-stack pc-alert {
-    margin: var(--pc-spacing-l);
-}
-
-.pc-toast-stack pc-alert::part(base) {
-    box-shadow: var(--pc-shadow-l);
-}
-
-@supports (scrollbar-gutter: stable) {
-    .pc-scroll-lock {
-        scrollbar-gutter: var(--pc-scroll-lock-gutter) !important;
-    }
-
-    .pc-scroll-lock body {
-        overflow: hidden !important;
-    }
-}
-
-/* This at‐rule will stay until more people are on the latest version of Safari (18.2+) */
-@supports not (scrollbar-gutter: stable) {
-    .pc-scroll-lock body {
-        padding-right: var(--pc-scroll-lock-size) !important;
-        overflow: hidden !important;
-    }
-}

package/src/animations/attention_seekers/bounce.ts

@@ -1,43 +0,0 @@
-export const bounce = [
-    {
-        offset: 0,
-        easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-        transform: "translate3d(0, 0, 0)",
-    },
-    {
-        offset: 0.2,
-        easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-        transform: "translate3d(0, 0, 0)",
-    },
-    {
-        offset: 0.4,
-        easing: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
-        transform: "translate3d(0, -30px, 0) scaleY(1.1)",
-    },
-    {
-        offset: 0.43,
-        easing: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
-        transform: "translate3d(0, -30px, 0) scaleY(1.1)",
-    },
-    {
-        offset: 0.53,
-        easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-        transform: "translate3d(0, 0, 0)",
-    },
-    {
-        offset: 0.7,
-        easing: "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
-        transform: "translate3d(0, -15px, 0) scaleY(1.05)",
-    },
-    {
-        "offset": 0.8,
-        "transition-timing-function": "cubic-bezier(0.215, 0.61, 0.355, 1)",
-        "transform": "translate3d(0, 0, 0) scaleY(0.95)",
-    },
-    { offset: 0.9, transform: "translate3d(0, -4px, 0) scaleY(1.02)" },
-    {
-        offset: 1,
-        easing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
-        transform: "translate3d(0, 0, 0)",
-    },
-];

package/src/animations/attention_seekers/flash.ts

@@ -1,7 +0,0 @@
-export const flash = [
-    { offset: 0, opacity: "1" },
-    { offset: 0.25, opacity: "0" },
-    { offset: 0.5, opacity: "1" },
-    { offset: 0.75, opacity: "0" },
-    { offset: 1, opacity: "1" },
-];

package/src/animations/attention_seekers/headShake.ts

@@ -1,8 +0,0 @@
-export const headShake = [
-    { offset: 0, transform: "translateX(0)" },
-    { offset: 0.065, transform: "translateX(-6px) rotateY(-9deg)" },
-    { offset: 0.185, transform: "translateX(5px) rotateY(7deg)" },
-    { offset: 0.315, transform: "translateX(-3px) rotateY(-5deg)" },
-    { offset: 0.435, transform: "translateX(2px) rotateY(3deg)" },
-    { offset: 0.5, transform: "translateX(0)" },
-];

package/src/animations/attention_seekers/heartBeat.ts

@@ -1,7 +0,0 @@
-export const heartBeat = [
-    { offset: 0, transform: "scale(1)" },
-    { offset: 0.14, transform: "scale(1.3)" },
-    { offset: 0.28, transform: "scale(1)" },
-    { offset: 0.42, transform: "scale(1.3)" },
-    { offset: 0.7, transform: "scale(1)" },
-];

package/src/animations/attention_seekers/jello.ts

@@ -1,15 +0,0 @@
-export const jello = [
-    { offset: 0, transform: "translate3d(0, 0, 0)" },
-    { offset: 0.111, transform: "translate3d(0, 0, 0)" },
-    { offset: 0.222, transform: "skewX(-12.5deg) skewY(-12.5deg)" },
-    { offset: 0.33299999999999996, transform: "skewX(6.25deg) skewY(6.25deg)" },
-    { offset: 0.444, transform: "skewX(-3.125deg) skewY(-3.125deg)" },
-    { offset: 0.555, transform: "skewX(1.5625deg) skewY(1.5625deg)" },
-    {
-        offset: 0.6659999999999999,
-        transform: "skewX(-0.78125deg) skewY(-0.78125deg)",
-    },
-    { offset: 0.777, transform: "skewX(0.390625deg) skewY(0.390625deg)" },
-    { offset: 0.888, transform: "skewX(-0.1953125deg) skewY(-0.1953125deg)" },
-    { offset: 1, transform: "translate3d(0, 0, 0)" },
-];

package/src/animations/attention_seekers/pulse.ts

@@ -1,5 +0,0 @@
-export const pulse = [
-    { offset: 0, transform: "scale3d(1, 1, 1)" },
-    { offset: 0.5, transform: "scale3d(1.05, 1.05, 1.05)" },
-    { offset: 1, transform: "scale3d(1, 1, 1)" },
-];

package/src/animations/attention_seekers/rubberBand.ts

@@ -1,9 +0,0 @@
-export const rubberBand = [
-    { offset: 0, transform: "scale3d(1, 1, 1)" },
-    { offset: 0.3, transform: "scale3d(1.25, 0.75, 1)" },
-    { offset: 0.4, transform: "scale3d(0.75, 1.25, 1)" },
-    { offset: 0.5, transform: "scale3d(1.15, 0.85, 1)" },
-    { offset: 0.65, transform: "scale3d(0.95, 1.05, 1)" },
-    { offset: 0.75, transform: "scale3d(1.05, 0.95, 1)" },
-    { offset: 1, transform: "scale3d(1, 1, 1)" },
-];

package/src/animations/attention_seekers/shake.ts

@@ -1,13 +0,0 @@
-export const shake = [
-    { offset: 0, transform: "translate3d(0, 0, 0)" },
-    { offset: 0.1, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.2, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.3, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.4, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.5, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.6, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.7, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.8, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.9, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 1, transform: "translate3d(0, 0, 0)" },
-];

package/src/animations/attention_seekers/shakeX.ts

@@ -1,13 +0,0 @@
-export const shakeX = [
-    { offset: 0, transform: "translate3d(0, 0, 0)" },
-    { offset: 0.1, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.2, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.3, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.4, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.5, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.6, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.7, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 0.8, transform: "translate3d(10px, 0, 0)" },
-    { offset: 0.9, transform: "translate3d(-10px, 0, 0)" },
-    { offset: 1, transform: "translate3d(0, 0, 0)" },
-];

package/src/animations/attention_seekers/shakeY.ts

@@ -1,13 +0,0 @@
-export const shakeY = [
-    { offset: 0, transform: "translate3d(0, 0, 0)" },
-    { offset: 0.1, transform: "translate3d(0, -10px, 0)" },
-    { offset: 0.2, transform: "translate3d(0, 10px, 0)" },
-    { offset: 0.3, transform: "translate3d(0, -10px, 0)" },
-    { offset: 0.4, transform: "translate3d(0, 10px, 0)" },
-    { offset: 0.5, transform: "translate3d(0, -10px, 0)" },
-    { offset: 0.6, transform: "translate3d(0, 10px, 0)" },
-    { offset: 0.7, transform: "translate3d(0, -10px, 0)" },
-    { offset: 0.8, transform: "translate3d(0, 10px, 0)" },
-    { offset: 0.9, transform: "translate3d(0, -10px, 0)" },
-    { offset: 1, transform: "translate3d(0, 0, 0)" },
-];

package/src/animations/attention_seekers/swing.ts

@@ -1,7 +0,0 @@
-export const swing = [
-    { offset: 0.2, transform: "rotate3d(0, 0, 1, 15deg)" },
-    { offset: 0.4, transform: "rotate3d(0, 0, 1, -10deg)" },
-    { offset: 0.6, transform: "rotate3d(0, 0, 1, 5deg)" },
-    { offset: 0.8, transform: "rotate3d(0, 0, 1, -5deg)" },
-    { offset: 1, transform: "rotate3d(0, 0, 1, 0deg)" },
-];