@verbb/plugin-kit-web 2.0.0

package/dist-loader/chunks/registry-CmL0rH9r.js

@@ -0,0 +1,55 @@
+//#region ../plugin-kit-icons/dist/registry.js
+var camelToKebab = (value) => {
+	return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+};
+/**
+* Normalize a consumer-facing name to the registry key.
+* Accepts kebab-case (`chevron-down`) or camelCase (`chevronDown`) — same glyph, not synonyms.
+*/
+var normalizeIconName = (name) => {
+	const trimmed = name.trim();
+	if (!trimmed) return trimmed;
+	if (!/[A-Z]/.test(trimmed)) return trimmed.toLowerCase();
+	return camelToKebab(trimmed);
+};
+/** Empty until the consumer registers icons or imports `@verbb/plugin-kit-icons/all.js`. */
+var registry = {};
+/** Resolve an icon by kebab-case or camelCase name. Returns `undefined` if unknown. */
+var getIcon = (name) => {
+	if (!name) return;
+	return registry[normalizeIconName(name)] ?? registry[name];
+};
+/**
+* Register (or overwrite) an icon for `<pk-icon icon="…">` / {@link getIcon}.
+*
+* Call once at app bootstrap for every name your Twig/HTML looks up. Prefer named
+* icon imports so unused glyphs stay out of the bundle; use
+* `@verbb/plugin-kit-icons/all.js` only when you need the full curated set.
+*
+* Object keys may be camelCase (`arrowUp`) or kebab-case (`arrow-up`) — both
+* store under the kebab key that HTML uses.
+*
+* @example
+* ```ts
+* import { registerIcons, plus, gear, arrowUp } from '@verbb/plugin-kit-icons';
+*
+* registerIcons({ plus, gear, arrowUp });
+* // <pk-icon icon="plus"></pk-icon>
+* // <pk-icon icon="arrow-up"></pk-icon>
+* ```
+*/
+var registerIcon = (name, icon) => {
+	const key = normalizeIconName(name);
+	if (!key) throw new Error("registerIcon: name must be a non-empty string");
+	if (!icon?.path || !icon.width || !icon.height) throw new Error(`registerIcon: icon "${key}" must include width, height, and path`);
+	registry[key] = icon;
+};
+/**
+* Register several icons in one call. Equivalent to repeated {@link registerIcon}.
+* Keys may be kebab-case or camelCase (normalized to kebab).
+*/
+var registerIcons = (entries) => {
+	for (const [name, icon] of Object.entries(entries)) registerIcon(name, icon);
+};
+//#endregion
+export { normalizeIconName as n, registerIcons as r, getIcon as t };

package/dist-loader/chunks/render-DApFfV9S.js

@@ -0,0 +1,14 @@
+import { t as iconToSvg } from "./svg-Boar0Kf1.js";
+//#region src/icons/render.ts
+var renderIconHtml = (icon, options = {}) => {
+	return iconToSvg(icon, { title: options.title });
+};
+var createIconElement = (icon, options = {}) => {
+	const template = document.createElement("template");
+	template.innerHTML = renderIconHtml(icon, options);
+	const element = template.content.firstElementChild;
+	if (!(element instanceof SVGSVGElement)) throw new Error("Icon render did not produce an SVG element.");
+	return element;
+};
+//#endregion
+export { renderIconHtml as n, createIconElement as t };

package/dist-loader/chunks/required-validator-0XwZtX9k.js

@@ -0,0 +1,27 @@
+//#region src/validators/required-validator.ts
+function RequiredValidator(options = {}) {
+	let { validationElement, validationProperty } = options;
+	if (!validationElement && typeof document !== "undefined") validationElement = Object.assign(document.createElement("input"), { required: true });
+	if (!validationProperty) validationProperty = "value";
+	const validator = {
+		observedAttributes: ["required"],
+		message: validationElement?.validationMessage ?? "Please fill out this field.",
+		checkValidity(element) {
+			const result = {
+				message: "",
+				isValid: true,
+				invalidKeys: []
+			};
+			if (!element.required) return result;
+			const value = element[validationProperty];
+			if (!(value === null || value === void 0 || value === false || value === "")) return result;
+			result.isValid = false;
+			result.message = typeof validator.message === "function" ? validator.message(element) : validator.message ?? "";
+			result.invalidKeys.push("valueMissing");
+			return result;
+		}
+	};
+	return validator;
+}
+//#endregion
+export { RequiredValidator as t };

package/dist-loader/chunks/rolldown-runtime-CzwdidQP.js

@@ -0,0 +1,13 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+export { __exportAll as t };

package/dist-loader/chunks/supports-popover-COjbi2RP.js

@@ -0,0 +1,5 @@
+//#region src/utils/supports-popover.ts
+/** Whether the host supports the Popover API (`popover` + `showPopover` / `hidePopover`). */
+var SUPPORTS_POPOVER = typeof globalThis.HTMLElement !== "undefined" && Object.prototype.hasOwnProperty.call(globalThis.HTMLElement.prototype, "popover");
+//#endregion
+export { SUPPORTS_POPOVER as t };

package/dist-loader/chunks/svg-Boar0Kf1.js

@@ -0,0 +1,34 @@
+//#region ../plugin-kit-icons/dist/svg.js
+var escapeHtml = (value) => {
+	return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+};
+/** Build the `viewBox` value for an icon. */
+var iconViewBox = (icon) => {
+	return `0 0 ${icon.width} ${icon.height}`;
+};
+/**
+* Render a {@link PkIcon} to a standalone SVG markup string.
+*
+* Framework-agnostic: web components pass the result through Lit's `unsafeSVG`,
+* or parse it into an element. React consumers should use their own component
+* (the raw {@link PkIcon} data is exported for that purpose).
+*/
+var iconToSvg = (icon, options = {}) => {
+	const { title, className, attributes = {} } = options;
+	const attrs = {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: iconViewBox(icon),
+		...attributes
+	};
+	if (className) attrs.class = className;
+	if (title) attrs.role = "img";
+	else {
+		attrs["aria-hidden"] = "true";
+		attrs.focusable = "false";
+	}
+	return `<svg ${Object.entries(attrs).map(([key, value]) => {
+		return `${key}="${escapeHtml(value)}"`;
+	}).join(" ")}>${title ? `<title>${escapeHtml(title)}</title>` : ""}<path fill="currentColor" d="${escapeHtml(icon.path)}"/></svg>`;
+};
+//#endregion
+export { iconToSvg as t };

package/dist-loader/chunks/sync-listbox-separators-Bcja51HC.js

@@ -0,0 +1,147 @@
+//#region src/utils/listbox-keyboard.ts
+var LISTBOX_NAVIGATION_KEYS = new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+	"Enter",
+	" ",
+	"Escape"
+]);
+/** Returns true for type-to-select character keys (single printable characters). */
+function isListboxTypeToSelectKey(event) {
+	return event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+}
+function getEnabledListboxItems(items) {
+	return items.filter((item) => {
+		return !item.hasAttribute("disabled") && !item.hasAttribute("hidden") && item.getAttribute("aria-disabled") !== "true" && item.getAttribute("aria-hidden") !== "true";
+	});
+}
+function focusListboxItem(enabled, index, focusItem) {
+	if (focusItem) {
+		focusItem(index);
+		return;
+	}
+	const item = enabled[index];
+	if (item instanceof HTMLElement && "focusControl" in item && typeof item.focusControl === "function") {
+		item.focusControl();
+		return;
+	}
+	item?.focus();
+}
+function activateListboxItem(item) {
+	if (!item) return;
+	const control = item.shadowRoot?.querySelector(".option");
+	if (control instanceof HTMLButtonElement) {
+		control.click();
+		return;
+	}
+	item.click();
+}
+function handleListboxKeyDown(event, options) {
+	const enabled = getEnabledListboxItems(options.items);
+	const loop = options.loop === true;
+	if (enabled.length === 0) return options.currentIndex;
+	let index = Math.max(0, options.currentIndex);
+	const current = enabled[index] ?? enabled[0];
+	index = enabled.indexOf(current);
+	if (index < 0) index = 0;
+	switch (event.key) {
+		case "ArrowDown":
+		case "ArrowRight":
+			event.preventDefault();
+			if (loop && index >= enabled.length - 1) index = 0;
+			else index = Math.min(index + 1, enabled.length - 1);
+			focusListboxItem(enabled, index, options.focusItem);
+			options.onSelect(index);
+			return index;
+		case "ArrowUp":
+		case "ArrowLeft":
+			event.preventDefault();
+			if (loop && index <= 0) index = enabled.length - 1;
+			else index = Math.max(index - 1, 0);
+			focusListboxItem(enabled, index, options.focusItem);
+			options.onSelect(index);
+			return index;
+		case "Home":
+			event.preventDefault();
+			index = 0;
+			focusListboxItem(enabled, index, options.focusItem);
+			options.onSelect(index);
+			return index;
+		case "End":
+			event.preventDefault();
+			index = enabled.length - 1;
+			focusListboxItem(enabled, index, options.focusItem);
+			options.onSelect(index);
+			return index;
+		case "Enter":
+		case " ":
+			if (!options.multiselect) {
+				event.preventDefault();
+				activateListboxItem(enabled[index]);
+			}
+			return index;
+		case "Escape":
+			event.preventDefault();
+			options.onClose?.();
+			return index;
+		default: return index;
+	}
+}
+/** Type-to-select string matching . */
+function createTypeToSelectHandler(items, onMatch) {
+	let typeToSelectString = "";
+	let typeToSelectTimeout = 0;
+	const reset = () => {
+		typeToSelectString = "";
+		window.clearTimeout(typeToSelectTimeout);
+	};
+	const handleKey = (event) => {
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+		typeToSelectString += event.key.toLowerCase();
+		window.clearTimeout(typeToSelectTimeout);
+		typeToSelectTimeout = window.setTimeout(reset, 750);
+		const enabled = getEnabledListboxItems(items);
+		for (let index = 0; index < enabled.length; index += 1) if ((enabled[index]?.textContent ?? "").trim().toLowerCase().startsWith(typeToSelectString)) {
+			onMatch(index);
+			event.preventDefault();
+			return;
+		}
+	};
+	return {
+		handleKey,
+		reset
+	};
+}
+//#endregion
+//#region src/internal/sync-listbox-separators.ts
+/**
+* Hide listbox `pk-separator` siblings that no longer sit between two visible
+* `pk-option` / `pk-option-group` items (e.g. after combobox filter hides groups).
+*/
+var isListboxItemHidden = (element) => {
+	return element.hidden || element.hasAttribute("data-pk-filter-empty");
+};
+var syncListboxSeparators = (root) => {
+	const children = [...root.querySelectorAll(":scope > pk-option, :scope > pk-option-group, :scope > pk-separator")];
+	const nearestItem = (from, direction) => {
+		for (let index = from + direction; direction < 0 ? index >= 0 : index < children.length; index += direction) {
+			const child = children[index];
+			if (!child || child.localName === "pk-separator") continue;
+			return child;
+		}
+		return null;
+	};
+	for (let index = 0; index < children.length; index += 1) {
+		const child = children[index];
+		if (!child || child.localName !== "pk-separator") continue;
+		const before = nearestItem(index, -1);
+		const after = nearestItem(index, 1);
+		child.hidden = !before || !after || isListboxItemHidden(before) || isListboxItemHidden(after);
+	}
+};
+//#endregion
+export { isListboxTypeToSelectKey as a, handleListboxKeyDown as i, LISTBOX_NAVIGATION_KEYS as n, createTypeToSelectHandler as r, syncListboxSeparators as t };