@verbb/plugin-kit-web 2.0.14 → 2.0.15

package/dist/chunks/{pk-field-JFP24j4o.js → pk-field-NL4KdFZC.js}

@@ -1,12 +1,11 @@
 import { n as createTranslationIconElement, t as icons_exports } from "./icons-BR8JcQj2.js";
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.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 { renderInlineMarkdown } from "@verbb/plugin-kit-core";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 //#region src/base/markdown.styles.ts
@@ -482,4 +481,4 @@ PkField = __decorate([customElement("pk-field")], PkField);
 //#endregion
 export { PkField as t };
 
-//# sourceMappingURL=pk-field-JFP24j4o.js.map
+//# sourceMappingURL=pk-field-NL4KdFZC.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pk-field-NL4KdFZC.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 '../../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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"}

package/dist/chunks/{pk-form-associated-element-DmZKgNPL.js → pk-form-associated-element-9M2NzOE2.js}

@@ -1,4 +1,4 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as PkElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { t as HostAriaMirror } from "./control-aria-B2QMq4ji.js";
 import { property } from "lit/decorators.js";
 //#region src/events/pk-invalid.ts
@@ -257,4 +257,4 @@ __decorate([property({
 //#endregion
 export { CustomErrorValidator as n, PkInvalidEvent as r, PkFormAssociatedElement as t };
 
-//# sourceMappingURL=pk-form-associated-element-DmZKgNPL.js.map
+//# sourceMappingURL=pk-form-associated-element-9M2NzOE2.js.map

package/dist/chunks/{pk-form-associated-element-DmZKgNPL.js.map → pk-form-associated-element-9M2NzOE2.js.map}

@@ -1 +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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"}
+{"version":3,"file":"pk-form-associated-element-9M2NzOE2.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-naIRPWGC.js → pk-input-DDkIXOkt.js}

@@ -1,7 +1,7 @@
-import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
 import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-9M2NzOE2.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
@@ -10,7 +10,6 @@ import { i as uniqueId } from "./focus-aa5dlv8k.js";
 import { t as PkClearEvent } from "./pk-clear--mPWZP7H.js";
 import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
 //#region src/internal/implicit-form-submit.ts
@@ -720,4 +719,4 @@ PkInput = __decorate([customElement("pk-input")], PkInput);
 //#endregion
 export { PkInput as t };
 
-//# sourceMappingURL=pk-input-naIRPWGC.js.map
+//# sourceMappingURL=pk-input-DDkIXOkt.js.map

package/dist/chunks/pk-input-DDkIXOkt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-DDkIXOkt.js","names":[],"sources":["../../src/internal/implicit-form-submit.ts","../../src/components/input/pk-input.styles.ts","../../src/components/input/pk-input.ts"],"sourcesContent":["/**\n * Restore HTML “implicit submission” for FACE controls with a shadow native input.\n *\n * Native light-DOM text inputs inside a <form> submit on Enter via the default\n * submitter. Shadow inputs do not — the host must request submit on the schema\n * form (never Craft’s outer #main when nested under the CP form).\n *\n * Prefer `pk-implicit-submit` (handled by SchemaFormEngine → handleSubmit) over\n * `HTMLFormElement.requestSubmit()`, which will navigate if the wrong form is\n * targeted or if preventDefault never runs.\n *\n * Skip types that never implicit-submit, and modified Enter.\n */\nconst NON_IMPLICIT_SUBMIT_INPUT_TYPES = new Set([\n    'button',\n    'submit',\n    'reset',\n    'checkbox',\n    'radio',\n    'file',\n    'image',\n    'hidden',\n]);\n\n/** Dispatched on the schema <form>; SchemaFormEngine calls handleSubmit(). */\nconst PK_IMPLICIT_SUBMIT_EVENT = 'pk-implicit-submit';\n\ntype ImplicitSubmitHost = HTMLElement & {\n    form: HTMLFormElement | null;\n    disabled?: boolean;\n    readonly?: boolean;\n};\n\nconst shouldRequestFormSubmitOnEnter = (\n    event: KeyboardEvent,\n    inputType: string | null | undefined,\n): boolean => {\n    if (event.key !== 'Enter' || event.defaultPrevented || event.isComposing) {\n        return false;\n    }\n\n    // Match typical form submit: plain Enter only (Shift+Enter stays for multiline UIs).\n    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {\n        return false;\n    }\n\n    const type = (inputType || 'text').toLowerCase();\n\n    return !NON_IMPLICIT_SUBMIT_INPUT_TYPES.has(type);\n};\n\n/**\n * Resolve the form that should receive implicit submit.\n * Inside pk-dialog, prefer the SchemaFormEngine form in the dialog — not Craft’s\n * outer #main form (nested forms make FACE form owner ambiguous / wrong).\n */\nconst resolveSubmitForm = (host: ImplicitSubmitHost): HTMLFormElement | null => {\n    const dialog = host.closest?.('pk-dialog');\n\n    if (dialog) {\n        const dialogForm = dialog.querySelector('form');\n\n        if (dialogForm) {\n            return dialogForm;\n        }\n    }\n\n    const associated = host.form;\n\n    // Never treat Craft’s CP shell form as an implicit-submit target from kit controls.\n    if (associated && associated.id === 'main') {\n        return host.closest?.('form') !== associated ? host.closest('form') : null;\n    }\n\n    return associated;\n};\n\n/**\n * Call from a shadow `<input>` keydown handler on a form-associated host.\n * Returns true when submit was requested.\n */\nconst requestAssociatedFormSubmitOnEnter = (\n    host: ImplicitSubmitHost,\n    event: KeyboardEvent,\n    inputType?: string | null,\n): boolean => {\n    if (host.disabled || host.readonly) {\n        return false;\n    }\n\n    if (!shouldRequestFormSubmitOnEnter(event, inputType)) {\n        return false;\n    }\n\n    const form = resolveSubmitForm(host);\n\n    if (!form || form.id === 'main') {\n        return false;\n    }\n\n    // Stop Craft / other document listeners from treating Enter as CP form submit.\n    event.preventDefault();\n    event.stopPropagation();\n\n    // SchemaFormEngine listens and runs handleSubmit() — no HTML navigation risk.\n    form.dispatchEvent(new CustomEvent(PK_IMPLICIT_SUBMIT_EVENT, {\n        bubbles: false,\n        cancelable: true,\n    }));\n\n    return true;\n};\n\nexport {\n    PK_IMPLICIT_SUBMIT_EVENT,\n    requestAssociatedFormSubmitOnEnter,\n    shouldRequestFormSubmitOnEnter,\n};\n","import { css } from 'lit';\n\nexport const pkInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\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]) .form-control {\n            gap: 0;\n            height: 100%;\n        }\n\n        :host([data-pk-group-orientation]) .form-control__input {\n            min-height: var(--pk-btn-height-default);\n            height: 100%;\n        }\n\n        :host([data-pk-group-orientation]) .form-control__start,\n        :host([data-pk-group-orientation]) .form-control__end {\n            display: none;\n        }\n\n        :host([data-pk-group-orientation]) .form-control__input {\n            width: 100%;\n        }\n\n        :host([data-pk-group-orientation]) .input {\n            width: 100%;\n        }\n\n        :host([data-pk-group-orientation]) .input {\n            min-height: var(--pk-btn-height-default);\n            height: 100%;\n        }\n\n        :host([data-pk-group-orientation='vertical']) {\n            width: 100%;\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]) .form-control__input {\n            border-left-width: 1px;\n            border-left-style: solid;\n            border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-input-border-color));\n            box-shadow: none;\n        }\n\n        :host([data-pk-group-orientation='vertical'][data-pk-group-divider]) .form-control__input {\n            border-top-width: 1px;\n            border-top-style: solid;\n            border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-input-border-color));\n            box-shadow: none;\n        }\n\n        :host([data-pk-group-divider]) .form-control__input:focus-within,\n        :host([data-pk-group-divider][data-state='focus-visible']) .form-control__input {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host([data-pk-group-orientation='vertical'][data-pk-group-divider]) .form-control__input:focus-within,\n        :host([data-pk-group-orientation='vertical'][data-pk-group-divider][data-state='focus-visible']) .form-control__input {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        /* Chrome lives on the flex shell (part=base) so slot=start/end adornments sit\n         * inside the border — same visual contract as pk-input-group / v1 InputGroup.\n         * Height is content-sized (v1): padding-block + --pk-input-control-line-height + border.\n         */\n        .form-control__input {\n            align-items: center;\n            gap: 6px;\n            padding-inline: 8px;\n            border: var(--pk-input-border);\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        .form-control__start,\n        .form-control__end {\n            margin: 0;\n            color: var(--pk-color-gray-400);\n            line-height: 0;\n        }\n\n        .form-control__start ::slotted(*),\n        .form-control__end ::slotted(*) {\n            display: block;\n            max-width: 1.25rem;\n            max-height: 1.25rem;\n        }\n\n        .input {\n            display: block;\n            width: 100%;\n            margin: 0;\n            /* v1 Input default: py-1.5 + text-sm (14px / 1.25rem lh) → 34px with border. */\n            padding-block: 6px;\n            padding-inline: 0;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            /* Craft CP body / field value text. */\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: var(--pk-input-control-line-height, 1.25rem);\n            appearance: none;\n            box-sizing: border-box;\n            outline: none;\n        }\n\n        .form-control__input .input {\n            flex: 1 1 auto;\n            min-width: 0;\n        }\n\n        .input::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        /*\n         * Craft text:focus-visible only sets box-shadow (--focus-ring); resting border stays.\n         * Do not also set border-color — --pk-input-focus-shadow already includes 0 0 0 1px,\n         * so border-color + that ring reads as a double focus treatment.\n         */\n        :host(:not([invalid]):not(:state(user-invalid))) .form-control__input:focus-within,\n        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .form-control__input {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .form-control__input:has(.input:disabled) {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .input:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([invalid]) .form-control__input,\n        :host(:state(user-invalid)) .form-control__input {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        /* Invalid + focus: rose ring (same token as select/combobox), not sky over rose border. */\n        :host([invalid]) .form-control__input:focus-within,\n        :host([invalid][data-state='focus-visible']) .form-control__input,\n        :host(:state(user-invalid)) .form-control__input:focus-within {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([size='xs']) .form-control__input {\n            gap: 4px;\n            padding-inline: 6px;\n        }\n\n        :host([size='xs']) .input {\n            padding-block: 4px;\n            font-size: 11px;\n        }\n\n        :host([size='sm']) .form-control__input {\n            gap: 4px;\n            padding-inline: 8px;\n        }\n\n        :host([size='sm']) .input {\n            padding-block: 4px;\n            font-size: 12px;\n        }\n\n        :host([size='lg']) .form-control__input {\n            gap: 8px;\n            padding-inline: 12px;\n        }\n\n        :host([size='lg']) .input {\n            padding-block: 8px;\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) .form-control__input {\n            gap: 8px;\n            padding-inline: 16px;\n        }\n\n        :host([size='xl']) .input {\n            padding-block: 10px;\n            font-size: 16px;\n        }\n\n        /*\n         * Mono face + 0.9× optical size + line-height 1.5. The taller line-height\n         * offsets the smaller face so padding + content height stays aligned with\n         * stock inputs (1.25rem ≈ 1.5 × 12.6px). Scale the size's face, not\n         * the parent em, so xs/sm/xl mono stay proportional.\n         */\n        :host([mono]) .input {\n            font-family: var(--pk-input-mono-font-family);\n            font-size: calc(var(--pk-font-size-base) * 0.9);\n            line-height: var(--pk-input-mono-line-height, 1.5);\n        }\n\n        :host([mono][size='xs']) .input {\n            font-size: calc(11px * 0.9);\n        }\n\n        :host([mono][size='sm']) .input {\n            font-size: calc(12px * 0.9);\n        }\n\n        :host([mono][size='lg']) .input {\n            font-size: calc(var(--pk-font-size-base) * 0.9);\n        }\n\n        :host([mono][size='xl']) .input {\n            font-size: calc(16px * 0.9);\n        }\n\n        /* Editable-table cells (v1): flush into the row — no chrome border/radius.\n         * Prefer reflected fit-cell (Lit property); data-editable-table-input is a legacy alias.\n         * Fill host → form-control → input so the control spans the full td.\n         */\n        :host([fit-cell]),\n        :host([data-editable-table-input]) {\n            display: block;\n            height: 100%;\n            min-height: 100%;\n            box-sizing: border-box;\n        }\n\n        :host([fit-cell]) .form-control,\n        :host([data-editable-table-input]) .form-control {\n            height: 100%;\n            min-height: 100%;\n            gap: 0;\n        }\n\n        :host([fit-cell]) .form-control__input,\n        :host([data-editable-table-input]) .form-control__input {\n            height: 100%;\n            min-height: 100%;\n            flex: 1 1 auto;\n            padding-inline: 0;\n            border: none;\n            border-radius: 0;\n            background: transparent;\n            box-shadow: none;\n        }\n\n        :host([fit-cell]) .input,\n        :host([data-editable-table-input]) .input {\n            height: 100%;\n            min-height: 100%;\n        }\n\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .form-control__input:focus-within,\n        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .form-control__input,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .form-control__input:focus-within,\n        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .form-control__input {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .form-control__input,\n        :host([fit-cell]:state(user-invalid)) .form-control__input,\n        :host([data-editable-table-input][invalid]) .form-control__input,\n        :host([data-editable-table-input]:state(user-invalid)) .form-control__input {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n\n        :host([fit-cell][invalid]) .form-control__input:focus-within,\n        :host([fit-cell][invalid][data-state='focus-visible']) .form-control__input,\n        :host([fit-cell]:state(user-invalid)) .form-control__input:focus-within,\n        :host([data-editable-table-input][invalid]) .form-control__input:focus-within,\n        :host([data-editable-table-input][invalid][data-state='focus-visible']) .form-control__input,\n        :host([data-editable-table-input]:state(user-invalid)) .form-control__input:focus-within {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n\n        :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])) .form-control__input {\n            border-left-width: 0;\n        }\n\n        :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])) .form-control__input {\n            border-top-width: 0;\n        }\n\n        :host([data-pk-group-orientation='horizontal'][data-pk-group-divider]) .form-control__input {\n            border-left-width: 1px;\n            border-left-style: solid;\n            border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-input-border-color));\n        }\n\n        :host([data-pk-group-orientation='vertical'][data-pk-group-divider]) .form-control__input {\n            border-top-width: 1px;\n            border-top-style: solid;\n            border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-input-border-color));\n        }\n\n        :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail]) .form-control__input {\n            border-right-width: 0;\n        }\n\n        :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail]) .form-control__input {\n            border-bottom-width: 0;\n        }\n\n        .clear-button {\n            position: absolute;\n            inset-inline-end: 6px;\n            inset-block-start: 50%;\n            translate: 0 -50%;\n        }\n\n        .form-control__input:has(.clear-button) .input {\n            padding-inline-end: 20px;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { buttonGroupBorderJoinStyles, buttonGroupCornerRadiusStyles, buttonGroupCornerRoleStyles } from '../button-group/button-group-item.styles.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { requestAssociatedFormSubmitOnEnter } from '../../internal/implicit-form-submit.js';\nimport { pkInputStyles } from './pk-input.styles.js';\n\nexport type PkInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Text input —  API, Plugin Kit field visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n * @slot start - Leading adornment inside the field chrome (icon, unit, etc.)\n * @slot end - Trailing adornment inside the field chrome\n * @slot clear-icon\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart base - Input row\n * @csspart input - Native input\n * @csspart start - Start slot container\n * @csspart end - End slot container\n * @csspart clear-button - Clear button\n */\n@customElement('pk-input')\nexport class PkInput extends PkFormAssociatedElement {\n    static override styles = [formControlStyles, buttonGroupCornerRoleStyles(), buttonGroupCornerRadiusStyles('.input', 'var(--pk-input-border-radius, var(--pk-radius-sm))'), buttonGroupBorderJoinStyles('.input'), pkInputStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label', 'start', 'end');\n\n    private readonly inputId = uniqueId('pk-input');\n\n    @query('input')\n    override input!: HTMLInputElement;\n\n    @property({ reflect: true })\n    type = 'text';\n\n    private _value: string | null = null;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    @state()\n    set value(val: string | null) {\n        const next = val ?? '';\n\n        if (this._value === next) {\n            return;\n        }\n\n        this.valueHasChanged = true;\n        this._value = next;\n    }\n\n    @property({ attribute: 'value', reflect: true })\n    defaultValue: string | null = null;\n\n    @property({ reflect: true })\n    size: PkInputSize = 'default';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ attribute: 'with-clear', type: Boolean })\n    withClear = false;\n\n    @property()\n    placeholder = '';\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    /** Flush + fill parent cell (editable tables). */\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    /** Monospace typography for handle, slug, and code-like values. */\n    @property({ type: Boolean, reflect: true })\n    mono = false;\n\n    @property()\n    pattern?: string;\n\n    @property({ type: Number })\n    minlength?: number;\n\n    @property({ type: Number })\n    maxlength?: number;\n\n    @property()\n    min?: number | string;\n\n    @property()\n    max?: number | string;\n\n    @property()\n    step?: number | 'any';\n\n    @property()\n    autocomplete?: string;\n\n    @property({ type: Boolean, reflect: true })\n    autofocus = false;\n\n    @property({ attribute: 'with-label', type: Boolean })\n    withLabel = false;\n\n    @property({ attribute: 'with-instructions', type: Boolean })\n    withInstructions = false;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n\n        if (this.hasAttribute('with-hint')) {\n            this.withInstructions = true;\n        }\n\n        super.connectedCallback();\n    }\n\n    protected override syncFormValue(): void {\n        this.setValue(this.value || '');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    override formResetCallback(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n\n        if (this.input) {\n            this.input.value = this.defaultValue ?? '';\n        }\n\n        super.formResetCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('defaultValue')) {\n            this.setState('blank', !this.value);\n        }\n\n        super.updated(changed);\n    }\n\n    protected override syncStandaloneAria(): void {\n        if (!this.input) {\n            return;\n        }\n\n        const hasLabel = Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n            this.withInstructions,\n        );\n\n        syncStandaloneControlAria({\n            control: this.input,\n            labelId: `${this.inputId}-label`,\n            instructionsId: `${this.inputId}-instructions`,\n            hasLabel,\n            hasInstructions,\n            required: this.required,\n            invalid: this.invalid || !this.internals.validity.valid,\n        });\n    }\n\n    private hasLabelContent(): boolean {\n        return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n    }\n\n    private hasInstructionsContent(): boolean {\n        return hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n            this.withInstructions,\n        );\n    }\n\n    focus(options?: FocusOptions): void {\n        this.input?.focus(options);\n    }\n\n    blur(): void {\n        this.input?.blur();\n    }\n\n    select(): void {\n        this.input?.select();\n    }\n\n    private handleInput(): void {\n        this.value = this.input.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    }\n\n    private handleChange(event: Event): void {\n        this.value = this.input.value;\n        event.stopPropagation();\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    /**\n     * Shadow native inputs do not participate in HTML implicit form submission.\n     * Bridge Enter → associated form.requestSubmit() (SchemaFormEngine hidden submitter).\n     */\n    private handleKeyDown(event: KeyboardEvent): void {\n        requestAssociatedFormSubmitOnEnter(this, event, this.type);\n    }\n\n    private handleClearClick(event: Event): void {\n        event.preventDefault();\n\n        if (this.value === '') {\n            return;\n        }\n\n        this.value = '';\n        this.dispatchEvent(new PkClearEvent());\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n        this.input.focus();\n    }\n\n    override render() {\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n        const showClear = this.withClear && !this.disabled && !this.readonly && this.value.length > 0;\n        const hasStart = this.hasSlotController.test('start');\n        const hasEnd = this.hasSlotController.test('end');\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel || hasInstructions\n                    ? html`\n                        <div part=\"header\" class=\"form-control__header\">\n                            ${hasLabel\n                                ? html`\n                                    <label\n                                        part=\"label\"\n                                        class=\"form-control__label\"\n                                        id=${`${this.inputId}-label`}\n                                        for=${`${this.inputId}-control`}\n                                    >\n                                        <slot name=\"label\">${this.label}</slot>\n                                    </label>\n                                `\n                                : nothing}\n\n                            ${hasInstructions\n                                ? html`\n                                    <p\n                                        part=\"instructions\"\n                                        class=\"form-control__instructions\"\n                                        id=${`${this.inputId}-instructions`}\n                                    >\n                                        <slot name=\"instructions\">${this.instructions}</slot>\n                                        <slot name=\"hint\"></slot>\n                                    </p>\n                                `\n                                : nothing}\n                        </div>\n                    `\n                    : nothing}\n\n                <div part=\"base\" class=\"form-control__input\">\n                    ${hasStart\n                        ? html`\n                            <span part=\"start\" class=\"form-control__start\">\n                                <slot name=\"start\"></slot>\n                            </span>\n                        `\n                        : html`<slot name=\"start\" hidden></slot>`}\n\n                    <input\n                        part=\"input\"\n                        class=\"input\"\n                        id=${hasLabel ? `${this.inputId}-control` : nothing}\n                        type=${this.type}\n                        .value=${live(this.value)}\n                        placeholder=${this.placeholder || nothing}\n                        pattern=${ifDefined(this.pattern)}\n                        minlength=${ifDefined(this.minlength)}\n                        maxlength=${ifDefined(this.maxlength)}\n                        min=${ifDefined(this.min as string | undefined)}\n                        max=${ifDefined(this.max as string | undefined)}\n                        step=${ifDefined(this.step as string | number | undefined)}\n                        autocomplete=${ifDefined(this.autocomplete)}\n                        ?disabled=${this.disabled}\n                        ?readonly=${this.readonly}\n                        ?required=${this.required}\n                        ?autofocus=${this.autofocus}\n                        @input=${this.handleInput}\n                        @change=${this.handleChange}\n                        @keydown=${this.handleKeyDown}\n                        @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n                        @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n                    />\n\n                    ${showClear\n                        ? html`\n                            <button\n                                part=\"clear-button\"\n                                class=\"icon-button clear-button\"\n                                type=\"button\"\n                                tabindex=\"-1\"\n                                aria-label=\"Clear\"\n                                @click=${this.handleClearClick}\n                            >\n                                <slot name=\"clear-icon\">×</slot>\n                            </button>\n                        `\n                        : nothing}\n\n                    ${hasEnd\n                        ? html`\n                            <span part=\"end\" class=\"form-control__end\">\n                                <slot name=\"end\"></slot>\n                            </span>\n                        `\n                        : html`<slot name=\"end\" hidden></slot>`}\n                </div>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input': PkInput;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-input-group-CGHQKrt8.js → pk-input-group-CRPSBFhX.js}

@@ -1,8 +1,7 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.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(),
@@ -235,4 +234,4 @@ PkInputGroup = __decorate([customElement("pk-input-group")], PkInputGroup);
 //#endregion
 export { PkInputGroup as t };
 
-//# sourceMappingURL=pk-input-group-CGHQKrt8.js.map
+//# sourceMappingURL=pk-input-group-CRPSBFhX.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-CRPSBFhX.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 '../../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 → pk-input-group-addon-B0StOmTJ.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.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 {
@@ -98,4 +97,4 @@ PkInputGroupAddon = __decorate([customElement("pk-input-group-addon")], PkInputG
 //#endregion
 export { PkInputGroupAddon as t };
 
-//# sourceMappingURL=pk-input-group-addon-DXbNbsfY.js.map
+//# sourceMappingURL=pk-input-group-addon-B0StOmTJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-addon-B0StOmTJ.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 '../../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"}

package/dist/chunks/{pk-input-group-button-XOfVLqGO.js → pk-input-group-button-CnKajvsP.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
 //#region src/components/input-group/pk-input-group-button.styles.ts
 var pkInputGroupButtonStyles = css`
     @layer pk-component {
@@ -52,4 +51,4 @@ PkInputGroupButton = __decorate([customElement("pk-input-group-button")], PkInpu
 //#endregion
 export { PkInputGroupButton as t };
 
-//# sourceMappingURL=pk-input-group-button-XOfVLqGO.js.map
+//# sourceMappingURL=pk-input-group-button-CnKajvsP.js.map

package/dist/chunks/pk-input-group-button-CnKajvsP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-button-CnKajvsP.js","names":[],"sources":["../../src/components/input-group/pk-input-group-button.styles.ts","../../src/components/input-group/pk-input-group-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupButtonStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n        }\n\n        pk-button {\n            --pk-btn-height: var(--pk-btn-height-sm);\n            --pk-btn-font: var(--pk-btn-font-sm);\n            --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);\n            --pk-btn-icon-size: var(--pk-btn-icon-size-sm);\n            --pk-btn-radius: var(--pk-btn-radius-sm);\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupButtonStyles } from './pk-input-group-button.styles.js';\n\nexport type PkInputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm';\n\n/**\n * Compact button for use inside an input-group addon.\n *\n * @slot - Button label or icon\n *\n * @csspart base - Button element\n */\n@customElement('pk-input-group-button')\nexport class PkInputGroupButton extends PkElement {\n    static override styles = pkInputGroupButtonStyles;\n\n    @property({ reflect: true })\n    variant = 'none';\n\n    @property({ reflect: true })\n    size: PkInputGroupButtonSize = 'xs';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    override render() {\n        return html`\n            <pk-button\n                part=\"base\"\n                variant=${this.variant}\n                size=${this.size === 'icon-xs' || this.size === 'icon-sm' ? 'xs' : 'xs'}\n                ?disabled=${this.disabled}\n            >\n                <slot></slot>\n            </pk-button>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-button': PkInputGroupButton;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,2BAA2B,GAAG;;;;;;;;;;;;;;;;;ACcpC,IAAA,qBAAA,MAAM,2BAA2B,UAAU;;;iBAIpC;cAGqB;kBAGpB;;;gBATc;;CAWzB,SAAkB;AACd,SAAO,IAAI;;;0BAGO,KAAK,QAAQ;uBAChB,KAAK,SAAS,aAAa,KAAK,SAAS,YAAY,OAAO,KAAK;4BAC5D,KAAK,SAAS;;;;;;;YAfrC,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,WAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,mBAAA,WAAA,YAAA,KAAA,EAAA;iCAV9C,cAAc,wBAAwB,CAAA,EAAA,mBAAA"}

package/dist/chunks/{pk-input-group-input-CSmR5vdY.js → pk-input-group-input-mllffsjQ.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 //#region src/components/input-group/pk-input-group-input.styles.ts
 var pkInputGroupInputStyles = css`
@@ -133,4 +132,4 @@ PkInputGroupInput = __decorate([customElement("pk-input-group-input")], PkInputG
 //#endregion
 export { PkInputGroupInput as t };
 
-//# sourceMappingURL=pk-input-group-input-CSmR5vdY.js.map
+//# sourceMappingURL=pk-input-group-input-mllffsjQ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-input-mllffsjQ.js","names":[],"sources":["../../src/components/input-group/pk-input-group-input.styles.ts","../../src/components/input-group/pk-input-group-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .input {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding: 6px 8px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n        }\n\n        .input::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        .input:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='xs']) .input {\n            padding: 4px 6px;\n            font-size: 11px;\n        }\n\n        :host([size='sm']) .input {\n            padding: 4px 8px;\n            font-size: 12px;\n        }\n\n        :host([size='lg']) .input {\n            padding: 8px 12px;\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) .input {\n            padding: 10px 16px;\n            font-size: 16px;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupInputStyles } from './pk-input-group-input.styles.js';\n\nexport type PkInputGroupInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Borderless input for use inside `pk-input-group`.\n *\n * @csspart input - Native input element\n */\n@customElement('pk-input-group-input')\nexport class PkInputGroupInput extends PkElement {\n    static override styles = pkInputGroupInputStyles;\n\n    @query('.input')\n    inputElement!: HTMLInputElement;\n\n    @property({ reflect: true })\n    type = 'text';\n\n    @property({ reflect: true })\n    size: PkInputGroupInputSize = 'default';\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    autocomplete?: string;\n\n    focus(options?: FocusOptions): void {\n        this.inputElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <input\n                part=\"input\"\n                class=\"input\"\n                data-slot=\"input-group-control\"\n                type=${this.type}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                autocomplete=${ifDefined(this.autocomplete)}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            />\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLInputElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-input': PkInputGroupInput;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACanC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;cAOtC;cAGuB;qBAGhB;eAGN;kBAGG;kBAGA;iBAGD;;;gBAxBe;;CA6BzB,MAAM,SAA8B;AAChC,OAAK,cAAc,MAAM,QAAQ;;CAGrC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;+BAChB,UAAU,KAAK,aAAa,CAAC;4BAChC,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YArD7E,MAAM,SAAS,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;gCA5Bd,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}

package/dist/chunks/{pk-input-group-text-C6ekhtff.js → pk-input-group-text-DvaPJvh2.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
 //#region src/components/input-group/pk-input-group-text.styles.ts
 var pkInputGroupTextStyles = css`
     @layer pk-component {
@@ -37,4 +36,4 @@ PkInputGroupText = __decorate([customElement("pk-input-group-text")], PkInputGro
 //#endregion
 export { PkInputGroupText as t };
 
-//# sourceMappingURL=pk-input-group-text-C6ekhtff.js.map
+//# sourceMappingURL=pk-input-group-text-DvaPJvh2.js.map

package/dist/chunks/pk-input-group-text-DvaPJvh2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-text-DvaPJvh2.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            font-size: var(--pk-font-size-sm);\n            color: var(--pk-color-gray-500);\n        }\n\n        .text ::slotted(svg) {\n            width: 0.75rem;\n            height: 0.75rem;\n            pointer-events: none;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/**\n * Muted label text inside an input-group addon.\n *\n * @slot - Text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n    static override styles = pkInputGroupTextStyles;\n\n    override render() {\n        return html`\n            <span part=\"base\" class=\"text\">\n                <slot></slot>\n            </span>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-text': PkInputGroupText;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}

package/dist/chunks/{pk-input-group-textarea-DALr3pdU.js → pk-input-group-textarea-CqYv8tUQ.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
 //#region src/components/input-group/pk-input-group-textarea.styles.ts
 var pkInputGroupTextareaStyles = css`
     @layer pk-component {
@@ -110,4 +109,4 @@ PkInputGroupTextarea = __decorate([customElement("pk-input-group-textarea")], Pk
 //#endregion
 export { PkInputGroupTextarea as t };
 
-//# sourceMappingURL=pk-input-group-textarea-DALr3pdU.js.map
+//# sourceMappingURL=pk-input-group-textarea-CqYv8tUQ.js.map

package/dist/chunks/pk-input-group-textarea-CqYv8tUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-textarea-CqYv8tUQ.js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .textarea {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n            resize: none;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/**\n * Borderless textarea for use inside `pk-input-group`.\n *\n * @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n    static override styles = pkInputGroupTextareaStyles;\n\n    @query('.textarea')\n    textareaElement!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ type: Number })\n    rows = 3;\n\n    focus(options?: FocusOptions): void {\n        this.textareaElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <textarea\n                part=\"textarea\"\n                class=\"textarea\"\n                data-slot=\"input-group-control\"\n                rows=${this.rows}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            ></textarea>\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLTextAreaElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-textarea': PkInputGroupTextarea;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}

package/dist/chunks/{pk-lightswitch-B-rLflNq.js → pk-lightswitch-DI1BeCmA.js}

@@ -1,12 +1,11 @@
-import { t as __decorate } from "./decorate-W02hmVTt.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { a as query, i as property, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-9M2NzOE2.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
 import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
 //#region src/components/lightswitch/pk-lightswitch.styles.ts
 var pkLightswitchStyles = css`
     @layer pk-component {
@@ -429,4 +428,4 @@ PkLightswitch = __decorate([customElement("pk-lightswitch")], PkLightswitch);
 //#endregion
 export { PkLightswitch as t };
 
-//# sourceMappingURL=pk-lightswitch-B-rLflNq.js.map
+//# sourceMappingURL=pk-lightswitch-DI1BeCmA.js.map

package/dist/chunks/pk-lightswitch-DI1BeCmA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-lightswitch-DI1BeCmA.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            vertical-align: middle;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-sm);\n            line-height: var(--pk-line-height);\n            --pk-lightswitch-border-color: var(--pk-color-slate-800);\n            --pk-lightswitch-track-off: var(--pk-color-gray-200);\n            --pk-lightswitch-track-on: var(--pk-color-teal-550);\n            --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n            --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n                0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n            --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n            --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n                0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n        }\n\n        :host([disabled]) {\n            cursor: not-allowed;\n        }\n\n        .base {\n            display: inline-flex;\n            align-items: flex-start;\n            gap: 0.5rem;\n        }\n\n        :host([disabled]) .base {\n            opacity: 0.5;\n        }\n\n        .content {\n            min-width: 0;\n            cursor: pointer;\n            user-select: none;\n        }\n\n        :host([disabled]) .content {\n            cursor: not-allowed;\n        }\n\n        .label {\n            display: block;\n            /* Match checkbox / radio option labels (gray-700), not gray-900. */\n            color: var(--pk-color-gray-700);\n            line-height: 1rem;\n        }\n\n        .label:empty {\n            display: none;\n        }\n\n        .instructions:empty,\n        .hint:empty {\n            display: none;\n        }\n\n        .switch {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            border-radius: 11px;\n            background: var(--pk-lightswitch-track-off, #d8dee7);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            cursor: pointer;\n            user-select: none;\n            appearance: none;\n            transition: background-color 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        .switch:focus {\n            outline: none;\n        }\n\n        .switch:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        .switch[aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on, #0f9d8a);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .switch[aria-checked='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        :host([invalid]) .switch,\n        :host(:state(user-invalid)) .switch,\n        .switch[aria-invalid='true'] {\n            box-shadow: var(--pk-lightswitch-invalid-shadow);\n        }\n\n        :host([invalid]) .switch[aria-checked='true'],\n        :host(:state(user-invalid)) .switch[aria-checked='true'],\n        .switch[aria-invalid='true'][aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on);\n        }\n\n        :host([invalid]) .switch:focus-visible,\n        :host(:state(user-invalid)) .switch:focus-visible,\n        .switch[aria-invalid='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n        }\n\n        .switch:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='default']) .switch {\n            width: 34px;\n            height: 22px;\n        }\n\n        :host([size='sm']) .switch {\n            width: 28px;\n            height: 18px;\n            border-radius: 9px;\n        }\n\n        :host([size='xs']) .switch {\n            width: 24px;\n            height: 16px;\n            border-radius: 8px;\n        }\n\n        :host([size='xxs']) .switch {\n            width: 24px;\n            height: 14px;\n            border-radius: 7px;\n        }\n\n        .thumb {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 50%;\n            background: var(--pk-color-white, #fff);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            pointer-events: none;\n            transition: transform 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        :host([size='default']) .thumb {\n            width: 18px;\n            height: 18px;\n            transform: translateX(2px);\n        }\n\n        :host([size='default']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 4px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='sm']) .thumb {\n            width: 14px;\n            height: 14px;\n            transform: translateX(2px);\n        }\n\n        :host([size='sm']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xs']) .thumb {\n            width: 12px;\n            height: 12px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xxs']) .thumb {\n            width: 10px;\n            height: 10px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(12px);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .thumb svg {\n            width: 14px;\n            height: 14px;\n            color: var(--pk-lightswitch-track-on);\n            opacity: 0;\n            transform: translateY(1px);\n            transition: opacity 0.15s ease;\n        }\n\n        .switch[aria-checked='true'] .thumb svg {\n            opacity: 1;\n        }\n\n        :host([size='sm']) .thumb svg {\n            width: 10px;\n            height: 10px;\n        }\n\n        :host([size='xs']) .thumb svg,\n        :host([size='xxs']) .thumb svg {\n            display: none;\n        }\n\n        .input {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n            opacity: 0;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n        <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\" />\n    </svg>\n`;\n\nexport type PkLightswitchSize = 'default' | 'sm' | 'xs' | 'xxs';\n\n/**\n * Craft lightswitch —  switch API (`role=\"switch\"`), form-associated.\n *\n * @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n *\n * @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    static override styles = [formControlStyles, pkLightswitchStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n    }\n\n    override assumeInteractionOn = ['change'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ attribute: 'default-checked', type: Boolean })\n    defaultChecked = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ reflect: true })\n    size: PkLightswitchSize = 'default';\n\n    @property()\n    value = 'on';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @query('.input')\n    override input!: HTMLInputElement;\n\n    @query('[part=\"switch\"]')\n    private switchElement!: HTMLButtonElement;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n        super.connectedCallback();\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.checked = this.defaultChecked;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (state === 'on' || state === this.value) {\n            this.checked = true;\n        } else {\n            this.checked = false;\n        }\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (this.input && changed.has('checked')) {\n            this.input.checked = this.checked;\n        }\n\n        super.updated(changed);\n    }\n\n    click(): void {\n        this.switchElement?.click();\n    }\n\n    override focus(options?: FocusOptions): void {\n        this.switchElement?.focus(options);\n    }\n\n    override blur(): void {\n        this.switchElement?.blur();\n    }\n\n    private toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.checked = !this.checked;\n        this.emitCheckedChange();\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const isRtl = this.matches(':dir(rtl)');\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            this.toggle();\n            return;\n        }\n\n        if (event.key === 'ArrowLeft') {\n            event.preventDefault();\n            this.checked = isRtl;\n            this.emitCheckedChange();\n            return;\n        }\n\n        if (event.key === 'ArrowRight') {\n            event.preventDefault();\n            this.checked = !isRtl;\n            this.emitCheckedChange();\n        }\n    }\n\n    private emitCheckedChange(): void {\n        this.hasInteracted = true;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { checked: this.checked },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    private handleLabelClick(event: Event): void {\n        if (this.disabled || event.target === this.switchElement) {\n            return;\n        }\n\n        this.toggle();\n    }\n\n    private hasLabelContent(): boolean {\n        if (this.label) {\n            return true;\n        }\n\n        const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n        if (!slot) {\n            return false;\n        }\n\n        return slot.assignedNodes({ flatten: true }).some((node) => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                return Boolean(node.textContent?.trim());\n            }\n\n            return node.nodeType === Node.ELEMENT_NODE;\n        });\n    }\n\n    override render() {\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n        );\n        const hasLabel = this.hasLabelContent();\n\n        return html`\n            <div part=\"base\" class=\"base\">\n                <button\n                    part=\"switch\"\n                    class=\"switch\"\n                    type=\"button\"\n                    role=\"switch\"\n                    ?disabled=${this.disabled}\n                    aria-checked=${this.checked ? 'true' : 'false'}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-describedby=${hasInstructions ? 'instructions' : nothing}\n                    aria-labelledby=${hasLabel ? 'label' : nothing}\n                    @click=${this.toggle}\n                    @keydown=${this.handleKeyDown}\n                >\n                    <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n                </button>\n                <input\n                    part=\"input\"\n                    class=\"input\"\n                    type=\"checkbox\"\n                    tabindex=\"-1\"\n                    .checked=${this.checked}\n                    ?disabled=${this.disabled}\n                    ?required=${this.required}\n                    value=${this.value}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @change=${(event: Event) => event.stopPropagation()}\n                />\n                ${hasLabel || hasInstructions\n                    ? html`\n                        <div class=\"content\" @click=${this.handleLabelClick}>\n                            ${hasLabel\n                                ? html`\n                                    <span part=\"label\" class=\"label\" id=\"label\">\n                                        <slot></slot>${this.label}\n                                    </span>\n                                `\n                                : nothing}\n                            ${hasInstructions\n                                ? html`\n                                    <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n                                        <slot name=\"instructions\">${this.instructions}</slot>\n                                        <slot name=\"hint\"></slot>\n                                    </span>\n                                `\n                                : nothing}\n                        </div>\n                    `\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-lightswitch': PkLightswitch;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-option-Cy7oOcwF.js → pk-option-MGj9SKOK.js}

@@ -1,8 +1,7 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
 import { css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 //#region src/utils/highlight-text.ts
 /** Split label text into matched/unmatched segments for typeahead highlighting. */
@@ -317,4 +316,4 @@ PkOption = __decorate([customElement("pk-option")], PkOption);
 //#endregion
 export { PkOption as t };
 
-//# sourceMappingURL=pk-option-Cy7oOcwF.js.map
+//# sourceMappingURL=pk-option-MGj9SKOK.js.map