@verbb/plugin-kit-web 2.0.15 → 2.0.17

package/dist-loader/chunks/{pk-combobox-B7q6alzE.js → pk-combobox-Cpx0w1KV.js}

@@ -1,17 +1,18 @@
 import { d as registerDismissible, f as unregisterDismissible, n as uniqueId, s as scrollIntoView, t as LiveRegion, u as isTopDismissible } from "./pk-a11y-CjB4-U-R.js";
 import { a as o, c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, i as PkFormAssociatedElement, s as iconStyles } from "./pk-base-B21zXxSo.js";
-import { Y as xmark, h as chevronDown } from "./svg-_Mtb7CHx.js";
+import { c as __decorate, i as PkFormAssociatedElement, s as iconStyles } from "./pk-base-CyzwylQ7.js";
+import { X as xmark, h as chevronDown } from "./svg-Bz-bXZn7.js";
 import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
 import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
 import { t as PkClearEvent } from "./pk-clear-BMZUzwDt.js";
-import { n as renderIconHtml } from "./render-Niz5wYRa.js";
+import { n as renderIconHtml } from "./render-Bnzcxfss.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-C3tSQ3UR.js";
 import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
 import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-duCg9-CH.js";
-import "./pk-popup-FDdBxb4k.js";
-import { n as isPointerInsideOverlay, t as isEventInsideOverlay } from "./popup-pointer-caPc8kwB.js";
-import { a as isListboxTypeToSelectKey, i as handleListboxKeyDown, n as LISTBOX_NAVIGATION_KEYS, t as syncListboxSeparators } from "./sync-listbox-separators-Dk_E_IVa.js";
+import "./pk-popup-CrxxR-Hb.js";
+import { n as isPointerInsideOverlay, t as isEventInsideOverlay } from "./popup-pointer-Ck28WdVP.js";
+import { a as isListboxTypeToSelectKey, i as handleListboxKeyDown, n as LISTBOX_NAVIGATION_KEYS } from "./sync-listbox-separators-Ch5krDUs.js";
+import { i as waitForPopupContentExitAnimation, n as AsyncOptionFetcher, r as syncFilteredOptions, t as matchesOptionFilter } from "./option-filter-Bc5aNNT0.js";
 //#region src/events/pk-create.ts
 /** Fired before a combobox creates a new option — mirrors  `pk-create`. */
 var PkCreateEvent = class extends Event {
@@ -191,7 +192,8 @@ var pkComboboxStyles = [popupContentAnimationStyles, i`
             outline: none;
         }
 
-        /* Trailing control absorbs the control's inline-end padding into its hit box. */
+        /* Trailing control absorbs the control's inline-end padding into its hit box,
+           with the same 4px glyph inset as pk-copy-button[slot=end]. */
         .control > .expand-button,
         .control > .clear-button:last-child {
             width: calc(
@@ -199,7 +201,7 @@ var pkComboboxStyles = [popupContentAnimationStyles, i`
                     var(--pk-combobox-padding-inline)
             );
             margin-inline-start: calc(-0.5 * var(--pk-combobox-control-gap));
-            margin-inline-end: calc(-1 * var(--pk-combobox-padding-inline));
+            margin-inline-end: calc(-1 * var(--pk-combobox-padding-inline) + 4px);
         }
 
         .icon-button:disabled,
@@ -799,8 +801,8 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.panelAnimated = false;
 		this.dismissRegistered = false;
 		this.panelEventTarget = null;
-		this.asyncFetchRequestId = 0;
 		this.selectedOptionMeta = null;
+		this.asyncFetcher = null;
 		this.asyncLoading = false;
 		this.asyncError = null;
 		this.handleOptionsMutation = (options = {}) => {
@@ -986,8 +988,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.optionsObserver?.disconnect();
 		this.liveRegion?.destroy();
 		this.liveRegion = void 0;
-		window.clearTimeout(this.asyncFetchTimer);
-		this.fetchAbortController?.abort();
+		this.asyncFetcher?.cancel();
 		this.closePanel("api");
 		super.disconnectedCallback();
 	}
@@ -1063,15 +1064,8 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		const group = option.closest("pk-option-group");
 		return Boolean(group?.hidden);
 	}
-	defaultFilter(option, query) {
-		const label = option.getLabel().toLowerCase();
-		const value = option.value.toLowerCase();
-		const searchText = (option.getSearchText?.() ?? label).toLowerCase();
-		return label.includes(query) || value.includes(query) || searchText.includes(query);
-	}
 	matchesFilter(option, query) {
-		if (this.filter) return this.filter(option, query);
-		return this.defaultFilter(option, query);
+		return matchesOptionFilter(option, query, this.filter);
 	}
 	getFilterQuery() {
 		if (!this.open) return "";
@@ -1142,37 +1136,31 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		};
 	}
 	scheduleAsyncFetch(query) {
-		window.clearTimeout(this.asyncFetchTimer);
-		this.asyncFetchTimer = window.setTimeout(() => {
-			this.runAsyncFetch(query);
-		}, 200);
-	}
-	async runAsyncFetch(query) {
-		if (!this.fetchOptions) return;
-		const requestId = ++this.asyncFetchRequestId;
-		this.fetchAbortController?.abort();
-		this.fetchAbortController = new AbortController();
-		if (!query) {
-			this.asyncLoading = false;
-			this.asyncError = null;
-			this.renderAsyncOptionNodes(this.value && this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
-			return;
-		}
-		this.asyncLoading = true;
-		this.asyncError = null;
-		try {
-			const results = await this.fetchOptions(query, this.fetchAbortController.signal);
-			if (requestId !== this.asyncFetchRequestId) return;
-			this.renderAsyncOptionNodes(results);
-		} catch (error) {
-			if (this.fetchAbortController?.signal.aborted || requestId !== this.asyncFetchRequestId) return;
-			if (error instanceof DOMException && error.name === "AbortError") return;
-			console.error("Failed to load combobox options:", error);
-			this.asyncError = "Failed to load options. Please try again.";
-			this.renderAsyncOptionNodes([]);
-		} finally {
-			if (requestId === this.asyncFetchRequestId) this.asyncLoading = false;
-		}
+		this.ensureAsyncFetcher().schedule(query);
+	}
+	ensureAsyncFetcher() {
+		if (!this.asyncFetcher) this.asyncFetcher = new AsyncOptionFetcher(() => this.fetchOptions, {
+			errorLabel: "combobox options",
+			onLoading: () => {
+				this.asyncLoading = true;
+				this.asyncError = null;
+			},
+			onResults: (results) => {
+				this.renderAsyncOptionNodes(results);
+			},
+			onError: (message) => {
+				this.asyncError = message;
+			},
+			onSettled: () => {
+				this.asyncLoading = false;
+			},
+			onEmptyQuery: () => {
+				this.asyncLoading = false;
+				this.asyncError = null;
+				this.renderAsyncOptionNodes(this.value && this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
+			}
+		});
+		return this.asyncFetcher;
 	}
 	getAsyncStatusMessage() {
 		if (!this.usesAsyncSearch || !this.open) return null;
@@ -1183,11 +1171,6 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		if (this.getEnabledVisibleOptions().length === 0 && !this.shouldShowCreateOption()) return `No matches for "${query}".`;
 		return null;
 	}
-	shouldShowAsyncEmpty() {
-		if (!this.usesAsyncSearch || !this.open) return false;
-		if (!this.inputValue.trim() || this.asyncLoading || this.asyncError) return false;
-		return this.getEnabledVisibleOptions().length === 0 && !this.shouldShowCreateOption();
-	}
 	isSelected(value) {
 		if (this.multiple) return this.values.includes(value);
 		return this.value === value;
@@ -1224,18 +1207,14 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 	applySelection() {
 		const visible = this.getVisibleOptions();
 		const filterQuery = this.open ? this.getFilterQuery() : "";
-		for (const option of this.options) {
-			option.selected = this.isSelected(option.value);
-			option.hidden = !visible.includes(option);
-			option.optionId = `${this.listboxId}-option-${option.value}`;
-			option.matchQuery = filterQuery;
-		}
-		for (const group of this.querySelectorAll("pk-option-group")) {
-			const groupOptions = [...group.querySelectorAll("pk-option")];
-			const filterEmpty = groupOptions.length > 0 && groupOptions.every((option) => option.hidden);
-			group.toggleAttribute("data-pk-filter-empty", filterEmpty);
-		}
-		syncListboxSeparators(this);
+		syncFilteredOptions({
+			host: this,
+			options: this.options,
+			visible,
+			listboxId: this.listboxId,
+			filterQuery,
+			isSelected: (value) => this.isSelected(value)
+		});
 		this.syncValueInput();
 		if (this.open) {
 			this.syncHighlight();
@@ -1405,7 +1384,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.unbindPanelEvents();
 		this.closing = true;
 		this.panelAnimated = false;
-		await this.waitForExitAnimation();
+		await waitForPopupContentExitAnimation(this.panelElement);
 		this.open = false;
 		this.closing = false;
 		this.panelAnimated = false;
@@ -1419,8 +1398,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 		this.unregisterDismissHandlers();
 		this.applySelection();
 		if (this.usesAsyncSearch) {
-			window.clearTimeout(this.asyncFetchTimer);
-			this.fetchAbortController?.abort();
+			this.asyncFetcher?.cancel();
 			this.asyncLoading = false;
 			this.asyncError = null;
 			this.renderAsyncOptionNodes(this.selectedOptionMeta ? [this.selectedOptionMeta] : []);
@@ -1442,27 +1420,6 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 			composed: true
 		}));
 	}
-	waitForExitAnimation() {
-		const panel = this.panelElement;
-		if (!panel) return Promise.resolve();
-		return new Promise((resolve) => {
-			let settled = false;
-			const finish = () => {
-				if (settled) return;
-				settled = true;
-				panel.removeEventListener("animationend", onAnimationEnd);
-				window.clearTimeout(fallback);
-				panel.classList.remove("closing");
-				resolve();
-			};
-			const onAnimationEnd = (event) => {
-				if (event.target === panel && event.animationName.startsWith("pk-popup-content-out")) finish();
-			};
-			panel.classList.add("closing");
-			panel.addEventListener("animationend", onAnimationEnd);
-			const fallback = window.setTimeout(finish, 150);
-		});
-	}
 	shouldReturnFocusToInput(source) {
 		return source !== "light-dismiss" && source !== "pointer-dismiss";
 	}
@@ -1831,7 +1788,7 @@ var PkCombobox = class PkCombobox extends PkFormAssociatedElement {
 	render() {
 		const visibleOptions = this.getEnabledVisibleOptions();
 		const showCreate = this.shouldShowCreateOption();
-		const showEmpty = this.open && (this.usesAsyncSearch ? this.shouldShowAsyncEmpty() : visibleOptions.length === 0 && !showCreate);
+		const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0 && !showCreate;
 		const asyncStatus = this.getAsyncStatusMessage();
 		const createQuery = this.inputValue.trim();
 		return b`

package/dist-loader/chunks/{pk-date-picker-Dni5ty79.js → pk-date-picker-DEoiTOxN.js}

@@ -1,18 +1,18 @@
 import { d as registerDismissible, f as unregisterDismissible, n as uniqueId, u as isTopDismissible } from "./pk-a11y-CjB4-U-R.js";
 import { a as o, c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles, s as iconStyles } from "./pk-base-B21zXxSo.js";
-import { Y as xmark, p as calendar } from "./svg-_Mtb7CHx.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles, s as iconStyles } from "./pk-base-CyzwylQ7.js";
+import { X as xmark, p as calendar } from "./svg-Bz-bXZn7.js";
 import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
 import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
 import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
 import { t as PkClearEvent } from "./pk-clear-BMZUzwDt.js";
 import { n as readLegacyInstructions } from "./field-labels-D3lKQ2nq.js";
-import { n as renderIconHtml } from "./render-Niz5wYRa.js";
+import { n as renderIconHtml } from "./render-Bnzcxfss.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-C3tSQ3UR.js";
 import { i as waitForPopupReposition } from "./popup-placement-animation-WlEXnS85.js";
-import "./pk-popup-FDdBxb4k.js";
-import { n as isPointerInsideOverlay } from "./popup-pointer-caPc8kwB.js";
-import { a as parseIsoDate, i as parseDateList, n as coerceToDate, o as parseRange, r as formatIsoDate } from "./pk-calendar-n1bwSO7X.js";
+import "./pk-popup-CrxxR-Hb.js";
+import { n as isPointerInsideOverlay } from "./popup-pointer-Ck28WdVP.js";
+import { a as parseIsoDate, i as parseDateList, n as coerceToDate, o as parseRange, r as formatIsoDate } from "./pk-calendar-BrF8i3dW.js";
 //#region src/utils/host-date.ts
 function getCraft() {
 	return globalThis.Craft;

package/dist-loader/chunks/{pk-dialog-BpPRqFMm.js → pk-dialog-C6aaPokv.js}

@@ -1,8 +1,8 @@
 import { c as unlockBodyScrolling, d as registerDismissible, f as unregisterDismissible, o as lockBodyScrolling, u as isTopDismissible } from "./pk-a11y-CjB4-U-R.js";
 import { a as o, c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement } from "./pk-base-B21zXxSo.js";
-import { Y as xmark } from "./svg-_Mtb7CHx.js";
-import { n as renderIconHtml } from "./render-Niz5wYRa.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
+import { X as xmark } from "./svg-Bz-bXZn7.js";
+import { n as renderIconHtml } from "./render-Bnzcxfss.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-C3tSQ3UR.js";
 import { t as animateWithClass } from "./animate-with-class-DT0jwaR_.js";
 //#region src/utils/craft-host-modal.ts

package/dist-loader/chunks/{pk-dropdown-item-CHkFNlA9.js → pk-dropdown-item-D8RrwjxL.js}

@@ -1,8 +1,8 @@
 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 "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement } from "./pk-base-B21zXxSo.js";
-import { _ as chevronRight, m as check } from "./svg-_Mtb7CHx.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
+import { _ as chevronRight, m as check } from "./svg-Bz-bXZn7.js";
 import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
-import { n as renderIconHtml } from "./render-Niz5wYRa.js";
+import { n as renderIconHtml } from "./render-Bnzcxfss.js";
 import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
 import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-duCg9-CH.js";
 //#region src/components/dropdown-menu/dropdown-menu-size.styles.ts
@@ -306,7 +306,9 @@ var pkDropdownItemStyles = [
         .submenu-panel {
             width: max-content;
             min-width: 8rem;
-            overflow: hidden;
+            max-height: var(--pk-popup-available-height, calc(100dvh - 20px));
+            overflow: auto;
+            overscroll-behavior: contain;
             padding: 4px 0;
             border-radius: var(--pk-radius-md);
             background: var(--pk-color-white);
@@ -489,9 +491,9 @@ var PkDropdownItem = class PkDropdownItem extends PkElement {
                     <slot name="start"></slot>
                     <slot name="prefix"></slot>
                 </span>
-                <span class="label"><slot></slot></span>
+                <span part="label" class="label"><slot></slot></span>
                 <span class="details"><slot name="details"></slot></span>
-                ${showCheck ? b`<span class="check" aria-hidden="true">${o(CHECK_ICON)}</span>` : A}
+                ${showCheck ? b`<span part="check" class="check" aria-hidden="true">${o(CHECK_ICON)}</span>` : A}
                 ${hasSubmenu ? b`<span class="submenu-icon" aria-hidden="true">${o(SUBMENU_ICON)}</span>` : A}
             </button>
             ${hasSubmenu ? b`
@@ -503,6 +505,8 @@ var PkDropdownItem = class PkDropdownItem extends PkElement {
                     .skidding=${-4}
                     flip
                     shift
+                    auto-size="vertical"
+                    .autoSizePadding=${10}
                     hover-bridge
                     style="--pk-popup-z-index: 1001"
                 >

package/dist-loader/chunks/pk-dropdown-label-Cg32UgRe.js

@@ -0,0 +1,51 @@
+import { m as i, p as b, u as customElement } from "./lit-DpLik9Rf.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
+//#region src/components/dropdown-menu/pk-dropdown-label.styles.ts
+var pkDropdownLabelStyles = i`
+    @layer pk-component {
+        :host {
+            display: block;
+            /*
+             * Slotted label copy inherits through the flat tree from this host
+             * when page metrics would otherwise leak via font:inherit chains.
+             */
+            font-size: var(--pk-dropdown-label-font-size, 13px);
+            line-height: 1.3;
+            color: var(--pk-color-slate-700, rgba(96, 125, 159, 0.7));
+        }
+
+        /* Match v1 DropdownMenuLabel — text-slate-700, regular weight (not medium). */
+        .label {
+            margin: 0;
+            padding-block-start: 6px;
+            padding-block-end: 4px;
+            padding-inline: var(--pk-dropdown-label-padding-inline, 12px);
+            color: inherit;
+            font: inherit;
+            font-weight: 400;
+            user-select: none;
+            pointer-events: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/dropdown-menu/pk-dropdown-label.ts
+var PkDropdownLabel = class PkDropdownLabel extends PkElement {
+	static {
+		this.styles = pkDropdownLabelStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setAttribute("role", "presentation");
+	}
+	render() {
+		return b`
+            <div part="label" class="label">
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+PkDropdownLabel = __decorate([customElement("pk-dropdown-label")], PkDropdownLabel);
+//#endregion
+export { PkDropdownLabel as t };

package/dist-loader/chunks/{pk-dropdown-menu-BHVOMNV1.js → pk-dropdown-menu-CAHCltlX.js}

@@ -1,12 +1,12 @@
 import { d as registerDismissible, f as unregisterDismissible, r as activeElements, u as isTopDismissible } from "./pk-a11y-CjB4-U-R.js";
 import { l as n, m as i, p as b, s as e, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement } from "./pk-base-B21zXxSo.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
 import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-CsBQ3Cyh.js";
 import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-C3tSQ3UR.js";
 import { t as animateWithClass } from "./animate-with-class-DT0jwaR_.js";
 import { i as waitForPopupReposition } from "./popup-placement-animation-WlEXnS85.js";
-import { n as dropdownMenuHostSizeStyles, r as dropdownMenuPanelSizeStyles, t as PkDropdownItem } from "./pk-dropdown-item-CHkFNlA9.js";
-import { n as resolveElementById } from "./pk-popup-FDdBxb4k.js";
+import { n as dropdownMenuHostSizeStyles, r as dropdownMenuPanelSizeStyles, t as PkDropdownItem } from "./pk-dropdown-item-D8RrwjxL.js";
+import { n as resolveElementById } from "./pk-popup-CrxxR-Hb.js";
 //#region src/components/dropdown-menu/pk-dropdown-menu.styles.ts
 /**
 * Dropdown panel motion —  `pk-dropdown` scale+fade, with transform
@@ -78,8 +78,10 @@ var pkDropdownMenuStyles = [
                 flex-direction: column;
                 width: max-content;
                 min-width: 8rem;
+                max-height: var(--pk-popup-available-height, calc(100dvh - 20px));
                 margin: 0;
                 overflow: auto;
+                overscroll-behavior: contain;
                 padding: 4px 0;
                 border: 0;
                 border-radius: var(--pk-radius-md);

package/dist-loader/chunks/{pk-field-CJ09ll1S.js → pk-field-V7JOy26T.js}

@@ -1,10 +1,10 @@
 import { t as __exportAll } from "./rolldown-runtime-CzwdidQP.js";
 import { n as uniqueId } from "./pk-a11y-CjB4-U-R.js";
 import { f as A, i as e, l as n, m as i, o, p as b, s as e$1, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement, n as formControlStyles, t as inlineMarkdownStyles } from "./pk-base-B21zXxSo.js";
-import { P as lightbulb, q as triangleExclamation, u as asterisk } from "./svg-_Mtb7CHx.js";
+import { c as __decorate, l as PkElement, n as formControlStyles, t as inlineMarkdownStyles } from "./pk-base-CyzwylQ7.js";
+import { J as triangleExclamation, P as lightbulb, u as asterisk } from "./svg-Bz-bXZn7.js";
 import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
-import { t as createIconElement } from "./render-Niz5wYRa.js";
+import { t as createIconElement } from "./render-Bnzcxfss.js";
 //#region src/icons/translation-icon.ts
 var TRANSLATION_ICON_PATH = "M64 64C28.7 64 0 92.7 0 128L0 384c0 35.3 28.7 64 64 64l208 0 32 0 16 0 256 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L320 64l-16 0-32 0L64 64zm512 48c8.8 0 16 7.2 16 16l0 256c0 8.8-7.2 16-16 16l-256 0 0-288 256 0zM178.3 175.9l64 144c4.5 10.1-.1 21.9-10.2 26.4s-21.9-.1-26.4-10.2L196.8 316l-73.6 0-8.9 20.1c-4.5 10.1-16.3 14.6-26.4 10.2s-14.6-16.3-10.2-26.4l64-144c3.2-7.2 10.4-11.9 18.3-11.9s15.1 4.7 18.3 11.9zM179 276l-19-42.8L141 276l38 0zM456 164c-11 0-20 9-20 20l0 4-52 0c-11 0-20 9-20 20s9 20 20 20l72 0 35.1 0c-7.3 16.7-17.4 31.9-29.8 45l-.5-.5-14.6-14.6c-7.8-7.8-20.5-7.8-28.3 0s-7.8 20.5 0 28.3L430 298.3c-5.9 3.6-12.1 6.9-18.5 9.8l-3.6 1.6c-10.1 4.5-14.6 16.3-10.2 26.4s16.3 14.6 26.4 10.2l3.6-1.6c12-5.3 23.4-11.8 34-19.4c4.3 3 8.6 5.8 13.1 8.5l18.9 11.3c9.5 5.7 21.8 2.6 27.4-6.9s2.6-21.8-6.9-27.4l-18.9-11.3c-.9-.5-1.8-1.1-2.7-1.6c17.2-18.8 30.7-40.9 39.6-65.4L534 228l2 0c11 0 20-9 20-20s-9-20-20-20l-16 0-44 0 0-4c0-11-9-20-20-20z";
 var createTranslationIconElement = () => {
@@ -5849,7 +5849,7 @@ var PkField = class PkField extends PkElement {
                                                     </span>
                                                 ` : A}
                                             ${this.translatable ? b`
-                                                    <span class="form-control__translatable" title="Translatable">
+                                                    <span class="form-control__translatable">
                                                         ${createTranslationIconElement()}
                                                         <span class="sr-only">Translatable</span>
                                                     </span>

package/dist-loader/chunks/{pk-icon-WHUu7wxk.js → pk-icon-Bph-EBqp.js}

@@ -1,6 +1,6 @@
 import { a as o, f as A, l as n, m as i, p as b, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement } from "./pk-base-B21zXxSo.js";
-import { t as iconToSvg } from "./svg-_Mtb7CHx.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
+import { t as iconToSvg } from "./svg-Bz-bXZn7.js";
 import { i as subscribeIconRegistry, t as getIcon } from "./registry-BanyScVR.js";
 //#region src/components/icon/pk-icon.ts
 var PkIcon = class PkIcon extends PkElement {

package/dist-loader/chunks/{pk-input-CEw3AdYt.js → pk-input-BhU0PiCk.js}

@@ -1,6 +1,6 @@
 import { n as uniqueId } from "./pk-a11y-CjB4-U-R.js";
 import { c as r, f as A, l as n, m as i, n as l, p as b, r as o, s as e, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles, o as syncStandaloneControlAria } from "./pk-base-B21zXxSo.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles, o as syncStandaloneControlAria } from "./pk-base-CyzwylQ7.js";
 import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-CsBQ3Cyh.js";
 import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
 import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
@@ -81,6 +81,15 @@ var pkInputStyles = i`
             font-family: var(--pk-font-family);
             font-size: var(--pk-font-size-base);
             line-height: var(--pk-line-height);
+            /*
+             * Control chrome tokens — inherit into light-DOM in-control actions
+             * (e.g. pk-copy-button[slot=end]) the same way combobox/image-browser
+             * size their trailing clear/expand hit targets.
+             */
+            --pk-input-padding-block: 6px;
+            --pk-input-padding-inline: 8px;
+            --pk-input-control-gap: 6px;
+            --pk-input-decoration-size: 0.75rem;
         }
 
         :host([data-pk-group-orientation]) {
@@ -166,11 +175,13 @@ var pkInputStyles = i`
         /* Chrome lives on the flex shell (part=base) so slot=start/end adornments sit
          * inside the border — same visual contract as pk-input-group / v1 InputGroup.
          * Height is content-sized (v1): padding-block + --pk-input-control-line-height + border.
+         * Trailing actions (clear, pk-copy-button[slot=end]) stay in flex flow so long
+         * values never paint under the button — mirror combobox / image-browser.
          */
         .form-control__input {
             align-items: center;
-            gap: 6px;
-            padding-inline: 8px;
+            gap: var(--pk-input-control-gap);
+            padding-inline: var(--pk-input-padding-inline);
             border: var(--pk-input-border);
             border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));
             background: var(--pk-input-bg);
@@ -184,8 +195,11 @@ var pkInputStyles = i`
             margin: 0;
             color: var(--pk-color-gray-400);
             line-height: 0;
+            align-self: stretch;
+            align-items: center;
         }
 
+        /* Decorative glyphs only — interactive in-control actions opt out below. */
         .form-control__start ::slotted(*),
         .form-control__end ::slotted(*) {
             display: block;
@@ -193,12 +207,31 @@ var pkInputStyles = i`
             max-height: 1.25rem;
         }
 
+        /* Copy (and similar) inside the field: flex-reserved space, not absolute overlay. */
+        .form-control__end:has(::slotted(pk-copy-button)) {
+            align-items: stretch;
+        }
+
+        .form-control__end ::slotted(pk-copy-button) {
+            display: inline-flex;
+            align-self: stretch;
+            align-items: stretch;
+            max-width: none;
+            max-height: none;
+            /*
+             * Pull into trailing padding like combobox expand/clear, but leave a
+             * small inset so the glyph is not tight against the field border.
+             */
+            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);
+            margin-block: calc(-1 * var(--pk-input-padding-block));
+        }
+
         .input {
             display: block;
             width: 100%;
             margin: 0;
             /* v1 Input default: py-1.5 + text-sm (14px / 1.25rem lh) → 34px with border. */
-            padding-block: 6px;
+            padding-block: var(--pk-input-padding-block);
             padding-inline: 0;
             border: 0;
             border-radius: 0;
@@ -252,43 +285,47 @@ var pkInputStyles = i`
             box-shadow: var(--pk-input-invalid-focus-shadow);
         }
 
-        :host([size='xs']) .form-control__input {
-            gap: 4px;
-            padding-inline: 6px;
+        :host([size='xs']) {
+            --pk-input-padding-block: 4px;
+            --pk-input-padding-inline: 6px;
+            --pk-input-control-gap: 4px;
+            --pk-input-decoration-size: 0.625rem;
         }
 
         :host([size='xs']) .input {
-            padding-block: 4px;
             font-size: 11px;
         }
 
-        :host([size='sm']) .form-control__input {
-            gap: 4px;
-            padding-inline: 8px;
+        :host([size='sm']) {
+            --pk-input-padding-block: 4px;
+            --pk-input-padding-inline: 8px;
+            --pk-input-control-gap: 4px;
+            --pk-input-decoration-size: 0.6875rem;
         }
 
         :host([size='sm']) .input {
-            padding-block: 4px;
             font-size: 12px;
         }
 
-        :host([size='lg']) .form-control__input {
-            gap: 8px;
-            padding-inline: 12px;
+        :host([size='lg']) {
+            --pk-input-padding-block: 8px;
+            --pk-input-padding-inline: 12px;
+            --pk-input-control-gap: 8px;
+            --pk-input-decoration-size: 0.875rem;
         }
 
         :host([size='lg']) .input {
-            padding-block: 8px;
             font-size: var(--pk-font-size-base);
         }
 
-        :host([size='xl']) .form-control__input {
-            gap: 8px;
-            padding-inline: 16px;
+        :host([size='xl']) {
+            --pk-input-padding-block: 10px;
+            --pk-input-padding-inline: 16px;
+            --pk-input-control-gap: 8px;
+            --pk-input-decoration-size: 1rem;
         }
 
         :host([size='xl']) .input {
-            padding-block: 10px;
             font-size: 16px;
         }
 
@@ -411,15 +448,24 @@ var pkInputStyles = i`
             border-bottom-width: 0;
         }
 
+        /*
+         * Clear is a flex trailing action (not absolute). Reserves width in the
+         * control so values cannot scroll under the glyph — same contract as
+         * combobox clear/expand and image-browser clear.
+         */
         .clear-button {
-            position: absolute;
-            inset-inline-end: 6px;
-            inset-block-start: 50%;
-            translate: 0 -50%;
-        }
-
-        .form-control__input:has(.clear-button) .input {
-            padding-inline-end: 20px;
+            display: inline-flex;
+            flex-shrink: 0;
+            align-self: stretch;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            width: calc(var(--pk-input-decoration-size) + var(--pk-input-padding-inline));
+            margin-block: calc(-1 * var(--pk-input-padding-block));
+            /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. */
+            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);
+            font-size: var(--pk-input-decoration-size);
+            line-height: 1;
         }
     }
 `;

package/dist-loader/chunks/{pk-lightswitch-DJEUScgo.js → pk-lightswitch-m23Cy3_D.js}

@@ -1,5 +1,5 @@
 import { f as A, l as n, m as i, p as b, s as e, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "./pk-base-B21zXxSo.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles } from "./pk-base-CyzwylQ7.js";
 import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
 import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
 import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";

package/dist-loader/chunks/{pk-option-CunPIei0.js → pk-option-BrDMERSl.js}

@@ -1,7 +1,7 @@
 import { a as o, f as A, l as n, m as i, p as b, u as customElement } from "./lit-DpLik9Rf.js";
-import { c as __decorate, l as PkElement } from "./pk-base-B21zXxSo.js";
-import { m as check } from "./svg-_Mtb7CHx.js";
-import { n as renderIconHtml } from "./render-Niz5wYRa.js";
+import { c as __decorate, l as PkElement } from "./pk-base-CyzwylQ7.js";
+import { m as check } from "./svg-Bz-bXZn7.js";
+import { n as renderIconHtml } from "./render-Bnzcxfss.js";
 //#region src/utils/highlight-text.ts
 /** Split label text into matched/unmatched segments for typeahead highlighting. */
 function splitHighlightParts(text, search) {
@@ -168,6 +168,7 @@ var PkOption = class PkOption extends PkElement {
 	static {
 		this.styles = pkOptionStyles;
 	}
+	/** Focus the option’s inner control (listbox keyboard navigation). */
 	focusControl(preventScroll = true) {
 		this.shadowRoot?.querySelector(".option")?.focus({ preventScroll });
 	}
@@ -234,7 +235,7 @@ var PkOption = class PkOption extends PkElement {
 			" ",
 			"Escape"
 		]).has(event.key)) return;
-		const owner = this.closest("pk-select, pk-combobox");
+		const owner = this.closest("pk-select, pk-combobox, pk-autocomplete");
 		const panel = owner ? null : this.closest("[role=\"listbox\"]");
 		if (!owner && !panel) return;
 		event.preventDefault();