placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/package.json

@@ -1,82 +1,89 @@
 {
-    "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/*"
+  "name": "placer-toolkit",
+  "type": "module",
+  "version": "1.0.0-alpha.2",
+  "description": "A web component library that’s designed to be flexible and accessible. Built with Lit.",
+  "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": "Placer (maintainer: @randomguy-2650)",
+  "license": "MIT",
+  "customElements": "dist/custom-elements.json",
+  "exports": {
+    ".": {
+      "import": "./dist/placer.js",
+      "types": "./dist/placer.d.ts"
     },
-    "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"
-    }
+    "./dist/global-shims.js": "./dist/global-shims.js",
+    "./dist/placer.js": "./dist/placer.js",
+    "./dist/placer-autoloader.js": "./dist/placer-autoloader.js",
+    "./dist/custom-elements.json": "./dist/custom-elements.json",
+    "./dist/components/*": "./dist/components/*",
+    "./dist/styles/*": "./dist/styles/*",
+    "./dist/translations/*": "./dist/translations/*",
+    "./dist/utilities/*": "./dist/utilities/*"
+  },
+  "files": [
+    "cdn",
+    "dist",
+    "LICENSE.md",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node ./scripts/build.js",
+    "lint": "tsc --noEmit",
+    "format": "prettier --write --log-level=warn .",
+    "prepare": "husky",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/placer-toolkit/placer-toolkit.git"
+  },
+  "bugs": {
+    "url": "https://github.com/placer-toolkit/placer-toolkit/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://ko-fi.com/randomguy2650"
+  },
+  "engines": {
+    "node": "^20.0.0 || ^22.0.0 || ^23.0.0 || ^24.0.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,json,html,css,md,mdx,astro}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "dependencies": {
+    "@ctrl/tinycolor": "^4.2.0",
+    "@floating-ui/dom": "^1.7.4",
+    "composed-offset-position": "^0.0.6",
+    "lit": "^3.3.1",
+    "nanoid": "^5.1.6",
+    "qr-creator": "^1.0.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "comment-parser": "^1.4.1",
+    "esbuild": "^0.27.0",
+    "fs-extra": "^11.3.2",
+    "glob": "^11.0.3",
+    "husky": "^9.1.7",
+    "lint-staged": "^16.2.6",
+    "prettier": "^3.6.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  }
 }

package/dist/components/animation/animation.component.d.ts

@@ -1,65 +0,0 @@
-import { LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-/**
- * @summary Animate elements declaratively with nearly 100 baked‐in presets, or roll your own with custom keyframes. These animations are powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- * @status experimental
- * @since 0.4.0
- *
- * @event pc-cancel — Emitted when the animation is cancelled.
- * @event pc-finish — Emitted when the animation finishes.
- * @event pc‐start — Emitted when the animation starts or restarts.
- *
- * @slot — The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<pc-animation>` elements.
- */
-export declare class PcAnimation extends LitElement {
-    static styles: CSSResultGroup;
-    private animation?;
-    private hasStarted;
-    /** @internal This is an internal property. */
-    defaultSlot: Promise<HTMLSlotElement>;
-    /** The name of the built‐in animation to use. For custom animations, use the `keyframes` prop. */
-    name: string;
-    /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets cancelled. */
-    play: boolean;
-    /** The number of milliseconds to delay the start of the animation. */
-    delay: number;
-    /** Determines the direction of playback as well as the behaviour when reaching the end of an iteration. Learn more about the CSS [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) property. */
-    direction: PlaybackDirection;
-    /** The number of milliseconds each iteration of the animation takes to complete. */
-    duration: number;
-    /** The easing function to use for the animation. This can be an easing function name like `easeInSine` or a custom easing function like `cubic-bezier(0.12, 0, 0.39, 0)`. */
-    easing: string;
-    /** The number of milliseconds to delay after the active period of an animation sequence. */
-    endDelay: number;
-    /** Sets how the animation applies styles to its target before and after its execution. */
-    fill: FillMode;
-    /** The number of iterations to run before the animation completes. */
-    iterations: number;
-    /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-    iterationStart: number;
-    /** The keyframes to use for the animation. If this is set, the `name` attribute and property will be ignored. */
-    keyframes?: Keyframe[];
-    /** Sets the animation’s playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation’s speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart. */
-    playbackRate: number;
-    /** Gets and sets the current animation time. */
-    get currentTime(): CSSNumberish;
-    set currentTime(time: number);
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    private handleAnimationFinish;
-    private handleAnimationCancel;
-    private handleSlotChange;
-    private createAnimation;
-    private destroyAnimation;
-    /** @internal This is an internal property. */
-    handleAnimationChange(): void;
-    /** @internal This is an internal property. */
-    handlePlayChange(): boolean;
-    /** @internal This is an internal property. */
-    handlePlaybackRateChange(): void;
-    /** Clears all keyframes caused by this animation and aborts its playback. */
-    cancel(): void;
-    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
-    finish(): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/components/animation/animation.component.js

@@ -1,247 +0,0 @@
-import { __decorate, __metadata } from 'tslib';
-import { LitElement, html } from 'lit';
-import { queryAsync, property, customElement } from 'lit/decorators.js';
-import { watch } from '../../internal/watch.js';
-import { emit } from '../../internal/emit.js';
-import * as index from '../../animations/index.js';
-import { styles } from './animation.styles.js';
-import { easings } from '../../animations/easings/easings.js';
-
-/**
- * @summary Animate elements declaratively with nearly 100 baked‐in presets, or roll your own with custom keyframes. These animations are powered by the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
- * @status experimental
- * @since 0.4.0
- *
- * @event pc-cancel — Emitted when the animation is cancelled.
- * @event pc-finish — Emitted when the animation finishes.
- * @event pc‐start — Emitted when the animation starts or restarts.
- *
- * @slot — The element to animate. Avoid slotting in more than one element, as subsequent ones will be ignored. To animate multiple elements, either wrap them in a single container or use multiple `<pc-animation>` elements.
- */
-let PcAnimation = class PcAnimation extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.hasStarted = false;
-        /** The name of the built‐in animation to use. For custom animations, use the `keyframes` prop. */
-        this.name = "none";
-        /** Plays the animation. When omitted, the animation will be paused. This attribute will be automatically removed when the animation finishes or gets cancelled. */
-        this.play = false;
-        /** The number of milliseconds to delay the start of the animation. */
-        this.delay = 0;
-        /** Determines the direction of playback as well as the behaviour when reaching the end of an iteration. Learn more about the CSS [`animation-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction) property. */
-        this.direction = "normal";
-        /** The number of milliseconds each iteration of the animation takes to complete. */
-        this.duration = 1000;
-        /** The easing function to use for the animation. This can be an easing function name like `easeInSine` or a custom easing function like `cubic-bezier(0.12, 0, 0.39, 0)`. */
-        this.easing = "ease-in-out";
-        /** The number of milliseconds to delay after the active period of an animation sequence. */
-        this.endDelay = 0;
-        /** Sets how the animation applies styles to its target before and after its execution. */
-        this.fill = "auto";
-        /** The number of iterations to run before the animation completes. */
-        this.iterations = Infinity;
-        /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-        this.iterationStart = 0;
-        /** Sets the animation’s playback rate. The default is `1`, which plays the animation at a normal speed. Setting this to `2`, for example, will double the animation’s speed. A negative value can be used to reverse the animation. This value can be changed without causing the animation to restart. */
-        this.playbackRate = 1;
-        this.handleAnimationFinish = () => {
-            this.play = false;
-            this.hasStarted = false;
-            emit(this, "pc-finish");
-        };
-        this.handleAnimationCancel = () => {
-            this.play = false;
-            this.hasStarted = false;
-            emit(this, "pc-cancel");
-        };
-    }
-    /** Gets and sets the current animation time. */
-    get currentTime() {
-        return this.animation?.currentTime ?? 0;
-    }
-    set currentTime(time) {
-        if (this.animation) {
-            this.animation.currentTime = time;
-        }
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.createAnimation();
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.destroyAnimation();
-    }
-    handleSlotChange() {
-        this.destroyAnimation();
-        this.createAnimation();
-    }
-    async createAnimation() {
-        const easing = easings[this.easing] ?? this.easing;
-        const keyframes = this.keyframes ??
-            index[this.name];
-        const slot = await this.defaultSlot;
-        const element = slot.assignedElements()[0];
-        if (!element || !keyframes) {
-            return false;
-        }
-        this.destroyAnimation();
-        this.animation = element.animate(keyframes, {
-            delay: this.delay,
-            direction: this.direction,
-            duration: this.duration,
-            easing,
-            endDelay: this.endDelay,
-            fill: this.fill,
-            iterationStart: this.iterationStart,
-            iterations: this.iterations,
-        });
-        this.animation.playbackRate = this.playbackRate;
-        this.animation.addEventListener("cancel", this.handleAnimationCancel);
-        this.animation.addEventListener("finish", this.handleAnimationFinish);
-        if (this.play) {
-            this.hasStarted = true;
-            emit(this, "pc-start");
-        }
-        else {
-            this.animation.pause();
-        }
-        return true;
-    }
-    destroyAnimation() {
-        if (this.animation) {
-            this.animation.cancel();
-            this.animation.removeEventListener("cancel", this.handleAnimationCancel);
-            this.animation.removeEventListener("finish", this.handleAnimationFinish);
-            this.hasStarted = false;
-        }
-    }
-    /** @internal This is an internal property. */
-    handleAnimationChange() {
-        if (!this.hasUpdated) {
-            return;
-        }
-        this.createAnimation();
-    }
-    /** @internal This is an internal property. */
-    handlePlayChange() {
-        if (this.animation) {
-            if (this.play && !this.hasStarted) {
-                this.hasStarted = true;
-                emit(this, "pc-start");
-            }
-            if (this.play) {
-                this.animation.play();
-            }
-            else {
-                this.animation.pause();
-            }
-            return true;
-        }
-        return false;
-    }
-    /** @internal This is an internal property. */
-    handlePlaybackRateChange() {
-        if (this.animation) {
-            this.animation.playbackRate = this.playbackRate;
-        }
-    }
-    /** Clears all keyframes caused by this animation and aborts its playback. */
-    cancel() {
-        this.animation?.cancel();
-    }
-    /** Sets the playback time to the end of the animation corresponding to the current playback direction. */
-    finish() {
-        this.animation?.finish();
-    }
-    render() {
-        return html `<slot @slotchange=${this.handleSlotChange}></slot>`;
-    }
-};
-PcAnimation.styles = styles;
-__decorate([
-    queryAsync("slot"),
-    __metadata("design:type", Promise)
-], PcAnimation.prototype, "defaultSlot", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "name", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "play", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "delay", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], PcAnimation.prototype, "direction", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "duration", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "easing", void 0);
-__decorate([
-    property({ attribute: "end-delay", type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "endDelay", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", String)
-], PcAnimation.prototype, "fill", void 0);
-__decorate([
-    property({ type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "iterations", void 0);
-__decorate([
-    property({ attribute: "iteration-start", type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "iterationStart", void 0);
-__decorate([
-    property({ attribute: false }),
-    __metadata("design:type", Array)
-], PcAnimation.prototype, "keyframes", void 0);
-__decorate([
-    property({ attribute: "playback-rate", type: Number }),
-    __metadata("design:type", Object)
-], PcAnimation.prototype, "playbackRate", void 0);
-__decorate([
-    watch([
-        "name",
-        "delay",
-        "direction",
-        "duration",
-        "easing",
-        "endDelay",
-        "fill",
-        "iterations",
-        "iterationsStart",
-        "keyframes",
-    ]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PcAnimation.prototype, "handleAnimationChange", null);
-__decorate([
-    watch("play"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PcAnimation.prototype, "handlePlayChange", null);
-__decorate([
-    watch("playbackRate"),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], PcAnimation.prototype, "handlePlaybackRateChange", null);
-PcAnimation = __decorate([
-    customElement("pc-animation")
-], PcAnimation);
-
-export { PcAnimation };

package/dist/components/animation/animation.styles.d.ts

@@ -1 +0,0 @@
-export declare const styles: import("lit").CSSResult;

package/dist/components/animation/animation.styles.js

@@ -1,9 +0,0 @@
-import { css } from 'lit';
-
-const styles = css `
-    :host {
-        display: contents;
-    }
-`;
-
-export { styles };

package/dist/components/avatar/avatar.component.d.ts

@@ -1,43 +0,0 @@
-import { LitElement } from "lit";
-import type { CSSResultGroup } from "lit";
-import { PcIcon } from "../icon/icon.js";
-/**
- * @summary Avatars are used to represent a person or object.
- * @status experimental
- * @since 0.1.0
- *
- * @dependency pc-icon
- *
- * @event pc-error — Emitted when the image couldn’t be loaded. This may be because of an invalid URL, a temporary network error or some other unknown cause.
- *
- * @slot icon — The default icon to use when no image or initials are present. Works best with `<pc-icon>`.
- *
- * @csspart base — The component’s base wrapper.
- * @csspart icon — The container that wraps the avatar’s icon.
- * @csspart initials — The container that wraps the avatar’s initials.
- * @csspart image — The avatar image. Only shown when the `image` attribute is set.
- *
- * @cssproperty --size — The size of the avatar.
- */
-export declare class PcAvatar extends LitElement {
-    static styles: CSSResultGroup;
-    /** @internal This is an internal property. */
-    static dependencies: {
-        "pc-icon": typeof PcIcon;
-    };
-    private hasError;
-    /** The image source to use for the avatar. */
-    image: string;
-    /** A label to use to describe the avatar to assistive devices. */
-    label: string;
-    /** Initials to use as a fallback when no image is available (1–2 characters recommended). */
-    initials: string;
-    /** Indicates how the browser should load the image. */
-    loading: "eager" | "lazy";
-    /** The shape of the avatar. */
-    shape: "circle" | "rounded" | "square";
-    /** @internal This is an internal property. */
-    handleImageChange(): void;
-    private handleImageLoadError;
-    render(): import("lit-html").TemplateResult<1>;
-}