@verbb/plugin-kit-web 2.0.0

package/dist-loader/chunks/pk-checkbox-hJCj8In8.js

@@ -0,0 +1,273 @@
+import { c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as t } from "./lit-Dnn7gEi2.js";
+import { c as __decorate, i as PkFormAssociatedElement, r as checkboxControlStyles } from "./pk-base-BlxAYXJD.js";
+import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
+import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
+//#region src/icons/checkbox-indicators.ts
+/** Craft checkbox tick — matches plugin-kit-react Checkbox.tsx */
+function renderCheckboxCheckIcon() {
+	return b`
+        <svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" viewBox="0 0 640 640">
+            <path
+                fill="currentColor"
+                d="M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z"
+            />
+        </svg>
+    `;
+}
+/** Craft checkbox indeterminate mark — matches plugin-kit-react Checkbox.tsx */
+function renderCheckboxIndeterminateIcon() {
+	return b`
+        <svg xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" viewBox="0 0 640 640">
+            <path fill="currentColor" d="M96 352V288H544V352H96z" />
+        </svg>
+    `;
+}
+var pkCheckboxStyles = [checkboxControlStyles, i`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            vertical-align: middle;
+            /* Hit target is the content-sized .root label (Craft checkbox-select), not the host. */
+            cursor: default;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        :host([disabled]) {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        .root {
+            display: inline-flex;
+            flex-shrink: 0;
+            align-items: center;
+            justify-content: flex-start;
+            gap: var(--pk-control-label-gap);
+            /* Content-sized like Craft's <label> beside the checkbox — not full-row. */
+            width: fit-content;
+            max-width: 100%;
+            margin: 0;
+            min-height: 0;
+            cursor: pointer;
+            user-select: none;
+            position: relative;
+        }
+
+        :host([disabled]) .root {
+            cursor: not-allowed;
+        }
+
+        .root--with-hint {
+            align-items: flex-start;
+        }
+
+        .input {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+            opacity: 0;
+            appearance: none;
+        }
+
+        .text {
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+            min-width: 0;
+        }
+
+        .label {
+            line-height: max(1rem, var(--pk-checkbox-size));
+            /* Match form-control / Craft body labels (gray-700), not gray-900. */
+            color: var(--pk-color-gray-700);
+            cursor: pointer;
+        }
+
+        :host([disabled]) .label {
+            cursor: not-allowed;
+        }
+
+        :host(.all-option) .label {
+            font-weight: 700;
+        }
+
+        .hint {
+            margin: 0;
+            color: var(--pk-color-gray-500);
+            font-size: var(--pk-font-size-sm);
+            line-height: var(--pk-line-height);
+        }
+
+        .hint:empty {
+            display: none;
+        }
+    }
+`];
+//#endregion
+//#region src/components/checkbox/pk-checkbox.ts
+var PkCheckbox = class PkCheckbox extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["change"];
+		this.hasSlotController = new HasSlotController(this, "hint");
+		this.checked = false;
+		this.indeterminate = false;
+		this.disabled = false;
+		this.invalid = false;
+		this.checkboxValue = "on";
+		this.defaultChecked = false;
+		this.ariaLabel = null;
+		this.hint = "";
+		this.withHint = false;
+		this.hasDefaultSlotContent = false;
+	}
+	static {
+		this.shadowRootOptions = {
+			mode: "open",
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = pkCheckboxStyles;
+	}
+	static get validators() {
+		return [...super.validators, RequiredValidator({ validationProperty: "checked" })];
+	}
+	get validationTarget() {
+		return this.input;
+	}
+	syncFormValue() {
+		this.setFormValue(this.checked ? this.checkboxValue : null, this.checked ? "on" : "off");
+	}
+	resetToDefaultValue() {
+		this.checked = this.defaultChecked;
+		this.indeterminate = false;
+	}
+	restoreFormState(state) {
+		if (state === "on" || state === this.checkboxValue) this.checked = true;
+		else this.checked = false;
+	}
+	updated(changed) {
+		if (!this.input) {
+			super.updated(changed);
+			return;
+		}
+		if (changed.has("indeterminate") || changed.has("checked")) {
+			this.input.indeterminate = this.indeterminate;
+			this.input.checked = this.checked;
+		}
+		super.updated(changed);
+	}
+	defaultSlotChanged(event) {
+		const slot = event.target;
+		this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {
+			if (node.nodeType === Node.TEXT_NODE) return node.textContent?.trim();
+			return node.nodeType === Node.ELEMENT_NODE;
+		});
+	}
+	handleChange(event) {
+		const input = event.target;
+		this.checked = input.checked;
+		this.indeterminate = false;
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { checked: this.checked },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hasLabel = this.hasDefaultSlotContent;
+		const hasHint = Boolean(this.hint) || this.hasSlotController.test("hint", this.withHint);
+		return b`
+            <label
+                part="base"
+                class=${e({
+			root: true,
+			"root--with-hint": hasHint
+		})}
+            >
+                <input
+                    part="input"
+                    class="input"
+                    type="checkbox"
+                    .checked=${this.checked}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    name=${this.name ?? A}
+                    value=${this.checkboxValue}
+                    aria-labelledby=${hasLabel ? "label" : A}
+                    aria-describedby=${hasHint ? "hint" : A}
+                    aria-label=${!hasLabel ? this.ariaLabel ?? A : A}
+                    aria-invalid=${this.invalid ? "true" : A}
+                    @change=${this.handleChange}
+                />
+                <span part="control" class="control">
+                    <span part="checked-icon" class="icon-check">${renderCheckboxCheckIcon()}</span>
+                    <span part="indeterminate-icon" class="icon-indeterminate">${renderCheckboxIndeterminateIcon()}</span>
+                </span>
+                ${hasLabel || hasHint ? b`
+                        <span class="text">
+                            ${hasLabel ? b`
+                                    <span part="label" class="label" id="label">
+                                        <slot @slotchange=${this.defaultSlotChanged}></slot>
+                                    </span>
+                                ` : b`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}
+                            ${hasHint ? b`
+                                    <span part="hint" class="hint" id="hint">
+                                        <slot name="hint">${this.hint}</slot>
+                                    </span>
+                                ` : A}
+                        </span>
+                    ` : b`<slot @slotchange=${this.defaultSlotChanged} hidden></slot>`}
+            </label>
+        `;
+	}
+};
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkCheckbox.prototype, "checked", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkCheckbox.prototype, "indeterminate", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkCheckbox.prototype, "disabled", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkCheckbox.prototype, "invalid", void 0);
+__decorate([n()], PkCheckbox.prototype, "checkboxValue", void 0);
+__decorate([n({
+	attribute: "default-checked",
+	type: Boolean
+})], PkCheckbox.prototype, "defaultChecked", void 0);
+__decorate([n({ attribute: "aria-label" })], PkCheckbox.prototype, "ariaLabel", void 0);
+__decorate([n()], PkCheckbox.prototype, "hint", void 0);
+__decorate([n({
+	type: Boolean,
+	attribute: "with-hint"
+})], PkCheckbox.prototype, "withHint", void 0);
+__decorate([e$1(".input")], PkCheckbox.prototype, "input", void 0);
+__decorate([r()], PkCheckbox.prototype, "hasDefaultSlotContent", void 0);
+PkCheckbox = __decorate([t("pk-checkbox")], PkCheckbox);
+//#endregion
+export { PkCheckbox as t };

package/dist-loader/chunks/pk-clear-BMZUzwDt.js

@@ -0,0 +1,13 @@
+//#region src/events/pk-clear.ts
+/** Fired when a form control's value is cleared — mirrors  `pk-clear`. */
+var PkClearEvent = class extends Event {
+	constructor() {
+		super("pk-clear", {
+			bubbles: true,
+			cancelable: false,
+			composed: true
+		});
+	}
+};
+//#endregion
+export { PkClearEvent as t };

package/dist-loader/chunks/pk-color-input-BfNtLznP.js

@@ -0,0 +1,393 @@
+import { c as r, f as A, i as e, l as n, m as i, p as b, s as e$1, u as t } from "./lit-Dnn7gEi2.js";
+import { c as __decorate, i as PkFormAssociatedElement } from "./pk-base-BlxAYXJD.js";
+import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
+import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
+//#region src/components/color-input/pk-color-input.styles.ts
+/**
+* Size scale matches pk-input (xs / sm / default / lg). Metrics are shifted so
+* former `lg` (2.125rem / ~34px) is default — aligned with base input chrome.
+* `xl` is kept as a deprecated alias of `lg`.
+*/
+var pkColorInputStyles = i`
+    @layer pk-component {
+        :host {
+            display: inline-block;
+            position: relative;
+            /* Former lg min-width — default now matches input default chrome. */
+            min-width: 6.75rem;
+            font-family: var(--pk-font-family);
+            vertical-align: middle;
+        }
+
+        :host([size='xs']) {
+            min-width: 5.5rem;
+        }
+
+        :host([size='sm']) {
+            min-width: 6.125rem;
+        }
+
+        :host([size='lg']),
+        :host([size='xl']) {
+            min-width: 7.375rem;
+        }
+
+        :host([fit-cell]) {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            max-width: 100%;
+            height: 100%;
+        }
+
+        :host([fit-cell]) .root {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .root {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+
+        .swatch {
+            position: absolute;
+            top: 50%;
+            left: 0.5rem;
+            z-index: 2;
+            width: 1.25rem;
+            height: 1.25rem;
+            transform: translateY(-50%);
+            border-radius: var(--pk-radius-sm);
+        }
+
+        :host([size='xs']) .swatch {
+            left: 0.375rem;
+            width: 1rem;
+            height: 1rem;
+        }
+
+        :host([size='sm']) .swatch {
+            left: 0.375rem;
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        :host([size='lg']) .swatch,
+        :host([size='xl']) .swatch {
+            left: 0.5rem;
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        :host([fit-cell]) .swatch {
+            left: 0.5rem;
+            width: 1rem;
+            height: 1rem;
+        }
+
+        .swatch-preview {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+        }
+
+        .swatch-preview.is-transparent {
+            background-color: #fff;
+            background-image:
+                linear-gradient(45deg, #d1d5db 25%, transparent 25%),
+                linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #d1d5db 75%),
+                linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
+            background-size: 8px 8px;
+            background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+        }
+
+        .swatch-picker {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            opacity: 0;
+            cursor: pointer;
+            appearance: none;
+        }
+
+        .swatch-picker:disabled {
+            cursor: not-allowed;
+        }
+
+        .hash {
+            position: absolute;
+            top: 50%;
+            left: 2.125rem;
+            z-index: 1;
+            transform: translateY(-50%);
+            color: var(--pk-color-gray-300);
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            pointer-events: none;
+            user-select: none;
+        }
+
+        :host([size='xs']) .hash {
+            left: 1.625rem;
+        }
+
+        :host([size='sm']) .hash {
+            left: 2rem;
+        }
+
+        :host([size='lg']) .hash,
+        :host([size='xl']) .hash {
+            left: 2.5rem;
+        }
+
+        :host([fit-cell]) .hash {
+            left: 1.75rem;
+        }
+
+        .hex-input {
+            display: block;
+            width: 100%;
+            /* Former lg — matches pk-input default chrome (~34px). */
+            height: 2.125rem;
+            margin: 0;
+            padding-inline: 3rem 0.75rem;
+            border: var(--pk-input-border);
+            border-radius: var(--pk-input-border-radius);
+            background: var(--pk-input-bg);
+            color: var(--pk-color-gray-700);
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            outline: none;
+            box-sizing: border-box;
+            transition: border-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        :host([size='xs']) .hex-input {
+            height: 1.625rem;
+            padding-inline: 2.25rem 0.625rem;
+        }
+
+        :host([size='sm']) .hex-input {
+            height: 1.875rem;
+            padding-inline: 2.75rem 0.75rem;
+        }
+
+        :host([size='lg']) .hex-input,
+        :host([size='xl']) .hex-input {
+            height: 2.375rem;
+            padding-inline: 3.25rem 0.875rem;
+        }
+
+        :host([fit-cell]) .hex-input {
+            width: 100%;
+            max-width: 100%;
+            height: 100%;
+            padding-inline: 2.25rem 0.5rem;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        .hex-input:focus,
+        .hex-input:focus-visible {
+            border-color: var(--pk-color-sky-600);
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        :host([invalid]) .hex-input:focus,
+        :host([invalid]) .hex-input:focus-visible {
+            border-color: var(--pk-color-rose-600);
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        :host([fit-cell]:not([invalid])) .hex-input:focus,
+        :host([fit-cell]:not([invalid])) .hex-input:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);
+        }
+
+        :host([fit-cell][invalid]) .hex-input,
+        :host([fit-cell][invalid]) .hex-input:focus,
+        :host([fit-cell][invalid]) .hex-input:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);
+        }
+
+        .hex-input:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        :host([invalid]) .hex-input {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([disabled]) .swatch {
+            opacity: 0.5;
+        }
+    }
+`;
+//#endregion
+//#region src/components/color-input/pk-color-input.ts
+var DEFAULT_COLOR = "#000000";
+function sanitizeHex(value) {
+	return String(value || "").replace(/^#/, "").replace(/[^0-9a-fA-F]/g, "").slice(0, 6).toLowerCase();
+}
+function isCompleteHex(value) {
+	return value.length === 3 || value.length === 6;
+}
+function expandShortHex(value) {
+	if (value.length !== 3) return value;
+	return value.split("").map((char) => `${char}${char}`).join("");
+}
+function toPickerValue(hex) {
+	if (hex.length === 6) return `#${hex}`;
+	if (hex.length === 3) return `#${expandShortHex(hex)}`;
+	return DEFAULT_COLOR;
+}
+var PkColorInput = class PkColorInput extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.size = "default";
+		this.fitCell = false;
+		this.invalid = false;
+		this.value = "";
+		this.defaultValue = "";
+		this.ariaLabel = null;
+		this.hexValue = "";
+	}
+	static {
+		this.styles = pkColorInputStyles;
+	}
+	static get validators() {
+		return [
+			...super.validators,
+			MirrorValidator(),
+			RequiredValidator()
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncHexFromValue();
+	}
+	willUpdate(changed) {
+		if (changed.has("value")) this.syncHexFromValue();
+		super.willUpdate(changed);
+	}
+	syncHexFromValue() {
+		this.hexValue = sanitizeHex(this.value);
+	}
+	get validationTarget() {
+		return this.input;
+	}
+	syncFormValue() {
+		const submitted = this.hexValue ? `#${this.hexValue}` : "";
+		this.setFormValue(submitted, submitted);
+	}
+	resetToDefaultValue() {
+		this.value = this.defaultValue;
+		this.hexValue = sanitizeHex(this.defaultValue);
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") {
+			this.value = state;
+			this.hexValue = sanitizeHex(state);
+		}
+	}
+	emitChange() {
+		const next = this.hexValue ? `#${this.hexValue}` : "";
+		this.value = next;
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value: next },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleHexInput(event) {
+		const nextHex = sanitizeHex(event.target.value);
+		this.hexValue = nextHex;
+		this.emitChange();
+	}
+	handlePickerChange(event) {
+		const nextHex = sanitizeHex(event.target.value);
+		this.hexValue = nextHex;
+		this.emitChange();
+	}
+	render() {
+		const previewColor = toPickerValue(this.hexValue);
+		const isTransparent = !isCompleteHex(this.hexValue);
+		return b`
+            <div class="root">
+                <div part="swatch" class="swatch">
+                    <div
+                        class=${e({
+			"swatch-preview": true,
+			"is-transparent": isTransparent
+		})}
+                        style=${isTransparent ? A : `background-color: ${previewColor}`}
+                    ></div>
+                    <input
+                        part="picker"
+                        class="swatch-picker"
+                        type="color"
+                        .value=${previewColor}
+                        ?disabled=${this.disabled}
+                        aria-label="Color picker"
+                        @input=${this.handlePickerChange}
+                    />
+                </div>
+                <span class="hash" aria-hidden="true">#</span>
+                <input
+                    part="input"
+                    class="hex-input"
+                    type="text"
+                    inputmode="text"
+                    autocomplete="off"
+                    maxlength="6"
+                    .value=${this.hexValue}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    aria-label=${this.ariaLabel ?? A}
+                    aria-invalid=${this.invalid ? "true" : A}
+                    @input=${this.handleHexInput}
+                />
+            </div>
+        `;
+	}
+};
+__decorate([n({ reflect: true })], PkColorInput.prototype, "size", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-cell"
+})], PkColorInput.prototype, "fitCell", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkColorInput.prototype, "invalid", void 0);
+__decorate([n()], PkColorInput.prototype, "value", void 0);
+__decorate([n({ attribute: "default-value" })], PkColorInput.prototype, "defaultValue", void 0);
+__decorate([n({ attribute: "aria-label" })], PkColorInput.prototype, "ariaLabel", void 0);
+__decorate([e$1(".hex-input")], PkColorInput.prototype, "input", void 0);
+__decorate([r()], PkColorInput.prototype, "hexValue", void 0);
+PkColorInput = __decorate([t("pk-color-input")], PkColorInput);
+//#endregion
+export { PkColorInput as t };