placer-toolkit 0.5.1

package/dist/components/copy-button/copy-button.d.ts

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

package/dist/components/copy-button/copy-button.js

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

package/dist/components/copy-button/copy-button.styles.d.ts

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

package/dist/components/copy-button/copy-button.styles.js

@@ -0,0 +1,61 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        --error-color: var(--pc-color-danger-600);
+        --success-color: var(--pc-color-success-600);
+        display: inline-block;
+    }
+
+    .copy-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;
+        transition: all var(--pc-transition-fast) ease-in-out;
+    }
+
+    .copy-button:hover:not([disabled]),
+    .copy-button:focus-visible:not([disabled]) {
+        background-color: var(--pc-color-neutral-200);
+    }
+
+    .copy-button:active:not([disabled]) {
+        background-color: var(--pc-color-neutral-100);
+    }
+
+    .copy-button-success .copy-button {
+        color: var(--success-color);
+    }
+
+    .copy-button-error .copy-button {
+        color: var(--error-color);
+    }
+
+    .copy-button:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: var(--pc-focus-ring-offset);
+    }
+
+    .copy-button[disabled] {
+        opacity: 0.6;
+        cursor: not-allowed !important;
+    }
+
+    slot {
+        display: inline-flex;
+    }
+
+    /* This is included since browsers don’t handle the hidden attribute well on slot elements */
+    slot[hidden] {
+        display: none !important;
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIcon } from "../icon/icon.js";
+export declare class PcDetails extends LitElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        "pc-icon": typeof PcIcon;
+    };
+    details: HTMLDetailsElement;
+    header: HTMLElement;
+    body: HTMLElement;
+    expandIconSlot: HTMLSlotElement;
+    detailsObserver: MutationObserver;
+    disabled: boolean;
+    open: boolean;
+    summary?: string;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private handleSummaryClick;
+    private handleSummaryKeyDown;
+    handleOpenChange(): Promise<void>;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/details/details.component.js

@@ -0,0 +1,243 @@
+import { __decorate, __metadata } from 'tslib';
+import { LitElement, html } from 'lit';
+import { query, property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../internal/animate.js';
+import { setDefaultAnimation, getAnimation } from '../../utilities/animation-registry.js';
+import { waitForEvent } from '../../internal/event.js';
+import { watch } from '../../internal/watch.js';
+import { emit } from '../../internal/emit.js';
+import { PcIcon } from '../icon/icon.component.js';
+import { styles } from './details.styles.js';
+
+setDefaultAnimation("details.show", {
+    keyframes: [
+        { height: "0", opacity: "0" },
+        { height: "auto", opacity: "1" },
+    ],
+    options: { duration: 300, easing: "cubic-bezier(0.33, 1, 0.68, 1)" },
+});
+setDefaultAnimation("details.hide", {
+    keyframes: [
+        { height: "auto", opacity: "1" },
+        { height: "0", opacity: "0" },
+    ],
+    options: { duration: 200, easing: "cubic-bezier(0.55, 0, 0.55, 0.2)" },
+});
+let PcDetails = class PcDetails extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.open = false;
+    }
+    firstUpdated() {
+        this.body.style.height = this.open ? "auto" : "0";
+        if (this.open) {
+            this.details.open = true;
+        }
+        this.detailsObserver = new MutationObserver((changes) => {
+            for (const change of changes) {
+                if (change.type === "attributes" &&
+                    change.attributeName === "open") {
+                    if (this.details.open) {
+                        this.show();
+                    }
+                    else {
+                        this.hide();
+                    }
+                }
+            }
+        });
+        this.detailsObserver.observe(this.details, { attributes: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detailsObserver?.disconnect();
+    }
+    handleSummaryClick(event) {
+        event.preventDefault();
+        if (!this.disabled) {
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+            this.header.focus();
+        }
+    }
+    handleSummaryKeyDown(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (this.open) {
+                this.hide();
+            }
+            else {
+                this.show();
+            }
+        }
+        if (event.key === "ArrowUp" || event.key === "ArrowLeft") {
+            event.preventDefault();
+            this.hide();
+        }
+        if (event.key === "ArrowDown" || event.key === "ArrowRight") {
+            event.preventDefault();
+            this.show();
+        }
+    }
+    async handleOpenChange() {
+        if (this.open) {
+            this.details.open = true;
+            const pcShowEvent = emit(this, "pc-show", {
+                cancelable: true,
+            });
+            if (pcShowEvent.defaultPrevented) {
+                this.open = false;
+                this.details.open = false;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, "details.show", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.style.height = "auto";
+            emit(this, "pc-after-show");
+        }
+        else {
+            const pcHide = emit(this, "pc-hide", {
+                cancelable: true,
+            });
+            if (pcHide.defaultPrevented) {
+                this.details.open = true;
+                this.open = true;
+                return;
+            }
+            await stopAnimations(this.body);
+            const { keyframes, options } = getAnimation(this, "details.hide", {
+                dir: document.documentElement.dir || "ltr",
+            });
+            await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+            this.body.style.height = "auto";
+            this.details.open = false;
+            emit(this, "pc-after-hide");
+        }
+    }
+    async show() {
+        if (this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = true;
+        return waitForEvent(this, "pc-after-show");
+    }
+    async hide() {
+        if (!this.open || this.disabled) {
+            return undefined;
+        }
+        this.open = false;
+        return waitForEvent(this, "pc-after-hide");
+    }
+    render() {
+        const isRTL = document.documentElement.dir === "rtl" ||
+            (!document.documentElement.dir &&
+                getComputedStyle(document.documentElement).direction === "rtl");
+        return html `
+            <details
+                part="base"
+                class=${classMap({
+            "details": true,
+            "details-open": this.open === true,
+            "details-disabled": this.disabled === true,
+            "details-rtl": isRTL === true,
+        })}
+            >
+                <summary
+                    part="header"
+                    class="details-header"
+                    id="header"
+                    role="button"
+                    aria-expanded=${this.open ? "true" : "false"}
+                    aria-controls="content"
+                    aria-disabled=${this.disabled ? "true" : "false"}
+                    tabindex=${this.disabled ? "-1" : "0"}
+                    @click=${this.handleSummaryClick}
+                    @keydown=${this.handleSummaryKeyDown}
+                >
+                    <slot class="details-summary" part="summary" name="summary">
+                        ${this.summary}
+                    </slot>
+
+                    <span part="summary-icon" class="summary-icon">
+                        <slot name="expand-icon">
+                            <pc-icon
+                                library="system"
+                                icon-style="solid"
+                                name=${isRTL ? "chevron-left" : "chevron-right"}
+                            ></pc-icon>
+                        </slot>
+                        <slot name="collapse-icon">
+                            <pc-icon
+                                library="system"
+                                icon-style="solid"
+                                name=${isRTL ? "chevron-left" : "chevron-right"}
+                            ></pc-icon>
+                        </slot>
+                    </span>
+                </summary>
+
+                <div
+                    class="details-body"
+                    role="region"
+                    aria-labelledby="header"
+                >
+                    <slot
+                        class="details-content"
+                        part="content"
+                        id="content"
+                    ></slot>
+                </div>
+            </details>
+        `;
+    }
+};
+PcDetails.styles = styles;
+PcDetails.dependencies = { "pc-icon": PcIcon };
+__decorate([
+    query(".details"),
+    __metadata("design:type", HTMLDetailsElement)
+], PcDetails.prototype, "details", void 0);
+__decorate([
+    query(".details-header"),
+    __metadata("design:type", HTMLElement)
+], PcDetails.prototype, "header", void 0);
+__decorate([
+    query(".details-body"),
+    __metadata("design:type", HTMLElement)
+], PcDetails.prototype, "body", void 0);
+__decorate([
+    query(".details-expand-icon-slot"),
+    __metadata("design:type", HTMLSlotElement)
+], PcDetails.prototype, "expandIconSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcDetails.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], PcDetails.prototype, "open", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], PcDetails.prototype, "summary", void 0);
+__decorate([
+    watch("open", { waitUntilFirstUpdate: true }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], PcDetails.prototype, "handleOpenChange", null);
+PcDetails = __decorate([
+    customElement("pc-details")
+], PcDetails);
+
+export { PcDetails };

package/dist/components/details/details.d.ts

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

package/dist/components/details/details.js

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

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

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

package/dist/components/details/details.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+
+const styles = css `
+    :host {
+        display: block;
+    }
+
+    .details {
+        border: 1px solid var(--pc-color-neutral-200);
+        border-radius: var(--pc-border-radius-l);
+        overflow-anchor: none;
+    }
+
+    .details-disabled {
+        opacity: 0.6;
+    }
+
+    .details-header {
+        display: flex;
+        align-items: center;
+        border-radius: inherit;
+        padding: var(--pc-spacing-m);
+        user-select: none;
+        -webkit-user-select: none;
+        cursor: pointer;
+    }
+
+    .details-header::-webkit-details-marker {
+        display: none;
+    }
+
+    .details-header:focus {
+        outline: none;
+    }
+
+    .details-header:focus-visible {
+        outline: var(--pc-focus-ring);
+        outline-offset: calc(var(--pc-focus-ring-offset) + 1px);
+    }
+
+    .details-disabled .details-header {
+        cursor: not-allowed;
+    }
+
+    .details-disabled .details-header:focus-visible {
+        outline: none;
+        box-shadow: none;
+    }
+
+    .details-summary {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+    }
+
+    .summary-icon {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        transition: rotate var(--pc-transition-fast) ease-in-out;
+    }
+
+    .details-open .summary-icon {
+        rotate: 90deg;
+    }
+
+    .details-open.details-rtl .summary-icon {
+        rotate: -90deg;
+    }
+
+    .details-open slot[name="expand-icon"],
+    .details:not(.details-open) slot[name="collapse-icon"] {
+        display: none;
+    }
+
+    .details-body {
+        overflow: hidden;
+    }
+
+    .details-content {
+        display: block;
+        padding: var(--pc-spacing-m);
+    }
+`;
+
+export { styles };

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

@@ -0,0 +1,84 @@
+import { LitElement } from "lit";
+import type { CSSResultGroup } from "lit";
+import { PcIconButton } from "../icon-button/icon-button.js";
+import { Modal } from "../../internal/modal.js";
+/**
+ * @summary Dialogs, sometimes called “modals”, appear above the page and draw the user’s immediate attention.
+ * @status experimental
+ * @since 0.5.1
+ *
+ * @dependency pc-icon
+ * @dependency pc-icon-button
+ *
+ * @slot — The dialog’s main content.
+ * @slot label — The dialog’s label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions — Optional actions to add to the header. Works best with `<pc-icon-button>`.
+ * @slot footer — The dialog’s footer, usually one or more buttons representing various options.
+ *
+ * @event pc-show — Emitted when the dialog opens.
+ * @event pc-after-show — Emitted after the dialog opens and all animations are complete.
+ * @event pc-hide — Emitted when the dialog closes.
+ * @event pc-after-hide — Emitted after the dialog closes and all animations are complete.
+ * @event pc-initial-focus — Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: "close-button" | "keyboard" | "overlay" }} pc-request-close — Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay or pressing <kbd aria-label="Escape">Esc</kbd>. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behaviour such as data loss.
+ *
+ * @csspart base — The component’s base wrapper.
+ * @csspart overlay — The overlay that covers the screen behind the dialog.
+ * @csspart panel — The dialog’s panel (where the dialog and its content are rendered).
+ * @csspart header — The dialog’s header. This element wraps the title and header actions.
+ * @csspart header-actions — Optional actions to add to the header. Works best with `<pc-icon-button>`.
+ * @csspart title — The dialog’s title.
+ * @csspart close-button — The close button. Is a `<pc-icon-button>` under the hood.
+ * @csspart close-button__base — The close button’s `base` part.
+ * @csspart body — The dialog’s body.
+ * @csspart footer — The dialog’s footer.
+ *
+ * @cssproperty --width — The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing — The amount of spacing to use for the header.
+ * @cssproperty --body-spacing — The amount of padding to use for the body.
+ * @cssproperty --footer-spacing — The amount of padding to use for the footer.
+ *
+ * @animation dialog.show — The animation to use when showing the dialog.
+ * @animation dialog.hide — The animation to use when hiding the dialog.
+ * @animation dialog.denyClose — The animation to use when a request to close the dialog is denied.
+ * @animation dialog.overlay.show — The animation to use when showing the dialog’s overlay.
+ * @animation dialog.overlay.hide — The animation to use when hiding the dialog’s overlay.
+ *
+ * @property modal — Exposes the internal modal utility that controls focus trapping. To temporarily disable focus trapping and allow third‐party modals spawned from an active Placer modal, call `modal.activateExternal()` when the third‐party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Placer Toolkit’s focus trapping.
+ */
+export declare class PcDialog extends LitElement {
+    static styles: CSSResultGroup;
+    /** @internal This is an internal property. */
+    static dependencies: {
+        "pc-icon-button": typeof PcIconButton;
+    };
+    private readonly hasSlotController;
+    private originalTrigger;
+    modal: Modal;
+    private closeWatcher;
+    /** @internal This is an internal property. */
+    dialog: HTMLElement;
+    /** @internal This is an internal property. */
+    panel: HTMLElement;
+    /** @internal This is an internal property. */
+    overlay: HTMLElement;
+    /** Indicates whether or not the dialog is open. You can toggle this attribute to show and hide the dialog, or you can use the `show()` and `hide()` methods and this attribute will reflect the dialog’s open state. */
+    open: boolean;
+    /** The dialog’s label displayed in the header. You should always include a relevant label even when using the `no-header` attribute, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead. */
+    label: string;
+    /** Removes the header. This will also remove the default close button, so please ensure you provide an easy, accessible way for users to dismiss the dialog. */
+    noHeader: boolean;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private requestClose;
+    private addOpenListeners;
+    private removeOpenListeners;
+    private handleDocumentKeyDown;
+    /** @internal This is an internal property. */
+    handleOpenChange(): Promise<void>;
+    /** Shows the dialog. */
+    show(): Promise<void>;
+    /** Hides the dialog. */
+    hide(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+}