@verbb/plugin-kit-web 2.0.16 → 2.0.17

package/dist-loader/components/tiptap/tiptap-content.js

@@ -1,7 +1,7 @@
 import { l as n, m as i, p as b, s as e, u as customElement } from "../../chunks/lit-DpLik9Rf.js";
 import { c as __decorate, l as PkElement } from "../../chunks/pk-base-CyzwylQ7.js";
-import { k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
-import { A as createTiptapExtensions, i as createVariableTagDomNodeView, k as valueToContent, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-BFGP4eTV.js";
+import { A as Editor } from "../../chunks/tiptap-CgXkiK8d.js";
+import { i as createVariableTagDomNodeView, j as createTiptapExtensions, k as valueToContent, t as tiptapContentProseMirrorStyles } from "../../chunks/tiptap.styles-C0E1NpSx.js";
 //#region src/components/tiptap/pk-tiptap-content.styles.ts
 var pkTiptapContentStyles = i`
     @layer pk-component {
@@ -47,7 +47,10 @@ var PkTiptapContent = class PkTiptapContent extends PkElement {
 	mountEditor() {
 		this.editor = new Editor({
 			element: this.editorMount,
-			extensions: createTiptapExtensions({ variableTagNodeView: createVariableTagDomNodeView() }),
+			extensions: createTiptapExtensions({
+				variableTagNodeView: createVariableTagDomNodeView(),
+				surface: "content"
+			}),
 			content: valueToContent(this.value),
 			editable: false
 		});

package/dist-loader/components/tiptap/tiptap-editor.js

@@ -1,20 +1,21 @@
 import { n as uniqueId } from "../../chunks/pk-a11y-CjB4-U-R.js";
 import { a as o, c as r, f as A, l as n, m as i, p as b, s as e, u as customElement } from "../../chunks/lit-DpLik9Rf.js";
 import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-CyzwylQ7.js";
-import { A as heading, D as h4, E as h3, F as link, G as table, H as strikethrough, I as listOl, J as underline, K as textSlash, L as listUl, N as italic, O as h5, R as minus, T as h2, U as subscript, V as quoteRight, W as superscript, a as alignRight, c as arrowRotateRight, d as bold, f as bracketsCurly, h as chevronDown, i as alignLeft, j as highlighter, k as h6, n as alignCenter, q as triangleExclamation, r as alignJustify, s as arrowRotateLeft, w as h1, x as fileDashedLine, y as code, z as paragraph } from "../../chunks/svg-BiAlXtCn.js";
-import "../../chunks/pk-button-dngp-vOd.js";
+import { A as heading, D as h4, E as h3, F as link, G as superscript, H as smallCaps, I as listOl, J as triangleExclamation, K as table, L as listUl, N as italic, O as h5, R as minus, T as h2, U as strikethrough, V as quoteRight, W as subscript, Y as underline, a as alignRight, c as arrowRotateRight, d as bold, f as bracketsCurly, h as chevronDown, i as alignLeft, j as highlighter, k as h6, n as alignCenter, q as textSlash, r as alignJustify, s as arrowRotateLeft, w as h1, x as fileDashedLine, y as code, z as paragraph } from "../../chunks/svg-Bz-bXZn7.js";
+import "../../chunks/pk-button-saBDszJV.js";
 import { t as MirrorValidator } from "../../chunks/mirror-validator-C5XrXPaq.js";
 import "../../chunks/pk-checkbox-B3d4nkBx.js";
 import "../../chunks/pk-input-BhU0PiCk.js";
-import { M as posToDOMRect, j as getMarkRange, k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
-import { A as createTiptapExtensions, D as getFatalTiptapContentError, O as normalizeContentArray, S as openCraftElementLinkSelector, _ as getLinkOpenInNewTab, a as getToolbarGroupDefaultIcon, b as getCraftLinkOptions, c as isFormattingToolbarPreset, d as parseToolbarConfig, f as runToolbarButton, g as getLinkEditState, h as applyLinkToEditor, i as createVariableTagDomNodeView, k as valueToContent, l as isHeadingsOnlyToolbarPreset, m as isTiptapButtonActive, o as getToolbarGroupMenuItems, p as toolbarIncludesButton, r as tiptapProseMirrorStyles, s as getToolbarGroupTriggerState, u as isToolbarButtonActive, v as getSelectedText, x as getLinkOptionsElementSiteId, y as unsetLinkFromEditor } from "../../chunks/tiptap.styles-BFGP4eTV.js";
-import { n as renderIconHtml } from "../../chunks/render-BKfL_WRl.js";
-import "../../chunks/pk-field-D_SNOJpl.js";
-import "../../chunks/pk-dialog-B6lzsRur.js";
-import "../../chunks/pk-dropdown-item-DJ5TeF1r.js";
-import "../../chunks/pk-dropdown-menu-B87bsdlI.js";
+import { A as Editor, N as getMarkRange, P as posToDOMRect } from "../../chunks/tiptap-CgXkiK8d.js";
+import { A as resolveTiptapTextStyleToolbarConfig, D as getFatalTiptapContentError, N as getRegisteredTiptapToolbarControl, O as normalizeContentArray, S as openCraftElementLinkSelector, _ as getLinkOpenInNewTab, a as getToolbarGroupDefaultIcon, b as getCraftLinkOptions, c as isFormattingToolbarPreset, d as parseToolbarConfig, f as runToolbarButton, g as getLinkEditState, h as applyLinkToEditor, i as createVariableTagDomNodeView, j as createTiptapExtensions, k as valueToContent, l as isHeadingsOnlyToolbarPreset, m as isTiptapButtonActive, o as getToolbarGroupMenuItems, p as toolbarIncludesButton, r as tiptapProseMirrorStyles, s as getToolbarGroupTriggerState, u as isToolbarButtonActive, v as getSelectedText, x as getLinkOptionsElementSiteId, y as unsetLinkFromEditor } from "../../chunks/tiptap.styles-C0E1NpSx.js";
+import { n as renderIconHtml } from "../../chunks/render-Bnzcxfss.js";
+import "../../chunks/pk-field-V7JOy26T.js";
+import "../../chunks/pk-dialog-C6aaPokv.js";
+import "../../chunks/pk-dropdown-item-D8RrwjxL.js";
+import "../../chunks/pk-dropdown-label-Cg32UgRe.js";
+import "../../chunks/pk-dropdown-menu-CAHCltlX.js";
 import "../dropdown-menu/dropdown-separator.js";
-import "../../chunks/pk-tooltip-BS2dNLOS.js";
+import "../../chunks/pk-tooltip-Dd_Q0Bn5.js";
 //#region src/components/tiptap/tiptap-editor-host.ts
 function serializeTiptapDocumentContent(content) {
 	return JSON.stringify(normalizeContentArray(content));
@@ -117,6 +118,7 @@ var TOOLBAR_ICONS = {
 	strikethrough: renderIconHtml(strikethrough),
 	subscript: renderIconHtml(subscript),
 	superscript: renderIconHtml(superscript),
+	"small-caps": renderIconHtml(smallCaps),
 	code: renderIconHtml(bracketsCurly),
 	"code-block": renderIconHtml(code),
 	highlight: renderIconHtml(highlighter),
@@ -150,6 +152,11 @@ var TOOLBAR_LABELS = {
 	strikethrough: "Strikethrough",
 	subscript: "Subscript",
 	superscript: "Superscript",
+	"small-caps": "Small caps",
+	"font-family": "Font family",
+	"font-size": "Font size",
+	"text-color": "Text and background color",
+	"line-height": "Line height",
 	code: "Inline code",
 	"code-block": "Code block",
 	highlight: "Highlight",
@@ -176,11 +183,15 @@ var TOOLBAR_LABELS = {
 	redo: "Redo"
 };
 function getToolbarMenuItemLabel(buttonName) {
-	return TOOLBAR_LABELS[buttonName] ?? buttonName;
+	return TOOLBAR_LABELS[buttonName] ?? getRegisteredTiptapToolbarControl(buttonName)?.label ?? buttonName;
+}
+function getToolbarButtonIcon(buttonName) {
+	const registeredIcon = getRegisteredTiptapToolbarControl(buttonName)?.icon;
+	return TOOLBAR_ICONS[buttonName] ?? (registeredIcon ? renderIconHtml(registeredIcon) : void 0);
 }
 /** Prefix icon for `pk-dropdown-item` — SVG must carry `slot="prefix"` directly. */
 function createToolbarPrefixIcon(buttonName) {
-	const iconHtml = TOOLBAR_ICONS[buttonName];
+	const iconHtml = getToolbarButtonIcon(buttonName);
 	if (!iconHtml) return null;
 	const template = document.createElement("template");
 	template.innerHTML = iconHtml.trim();
@@ -311,6 +322,136 @@ var pkTiptapEditorStyles = i`
             letter-spacing: 0.02em;
         }
 
+        .toolbar-btn--text-style {
+            max-width: 9rem;
+            padding-inline: 0.5rem;
+        }
+
+        .toolbar-btn__text-style-value {
+            overflow: hidden;
+            font-size: var(--pk-font-size-xs);
+            line-height: 1;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .toolbar-btn--color .toolbar-btn__text-style-value {
+            min-width: 1rem;
+            border-bottom: 2px solid var(--text-style-trigger-color, currentColor);
+            color: var(--text-style-trigger-color, currentColor);
+            font-weight: 700;
+            text-align: center;
+        }
+
+        pk-dropdown-menu.text-style-palette::part(panel) {
+            display: grid;
+            grid-template-columns: repeat(5, 2rem);
+            gap: 0.625rem 0.75rem;
+            width: max-content;
+            min-width: 0;
+            padding: 1rem;
+        }
+
+        .text-style-palette__label {
+            grid-column: 1 / -1;
+            color: var(--pk-color-gray-900);
+        }
+
+        .text-style-palette__label::part(label) {
+            padding: 0 0 0.125rem;
+            font-size: var(--pk-font-size-base);
+            font-weight: 600;
+        }
+
+        .text-style-palette__label--highlight {
+            margin-top: 0.375rem;
+        }
+
+        .text-style-palette__option {
+            width: 2rem;
+            height: 2rem;
+            --pk-dropdown-item-gap: 0;
+            --pk-dropdown-item-icon-size: 1.625rem;
+        }
+
+        .text-style-palette__option::part(item) {
+            justify-content: center;
+            width: 2rem;
+            height: 2rem;
+            min-height: 0;
+            padding: 0;
+            border-radius: 50%;
+            background: transparent;
+        }
+
+        .text-style-palette__option:hover::part(item),
+        .text-style-palette__option:focus-within::part(item),
+        .text-style-palette__option[data-highlighted]::part(item),
+        .text-style-palette__option[checked]::part(item) {
+            background: transparent;
+        }
+
+        .text-style-palette__option::part(prefix) {
+            width: 1.625rem;
+            height: 1.625rem;
+        }
+
+        .text-style-palette__option::part(label) {
+            position: absolute;
+        }
+
+        .text-style-palette__option::part(check) {
+            display: none;
+        }
+
+        .text-style-palette__swatch {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 1.625rem;
+            height: 1.625rem;
+            box-sizing: border-box;
+            border: 1px solid rgba(15, 23, 42, 0.16);
+            border-radius: 50%;
+        }
+
+        /* Keep the state treatment concentric with the slotted swatch. The
+           dropdown item's shadow button is wider than its prefix in some hosts. */
+        .text-style-palette__option:hover .text-style-palette__swatch,
+        .text-style-palette__option:focus-within .text-style-palette__swatch,
+        .text-style-palette__option[data-highlighted] .text-style-palette__swatch,
+        .text-style-palette__option[checked] .text-style-palette__swatch {
+            box-shadow: 0 0 0 0.25rem var(--pk-color-slate-100);
+        }
+
+        .text-style-palette__swatch--text {
+            border-color: var(--text-style-swatch, rgba(15, 23, 42, 0.35));
+            color: var(--text-style-swatch, #1f2937);
+            font-size: var(--pk-font-size-base);
+            font-weight: 500;
+            line-height: 1;
+        }
+
+        .text-style-palette__swatch--highlight {
+            background: var(--text-style-swatch, #fff);
+        }
+
+        .text-style-palette__accessible-label {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+
+        .text-style-palette pk-tooltip {
+            display: contents;
+        }
+
         /* Full toolbar replace (slot=toolbar on host when hasCustomToolbar). */
         .toolbar ::slotted([slot='toolbar']) {
             display: contents;
@@ -445,6 +586,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		this._value = null;
 		this.buttons = "bold,italic";
 		this.toolbar = null;
+		this.textStyleOptions = null;
 		this.linkOptions = null;
 		this.rows = 4;
 		this.placeholder = "";
@@ -621,6 +763,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		});
 		queueMicrotask(() => {
 			this.attachSelectionListeners();
+			this.requestUpdate();
 		});
 	}
 	attachSelectionListeners() {
@@ -837,7 +980,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		return id;
 	}
 	getToolbarButtonLabel(buttonName) {
-		return TOOLBAR_LABELS[buttonName] ?? buttonName;
+		return TOOLBAR_LABELS[buttonName] ?? getRegisteredTiptapToolbarControl(buttonName)?.label ?? buttonName;
 	}
 	renderToolbarTooltip(buttonId, label) {
 		if (!this.toolbarTooltips) return A;
@@ -847,7 +990,9 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 	}
 	renderToolbarButton(buttonName) {
 		const editor = this.host.editor;
-		const icon = TOOLBAR_ICONS[buttonName];
+		const registered = getRegisteredTiptapToolbarControl(buttonName);
+		if (registered?.isVisible && (!editor || !registered.isVisible(editor))) return A;
+		const icon = getToolbarButtonIcon(buttonName);
 		const label = this.getToolbarButtonLabel(buttonName);
 		const buttonId = this.getToolbarButtonId(buttonName);
 		const active = editor ? isTiptapButtonActive(editor, buttonName) : false;
@@ -868,6 +1013,152 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
             </div>
         `;
 	}
+	get textStyleToolbarConfig() {
+		return resolveTiptapTextStyleToolbarConfig(this.textStyleOptions);
+	}
+	getTextStyleValue(attribute) {
+		const value = this.host.editor?.getAttributes("textStyle")[attribute];
+		return typeof value === "string" && value ? value : null;
+	}
+	setTextStyleValue(attribute, value) {
+		const editor = this.host.editor;
+		if (!editor) return;
+		const chain = editor.chain().focus();
+		switch (attribute) {
+			case "fontFamily":
+				value ? chain.setFontFamily(value).run() : chain.unsetFontFamily().run();
+				break;
+			case "fontSize":
+				value ? chain.setFontSize(value).run() : chain.unsetFontSize().run();
+				break;
+			case "color":
+				value ? chain.setColor(value).run() : chain.unsetColor().run();
+				break;
+			case "backgroundColor":
+				value ? chain.setBackgroundColor(value).run() : chain.unsetBackgroundColor().run();
+				break;
+			case "lineHeight":
+				value ? chain.setLineHeight(value).run() : chain.unsetLineHeight().run();
+				break;
+		}
+	}
+	getTextStyleOptionLabel(options, value) {
+		return options.find((option) => option.value === value)?.label ?? options.find((option) => option.value === null)?.label ?? "Default";
+	}
+	renderTextStyleOptions(attribute, options) {
+		const currentValue = this.getTextStyleValue(attribute);
+		return options.map((option) => b`
+            <pk-dropdown-item
+                type="radio"
+                radio-group=${attribute}
+                value=${option.value ?? ""}
+                ?checked=${option.value === currentValue}
+                @click=${() => this.setTextStyleValue(attribute, option.value)}
+            >
+                ${option.label}
+            </pk-dropdown-item>
+        `);
+	}
+	renderTextStylePaletteOptions(attribute, options, idPrefix) {
+		const currentValue = this.getTextStyleValue(attribute);
+		const isTextColor = attribute === "color";
+		return options.map((option, index) => {
+			const optionId = `${idPrefix}-${attribute}-${index}`;
+			const accessibleLabel = option.value ? `${option.label} ${isTextColor ? "text" : "highlight"}` : isTextColor ? "Default text color" : "No highlight";
+			return b`
+                <pk-dropdown-item
+                    id=${optionId}
+                    class="text-style-palette__option"
+                    type="radio"
+                    radio-group=${attribute}
+                    value=${option.value ?? ""}
+                    ?checked=${option.value === currentValue}
+                    @click=${() => this.setTextStyleValue(attribute, option.value)}
+                >
+                    <span
+                        slot="start"
+                        class="text-style-palette__swatch ${isTextColor ? "text-style-palette__swatch--text" : "text-style-palette__swatch--highlight"}"
+                        style=${option.value ? `--text-style-swatch:${option.value}` : ""}
+                        data-empty=${option.value === null ? "" : A}
+                        aria-hidden="true"
+                    >${isTextColor ? "A" : A}</span>
+                    <span class="text-style-palette__accessible-label">${accessibleLabel}</span>
+                </pk-dropdown-item>
+                ${this.toolbarTooltips ? b`
+                    <pk-tooltip for=${optionId} content=${accessibleLabel} placement="top"></pk-tooltip>
+                ` : A}
+            `;
+		});
+	}
+	handleTextStylePaletteKeyDown(event) {
+		const delta = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -5,
+			ArrowDown: 5
+		}[event.key];
+		if (!delta) return;
+		const menu = event.currentTarget;
+		const item = event.composedPath().find((node) => node instanceof HTMLElement && node.localName === "pk-dropdown-item" && node.classList.contains("text-style-palette__option"));
+		const items = menu.getItems().filter((candidate) => candidate.classList.contains("text-style-palette__option"));
+		const index = item ? items.indexOf(item) : -1;
+		if (index === -1) return;
+		const target = items[Math.max(0, Math.min(index + delta, items.length - 1))];
+		event.preventDefault();
+		event.stopPropagation();
+		target?.focusControl();
+	}
+	renderTextStyleToolbar(buttonName) {
+		const config = this.textStyleToolbarConfig;
+		const buttonId = this.getToolbarButtonId(buttonName);
+		const triggerColor = buttonName === "text-color" ? this.getTextStyleValue("color") : null;
+		let triggerLabel = "";
+		let menuContent = A;
+		if (buttonName === "font-family") {
+			triggerLabel = this.getTextStyleOptionLabel(config.fontFamilies, this.getTextStyleValue("fontFamily"));
+			menuContent = b`${this.renderTextStyleOptions("fontFamily", config.fontFamilies)}`;
+		} else if (buttonName === "font-size") {
+			triggerLabel = this.getTextStyleOptionLabel(config.fontSizes, this.getTextStyleValue("fontSize"));
+			menuContent = b`${this.renderTextStyleOptions("fontSize", config.fontSizes)}`;
+		} else if (buttonName === "line-height") {
+			triggerLabel = this.getTextStyleOptionLabel(config.lineHeights, this.getTextStyleValue("lineHeight"));
+			menuContent = b`${this.renderTextStyleOptions("lineHeight", config.lineHeights)}`;
+		} else {
+			triggerLabel = "A";
+			menuContent = b`
+                <pk-dropdown-label class="text-style-palette__label">Text color</pk-dropdown-label>
+                ${this.renderTextStylePaletteOptions("color", config.textColors, buttonId)}
+                <pk-dropdown-label class="text-style-palette__label text-style-palette__label--highlight">Highlight color</pk-dropdown-label>
+                ${this.renderTextStylePaletteOptions("backgroundColor", config.backgroundColors, buttonId)}
+            `;
+		}
+		const label = this.getToolbarButtonLabel(buttonName);
+		return b`
+            <div class="toolbar-item">
+                <button
+                    id=${buttonId}
+                    type="button"
+                    class="toolbar-btn toolbar-btn--menu toolbar-btn--text-style ${buttonName === "text-color" ? "toolbar-btn--color" : ""}"
+                    aria-label=${label}
+                    aria-haspopup="menu"
+                    ?disabled=${this.disabled || this.readonly}
+                    style=${triggerColor ? `--text-style-trigger-color:${triggerColor}` : ""}
+                >
+                    <span class="toolbar-btn__text-style-value">${triggerLabel}</span>
+                    <span class="toolbar-btn__chevron">${o(TOOLBAR_CHEVRON_HTML)}</span>
+                </button>
+                ${this.renderToolbarTooltip(buttonId, label)}
+                <pk-dropdown-menu
+                    for=${buttonId}
+                    placement="bottom-start"
+                    class=${buttonName === "text-color" ? "text-style-palette" : ""}
+                    @keydown=${buttonName === "text-color" ? this.handleTextStylePaletteKeyDown : A}
+                >
+                    ${menuContent}
+                </pk-dropdown-menu>
+            </div>
+        `;
+	}
 	handleCraftLink(config) {
 		const editor = this.host.editor;
 		if (!editor) return;
@@ -897,7 +1188,7 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		return b`<span class="toolbar-separator" aria-hidden="true"></span>`;
 	}
 	renderGroupTriggerContent(group, triggerLabel, iconName) {
-		const icon = TOOLBAR_ICONS[iconName];
+		const icon = getToolbarButtonIcon(iconName);
 		if (Boolean(group.label) && triggerLabel) return b`
                 <span class="toolbar-btn__trigger-label">${triggerLabel}</span>
                 <span class="toolbar-btn__chevron">${o(TOOLBAR_CHEVRON_HTML)}</span>
@@ -916,7 +1207,12 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 			isActive: false,
 			icon: group.icon ?? getToolbarGroupDefaultIcon(group)
 		};
-		const menuItems = getToolbarGroupMenuItems(group);
+		const menuItems = getToolbarGroupMenuItems(group).filter((entry) => {
+			if (entry.type === "separator") return true;
+			const control = getRegisteredTiptapToolbarControl(entry.name);
+			return !control?.isVisible || Boolean(editor && control.isVisible(editor));
+		});
+		if (!menuItems.some((entry) => entry.type === "item")) return A;
 		const tooltipLabel = group.label ?? (isHeadingsOnlyToolbarPreset(group.preset) ? "Headings" : isFormattingToolbarPreset(group.preset) ? "Formatting" : group.preset === "lists" ? "Lists" : group.preset === "align" ? "Alignment" : "More");
 		return b`
             <div class="toolbar-item">
@@ -958,6 +1254,12 @@ var PkTiptapEditor = class PkTiptapEditor extends PkFormAssociatedElement {
 		if (node.type === "separator") return this.renderToolbarSeparator();
 		if (node.type === "group") return this.renderToolbarGroup(node.group, `group-${index}`);
 		if (node.name === "link") return this.renderLinkToolbarButton();
+		if ([
+			"font-family",
+			"font-size",
+			"text-color",
+			"line-height"
+		].includes(node.name)) return this.renderTextStyleToolbar(node.name);
 		return this.renderToolbarButton(node.name);
 	}
 	renderDefaultToolbar() {
@@ -1051,6 +1353,20 @@ __decorate([n({
 		}
 	}
 })], PkTiptapEditor.prototype, "toolbar", void 0);
+__decorate([n({
+	attribute: "text-style-options",
+	converter: {
+		fromAttribute: (value) => {
+			if (!value) return null;
+			try {
+				return JSON.parse(value);
+			} catch {
+				return null;
+			}
+		},
+		toAttribute: (value) => value ? JSON.stringify(value) : null
+	}
+})], PkTiptapEditor.prototype, "textStyleOptions", void 0);
 __decorate([n({ attribute: "link-options" })], PkTiptapEditor.prototype, "linkOptions", void 0);
 __decorate([n({ attribute: "link-selector-storage-key-prefix" })], PkTiptapEditor.prototype, "linkSelectorStorageKeyPrefix", void 0);
 __decorate([n({ type: Number })], PkTiptapEditor.prototype, "rows", void 0);

package/dist-loader/components/tiptap/tiptap-input.js

@@ -1,8 +1,8 @@
 import { c as r, l as n, m as i, p as b, s as e, u as customElement } from "../../chunks/lit-DpLik9Rf.js";
 import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "../../chunks/pk-base-CyzwylQ7.js";
 import { t as MirrorValidator } from "../../chunks/mirror-validator-C5XrXPaq.js";
-import { k as Editor } from "../../chunks/tiptap-Db7MTUH1.js";
-import { C as contentToValue, E as valueToContent, T as flattenVariableOptions, i as createVariableTagDomNodeView, j as createTiptapInputExtensions, n as tiptapInputProseMirrorStyles, w as dedupeVariableOptions } from "../../chunks/tiptap.styles-BFGP4eTV.js";
+import { A as Editor } from "../../chunks/tiptap-CgXkiK8d.js";
+import { C as contentToValue, E as valueToContent, M as createTiptapInputExtensions, T as flattenVariableOptions, i as createVariableTagDomNodeView, n as tiptapInputProseMirrorStyles, w as dedupeVariableOptions } from "../../chunks/tiptap.styles-C0E1NpSx.js";
 //#region src/components/tiptap/pk-tiptap-input.styles.ts
 var pkTiptapInputStyles = i`
     @layer pk-component {

package/dist-loader/components/tooltip/tooltip.js

@@ -1,2 +1,2 @@
-import { t as PkTooltip } from "../../chunks/pk-tooltip-BS2dNLOS.js";
+import { t as PkTooltip } from "../../chunks/pk-tooltip-Dd_Q0Bn5.js";
 export { PkTooltip };

package/package.json

@@ -1,6 +1,9 @@
 {
     "name": "@verbb/plugin-kit-web",
-    "version": "2.0.16",
+    "version": "2.0.17",
+    "repository": {
+        "url": "git+https://github.com/verbb/plugin-kit.git"
+    },
     "description": "Plugin Kit web components (shadow DOM, Craft design system)",
     "type": "module",
     "types": "dist/index.d.ts",
@@ -1024,18 +1027,18 @@
     },
     "peerDependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@verbb/plugin-kit-core": "^2.0.16",
-        "@verbb/plugin-kit-icons": "^2.0.16",
+        "@verbb/plugin-kit-core": "^2.0.17",
+        "@verbb/plugin-kit-icons": "^2.0.17",
         "lit": "^3.3.0"
     },
     "license": "MIT",
     "dependencies": {
         "@floating-ui/dom": "^1.7.3",
-        "@tiptap/core": "^3.22.4",
-        "@verbb/plugin-kit-codemirror-core": "2.0.16",
-        "@verbb/plugin-kit-core": "^2.0.16",
-        "@verbb/plugin-kit-icons": "^2.0.16",
-        "@verbb/plugin-kit-tiptap-core": "^2.0.16",
+        "@tiptap/core": "3.22.4",
+        "@verbb/plugin-kit-codemirror-core": "2.0.17",
+        "@verbb/plugin-kit-core": "^2.0.17",
+        "@verbb/plugin-kit-icons": "^2.0.17",
+        "@verbb/plugin-kit-tiptap-core": "^2.0.17",
         "composed-offset-position": "^0.0.6",
         "lit": "^3.3.0"
     },

package/dist/chunks/pk-dropdown-item-BZQS87U0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pk-dropdown-item-BZQS87U0.js","names":[],"sources":["../../src/components/dropdown-menu/dropdown-menu-size.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.styles.ts","../../src/components/dropdown-menu/pk-dropdown-item.ts"],"sourcesContent":["import { css } from 'lit';\n\nconst dropdownMenuSizeTokens = {\n    default: css`\n        --pk-dropdown-item-padding-block: 8px;\n        --pk-dropdown-item-padding-inline: 12px;\n        --pk-dropdown-item-gap: 0.625rem;\n        --pk-dropdown-item-font-size: var(--pk-font-size-base);\n        --pk-dropdown-item-line-height: 1.5;\n        --pk-dropdown-item-icon-size: 12px;\n        --pk-dropdown-label-padding-inline: 12px;\n        --pk-dropdown-label-font-size: 13px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n    `,\n    xs: css`\n        --pk-dropdown-item-padding-block: 3px;\n        --pk-dropdown-item-padding-inline: 8px;\n        --pk-dropdown-item-gap: 0.375rem;\n        --pk-dropdown-item-font-size: 12px;\n        --pk-dropdown-item-line-height: 1.5;\n        --pk-dropdown-item-icon-size: 10px;\n        --pk-dropdown-label-padding-inline: 8px;\n        --pk-dropdown-label-font-size: 11px;\n        --pk-dropdown-details-font-size: 11px;\n    `,\n    sm: css`\n        --pk-dropdown-item-padding-block: 4px;\n        --pk-dropdown-item-padding-inline: 10px;\n        --pk-dropdown-item-gap: 0.4375rem;\n        --pk-dropdown-item-font-size: 13px;\n        --pk-dropdown-item-line-height: 1.5;\n        --pk-dropdown-item-icon-size: 12px;\n        --pk-dropdown-label-padding-inline: 10px;\n        --pk-dropdown-label-font-size: 11px;\n        --pk-dropdown-details-font-size: 12px;\n    `,\n    lg: css`\n        --pk-dropdown-item-padding-block: 10px;\n        --pk-dropdown-item-padding-inline: 14px;\n        --pk-dropdown-item-gap: 0.75rem;\n        --pk-dropdown-item-font-size: 16px;\n        --pk-dropdown-item-line-height: 1.5;\n        --pk-dropdown-item-icon-size: 14px;\n        --pk-dropdown-label-padding-inline: 14px;\n        --pk-dropdown-label-font-size: 14px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-sm);\n    `,\n    xl: css`\n        --pk-dropdown-item-padding-block: 12px;\n        --pk-dropdown-item-padding-inline: 16px;\n        --pk-dropdown-item-gap: 0.75rem;\n        --pk-dropdown-item-font-size: 18px;\n        --pk-dropdown-item-line-height: 1.5;\n        --pk-dropdown-item-icon-size: 16px;\n        --pk-dropdown-label-padding-inline: 16px;\n        --pk-dropdown-label-font-size: 15px;\n        --pk-dropdown-details-font-size: var(--pk-font-size-base);\n    `,\n} as const;\n\n/** Size tokens on `pk-dropdown-menu` — cascades to light-DOM menu children. */\nexport const dropdownMenuHostSizeStyles = css`\n    @layer pk-component {\n        :host {\n            ${dropdownMenuSizeTokens.default}\n        }\n\n        :host([size='xs']) {\n            ${dropdownMenuSizeTokens.xs}\n        }\n\n        :host([size='sm']) {\n            ${dropdownMenuSizeTokens.sm}\n        }\n\n        :host([size='lg']) {\n            ${dropdownMenuSizeTokens.lg}\n        }\n\n        :host([size='xl']) {\n            ${dropdownMenuSizeTokens.xl}\n        }\n    }\n`;\n\n/**\n * Size tokens on popup panels.\n * Do not include bare `:host` here; importing this in `pk-dropdown-item`\n * would reset every item back to the default size.\n */\nexport const dropdownMenuPanelSizeStyles = css`\n    @layer pk-component {\n        .panel[data-size='default'],\n        .submenu-panel[data-size='default'] {\n            ${dropdownMenuSizeTokens.default}\n        }\n\n        .panel[data-size='xs'],\n        .submenu-panel[data-size='xs'] {\n            ${dropdownMenuSizeTokens.xs}\n        }\n\n        .panel[data-size='sm'],\n        .submenu-panel[data-size='sm'] {\n            ${dropdownMenuSizeTokens.sm}\n        }\n\n        .panel[data-size='lg'],\n        .submenu-panel[data-size='lg'] {\n            ${dropdownMenuSizeTokens.lg}\n        }\n\n        .panel[data-size='xl'],\n        .submenu-panel[data-size='xl'] {\n            ${dropdownMenuSizeTokens.xl}\n        }\n    }\n`;\n\n/** @deprecated Use dropdownMenuHostSizeStyles + dropdownMenuPanelSizeStyles. */\nexport const dropdownMenuSizeStyles = css`\n    ${dropdownMenuHostSizeStyles}\n    ${dropdownMenuPanelSizeStyles}\n`;\n","import { css } from 'lit';\n\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\nimport { dropdownMenuPanelSizeStyles } from './dropdown-menu-size.styles.js';\n\nexport const pkDropdownItemStyles = [\n    popupContentAnimationStyles,\n    dropdownMenuPanelSizeStyles,\n    css`\n    @layer pk-component {\n        :host {\n            display: block;\n            position: relative;\n            /*\n             * Slotted label text inherits from this host (light DOM), not from\n             * shadow .item — pin size-token metrics so Craft CP / Tailwind /\n             * bare hosts all get the same item rhythm.\n             */\n            font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-dropdown-item-line-height, 1.5);\n            color: var(--text-color, var(--pk-color-gray-700));\n        }\n\n        .item {\n            display: flex;\n            align-items: center;\n            gap: var(--pk-dropdown-item-gap, 0.625rem);\n            width: 100%;\n            margin: 0;\n            padding: var(--pk-dropdown-item-padding-block, 8px) var(--pk-dropdown-item-padding-inline, 12px);\n            border: 0;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            font-size: var(--pk-dropdown-item-font-size, var(--pk-font-size-base));\n            /* Explicit — do not let font:inherit re-leak page line-height. */\n            line-height: var(--pk-dropdown-item-line-height, 1.5);\n            font-weight: normal;\n            text-align: left;\n            white-space: nowrap;\n            cursor: default;\n            user-select: none;\n            outline: none;\n            box-sizing: border-box;\n        }\n\n        .item:hover:not([disabled]):not([aria-disabled='true']),\n        :host([data-highlighted]) .item,\n        :host([submenu-open]) .item {\n            background: var(--pk-color-slate-100);\n        }\n\n        .item:focus-visible {\n            background: var(--pk-color-slate-100);\n        }\n\n        .item[aria-disabled='true'] {\n            pointer-events: none;\n            opacity: 0.5;\n        }\n\n        .label {\n            flex: 1 1 auto;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n        }\n\n        .prefix {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-dropdown-item-icon-size, 12px);\n            height: var(--pk-dropdown-item-icon-size, 12px);\n            line-height: 0;\n        }\n\n        .prefix--empty {\n            display: none;\n        }\n\n        .prefix ::slotted(*) {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-dropdown-item-icon-size, 12px);\n            height: var(--pk-dropdown-item-icon-size, 12px);\n            /* Kill pk-icon text-baseline nudge inside the padded flex row. */\n            vertical-align: 0;\n        }\n\n        .prefix ::slotted(svg),\n        .prefix ::slotted(*) svg,\n        .prefix ::slotted(.pk-dropdown-item__prefix-icon) {\n            display: block;\n            width: var(--pk-dropdown-item-icon-size, 12px) !important;\n            height: var(--pk-dropdown-item-icon-size, 12px) !important;\n            max-width: var(--pk-dropdown-item-icon-size, 12px);\n            max-height: var(--pk-dropdown-item-icon-size, 12px);\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .details {\n            margin-left: auto;\n            color: var(--pk-color-gray-500);\n            font-size: var(--pk-dropdown-details-font-size, var(--pk-font-size-sm));\n            letter-spacing: 0.04em;\n        }\n\n        .details:empty {\n            display: none;\n        }\n\n        .check {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: 12px;\n            height: 12px;\n            color: var(--pk-color-gray-700);\n        }\n\n        .check svg {\n            display: block;\n            width: 12px;\n            height: 12px;\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .submenu-icon {\n            display: inline-flex;\n            flex: 0 0 auto;\n            align-items: center;\n            justify-content: center;\n            width: 1rem;\n            color: var(--pk-color-gray-700);\n        }\n\n        .submenu-icon svg {\n            display: block;\n            width: 1em;\n            height: 1em;\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .check {\n            opacity: 0;\n        }\n\n        :host([checked]) .check {\n            opacity: 1;\n        }\n\n        :host([type='checkbox']) .check,\n        :host([type='radio']) .check {\n            margin-left: auto;\n        }\n\n        :host([type='checkbox'][checked]) .check,\n        :host([type='radio'][checked]) .check {\n            opacity: 1;\n        }\n\n        .submenu-icon:empty {\n            display: none;\n        }\n\n        :host([destructive]) .item {\n            color: var(--pk-color-error);\n        }\n\n        :host([destructive]) .item:hover:not([disabled]):not([aria-disabled='true']),\n        :host([destructive]) .item:focus-visible {\n            color: var(--pk-color-error);\n        }\n\n        .submenu-panel {\n            width: max-content;\n            min-width: 8rem;\n            overflow: hidden;\n            padding: 4px 0;\n            border-radius: var(--pk-radius-md);\n            background: var(--pk-color-white);\n            box-shadow: var(--pk-shadow-popup);\n            /* Match root menu panel — Craft body text, not gray-900. */\n            color: var(--text-color, var(--pk-color-gray-700));\n        }\n\n        .submenu-panel ::slotted(pk-dropdown-item),\n        .submenu-panel ::slotted(pk-dropdown-separator),\n        .submenu-panel ::slotted(pk-dropdown-label) {\n            display: block;\n        }\n\n        .submenu-panel[hidden] {\n            display: none !important;\n        }\n    }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { check, chevronRight } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { renderIconHtml } from '../../icons/render.js';\nimport {\n    syncPopupPlacementAnimation,\n    waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { pkDropdownItemStyles } from './pk-dropdown-item.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\nconst SUBMENU_ICON = renderIconHtml(chevronRight);\n\nexport type PkDropdownItemType = 'normal' | 'checkbox' | 'radio';\n\ntype PkDropdownMenuSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Dropdown menu item — use inside `pk-dropdown-menu`.\n *\n * @slot - Item label\n * @slot start - Leading icon (preferred; matches pk-button)\n * @slot prefix - Alias for `start` (legacy)\n * @slot details - Trailing shortcut text\n * @slot submenu - Nested menu items (`pk-dropdown-item`, separators, labels)\n *\n * @csspart item - Menu item button\n * @csspart prefix - Leading icon wrapper (hidden when empty)\n */\n@customElement('pk-dropdown-item')\nexport class PkDropdownItem extends PkElement {\n    static override styles = pkDropdownItemStyles;\n\n    @property()\n    value = '';\n\n    @property({ reflect: true })\n    type: PkDropdownItemType = 'normal';\n\n    @property({ attribute: 'radio-group' })\n    radioGroup = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    destructive = false;\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ attribute: 'submenu-open', type: Boolean, reflect: true })\n    submenuOpen = false;\n\n    /**\n     * Roving highlight index for keyboard nav (`active`).\n     * Visual chrome uses `:focus-visible` / hover — not this flag — so mouse-open\n     * does not paint the first item selected (initial open).\n     */\n    @property({ type: Boolean })\n    active = false;\n\n    @state()\n    private submenuAnimated = false;\n\n    @query('.submenu-panel')\n    private submenuPanelElement!: HTMLDivElement;\n\n    @query('pk-popup')\n    private submenuPopupElement!: HTMLElement;\n\n    private readonly hasSlotController = new HasSlotController(this, 'submenu', 'details', 'start', 'prefix');\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncRole();\n        this.syncSubmenuAria();\n        this.addEventListener('click', this.handleHostClick);\n        // Bind mouseenter on the host — covers the whole row, not just the button.\n        this.addEventListener('mouseenter', this.handleMouseEnter);\n    }\n\n    override disconnectedCallback(): void {\n        this.removeEventListener('click', this.handleHostClick);\n        this.removeEventListener('mouseenter', this.handleMouseEnter);\n        this.closeSubmenu();\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: Map<string, unknown>): void {\n        if (changed.has('type') || changed.has('checked')) {\n            this.syncRole();\n        }\n\n        if (changed.has('submenuOpen') || changed.size === 0) {\n            this.syncSubmenuAria();\n        }\n\n        // Keyboard / external callers set `submenuOpen`; mouse path goes through openSubmenu().\n        if (changed.has('submenuOpen')) {\n            if (this.submenuOpen) {\n                this.ensureSubmenuSurface();\n            } else {\n                this.submenuAnimated = false;\n            }\n        }\n    }\n\n    /** Light-DOM `slot=\"submenu\"` — public for menu keyboard (`hasSubmenu`). */\n    hasSubmenu(): boolean {\n        return this.hasSlotController.test('submenu');\n    }\n\n    private syncSubmenuAria(): void {\n        const hasSubmenu = this.hasSubmenu();\n\n        if (hasSubmenu) {\n            this.setAttribute('aria-haspopup', 'menu');\n        } else {\n            this.removeAttribute('aria-haspopup');\n        }\n\n        this.setAttribute('aria-expanded', hasSubmenu && this.submenuOpen ? 'true' : 'false');\n    }\n\n    focusControl(): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.item')?.focus({ preventScroll: true });\n    }\n\n    /** Callers `item.focus()` — route into the shadow control button. */\n    override focus(options?: FocusOptions): void {\n        const button = this.shadowRoot?.querySelector<HTMLButtonElement>('.item');\n\n        if (button) {\n            button.focus(options);\n            return;\n        }\n\n        super.focus(options);\n    }\n\n    /** Public for menu leave-detection (`submenuElement`). */\n    get submenuElement(): HTMLDivElement | null {\n        return this.submenuPanelElement ?? null;\n    }\n\n    closeSubmenu(): void {\n        this.submenuAnimated = false;\n        this.submenuOpen = false;\n    }\n\n    /**\n     * Opens the nested submenu panel (mouse + keyboard).\n     * notify parent first so siblings close, then set `submenuOpen`.\n     */\n    openSubmenu(): void {\n        if (!this.hasSubmenu() || this.disabled || !this.isConnected) {\n            return;\n        }\n\n        this.notifyParentOfOpening();\n        this.submenuOpen = true;\n    }\n\n    /** `notifyParentOfOpening` — sibling close + bubble to the menu. */\n    private notifyParentOfOpening(): void {\n        this.dispatchEvent(new CustomEvent('pk-submenu-open', {\n            bubbles: true,\n            composed: true,\n            detail: { item: this },\n        }));\n\n        const parent = this.parentElement;\n\n        if (!parent) {\n            return;\n        }\n\n        // Same slot + same light-DOM parent = siblings (top-level or nested submenu).\n        for (const el of parent.children) {\n            if (\n                el !== this\n                && el instanceof PkDropdownItem\n                && el.getAttribute('slot') === this.getAttribute('slot')\n                && el.submenuOpen\n            ) {\n                el.submenuOpen = false;\n            }\n        }\n    }\n\n    private ensureSubmenuSurface(): void {\n        if (!this.hasSubmenu() || this.disabled) {\n            return;\n        }\n\n        this.submenuAnimated = true;\n\n        void this.updateComplete.then(() => {\n            if (!this.submenuOpen || !this.submenuPanelElement) {\n                return;\n            }\n\n            this.submenuPanelElement.hidden = false;\n            syncPopupPlacementAnimation(this.submenuPanelElement, 'right-start');\n\n            void waitForPopupReposition(this.submenuPopupElement, 'right-start').then((placement) => {\n                syncPopupPlacementAnimation(this.submenuPanelElement, placement);\n            });\n        });\n    }\n\n    private syncRole(): void {\n        if (this.type === 'checkbox') {\n            this.setAttribute('role', 'menuitemcheckbox');\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n            return;\n        }\n\n        if (this.type === 'radio') {\n            this.setAttribute('role', 'menuitemradio');\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n            return;\n        }\n\n        this.setAttribute('role', 'menuitem');\n        this.removeAttribute('aria-checked');\n    }\n\n    /** `handleMouseEnter` — open on hover; siblings close via notify. */\n    private handleMouseEnter = (): void => {\n        if (!this.hasSubmenu() || this.disabled) {\n            return;\n        }\n\n        this.notifyParentOfOpening();\n        this.submenuOpen = true;\n    };\n\n    /** Host has `role=\"menuitem\"` — block disabled activation; selection is handled by `pk-dropdown-menu`. */\n    private handleHostClick = (event: Event): void => {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n        }\n    };\n\n    private handleClick(event: Event): void {\n        if (this.disabled) {\n            event.preventDefault();\n            event.stopImmediatePropagation();\n            return;\n        }\n\n        if (this.hasSubmenu()) {\n            event.preventDefault();\n            this.openSubmenu();\n        }\n    }\n\n    override render() {\n        const hasSubmenu = this.hasSubmenu();\n        const showCheck = this.type === 'checkbox' || this.type === 'radio';\n        // Prefer start (button parity); prefix kept as legacy alias.\n        const hasLeadingIcon = this.hasSlotController.test('start') || this.hasSlotController.test('prefix');\n\n        return html`\n            <button\n                part=\"item\"\n                type=\"button\"\n                class=\"item\"\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                @click=${this.handleClick}\n            >\n                <span\n                    part=\"prefix\"\n                    class=${hasLeadingIcon ? 'prefix' : 'prefix prefix--empty'}\n                >\n                    <slot name=\"start\"></slot>\n                    <slot name=\"prefix\"></slot>\n                </span>\n                <span class=\"label\"><slot></slot></span>\n                <span class=\"details\"><slot name=\"details\"></slot></span>\n                ${showCheck ? html`<span class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>` : nothing}\n                ${hasSubmenu ? html`<span class=\"submenu-icon\" aria-hidden=\"true\">${unsafeSVG(SUBMENU_ICON)}</span>` : nothing}\n            </button>\n            ${hasSubmenu ? html`\n                <pk-popup\n                    .active=${this.submenuOpen}\n                    .anchor=${this}\n                    placement=\"right-start\"\n                    .distance=${0}\n                    .skidding=${-4}\n                    flip\n                    shift\n                    hover-bridge\n                    style=\"--pk-popup-z-index: 1001\"\n                >\n                    <div\n                        part=\"submenu\"\n                        class=\"submenu-panel pk-popup-content\"\n                        role=\"menu\"\n                        data-size=${resolveMenuSize(this)}\n                        ?hidden=${!this.submenuOpen}\n                        data-open=${this.submenuAnimated ? '' : nothing}\n                        aria-orientation=\"vertical\"\n                    >\n                        <slot name=\"submenu\"></slot>\n                    </div>\n                </pk-popup>\n            ` : nothing}\n        `;\n    }\n}\n\nfunction resolveMenuSize(item: PkDropdownItem): PkDropdownMenuSize {\n    const panelSize = item.parentElement?.getAttribute('data-size');\n\n    if (panelSize === 'xs' || panelSize === 'sm' || panelSize === 'default' || panelSize === 'lg' || panelSize === 'xl') {\n        return panelSize;\n    }\n\n    const menu = item.closest('pk-dropdown-menu');\n    const menuSize = menu?.getAttribute('size');\n\n    if (menuSize === 'xs' || menuSize === 'sm' || menuSize === 'lg' || menuSize === 'xl') {\n        return menuSize;\n    }\n\n    return 'default';\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-dropdown-item': PkDropdownItem;\n    }\n}\n"],"mappings":"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"}