placer-toolkit 0.5.1

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

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+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;
+    }
+`;