@verbb/plugin-kit-web 2.0.22 → 2.0.23

package/dist/chunks/pk-state-panel-DPP7t-er.js

@@ -0,0 +1,603 @@
+import { t as icons_exports } from "./icons-B8siZLOe.js";
+import { a as query, i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
+import { a as PkCopyEvent, i as PkCopyErrorEvent, n as copyToClipboard } from "./pk-copy-button-KegSx46o.js";
+import { n as renderIconHtml } from "./render-BKGW1a68.js";
+import { t as HasSlotController } from "./has-slot-9zjTXvea.js";
+import "../components/icon/pk-icon.js";
+import { css, html, nothing } from "lit";
+import { unsafeSVG } from "lit/directives/unsafe-svg.js";
+//#region src/components/state-panel/pk-state-panel.styles.ts
+var pkStatePanelStyles = css`
+    @layer pk-component {
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            box-sizing: border-box;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            min-height: var(--pk-state-panel-min-height, var(--_pk-state-panel-min-height));
+            padding: var(--pk-state-panel-padding, var(--_pk-state-panel-padding));
+            color: var(--pk-state-panel-body-color, var(--pk-color-gray-500));
+            font-family: var(--pk-font-family);
+            font-size: var(--_pk-state-panel-font-size);
+            line-height: var(--pk-line-height);
+            text-align: center;
+            --pk-state-panel-accent: var(--pk-color-slate-500);
+            --pk-state-panel-icon-background: color-mix(
+                in srgb,
+                var(--pk-color-slate-200) 55%,
+                transparent
+            );
+            --_pk-state-panel-font-size: var(--pk-font-size-sm);
+            --_pk-state-panel-title-size: var(--pk-font-size-base);
+            --_pk-state-panel-content-width: 32rem;
+            --_pk-state-panel-min-height: 11rem;
+            --_pk-state-panel-padding: 2rem 0.875rem;
+            --_pk-state-panel-icon-shell-size: 2.125rem;
+            --_pk-state-panel-icon-size: 1.0625rem;
+            --_pk-state-panel-icon-radius: var(--pk-radius-lg);
+            --_pk-state-panel-icon-margin-bottom: 0.625rem;
+            --_pk-state-panel-body-margin-top: 0.375rem;
+            --_pk-state-panel-details-margin-top: 0.75rem;
+            --_pk-state-panel-details-font-size: 0.75rem;
+            --_pk-state-panel-details-content-margin-top: 0.625rem;
+            --_pk-state-panel-details-max-height: 14rem;
+            --_pk-state-panel-details-pre-padding: 0.625rem;
+            --_pk-state-panel-details-pre-radius: var(--pk-radius-md);
+            --_pk-state-panel-details-pre-font-size: 0.6875rem;
+            --_pk-state-panel-copy-button-size: var(--pk-btn-height-xs);
+            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-xs);
+            --_pk-state-panel-copy-inset: 0.375rem;
+            --_pk-state-panel-copy-radius: var(--pk-radius-md);
+            --_pk-state-panel-copy-status-size: 0.6875rem;
+            --_pk-state-panel-actions-gap: 0.4375rem;
+            --_pk-state-panel-actions-margin-top: 1rem;
+            --_pk-state-panel-action-height: var(--pk-btn-height-sm);
+            --_pk-state-panel-action-font: var(--pk-btn-font-sm);
+            --_pk-state-panel-action-padding-inline: var(--pk-btn-padding-inline-sm);
+            --_pk-state-panel-action-icon-size: var(--pk-btn-icon-size-sm);
+            --_pk-state-panel-action-icon-gap: var(--pk-btn-icon-gap-sm);
+            --_pk-state-panel-action-caret-size: var(--pk-btn-caret-size-sm);
+            --_pk-state-panel-action-radius: var(--pk-btn-radius-sm);
+        }
+
+        :host([size='sm']) {
+            --_pk-state-panel-font-size: var(--pk-btn-font-xs);
+            --_pk-state-panel-title-size: var(--pk-font-size-sm);
+            --_pk-state-panel-content-width: 28rem;
+            --_pk-state-panel-min-height: 8rem;
+            --_pk-state-panel-padding: 1.25rem 0.75rem;
+            --_pk-state-panel-icon-shell-size: 1.75rem;
+            --_pk-state-panel-icon-size: 0.875rem;
+            --_pk-state-panel-icon-radius: var(--pk-radius-md);
+            --_pk-state-panel-icon-margin-bottom: 0.5rem;
+            --_pk-state-panel-body-margin-top: 0.25rem;
+            --_pk-state-panel-details-margin-top: 0.625rem;
+            --_pk-state-panel-details-font-size: 0.6875rem;
+            --_pk-state-panel-details-content-margin-top: 0.5rem;
+            --_pk-state-panel-details-max-height: 10rem;
+            --_pk-state-panel-details-pre-padding: 0.5rem;
+            --_pk-state-panel-details-pre-radius: var(--pk-radius-sm);
+            --_pk-state-panel-details-pre-font-size: 0.6875rem;
+            --_pk-state-panel-copy-button-size: var(--pk-btn-height-xxs);
+            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-xxs);
+            --_pk-state-panel-copy-inset: 0.3125rem;
+            --_pk-state-panel-copy-radius: var(--pk-radius-sm);
+            --_pk-state-panel-copy-status-size: 0.6875rem;
+            --_pk-state-panel-actions-gap: 0.375rem;
+            --_pk-state-panel-actions-margin-top: 0.75rem;
+            --_pk-state-panel-action-height: var(--pk-btn-height-xs);
+            --_pk-state-panel-action-font: var(--pk-btn-font-xs);
+            --_pk-state-panel-action-padding-inline: var(--pk-btn-padding-inline-xs);
+            --_pk-state-panel-action-icon-size: var(--pk-btn-icon-size-xs);
+            --_pk-state-panel-action-icon-gap: var(--pk-btn-icon-gap-xs);
+            --_pk-state-panel-action-caret-size: var(--pk-btn-caret-size-xs);
+            --_pk-state-panel-action-radius: var(--pk-btn-radius-xs);
+        }
+
+        :host([size='lg']) {
+            --_pk-state-panel-font-size: var(--pk-font-size-base);
+            --_pk-state-panel-title-size: 1rem;
+            --_pk-state-panel-content-width: 35rem;
+            --_pk-state-panel-min-height: 14rem;
+            --_pk-state-panel-padding: 2.5rem 1rem;
+            --_pk-state-panel-icon-shell-size: 2.5rem;
+            --_pk-state-panel-icon-size: 1.25rem;
+            --_pk-state-panel-icon-radius: 0.625rem;
+            --_pk-state-panel-icon-margin-bottom: 0.75rem;
+            --_pk-state-panel-body-margin-top: 0.5rem;
+            --_pk-state-panel-details-margin-top: 1rem;
+            --_pk-state-panel-details-font-size: 0.8125rem;
+            --_pk-state-panel-details-content-margin-top: 0.75rem;
+            --_pk-state-panel-details-max-height: 18rem;
+            --_pk-state-panel-details-pre-padding: 0.75rem;
+            --_pk-state-panel-details-pre-radius: var(--pk-radius-lg);
+            --_pk-state-panel-details-pre-font-size: 0.75rem;
+            --_pk-state-panel-copy-button-size: var(--pk-btn-height-sm);
+            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-sm);
+            --_pk-state-panel-copy-inset: 0.5rem;
+            --_pk-state-panel-copy-radius: var(--pk-radius-lg);
+            --_pk-state-panel-copy-status-size: 0.75rem;
+            --_pk-state-panel-actions-gap: 0.5rem;
+            --_pk-state-panel-actions-margin-top: 1.25rem;
+            --_pk-state-panel-action-height: 2.125rem;
+            --_pk-state-panel-action-font: var(--pk-font-size-base);
+            --_pk-state-panel-action-padding-inline: 9px;
+            --_pk-state-panel-action-icon-size: 14px;
+            --_pk-state-panel-action-icon-gap: 6px;
+            --_pk-state-panel-action-caret-size: 12px;
+            --_pk-state-panel-action-radius: var(--pk-radius-lg);
+        }
+
+        :host([variant='info']) {
+            --pk-state-panel-accent: var(--pk-color-sky-600);
+            --pk-state-panel-icon-background: var(--pk-color-sky-50);
+        }
+
+        :host([variant='success']) {
+            --pk-state-panel-accent: var(--pk-color-teal-600);
+            --pk-state-panel-icon-background: var(--pk-color-teal-50);
+        }
+
+        :host([variant='warning']) {
+            --pk-state-panel-accent: var(--pk-color-amber-600);
+            --pk-state-panel-icon-background: var(--pk-color-amber-50);
+        }
+
+        :host([variant='error']) {
+            --pk-state-panel-accent: var(--pk-color-rose-600);
+            --pk-state-panel-icon-background: color-mix(
+                in srgb,
+                var(--pk-color-rose-500) 12%,
+                transparent
+            );
+        }
+
+        .panel {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            width: min(
+                100%,
+                var(--pk-state-panel-content-width, var(--_pk-state-panel-content-width))
+            );
+            min-width: 0;
+        }
+
+        .icon-shell {
+            display: inline-flex;
+            flex: 0 0 auto;
+            align-items: center;
+            justify-content: center;
+            width: var(--pk-state-panel-icon-shell-size, var(--_pk-state-panel-icon-shell-size));
+            height: var(--pk-state-panel-icon-shell-size, var(--_pk-state-panel-icon-shell-size));
+            margin-bottom: var(--_pk-state-panel-icon-margin-bottom);
+            border-radius: var(--pk-state-panel-icon-radius, var(--_pk-state-panel-icon-radius));
+            background: var(--pk-state-panel-icon-background);
+            color: var(--pk-state-panel-accent);
+        }
+
+        .icon {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));
+            height: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));
+            font-size: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));
+        }
+
+        .icon svg,
+        .icon pk-icon,
+        .icon ::slotted(*) {
+            display: block;
+            width: 100%;
+            height: 100%;
+            fill: currentColor;
+        }
+
+        .title {
+            margin: 0;
+            color: var(--pk-state-panel-title-color, var(--pk-color-gray-900));
+            font-size: var(--pk-state-panel-title-size, var(--_pk-state-panel-title-size));
+            font-weight: 600;
+            line-height: 1.4;
+        }
+
+        .title ::slotted(*) {
+            margin: 0;
+            color: inherit;
+            font: inherit;
+        }
+
+        .body {
+            max-width: 100%;
+            margin-top: var(--_pk-state-panel-body-margin-top);
+        }
+
+        .body ::slotted(*) {
+            margin-block: 0;
+        }
+
+        .details {
+            width: 100%;
+            margin-top: var(--_pk-state-panel-details-margin-top);
+            color: var(--pk-state-panel-accent);
+            font-size: var(--_pk-state-panel-details-font-size);
+        }
+
+        summary {
+            width: fit-content;
+            margin-inline: auto;
+            border-radius: var(--pk-radius-sm);
+            cursor: pointer;
+        }
+
+        summary:focus-visible,
+        .copy:focus-visible {
+            outline: none;
+            box-shadow: var(--pk-shadow-focus);
+        }
+
+        .details-content {
+            position: relative;
+            margin-top: var(--_pk-state-panel-details-content-margin-top);
+            color: var(--pk-color-gray-800);
+            text-align: start;
+        }
+
+        .details-scroll {
+            min-width: 0;
+        }
+
+        .details-content ::slotted(pre) {
+            box-sizing: border-box;
+            max-height: var(
+                --pk-state-panel-details-max-height,
+                var(--_pk-state-panel-details-max-height)
+            );
+            margin: 0;
+            padding: var(--_pk-state-panel-details-pre-padding);
+            overflow: auto;
+            border: 1px solid var(--pk-color-gray-200);
+            border-radius: var(--_pk-state-panel-details-pre-radius);
+            background: var(--pk-color-white);
+            color: var(--pk-color-gray-800);
+            font:
+                var(--_pk-state-panel-details-pre-font-size)/1.5 ui-monospace,
+                SFMono-Regular,
+                Consolas,
+                'Liberation Mono',
+                monospace;
+            overflow-wrap: anywhere;
+            user-select: text;
+            white-space: pre-wrap;
+        }
+
+        :host([copyable]) .details-content ::slotted(pre) {
+            max-height: none;
+            padding-inline-end: calc(
+                var(--_pk-state-panel-details-pre-padding) +
+                    var(--_pk-state-panel-copy-button-size) +
+                    var(--_pk-state-panel-copy-inset)
+            );
+            overflow: visible;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        :host([copyable]) .details-content {
+            overflow: hidden;
+            border: 1px solid var(--pk-color-gray-200);
+            border-radius: var(--_pk-state-panel-details-pre-radius);
+            background: var(--pk-color-white);
+        }
+
+        :host([copyable]) .details-scroll {
+            position: relative;
+            max-height: var(
+                --pk-state-panel-details-max-height,
+                var(--_pk-state-panel-details-max-height)
+            );
+            overflow: auto;
+        }
+
+        .copy-overlay {
+            position: sticky;
+            z-index: 1;
+            top: 0;
+            display: flex;
+            justify-content: flex-end;
+            height: 0;
+            pointer-events: none;
+        }
+
+        .copy {
+            flex: none;
+            margin-block-start: var(--_pk-state-panel-copy-inset);
+            margin-inline-end: var(--_pk-state-panel-copy-inset);
+            pointer-events: auto;
+            --pk-btn-height-default: var(--_pk-state-panel-copy-button-size);
+            --pk-btn-icon-size-default: var(--_pk-state-panel-copy-icon-size);
+            --pk-btn-radius-default: var(--_pk-state-panel-copy-radius);
+            --pk-copy-button-background: var(--pk-color-white);
+            --pk-copy-button-border-color: transparent;
+            --pk-copy-button-hover-border-color: transparent;
+            --pk-copy-button-color: var(--pk-color-gray-300);
+            --pk-copy-button-hover-color: var(--pk-color-gray-500);
+            --pk-copy-button-hover-background: color-mix(
+                in srgb,
+                var(--pk-color-gray-300) 6%,
+                var(--pk-color-white)
+            );
+        }
+
+        .copy-status {
+            display: block;
+            margin-top: 0.375rem;
+            color: var(--pk-color-red-700);
+            font-size: var(--_pk-state-panel-copy-status-size);
+            text-align: start;
+        }
+
+        .copy-status:not([data-error]) {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .actions {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            justify-content: center;
+            gap: var(--_pk-state-panel-actions-gap);
+            margin-top: var(--_pk-state-panel-actions-margin-top);
+        }
+
+        .actions slot::slotted(pk-button) {
+            --pk-btn-height-default: var(--_pk-state-panel-action-height);
+            --pk-btn-font-default: var(--_pk-state-panel-action-font);
+            --pk-btn-padding-inline-default: var(--_pk-state-panel-action-padding-inline);
+            --pk-btn-icon-size-default: var(--_pk-state-panel-action-icon-size);
+            --pk-btn-icon-gap-default: var(--_pk-state-panel-action-icon-gap);
+            --pk-btn-caret-size-default: var(--_pk-state-panel-action-caret-size);
+            --pk-btn-radius-default: var(--_pk-state-panel-action-radius);
+        }
+    }
+`;
+//#endregion
+//#region src/components/state-panel/pk-state-panel.ts
+var COPY_STATUS_RESET_MS = 3e3;
+var defaultIcons = {
+	empty: icons_exports.emptySet,
+	info: icons_exports.circleInfo,
+	success: icons_exports.circleCheck,
+	warning: icons_exports.triangleExclamation,
+	error: icons_exports.triangleExclamation
+};
+var PkStatePanel = class PkStatePanel extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasSlotController = new HasSlotController(this, "title", "icon", "details", "actions");
+		this.variant = "empty";
+		this.size = "default";
+		this.heading = "";
+		this.headingLevel = 2;
+		this.icon = "";
+		this.hideIcon = false;
+		this.announce = "off";
+		this.detailsLabel = "Details";
+		this.detailsOpen = false;
+		this.copyable = false;
+		this.copyLabel = "Copy details";
+		this.copiedLabel = "Details copied.";
+		this.copyErrorLabel = "Copy failed. Select the details and copy them manually.";
+		this.copyStatus = "";
+		this.copyFailed = false;
+	}
+	static {
+		this.styles = pkStatePanelStyles;
+	}
+	disconnectedCallback() {
+		window.clearTimeout(this.copyStatusResetTimer);
+		super.disconnectedCallback();
+	}
+	hasTitle() {
+		return Boolean(this.heading) || this.hasSlotController.test("title");
+	}
+	get detailsValue() {
+		return (this.detailsSlot?.assignedNodes({ flatten: true }) ?? []).map((node) => node.textContent ?? "").join("").trim();
+	}
+	resetCopyStatusLater() {
+		window.clearTimeout(this.copyStatusResetTimer);
+		this.copyStatusResetTimer = window.setTimeout(() => {
+			this.copyStatus = "";
+			this.copyFailed = false;
+		}, COPY_STATUS_RESET_MS);
+	}
+	showCopySuccess() {
+		this.copyFailed = false;
+		this.copyStatus = this.copiedLabel;
+		this.resetCopyStatusLater();
+	}
+	showCopyError() {
+		this.copyFailed = true;
+		this.copyStatus = this.copyErrorLabel;
+		this.resetCopyStatusLater();
+	}
+	handleCopySuccess() {
+		this.showCopySuccess();
+	}
+	handleCopyError() {
+		this.showCopyError();
+		this.selectDetails();
+	}
+	selectDetails() {
+		const nodes = this.detailsSlot?.assignedNodes({ flatten: true }) ?? [];
+		const first = nodes[0];
+		const last = nodes[nodes.length - 1];
+		if (!first || !last) return;
+		this.detailsOpen = true;
+		const range = document.createRange();
+		range.setStartBefore(first);
+		range.setEndAfter(last);
+		const selection = window.getSelection();
+		selection?.removeAllRanges();
+		selection?.addRange(range);
+	}
+	/** Copy the plain text assigned to the details slot. */
+	async copyDetails() {
+		const value = this.detailsValue;
+		if (!value) {
+			this.showCopyError();
+			this.dispatchEvent(new PkCopyErrorEvent());
+			return;
+		}
+		if (this.copyButton) {
+			this.copyButton.value = value;
+			await this.copyButton.copy();
+			return;
+		}
+		try {
+			await copyToClipboard(value);
+			this.showCopySuccess();
+			const copyEvent = new PkCopyEvent(value);
+			this.dispatchEvent(copyEvent);
+		} catch {
+			this.showCopyError();
+			this.selectDetails();
+			this.dispatchEvent(new PkCopyErrorEvent());
+		}
+	}
+	handleDetailsToggle(event) {
+		this.detailsOpen = event.currentTarget.open;
+	}
+	renderIcon() {
+		if (this.hideIcon) return nothing;
+		let icon;
+		if (this.hasSlotController.test("icon")) icon = html`<slot name="icon"></slot>`;
+		else if (this.icon) icon = html`<pk-icon .icon=${this.icon}></pk-icon>`;
+		else icon = unsafeSVG(renderIconHtml(defaultIcons[this.variant] ?? defaultIcons.empty));
+		return html`
+            <span part="icon-shell" class="icon-shell" aria-hidden="true">
+                <span part="icon" class="icon">${icon}</span>
+            </span>
+        `;
+	}
+	render() {
+		const role = this.announce === "assertive" ? "alert" : this.announce === "polite" ? "status" : nothing;
+		const live = this.announce === "off" ? nothing : this.announce;
+		const hasDetails = this.hasSlotController.test("details");
+		const hasActions = this.hasSlotController.test("actions");
+		return html`
+            <div
+                part="base"
+                class="panel"
+                role=${role}
+                aria-live=${live}
+                aria-atomic=${this.announce === "off" ? nothing : "true"}
+            >
+                ${this.renderIcon()}
+
+                ${this.hasTitle() ? html`
+                        <div
+                            part="title"
+                            class="title"
+                            role="heading"
+                            aria-level=${this.headingLevel}
+                        >
+                            ${this.hasSlotController.test("title") ? html`<slot name="title"></slot>` : this.heading}
+                        </div>
+                    ` : nothing}
+
+                <div part="body" class="body"><slot></slot></div>
+
+                ${hasDetails ? html`
+                        <details
+                            part="details"
+                            class="details"
+                            ?open=${this.detailsOpen}
+                            @toggle=${this.handleDetailsToggle}
+                        >
+                            <summary part="details-summary">${this.detailsLabel}</summary>
+                            <div part="details-content" class="details-content">
+                                <div class="details-scroll">
+                                    ${this.copyable ? html`
+                                            <div class="copy-overlay">
+                                                <pk-copy-button
+                                                    part="copy-button"
+                                                    class="copy"
+                                                    variant="transparent"
+                                                    aria-label=${this.copyLabel}
+                                                    .copiedLabel=${this.copiedLabel}
+                                                    .value=${this.detailsValue}
+                                                    @pk-copy=${this.handleCopySuccess}
+                                                    @pk-copy-error=${this.handleCopyError}
+                                                ></pk-copy-button>
+                                            </div>
+                                        ` : nothing}
+                                    <slot name="details"></slot>
+                                </div>
+                            </div>
+
+                            ${this.copyable ? html`
+                                    <span
+                                        part="copy-status"
+                                        class="copy-status"
+                                        data-error=${this.copyFailed ? "" : nothing}
+                                        role="status"
+                                        aria-live="polite"
+                                    >${this.copyStatus}</span>
+                                ` : nothing}
+                        </details>
+                    ` : nothing}
+
+                ${hasActions ? html`<div part="actions" class="actions"><slot name="actions"></slot></div>` : nothing}
+            </div>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkStatePanel.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], PkStatePanel.prototype, "size", void 0);
+__decorate([property()], PkStatePanel.prototype, "heading", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "heading-level"
+})], PkStatePanel.prototype, "headingLevel", void 0);
+__decorate([property()], PkStatePanel.prototype, "icon", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-icon",
+	reflect: true
+})], PkStatePanel.prototype, "hideIcon", void 0);
+__decorate([property({ reflect: true })], PkStatePanel.prototype, "announce", void 0);
+__decorate([property({ attribute: "details-label" })], PkStatePanel.prototype, "detailsLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "details-open",
+	reflect: true
+})], PkStatePanel.prototype, "detailsOpen", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkStatePanel.prototype, "copyable", void 0);
+__decorate([property({ attribute: "copy-label" })], PkStatePanel.prototype, "copyLabel", void 0);
+__decorate([property({ attribute: "copied-label" })], PkStatePanel.prototype, "copiedLabel", void 0);
+__decorate([property({ attribute: "copy-error-label" })], PkStatePanel.prototype, "copyErrorLabel", void 0);
+__decorate([query("slot[name=\"details\"]")], PkStatePanel.prototype, "detailsSlot", void 0);
+__decorate([query("pk-copy-button.copy")], PkStatePanel.prototype, "copyButton", void 0);
+__decorate([state()], PkStatePanel.prototype, "copyStatus", void 0);
+__decorate([state()], PkStatePanel.prototype, "copyFailed", void 0);
+PkStatePanel = __decorate([customElement("pk-state-panel")], PkStatePanel);
+//#endregion
+export { PkStatePanel as t };
+
+//# sourceMappingURL=pk-state-panel-DPP7t-er.js.map

package/dist/chunks/pk-state-panel-DPP7t-er.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-state-panel-DPP7t-er.js","names":[],"sources":["../../src/components/state-panel/pk-state-panel.styles.ts","../../src/components/state-panel/pk-state-panel.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkStatePanelStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            box-sizing: border-box;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            min-height: var(--pk-state-panel-min-height, var(--_pk-state-panel-min-height));\n            padding: var(--pk-state-panel-padding, var(--_pk-state-panel-padding));\n            color: var(--pk-state-panel-body-color, var(--pk-color-gray-500));\n            font-family: var(--pk-font-family);\n            font-size: var(--_pk-state-panel-font-size);\n            line-height: var(--pk-line-height);\n            text-align: center;\n            --pk-state-panel-accent: var(--pk-color-slate-500);\n            --pk-state-panel-icon-background: color-mix(\n                in srgb,\n                var(--pk-color-slate-200) 55%,\n                transparent\n            );\n            --_pk-state-panel-font-size: var(--pk-font-size-sm);\n            --_pk-state-panel-title-size: var(--pk-font-size-base);\n            --_pk-state-panel-content-width: 32rem;\n            --_pk-state-panel-min-height: 11rem;\n            --_pk-state-panel-padding: 2rem 0.875rem;\n            --_pk-state-panel-icon-shell-size: 2.125rem;\n            --_pk-state-panel-icon-size: 1.0625rem;\n            --_pk-state-panel-icon-radius: var(--pk-radius-lg);\n            --_pk-state-panel-icon-margin-bottom: 0.625rem;\n            --_pk-state-panel-body-margin-top: 0.375rem;\n            --_pk-state-panel-details-margin-top: 0.75rem;\n            --_pk-state-panel-details-font-size: 0.75rem;\n            --_pk-state-panel-details-content-margin-top: 0.625rem;\n            --_pk-state-panel-details-max-height: 14rem;\n            --_pk-state-panel-details-pre-padding: 0.625rem;\n            --_pk-state-panel-details-pre-radius: var(--pk-radius-md);\n            --_pk-state-panel-details-pre-font-size: 0.6875rem;\n            --_pk-state-panel-copy-button-size: var(--pk-btn-height-xs);\n            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-xs);\n            --_pk-state-panel-copy-inset: 0.375rem;\n            --_pk-state-panel-copy-radius: var(--pk-radius-md);\n            --_pk-state-panel-copy-status-size: 0.6875rem;\n            --_pk-state-panel-actions-gap: 0.4375rem;\n            --_pk-state-panel-actions-margin-top: 1rem;\n            --_pk-state-panel-action-height: var(--pk-btn-height-sm);\n            --_pk-state-panel-action-font: var(--pk-btn-font-sm);\n            --_pk-state-panel-action-padding-inline: var(--pk-btn-padding-inline-sm);\n            --_pk-state-panel-action-icon-size: var(--pk-btn-icon-size-sm);\n            --_pk-state-panel-action-icon-gap: var(--pk-btn-icon-gap-sm);\n            --_pk-state-panel-action-caret-size: var(--pk-btn-caret-size-sm);\n            --_pk-state-panel-action-radius: var(--pk-btn-radius-sm);\n        }\n\n        :host([size='sm']) {\n            --_pk-state-panel-font-size: var(--pk-btn-font-xs);\n            --_pk-state-panel-title-size: var(--pk-font-size-sm);\n            --_pk-state-panel-content-width: 28rem;\n            --_pk-state-panel-min-height: 8rem;\n            --_pk-state-panel-padding: 1.25rem 0.75rem;\n            --_pk-state-panel-icon-shell-size: 1.75rem;\n            --_pk-state-panel-icon-size: 0.875rem;\n            --_pk-state-panel-icon-radius: var(--pk-radius-md);\n            --_pk-state-panel-icon-margin-bottom: 0.5rem;\n            --_pk-state-panel-body-margin-top: 0.25rem;\n            --_pk-state-panel-details-margin-top: 0.625rem;\n            --_pk-state-panel-details-font-size: 0.6875rem;\n            --_pk-state-panel-details-content-margin-top: 0.5rem;\n            --_pk-state-panel-details-max-height: 10rem;\n            --_pk-state-panel-details-pre-padding: 0.5rem;\n            --_pk-state-panel-details-pre-radius: var(--pk-radius-sm);\n            --_pk-state-panel-details-pre-font-size: 0.6875rem;\n            --_pk-state-panel-copy-button-size: var(--pk-btn-height-xxs);\n            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-xxs);\n            --_pk-state-panel-copy-inset: 0.3125rem;\n            --_pk-state-panel-copy-radius: var(--pk-radius-sm);\n            --_pk-state-panel-copy-status-size: 0.6875rem;\n            --_pk-state-panel-actions-gap: 0.375rem;\n            --_pk-state-panel-actions-margin-top: 0.75rem;\n            --_pk-state-panel-action-height: var(--pk-btn-height-xs);\n            --_pk-state-panel-action-font: var(--pk-btn-font-xs);\n            --_pk-state-panel-action-padding-inline: var(--pk-btn-padding-inline-xs);\n            --_pk-state-panel-action-icon-size: var(--pk-btn-icon-size-xs);\n            --_pk-state-panel-action-icon-gap: var(--pk-btn-icon-gap-xs);\n            --_pk-state-panel-action-caret-size: var(--pk-btn-caret-size-xs);\n            --_pk-state-panel-action-radius: var(--pk-btn-radius-xs);\n        }\n\n        :host([size='lg']) {\n            --_pk-state-panel-font-size: var(--pk-font-size-base);\n            --_pk-state-panel-title-size: 1rem;\n            --_pk-state-panel-content-width: 35rem;\n            --_pk-state-panel-min-height: 14rem;\n            --_pk-state-panel-padding: 2.5rem 1rem;\n            --_pk-state-panel-icon-shell-size: 2.5rem;\n            --_pk-state-panel-icon-size: 1.25rem;\n            --_pk-state-panel-icon-radius: 0.625rem;\n            --_pk-state-panel-icon-margin-bottom: 0.75rem;\n            --_pk-state-panel-body-margin-top: 0.5rem;\n            --_pk-state-panel-details-margin-top: 1rem;\n            --_pk-state-panel-details-font-size: 0.8125rem;\n            --_pk-state-panel-details-content-margin-top: 0.75rem;\n            --_pk-state-panel-details-max-height: 18rem;\n            --_pk-state-panel-details-pre-padding: 0.75rem;\n            --_pk-state-panel-details-pre-radius: var(--pk-radius-lg);\n            --_pk-state-panel-details-pre-font-size: 0.75rem;\n            --_pk-state-panel-copy-button-size: var(--pk-btn-height-sm);\n            --_pk-state-panel-copy-icon-size: var(--pk-btn-icon-size-sm);\n            --_pk-state-panel-copy-inset: 0.5rem;\n            --_pk-state-panel-copy-radius: var(--pk-radius-lg);\n            --_pk-state-panel-copy-status-size: 0.75rem;\n            --_pk-state-panel-actions-gap: 0.5rem;\n            --_pk-state-panel-actions-margin-top: 1.25rem;\n            --_pk-state-panel-action-height: 2.125rem;\n            --_pk-state-panel-action-font: var(--pk-font-size-base);\n            --_pk-state-panel-action-padding-inline: 9px;\n            --_pk-state-panel-action-icon-size: 14px;\n            --_pk-state-panel-action-icon-gap: 6px;\n            --_pk-state-panel-action-caret-size: 12px;\n            --_pk-state-panel-action-radius: var(--pk-radius-lg);\n        }\n\n        :host([variant='info']) {\n            --pk-state-panel-accent: var(--pk-color-sky-600);\n            --pk-state-panel-icon-background: var(--pk-color-sky-50);\n        }\n\n        :host([variant='success']) {\n            --pk-state-panel-accent: var(--pk-color-teal-600);\n            --pk-state-panel-icon-background: var(--pk-color-teal-50);\n        }\n\n        :host([variant='warning']) {\n            --pk-state-panel-accent: var(--pk-color-amber-600);\n            --pk-state-panel-icon-background: var(--pk-color-amber-50);\n        }\n\n        :host([variant='error']) {\n            --pk-state-panel-accent: var(--pk-color-rose-600);\n            --pk-state-panel-icon-background: color-mix(\n                in srgb,\n                var(--pk-color-rose-500) 12%,\n                transparent\n            );\n        }\n\n        .panel {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            width: min(\n                100%,\n                var(--pk-state-panel-content-width, var(--_pk-state-panel-content-width))\n            );\n            min-width: 0;\n        }\n\n        .icon-shell {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-state-panel-icon-shell-size, var(--_pk-state-panel-icon-shell-size));\n            height: var(--pk-state-panel-icon-shell-size, var(--_pk-state-panel-icon-shell-size));\n            margin-bottom: var(--_pk-state-panel-icon-margin-bottom);\n            border-radius: var(--pk-state-panel-icon-radius, var(--_pk-state-panel-icon-radius));\n            background: var(--pk-state-panel-icon-background);\n            color: var(--pk-state-panel-accent);\n        }\n\n        .icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));\n            height: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));\n            font-size: var(--pk-state-panel-icon-size, var(--_pk-state-panel-icon-size));\n        }\n\n        .icon svg,\n        .icon pk-icon,\n        .icon ::slotted(*) {\n            display: block;\n            width: 100%;\n            height: 100%;\n            fill: currentColor;\n        }\n\n        .title {\n            margin: 0;\n            color: var(--pk-state-panel-title-color, var(--pk-color-gray-900));\n            font-size: var(--pk-state-panel-title-size, var(--_pk-state-panel-title-size));\n            font-weight: 600;\n            line-height: 1.4;\n        }\n\n        .title ::slotted(*) {\n            margin: 0;\n            color: inherit;\n            font: inherit;\n        }\n\n        .body {\n            max-width: 100%;\n            margin-top: var(--_pk-state-panel-body-margin-top);\n        }\n\n        .body ::slotted(*) {\n            margin-block: 0;\n        }\n\n        .details {\n            width: 100%;\n            margin-top: var(--_pk-state-panel-details-margin-top);\n            color: var(--pk-state-panel-accent);\n            font-size: var(--_pk-state-panel-details-font-size);\n        }\n\n        summary {\n            width: fit-content;\n            margin-inline: auto;\n            border-radius: var(--pk-radius-sm);\n            cursor: pointer;\n        }\n\n        summary:focus-visible,\n        .copy:focus-visible {\n            outline: none;\n            box-shadow: var(--pk-shadow-focus);\n        }\n\n        .details-content {\n            position: relative;\n            margin-top: var(--_pk-state-panel-details-content-margin-top);\n            color: var(--pk-color-gray-800);\n            text-align: start;\n        }\n\n        .details-scroll {\n            min-width: 0;\n        }\n\n        .details-content ::slotted(pre) {\n            box-sizing: border-box;\n            max-height: var(\n                --pk-state-panel-details-max-height,\n                var(--_pk-state-panel-details-max-height)\n            );\n            margin: 0;\n            padding: var(--_pk-state-panel-details-pre-padding);\n            overflow: auto;\n            border: 1px solid var(--pk-color-gray-200);\n            border-radius: var(--_pk-state-panel-details-pre-radius);\n            background: var(--pk-color-white);\n            color: var(--pk-color-gray-800);\n            font:\n                var(--_pk-state-panel-details-pre-font-size)/1.5 ui-monospace,\n                SFMono-Regular,\n                Consolas,\n                'Liberation Mono',\n                monospace;\n            overflow-wrap: anywhere;\n            user-select: text;\n            white-space: pre-wrap;\n        }\n\n        :host([copyable]) .details-content ::slotted(pre) {\n            max-height: none;\n            padding-inline-end: calc(\n                var(--_pk-state-panel-details-pre-padding) +\n                    var(--_pk-state-panel-copy-button-size) +\n                    var(--_pk-state-panel-copy-inset)\n            );\n            overflow: visible;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        :host([copyable]) .details-content {\n            overflow: hidden;\n            border: 1px solid var(--pk-color-gray-200);\n            border-radius: var(--_pk-state-panel-details-pre-radius);\n            background: var(--pk-color-white);\n        }\n\n        :host([copyable]) .details-scroll {\n            position: relative;\n            max-height: var(\n                --pk-state-panel-details-max-height,\n                var(--_pk-state-panel-details-max-height)\n            );\n            overflow: auto;\n        }\n\n        .copy-overlay {\n            position: sticky;\n            z-index: 1;\n            top: 0;\n            display: flex;\n            justify-content: flex-end;\n            height: 0;\n            pointer-events: none;\n        }\n\n        .copy {\n            flex: none;\n            margin-block-start: var(--_pk-state-panel-copy-inset);\n            margin-inline-end: var(--_pk-state-panel-copy-inset);\n            pointer-events: auto;\n            --pk-btn-height-default: var(--_pk-state-panel-copy-button-size);\n            --pk-btn-icon-size-default: var(--_pk-state-panel-copy-icon-size);\n            --pk-btn-radius-default: var(--_pk-state-panel-copy-radius);\n            --pk-copy-button-background: var(--pk-color-white);\n            --pk-copy-button-border-color: transparent;\n            --pk-copy-button-hover-border-color: transparent;\n            --pk-copy-button-color: var(--pk-color-gray-300);\n            --pk-copy-button-hover-color: var(--pk-color-gray-500);\n            --pk-copy-button-hover-background: color-mix(\n                in srgb,\n                var(--pk-color-gray-300) 6%,\n                var(--pk-color-white)\n            );\n        }\n\n        .copy-status {\n            display: block;\n            margin-top: 0.375rem;\n            color: var(--pk-color-red-700);\n            font-size: var(--_pk-state-panel-copy-status-size);\n            text-align: start;\n        }\n\n        .copy-status:not([data-error]) {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            margin: -1px;\n            padding: 0;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n        }\n\n        .actions {\n            display: flex;\n            flex-wrap: wrap;\n            align-items: center;\n            justify-content: center;\n            gap: var(--_pk-state-panel-actions-gap);\n            margin-top: var(--_pk-state-panel-actions-margin-top);\n        }\n\n        .actions slot::slotted(pk-button) {\n            --pk-btn-height-default: var(--_pk-state-panel-action-height);\n            --pk-btn-font-default: var(--_pk-state-panel-action-font);\n            --pk-btn-padding-inline-default: var(--_pk-state-panel-action-padding-inline);\n            --pk-btn-icon-size-default: var(--_pk-state-panel-action-icon-size);\n            --pk-btn-icon-gap-default: var(--_pk-state-panel-action-icon-gap);\n            --pk-btn-caret-size-default: var(--_pk-state-panel-action-caret-size);\n            --pk-btn-radius-default: var(--_pk-state-panel-action-radius);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { customElement, property, query, state } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { PkCopyErrorEvent, PkCopyEvent } from '../../events/pk-copy.js';\nimport {\n    circleCheck,\n    circleInfo,\n    emptySet,\n    renderIconHtml,\n    triangleExclamation,\n} from '../../icons/index.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { copyToClipboard } from '../../utils/copy-to-clipboard.js';\nimport type { PkCopyButton } from '../copy-button/pk-copy-button.js';\nimport '../copy-button/pk-copy-button.js';\nimport '../icon/pk-icon.js';\nimport { pkStatePanelStyles } from './pk-state-panel.styles.js';\n\nexport type PkStatePanelVariant = 'empty' | 'info' | 'success' | 'warning' | 'error';\nexport type PkStatePanelAnnouncement = 'off' | 'polite' | 'assertive';\nexport type PkStatePanelHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type PkStatePanelSize = 'sm' | 'default' | 'lg';\n\nconst COPY_STATUS_RESET_MS = 3000;\n\nconst defaultIcons = {\n    empty: emptySet,\n    info: circleInfo,\n    success: circleCheck,\n    warning: triangleExclamation,\n    error: triangleExclamation,\n};\n\n/**\n * Centered replacement surface for empty, unavailable, completed or failed content regions.\n *\n * @slot title - Custom heading content. Takes precedence over the `heading` property.\n * @slot icon - Custom icon. The component supplies a variant icon by default.\n * @slot - State description or other primary content.\n * @slot details - Optional content inside the collapsible details region.\n * @slot actions - Optional buttons or links.\n *\n * @event pk-copy - Emitted when the details are copied successfully.\n * @event pk-copy-error - Emitted when the details cannot be copied.\n *\n * @csspart base - Centered state container.\n * @csspart icon-shell - Icon background container.\n * @csspart icon - Icon wrapper.\n * @csspart title - State heading.\n * @csspart body - Default content wrapper.\n * @csspart details - Collapsible details element.\n * @csspart details-summary - Details disclosure label.\n * @csspart details-content - Details content wrapper.\n * @csspart copy-button - Copy-details button.\n * @csspart copy-status - Copy result status.\n * @csspart actions - Actions wrapper.\n *\n * @cssproperty --pk-state-panel-accent - Variant accent colour.\n * @cssproperty --pk-state-panel-body-color - Primary content colour.\n * @cssproperty --pk-state-panel-title-color - Heading colour.\n * @cssproperty --pk-state-panel-title-size - Heading font size.\n * @cssproperty --pk-state-panel-icon-background - Icon container background.\n * @cssproperty --pk-state-panel-icon-shell-size - Icon container width and height.\n * @cssproperty --pk-state-panel-icon-size - Icon width and height.\n * @cssproperty --pk-state-panel-icon-radius - Icon container radius.\n * @cssproperty --pk-state-panel-content-width - Maximum content width.\n * @cssproperty --pk-state-panel-min-height - Minimum component height.\n * @cssproperty --pk-state-panel-padding - Component padding.\n * @cssproperty --pk-state-panel-details-max-height - Maximum height of diagnostic details.\n *\n * @dependency pk-copy-button - Compact copy-details action.\n */\n@customElement('pk-state-panel')\nexport class PkStatePanel extends PkElement {\n    static override styles = pkStatePanelStyles;\n\n    private readonly hasSlotController = new HasSlotController(\n        this,\n        'title',\n        'icon',\n        'details',\n        'actions',\n    );\n\n    /** Semantic colour and fallback icon for the replacement state. */\n    @property({ reflect: true })\n    variant: PkStatePanelVariant = 'empty';\n\n    /** Overall density, including typography, icons, spacing, details, and actions. */\n    @property({ reflect: true })\n    size: PkStatePanelSize = 'default';\n\n    @property()\n    heading = '';\n\n    @property({ type: Number, attribute: 'heading-level' })\n    headingLevel: PkStatePanelHeadingLevel = 2;\n\n    /** Registered icon name. A custom `icon` slot takes precedence. */\n    @property()\n    icon = '';\n\n    @property({ type: Boolean, attribute: 'hide-icon', reflect: true })\n    hideIcon = false;\n\n    @property({ reflect: true })\n    announce: PkStatePanelAnnouncement = 'off';\n\n    @property({ attribute: 'details-label' })\n    detailsLabel = 'Details';\n\n    @property({ type: Boolean, attribute: 'details-open', reflect: true })\n    detailsOpen = false;\n\n    @property({ type: Boolean, reflect: true })\n    copyable = false;\n\n    @property({ attribute: 'copy-label' })\n    copyLabel = 'Copy details';\n\n    @property({ attribute: 'copied-label' })\n    copiedLabel = 'Details copied.';\n\n    @property({ attribute: 'copy-error-label' })\n    copyErrorLabel = 'Copy failed. Select the details and copy them manually.';\n\n    @query('slot[name=\"details\"]')\n    private detailsSlot!: HTMLSlotElement;\n\n    @query('pk-copy-button.copy')\n    private copyButton?: PkCopyButton;\n\n    @state()\n    private copyStatus = '';\n\n    @state()\n    private copyFailed = false;\n\n    private copyStatusResetTimer?: number;\n\n    override disconnectedCallback(): void {\n        window.clearTimeout(this.copyStatusResetTimer);\n        super.disconnectedCallback();\n    }\n\n    private hasTitle(): boolean {\n        return Boolean(this.heading) || this.hasSlotController.test('title');\n    }\n\n    private get detailsValue(): string {\n        return (this.detailsSlot?.assignedNodes({ flatten: true }) ?? [])\n            .map((node) => node.textContent ?? '')\n            .join('')\n            .trim();\n    }\n\n    private resetCopyStatusLater(): void {\n        window.clearTimeout(this.copyStatusResetTimer);\n        this.copyStatusResetTimer = window.setTimeout(() => {\n            this.copyStatus = '';\n            this.copyFailed = false;\n        }, COPY_STATUS_RESET_MS);\n    }\n\n    private showCopySuccess(): void {\n        this.copyFailed = false;\n        this.copyStatus = this.copiedLabel;\n        this.resetCopyStatusLater();\n    }\n\n    private showCopyError(): void {\n        this.copyFailed = true;\n        this.copyStatus = this.copyErrorLabel;\n        this.resetCopyStatusLater();\n    }\n\n    private handleCopySuccess(): void {\n        this.showCopySuccess();\n    }\n\n    private handleCopyError(): void {\n        this.showCopyError();\n        this.selectDetails();\n    }\n\n    private selectDetails(): void {\n        const nodes = this.detailsSlot?.assignedNodes({ flatten: true }) ?? [];\n        const first = nodes[0];\n        const last = nodes[nodes.length - 1];\n\n        if (!first || !last) {\n            return;\n        }\n\n        this.detailsOpen = true;\n\n        const range = document.createRange();\n        range.setStartBefore(first);\n        range.setEndAfter(last);\n\n        const selection = window.getSelection();\n        selection?.removeAllRanges();\n        selection?.addRange(range);\n    }\n\n    /** Copy the plain text assigned to the details slot. */\n    async copyDetails(): Promise<void> {\n        const value = this.detailsValue;\n\n        if (!value) {\n            this.showCopyError();\n            this.dispatchEvent(new PkCopyErrorEvent());\n            return;\n        }\n\n        if (this.copyButton) {\n            this.copyButton.value = value;\n            await this.copyButton.copy();\n            return;\n        }\n\n        try {\n            await copyToClipboard(value);\n            this.showCopySuccess();\n            const copyEvent = new PkCopyEvent(value);\n            this.dispatchEvent(copyEvent);\n        } catch {\n            this.showCopyError();\n            this.selectDetails();\n            this.dispatchEvent(new PkCopyErrorEvent());\n        }\n    }\n\n    private handleDetailsToggle(event: Event): void {\n        this.detailsOpen = (event.currentTarget as HTMLDetailsElement).open;\n    }\n\n    private renderIcon() {\n        if (this.hideIcon) {\n            return nothing;\n        }\n\n        let icon;\n\n        if (this.hasSlotController.test('icon')) {\n            icon = html`<slot name=\"icon\"></slot>`;\n        } else if (this.icon) {\n            icon = html`<pk-icon .icon=${this.icon}></pk-icon>`;\n        } else {\n            icon = unsafeSVG(renderIconHtml(defaultIcons[this.variant] ?? defaultIcons.empty));\n        }\n\n        return html`\n            <span part=\"icon-shell\" class=\"icon-shell\" aria-hidden=\"true\">\n                <span part=\"icon\" class=\"icon\">${icon}</span>\n            </span>\n        `;\n    }\n\n    override render() {\n        const role = this.announce === 'assertive'\n            ? 'alert'\n            : this.announce === 'polite'\n                ? 'status'\n                : nothing;\n        const live = this.announce === 'off' ? nothing : this.announce;\n        const hasDetails = this.hasSlotController.test('details');\n        const hasActions = this.hasSlotController.test('actions');\n\n        return html`\n            <div\n                part=\"base\"\n                class=\"panel\"\n                role=${role}\n                aria-live=${live}\n                aria-atomic=${this.announce === 'off' ? nothing : 'true'}\n            >\n                ${this.renderIcon()}\n\n                ${this.hasTitle()\n                    ? html`\n                        <div\n                            part=\"title\"\n                            class=\"title\"\n                            role=\"heading\"\n                            aria-level=${this.headingLevel}\n                        >\n                            ${this.hasSlotController.test('title')\n                                ? html`<slot name=\"title\"></slot>`\n                                : this.heading}\n                        </div>\n                    `\n                    : nothing}\n\n                <div part=\"body\" class=\"body\"><slot></slot></div>\n\n                ${hasDetails\n                    ? html`\n                        <details\n                            part=\"details\"\n                            class=\"details\"\n                            ?open=${this.detailsOpen}\n                            @toggle=${this.handleDetailsToggle}\n                        >\n                            <summary part=\"details-summary\">${this.detailsLabel}</summary>\n                            <div part=\"details-content\" class=\"details-content\">\n                                <div class=\"details-scroll\">\n                                    ${this.copyable\n                                        ? html`\n                                            <div class=\"copy-overlay\">\n                                                <pk-copy-button\n                                                    part=\"copy-button\"\n                                                    class=\"copy\"\n                                                    variant=\"transparent\"\n                                                    aria-label=${this.copyLabel}\n                                                    .copiedLabel=${this.copiedLabel}\n                                                    .value=${this.detailsValue}\n                                                    @pk-copy=${this.handleCopySuccess}\n                                                    @pk-copy-error=${this.handleCopyError}\n                                                ></pk-copy-button>\n                                            </div>\n                                        `\n                                        : nothing}\n                                    <slot name=\"details\"></slot>\n                                </div>\n                            </div>\n\n                            ${this.copyable\n                                ? html`\n                                    <span\n                                        part=\"copy-status\"\n                                        class=\"copy-status\"\n                                        data-error=${this.copyFailed ? '' : nothing}\n                                        role=\"status\"\n                                        aria-live=\"polite\"\n                                    >${this.copyStatus}</span>\n                                `\n                                : nothing}\n                        </details>\n                    `\n                    : nothing}\n\n                ${hasActions\n                    ? html`<div part=\"actions\" class=\"actions\"><slot name=\"actions\"></slot></div>`\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-state-panel': PkStatePanel;\n    }\n}\n"],"mappings":"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"}