placer-toolkit 0.5.1 → 1.0.0-alpha.2

package/src/components/icon/icon.component.ts

@@ -1,239 +0,0 @@
-import { getIconLibrary, unwatchIcon, watchIcon } from "./library.js";
-import type { IconLibrary } from "./library.js";
-import { LitElement, html } from "lit";
-import type { CSSResultGroup, HTMLTemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { isTemplateResult } from "lit/directive-helpers.js";
-import { watch } from "../../internal/watch.js";
-import { emit } from "../../internal/emit.js";
-import { styles } from "./icon.styles.js";
-
-const CACHEABLE_ERROR = Symbol();
-const RETRYABLE_ERROR = Symbol();
-type SVGResult =
-    | HTMLTemplateResult
-    | SVGSVGElement
-    | typeof RETRYABLE_ERROR
-    | typeof CACHEABLE_ERROR;
-
-let parser: DOMParser;
-const iconCache = new Map<string, Promise<SVGResult>>();
-
-interface IconSource {
-    url?: string;
-    fromLibrary: boolean;
-}
-
-/**
- * @summary Icons are visual symbols that represent actions, objects or ideas.
- * @status experimental
- * @since 0.1.0
- *
- * @event pc-load — Emitted when the icon has loaded. When using `spriteSheet: true`, this will not emit.
- * @event pc-error — Emitted when the icon fails to load due to an error. When using `spriteSheet: true`, this will not emit.
- *
- * @csspart svg — The component’s internal SVG element.
- * @csspart use — The `<use>` element generated when using `spriteSheet: true`.
- *
- * @cssproperty --fa-primary-color — The primary colour for the primary layer in duotone icons.
- * @cssproperty --fa-secondary-color — The secondary colour for the secondary layer in duotone icons.
- * @cssproperty --fa-primary-opacity — The primary opacity for the primary layer in duotone icons.
- * @cssproperty --fa-secondary-opacity — The secondary opacity for the secondary layer in duotone icons.
- */
-@customElement("pc-icon")
-export class PcIcon extends LitElement {
-    static styles: CSSResultGroup = styles;
-
-    private initialRender = false;
-
-    private async resolveIcon(
-        url: string,
-        library?: IconLibrary,
-    ): Promise<SVGResult> {
-        let fileData: Response;
-
-        if (library?.spriteSheet) {
-            this.svg = html`
-                <svg part="svg">
-                    <use part="use" href=${url}></use>
-                </svg>
-            `;
-
-            return this.svg;
-        }
-
-        try {
-            fileData = await fetch(url, { mode: "cors" });
-            if (!fileData.ok) {
-                return fileData.status === 410
-                    ? CACHEABLE_ERROR
-                    : RETRYABLE_ERROR;
-            }
-        } catch {
-            return RETRYABLE_ERROR;
-        }
-
-        try {
-            const div = document.createElement("div");
-            div.innerHTML = await fileData.text();
-
-            const svg = div.firstElementChild;
-            if (svg?.tagName?.toLowerCase() !== "svg") {
-                return CACHEABLE_ERROR;
-            }
-
-            if (!parser) {
-                parser = new DOMParser();
-            }
-
-            const doc = parser.parseFromString(svg.outerHTML, "text/html");
-
-            const svgElement = doc.body.querySelector("svg");
-            if (!svgElement) {
-                return CACHEABLE_ERROR;
-            }
-
-            svgElement.part.add("svg");
-            return document.adoptNode(svgElement);
-        } catch {
-            return CACHEABLE_ERROR;
-        }
-    }
-
-    @state() private svg: SVGElement | HTMLTemplateResult | null = null;
-
-    /** The name of the icon to render. Available names depend on the icon library being used. */
-    @property({ reflect: true }) name?: string;
-
-    /** The icon style to use for the icon. If not configured, this only works for the default and Font Awesome Pro icon libraries. */
-    @property({ attribute: "icon-style", reflect: true }) iconStyle?: string;
-
-    /** Sets the width of the icon to 1.25em (20px) and centres it. It’s similar to the Font Awesome class `fa-fw`. */
-    @property({ attribute: "fixed-width", type: Boolean, reflect: true })
-    fixedWidth = false;
-
-    /** Swaps the opacity of duotone icons. Has no effect on icon libraries that aren’t the default one or Font Awesome Pro one. */
-    @property({ attribute: "swap-opacity", type: Boolean, reflect: true })
-    swapOpacity = false;
-
-    /** The external URL of an SVG file. Make sure you trust the content you are included, as it will be executed as code and can result in XSS attacks. */
-    @property() src?: string;
-
-    /** A label to include for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. */
-    @property() label = "";
-
-    /** The name of a registered icon library. */
-    @property({ reflect: true }) library = "default";
-
-    connectedCallback() {
-        super.connectedCallback();
-        watchIcon(this);
-    }
-
-    firstUpdated() {
-        this.initialRender = true;
-        this.setIcon();
-    }
-
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        unwatchIcon(this);
-    }
-
-    private getIconSource(): IconSource {
-        const library = getIconLibrary(this.library);
-        if (this.name && library) {
-            return {
-                url: library.resolver(this.name, this.iconStyle),
-                fromLibrary: true,
-            };
-        }
-
-        return {
-            url: this.src,
-            fromLibrary: false,
-        };
-    }
-
-    /** @internal This is an internal property. */
-    @watch("label")
-    handleLabelChange() {
-        const hasLabel =
-            typeof this.label === "string" && this.label.length > 0;
-
-        if (hasLabel) {
-            this.setAttribute("role", "img");
-            this.setAttribute("aria-label", this.label);
-            this.removeAttribute("aria-hidden");
-        } else {
-            this.removeAttribute("role");
-            this.removeAttribute("aria-label");
-            this.setAttribute("aria-hidden", "true");
-        }
-    }
-
-    /** @internal This is an internal property. */
-    @watch(["library", "iconStyle", "name", "src"])
-    async setIcon() {
-        const { url, fromLibrary } = this.getIconSource();
-        const library = fromLibrary ? getIconLibrary(this.library) : undefined;
-
-        if (!url) {
-            this.svg = null;
-            return;
-        }
-
-        let iconResolver = iconCache.get(url);
-        if (!iconResolver) {
-            iconResolver = this.resolveIcon(url, library);
-            iconCache.set(url, iconResolver);
-        }
-
-        if (!this.initialRender) {
-            return;
-        }
-
-        const svg = await iconResolver;
-
-        if (svg === RETRYABLE_ERROR) {
-            iconCache.delete(url);
-        }
-
-        if (url !== this.getIconSource().url) {
-            return;
-        }
-
-        if (isTemplateResult(svg)) {
-            this.svg = svg;
-
-            if (library) {
-                await this.updateComplete;
-
-                const shadowSVG =
-                    this.shadowRoot!.querySelector("[part='svg']")!;
-
-                if (typeof library.mutator === "function" && shadowSVG) {
-                    library.mutator(shadowSVG as SVGElement);
-                }
-            }
-
-            return;
-        }
-
-        switch (svg) {
-            case RETRYABLE_ERROR:
-            case CACHEABLE_ERROR:
-                this.svg = null;
-                emit(this, "pc-error");
-                break;
-            default:
-                this.svg = svg.cloneNode(true) as SVGElement;
-                library?.mutator?.(this.svg);
-                emit(this, "pc-load");
-        }
-    }
-
-    render() {
-        return this.svg;
-    }
-}

package/src/components/icon/icon.styles.ts

@@ -1,47 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        --fa-primary-color: currentColor;
-        --fa-secondary-color: currentColor;
-        --fa-primary-opacity: 1;
-        --fa-secondary-opacity: 0.4;
-
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: content-box !important;
-        width: 1em;
-        height: 1em;
-    }
-
-    :host([fixed-width]) {
-        width: 1.25em;
-    }
-
-    :host([swap-opacity]) .fa-primary {
-        opacity: var(--fa-secondary-opacity) !important;
-    }
-
-    :host([swap-opacity]) .fa-secondary {
-        opacity: var(--fa-primary-opacity) !important;
-    }
-
-    svg {
-        display: block;
-        width: 100%;
-        height: 100%;
-        fill: currentColor;
-        overflow: visible;
-    }
-
-    .fa-primary {
-        color: var(--fa-primary-color);
-        opacity: var(--fa-primary-opacity);
-    }
-
-    .fa-secondary {
-        color: var(--fa-secondary-color);
-        opacity: var(--fa-secondary-opacity);
-    }
-`;

package/src/components/icon/icon.ts

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

package/src/components/icon/library.default.ts

@@ -1,10 +0,0 @@
-import type { IconLibrary } from "./library.js";
-
-const library: IconLibrary = {
-    name: "default",
-    resolver: (name, iconStyle = "solid") => {
-        return `https://use.fontawesome.com/releases/v6.7.2/svgs/${iconStyle}/${name}.svg`;
-    },
-};
-
-export default library;

package/src/components/icon/library.system.ts

@@ -1,136 +0,0 @@
-import type { IconLibrary } from "./library.js";
-
-/* System icons are a separate library to ensure they’re always available,
-   regardless of how the default icon library is configured or whether its
-   icons resolve correctly.
-
-   All Placer Toolkit components must use the system library instead of the
-   default. For visual consistency, system icons are a subset of Font Awesome Free.
-
-   Note: Please keep the Font Awesome attribution comments and don’t remove them.
-   We don’t want to violate the Font Awesome Free licence. */
-const icons = {
-    "check": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            />
-        </svg>
-    `,
-    "chevron-down": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-            />
-        </svg>
-    `,
-    "chevron-left": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
-            />
-        </svg>
-    `,
-    "chevron-right": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"
-            />
-        </svg>
-    `,
-    // circle-xmark is in the Regular style
-    "circle-xmark": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"
-            />
-        </svg>
-    `,
-    // copy is in the Regular style
-    "copy": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M384 336l-192 0c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l140.1 0L400 115.9 400 320c0 8.8-7.2 16-16 16zM192 384l192 0c35.3 0 64-28.7 64-64l0-204.1c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1L192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-32-48 0 0 32c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256c0-8.8 7.2-16 16-16l32 0 0-48-32 0z"
-            />
-        </svg>
-    `,
-    // eye is in the Regular style
-    "eye": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"
-            />
-        </svg>
-    `,
-    // eye-slash is in the Regular style
-    "eye-slash": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm9.4 130.3C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5l-41.9-33zM192 256c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5z"
-            />
-        </svg>
-    `,
-    "grip-vertical": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"
-            />
-        </svg>
-    `,
-    "minus": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z"
-            />
-        </svg>
-    `,
-    "star": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"
-            />
-        </svg>
-    `,
-    "user": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"
-            />
-        </svg>
-    `,
-    "xmark": `
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-            <!--! Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
-            <path
-                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
-            />
-        </svg>
-    `,
-};
-
-const systemLibrary: IconLibrary = {
-    name: "system",
-    resolver: (name) => {
-        if (name in icons) {
-            return `data:image/svg+xml,${encodeURIComponent(
-                icons[name as keyof typeof icons],
-            )}`;
-        }
-
-        return "";
-    },
-};
-
-export default systemLibrary;

package/src/components/icon/library.ts

@@ -1,54 +0,0 @@
-import defaultLibrary from "./library.default.js";
-import systemLibrary from "./library.system.js";
-import type { PcIcon } from "./icon.js";
-
-export type IconLibraryResolver = (name: string, iconStyle?: string) => string;
-export type IconLibraryMutator = (svg: SVGElement) => void;
-
-export interface IconLibrary {
-    name: string;
-    resolver: IconLibraryResolver;
-    mutator?: IconLibraryMutator;
-    spriteSheet?: boolean;
-}
-
-let registry: IconLibrary[] = [defaultLibrary, systemLibrary];
-let watchedIcons: PcIcon[] = [];
-
-export function watchIcon(icon: PcIcon) {
-    watchedIcons.push(icon);
-}
-
-export function unwatchIcon(icon: PcIcon) {
-    watchedIcons = watchedIcons.filter((element) => element !== icon);
-}
-
-export function getIconLibrary(name?: string) {
-    return (
-        registry.find((library) => library.name === name) ||
-        registry.find((library) => library.name === "default")
-    );
-}
-
-export function registerIconLibrary(
-    name: string,
-    options: Omit<IconLibrary, "name">,
-) {
-    unregisterIconLibrary(name);
-    registry.push({
-        name,
-        resolver: options.resolver,
-        mutator: options.mutator,
-        spriteSheet: options.spriteSheet,
-    });
-
-    watchedIcons.forEach((icon) => {
-        if (icon.library === name) {
-            icon.setIcon();
-        }
-    });
-}
-
-export function unregisterIconLibrary(name: string) {
-    registry = registry.filter((library) => library.name !== name);
-}

package/src/components/icon-button/icon-button.component.ts

@@ -1,129 +0,0 @@
-import { LitElement, html } from "lit";
-import type { CSSResultGroup } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { ifDefined } from "lit/directives/if-defined.js";
-import { emit } from "../../internal/emit.js";
-import { PcIcon } from "../icon/icon.js";
-import { styles } from "./icon-button.styles.js";
-
-@customElement("pc-icon-button")
-export class PcIconButton extends LitElement {
-    static styles: CSSResultGroup = styles;
-    static dependencies = { "pc-icon": PcIcon };
-
-    @query(".icon-button") button!: HTMLButtonElement | HTMLLinkElement;
-
-    @state() private hasFocus = false;
-
-    @property({ type: Boolean, reflect: true }) disabled = false;
-
-    @property() download?: string;
-
-    @property() href?: string;
-
-    @property({ attribute: "icon-style" }) iconStyle?: string;
-
-    @property() label = "";
-
-    @property() library?: string;
-
-    @property() name?: string;
-
-    @property() src?: string;
-
-    @property() target?: "_blank" | "_parent" | "_self" | "_top";
-
-    private handleClick(event: MouseEvent) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-
-    private handleFocus() {
-        this.hasFocus = true;
-        emit(this, "pc-focus");
-    }
-
-    private handleBlur() {
-        this.hasFocus = false;
-        emit(this, "pc-blur");
-    }
-
-    click() {
-        this.button.click();
-    }
-
-    focus(options?: FocusOptions) {
-        this.button.focus(options);
-    }
-
-    blur() {
-        this.button.blur();
-    }
-
-    render() {
-        const isLink = this.href ? true : false;
-
-        return html`
-            ${isLink
-                ? html`
-                      <a
-                          part="base"
-                          class=${classMap({
-                              "icon-button": true,
-                              "icon-button-disabled": this.disabled === true,
-                              "icon-button-focused": this.hasFocus === true,
-                          })}
-                          href=${ifDefined(this.href)}
-                          target=${ifDefined(this.target)}
-                          download=${ifDefined(this.download)}
-                          rel=${ifDefined(
-                              this.target ? "noreferrer noopener" : undefined,
-                          )}
-                          aria-label=${this.label}
-                          tabindex=${this.disabled ? "-1" : "0"}
-                          @click=${this.handleClick}
-                          @focus=${this.handleFocus}
-                          @blur=${this.handleBlur}
-                      >
-                          <pc-icon
-                              class="icon"
-                              library=${ifDefined(this.library)}
-                              icon-style=${ifDefined(this.iconStyle)}
-                              name=${ifDefined(this.name)}
-                              src=${ifDefined(this.src)}
-                              aria-hidden="true"
-                          ></pc-icon>
-                      </a>
-                  `
-                : html`
-                      <button
-                          part="base"
-                          class=${classMap({
-                              "icon-button": true,
-                              "icon-button-disabled": this.disabled === true,
-                              "icon-button-focused": this.hasFocus === true,
-                          })}
-                          type="button"
-                          aria-label=${this.label}
-                          aria-disabled=${this.disabled ? "true" : "false"}
-                          tabindex=${this.disabled ? "-1" : "0"}
-                          @click=${this.handleClick}
-                          @focus=${this.handleFocus}
-                          @blur=${this.handleBlur}
-                      >
-                          <pc-icon
-                              class="icon"
-                              library=${ifDefined(this.library)}
-                              icon-style=${ifDefined(this.iconStyle)}
-                              name=${ifDefined(this.name)}
-                              src=${ifDefined(this.src)}
-                              aria-hidden="true"
-                          ></pc-icon>
-                      </button>
-                  `}
-        `;
-    }
-}

package/src/components/icon-button/icon-button.styles.ts

@@ -1,51 +0,0 @@
-import { css } from "lit";
-
-export const styles = css`
-    :host {
-        display: inline-flex;
-        color: var(--pc-color-neutral-600);
-    }
-
-    .icon-button {
-        display: flex;
-        align-items: center;
-        flex: 0 0 auto;
-        background: transparent;
-        border: none;
-        border-radius: var(--pc-border-radius-m);
-        font-size: inherit;
-        color: inherit;
-        padding: var(--pc-spacing-s);
-        cursor: pointer;
-        -webkit-appearance: none;
-        transition: all var(--pc-transition-fast) ease-in-out;
-    }
-
-    .icon-button:hover:not(.icon-button-disabled),
-    .icon-button:focus-visible:not(.icon-button-disabled) {
-        background-color: var(--pc-color-neutral-200);
-    }
-
-    .icon-button:active:not(.icon-button-disabled) {
-        background-color: var(--pc-color-neutral-100);
-        color: var(--pc-color-neutral-500);
-    }
-
-    .icon-button:focus {
-        outline: none;
-    }
-
-    .icon-button-disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-    }
-
-    .icon-button:focus-visible {
-        outline: var(--pc-focus-ring);
-        outline-offset: var(--pc-focus-ring-offset);
-    }
-
-    .icon {
-        pointer-events: none;
-    }
-`;