@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-form-associated-element-DmZKgNPL.js

@@ -0,0 +1,260 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as HostAriaMirror } from "./control-aria-B2QMq4ji.js";
+import { property } from "lit/decorators.js";
+//#region src/events/pk-invalid.ts
+/** Fired when a form control fails constraint validation — mirrors  `pk-invalid`. */
+var PkInvalidEvent = class extends Event {
+	constructor() {
+		super("pk-invalid", {
+			bubbles: true,
+			cancelable: false,
+			composed: true
+		});
+	}
+};
+//#endregion
+//#region src/validators/custom-error-validator.ts
+function CustomErrorValidator() {
+	return {
+		observedAttributes: ["custom-error"],
+		checkValidity(element) {
+			const result = {
+				message: "",
+				isValid: true,
+				invalidKeys: []
+			};
+			if (element.customError) {
+				result.message = element.customError;
+				result.isValid = false;
+				result.invalidKeys.push("customError");
+			}
+			return result;
+		}
+	};
+}
+//#endregion
+//#region src/base/pk-form-associated-element.ts
+/**
+* Form-associated custom element base —  `FormAssociatedElement` pattern.
+*/
+var PkFormAssociatedElement = class extends PkElement {
+	static {
+		this.formAssociated = true;
+	}
+	static get validators() {
+		return [CustomErrorValidator()];
+	}
+	static get observedAttributes() {
+		const attrs = new Set(super.observedAttributes ?? []);
+		for (const validator of this.validators) for (const attr of validator.observedAttributes ?? []) attrs.add(attr);
+		return [...attrs];
+	}
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+		this.assumeInteractionOn = ["input"];
+		this.validators = [];
+		this.name = null;
+		this.disabled = false;
+		this.required = false;
+		this.customError = null;
+		this.valueHasChanged = false;
+		this.hasInteracted = false;
+		this.emittedEvents = [];
+		this.emitInvalid = (event) => {
+			if (event.target !== this) return;
+			this.hasInteracted = true;
+			this.dispatchEvent(new PkInvalidEvent());
+		};
+		this.handleInteraction = (event) => {
+			if (!this.emittedEvents.includes(event.type)) this.emittedEvents.push(event.type);
+			if (this.emittedEvents.length >= this.assumeInteractionOn.length) {
+				this.hasInteracted = true;
+				this.updateValidity();
+			}
+		};
+		this.addEventListener("invalid", this.emitInvalid);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		for (const eventName of this.assumeInteractionOn) this.addEventListener(eventName, this.handleInteraction);
+		this.updateValidity();
+	}
+	disconnectedCallback() {
+		this.hostAriaMirror?.disconnect();
+		this.hostAriaMirror = void 0;
+		for (const eventName of this.assumeInteractionOn) this.removeEventListener(eventName, this.handleInteraction);
+		this.removeEventListener("invalid", this.emitInvalid);
+		super.disconnectedCallback();
+	}
+	updated(changed) {
+		if (changed.has("customError")) this.setCustomValidity(this.customError ?? "");
+		if (changed.has("disabled")) this.setState("disabled", Boolean(this.disabled));
+		if (changed.has("value") || changed.has("disabled") || changed.has("required") || changed.has("name")) this.syncFormValue();
+		this.updateValidity();
+		super.updated(changed);
+		this.syncHostAriaMirror();
+	}
+	firstUpdated(_changed) {
+		super.firstUpdated(_changed);
+		this.connectHostAriaMirror();
+	}
+	/** Focusable native control that receives mirrored field-shell ARIA. */
+	getAriaMirrorTarget() {
+		return this.input ?? null;
+	}
+	/** Standalone label/instructions wiring when no external field shell is present. */
+	syncStandaloneAria() {}
+	connectHostAriaMirror() {
+		this.hostAriaMirror?.disconnect();
+		this.hostAriaMirror = new HostAriaMirror(this, () => this.getAriaMirrorTarget(), () => this.syncStandaloneAria());
+		this.hostAriaMirror.connect();
+	}
+	syncHostAriaMirror() {
+		this.hostAriaMirror?.sync();
+	}
+	formResetCallback() {
+		this.resetValidity();
+		this.hasInteracted = false;
+		this.valueHasChanged = false;
+		this.emittedEvents = [];
+		this.resetToDefaultValue();
+		this.syncFormValue();
+		this.updateValidity();
+	}
+	formDisabledCallback(isDisabled) {
+		this.disabled = isDisabled;
+		this.updateValidity();
+	}
+	formStateRestoreCallback(state, _reason) {
+		this.restoreFormState(state);
+		this.syncFormValue();
+		this.updateValidity();
+	}
+	set form(value) {
+		if (value) this.setAttribute("form", value);
+		else this.removeAttribute("form");
+	}
+	get form() {
+		return this.internals.form;
+	}
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	getForm() {
+		return this.internals.form;
+	}
+	checkValidity() {
+		this.updateValidity();
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		this.updateValidity();
+		this.hasInteracted = true;
+		return this.internals.reportValidity();
+	}
+	resetValidity() {
+		this.setCustomValidity("");
+		this.internals.setValidity({});
+		this.syncCustomStates();
+	}
+	setCustomValidity(message) {
+		if (!message) {
+			this.customError = null;
+			this.internals.setValidity({});
+			this.syncCustomStates();
+			return;
+		}
+		this.customError = message;
+		const anchor = this.validationTarget;
+		if (anchor instanceof HTMLElement) this.internals.setValidity({ customError: true }, message, anchor);
+		else this.internals.setValidity({ customError: true }, message);
+		this.syncCustomStates();
+	}
+	get validationTarget() {
+		return this.input;
+	}
+	get allValidators() {
+		return [...this.constructor.validators ?? [], ...this.validators ?? []];
+	}
+	setFormValue(value, state) {
+		this.internals.setFormValue(value, state ?? value);
+	}
+	setValue(value, state) {
+		this.setFormValue(value, state ?? value);
+	}
+	updateValidity() {
+		if (this.disabled || this.hasAttribute("disabled") || !this.willValidate) {
+			this.internals.setValidity({});
+			this.syncCustomStates();
+			return;
+		}
+		const validators = this.allValidators;
+		if (!validators.length) return;
+		const flags = { customError: Boolean(this.customError) };
+		let finalMessage = "";
+		const anchor = this.validationTarget;
+		for (const validator of validators) {
+			const { isValid, message, invalidKeys } = validator.checkValidity(this);
+			if (isValid) continue;
+			if (!finalMessage) finalMessage = message;
+			for (const key of invalidKeys) flags[key] = true;
+		}
+		if (!finalMessage) finalMessage = this.validationMessage;
+		if (anchor instanceof HTMLElement) this.internals.setValidity(flags, finalMessage, anchor);
+		else this.internals.setValidity(flags, finalMessage);
+		this.syncCustomStates();
+	}
+	syncCustomStates() {
+		const isValid = this.internals.validity.valid;
+		this.setState("required", this.required);
+		this.setState("optional", !this.required);
+		this.setState("invalid", !isValid);
+		this.setState("valid", isValid);
+		this.setState("user-invalid", !isValid && this.hasInteracted);
+		this.setState("user-valid", isValid && this.hasInteracted);
+	}
+	setState(name, active) {
+		const states = this.internals.states;
+		if (!states) return;
+		if (active) states.add(name);
+		else states.delete(name);
+	}
+	syncFormValue() {}
+	resetToDefaultValue() {}
+	restoreFormState(_state) {}
+};
+__decorate([property({ reflect: true })], PkFormAssociatedElement.prototype, "name", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkFormAssociatedElement.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkFormAssociatedElement.prototype, "required", void 0);
+__decorate([property({
+	attribute: "custom-error",
+	reflect: true
+})], PkFormAssociatedElement.prototype, "customError", void 0);
+__decorate([property({
+	attribute: false,
+	state: true
+})], PkFormAssociatedElement.prototype, "valueHasChanged", void 0);
+__decorate([property({
+	attribute: false,
+	state: true
+})], PkFormAssociatedElement.prototype, "hasInteracted", void 0);
+//#endregion
+export { CustomErrorValidator as n, PkInvalidEvent as r, PkFormAssociatedElement as t };
+
+//# sourceMappingURL=pk-form-associated-element-DmZKgNPL.js.map

package/dist/chunks/pk-form-associated-element-DmZKgNPL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-form-associated-element-DmZKgNPL.js","names":[],"sources":["../../src/events/pk-invalid.ts","../../src/validators/custom-error-validator.ts","../../src/base/pk-form-associated-element.ts"],"sourcesContent":["/** Fired when a form control fails constraint validation — mirrors  `pk-invalid`. */\nexport class PkInvalidEvent extends Event {\n    constructor() {\n        super('pk-invalid', { bubbles: true, cancelable: false, composed: true });\n    }\n}\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'pk-invalid': PkInvalidEvent;\n    }\n}\n","import type { PkValidator } from './types.js';\n\nexport function CustomErrorValidator(): PkValidator {\n    return {\n        observedAttributes: ['custom-error'],\n        checkValidity(element) {\n            const result = {\n                message: '',\n                isValid: true,\n                invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n            };\n\n            if (element.customError) {\n                result.message = element.customError;\n                result.isValid = false;\n                result.invalidKeys.push('customError');\n            }\n\n            return result;\n        },\n    };\n}\n","import type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { HostAriaMirror } from '../internal/control-aria.js';\nimport { PkInvalidEvent } from '../events/pk-invalid.js';\nimport { CustomErrorValidator, type PkValidator } from '../validators/index.js';\nimport { PkElement } from './pk-element.js';\n\n/**\n * Form-associated custom element base —  `FormAssociatedElement` pattern.\n */\nexport abstract class PkFormAssociatedElement extends PkElement {\n    static formAssociated = true;\n\n    static get validators(): PkValidator[] {\n        return [CustomErrorValidator()];\n    }\n\n    static get observedAttributes(): string[] {\n        const attrs = new Set(super.observedAttributes ?? []);\n\n        for (const validator of this.validators) {\n            for (const attr of validator.observedAttributes ?? []) {\n                attrs.add(attr);\n            }\n        }\n\n        return [...attrs];\n    }\n\n    protected readonly internals = this.attachInternals();\n\n    /** Shadow native control for `MirrorValidator`. */\n    input?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;\n\n    /** Events that must all fire before `:user-invalid` applies — override per component. */\n    assumeInteractionOn: string[] = ['input'];\n\n    validators: PkValidator[] = [];\n\n    @property({ reflect: true })\n    name: string | null = null;\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    required = false;\n\n    @property({ attribute: 'custom-error', reflect: true })\n    customError: string | null = null;\n\n    @property({ attribute: false, state: true })\n    valueHasChanged = false;\n\n    @property({ attribute: false, state: true })\n    hasInteracted = false;\n\n    private emittedEvents: string[] = [];\n\n    private hostAriaMirror?: HostAriaMirror;\n\n    constructor() {\n        super();\n        this.addEventListener('invalid', this.emitInvalid as EventListener);\n    }\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n\n        for (const eventName of this.assumeInteractionOn) {\n            this.addEventListener(eventName, this.handleInteraction);\n        }\n\n        this.updateValidity();\n    }\n\n    override disconnectedCallback(): void {\n        this.hostAriaMirror?.disconnect();\n        this.hostAriaMirror = undefined;\n\n        for (const eventName of this.assumeInteractionOn) {\n            this.removeEventListener(eventName, this.handleInteraction);\n        }\n\n        this.removeEventListener('invalid', this.emitInvalid as EventListener);\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('customError')) {\n            this.setCustomValidity(this.customError ?? '');\n        }\n\n        if (changed.has('disabled')) {\n            // Do not toggleAttribute(`disabled`, this.disabled): when React/@lit/react\n            // assigns `disabled = undefined`, force is undefined and toggleAttribute\n            // *adds* the attribute (boolean presence → disabled=true → FACE\n            // formDisabledCallback). Reflection on this Boolean property already syncs\n            // the attribute; only Custom State API needs an explicit update here.\n            this.setState('disabled', Boolean(this.disabled));\n        }\n\n        if (changed.has('value') || changed.has('disabled') || changed.has('required') || changed.has('name')) {\n            this.syncFormValue();\n        }\n\n        this.updateValidity();\n        super.updated(changed);\n        this.syncHostAriaMirror();\n    }\n\n    override firstUpdated(_changed: PropertyValues): void {\n        super.firstUpdated(_changed);\n        this.connectHostAriaMirror();\n    }\n\n    /** Focusable native control that receives mirrored field-shell ARIA. */\n    protected getAriaMirrorTarget(): HTMLElement | null {\n        return this.input ?? null;\n    }\n\n    /** Standalone label/instructions wiring when no external field shell is present. */\n    protected syncStandaloneAria(): void {}\n\n    protected connectHostAriaMirror(): void {\n        this.hostAriaMirror?.disconnect();\n        this.hostAriaMirror = new HostAriaMirror(\n            this,\n            () => this.getAriaMirrorTarget(),\n            () => this.syncStandaloneAria(),\n        );\n        this.hostAriaMirror.connect();\n    }\n\n    protected syncHostAriaMirror(): void {\n        this.hostAriaMirror?.sync();\n    }\n\n    formResetCallback(): void {\n        this.resetValidity();\n        this.hasInteracted = false;\n        this.valueHasChanged = false;\n        this.emittedEvents = [];\n        this.resetToDefaultValue();\n        this.syncFormValue();\n        this.updateValidity();\n    }\n\n    formDisabledCallback(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this.updateValidity();\n    }\n\n    formStateRestoreCallback(state: string | File | FormData | null, _reason?: 'restore' | 'autocomplete'): void {\n        this.restoreFormState(state);\n        this.syncFormValue();\n        this.updateValidity();\n    }\n\n    set form(value: string) {\n        if (value) {\n            this.setAttribute('form', value);\n        } else {\n            this.removeAttribute('form');\n        }\n    }\n\n    get form(): HTMLFormElement | null {\n        return this.internals.form;\n    }\n\n    get labels(): NodeList {\n        return this.internals.labels;\n    }\n\n    get validity(): ValidityState {\n        return this.internals.validity;\n    }\n\n    get willValidate(): boolean {\n        return this.internals.willValidate;\n    }\n\n    get validationMessage(): string {\n        return this.internals.validationMessage;\n    }\n\n    getForm(): HTMLFormElement | null {\n        return this.internals.form;\n    }\n\n    checkValidity(): boolean {\n        this.updateValidity();\n        return this.internals.checkValidity();\n    }\n\n    reportValidity(): boolean {\n        this.updateValidity();\n        this.hasInteracted = true;\n        return this.internals.reportValidity();\n    }\n\n    resetValidity(): void {\n        this.setCustomValidity('');\n        this.internals.setValidity({});\n        this.syncCustomStates();\n    }\n\n    setCustomValidity(message: string): void {\n        if (!message) {\n            this.customError = null;\n            this.internals.setValidity({});\n            this.syncCustomStates();\n            return;\n        }\n\n        this.customError = message;\n        const anchor = this.validationTarget;\n\n        if (anchor instanceof HTMLElement) {\n            this.internals.setValidity({ customError: true }, message, anchor);\n        } else {\n            this.internals.setValidity({ customError: true }, message);\n        }\n\n        this.syncCustomStates();\n    }\n\n    protected get validationTarget(): HTMLElement | undefined {\n        return this.input;\n    }\n\n    protected get allValidators(): PkValidator[] {\n        const ctor = this.constructor as typeof PkFormAssociatedElement;\n        return [...(ctor.validators ?? []), ...(this.validators ?? [])];\n    }\n\n    protected setFormValue(\n        value: string | File | FormData | null,\n        state?: string | File | FormData | null,\n    ): void {\n        this.internals.setFormValue(value, state ?? value);\n    }\n\n    protected setValue(\n        value: string | File | FormData | null,\n        state?: string | File | FormData | null,\n    ): void {\n        this.setFormValue(value, state ?? value);\n    }\n\n    protected updateValidity(): void {\n        if (this.disabled || this.hasAttribute('disabled') || !this.willValidate) {\n            this.internals.setValidity({});\n            this.syncCustomStates();\n            return;\n        }\n\n        const validators = this.allValidators;\n\n        if (!validators.length) {\n            return;\n        }\n\n        const flags: Partial<Record<keyof ValidityState, boolean>> = {\n            customError: Boolean(this.customError),\n        };\n\n        let finalMessage = '';\n        const anchor = this.validationTarget;\n\n        for (const validator of validators) {\n            const { isValid, message, invalidKeys } = validator.checkValidity(this);\n\n            if (isValid) {\n                continue;\n            }\n\n            if (!finalMessage) {\n                finalMessage = message;\n            }\n\n            for (const key of invalidKeys) {\n                flags[key] = true;\n            }\n        }\n\n        if (!finalMessage) {\n            finalMessage = this.validationMessage;\n        }\n\n        if (anchor instanceof HTMLElement) {\n            this.internals.setValidity(flags, finalMessage, anchor);\n        } else {\n            this.internals.setValidity(flags, finalMessage);\n        }\n\n        this.syncCustomStates();\n    }\n\n    protected syncCustomStates(): void {\n        const isValid = this.internals.validity.valid;\n\n        this.setState('required', this.required);\n        this.setState('optional', !this.required);\n        this.setState('invalid', !isValid);\n        this.setState('valid', isValid);\n        this.setState('user-invalid', !isValid && this.hasInteracted);\n        this.setState('user-valid', isValid && this.hasInteracted);\n    }\n\n    protected setState(name: string, active: boolean): void {\n        const states = this.internals.states;\n\n        if (!states) {\n            return;\n        }\n\n        if (active) {\n            states.add(name);\n        } else {\n            states.delete(name);\n        }\n    }\n\n    protected syncFormValue(): void {}\n\n    protected resetToDefaultValue(): void {}\n\n    protected restoreFormState(_state: string | File | FormData | null): void {}\n\n    private emitInvalid = (event: Event): void => {\n        if (event.target !== this) {\n            return;\n        }\n\n        this.hasInteracted = true;\n        this.dispatchEvent(new PkInvalidEvent());\n    };\n\n    private handleInteraction = (event: Event): void => {\n        if (!this.emittedEvents.includes(event.type)) {\n            this.emittedEvents.push(event.type);\n        }\n\n        if (this.emittedEvents.length >= this.assumeInteractionOn.length) {\n            this.hasInteracted = true;\n            this.updateValidity();\n        }\n    };\n}\n"],"mappings":"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"}

package/dist/chunks/pk-input-group-CGHQKrt8.js

@@ -0,0 +1,238 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
+import { t as HostAriaMirror } from "./control-aria-B2QMq4ji.js";
+import { css, html } from "lit";
+import { customElement, query } from "lit/decorators.js";
+//#region src/components/input-group/pk-input-group.styles.ts
+var pkInputGroupStyles = [
+	buttonGroupCornerRoleStyles(),
+	buttonGroupCornerRadiusStyles(".group", "var(--pk-radius-lg)"),
+	buttonGroupBorderJoinStyles(".group"),
+	css`
+        @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 html`
+            <div part="base" class="group" role="group">
+                <slot @slotchange=${this.handleSlotChange}></slot>
+            </div>
+        `;
+	}
+};
+__decorate([query("slot")], PkInputGroup.prototype, "defaultSlot", void 0);
+PkInputGroup = __decorate([customElement("pk-input-group")], PkInputGroup);
+//#endregion
+export { PkInputGroup as t };
+
+//# sourceMappingURL=pk-input-group-CGHQKrt8.js.map

package/dist/chunks/pk-input-group-CGHQKrt8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-CGHQKrt8.js","names":[],"sources":["../../src/components/input-group/pk-input-group.styles.ts","../../src/components/input-group/pk-input-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport {\n    buttonGroupBorderJoinStyles,\n    buttonGroupCornerRadiusStyles,\n    buttonGroupCornerRoleStyles,\n} from '../button-group/button-group-item.styles.js';\n\nexport const pkInputGroupStyles = [\n    buttonGroupCornerRoleStyles(),\n    buttonGroupCornerRadiusStyles('.group', 'var(--pk-radius-lg)'),\n    buttonGroupBorderJoinStyles('.group'),\n    css`\n        @layer pk-component {\n            :host {\n                display: block;\n                width: 100%;\n                min-width: 0;\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            :host([data-pk-group-orientation]) {\n                display: flex;\n                flex-direction: column;\n                width: auto;\n                flex: 0 1 auto;\n                align-self: stretch;\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])) {\n                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])) {\n                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]) {\n                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]) {\n                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-divider]) .group {\n                border-left-width: 1px;\n                border-left-style: solid;\n                border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n                box-shadow: none;\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-divider]) .group {\n                border-top-width: 1px;\n                border-top-style: solid;\n                border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n                box-shadow: none;\n            }\n\n            :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail]) .group {\n                border-right-width: 0;\n            }\n\n            :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail]) .group {\n                border-bottom-width: 0;\n            }\n\n            .group {\n                display: flex;\n                position: relative;\n                align-items: center;\n                width: 100%;\n                min-width: 0;\n                min-height: var(--pk-btn-height-default);\n                border: var(--pk-input-border, 1px solid var(--pk-input-border-color));\n                border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));\n                background: var(--pk-input-bg);\n                background-clip: padding-box;\n                box-sizing: border-box;\n                transition: border-color 0.12s ease, box-shadow 0.12s ease;\n            }\n\n            :host([data-block-layout]) .group {\n                flex-direction: column;\n                align-items: stretch;\n                height: auto;\n                min-height: 0;\n            }\n\n            :host([data-block-layout]) ::slotted(pk-input-group-textarea),\n            :host([data-block-layout]) ::slotted(pk-input-group-addon[align='block-start']),\n            :host([data-block-layout]) ::slotted(pk-input-group-addon[align='block-end']) {\n                width: 100%;\n                align-self: stretch;\n            }\n\n            ::slotted(pk-input-group-input),\n            ::slotted(pk-input-group-textarea) {\n                flex: 1 1 auto;\n                min-width: 0;\n            }\n\n            ::slotted(pk-input-group-addon[align='inline-start']) {\n                order: -1;\n            }\n\n            ::slotted(pk-input-group-addon[align='inline-end']) {\n                order: 1;\n            }\n\n            ::slotted(pk-input-group-addon[align='block-start']) {\n                order: -1;\n            }\n\n            ::slotted(pk-input-group-addon[align='block-end']) {\n                order: 1;\n            }\n\n            /*\n             * Do not use :host(:has(slotted…)) for focus/invalid — Chromium cannot see\n             * light-DOM slotted children from shadow :has() (same reason as data-block-layout).\n             * :host(:focus-within) follows the composed tree into nested shadow inputs.\n             * data-invalid / data-disabled are synced from the slotted control in TS.\n             */\n            /* Craft focus = box-shadow only; keep resting / invalid border (no stacked border-color). */\n            :host(:focus-within:not([data-invalid])) .group {\n                box-shadow: var(--pk-input-focus-shadow);\n            }\n\n            :host([data-invalid]) .group {\n                border-color: var(--pk-color-rose-600);\n            }\n\n            :host([data-invalid]:focus-within) .group {\n                box-shadow: var(--pk-input-invalid-focus-shadow);\n            }\n\n            :host([data-disabled]) .group {\n                opacity: 0.5;\n            }\n        }\n    `,\n];\n","import { html } from 'lit';\nimport { customElement, query } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { HostAriaMirror } from '../../internal/control-aria.js';\nimport { pkInputGroupStyles } from './pk-input-group.styles.js';\n\nfunction getSlottedFocusTarget(slot: HTMLSlotElement): HTMLElement | null {\n    const [control] = slot.assignedElements({ flatten: true });\n\n    if (!(control instanceof HTMLElement)) {\n        return null;\n    }\n\n    if (control.matches('pk-input-group-input, pk-input-group-textarea')) {\n        const inner = control.shadowRoot?.querySelector('input, textarea');\n\n        return inner instanceof HTMLElement ? inner : null;\n    }\n\n    const nested = control.querySelector('input, textarea, select, button[aria-haspopup]');\n\n    return nested instanceof HTMLElement ? nested : null;\n}\n\n/**\n * Groups an input with addons inside one field boundary — ShadCN / Base UI input-group pattern.\n *\n * Place `pk-input-group-input` or `pk-input-group-textarea` first in the DOM, then addons.\n * Use the addon `align` prop to position them visually.\n *\n * @slot - Input controls and addons\n *\n * @csspart base - Group shell\n */\n@customElement('pk-input-group')\nexport class PkInputGroup extends PkElement {\n    static override styles = pkInputGroupStyles;\n\n    @query('slot')\n    private defaultSlot!: HTMLSlotElement;\n\n    private hostAriaMirror?: HostAriaMirror;\n\n    /** Watch slotted control `invalid` / `disabled` / `aria-invalid` for host chrome attrs. */\n    private controlStateObserver?: MutationObserver;\n\n    override disconnectedCallback(): void {\n        this.hostAriaMirror?.disconnect();\n        this.hostAriaMirror = undefined;\n        this.controlStateObserver?.disconnect();\n        this.controlStateObserver = undefined;\n        super.disconnectedCallback();\n    }\n\n    override firstUpdated(): void {\n        this.syncSlotDerivedState();\n        this.connectAriaMirror();\n        this.connectControlStateObserver();\n    }\n\n    private connectAriaMirror(): void {\n        this.hostAriaMirror?.disconnect();\n        this.hostAriaMirror = new HostAriaMirror(\n            this,\n            () => (this.defaultSlot ? getSlottedFocusTarget(this.defaultSlot) : null),\n        );\n        this.hostAriaMirror.connect();\n    }\n\n    private connectControlStateObserver(): void {\n        this.controlStateObserver?.disconnect();\n        this.controlStateObserver = new MutationObserver(() => {\n            this.syncControlChromeState();\n        });\n        this.observeAssignedControls();\n    }\n\n    private observeAssignedControls(): void {\n        if (!this.controlStateObserver) {\n            return;\n        }\n\n        this.controlStateObserver.disconnect();\n\n        for (const element of this.defaultSlot?.assignedElements({ flatten: true }) ?? []) {\n            this.controlStateObserver.observe(element, {\n                attributes: true,\n                attributeFilter: ['invalid', 'disabled', 'aria-invalid'],\n            });\n        }\n    }\n\n    private handleSlotChange = (): void => {\n        this.syncSlotDerivedState();\n        this.observeAssignedControls();\n        this.hostAriaMirror?.sync();\n    };\n\n    private syncSlotDerivedState(): void {\n        this.syncBlockLayout();\n        this.syncControlChromeState();\n    }\n\n    /** Block addons live in light DOM; `:host(:has())` cannot see slotted children from shadow styles. */\n    private syncBlockLayout(): void {\n        const elements = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];\n        const blockLayout = elements.some((element) =>\n            element.matches('pk-input-group-addon[align=\"block-start\"], pk-input-group-addon[align=\"block-end\"]'),\n        );\n\n        this.toggleAttribute('data-block-layout', blockLayout);\n    }\n\n    /**\n     * Mirror control invalid/disabled onto the host so shadow styles can paint shell chrome\n     * without `:host(:has(…))` (unreliable for light-DOM slotted children in Chromium).\n     */\n    private syncControlChromeState(): void {\n        const elements = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];\n        const control = elements.find((element) =>\n            element.matches('pk-input-group-input, pk-input-group-textarea'),\n        );\n\n        const isInvalid = Boolean(\n            control\n            && (control.hasAttribute('invalid')\n                || control.getAttribute('aria-invalid') === 'true'\n                || ('invalid' in control && Boolean((control as HTMLElement & { invalid?: boolean }).invalid))),\n        );\n\n        const isDisabled = elements.some((element) =>\n            element.hasAttribute('disabled')\n            || ('disabled' in element && Boolean((element as HTMLElement & { disabled?: boolean }).disabled)),\n        );\n\n        this.toggleAttribute('data-invalid', isInvalid);\n        this.toggleAttribute('data-disabled', isDisabled);\n    }\n\n    override render() {\n        return html`\n            <div part=\"base\" class=\"group\" role=\"group\">\n                <slot @slotchange=${this.handleSlotChange}></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group': PkInputGroup;\n    }\n}\n"],"mappings":";;;;;;AAQA,IAAa,qBAAqB;CAC9B,6BAA6B;CAC7B,8BAA8B,UAAU,sBAAsB;CAC9D,4BAA4B,SAAS;CACrC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoIN;;;ACzID,SAAS,sBAAsB,MAA2C;CACtE,MAAM,CAAC,WAAW,KAAK,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAE1D,KAAI,EAAE,mBAAmB,aACrB,QAAO;AAGX,KAAI,QAAQ,QAAQ,gDAAgD,EAAE;EAClE,MAAM,QAAQ,QAAQ,YAAY,cAAc,kBAAkB;AAElE,SAAO,iBAAiB,cAAc,QAAQ;;CAGlD,MAAM,SAAS,QAAQ,cAAc,iDAAiD;AAEtF,QAAO,kBAAkB,cAAc,SAAS;;AAc7C,IAAA,eAAA,MAAM,qBAAqB,UAAU;;;gCAyDD;AACnC,QAAK,sBAAsB;AAC3B,QAAK,yBAAyB;AAC9B,QAAK,gBAAgB,MAAM;;;;gBA3DN;;CAUzB,uBAAsC;AAClC,OAAK,gBAAgB,YAAY;AACjC,OAAK,iBAAiB,KAAA;AACtB,OAAK,sBAAsB,YAAY;AACvC,OAAK,uBAAuB,KAAA;AAC5B,QAAM,sBAAsB;;CAGhC,eAA8B;AAC1B,OAAK,sBAAsB;AAC3B,OAAK,mBAAmB;AACxB,OAAK,6BAA6B;;CAGtC,oBAAkC;AAC9B,OAAK,gBAAgB,YAAY;AACjC,OAAK,iBAAiB,IAAI,eACtB,YACO,KAAK,cAAc,sBAAsB,KAAK,YAAY,GAAG,KACvE;AACD,OAAK,eAAe,SAAS;;CAGjC,8BAA4C;AACxC,OAAK,sBAAsB,YAAY;AACvC,OAAK,uBAAuB,IAAI,uBAAuB;AACnD,QAAK,wBAAwB;IAC/B;AACF,OAAK,yBAAyB;;CAGlC,0BAAwC;AACpC,MAAI,CAAC,KAAK,qBACN;AAGJ,OAAK,qBAAqB,YAAY;AAEtC,OAAK,MAAM,WAAW,KAAK,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,CAC7E,MAAK,qBAAqB,QAAQ,SAAS;GACvC,YAAY;GACZ,iBAAiB;IAAC;IAAW;IAAY;IAAe;GAC3D,CAAC;;CAUV,uBAAqC;AACjC,OAAK,iBAAiB;AACtB,OAAK,wBAAwB;;;CAIjC,kBAAgC;EAE5B,MAAM,eADW,KAAK,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE,EAC/C,MAAM,YAC/B,QAAQ,QAAQ,yFAAqF,CACxG;AAED,OAAK,gBAAgB,qBAAqB,YAAY;;;;;;CAO1D,yBAAuC;EACnC,MAAM,WAAW,KAAK,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC,IAAI,EAAE;EAC5E,MAAM,UAAU,SAAS,MAAM,YAC3B,QAAQ,QAAQ,gDAAgD,CACnE;EAED,MAAM,YAAY,QACd,YACI,QAAQ,aAAa,UAAU,IAC5B,QAAQ,aAAa,eAAe,KAAK,UACxC,aAAa,WAAW,QAAS,QAAgD,QAAQ,EACpG;EAED,MAAM,aAAa,SAAS,MAAM,YAC9B,QAAQ,aAAa,WAAW,IAC5B,cAAc,WAAW,QAAS,QAAiD,SAAS,CACnG;AAED,OAAK,gBAAgB,gBAAgB,UAAU;AAC/C,OAAK,gBAAgB,iBAAiB,WAAW;;CAGrD,SAAkB;AACd,SAAO,IAAI;;oCAEiB,KAAK,iBAAiB;;;;;YAxGrD,MAAM,OAAO,CAAA,EAAA,aAAA,WAAA,eAAA,KAAA,EAAA;2BAJjB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}

package/dist/chunks/pk-input-group-addon-DXbNbsfY.js

@@ -0,0 +1,101 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/input-group/pk-input-group-addon.styles.ts
+var pkInputGroupAddonStyles = css`
+    @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 html`
+            <div
+                part="base"
+                class="addon"
+                role="group"
+                @click=${this.handleClick}
+            >
+                <slot></slot>
+            </div>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkInputGroupAddon.prototype, "align", void 0);
+PkInputGroupAddon = __decorate([customElement("pk-input-group-addon")], PkInputGroupAddon);
+//#endregion
+export { PkInputGroupAddon as t };
+
+//# sourceMappingURL=pk-input-group-addon-DXbNbsfY.js.map

package/dist/chunks/pk-input-group-addon-DXbNbsfY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-addon-DXbNbsfY.js","names":[],"sources":["../../src/components/input-group/pk-input-group-addon.styles.ts","../../src/components/input-group/pk-input-group-addon.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupAddonStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.5rem;\n            padding-inline: 0.5rem;\n            font-size: var(--pk-font-size-sm);\n            color: var(--pk-color-gray-500);\n            cursor: text;\n            user-select: none;\n            flex-shrink: 0;\n        }\n\n        :host([align='inline-start']) {\n            padding-inline-start: 0.5rem;\n        }\n\n        :host([align='inline-end']) {\n            padding-inline-end: 0.5rem;\n        }\n\n        :host([align='block-start']) {\n            width: 100%;\n            align-self: stretch;\n            justify-content: flex-start;\n            padding: 0.625rem 0.625rem 0;\n        }\n\n        :host([align='block-end']) {\n            width: 100%;\n            align-self: stretch;\n            justify-content: flex-start;\n            padding: 0 0.625rem 0.625rem;\n        }\n\n        :host([align='block-start']) .addon,\n        :host([align='block-end']) .addon {\n            display: flex;\n            width: 100%;\n            box-sizing: border-box;\n        }\n\n        :host([align='block-start']) ::slotted(*),\n        :host([align='block-end']) ::slotted(*) {\n            width: 100%;\n        }\n\n        :host([align='inline-start']) ::slotted(pk-input-group-button) {\n            margin-inline-start: -0.3rem;\n        }\n\n        :host([align='inline-end']) ::slotted(pk-input-group-button) {\n            margin-inline-end: -0.3rem;\n        }\n\n        ::slotted(svg) {\n            width: 0.75rem;\n            height: 0.75rem;\n            flex-shrink: 0;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupAddonStyles } from './pk-input-group-addon.styles.js';\n\nexport type PkInputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';\n\n/**\n * Icon, text, or button content alongside an input-group control.\n *\n * Place after the control in the DOM; use `align` to position visually.\n *\n * @slot - Addon content\n *\n * @csspart base - Addon container\n */\n@customElement('pk-input-group-addon')\nexport class PkInputGroupAddon extends PkElement {\n    static override styles = pkInputGroupAddonStyles;\n\n    @property({ reflect: true })\n    align: PkInputGroupAddonAlign = 'inline-start';\n\n    private handleClick(event: MouseEvent): void {\n        if ((event.target as HTMLElement).closest('button, pk-input-group-button, pk-button')) {\n            return;\n        }\n\n        const group = this.closest('pk-input-group');\n\n        const control = group?.querySelector('pk-input-group-input, pk-input-group-textarea') as\n            | (HTMLElement & { focus(options?: FocusOptions): void })\n            | null;\n\n        control?.focus();\n    }\n\n    override render() {\n        return html`\n            <div\n                part=\"base\"\n                class=\"addon\"\n                role=\"group\"\n                @click=${this.handleClick}\n            >\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-addon': PkInputGroupAddon;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACgBnC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;eAIb;;;gBAHP;;CAKzB,YAAoB,OAAyB;AACzC,MAAK,MAAM,OAAuB,QAAQ,2CAA2C,CACjF;AASJ,GANc,KAAK,QAAQ,iBAEX,EAAO,cAAc,gDAAgD,GAI5E,OAAO;;CAGpB,SAAkB;AACd,SAAO,IAAI;;;;;yBAKM,KAAK,YAAY;;;;;;;YAvBrC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;gCAJ/B,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}