placer-toolkit 0.5.1

package/dist/placer-autoloader.js

@@ -0,0 +1,41 @@
+import { getBasePath } from './utilities/base-path.js';
+
+const observer = new MutationObserver((mutations) => {
+    for (const { addedNodes } of mutations) {
+        for (const node of Array.from(addedNodes)) {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+                discover(node);
+            }
+        }
+    }
+});
+async function discover(root) {
+    const rootTagName = root instanceof Element ? root.tagName.toLowerCase() : "";
+    const rootIsPlacerElement = rootTagName?.startsWith("pc-");
+    const tags = Array.from(root.querySelectorAll(":not(:defined)"))
+        .map((element) => element.tagName.toLowerCase())
+        .filter((tag) => tag.startsWith("pc-"));
+    if (rootIsPlacerElement && !customElements.get(rootTagName)) {
+        tags.push(rootTagName);
+    }
+    const tagsToRegister = [...new Set(tags)];
+    await Promise.allSettled(tagsToRegister.map((tagName) => register(tagName)));
+}
+function register(tagName) {
+    if (customElements.get(tagName)) {
+        return Promise.resolve();
+    }
+    const tagWithoutPrefix = tagName.replace(/^pc-/i, "");
+    const path = getBasePath(`components/${tagWithoutPrefix}/${tagWithoutPrefix}.js`);
+    return new Promise((resolve, reject) => {
+        import(/* @vite-ignore */ path)
+            .then(() => resolve())
+            .catch((error) => {
+            reject(new Error(`Unable to auto‐load <${tagName}>: ${error}`));
+        });
+    });
+}
+discover(document.body);
+observer.observe(document.documentElement, { subtree: true, childList: true });
+
+export { discover };

package/dist/placer.d.ts

@@ -0,0 +1,44 @@
+import "./global-shims.js";
+export { default as PcAnimation } from "./components/animation/animation.js";
+export { default as PcAvatar } from "./components/avatar/avatar.js";
+export { default as PcBadge } from "./components/badge/badge.js";
+export { default as PcButton } from "./components/button/button.js";
+export { default as PcButtonGroup } from "./components/button-group/button-group.js";
+export { default as PcCallout } from "./components/callout/callout.js";
+export { default as PcCard } from "./components/card/card.js";
+export { default as PcCheckbox } from "./components/checkbox/checkbox.js";
+export { default as PcComparer } from "./components/comparer/comparer.js";
+export { default as PcCopyButton } from "./components/copy-button/copy-button.js";
+export { default as PcDetails } from "./components/details/details.js";
+export { default as PcDialog } from "./components/dialog/dialog.js";
+export { default as PcDivider } from "./components/divider/divider.js";
+export { default as PcDrawer } from "./components/drawer/drawer.js";
+export { default as PcDropdown } from "./components/dropdown/dropdown.js";
+export { default as PcIcon } from "./components/icon/icon.js";
+export { default as PcIconButton } from "./components/icon-button/icon-button.js";
+export { default as PcInput } from "./components/input/input.js";
+export { default as PcMenu } from "./components/menu/menu.js";
+export { default as PcMenuItem } from "./components/menu-item/menu-item.js";
+export { default as PcMenuLabel } from "./components/menu-label/menu-label.js";
+export { default as PcOption } from "./components/option/option.js";
+export { default as PcPopup } from "./components/popup/popup.js";
+export { default as PcQrCode } from "./components/qr-code/qr-code.js";
+export { default as PcRadio } from "./components/radio/radio.js";
+export { default as PcRadioButton } from "./components/radio-button/radio-button.js";
+export { default as PcRadioGroup } from "./components/radio-group/radio-group.js";
+export { default as PcRating } from "./components/rating/rating.js";
+export { default as PcResizeObserver } from "./components/resize-observer/resize-observer.js";
+export { default as PcSelect } from "./components/select/select.js";
+export { default as PcSpinner } from "./components/spinner/spinner.js";
+export { default as PcSwitch } from "./components/switch/switch.js";
+export { default as PcTab } from "./components/tab/tab.js";
+export { default as PcTabGroup } from "./components/tab-group/tab-group.js";
+export { default as PcTabPanel } from "./components/tab-panel/tab-panel.js";
+export { default as PcTag } from "./components/tag/tag.js";
+export { default as PcTooltip } from "./components/tooltip/tooltip.js";
+export * from "./utilities/animation-registry.js";
+export * from "./utilities/animation.js";
+export * from "./utilities/base-path.js";
+export * from "./utilities/form.js";
+export * from "./utilities/icon-library.js";
+export * from "./events/events.js";

package/dist/placer.js

@@ -0,0 +1,43 @@
+import './global-shims.js';
+export { default as PcAnimation } from './components/animation/animation.js';
+export { default as PcAvatar } from './components/avatar/avatar.js';
+export { default as PcBadge } from './components/badge/badge.js';
+export { default as PcButton } from './components/button/button.js';
+export { default as PcButtonGroup } from './components/button-group/button-group.js';
+export { default as PcCallout } from './components/callout/callout.js';
+export { default as PcCard } from './components/card/card.js';
+export { default as PcCheckbox } from './components/checkbox/checkbox.js';
+export { default as PcComparer } from './components/comparer/comparer.js';
+export { default as PcCopyButton } from './components/copy-button/copy-button.js';
+export { default as PcDetails } from './components/details/details.js';
+export { default as PcDialog } from './components/dialog/dialog.js';
+export { default as PcDivider } from './components/divider/divider.js';
+export { default as PcDrawer } from './components/drawer/drawer.js';
+export { default as PcDropdown } from './components/dropdown/dropdown.js';
+export { default as PcIcon } from './components/icon/icon.js';
+export { default as PcIconButton } from './components/icon-button/icon-button.js';
+export { default as PcInput } from './components/input/input.js';
+export { default as PcMenu } from './components/menu/menu.js';
+export { default as PcMenuItem } from './components/menu-item/menu-item.js';
+export { default as PcMenuLabel } from './components/menu-label/menu-label.js';
+export { default as PcOption } from './components/option/option.js';
+export { default as PcPopup } from './components/popup/popup.js';
+export { default as PcQrCode } from './components/qr-code/qr-code.js';
+export { default as PcRadio } from './components/radio/radio.js';
+export { default as PcRadioButton } from './components/radio-button/radio-button.js';
+export { default as PcRadioGroup } from './components/radio-group/radio-group.js';
+export { default as PcRating } from './components/rating/rating.js';
+export { default as PcResizeObserver } from './components/resize-observer/resize-observer.js';
+export { default as PcSelect } from './components/select/select.js';
+export { default as PcSpinner } from './components/spinner/spinner.js';
+export { default as PcSwitch } from './components/switch/switch.js';
+export { default as PcTab } from './components/tab/tab.js';
+export { default as PcTabGroup } from './components/tab-group/tab-group.js';
+export { default as PcTabPanel } from './components/tab-panel/tab-panel.js';
+export { default as PcTag } from './components/tag/tag.js';
+export { default as PcTooltip } from './components/tooltip/tooltip.js';
+export { getAnimation, setAnimation, setDefaultAnimation } from './utilities/animation-registry.js';
+export { getAnimationNames, getEasingNames } from './components/animation/animations.js';
+export { getBasePath, setBasePath } from './utilities/base-path.js';
+export { getFormControls, serialize } from './utilities/form.js';
+export { registerIconLibrary, unregisterIconLibrary } from './components/icon/library.js';

package/dist/style-utilities/fouce.css

@@ -0,0 +1,13 @@
+.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

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

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

@@ -0,0 +1,12 @@
+.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/animation-registry.d.ts

@@ -0,0 +1,14 @@
+export interface ElementAnimation {
+    keyframes: Keyframe[];
+    rtlKeyframes?: Keyframe[];
+    options?: KeyframeAnimationOptions;
+}
+export interface ElementAnimationMap {
+    [animationName: string]: ElementAnimation;
+}
+export interface GetAnimationOptions {
+    dir: string;
+}
+export declare function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
+export declare function setAnimation(element: Element, animationName: string, animation: ElementAnimation | null): void;
+export declare function getAnimation(element: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;

package/dist/utilities/animation-registry.js

@@ -0,0 +1,39 @@
+const defaultAnimationRegistry = new Map();
+const customAnimationRegistry = new WeakMap();
+function ensureAnimation(animation) {
+    return animation ?? { keyframes: [], options: { duration: 0 } };
+}
+function getLogicalAnimation(animation, dir) {
+    if (dir.toLowerCase() === "rtl") {
+        return {
+            keyframes: animation.rtlKeyframes || animation.keyframes,
+            options: animation.options,
+        };
+    }
+    return animation;
+}
+function setDefaultAnimation(animationName, animation) {
+    defaultAnimationRegistry.set(animationName, ensureAnimation(animation));
+}
+function setAnimation(element, animationName, animation) {
+    customAnimationRegistry.set(element, {
+        ...customAnimationRegistry.get(element),
+        [animationName]: ensureAnimation(animation),
+    });
+}
+function getAnimation(element, animationName, options) {
+    const customAnimation = customAnimationRegistry.get(element);
+    if (customAnimation?.[animationName]) {
+        return getLogicalAnimation(customAnimation[animationName], options.dir);
+    }
+    const defaultAnimation = defaultAnimationRegistry.get(animationName);
+    if (defaultAnimation) {
+        return getLogicalAnimation(defaultAnimation, options.dir);
+    }
+    return {
+        keyframes: [],
+        options: { duration: 0 },
+    };
+}
+
+export { getAnimation, setAnimation, setDefaultAnimation };

package/dist/utilities/animation.d.ts

@@ -0,0 +1 @@
+export { getAnimationNames, getEasingNames, } from "../components/animation/animations.js";

package/dist/utilities/animation.js

@@ -0,0 +1 @@
+export { getAnimationNames, getEasingNames } from '../components/animation/animations.js';

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

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

package/dist/utilities/base-path.js

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

package/dist/utilities/form.d.ts

@@ -0,0 +1,2 @@
+export declare function serialize(form: HTMLFormElement): Record<string, unknown>;
+export declare function getFormControls(form: HTMLFormElement): Element[];

package/dist/utilities/form.js

@@ -0,0 +1,39 @@
+import { formCollections } from '../internal/form.js';
+
+function serialize(form) {
+    const formData = new FormData(form);
+    const object = {};
+    formData.forEach((value, key) => {
+        if (Reflect.has(object, key)) {
+            const entry = object[key];
+            if (Array.isArray(entry)) {
+                entry.push(value);
+            }
+            else {
+                object[key] = [object[key], value];
+            }
+        }
+        else {
+            object[key] = value;
+        }
+    });
+    return object;
+}
+function getFormControls(form) {
+    const rootNode = form.getRootNode();
+    const allNodes = [...rootNode.querySelectorAll("*")];
+    const formControls = [...form.elements];
+    const collection = formCollections.get(form);
+    const placerFormControls = collection ? Array.from(collection) : [];
+    return [...formControls, ...placerFormControls].sort((a, b) => {
+        if (allNodes.indexOf(a) < allNodes.indexOf(b)) {
+            return -1;
+        }
+        if (allNodes.indexOf(a) > allNodes.indexOf(b)) {
+            return 1;
+        }
+        return 0;
+    });
+}
+
+export { getFormControls, serialize };

package/dist/utilities/icon-library.d.ts

@@ -0,0 +1 @@
+export { registerIconLibrary, unregisterIconLibrary, } from "../components/icon/library.js";

package/dist/utilities/icon-library.js

@@ -0,0 +1 @@
+export { registerIconLibrary, unregisterIconLibrary } from '../components/icon/library.js';

package/dist/utility.css

@@ -0,0 +1,41 @@
+/* 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/package.json

@@ -0,0 +1,82 @@
+{
+    "name": "placer-toolkit",
+    "type": "module",
+    "version": "0.5.1",
+    "description": "The go‐to web component library for the web! 🛠️",
+    "keywords": [
+        "lit",
+        "placer",
+        "toolkit",
+        "litelement",
+        "components",
+        "placer-toolkit",
+        "web-components",
+        "custom-elements"
+    ],
+    "main": "./dist/placer.js",
+    "module": "./dist/placer.js",
+    "types": "./dist/placer.d.ts",
+    "author": "randomguy-2650",
+    "license": "MIT",
+    "exports": {
+        ".": {
+            "import": "./dist/placer.js",
+            "types": "./dist/placer.d.ts"
+        },
+        "./dist/custom-elements.json": "./dist/custom-elements.json",
+        "./dist/default.css": "./dist/default.css",
+        "./dist/native-styles.css": "./dist/native-styles.css",
+        "./dist/global-shims.js": "./dist/global-shims.js",
+        "./dist/placer.js": "./dist/placer.js",
+        "./dist/placer-autoloader.js": "./dist/placer-autoloader.js",
+        "./dist/components": "./dist/components",
+        "./dist/components/*": "./dist/components/*",
+        "./dist/style-utilities": "./dist/style-utilities",
+        "./dist/style-utilities/*": "./dist/style-utilities/*",
+        "./dist/utilities": "./dist/utilities",
+        "./dist/utilities/*": "./dist/utilities/*"
+    },
+    "files": [
+        "dist",
+        "src",
+        "LICENSE.md",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "rollup -c",
+        "analyze": "cem analyze --litelement --outdir ./docs",
+        "lint": "tsc --noEmit",
+        "format": "prettier --check .",
+        "prepublish-only": "npm run build"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/randomguy-2650/placer-toolkit.git"
+    },
+    "bugs": {
+        "url": "https://github.com/randomguy-2650/placer-toolkit/issues"
+    },
+    "engines": {
+        "node": ">=18.0.0"
+    },
+    "dependencies": {
+        "@ctrl/tinycolor": "^4.1.0",
+        "@floating-ui/dom": "^1.7.2",
+        "composed-offset-position": "^0.0.6",
+        "glob": "^11.0.3",
+        "lit": "^3.3.0",
+        "qr-creator": "^1.0.0",
+        "tslib": "^2.8.1"
+    },
+    "devDependencies": {
+        "@custom-elements-manifest/analyzer": "^0.10.4",
+        "@rollup/plugin-commonjs": "^28.0.6",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-typescript": "^12.1.4",
+        "command-line-args": "^6.0.1",
+        "comment-parser": "^1.4.1",
+        "rollup": "^4.44.1",
+        "rollup-plugin-copy": "^3.5.0",
+        "typescript": "^5.8.3"
+    }
+}

package/src/animations/attention_seekers/bounce.ts

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,7 @@
+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)" },
+];

package/src/animations/attention_seekers/tada.ts

@@ -0,0 +1,40 @@
+export const tada = [
+    { offset: 0, transform: "scale3d(1, 1, 1)" },
+    {
+        offset: 0.1,
+        transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.2,
+        transform: "scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.3,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+    },
+    {
+        offset: 0.4,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.5,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+    },
+    {
+        offset: 0.6,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.7,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+    },
+    {
+        offset: 0.8,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.9,
+        transform: "scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)",
+    },
+    { offset: 1, transform: "scale3d(1, 1, 1)" },
+];

package/src/animations/attention_seekers/wobble.ts

@@ -0,0 +1,24 @@
+export const wobble = [
+    { offset: 0, transform: "translate3d(0, 0, 0)" },
+    {
+        offset: 0.15,
+        transform: "translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg)",
+    },
+    {
+        offset: 0.3,
+        transform: "translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg)",
+    },
+    {
+        offset: 0.45,
+        transform: "translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg)",
+    },
+    {
+        offset: 0.6,
+        transform: "translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg)",
+    },
+    {
+        offset: 0.75,
+        transform: "translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg)",
+    },
+    { offset: 1, transform: "translate3d(0, 0, 0)" },
+];

package/src/animations/back_entrances/backInDown.ts

@@ -0,0 +1,5 @@
+export const backInDown = [
+    { offset: 0, transform: "translateY(-1200px) scale(0.7)", opacity: "0.7" },
+    { offset: 0.8, transform: "translateY(0px) scale(0.7)", opacity: "0.7" },
+    { offset: 1, transform: "scale(1)", opacity: "1" },
+];