@verbb/plugin-kit-web 2.0.0

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

@@ -0,0 +1,2 @@
+import { t as PkField } from "../../chunks/pk-field-BnKPT_Kk.js";
+export { PkField };

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

@@ -0,0 +1,17 @@
+import { A as icons } from "../../chunks/icons-B1i-oRoD.js";
+import { n as normalizeIconName, r as registerIcons } from "../../chunks/registry-CmL0rH9r.js";
+//#region ../plugin-kit-icons/dist/all.js
+/**
+* Side-effect entry: register every curated icon for `<pk-icon icon="…">` lookup.
+*
+* Prefer named imports + {@link registerIcons} in production CP bundles. Use this
+* for docs, playgrounds, the no-build loader, and `registerAll()` workshops.
+*
+* ```ts
+* import '@verbb/plugin-kit-icons/all.js';
+* ```
+*/
+var entries = {};
+for (const [name, icon] of Object.entries(icons)) entries[normalizeIconName(name)] = icon;
+registerIcons(entries);
+//#endregion

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

@@ -0,0 +1,2 @@
+import { t as PkInput } from "../../chunks/pk-input-Oarjv7Vc.js";
+export { PkInput };

package/dist-loader/components/input-group/input-group-addon.js

@@ -0,0 +1,98 @@
+import { l as n, m as i, p as b, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/input-group/pk-input-group-addon.styles.ts
+var pkInputGroupAddonStyles = i`
+    @layer pk-component {
+        :host {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            padding-inline: 0.5rem;
+            font-size: var(--pk-font-size-sm);
+            color: var(--pk-color-gray-500);
+            cursor: text;
+            user-select: none;
+            flex-shrink: 0;
+        }
+
+        :host([align='inline-start']) {
+            padding-inline-start: 0.5rem;
+        }
+
+        :host([align='inline-end']) {
+            padding-inline-end: 0.5rem;
+        }
+
+        :host([align='block-start']) {
+            width: 100%;
+            align-self: stretch;
+            justify-content: flex-start;
+            padding: 0.625rem 0.625rem 0;
+        }
+
+        :host([align='block-end']) {
+            width: 100%;
+            align-self: stretch;
+            justify-content: flex-start;
+            padding: 0 0.625rem 0.625rem;
+        }
+
+        :host([align='block-start']) .addon,
+        :host([align='block-end']) .addon {
+            display: flex;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        :host([align='block-start']) ::slotted(*),
+        :host([align='block-end']) ::slotted(*) {
+            width: 100%;
+        }
+
+        :host([align='inline-start']) ::slotted(pk-input-group-button) {
+            margin-inline-start: -0.3rem;
+        }
+
+        :host([align='inline-end']) ::slotted(pk-input-group-button) {
+            margin-inline-end: -0.3rem;
+        }
+
+        ::slotted(svg) {
+            width: 0.75rem;
+            height: 0.75rem;
+            flex-shrink: 0;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-addon.ts
+var PkInputGroupAddon = class PkInputGroupAddon extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.align = "inline-start";
+	}
+	static {
+		this.styles = pkInputGroupAddonStyles;
+	}
+	handleClick(event) {
+		if (event.target.closest("button, pk-input-group-button, pk-button")) return;
+		(this.closest("pk-input-group")?.querySelector("pk-input-group-input, pk-input-group-textarea"))?.focus();
+	}
+	render() {
+		return b`
+            <div
+                part="base"
+                class="addon"
+                role="group"
+                @click=${this.handleClick}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+__decorate([n({ reflect: true })], PkInputGroupAddon.prototype, "align", void 0);
+PkInputGroupAddon = __decorate([t("pk-input-group-addon")], PkInputGroupAddon);
+//#endregion
+export { PkInputGroupAddon };

package/dist-loader/components/input-group/input-group-button.js

@@ -0,0 +1,52 @@
+import { l as n, m as i, p as b, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/input-group/pk-input-group-button.styles.ts
+var pkInputGroupButtonStyles = i`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+        }
+
+        pk-button {
+            --pk-btn-height: var(--pk-btn-height-sm);
+            --pk-btn-font: var(--pk-btn-font-sm);
+            --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);
+            --pk-btn-icon-size: var(--pk-btn-icon-size-sm);
+            --pk-btn-radius: var(--pk-btn-radius-sm);
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-button.ts
+var PkInputGroupButton = class PkInputGroupButton extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "none";
+		this.size = "xs";
+		this.disabled = false;
+	}
+	static {
+		this.styles = pkInputGroupButtonStyles;
+	}
+	render() {
+		return b`
+            <pk-button
+                part="base"
+                variant=${this.variant}
+                size=${this.size === "icon-xs" || this.size === "icon-sm" ? "xs" : "xs"}
+                ?disabled=${this.disabled}
+            >
+                <slot></slot>
+            </pk-button>
+        `;
+	}
+};
+__decorate([n({ reflect: true })], PkInputGroupButton.prototype, "variant", void 0);
+__decorate([n({ reflect: true })], PkInputGroupButton.prototype, "size", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupButton.prototype, "disabled", void 0);
+PkInputGroupButton = __decorate([t("pk-input-group-button")], PkInputGroupButton);
+//#endregion
+export { PkInputGroupButton };

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

@@ -0,0 +1,132 @@
+import { f as A, l as n, m as i, p as b, r as o, s as e, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/input-group/pk-input-group-input.styles.ts
+var pkInputGroupInputStyles = i`
+    @layer pk-component {
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            align-self: stretch;
+        }
+
+        .input {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            margin: 0;
+            padding: 6px 8px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            appearance: none;
+            box-sizing: border-box;
+            box-shadow: none;
+            outline: none;
+        }
+
+        .input::placeholder {
+            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));
+        }
+
+        .input:disabled {
+            cursor: not-allowed;
+        }
+
+        :host([size='xs']) .input {
+            padding: 4px 6px;
+            font-size: 11px;
+        }
+
+        :host([size='sm']) .input {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+
+        :host([size='lg']) .input {
+            padding: 8px 12px;
+            font-size: var(--pk-font-size-base);
+        }
+
+        :host([size='xl']) .input {
+            padding: 10px 16px;
+            font-size: 16px;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-input.ts
+var PkInputGroupInput = class PkInputGroupInput extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "text";
+		this.size = "default";
+		this.placeholder = "";
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.invalid = false;
+	}
+	static {
+		this.styles = pkInputGroupInputStyles;
+	}
+	focus(options) {
+		this.inputElement?.focus(options);
+	}
+	render() {
+		return b`
+            <input
+                part="input"
+                class="input"
+                data-slot="input-group-control"
+                type=${this.type}
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                autocomplete=${o(this.autocomplete)}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                aria-invalid=${this.invalid ? "true" : A}
+                @input=${this.handleInput}
+            />
+        `;
+	}
+	handleInput(event) {
+		const target = event.target;
+		this.value = target.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([e(".input")], PkInputGroupInput.prototype, "inputElement", void 0);
+__decorate([n({ reflect: true })], PkInputGroupInput.prototype, "type", void 0);
+__decorate([n({ reflect: true })], PkInputGroupInput.prototype, "size", void 0);
+__decorate([n()], PkInputGroupInput.prototype, "placeholder", void 0);
+__decorate([n({
+	attribute: "value",
+	reflect: true
+})], PkInputGroupInput.prototype, "value", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "disabled", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "readonly", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "invalid", void 0);
+__decorate([n()], PkInputGroupInput.prototype, "autocomplete", void 0);
+PkInputGroupInput = __decorate([t("pk-input-group-input")], PkInputGroupInput);
+//#endregion
+export { PkInputGroupInput };

package/dist-loader/components/input-group/input-group-text.js

@@ -0,0 +1,37 @@
+import { m as i, p as b, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/input-group/pk-input-group-text.styles.ts
+var pkInputGroupTextStyles = i`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: var(--pk-font-size-sm);
+            color: var(--pk-color-gray-500);
+        }
+
+        .text ::slotted(svg) {
+            width: 0.75rem;
+            height: 0.75rem;
+            pointer-events: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-text.ts
+var PkInputGroupText = class PkInputGroupText extends PkElement {
+	static {
+		this.styles = pkInputGroupTextStyles;
+	}
+	render() {
+		return b`
+            <span part="base" class="text">
+                <slot></slot>
+            </span>
+        `;
+	}
+};
+PkInputGroupText = __decorate([t("pk-input-group-text")], PkInputGroupText);
+//#endregion
+export { PkInputGroupText };

package/dist-loader/components/input-group/input-group-textarea.js

@@ -0,0 +1,110 @@
+import { f as A, l as n, m as i, p as b, s as e, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+//#region src/components/input-group/pk-input-group-textarea.styles.ts
+var pkInputGroupTextareaStyles = i`
+    @layer pk-component {
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            align-self: stretch;
+        }
+
+        .textarea {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            min-height: 5rem;
+            margin: 0;
+            padding: 7px 10px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            appearance: none;
+            box-sizing: border-box;
+            box-shadow: none;
+            outline: none;
+            resize: none;
+        }
+
+        .textarea::placeholder {
+            color: var(--pk-color-gray-400);
+        }
+
+        .textarea:disabled {
+            cursor: not-allowed;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-textarea.ts
+var PkInputGroupTextarea = class PkInputGroupTextarea extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.invalid = false;
+		this.rows = 3;
+	}
+	static {
+		this.styles = pkInputGroupTextareaStyles;
+	}
+	focus(options) {
+		this.textareaElement?.focus(options);
+	}
+	render() {
+		return b`
+            <textarea
+                part="textarea"
+                class="textarea"
+                data-slot="input-group-control"
+                rows=${this.rows}
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                aria-invalid=${this.invalid ? "true" : A}
+                @input=${this.handleInput}
+            ></textarea>
+        `;
+	}
+	handleInput(event) {
+		const target = event.target;
+		this.value = target.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([e(".textarea")], PkInputGroupTextarea.prototype, "textareaElement", void 0);
+__decorate([n()], PkInputGroupTextarea.prototype, "placeholder", void 0);
+__decorate([n({
+	attribute: "value",
+	reflect: true
+})], PkInputGroupTextarea.prototype, "value", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "disabled", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "readonly", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "invalid", void 0);
+__decorate([n({ type: Number })], PkInputGroupTextarea.prototype, "rows", void 0);
+PkInputGroupTextarea = __decorate([t("pk-input-group-textarea")], PkInputGroupTextarea);
+//#endregion
+export { PkInputGroupTextarea };

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

@@ -0,0 +1,234 @@
+import { m as i, p as b, s as e, u as t } from "../../chunks/lit-Dnn7gEi2.js";
+import { a as HostAriaMirror, c as __decorate, l as PkElement } from "../../chunks/pk-base-BlxAYXJD.js";
+import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "../../chunks/button-group-item.styles-Dwakbyx5.js";
+//#region src/components/input-group/pk-input-group.styles.ts
+var pkInputGroupStyles = [
+	buttonGroupCornerRoleStyles(),
+	buttonGroupCornerRadiusStyles(".group", "var(--pk-radius-lg)"),
+	buttonGroupBorderJoinStyles(".group"),
+	i`
+        @layer pk-component {
+            :host {
+                display: block;
+                width: 100%;
+                min-width: 0;
+                font-family: var(--pk-font-family);
+                font-size: var(--pk-font-size-base);
+                line-height: var(--pk-line-height);
+            }
+
+            :host([data-pk-group-orientation]) {
+                display: flex;
+                flex-direction: column;
+                width: auto;
+                flex: 0 1 auto;
+                align-self: stretch;
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])) {
+                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])) {
+                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]) {
+                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]) {
+                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider]) .group {
+                border-left-width: 1px;
+                border-left-style: solid;
+                border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));
+                box-shadow: none;
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-divider]) .group {
+                border-top-width: 1px;
+                border-top-style: solid;
+                border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));
+                box-shadow: none;
+            }
+
+            :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail]) .group {
+                border-right-width: 0;
+            }
+
+            :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail]) .group {
+                border-bottom-width: 0;
+            }
+
+            .group {
+                display: flex;
+                position: relative;
+                align-items: center;
+                width: 100%;
+                min-width: 0;
+                min-height: var(--pk-btn-height-default);
+                border: var(--pk-input-border, 1px solid var(--pk-input-border-color));
+                border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));
+                background: var(--pk-input-bg);
+                background-clip: padding-box;
+                box-sizing: border-box;
+                transition: border-color 0.12s ease, box-shadow 0.12s ease;
+            }
+
+            :host([data-block-layout]) .group {
+                flex-direction: column;
+                align-items: stretch;
+                height: auto;
+                min-height: 0;
+            }
+
+            :host([data-block-layout]) ::slotted(pk-input-group-textarea),
+            :host([data-block-layout]) ::slotted(pk-input-group-addon[align='block-start']),
+            :host([data-block-layout]) ::slotted(pk-input-group-addon[align='block-end']) {
+                width: 100%;
+                align-self: stretch;
+            }
+
+            ::slotted(pk-input-group-input),
+            ::slotted(pk-input-group-textarea) {
+                flex: 1 1 auto;
+                min-width: 0;
+            }
+
+            ::slotted(pk-input-group-addon[align='inline-start']) {
+                order: -1;
+            }
+
+            ::slotted(pk-input-group-addon[align='inline-end']) {
+                order: 1;
+            }
+
+            ::slotted(pk-input-group-addon[align='block-start']) {
+                order: -1;
+            }
+
+            ::slotted(pk-input-group-addon[align='block-end']) {
+                order: 1;
+            }
+
+            /*
+             * Do not use :host(:has(slotted…)) for focus/invalid — Chromium cannot see
+             * light-DOM slotted children from shadow :has() (same reason as data-block-layout).
+             * :host(:focus-within) follows the composed tree into nested shadow inputs.
+             * data-invalid / data-disabled are synced from the slotted control in TS.
+             */
+            /* Craft focus = box-shadow only; keep resting / invalid border (no stacked border-color). */
+            :host(:focus-within:not([data-invalid])) .group {
+                box-shadow: var(--pk-input-focus-shadow);
+            }
+
+            :host([data-invalid]) .group {
+                border-color: var(--pk-color-rose-600);
+            }
+
+            :host([data-invalid]:focus-within) .group {
+                box-shadow: var(--pk-input-invalid-focus-shadow);
+            }
+
+            :host([data-disabled]) .group {
+                opacity: 0.5;
+            }
+        }
+    `
+];
+//#endregion
+//#region src/components/input-group/pk-input-group.ts
+function getSlottedFocusTarget(slot) {
+	const [control] = slot.assignedElements({ flatten: true });
+	if (!(control instanceof HTMLElement)) return null;
+	if (control.matches("pk-input-group-input, pk-input-group-textarea")) {
+		const inner = control.shadowRoot?.querySelector("input, textarea");
+		return inner instanceof HTMLElement ? inner : null;
+	}
+	const nested = control.querySelector("input, textarea, select, button[aria-haspopup]");
+	return nested instanceof HTMLElement ? nested : null;
+}
+var PkInputGroup = class PkInputGroup extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.handleSlotChange = () => {
+			this.syncSlotDerivedState();
+			this.observeAssignedControls();
+			this.hostAriaMirror?.sync();
+		};
+	}
+	static {
+		this.styles = pkInputGroupStyles;
+	}
+	disconnectedCallback() {
+		this.hostAriaMirror?.disconnect();
+		this.hostAriaMirror = void 0;
+		this.controlStateObserver?.disconnect();
+		this.controlStateObserver = void 0;
+		super.disconnectedCallback();
+	}
+	firstUpdated() {
+		this.syncSlotDerivedState();
+		this.connectAriaMirror();
+		this.connectControlStateObserver();
+	}
+	connectAriaMirror() {
+		this.hostAriaMirror?.disconnect();
+		this.hostAriaMirror = new HostAriaMirror(this, () => this.defaultSlot ? getSlottedFocusTarget(this.defaultSlot) : null);
+		this.hostAriaMirror.connect();
+	}
+	connectControlStateObserver() {
+		this.controlStateObserver?.disconnect();
+		this.controlStateObserver = new MutationObserver(() => {
+			this.syncControlChromeState();
+		});
+		this.observeAssignedControls();
+	}
+	observeAssignedControls() {
+		if (!this.controlStateObserver) return;
+		this.controlStateObserver.disconnect();
+		for (const element of this.defaultSlot?.assignedElements({ flatten: true }) ?? []) this.controlStateObserver.observe(element, {
+			attributes: true,
+			attributeFilter: [
+				"invalid",
+				"disabled",
+				"aria-invalid"
+			]
+		});
+	}
+	syncSlotDerivedState() {
+		this.syncBlockLayout();
+		this.syncControlChromeState();
+	}
+	/** Block addons live in light DOM; `:host(:has())` cannot see slotted children from shadow styles. */
+	syncBlockLayout() {
+		const blockLayout = (this.defaultSlot?.assignedElements({ flatten: true }) ?? []).some((element) => element.matches("pk-input-group-addon[align=\"block-start\"], pk-input-group-addon[align=\"block-end\"]"));
+		this.toggleAttribute("data-block-layout", blockLayout);
+	}
+	/**
+	* Mirror control invalid/disabled onto the host so shadow styles can paint shell chrome
+	* without `:host(:has(…))` (unreliable for light-DOM slotted children in Chromium).
+	*/
+	syncControlChromeState() {
+		const elements = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];
+		const control = elements.find((element) => element.matches("pk-input-group-input, pk-input-group-textarea"));
+		const isInvalid = Boolean(control && (control.hasAttribute("invalid") || control.getAttribute("aria-invalid") === "true" || "invalid" in control && Boolean(control.invalid)));
+		const isDisabled = elements.some((element) => element.hasAttribute("disabled") || "disabled" in element && Boolean(element.disabled));
+		this.toggleAttribute("data-invalid", isInvalid);
+		this.toggleAttribute("data-disabled", isDisabled);
+	}
+	render() {
+		return b`
+            <div part="base" class="group" role="group">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+__decorate([e("slot")], PkInputGroup.prototype, "defaultSlot", void 0);
+PkInputGroup = __decorate([t("pk-input-group")], PkInputGroup);
+//#endregion
+export { PkInputGroup };

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

@@ -0,0 +1,2 @@
+import { t as PkLightswitch } from "../../chunks/pk-lightswitch-D-UrNM3y.js";
+export { PkLightswitch };