@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-field-Buy_AtYF.js

@@ -0,0 +1,485 @@
+import { n as createTranslationIconElement, t as icons_exports } from "./icons-BR8JcQj2.js";
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
+import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
+import { t as createIconElement } from "./render-Dvc3MHQR.js";
+import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { renderInlineMarkdown } from "@verbb/plugin-kit-core";
+//#region src/base/markdown.styles.ts
+/** Shared inline markdown styling for field instructions, errors, and warnings. */
+var inlineMarkdownStyles = css`
+    @layer pk-component {
+        .pk-inline-markdown a {
+            color: var(--pk-color-blue-500);
+            text-decoration: none;
+        }
+
+        .pk-inline-markdown a:hover {
+            text-decoration: underline;
+        }
+
+        /* Craft p code — gray chip; tip/warning/error override bg/border on pk-field. */
+        .pk-inline-markdown code {
+            /* Craft --border-hairline ≈ gray-800 @ 10%. */
+            border: 1px solid color-mix(in srgb, var(--pk-color-gray-800) 10%, transparent);
+            border-radius: var(--pk-radius-sm);
+            background: var(--pk-color-gray-100);
+            padding-block: 0.0625em;
+            padding-inline: 0.25em;
+            font-family: var(--pk-font-family-mono, ui-monospace, monospace);
+            /* v1 field help/errors used [&_code]:text-[0.85em] — tighter than --pk-font-size-mono (0.9em). */
+            font-size: var(--pk-inline-markdown-code-font-size, 0.85em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            /* Inherit tip/warning/error/instructions text color (Craft parity). */
+            color: inherit;
+        }
+    }
+`;
+//#endregion
+//#region src/internal/field-aria.ts
+/** Wires label/instructions/errors/warning/tip ids to a slotted field control. */
+function syncFieldAria({ control, labelId, instructionsId, errorsId, warningId, tipId, controlId, hasLabel, hasInstructions, hasErrors, hasWarning, hasTip, hasRequired = false, invalid = false }) {
+	if (!control.id) control.id = controlId;
+	if (hasLabel) control.setAttribute("aria-labelledby", labelId);
+	else control.removeAttribute("aria-labelledby");
+	const describedBy = [
+		hasInstructions ? instructionsId : "",
+		hasErrors ? errorsId : "",
+		hasWarning ? warningId : "",
+		hasTip ? tipId : ""
+	].filter(Boolean);
+	if (describedBy.length > 0) control.setAttribute("aria-describedby", describedBy.join(" "));
+	else control.removeAttribute("aria-describedby");
+	if (hasRequired) control.setAttribute("aria-required", "true");
+	else control.removeAttribute("aria-required");
+	const isInvalid = Boolean(invalid || hasErrors);
+	if (isInvalid) {
+		control.setAttribute("aria-invalid", "true");
+		control.setAttribute("aria-errormessage", errorsId);
+	} else {
+		control.removeAttribute("aria-invalid");
+		control.removeAttribute("aria-errormessage");
+	}
+	syncControlInvalidState(control, isInvalid);
+}
+/** Prefer the Lit `invalid` property when present; otherwise toggle the attribute. */
+function syncControlInvalidState(control, isInvalid) {
+	if ("invalid" in control) {
+		control.invalid = isInvalid;
+		return;
+	}
+	control.toggleAttribute("invalid", isInvalid);
+}
+//#endregion
+//#region src/utils/inline-markdown.ts
+/** Renders inline markdown for Lit templates (bold, italic, links, code). */
+function inlineMarkdown(content) {
+	if (!content) return nothing;
+	const html = renderInlineMarkdown(content);
+	if (!html) return nothing;
+	return unsafeHTML(html);
+}
+//#endregion
+//#region src/components/field/pk-field.styles.ts
+var pkFieldStyles = css`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+        }
+
+        .form-control__control {
+            display: block;
+            position: relative;
+            width: 100%;
+        }
+
+        .form-control__header--with-end {
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 0.75rem;
+        }
+
+        .form-control__header-main {
+            display: flex;
+            flex-direction: column;
+            gap: 0.125rem;
+            min-width: 0;
+            flex: 1 1 auto;
+        }
+
+        .form-control__header-end {
+            flex-shrink: 0;
+        }
+
+        .form-control__required {
+            display: inline-flex;
+            align-items: center;
+            color: var(--pk-color-rose-600);
+            line-height: 0;
+        }
+
+        .form-control__required svg {
+            display: block;
+            width: 10px;
+            height: 10px;
+        }
+
+        .form-control__translatable {
+            display: inline-flex;
+            align-items: center;
+            color: var(--pk-color-gray-550);
+            line-height: 0;
+        }
+
+        .form-control__translatable svg {
+            display: block;
+            width: 1rem;
+            height: 1rem;
+            fill: currentColor;
+        }
+
+        .form-control__errors {
+            margin: 0;
+            padding-inline-start: 20px;
+            color: var(--pk-color-error);
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+            list-style: square;
+        }
+
+        .form-control__errors:empty {
+            display: none;
+        }
+
+        .form-control__warning {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.25rem;
+            min-width: 0;
+            margin: 0;
+            color: var(--pk-color-warning);
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .form-control__warning:empty {
+            display: none;
+        }
+
+        .form-control__warning-icon {
+            display: inline-flex;
+            flex-shrink: 0;
+            margin-top: 0.3em;
+            width: 0.75rem;
+            height: 0.75rem;
+            line-height: 0;
+        }
+
+        .form-control__warning-text {
+            min-width: 0;
+            margin: 0;
+        }
+
+        .form-control__warning-icon svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        /* Craft .warning code — amber chip matching warning text. */
+        .form-control__warning .pk-inline-markdown code {
+            background-color: var(--pk-color-amber-100);
+            border-color: var(--pk-color-amber-300);
+        }
+
+        .form-control__tip {
+            display: flex;
+            align-items: flex-start;
+            gap: 0.25rem;
+            min-width: 0;
+            margin: 0;
+            color: var(--pk-color-sky-700);
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .form-control__tip:empty {
+            display: none;
+        }
+
+        .form-control__tip-icon {
+            display: inline-flex;
+            flex-shrink: 0;
+            margin-top: 0.3em;
+            width: 0.75rem;
+            height: 0.75rem;
+            line-height: 0;
+        }
+
+        .form-control__tip-text {
+            min-width: 0;
+            margin: 0;
+        }
+
+        .form-control__tip-icon svg {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .form-control__tip-text a {
+            text-decoration: underline;
+        }
+
+        /* Craft .tip code — sky/notice chip matching tip text. */
+        .form-control__tip .pk-inline-markdown code {
+            background-color: var(--pk-color-sky-100);
+            border-color: var(--pk-color-sky-300);
+        }
+
+        /* Craft --bg-error / --border-error pattern for field errors. */
+        .form-control__errors.pk-inline-markdown code {
+            background-color: var(--pk-color-red-100);
+            border-color: var(--pk-color-red-300);
+        }
+    }
+`;
+//#endregion
+//#region src/components/field/pk-field.ts
+var PkField = class PkField extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.hasSlotController = new HasSlotController(this, "label", "instructions", "hint", "header-end", "warning", "tip", "errors");
+		this.baseId = uniqueId("pk-field");
+		this.label = "";
+		this.instructions = "";
+		this.required = false;
+		this.translatable = false;
+		this.warning = "";
+		this.tip = "";
+		this.errors = [];
+		this.for = "";
+		this.onLabelClick = (event) => {
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			if (target.closest("button, a, input, select, textarea, [role=\"button\"], [role=\"link\"]")) return;
+			this.focusControl();
+		};
+		this.onControlSlotChange = () => {
+			this.syncControlAria();
+			this.requestUpdate();
+		};
+	}
+	static {
+		this.styles = [
+			formControlStyles,
+			inlineMarkdownStyles,
+			pkFieldStyles
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		const legacyHint = this.getAttribute("hint");
+		if (legacyHint && !this.instructions) this.instructions = legacyHint;
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("label") || changed.has("instructions") || changed.has("errors") || changed.has("warning") || changed.has("tip") || changed.has("required") || changed.has("for")) this.syncControlAria();
+	}
+	get labelId() {
+		return `${this.baseId}-label`;
+	}
+	get instructionsId() {
+		return `${this.baseId}-instructions`;
+	}
+	get errorsId() {
+		return `${this.baseId}-errors`;
+	}
+	get warningId() {
+		return `${this.baseId}-warning`;
+	}
+	get tipId() {
+		return `${this.baseId}-tip`;
+	}
+	get controlId() {
+		return this.for || `${this.baseId}-control`;
+	}
+	hasLabel() {
+		return Boolean(this.label) || this.hasSlotController.test("label");
+	}
+	hasInstructions() {
+		return Boolean(this.instructions) || this.hasSlotController.test("instructions") || this.hasSlotController.test("hint");
+	}
+	hasHeaderEnd() {
+		return this.hasSlotController.test("header-end");
+	}
+	hasErrors() {
+		return this.errors.length > 0 || this.hasSlotController.test("errors");
+	}
+	hasWarning() {
+		return Boolean(this.warning) || this.hasSlotController.test("warning");
+	}
+	hasTip() {
+		return Boolean(this.tip) || this.hasSlotController.test("tip");
+	}
+	getControlElement() {
+		const [control] = this.controlSlot?.assignedElements({ flatten: true }) ?? [];
+		if (control instanceof HTMLElement) return control;
+		if (this.for) return this.getRootNode().getElementById(this.for);
+		return null;
+	}
+	focusControl() {
+		const control = this.getControlElement();
+		if (!control || typeof control.focus !== "function") return;
+		control.focus();
+	}
+	syncControlAria() {
+		const control = this.getControlElement();
+		if (!control) return;
+		syncFieldAria({
+			control,
+			labelId: this.labelId,
+			instructionsId: this.instructionsId,
+			errorsId: this.errorsId,
+			warningId: this.warningId,
+			tipId: this.tipId,
+			controlId: this.controlId,
+			hasLabel: this.hasLabel(),
+			hasInstructions: this.hasInstructions(),
+			hasErrors: this.hasErrors(),
+			hasWarning: this.hasWarning(),
+			hasTip: this.hasTip(),
+			hasRequired: this.required,
+			invalid: this.hasErrors()
+		});
+	}
+	render() {
+		const hasLabel = this.hasLabel();
+		const hasInstructions = this.hasInstructions();
+		const hasHeaderEnd = this.hasHeaderEnd();
+		const hasErrors = this.hasErrors();
+		const hasWarning = this.hasWarning();
+		const hasTip = this.hasTip();
+		const labelFor = this.for || (hasLabel ? this.controlId : nothing);
+		return html`
+            <div part="form-control" class="form-control">
+                ${hasLabel || hasInstructions || hasHeaderEnd ? html`
+                        <div
+                            part="header"
+                            class=${classMap({
+			"form-control__header": true,
+			"form-control__header--with-end": hasHeaderEnd
+		})}
+                        >
+                            <div class="form-control__header-main">
+                                ${hasLabel ? html`
+                                        <label
+                                            part="label"
+                                            class="form-control__label"
+                                            id=${this.labelId}
+                                            for=${labelFor}
+                                            data-error=${hasErrors ? "true" : nothing}
+                                            @click=${this.onLabelClick}
+                                        >
+                                            <slot name="label">${this.label}</slot>
+                                            ${this.required ? html`
+                                                    <span class="sr-only">Required</span>
+                                                    <span class="form-control__required" aria-hidden="true">
+                                                        ${createIconElement(icons_exports.asterisk)}
+                                                    </span>
+                                                ` : nothing}
+                                            ${this.translatable ? html`
+                                                    <span class="form-control__translatable" title="Translatable">
+                                                        ${createTranslationIconElement()}
+                                                        <span class="sr-only">Translatable</span>
+                                                    </span>
+                                                ` : nothing}
+                                        </label>
+                                    ` : nothing}
+
+                                ${hasInstructions ? html`
+                                        <p
+                                            part="instructions"
+                                            class="form-control__instructions pk-inline-markdown"
+                                            id=${this.instructionsId}
+                                        >
+                                            <slot name="instructions">${inlineMarkdown(this.instructions)}</slot>
+                                            <slot name="hint"></slot>
+                                        </p>
+                                    ` : nothing}
+                            </div>
+
+                            ${hasHeaderEnd ? html`
+                                    <div part="header-end" class="form-control__header-end">
+                                        <slot name="header-end"></slot>
+                                    </div>
+                                ` : html`<slot name="header-end" hidden></slot>`}
+                        </div>
+                    ` : nothing}
+
+                <div part="control" class="form-control__control">
+                    <slot @slotchange=${this.onControlSlotChange}></slot>
+                </div>
+
+                ${hasErrors ? html`
+                        <ul part="errors" class="form-control__errors pk-inline-markdown" id=${this.errorsId}>
+                            ${this.errors.map((message) => html`<li>${inlineMarkdown(message)}</li>`)}
+                            <slot name="errors"></slot>
+                        </ul>
+                    ` : nothing}
+
+                ${hasWarning ? html`
+                        <div part="warning" class="form-control__warning" id=${this.warningId}>
+                            <span class="form-control__warning-icon" aria-hidden="true">
+                                ${createIconElement(icons_exports.triangleExclamation)}
+                            </span>
+                            <p class="form-control__warning-text pk-inline-markdown">
+                                <slot name="warning">${inlineMarkdown(this.warning)}</slot>
+                            </p>
+                        </div>
+                    ` : nothing}
+
+                ${hasTip ? html`
+                        <div part="tip" class="form-control__tip" id=${this.tipId}>
+                            <span class="form-control__tip-icon" aria-hidden="true">
+                                ${createIconElement(icons_exports.lightbulb)}
+                            </span>
+                            <p class="form-control__tip-text pk-inline-markdown">
+                                <span class="sr-only">Tip: </span>
+                                <slot name="tip">${inlineMarkdown(this.tip)}</slot>
+                            </p>
+                        </div>
+                    ` : nothing}
+            </div>
+        `;
+	}
+};
+__decorate([property()], PkField.prototype, "label", void 0);
+__decorate([property()], PkField.prototype, "instructions", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkField.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkField.prototype, "translatable", void 0);
+__decorate([property()], PkField.prototype, "warning", void 0);
+__decorate([property()], PkField.prototype, "tip", void 0);
+__decorate([property({ attribute: false })], PkField.prototype, "errors", void 0);
+__decorate([property({ reflect: true })], PkField.prototype, "for", void 0);
+__decorate([query("slot:not([name])")], PkField.prototype, "controlSlot", void 0);
+PkField = __decorate([customElement("pk-field")], PkField);
+//#endregion
+export { PkField as t };
+
+//# sourceMappingURL=pk-field-Buy_AtYF.js.map

package/dist/chunks/pk-field-Buy_AtYF.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-field-Buy_AtYF.js","names":[],"sources":["../../src/base/markdown.styles.ts","../../src/internal/field-aria.ts","../../src/utils/inline-markdown.ts","../../src/components/field/pk-field.styles.ts","../../src/components/field/pk-field.ts"],"sourcesContent":["import { css } from 'lit';\n\n/** Shared inline markdown styling for field instructions, errors, and warnings. */\nexport const inlineMarkdownStyles = css`\n    @layer pk-component {\n        .pk-inline-markdown a {\n            color: var(--pk-color-blue-500);\n            text-decoration: none;\n        }\n\n        .pk-inline-markdown a:hover {\n            text-decoration: underline;\n        }\n\n        /* Craft p code — gray chip; tip/warning/error override bg/border on pk-field. */\n        .pk-inline-markdown code {\n            /* Craft --border-hairline ≈ gray-800 @ 10%. */\n            border: 1px solid color-mix(in srgb, var(--pk-color-gray-800) 10%, transparent);\n            border-radius: var(--pk-radius-sm);\n            background: var(--pk-color-gray-100);\n            padding-block: 0.0625em;\n            padding-inline: 0.25em;\n            font-family: var(--pk-font-family-mono, ui-monospace, monospace);\n            /* v1 field help/errors used [&_code]:text-[0.85em] — tighter than --pk-font-size-mono (0.9em). */\n            font-size: var(--pk-inline-markdown-code-font-size, 0.85em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            /* Inherit tip/warning/error/instructions text color (Craft parity). */\n            color: inherit;\n        }\n    }\n`;\n","export type SyncFieldAriaOptions = {\n    control: HTMLElement;\n    labelId: string;\n    instructionsId: string;\n    errorsId: string;\n    warningId: string;\n    tipId: string;\n    controlId: string;\n    hasLabel: boolean;\n    hasInstructions: boolean;\n    hasErrors: boolean;\n    hasWarning: boolean;\n    hasTip: boolean;\n    hasRequired?: boolean;\n    invalid?: boolean;\n};\n\n/** Wires label/instructions/errors/warning/tip ids to a slotted field control. */\nexport function syncFieldAria({\n    control,\n    labelId,\n    instructionsId,\n    errorsId,\n    warningId,\n    tipId,\n    controlId,\n    hasLabel,\n    hasInstructions,\n    hasErrors,\n    hasWarning,\n    hasTip,\n    hasRequired = false,\n    invalid = false,\n}: SyncFieldAriaOptions): void {\n    if (!control.id) {\n        control.id = controlId;\n    }\n\n    if (hasLabel) {\n        control.setAttribute('aria-labelledby', labelId);\n    } else {\n        control.removeAttribute('aria-labelledby');\n    }\n\n    const describedBy = [\n        hasInstructions ? instructionsId : '',\n        hasErrors ? errorsId : '',\n        hasWarning ? warningId : '',\n        hasTip ? tipId : '',\n    ].filter(Boolean);\n\n    if (describedBy.length > 0) {\n        control.setAttribute('aria-describedby', describedBy.join(' '));\n    } else {\n        control.removeAttribute('aria-describedby');\n    }\n\n    if (hasRequired) {\n        control.setAttribute('aria-required', 'true');\n    } else {\n        control.removeAttribute('aria-required');\n    }\n\n    // Kit controls (pk-input, etc.) paint error chrome from reflected `invalid`.\n    // v1 Input used Tailwind `aria-invalid:border-*` — aria alone is not enough now.\n    const isInvalid = Boolean(invalid || hasErrors);\n\n    if (isInvalid) {\n        control.setAttribute('aria-invalid', 'true');\n        control.setAttribute('aria-errormessage', errorsId);\n    } else {\n        control.removeAttribute('aria-invalid');\n        control.removeAttribute('aria-errormessage');\n    }\n\n    syncControlInvalidState(control, isInvalid);\n}\n\n/** Prefer the Lit `invalid` property when present; otherwise toggle the attribute. */\nfunction syncControlInvalidState(control: HTMLElement, isInvalid: boolean): void {\n    if ('invalid' in control) {\n        (control as HTMLElement & { invalid: boolean }).invalid = isInvalid;\n        return;\n    }\n\n    control.toggleAttribute('invalid', isInvalid);\n}\n","import { renderInlineMarkdown } from '@verbb/plugin-kit-core';\nimport { nothing } from 'lit';\nimport { unsafeHTML, type UnsafeHTMLDirective } from 'lit/directives/unsafe-html.js';\nimport type { DirectiveResult } from 'lit/directive.js';\n\n/** Renders inline markdown for Lit templates (bold, italic, links, code). */\nexport function inlineMarkdown(content: string): DirectiveResult<typeof UnsafeHTMLDirective> | typeof nothing {\n    if (!content) {\n        return nothing;\n    }\n\n    const html = renderInlineMarkdown(content);\n\n    if (!html) {\n        return nothing;\n    }\n\n    return unsafeHTML(html);\n}\n","import { css } from 'lit';\n\nexport const pkFieldStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\n        }\n\n        .form-control__control {\n            display: block;\n            position: relative;\n            width: 100%;\n        }\n\n        .form-control__header--with-end {\n            flex-direction: row;\n            align-items: flex-start;\n            justify-content: space-between;\n            gap: 0.75rem;\n        }\n\n        .form-control__header-main {\n            display: flex;\n            flex-direction: column;\n            gap: 0.125rem;\n            min-width: 0;\n            flex: 1 1 auto;\n        }\n\n        .form-control__header-end {\n            flex-shrink: 0;\n        }\n\n        .form-control__required {\n            display: inline-flex;\n            align-items: center;\n            color: var(--pk-color-rose-600);\n            line-height: 0;\n        }\n\n        .form-control__required svg {\n            display: block;\n            width: 10px;\n            height: 10px;\n        }\n\n        .form-control__translatable {\n            display: inline-flex;\n            align-items: center;\n            color: var(--pk-color-gray-550);\n            line-height: 0;\n        }\n\n        .form-control__translatable svg {\n            display: block;\n            width: 1rem;\n            height: 1rem;\n            fill: currentColor;\n        }\n\n        .form-control__errors {\n            margin: 0;\n            padding-inline-start: 20px;\n            color: var(--pk-color-error);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n            list-style: square;\n        }\n\n        .form-control__errors:empty {\n            display: none;\n        }\n\n        .form-control__warning {\n            display: flex;\n            align-items: flex-start;\n            gap: 0.25rem;\n            min-width: 0;\n            margin: 0;\n            color: var(--pk-color-warning);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n        }\n\n        .form-control__warning:empty {\n            display: none;\n        }\n\n        .form-control__warning-icon {\n            display: inline-flex;\n            flex-shrink: 0;\n            margin-top: 0.3em;\n            width: 0.75rem;\n            height: 0.75rem;\n            line-height: 0;\n        }\n\n        .form-control__warning-text {\n            min-width: 0;\n            margin: 0;\n        }\n\n        .form-control__warning-icon svg {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n\n        /* Craft .warning code — amber chip matching warning text. */\n        .form-control__warning .pk-inline-markdown code {\n            background-color: var(--pk-color-amber-100);\n            border-color: var(--pk-color-amber-300);\n        }\n\n        .form-control__tip {\n            display: flex;\n            align-items: flex-start;\n            gap: 0.25rem;\n            min-width: 0;\n            margin: 0;\n            color: var(--pk-color-sky-700);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n        }\n\n        .form-control__tip:empty {\n            display: none;\n        }\n\n        .form-control__tip-icon {\n            display: inline-flex;\n            flex-shrink: 0;\n            margin-top: 0.3em;\n            width: 0.75rem;\n            height: 0.75rem;\n            line-height: 0;\n        }\n\n        .form-control__tip-text {\n            min-width: 0;\n            margin: 0;\n        }\n\n        .form-control__tip-icon svg {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n\n        .form-control__tip-text a {\n            text-decoration: underline;\n        }\n\n        /* Craft .tip code — sky/notice chip matching tip text. */\n        .form-control__tip .pk-inline-markdown code {\n            background-color: var(--pk-color-sky-100);\n            border-color: var(--pk-color-sky-300);\n        }\n\n        /* Craft --bg-error / --border-error pattern for field errors. */\n        .form-control__errors.pk-inline-markdown code {\n            background-color: var(--pk-color-red-100);\n            border-color: var(--pk-color-red-300);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { uniqueId } from '../../a11y/focus.js';\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { inlineMarkdownStyles } from '../../base/markdown.styles.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { createIconElement, createTranslationIconElement, asterisk, lightbulb, triangleExclamation } from '../../icons/index.js';\nimport { syncFieldAria } from '../../internal/field-aria.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { inlineMarkdown } from '../../utils/inline-markdown.js';\nimport { pkFieldStyles } from './pk-field.styles.js';\n\n/**\n * Form field shell — label, instructions, errors, warning, and tip around a slotted control.\n *\n * Mirrors Plugin Kit React `FieldLayout`. Use for schema-driven forms; controls may\n * also expose their own `label` / `instructions` for standalone usage.\n *\n * @slot label - Field label\n * @slot instructions - Help text below the label (property values support inline Markdown)\n * @slot hint - Alias for `instructions`\n * @slot header-end - Extra header actions (React `headerEnd`)\n * @slot errors - Custom error content (property values support inline Markdown)\n * @slot warning - Warning message (property values support inline Markdown)\n * @slot tip - Informational tip below the control (property values support inline Markdown)\n * @slot - Field control (`pk-input`, `pk-select`, etc.)\n *\n * @csspart header - Field header row\n * @csspart header-end - Trailing header actions\n * @csspart form-control - Root wrapper\n * @csspart label - Label element\n * @csspart control - Control slot wrapper\n * @csspart instructions - Instructions region\n * @csspart errors - Errors list\n * @csspart warning - Warning region\n * @csspart tip - Tip region\n */\n@customElement('pk-field')\nexport class PkField extends PkElement {\n    static override styles = [formControlStyles, inlineMarkdownStyles, pkFieldStyles];\n\n    private readonly hasSlotController = new HasSlotController(\n        this,\n        'label',\n        'instructions',\n        'hint',\n        'header-end',\n        'warning',\n        'tip',\n        'errors',\n    );\n\n    private readonly baseId = uniqueId('pk-field');\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ type: Boolean, reflect: true })\n    required = false;\n\n    /** Shows the translatable-field icon beside the label. */\n    @property({ type: Boolean, reflect: true })\n    translatable = false;\n\n    @property()\n    warning = '';\n\n    @property()\n    tip = '';\n\n    @property({ attribute: false })\n    errors: string[] = [];\n\n    /** Associates the label with a control id in the light DOM. */\n    @property({ reflect: true })\n    for = '';\n\n    @query('slot:not([name])')\n    private controlSlot!: HTMLSlotElement;\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n\n        const legacyHint = this.getAttribute('hint');\n\n        if (legacyHint && !this.instructions) {\n            this.instructions = legacyHint;\n        }\n    }\n\n    override updated(changed: PropertyValues): void {\n        super.updated(changed);\n\n        if (\n            changed.has('label')\n            || changed.has('instructions')\n            || changed.has('errors')\n            || changed.has('warning')\n            || changed.has('tip')\n            || changed.has('required')\n            || changed.has('for')\n        ) {\n            this.syncControlAria();\n        }\n    }\n\n    private get labelId(): string {\n        return `${this.baseId}-label`;\n    }\n\n    private get instructionsId(): string {\n        return `${this.baseId}-instructions`;\n    }\n\n    private get errorsId(): string {\n        return `${this.baseId}-errors`;\n    }\n\n    private get warningId(): string {\n        return `${this.baseId}-warning`;\n    }\n\n    private get tipId(): string {\n        return `${this.baseId}-tip`;\n    }\n\n    private get controlId(): string {\n        return this.for || `${this.baseId}-control`;\n    }\n\n    private hasLabel(): boolean {\n        return Boolean(this.label) || this.hasSlotController.test('label');\n    }\n\n    private hasInstructions(): boolean {\n        return Boolean(this.instructions)\n            || this.hasSlotController.test('instructions')\n            || this.hasSlotController.test('hint');\n    }\n\n    private hasHeaderEnd(): boolean {\n        return this.hasSlotController.test('header-end');\n    }\n\n    private hasErrors(): boolean {\n        return this.errors.length > 0 || this.hasSlotController.test('errors');\n    }\n\n    private hasWarning(): boolean {\n        return Boolean(this.warning) || this.hasSlotController.test('warning');\n    }\n\n    private hasTip(): boolean {\n        return Boolean(this.tip) || this.hasSlotController.test('tip');\n    }\n\n    private getControlElement(): HTMLElement | null {\n        const [control] = this.controlSlot?.assignedElements({ flatten: true }) ?? [];\n\n        if (control instanceof HTMLElement) {\n            return control;\n        }\n\n        if (this.for) {\n            const root = this.getRootNode() as Document | ShadowRoot;\n            return root.getElementById(this.for);\n        }\n\n        return null;\n    }\n\n    private focusControl(): void {\n        const control = this.getControlElement();\n\n        if (!control || typeof control.focus !== 'function') {\n            return;\n        }\n\n        control.focus();\n    }\n\n    private onLabelClick = (event: MouseEvent): void => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) {\n            return;\n        }\n\n        if (target.closest('button, a, input, select, textarea, [role=\"button\"], [role=\"link\"]')) {\n            return;\n        }\n\n        this.focusControl();\n    };\n\n    private syncControlAria(): void {\n        const control = this.getControlElement();\n\n        if (!control) {\n            return;\n        }\n\n        syncFieldAria({\n            control,\n            labelId: this.labelId,\n            instructionsId: this.instructionsId,\n            errorsId: this.errorsId,\n            warningId: this.warningId,\n            tipId: this.tipId,\n            controlId: this.controlId,\n            hasLabel: this.hasLabel(),\n            hasInstructions: this.hasInstructions(),\n            hasErrors: this.hasErrors(),\n            hasWarning: this.hasWarning(),\n            hasTip: this.hasTip(),\n            hasRequired: this.required,\n            invalid: this.hasErrors(),\n        });\n    }\n\n    private onControlSlotChange = (): void => {\n        this.syncControlAria();\n        this.requestUpdate();\n    };\n\n    override render() {\n        const hasLabel = this.hasLabel();\n        const hasInstructions = this.hasInstructions();\n        const hasHeaderEnd = this.hasHeaderEnd();\n        const hasErrors = this.hasErrors();\n        const hasWarning = this.hasWarning();\n        const hasTip = this.hasTip();\n        const labelFor = this.for || (hasLabel ? this.controlId : nothing);\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel || hasInstructions || hasHeaderEnd\n                    ? html`\n                        <div\n                            part=\"header\"\n                            class=${classMap({\n                                'form-control__header': true,\n                                'form-control__header--with-end': hasHeaderEnd,\n                            })}\n                        >\n                            <div class=\"form-control__header-main\">\n                                ${hasLabel\n                                    ? html`\n                                        <label\n                                            part=\"label\"\n                                            class=\"form-control__label\"\n                                            id=${this.labelId}\n                                            for=${labelFor}\n                                            data-error=${hasErrors ? 'true' : nothing}\n                                            @click=${this.onLabelClick}\n                                        >\n                                            <slot name=\"label\">${this.label}</slot>\n                                            ${this.required\n                                                ? html`\n                                                    <span class=\"sr-only\">Required</span>\n                                                    <span class=\"form-control__required\" aria-hidden=\"true\">\n                                                        ${createIconElement(asterisk)}\n                                                    </span>\n                                                `\n                                                : nothing}\n                                            ${this.translatable\n                                                ? html`\n                                                    <span class=\"form-control__translatable\" title=\"Translatable\">\n                                                        ${createTranslationIconElement()}\n                                                        <span class=\"sr-only\">Translatable</span>\n                                                    </span>\n                                                `\n                                                : nothing}\n                                        </label>\n                                    `\n                                    : nothing}\n\n                                ${hasInstructions\n                                    ? html`\n                                        <p\n                                            part=\"instructions\"\n                                            class=\"form-control__instructions pk-inline-markdown\"\n                                            id=${this.instructionsId}\n                                        >\n                                            <slot name=\"instructions\">${inlineMarkdown(this.instructions)}</slot>\n                                            <slot name=\"hint\"></slot>\n                                        </p>\n                                    `\n                                    : nothing}\n                            </div>\n\n                            ${hasHeaderEnd\n                                ? html`\n                                    <div part=\"header-end\" class=\"form-control__header-end\">\n                                        <slot name=\"header-end\"></slot>\n                                    </div>\n                                `\n                                : html`<slot name=\"header-end\" hidden></slot>`}\n                        </div>\n                    `\n                    : nothing}\n\n                <div part=\"control\" class=\"form-control__control\">\n                    <slot @slotchange=${this.onControlSlotChange}></slot>\n                </div>\n\n                ${hasErrors\n                    ? html`\n                        <ul part=\"errors\" class=\"form-control__errors pk-inline-markdown\" id=${this.errorsId}>\n                            ${this.errors.map((message) => html`<li>${inlineMarkdown(message)}</li>`)}\n                            <slot name=\"errors\"></slot>\n                        </ul>\n                    `\n                    : nothing}\n\n                ${hasWarning\n                    ? html`\n                        <div part=\"warning\" class=\"form-control__warning\" id=${this.warningId}>\n                            <span class=\"form-control__warning-icon\" aria-hidden=\"true\">\n                                ${createIconElement(triangleExclamation)}\n                            </span>\n                            <p class=\"form-control__warning-text pk-inline-markdown\">\n                                <slot name=\"warning\">${inlineMarkdown(this.warning)}</slot>\n                            </p>\n                        </div>\n                    `\n                    : nothing}\n\n                ${hasTip\n                    ? html`\n                        <div part=\"tip\" class=\"form-control__tip\" id=${this.tipId}>\n                            <span class=\"form-control__tip-icon\" aria-hidden=\"true\">\n                                ${createIconElement(lightbulb)}\n                            </span>\n                            <p class=\"form-control__tip-text pk-inline-markdown\">\n                                <span class=\"sr-only\">Tip: </span>\n                                <slot name=\"tip\">${inlineMarkdown(this.tip)}</slot>\n                            </p>\n                        </div>\n                    `\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-field': PkField;\n    }\n}\n"],"mappings":"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"}