placer-toolkit 0.5.1

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

@@ -0,0 +1,47 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup, HTMLTemplateResult } from "lit";
+/**
+ * @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.
+ */
+export declare class PcIcon extends LitElement {
+    static styles: CSSResultGroup;
+    private initialRender;
+    private resolveIcon;
+    private svg;
+    /** The name of the icon to render. Available names depend on the icon library being used. */
+    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. */
+    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`. */
+    fixedWidth: boolean;
+    /** Swaps the opacity of duotone icons. Has no effect on icon libraries that aren’t the default one or Font Awesome Pro one. */
+    swapOpacity: boolean;
+    /** 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. */
+    src?: string;
+    /** A label to include for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. */
+    label: string;
+    /** The name of a registered icon library. */
+    library: string;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private getIconSource;
+    /** @internal This is an internal property. */
+    handleLabelChange(): void;
+    /** @internal This is an internal property. */
+    setIcon(): Promise<void>;
+    render(): SVGElement | HTMLTemplateResult | null;
+}

package/dist/components/icon/icon.component.js

@@ -0,0 +1,225 @@
+import { __decorate, __metadata } from 'tslib';
+import { unwatchIcon, getIconLibrary, watchIcon } from './library.js';
+import { LitElement, html } from 'lit';
+import { state, property, customElement } 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();
+let parser;
+const iconCache = new Map();
+/**
+ * @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.
+ */
+let PcIcon = class PcIcon extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.initialRender = false;
+        this.svg = null;
+        /** Sets the width of the icon to 1.25em (20px) and centres it. It’s similar to the Font Awesome class `fa-fw`. */
+        this.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. */
+        this.swapOpacity = false;
+        /** A label to include for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. */
+        this.label = "";
+        /** The name of a registered icon library. */
+        this.library = "default";
+    }
+    async resolveIcon(url, library) {
+        let fileData;
+        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;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        watchIcon(this);
+    }
+    firstUpdated() {
+        this.initialRender = true;
+        this.setIcon();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        unwatchIcon(this);
+    }
+    getIconSource() {
+        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. */
+    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. */
+    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);
+                }
+            }
+            return;
+        }
+        switch (svg) {
+            case RETRYABLE_ERROR:
+            case CACHEABLE_ERROR:
+                this.svg = null;
+                emit(this, "pc-error");
+                break;
+            default:
+                this.svg = svg.cloneNode(true);
+                library?.mutator?.(this.svg);
+                emit(this, "pc-load");
+        }
+    }
+    render() {
+        return this.svg;
+    }
+};
+PcIcon.styles = styles;
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], PcIcon.prototype, "svg", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], PcIcon.prototype, "name", void 0);
+__decorate([
+    property({ attribute: "icon-style", reflect: true }),
+    __metadata("design:type", String)
+], PcIcon.prototype, "iconStyle", void 0);
+__decorate([
+    property({ attribute: "fixed-width", type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcIcon.prototype, "fixedWidth", void 0);
+__decorate([
+    property({ attribute: "swap-opacity", type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcIcon.prototype, "swapOpacity", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcIcon.prototype, "src", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], PcIcon.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], PcIcon.prototype, "library", void 0);
+__decorate([
+    watch("label"),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], PcIcon.prototype, "handleLabelChange", null);
+__decorate([
+    watch(["library", "iconStyle", "name", "src"]),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcIcon.prototype, "setIcon", null);
+PcIcon = __decorate([
+    customElement("pc-icon")
+], PcIcon);
+
+export { PcIcon };

package/dist/components/icon/icon.d.ts

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

package/dist/components/icon/icon.js

@@ -0,0 +1,5 @@
+import { PcIcon as PcIcon$1 } from './icon.component.js';
+
+var PcIcon = PcIcon$1;
+
+export { PcIcon$1 as PcIcon, PcIcon as default };

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

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

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,49 @@
+import { css } from 'lit';
+
+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);
+    }
+`;
+
+export { styles };

package/dist/components/icon/library.d.ts

@@ -0,0 +1,14 @@
+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;
+}
+export declare function watchIcon(icon: PcIcon): void;
+export declare function unwatchIcon(icon: PcIcon): void;
+export declare function getIconLibrary(name?: string): IconLibrary | undefined;
+export declare function registerIconLibrary(name: string, options: Omit<IconLibrary, "name">): void;
+export declare function unregisterIconLibrary(name: string): void;

package/dist/components/icon/library.default.d.ts

@@ -0,0 +1,3 @@
+import type { IconLibrary } from "./library.js";
+declare const library: IconLibrary;
+export default library;

package/dist/components/icon/library.default.js

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

package/dist/components/icon/library.js

@@ -0,0 +1,34 @@
+import library from './library.default.js';
+import systemLibrary from './library.system.js';
+
+let registry = [library, systemLibrary];
+let watchedIcons = [];
+function watchIcon(icon) {
+    watchedIcons.push(icon);
+}
+function unwatchIcon(icon) {
+    watchedIcons = watchedIcons.filter((element) => element !== icon);
+}
+function getIconLibrary(name) {
+    return (registry.find((library) => library.name === name) ||
+        registry.find((library) => library.name === "default"));
+}
+function registerIconLibrary(name, options) {
+    unregisterIconLibrary(name);
+    registry.push({
+        name,
+        resolver: options.resolver,
+        mutator: options.mutator,
+        spriteSheet: options.spriteSheet,
+    });
+    watchedIcons.forEach((icon) => {
+        if (icon.library === name) {
+            icon.setIcon();
+        }
+    });
+}
+function unregisterIconLibrary(name) {
+    registry = registry.filter((library) => library.name !== name);
+}
+
+export { getIconLibrary, registerIconLibrary, unregisterIconLibrary, unwatchIcon, watchIcon };

package/dist/components/icon/library.system.d.ts

@@ -0,0 +1,3 @@
+import type { IconLibrary } from "./library.js";
+declare const systemLibrary: IconLibrary;
+export default systemLibrary;

package/dist/components/icon/library.system.js

@@ -0,0 +1,130 @@
+/* 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 = {
+    name: "system",
+    resolver: (name) => {
+        if (name in icons) {
+            return `data:image/svg+xml,${encodeURIComponent(icons[name])}`;
+        }
+        return "";
+    },
+};
+
+export { systemLibrary as default };

package/dist/components/icon-button/icon-button.component.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.js";
+export declare class PcIconButton extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    button: HTMLButtonElement | HTMLLinkElement;
+    private hasFocus;
+    disabled: boolean;
+    download?: string;
+    href?: string;
+    iconStyle?: string;
+    label: string;
+    library?: string;
+    name?: string;
+    src?: string;
+    target?: "_blank" | "_parent" | "_self" | "_top";
+    private handleClick;
+    private handleFocus;
+    private handleBlur;
+    click(): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}