placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/src/components/animation/animation.component.ts

@@ -1,224 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property, queryAsync } from "lit/decorators.js";
-import { watch } from "../../internal/watch.js";
-import { emit } from "../../internal/emit.js";
-import { animations } from "./animations.js";
-import { styles } from "./animation.styles.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.
- */
-@customElement("pc-animation")
-export class PcAnimation extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    private animation?: Animation;
-    private hasStarted = false;
-
-    /** @internal This is an internal property. */
-    @queryAsync("slot") defaultSlot!: Promise<HTMLSlotElement>;
-
-    /** The name of the built‐in animation to use. For custom animations, use the `keyframes` prop. */
-    @property() 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. */
-    @property({ type: Boolean, reflect: true }) play = false;
-
-    /** The number of milliseconds to delay the start of the animation. */
-    @property({ type: Number }) 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. */
-    @property() direction: PlaybackDirection = "normal";
-
-    /** The number of milliseconds each iteration of the animation takes to complete. */
-    @property({ type: Number }) 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)`. */
-    @property() easing = "ease-in-out";
-
-    /** The number of milliseconds to delay after the active period of an animation sequence. */
-    @property({ attribute: "end-delay", type: Number }) endDelay = 0;
-
-    /** Sets how the animation applies styles to its target before and after its execution. */
-    @property() fill: FillMode = "auto";
-
-    /** The number of iterations to run before the animation completes. */
-    @property({ type: Number }) iterations = Infinity;
-
-    /** The offset at which to start the animation, usually between 0 (start) and 1 (end). */
-    @property({ attribute: "iteration-start", type: Number })
-    iterationStart = 0;
-
-    /** The keyframes to use for the animation. If this is set, the `name` attribute and property will be ignored. */
-    @property({ attribute: false }) 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. */
-    @property({ attribute: "playback-rate", type: Number }) playbackRate = 1;
-
-    /** Gets and sets the current animation time. */
-    get currentTime(): CSSNumberish {
-        return this.animation?.currentTime ?? 0;
-    }
-
-    set currentTime(time: number) {
-        if (this.animation) {
-            this.animation.currentTime = time;
-        }
-    }
-
-    connectedCallback() {
-        super.connectedCallback();
-        this.createAnimation();
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.destroyAnimation();
-    }
-
-    private handleAnimationFinish = () => {
-        this.play = false;
-        this.hasStarted = false;
-        emit(this, "pc-finish");
-    };
-
-    private handleAnimationCancel = () => {
-        this.play = false;
-        this.hasStarted = false;
-        emit(this, "pc-cancel");
-    };
-
-    private handleSlotChange() {
-        this.destroyAnimation();
-        this.createAnimation();
-    }
-
-    private async createAnimation() {
-        const easing =
-            animations.easings[
-                this.easing as keyof typeof animations.easings
-            ] ?? this.easing;
-        const keyframes =
-            this.keyframes ??
-            (animations as unknown as Partial<Record<string, Keyframe[]>>)[
-                this.name
-            ];
-        const slot = await this.defaultSlot;
-        const element = slot.assignedElements()[0] as HTMLElement | undefined;
-
-        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;
-    }
-
-    private 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. */
-    @watch([
-        "name",
-        "delay",
-        "direction",
-        "duration",
-        "easing",
-        "endDelay",
-        "fill",
-        "iterations",
-        "iterationsStart",
-        "keyframes",
-    ])
-    handleAnimationChange() {
-        if (!this.hasUpdated) {
-            return;
-        }
-
-        this.createAnimation();
-    }
-
-    /** @internal This is an internal property. */
-    @watch("play")
-    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. */
-    @watch("playbackRate")
-    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>`;
-    }
-}

package/src/components/animation/animation.styles.ts

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

package/src/components/animation/animation.ts

@@ -1,10 +0,0 @@
-import { PcAnimation } from "./animation.component.js";
-
-export * from "./animation.component.js";
-export default PcAnimation;
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pc-animation": PcAnimation;
-    }
-}

package/src/components/animation/animations.ts

@@ -1,13 +0,0 @@
-import * as animations from "../../animations/index.js";
-
-export { animations };
-
-export function getAnimationNames() {
-    return Object.entries(animations)
-        .filter(([name]) => name !== "easings")
-        .map(([name]) => name);
-}
-
-export function getEasingNames() {
-    return Object.entries(animations.easings).map(([name]) => name);
-}

package/src/components/avatar/avatar.component.ts

@@ -1,113 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { watch } from "../../internal/watch.js";
-import { emit } from "../../internal/emit.js";
-import { PcIcon } from "../icon/icon.js";
-import { styles } from "./avatar.styles.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.
- */
-@customElement("pc-avatar")
-export class PcAvatar extends LitElement {
-    static styles: CSSResultGroup = styles;
-    /** @internal This is an internal property. */
-    static dependencies = { "pc-icon": PcIcon };
-
-    @state() private hasError = false;
-
-    /** The image source to use for the avatar. */
-    @property() image = "";
-
-    /** A label to use to describe the avatar to assistive devices. */
-    @property() label = "";
-
-    /** Initials to use as a fallback when no image is available (1–2 characters recommended). */
-    @property() initials = "";
-
-    /** Indicates how the browser should load the image. */
-    @property() loading: "eager" | "lazy" = "eager";
-
-    /** The shape of the avatar. */
-    @property({ reflect: true }) shape: "circle" | "rounded" | "square" =
-        "circle";
-
-    /** @internal This is an internal property. */
-    @watch("image")
-    handleImageChange() {
-        this.hasError = false;
-    }
-
-    private handleImageLoadError() {
-        this.hasError = true;
-        emit(this, "pc-error");
-    }
-
-    render() {
-        const avatarWithImage = html`
-            <img
-                class="image"
-                part="image"
-                src=${this.image}
-                loading=${this.loading}
-                alt=""
-                @error=${this.handleImageLoadError}
-            />
-        `;
-
-        let avatarWithoutImage = html``;
-
-        if (this.initials) {
-            avatarWithoutImage = html`
-                <div class="initials">${this.initials}</div>
-            `;
-        } else {
-            avatarWithoutImage = html`
-                <div class="icon" part="icon" aria-hidden="true">
-                    <slot name="icon">
-                        <pc-icon
-                            library="system"
-                            icon-style="solid"
-                            name="user"
-                        ></pc-icon>
-                    </slot>
-                </div>
-            `;
-        }
-
-        return html`
-            <div
-                part="base"
-                class=${classMap({
-                    avatar: true,
-                    circle: this.shape === "circle",
-                    rounded: this.shape === "rounded",
-                    square: this.shape === "square",
-                })}
-                role="img"
-                aria-label=${this.label}
-            >
-                ${this.image && !this.hasError
-                    ? avatarWithImage
-                    : avatarWithoutImage}
-            </div>
-        `;
-    }
-}

package/src/components/avatar/avatar.styles.ts

@@ -1,66 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        --size: 3rem;
-        display: inline-block;
-    }
-
-    .avatar {
-        display: inline-flex;
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        width: var(--size);
-        height: var(--size);
-        background-color: var(--pc-color-neutral-500);
-        color: var(--pc-color-neutral-0);
-        font-family: var(--pc-font-sans);
-        font-size: calc(var(--size) * 0.4);
-        font-weight: var(--pc-font-weight-bold);
-        user-select: none;
-        -webkit-user-select: none;
-        vertical-align: middle;
-        transition: all var(--pc-transition-fast) ease-in-out;
-    }
-
-    .circle,
-    .circle .image {
-        border-radius: var(--pc-border-radius-circle);
-    }
-
-    .rounded,
-    .rounded .image {
-        border-radius: var(--pc-border-radius-m);
-    }
-
-    .square {
-        border-radius: 0;
-    }
-
-    .icon {
-        display: flex;
-        position: absolute;
-        align-items: center;
-        justify-content: center;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-
-    .initials {
-        line-height: 1;
-        text-transform: uppercase;
-    }
-
-    .image {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        overflow: hidden;
-    }
-`;

package/src/components/avatar/avatar.ts

@@ -1,10 +0,0 @@
-import { PcAvatar } from "./avatar.component.js";
-
-export * from "./avatar.component.js";
-export default PcAvatar;
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pc-avatar": PcAvatar;
-    }
-}

package/src/components/badge/badge.component.ts

@@ -1,54 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { styles } from "./badge.styles.js";
-
-/**
- * @summary Badges are used to draw attention and display statuses or counts.
- * @status experimental
- * @since 0.1.0
- *
- * @slot — The badge’s content.
- *
- * @csspart base — The component’s base wrapper.
- */
-@customElement("pc-badge")
-export class PcBadge extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    /** The badge’s appearance. */
-    @property({ reflect: true }) appearance:
-        | "primary"
-        | "success"
-        | "neutral"
-        | "warning"
-        | "danger" = "primary";
-
-    /** Gives the badge a rounded rectangle shape. */
-    @property({ type: Boolean, reflect: true }) rounded = false;
-
-    /** Makes the badge pulsate to draw attention. */
-    @property({ type: Boolean, reflect: true }) pulse = false;
-
-    render() {
-        return html`
-            <span
-                part="base"
-                class=${classMap({
-                    "badge": true,
-                    "badge-primary": this.appearance === "primary",
-                    "badge-success": this.appearance === "success",
-                    "badge-neutral": this.appearance === "neutral",
-                    "badge-warning": this.appearance === "warning",
-                    "badge-danger": this.appearance === "danger",
-                    "badge-rounded": this.rounded === true,
-                    "badge-pulse": this.pulse === true,
-                })}
-                role="status"
-            >
-                <slot></slot>
-            </span>
-        `;
-    }
-}

package/src/components/badge/badge.styles.ts

@@ -1,74 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        display: inline-flex;
-    }
-
-    .badge {
-        padding: var(--pc-spacing-xxxs) 0.625rem;
-        font-family: var(--pc-font-sans);
-        font-size: var(--pc-font-size-xs);
-        font-weight: var(--pc-font-weight-bold);
-        color: var(--pc-color-neutral-0);
-        border: 1px solid transparent;
-        border-radius: var(--pc-border-radius-pill);
-        user-select: none;
-        -webkit-user-select: none;
-        cursor: inherit;
-        transition: all var(--pc-transition-fast) ease-in-out;
-    }
-
-    .badge,
-    .badge-primary {
-        --pulse-color: var(--pc-color-primary-600);
-        background-color: var(--pc-color-primary-500);
-        border: 1px solid var(--pc-color-primary-400);
-    }
-
-    .badge.badge-success {
-        --pulse-color: var(--pc-color-success-600);
-        background-color: var(--pc-color-success-500);
-        border: 1px solid var(--pc-color-success-400);
-    }
-
-    .badge.badge-neutral {
-        --pulse-color: var(--pc-color-neutral-600);
-        background-color: var(--pc-color-neutral-500);
-        border: 1px solid var(--pc-color-neutral-400);
-    }
-
-    .badge.badge-warning {
-        --pulse-color: var(--pc-color-warning-600);
-        background-color: var(--pc-color-warning-500);
-        border: 1px solid var(--pc-color-warning-400);
-    }
-
-    .badge.badge-danger {
-        --pulse-color: var(--pc-color-danger-600);
-        background-color: var(--pc-color-danger-500);
-        border: 1px solid var(--pc-color-danger-400);
-    }
-
-    .badge-rounded {
-        border-radius: var(--pc-border-radius-s);
-    }
-
-    .badge-pulse {
-        animation: pulse 1.5s cubic-bezier(0, 0.55, 0.45, 1) infinite;
-    }
-
-    @keyframes pulse {
-        0% {
-            box-shadow: 0 0 0 0 var(--pulse-color);
-        }
-
-        70% {
-            box-shadow: 0 0 0 0.5rem transparent;
-        }
-
-        100% {
-            box-shadow: 0 0 0 0 transparent;
-        }
-    }
-`;

package/src/components/badge/badge.ts

@@ -1,10 +0,0 @@
-import { PcBadge } from "./badge.component.js";
-
-export * from "./badge.component.js";
-export default PcBadge;
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "pc-badge": PcBadge;
-    }
-}