@verbb/plugin-kit-web 2.0.20 → 2.0.21

package/dist/chunks/{pk-input-CF_icEtR.js.map → pk-input-BywmK5n2.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-input-CF_icEtR.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             * Control chrome tokens — inherit into light-DOM in-control actions\n             * (e.g. pk-copy-button[slot=end]) the same way combobox/image-browser\n             * size their trailing clear/expand hit targets.\n             */\n            --pk-input-padding-block: 6px;\n            --pk-input-padding-inline: 8px;\n            --pk-input-control-gap: 6px;\n            --pk-input-decoration-size: 0.75rem;\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         * Trailing actions (clear, pk-copy-button[slot=end]) stay in flex flow so long\n         * values never paint under the button — mirror combobox / image-browser.\n         */\n        .form-control__input {\n            align-items: center;\n            gap: var(--pk-input-control-gap);\n            padding-inline: var(--pk-input-padding-inline);\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            align-self: stretch;\n            align-items: center;\n        }\n\n        /* Decorative glyphs only — interactive in-control actions opt out below. */\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        /* Copy (and similar) inside the field: flex-reserved space, not absolute overlay. */\n        .form-control__end:has(::slotted(pk-copy-button)) {\n            align-items: stretch;\n        }\n\n        .form-control__end ::slotted(pk-copy-button) {\n            display: inline-flex;\n            align-self: stretch;\n            align-items: stretch;\n            max-width: none;\n            max-height: none;\n            /*\n             * Pull into trailing padding like combobox expand/clear, but leave a\n             * small inset so the glyph is not tight against the field border.\n             */\n            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);\n            margin-block: calc(-1 * var(--pk-input-padding-block));\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: var(--pk-input-padding-block);\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']) {\n            --pk-input-padding-block: 4px;\n            --pk-input-padding-inline: 6px;\n            --pk-input-control-gap: 4px;\n            --pk-input-decoration-size: 0.625rem;\n        }\n\n        :host([size='xs']) .input {\n            font-size: 11px;\n        }\n\n        :host([size='sm']) {\n            --pk-input-padding-block: 4px;\n            --pk-input-padding-inline: 8px;\n            --pk-input-control-gap: 4px;\n            --pk-input-decoration-size: 0.6875rem;\n        }\n\n        :host([size='sm']) .input {\n            font-size: 12px;\n        }\n\n        :host([size='lg']) {\n            --pk-input-padding-block: 8px;\n            --pk-input-padding-inline: 12px;\n            --pk-input-control-gap: 8px;\n            --pk-input-decoration-size: 0.875rem;\n        }\n\n        :host([size='lg']) .input {\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) {\n            --pk-input-padding-block: 10px;\n            --pk-input-padding-inline: 16px;\n            --pk-input-control-gap: 8px;\n            --pk-input-decoration-size: 1rem;\n        }\n\n        :host([size='xl']) .input {\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        /*\n         * Clear is a flex trailing action (not absolute). Reserves width in the\n         * control so values cannot scroll under the glyph — same contract as\n         * combobox clear/expand and image-browser clear.\n         */\n        .clear-button {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-self: stretch;\n            align-items: center;\n            justify-content: center;\n            box-sizing: border-box;\n            width: calc(var(--pk-input-decoration-size) + var(--pk-input-padding-inline));\n            margin-block: calc(-1 * var(--pk-input-padding-block));\n            /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. */\n            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);\n            font-size: var(--pk-input-decoration-size);\n            line-height: 1;\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 control (icon, unit, etc.)\n * @slot end - Trailing adornment inside the field control (icon, unit, or\n *   in-control action such as `pk-copy-button`)\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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"}
+{"version":3,"file":"pk-input-BywmK5n2.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             * Control chrome tokens — inherit into light-DOM in-control actions\n             * (e.g. pk-copy-button[slot=end]) the same way combobox/image-browser\n             * size their trailing clear/expand hit targets.\n             */\n            --pk-input-padding-block: 6px;\n            --pk-input-padding-inline: 8px;\n            --pk-input-control-gap: 6px;\n            --pk-input-decoration-size: 0.75rem;\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         * Trailing actions (clear, pk-copy-button[slot=end]) stay in flex flow so long\n         * values never paint under the button — mirror combobox / image-browser.\n         */\n        .form-control__input {\n            align-items: center;\n            gap: var(--pk-input-control-gap);\n            padding-inline: var(--pk-input-padding-inline);\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            align-self: stretch;\n            align-items: center;\n        }\n\n        /* Decorative glyphs only — interactive in-control actions opt out below. */\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        /* Copy (and similar) inside the field: flex-reserved space, not absolute overlay. */\n        .form-control__end:has(::slotted(pk-copy-button)) {\n            align-items: stretch;\n        }\n\n        .form-control__end ::slotted(pk-copy-button) {\n            display: inline-flex;\n            align-self: stretch;\n            align-items: stretch;\n            max-width: none;\n            max-height: none;\n            /*\n             * Pull into trailing padding like combobox expand/clear, but leave a\n             * small inset so the glyph is not tight against the field border.\n             */\n            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);\n            margin-block: calc(-1 * var(--pk-input-padding-block));\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: var(--pk-input-padding-block);\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']) {\n            --pk-input-padding-block: 4px;\n            --pk-input-padding-inline: 6px;\n            --pk-input-control-gap: 4px;\n            --pk-input-decoration-size: 0.625rem;\n        }\n\n        :host([size='xs']) .input {\n            font-size: 11px;\n        }\n\n        :host([size='sm']) {\n            --pk-input-padding-block: 4px;\n            --pk-input-padding-inline: 8px;\n            --pk-input-control-gap: 4px;\n            --pk-input-decoration-size: 0.6875rem;\n        }\n\n        :host([size='sm']) .input {\n            font-size: 12px;\n        }\n\n        :host([size='lg']) {\n            --pk-input-padding-block: 8px;\n            --pk-input-padding-inline: 12px;\n            --pk-input-control-gap: 8px;\n            --pk-input-decoration-size: 0.875rem;\n        }\n\n        :host([size='lg']) .input {\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) {\n            --pk-input-padding-block: 10px;\n            --pk-input-padding-inline: 16px;\n            --pk-input-control-gap: 8px;\n            --pk-input-decoration-size: 1rem;\n        }\n\n        :host([size='xl']) .input {\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        /*\n         * Clear is a flex trailing action (not absolute). Reserves width in the\n         * control so values cannot scroll under the glyph — same contract as\n         * combobox clear/expand and image-browser clear.\n         */\n        .clear-button {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-self: stretch;\n            align-items: center;\n            justify-content: center;\n            box-sizing: border-box;\n            width: calc(var(--pk-input-decoration-size) + var(--pk-input-padding-inline));\n            margin-block: calc(-1 * var(--pk-input-padding-block));\n            /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. */\n            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);\n            font-size: var(--pk-input-decoration-size);\n            line-height: 1;\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 control (icon, unit, etc.)\n * @slot end - Trailing adornment inside the field control (icon, unit, or\n *   in-control action such as `pk-copy-button`)\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-lightswitch-D1qEFRxK.js → pk-lightswitch-VHfJizBW.js}

@@ -1,5 +1,5 @@
 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-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.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";
@@ -428,4 +428,4 @@ PkLightswitch = __decorate([customElement("pk-lightswitch")], PkLightswitch);
 //#endregion
 export { PkLightswitch as t };
 
-//# sourceMappingURL=pk-lightswitch-D1qEFRxK.js.map
+//# sourceMappingURL=pk-lightswitch-VHfJizBW.js.map

package/dist/chunks/{pk-lightswitch-D1qEFRxK.js.map → pk-lightswitch-VHfJizBW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-lightswitch-D1qEFRxK.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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"}
+{"version":3,"file":"pk-lightswitch-VHfJizBW.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-radio-group-ByrxGLdX.js → pk-radio-group-Dzd-3HaQ.js}

@@ -1,5 +1,5 @@
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.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";
@@ -231,6 +231,7 @@ var PkRadioGroup = class PkRadioGroup extends PkFormAssociatedElement {
         `;
 	}
 };
+__decorate([state()], PkRadioGroup.prototype, "value", null);
 __decorate([property({
 	attribute: "value",
 	reflect: true
@@ -249,4 +250,4 @@ PkRadioGroup = __decorate([customElement("pk-radio-group")], PkRadioGroup);
 //#endregion
 export { PkRadioGroup as t };
 
-//# sourceMappingURL=pk-radio-group-ByrxGLdX.js.map
+//# sourceMappingURL=pk-radio-group-Dzd-3HaQ.js.map

package/dist/chunks/pk-radio-group-Dzd-3HaQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-radio-group-Dzd-3HaQ.js","names":[],"sources":["../../src/components/radio-group/pk-radio-group.styles.ts","../../src/components/radio-group/pk-radio-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkRadioGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\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        .group {\n            display: grid;\n            gap: 0.375rem;\n        }\n\n        .group--horizontal {\n            grid-auto-flow: column;\n            grid-auto-columns: max-content;\n            align-items: center;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } 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 { RequiredValidator } from '../../validators/index.js';\nimport type { PkRadio } from './pk-radio.js';\nimport { pkRadioGroupStyles } from './pk-radio-group.styles.js';\n\nexport type PkRadioGroupOrientation = 'horizontal' | 'vertical';\n\n/**\n * Radio group —  pattern: light-DOM `pk-radio` children, shared value + validation.\n *\n * @slot label - Group label\n * @slot instructions - Instructions text\n * @slot hint - Alias for `instructions`\n * @slot - `pk-radio` items\n *\n * @csspart form-control - Form control wrapper\n * @csspart label - Label text\n * @csspart radios - Radio items container\n * @csspart instructions - Instructions text\n */\n@customElement('pk-radio-group')\nexport class PkRadioGroup extends PkFormAssociatedElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    static override styles = [formControlStyles, pkRadioGroupStyles];\n\n    static override get validators() {\n        return [...super.validators, RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['change'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\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        this._value = val == null ? null : String(val);\n        this.valueHasChanged = true;\n    }\n\n    /** Default value — reflected as the `value` attribute. */\n    @property({ attribute: 'value', reflect: true })\n    defaultValue = '';\n\n    @property({ reflect: true })\n    orientation: PkRadioGroupOrientation = 'vertical';\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ attribute: 'aria-label' })\n    override ariaLabel: string | null = null;\n\n    @query('slot:not([name])')\n    private defaultSlot!: HTMLSlotElement;\n\n    @state()\n    private items: PkRadio[] = [];\n\n    protected override syncFormValue(): void {\n        this.setFormValue(this.value || null);\n    }\n\n    protected override resetToDefaultValue(): void {\n        this._value = null;\n        this.applySelection();\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.applySelection();\n        }\n    }\n\n    protected override get validationTarget(): HTMLElement | undefined {\n        return this.getAllRadios().find((item) => !item.disabled) ?? this.getAllRadios()[0];\n    }\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n        super.connectedCallback();\n        this.addEventListener('keydown', this.handleKeyDown);\n        this.addEventListener('click', this.handleRadioClick);\n    }\n\n    override disconnectedCallback(): void {\n        this.removeEventListener('keydown', this.handleKeyDown);\n        this.removeEventListener('click', this.handleRadioClick);\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('disabled') || changed.has('invalid') || changed.has('name')) {\n            this.applySelection();\n        }\n\n        super.updated(changed);\n    }\n\n    override formResetCallback(): void {\n        this._value = null;\n        super.formResetCallback();\n        this.applySelection();\n    }\n\n    override focus(options?: FocusOptions): void {\n        if (this.disabled) {\n            return;\n        }\n\n        const radios = this.getEnabledItems();\n        const checked = radios.find((radio) => radio.checked);\n        const target = checked ?? radios[0];\n        target?.focusControl(options);\n    }\n\n    private getAllRadios(): PkRadio[] {\n        return [...this.querySelectorAll('pk-radio')];\n    }\n\n    private syncItems = (): void => {\n        this.items = this.getAllRadios();\n        this.applySelection();\n    };\n\n    private getEnabledItems(): PkRadio[] {\n        return this.items.filter((item) => !item.disabled && !this.disabled);\n    }\n\n    private applySelection(): void {\n        const radios = this.getAllRadios();\n        this.items = radios;\n\n        const enabled = this.getEnabledItems();\n        const checkedRadio = enabled.find((item) => item.value === this.value);\n\n        for (const item of radios) {\n            const checked = item.value === this.value;\n            // React sets CE booleans as properties, while hand-written HTML uses attributes.\n            // Preserve item-level disabled state from either source, but do not let a prior\n            // group-level disabled pass permanently mark every child disabled.\n            const itemDisabled = item.hasAttribute('disabled') || (item.disabled && !item.forceDisabled);\n            item.checked = checked;\n            item.disabled = this.disabled || itemDisabled;\n            item.invalid = this.invalid;\n            item.required = this.required;\n            item.forceDisabled = this.disabled;\n        }\n\n        if (this.disabled) {\n            for (const item of radios) {\n                item.tabIndex = -1;\n            }\n            return;\n        }\n\n        if (checkedRadio) {\n            for (const item of enabled) {\n                item.tabIndex = item.checked ? 0 : -1;\n            }\n        } else if (enabled.length > 0) {\n            enabled.forEach((item, index) => {\n                item.tabIndex = index === 0 ? 0 : -1;\n            });\n        }\n\n        for (const item of radios.filter((radio) => radio.disabled)) {\n            item.tabIndex = -1;\n        }\n    }\n\n    private handleRadioClick = (event: Event): void => {\n        const clickedRadio = (event.target as HTMLElement).closest('pk-radio') as PkRadio | null;\n\n        if (!clickedRadio || clickedRadio.disabled || clickedRadio.forceDisabled || this.disabled) {\n            return;\n        }\n\n        const oldValue = this.value;\n        this.value = clickedRadio.value;\n        this.applySelection();\n\n        if (this.value !== oldValue) {\n            this.emitValueChange();\n        }\n    };\n\n    private handleKeyDown = (event: KeyboardEvent): void => {\n        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', ' ', 'Home', 'End'].includes(event.key) || this.disabled) {\n            return;\n        }\n\n        const radios = this.getEnabledItems();\n\n        if (radios.length === 0) {\n            return;\n        }\n\n        event.preventDefault();\n\n        const oldValue = this.value;\n        const checkedRadio = radios.find((radio) => radio.checked) ?? radios[0]!;\n        let index = radios.indexOf(checkedRadio);\n\n        if (event.key === ' ') {\n            // Space selects focused radio without moving\n        } else if (event.key === 'Home') {\n            index = 0;\n        } else if (event.key === 'End') {\n            index = radios.length - 1;\n        } else {\n            const increment = ['ArrowUp', 'ArrowLeft'].includes(event.key) ? -1 : 1;\n            index += increment;\n\n            if (index < 0) {\n                index = radios.length - 1;\n            }\n\n            if (index >= radios.length) {\n                index = 0;\n            }\n        }\n\n        this.value = radios[index]!.value;\n        this.applySelection();\n        radios[index]!.focusControl();\n\n        if (this.value !== oldValue) {\n            this.emitValueChange();\n        }\n    };\n\n    private emitValueChange(): void {\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: this.value },\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    override render() {\n        const hasLabelSlot = this.hasSlotController.test('label');\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n        );\n        const hasLabel = Boolean(this.label) || hasLabelSlot;\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel\n                    ? html`\n                        <div part=\"label\" class=\"form-control__label\" id=\"label\">\n                            <slot name=\"label\">${this.label}</slot>\n                        </div>\n                    `\n                    : nothing}\n\n                ${hasInstructions\n                    ? html`\n                        <div part=\"instructions\" class=\"form-control__instructions\" id=\"instructions\">\n                            <slot name=\"instructions\">${this.instructions}</slot>\n                            <slot name=\"hint\"></slot>\n                        </div>\n                    `\n                    : nothing}\n\n                <div\n                    part=\"radios\"\n                    class=${classMap({\n                        group: true,\n                        'pk-radio-group': true,\n                        'group--horizontal': this.orientation === 'horizontal',\n                        'pk-radio-group--horizontal': this.orientation === 'horizontal',\n                    })}\n                    role=\"radiogroup\"\n                    aria-labelledby=${hasLabel ? 'label' : nothing}\n                    aria-label=${!hasLabel ? (this.ariaLabel ?? nothing) : nothing}\n                    aria-describedby=${hasInstructions ? 'instructions' : nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-required=${this.required ? 'true' : nothing}\n                >\n                    <slot @slotchange=${this.syncItems}></slot>\n                </div>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-radio-group': PkRadioGroup;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-select-CdQdhnZN.js → pk-select-b5S5WKc-.js}

@@ -1,7 +1,7 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
@@ -582,6 +582,7 @@ var PkSelect = class PkSelect extends PkFormAssociatedElement {
 	}
 	updated(changed) {
 		if (changed.has("value") || changed.has("values") || changed.has("multiple")) this.applySelection();
+		if (changed.has("values") || changed.has("multiple")) this.syncFormValue();
 		super.updated(changed);
 	}
 	getOptionElements() {
@@ -1128,4 +1129,4 @@ PkSelect = __decorate([customElement("pk-select")], PkSelect);
 //#endregion
 export { pkSelectStyles as n, PkSelect as t };
 
-//# sourceMappingURL=pk-select-CdQdhnZN.js.map
+//# sourceMappingURL=pk-select-b5S5WKc-.js.map

package/dist/chunks/pk-select-b5S5WKc-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-select-b5S5WKc-.js","names":[],"sources":["../../src/components/select/pk-select.styles.ts","../../src/components/select/pk-select.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\nexport const pkSelectStyles = [\n    popupContentAnimationStyles,\n    css`\n    ${iconStyles}\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            position: relative;\n            width: fit-content;\n            max-width: 100%;\n            align-self: flex-start;\n            flex: none;\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: var(--pk-line-height);\n            --pk-select-trigger-border-width: 1px;\n            --pk-select-item-min-height: var(--pk-input-height);\n            --pk-select-item-padding-block: 6px;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-padding-inline-end: 2rem;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n            --pk-select-item-line-height: var(--pk-input-control-line-height, 1.25rem);\n            --pk-select-item-indicator-size: 0.75rem;\n            --pk-select-item-indicator-inset: 0.5rem;\n            /* v1 SelectLabel default: text-xs → 12px */\n            --pk-select-group-label-font-size: 12px;\n            --pk-select-decoration-size: 0.875rem;\n        }\n\n        :host([width='full']) {\n            display: block;\n            width: 100%;\n        }\n\n        :host([width='full']) .control {\n            width: 100%;\n        }\n\n        :host([width='full']) button.control .icon {\n            margin-inline-start: auto;\n        }\n\n        .control {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            /* Fill the host when consumers set min-width/width on :host. */\n            width: 100%;\n            max-width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding: var(--pk-select-item-padding-block) var(--pk-select-item-padding-inline);\n            border: var(--pk-select-trigger-border-width) solid transparent;\n            border-radius: var(--pk-radius-lg);\n            --pk-select-fill: var(--pk-color-slate-250);\n            --pk-select-fill-hover: var(--pk-color-slate-300);\n            background: var(--pk-select-fill);\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            font-size: var(--pk-select-item-font-size);\n            line-height: var(--pk-input-control-line-height, 1.25rem);\n            white-space: nowrap;\n            cursor: pointer;\n            outline: none;\n            box-sizing: border-box;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;\n        }\n\n        button.control {\n            appearance: none;\n            -webkit-appearance: none;\n            text-align: left;\n            background-color: var(--pk-select-fill);\n            border: var(--pk-select-trigger-border-width) solid transparent;\n        }\n\n        :host(:not([disabled])) .control:hover:not(.is-disabled):not(:disabled),\n        :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n            background: var(--pk-select-fill-hover);\n        }\n\n        :host(:not([disabled])) button.control:hover:not(.is-disabled):not(:disabled) {\n            background-color: var(--pk-select-fill-hover);\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))) button.control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) button.control {\n            border-color: var(--pk-color-sky-600);\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .control.is-disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        .trigger {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex: 0 0 auto;\n            min-width: 0;\n            padding: 0;\n            border: 0;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            cursor: inherit;\n            outline: none;\n        }\n\n        .control > .trigger:not(.trigger--icon) {\n            flex: 0 1 auto;\n            justify-content: flex-start;\n        }\n\n        .trigger--icon {\n            width: 1.25rem;\n        }\n\n        .trigger-start {\n            display: none;\n            flex: 0 0 auto;\n            align-items: center;\n        }\n\n        .trigger-start.has-decoration {\n            display: inline-flex;\n        }\n\n        .control-start,\n        .control-end {\n            display: inline-flex;\n            align-items: center;\n            flex-shrink: 0;\n            line-height: 0;\n            color: var(--pk-color-gray-600);\n        }\n\n        slot[name='start']::slotted(svg),\n        slot[name='end']::slotted(svg) {\n            width: var(--pk-select-decoration-size);\n            height: var(--pk-select-decoration-size);\n        }\n\n        .value {\n            flex: 1 1 auto;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            text-align: left;\n        }\n\n        .icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            flex-shrink: 0;\n            line-height: 0;\n            pointer-events: none;\n            color: var(--pk-color-gray-600);\n        }\n\n        /* Extra space before the expand chevron (control gap stays for start icon ↔ label). */\n        .control > .icon,\n        .control > .trigger--icon {\n            margin-inline-start: 0.25rem;\n        }\n\n        .icon svg {\n            display: block;\n            width: 0.75rem;\n            height: 0.75rem;\n        }\n\n        .tags {\n            display: flex;\n            flex: 0 1 auto;\n            flex-wrap: wrap;\n            gap: 0.25rem;\n            min-width: 0;\n        }\n\n        .tag {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.25rem;\n            max-width: 10ch;\n            padding: 0.125rem 0.375rem;\n            border-radius: var(--pk-radius-sm);\n            background: var(--pk-color-gray-200);\n            color: var(--pk-color-gray-800);\n            font-size: 12px;\n            line-height: 1.3;\n        }\n\n        .tag-label {\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        .tag-remove {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 0.875rem;\n            height: 0.875rem;\n            padding: 0;\n            border: 0;\n            border-radius: var(--pk-radius-sm);\n            background: transparent;\n            color: var(--pk-color-gray-600);\n            cursor: pointer;\n        }\n\n        .tag-remove:hover {\n            background: rgb(0 0 0 / 8%);\n        }\n\n        .clear-button {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 1.25rem;\n            height: 1.25rem;\n            padding: 0;\n            border: 0;\n            border-radius: var(--pk-radius-sm);\n            background: transparent;\n            color: var(--pk-color-gray-600);\n            cursor: pointer;\n            flex-shrink: 0;\n        }\n\n        .clear-button:hover {\n            background: rgb(0 0 0 / 6%);\n            color: var(--pk-color-gray-800);\n        }\n\n        .value-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        }\n\n        .panel ::slotted(pk-separator) {\n            margin: 4px 0;\n        }\n\n        .panel {\n            width: max-content;\n            min-width: var(--pk-select-anchor-width, 8rem);\n            max-height: 16rem;\n            overflow: auto;\n            padding: 0;\n            border: 0;\n            border-radius: var(--pk-radius-md);\n            background: var(--pk-color-white);\n            box-shadow: var(--pk-shadow-popup);\n            color: var(--pk-color-gray-700);\n            outline: none;\n        }\n\n        .panel[hidden] {\n            display: none !important;\n        }\n\n        :host([invalid]) .control,\n        :host(:state(user-invalid)) .control {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) button.control:focus-visible,\n        :host([invalid][data-state='focus-visible']) button.control,\n        :host(:state(user-invalid)) button.control:focus-visible,\n        :host(:state(user-invalid)[data-state='focus-visible']) button.control {\n            border-color: var(--pk-color-rose-600);\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([size='xs']) {\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 4px;\n            --pk-select-item-padding-inline: 8px;\n            --pk-select-item-padding-inline-end: 1.75rem;\n            --pk-select-item-font-size: 11px;\n            --pk-select-item-line-height: 1.25;\n            /* v1 SelectLabel xs: text-[11px] */\n            --pk-select-group-label-font-size: 11px;\n            --pk-select-decoration-size: 0.625rem;\n        }\n\n        :host([size='xs']) .control {\n            border-radius: var(--pk-radius-sm);\n            /* Match trigger line-height to the compact item token (default is 1.25rem). */\n            line-height: var(--pk-select-item-line-height, 1.25);\n        }\n\n        :host([size='xs']) .icon svg {\n            width: 0.625rem;\n            height: 0.625rem;\n        }\n\n        /* Options live in light DOM; ::slotted pushes size tokens onto each pk-option\n         * host so the open listbox matches the trigger (inheritance alone is flaky when\n         * the panel is promoted to the popover top layer). */\n        :host([size='xs']) ::slotted(pk-option) {\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 4px;\n            --pk-select-item-padding-inline: 8px;\n            --pk-select-item-padding-inline-end: 1.75rem;\n            --pk-select-item-font-size: 11px;\n            --pk-select-item-line-height: 1.25;\n            --pk-select-item-indicator-size: 0.625rem;\n        }\n\n        :host([size='xs']) .panel {\n            max-height: 12rem;\n        }\n\n        /* Editable-table cells only (class set by pk-editable-table) — compact chip + menu. */\n        :host(.cell-pk-control) {\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 5px;\n            --pk-select-item-padding-inline: 8px;\n            --pk-select-item-padding-inline-end: 1.5rem;\n            --pk-select-item-font-size: 11px;\n            --pk-select-item-line-height: 1.2;\n            /* Compact table chip — match xs label size. */\n            --pk-select-group-label-font-size: 11px;\n            --pk-select-decoration-size: 0.625rem;\n            --pk-select-item-indicator-size: 0.625rem;\n        }\n\n        :host(.cell-pk-control) .control {\n            border-radius: var(--pk-radius-sm);\n            line-height: var(--pk-select-item-line-height, 1.2);\n        }\n\n        :host(.cell-pk-control) ::slotted(pk-option) {\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 5px;\n            --pk-select-item-padding-inline: 8px;\n            --pk-select-item-padding-inline-end: 1.5rem;\n            --pk-select-item-font-size: 11px;\n            --pk-select-item-line-height: 1.2;\n            --pk-select-item-indicator-size: 0.625rem;\n        }\n\n        :host(.cell-pk-control) .panel {\n            max-height: 11rem;\n        }\n\n        :host([size='sm']) {\n            --pk-select-item-min-height: 0;\n            --pk-select-item-padding-block: 6px;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-padding-inline-end: 1.75rem;\n            --pk-select-item-font-size: 12px;\n            --pk-select-item-indicator-inset: 0.625rem;\n            /* v1 SelectLabel sm: text-[12px] */\n            --pk-select-group-label-font-size: 12px;\n            --pk-select-decoration-size: 0.6875rem;\n        }\n\n        :host([size='sm']) .control {\n            border-radius: var(--pk-radius-md);\n        }\n\n        :host([size='sm']) .icon svg {\n            width: 0.6875rem;\n            height: 0.6875rem;\n        }\n\n        :host([size='lg']) {\n            --pk-select-item-padding-block: 8px;\n            --pk-select-item-padding-inline: 12px;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n            --pk-select-item-indicator-inset: 0.75rem;\n            /* v1 SelectLabel lg: text-sm → 14px */\n            --pk-select-group-label-font-size: 14px;\n            --pk-select-decoration-size: 1rem;\n        }\n\n        :host([size='xl']) {\n            --pk-select-item-padding-block: 10px;\n            --pk-select-item-padding-inline: 14px;\n            --pk-select-item-padding-inline-end: 2.25rem;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n            --pk-select-item-indicator-inset: 0.875rem;\n            /* v1 SelectLabel xl: text-base → 16px */\n            --pk-select-group-label-font-size: 16px;\n            --pk-select-decoration-size: 1.125rem;\n        }\n\n        :host([size='xl']) .icon svg {\n            width: 0.875rem;\n            height: 0.875rem;\n        }\n    }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { chevronDown, renderIconHtml } from '../../icons/index.js';\n\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n    PkAfterHideEvent,\n    PkAfterShowEvent,\n    PkHideEvent,\n    PkShowEvent,\n    type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n    createTypeToSelectHandler,\n    handleListboxKeyDown,\n    isListboxTypeToSelectKey,\n    LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n    syncPopupPlacementAnimation,\n    waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncListboxSeparators } from '../../internal/sync-listbox-separators.js';\nimport type { PkOption } from './pk-option.js';\nimport type { PkOptionGroup } from './pk-option-group.js';\nimport { pkSelectStyles } from './pk-select.styles.js';\n\nexport type PkSelectSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst CHEVRON_ICON = renderIconHtml(chevronDown);\n\n/**\n * Select — slotted `pk-option` children, form-associated, clearable, multiselect tags.\n *\n * @slot start - Presentational decoration before the trigger label (e.g. icons)\n * @slot end - Presentational decoration before the expand chevron\n * @slot - `pk-option` and `pk-option-group` items\n *\n * @csspart control - Trigger control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart trigger-start - Mirrored start decoration from the selected option\n * @csspart trigger - Select trigger button\n * @csspart panel - Listbox panel\n *\n * @cssproperty [--pk-select-fill=var(--pk-color-slate-250)] - Closed trigger background.\n * @cssproperty [--pk-select-fill-hover=var(--pk-color-slate-300)] - Closed trigger hover background.\n * @cssproperty [--pk-select-anchor-width] - Panel min-width; set from the trigger width while open.\n * @cssproperty [--pk-select-decoration-size=0.875rem] - Start/end decoration glyph size.\n *\n * @event pk-show - Emitted when the listbox begins to open.\n * @event pk-after-show - Emitted after the listbox opens and enter motion finishes.\n * @event {{ source: string }} pk-hide - Emitted when the listbox begins to close (cancelable).\n * @event pk-after-hide - Emitted after the listbox closes and exit motion finishes.\n * @event {{ open: boolean }} pk-open-change - Emitted when `open` changes after show/hide settles.\n * @event {{ value: string, values: string[] }} pk-change - Emitted when the selection changes.\n * @event pk-clear - Emitted when the value is cleared via the clear control.\n * @event pk-invalid - Emitted when constraint validation fails.\n * @event input - Native input event when the selection changes.\n * @event change - Native change event when the selection changes.\n *\n * @method show - Opens the listbox.\n * @method hide - Closes the listbox.\n * @method checkValidity - Runs constraint validation without showing the browser UI.\n * @method reportValidity - Runs constraint validation and shows the browser UI when invalid.\n * @method setCustomValidity - Sets or clears a custom validation message.\n * @method resetValidity - Clears custom errors and re-syncs validity state.\n *\n * @dependency pk-popup - Positioned listbox panel host.\n */\n@customElement('pk-select')\nexport class PkSelect extends PkFormAssociatedElement {\n    static override styles = pkSelectStyles;\n\n    static override get validators(): PkValidator[] {\n        return [\n            ...super.validators,\n            MirrorValidator(),\n            {\n                observedAttributes: ['required'],\n                checkValidity: (element) => {\n                    const select = element as PkSelect;\n                    const result = {\n                        message: 'Please select an item in the list.',\n                        isValid: true,\n                        invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n                    };\n\n                    if (!select.required) {\n                        return result;\n                    }\n\n                    const missing = select.multiple ? select.values.length === 0 : !select.value;\n\n                    if (!missing) {\n                        return result;\n                    }\n\n                    result.isValid = false;\n                    result.invalidKeys.push('valueMissing');\n                    return result;\n                },\n            },\n        ];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    /** Whether the listbox is open. Prefer `show()` / `hide()` for animated transitions. */\n    @property({ type: Boolean, reflect: true })\n    open = false;\n\n    /** Allow more than one option to be selected (tag display). */\n    @property({ type: Boolean, reflect: true })\n    multiple = false;\n\n    /** Preferred listbox placement; may flip to stay in viewport. */\n    @property({ reflect: true })\n    placement: PkPopupPlacement = 'bottom-start';\n\n    /** Gap between the trigger and listbox panel in px. */\n    @property({ attribute: 'side-offset', type: Number })\n    sideOffset = 4;\n\n    /** Alias of `with-clear` — shows a clear control when the value is non-empty. */\n    @property({ type: Boolean, reflect: true })\n    clearable = false;\n\n    /** Shows a clear control when the value is non-empty. */\n    @property({ attribute: 'with-clear', type: Boolean })\n    withClear = false;\n\n    /** Marks the control invalid (visual + ARIA). */\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    /** Shared CP size scale for the closed trigger and list items. */\n    @property({ reflect: true })\n    size: PkSelectSize = 'default';\n\n    /** When `full`, the trigger stretches to the host width. */\n    @property({ reflect: true })\n    width?: 'full';\n\n    /** Prompt shown when nothing is selected. Empty by default. */\n    @property()\n    placeholder = '';\n\n    /** Selected value (single-select). Empty string when cleared. */\n    @property()\n    value = '';\n\n    /** Initial value before user interaction (form reset baseline). */\n    @property({ attribute: 'default-value' })\n    defaultValue = '';\n\n    /** Selected values when `multiple` is set. Property-only (not an attribute). */\n    @property({ type: Array, attribute: false })\n    values: string[] = [];\n\n    /** Initial multi values before user interaction. Property-only. */\n    @property({ attribute: false })\n    defaultValues: string[] = [];\n\n    /** Accessible name for the trigger when no visible label is present. */\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    /**\n     * Whether arrow-key focus loops from the last option back to the first (and vice versa).\n     * Base UI `Select` has no equivalent; default: `false`.\n     */\n    @property({ attribute: 'loop-focus', type: Boolean })\n    loopFocus = false;\n\n    private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n    private readonly listboxId = uniqueId('pk-select-listbox');\n    private readonly triggerId = uniqueId('pk-select-trigger');\n\n    @query('.trigger-start')\n    private triggerStartElement?: HTMLSpanElement;\n\n    @query('pk-popup')\n    private popupElement!: PkPopup;\n\n    @query('.control')\n    private controlElement!: HTMLElement;\n\n    @query('button.control, .control > button.trigger')\n    private triggerButton?: HTMLButtonElement;\n\n    @query('.value-input')\n    override input!: HTMLInputElement;\n\n    private get panelElement(): HTMLDivElement | null {\n        return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n    }\n\n    private options: PkOption[] = [];\n\n    @state()\n    private highlightedIndex = 0;\n\n    private dismissRegistered = false;\n    private panelEventTarget: HTMLElement | null = null;\n    private typeToSelect = createTypeToSelectHandler([], () => {});\n    private optionsObserver?: MutationObserver;\n\n    /** True while the shared popup-content exit animation is running. */\n    @state()\n    private closing = false;\n\n    /** Gates `data-open` so enter motion starts after Floating UI places the panel. */\n    @state()\n    private panelAnimated = false;\n\n    override connectedCallback(): void {\n        this.refreshOptions();\n        super.connectedCallback();\n        this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.addEventListener('keydown', this.onKeyDown);\n        this.optionsObserver = new MutationObserver(() => {\n            this.handleOptionsMutation({ render: true });\n        });\n        this.optionsObserver.observe(this, { childList: true, subtree: true });\n    }\n\n    override disconnectedCallback(): void {\n        this.unbindPanelEvents();\n        this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.removeEventListener('keydown', this.onKeyDown);\n        this.optionsObserver?.disconnect();\n        void this.closePanel('api');\n        super.disconnectedCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('values') || changed.has('multiple')) {\n            this.applySelection();\n        }\n\n        if (changed.has('values') || changed.has('multiple')) {\n            this.syncFormValue();\n        }\n\n        super.updated(changed);\n    }\n\n    private getOptionElements(): PkOption[] {\n        const portaled = this.popupElement?.getContentElement()?.querySelectorAll('pk-option');\n\n        if (portaled && portaled.length > 0) {\n            return [...portaled];\n        }\n\n        return [...this.querySelectorAll('pk-option')];\n    }\n\n    private handleOptionsMutation = (options: { render?: boolean } = {}): void => {\n        const next = this.getOptionElements();\n        const changed = next.length !== this.options.length\n            || next.some((option, index) => option !== this.options[index]);\n\n        this.options = next;\n        this.applySelection();\n        this.updateTypeToSelect();\n\n        if (options.render !== false && changed) {\n            this.requestUpdate();\n        }\n    };\n\n    private refreshOptions(): void {\n        this.handleOptionsMutation({ render: false });\n    }\n\n    private syncOptions = (): void => {\n        this.handleOptionsMutation({ render: true });\n    };\n\n    /** Portaled listbox options are outside the host tree — listen on the panel instead. */\n    private bindPanelEvents(): void {\n        const panel = this.panelElement;\n\n        if (!panel || panel === this.panelEventTarget) {\n            return;\n        }\n\n        this.unbindPanelEvents();\n        this.panelEventTarget = panel;\n        panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n        panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n        panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n    }\n\n    private unbindPanelEvents(): void {\n        if (!this.panelEventTarget) {\n            return;\n        }\n\n        this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n        this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n        this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n        this.panelEventTarget = null;\n    }\n\n    protected override get validationTarget(): HTMLElement | undefined {\n        return this.input ?? this.triggerButton ?? this.controlElement;\n    }\n\n    protected override getAriaMirrorTarget(): HTMLElement | null {\n        return this.triggerButton ?? this.controlElement ?? null;\n    }\n\n    protected override syncFormValue(): void {\n        if (!this.name) {\n            this.setFormValue(null);\n            return;\n        }\n\n        if (this.multiple) {\n            const formData = new FormData();\n\n            for (const item of this.values) {\n                formData.append(this.name, item);\n            }\n\n            this.setFormValue(formData);\n            return;\n        }\n\n        this.setFormValue(this.value || '');\n    }\n\n    protected override resetToDefaultValue(): void {\n        if (this.multiple) {\n            this.values = [...this.defaultValues];\n        } else {\n            this.value = this.defaultValue;\n        }\n\n        this.applySelection();\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (state instanceof FormData && this.name) {\n            this.values = state.getAll(this.name).map(String);\n            return;\n        }\n\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    private isOptionInHiddenGroup(option: PkOption): boolean {\n        const group = option.closest('pk-option-group') as PkOptionGroup | null;\n\n        return Boolean(group?.hidden);\n    }\n\n    private getVisibleOptions(): PkOption[] {\n        return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n    }\n\n    private getEnabledVisibleOptions(): PkOption[] {\n        return this.getVisibleOptions().filter((option) => !option.disabled);\n    }\n\n    private isSelected(value: string): boolean {\n        if (this.multiple) {\n            return this.values.includes(value);\n        }\n\n        return this.value === value;\n    }\n\n    private applySelection(): void {\n        const visible = this.getVisibleOptions();\n\n        for (const option of this.options) {\n            option.selected = this.isSelected(option.value);\n            option.hidden = !visible.includes(option);\n            option.optionId = `${this.listboxId}-option-${option.value}`;\n        }\n\n        for (const group of this.querySelectorAll('pk-option-group')) {\n            const groupOptions = [...group.querySelectorAll('pk-option')];\n            group.hidden = groupOptions.length > 0 && groupOptions.every((option) => option.hidden);\n        }\n\n        syncListboxSeparators(this);\n\n        this.syncValueInput();\n        this.syncTriggerDecorations();\n\n        if (this.open) {\n            this.syncHighlight();\n        }\n    }\n\n    private syncValueInput(): void {\n        if (!this.input) {\n            return;\n        }\n\n        if (this.multiple) {\n            this.input.value = this.values.join(',');\n            this.input.required = this.required;\n            return;\n        }\n\n        this.input.value = this.value;\n        this.input.required = this.required;\n    }\n\n    private getDisplayValue(): string {\n        if (this.multiple) {\n            const labels = this.getSelectedOptions()\n                .map((option) => option.getLabel());\n\n            return labels.length > 0 ? labels.join(', ') : this.placeholder;\n        }\n\n        const selected = this.options.find((option) => option.value === this.value);\n\n        return selected?.getLabel() || this.placeholder;\n    }\n\n    private getSelectedOptions(): PkOption[] {\n        return this.options.filter((option) => this.isSelected(option.value));\n    }\n\n    /**\n     * Mirror the selected option's `slot=\"start\"` decorations into the trigger —\n     * `pk-select` start/end decoration pattern.\n     */\n    private syncTriggerDecorations(): void {\n        const container = this.triggerStartElement;\n\n        if (!container || this.multiple) {\n            return;\n        }\n\n        container.replaceChildren();\n        container.classList.remove('has-decoration');\n\n        const selected = this.options.find((option) => option.value === this.value);\n\n        if (!selected) {\n            return;\n        }\n\n        for (const element of selected.getStartElements()) {\n            container.append(element.cloneNode(true));\n        }\n\n        container.classList.toggle('has-decoration', container.childElementCount > 0);\n    }\n\n    private hasSelection(): boolean {\n        if (this.multiple) {\n            return this.values.length > 0;\n        }\n\n        // Empty-string values are valid when an option declares them (e.g. \"Default\").\n        return this.options.some((option) => option.value === this.value) || Boolean(this.value);\n    }\n\n    private syncHighlightedIndexToSelection(): void {\n        if (this.multiple) {\n            return;\n        }\n\n        const enabled = this.getEnabledVisibleOptions();\n\n        if (enabled.length === 0) {\n            return;\n        }\n\n        const selectedIndex = enabled.findIndex((option) => option.value === this.value);\n\n        if (selectedIndex >= 0) {\n            this.highlightedIndex = selectedIndex;\n        }\n    }\n\n    private syncHighlight(): void {\n        const enabled = this.getEnabledVisibleOptions();\n\n        for (const option of this.options) {\n            option.highlighted = false;\n            option.focusIndex = -1;\n        }\n\n        if (enabled.length === 0) {\n            this.highlightedIndex = 0;\n            return;\n        }\n\n        if (this.highlightedIndex >= enabled.length) {\n            this.highlightedIndex = 0;\n        }\n\n        const highlighted = enabled[this.highlightedIndex];\n\n        if (highlighted && this.panelElement) {\n            highlighted.highlighted = true;\n            highlighted.focusIndex = 0;\n            scrollIntoView(highlighted, this.panelElement, 'vertical', 'auto');\n        }\n    }\n\n    private updateTypeToSelect(): void {\n        this.typeToSelect = createTypeToSelectHandler(\n            this.getEnabledVisibleOptions() as unknown as HTMLElement[],\n            (index) => {\n                this.highlightedIndex = index;\n                this.syncHighlight();\n                this.getEnabledVisibleOptions()[index]?.focusControl();\n            },\n        );\n    }\n\n    private togglePanel = (event?: Event): void => {\n        event?.preventDefault();\n        event?.stopPropagation();\n\n        if (this.disabled || this.closing) {\n            return;\n        }\n\n        if (this.open) {\n            void this.closePanel('api');\n        } else {\n            void this.openPanel();\n        }\n    };\n\n    private getPopupAnchor(): HTMLElement | null {\n        return this.controlElement ?? null;\n    }\n\n    private getActiveDescendantId(): string | null {\n        const enabled = this.getEnabledVisibleOptions();\n        const highlighted = enabled[this.highlightedIndex];\n        return highlighted?.optionId || null;\n    }\n\n    /** Opens the listbox. */\n    async show(): Promise<void> {\n        if (this.open || this.closing || this.disabled) {\n            return;\n        }\n\n        await this.openPanel();\n    }\n\n    /** Closes the listbox. */\n    async hide(source: PkOverlaySource = 'api'): Promise<void> {\n        if (!this.open || this.closing) {\n            return;\n        }\n\n        await this.closePanel(source);\n    }\n\n    private openPanel(): Promise<void> {\n        const anchor = this.getPopupAnchor();\n\n        if (!anchor || this.closing) {\n            return Promise.resolve();\n        }\n\n        this.dispatchEvent(new PkShowEvent());\n        this.closing = false;\n        this.panelAnimated = false;\n        this.open = true;\n        this.popupElement.active = true;\n        this.applySelection();\n        this.syncHighlightedIndexToSelection();\n\n        if (this.panelElement) {\n            this.panelElement.hidden = false;\n            // Seed side before first paint so enter keyframes pick a direction.\n            syncPopupPlacementAnimation(this.panelElement, this.placement);\n        }\n\n        const anchorWidth = anchor.getBoundingClientRect().width;\n        this.style.setProperty('--pk-select-anchor-width', `${anchorWidth}px`);\n        this.registerDismissHandlers();\n        this.syncHighlight();\n        this.updateTypeToSelect();\n\n        return this.updateComplete.then(async () => {\n            const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n                requireEvent: true,\n            });\n\n            if (this.panelElement) {\n                syncPopupPlacementAnimation(this.panelElement, placement);\n            }\n\n            // Flip data-open after placement so the shared enter animation can run.\n            this.panelAnimated = true;\n            this.bindPanelEvents();\n            this.refreshOptions();\n            this.getEnabledVisibleOptions()[this.highlightedIndex]?.focusControl();\n\n            this.dispatchEvent(new PkAfterShowEvent());\n            this.dispatchEvent(new CustomEvent('pk-open-change', {\n                detail: { open: true },\n                bubbles: true,\n                composed: true,\n            }));\n        });\n    }\n\n    private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n        if (!this.open || this.closing) {\n            return;\n        }\n\n        const hideEvent = new PkHideEvent(source);\n\n        if (!this.dispatchEvent(hideEvent)) {\n            return;\n        }\n\n        this.typeToSelect.reset();\n        this.unbindPanelEvents();\n        this.unregisterDismissHandlers();\n\n        this.closing = true;\n        this.panelAnimated = false;\n        await this.waitForExitAnimation();\n\n        this.open = false;\n        this.closing = false;\n        this.panelAnimated = false;\n\n        if (this.panelElement) {\n            this.panelElement.hidden = true;\n            this.panelElement.removeAttribute('data-side');\n        }\n\n        this.popupElement.active = false;\n\n        this.dispatchEvent(new PkAfterHideEvent());\n        this.dispatchEvent(new CustomEvent('pk-open-change', {\n            detail: { open: false },\n            bubbles: true,\n            composed: true,\n        }));\n\n        if (this.shouldReturnFocusToTrigger(source)) {\n            this.triggerButton?.focus({ preventScroll: true });\n        } else {\n            this.triggerButton?.blur();\n        }\n    }\n\n    private waitForExitAnimation(): Promise<void> {\n        const panel = this.panelElement;\n\n        if (!panel) {\n            return Promise.resolve();\n        }\n\n        return new Promise((resolve) => {\n            let settled = false;\n\n            const finish = (): void => {\n                if (settled) {\n                    return;\n                }\n\n                settled = true;\n                panel.removeEventListener('animationend', onAnimationEnd);\n                window.clearTimeout(fallback);\n                panel.classList.remove('closing');\n                resolve();\n            };\n\n            const onAnimationEnd = (event: AnimationEvent): void => {\n                if (event.target === panel && event.animationName.startsWith('pk-popup-content-out')) {\n                    finish();\n                }\n            };\n\n            panel.classList.add('closing');\n            panel.addEventListener('animationend', onAnimationEnd);\n            const fallback = window.setTimeout(finish, 150);\n        });\n    }\n\n    /** Base UI skips return focus on outside press — avoids an unwanted focus ring after light dismiss. */\n    private shouldReturnFocusToTrigger(source: PkOverlaySource): boolean {\n        return source !== 'light-dismiss' && source !== 'pointer-dismiss';\n    }\n\n    private registerDismissHandlers(): void {\n        registerDismissible(this);\n        this.dismissRegistered = true;\n        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.addEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private unregisterDismissHandlers(): void {\n        if (this.dismissRegistered) {\n            unregisterDismissible(this);\n            this.dismissRegistered = false;\n        }\n\n        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n        document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n    }\n\n    private onDocumentPointerDown = (event: PointerEvent): void => {\n        if (this.isPointerInside(event)) {\n            return;\n        }\n\n        void this.closePanel('light-dismiss');\n    };\n\n    private isPointerInside(event: PointerEvent): boolean {\n        return isPointerInsideOverlay(event, {\n            anchor: this.getPopupAnchor(),\n            panel: this.panelElement,\n        });\n    };\n\n    private onDocumentKeyDown = (event: KeyboardEvent): void => {\n        if (!this.open) {\n            return;\n        }\n\n        if (event.key === 'Escape') {\n            if (!isTopDismissible(this)) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n            void this.closePanel('escape');\n            return;\n        }\n\n        const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n        if (!isListboxKey) {\n            return;\n        }\n\n        if (!isEventInsideOverlay(event, {\n            anchor: this.getPopupAnchor(),\n            panel: this.panelElement,\n        })) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        this.onListboxKeyDown(event);\n    };\n\n    private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n        const { value } = event.detail;\n\n        if (this.multiple) {\n            this.values = this.values.includes(value)\n                ? this.values.filter((v) => v !== value)\n                : [...this.values, value];\n        } else {\n            this.value = value;\n            void this.closePanel('api');\n        }\n\n        this.applySelection();\n        this.emitValueChange();\n    };\n\n    private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n        if (!this.open) {\n            return;\n        }\n\n        const enabled = this.getEnabledVisibleOptions();\n        const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n        if (index === -1 || index === this.highlightedIndex) {\n            return;\n        }\n\n        this.highlightedIndex = index;\n        this.syncHighlight();\n    };\n\n    private removeTag(value: string, event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this.values = this.values.filter((item) => item !== value);\n        this.applySelection();\n        this.emitValueChange();\n    }\n\n    private handleClear(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this.multiple) {\n            this.values = [];\n        } else {\n            this.value = '';\n        }\n\n        this.applySelection();\n        this.dispatchEvent(new PkClearEvent());\n        this.emitValueChange();\n        this.triggerButton?.focus();\n    }\n\n    private emitValueChange(): void {\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: {\n                value: this.multiple ? [...this.values] : this.value,\n            },\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 onKeyDown = (event: KeyboardEvent): void => {\n        if (!this.open) {\n            if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault();\n                void this.openPanel();\n            }\n\n            return;\n        }\n\n        this.onListboxKeyDown(event);\n    };\n\n    private onListboxKeyDown(event: KeyboardEvent): void {\n        const enabled = this.getEnabledVisibleOptions();\n\n        this.highlightedIndex = handleListboxKeyDown(event, {\n            items: enabled as unknown as HTMLElement[],\n            currentIndex: this.highlightedIndex,\n            multiselect: this.multiple,\n            loop: this.loopFocus,\n            onSelect: (index) => {\n                this.highlightedIndex = index;\n                this.syncHighlight();\n            },\n            focusItem: (index) => {\n                enabled[index]?.focusControl();\n            },\n            onClose: () => { void this.closePanel('escape'); },\n        });\n\n        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {\n            this.typeToSelect.handleKey(event);\n        }\n    }\n\n    private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n        if (!this.open) {\n            return;\n        }\n\n        this.onListboxKeyDown(event.detail.keyboardEvent);\n    };\n\n    private renderTags() {\n        return this.getSelectedOptions().map((option) => html`\n            <span class=\"tag\" part=\"tag\">\n                <span class=\"tag-label\">${option.getLabel()}</span>\n                <button\n                    type=\"button\"\n                    class=\"tag-remove\"\n                    part=\"tag-remove\"\n                    aria-label=${`Remove ${option.getLabel()}`}\n                    @click=${(event: Event) => this.removeTag(option.value, event)}\n                >\n                    ×\n                </button>\n            </span>\n        `);\n    }\n\n    private renderChevronIcon() {\n        return html`\n            <span class=\"icon\" aria-hidden=\"true\">${unsafeSVG(CHEVRON_ICON)}</span>\n        `;\n    }\n\n    private renderHostDecorationSlot(name: 'start' | 'end') {\n        if (!this.hasSlotController.test(name)) {\n            return html`<slot name=${name} hidden></slot>`;\n        }\n\n        const className = name === 'start' ? 'control-start' : 'control-end';\n\n        return html`\n            <span part=${name} class=${className}>\n                <slot name=${name}></slot>\n            </span>\n        `;\n    }\n\n    override render() {\n        const displayValue = this.getDisplayValue();\n        const isPlaceholder = !this.hasSelection();\n        const showClear = (this.clearable || this.withClear) && this.hasSelection() && !this.disabled;\n\n        return html`\n            <input\n                class=\"value-input\"\n                part=\"value-input\"\n                tabindex=\"-1\"\n                aria-hidden=\"true\"\n                .value=${this.multiple ? this.values.join(',') : this.value}\n                ?required=${this.required}\n                @input=${() => this.updateValidity()}\n            />\n            ${this.multiple\n                ? html`\n                    <div\n                        part=\"control\"\n                        class=${classMap({\n                            control: true,\n                            'is-disabled': this.disabled,\n                        })}\n                    >\n                        ${this.renderHostDecorationSlot('start')}\n                        ${this.hasSelection()\n                            ? html`\n                                <div class=\"tags\" part=\"tags\">${this.renderTags()}</div>\n                                ${showClear\n                                    ? html`\n                                        <button\n                                            type=\"button\"\n                                            class=\"clear-button\"\n                                            part=\"clear-button\"\n                                            aria-label=\"Clear selection\"\n                                            @click=${this.handleClear}\n                                        >\n                                            ×\n                                        </button>\n                                    `\n                                    : nothing}\n                            `\n                            : html`\n                                <button\n                                    part=\"trigger\"\n                                    type=\"button\"\n                                    class=\"trigger\"\n                                    id=${this.triggerId}\n                                    ?disabled=${this.disabled}\n                                    aria-label=${this.ariaLabel ?? nothing}\n                                    aria-haspopup=\"listbox\"\n                                    aria-expanded=${this.open ? 'true' : 'false'}\n                                    aria-controls=${this.listboxId}\n                                    @click=${this.togglePanel}\n                                >\n                                    <span class=\"value is-placeholder\">${this.placeholder}</span>\n                                </button>\n                            `}\n                        ${this.renderHostDecorationSlot('end')}\n                        <button\n                            type=\"button\"\n                            class=\"trigger trigger--icon\"\n                            part=\"trigger expand-button\"\n                            aria-label=\"Toggle options\"\n                            ?disabled=${this.disabled}\n                            @click=${this.togglePanel}\n                        >\n                            ${this.renderChevronIcon()}\n                        </button>\n                    </div>\n                `\n                : html`\n                    <button\n                        part=\"control\"\n                        type=\"button\"\n                        class=${classMap({\n                            control: true,\n                            'is-disabled': this.disabled,\n                        })}\n                        id=${this.triggerId}\n                        ?disabled=${this.disabled}\n                        aria-label=${this.ariaLabel ?? nothing}\n                        aria-haspopup=\"listbox\"\n                        aria-expanded=${this.open ? 'true' : 'false'}\n                        aria-controls=${this.listboxId}\n                        @click=${this.togglePanel}\n                    >\n                        ${this.renderHostDecorationSlot('start')}\n                        <span part=\"trigger-start\" class=\"trigger-start\"></span>\n                        <span\n                            class=${classMap({\n                                value: true,\n                                'is-placeholder': isPlaceholder,\n                            })}\n                        >${displayValue}</span>\n                        ${showClear\n                            ? html`\n                                <span\n                                    class=\"clear-button\"\n                                    part=\"clear-button\"\n                                    role=\"button\"\n                                    tabindex=\"-1\"\n                                    aria-label=\"Clear selection\"\n                                    @click=${this.handleClear}\n                                >\n                                    ×\n                                </span>\n                            `\n                            : nothing}\n                        ${this.renderHostDecorationSlot('end')}\n                        ${this.renderChevronIcon()}\n                    </button>\n                `}\n            <pk-popup\n                .anchor=${this.getPopupAnchor() ?? ''}\n                .placement=${this.placement}\n                .distance=${this.sideOffset}\n                .sync=${'width'}\n                flip\n                shift\n            >\n                <div\n                    part=\"panel\"\n                    class=${classMap({\n                        panel: true,\n                        'pk-popup-content': true,\n                        closing: this.closing,\n                    })}\n                    id=${this.listboxId}\n                    role=\"listbox\"\n                    aria-multiselectable=${this.multiple ? 'true' : 'false'}\n                    tabindex=\"-1\"\n                    ?hidden=${!this.open && !this.closing}\n                    data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n                    @slotchange=${this.syncOptions}\n                >\n                    <slot></slot>\n                </div>\n            </pk-popup>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-select': PkSelect;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-textarea-CYM2tK88.js → pk-textarea-Dhj1WFLH.js}

@@ -1,6 +1,6 @@
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.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";
@@ -338,4 +338,4 @@ PkTextarea = __decorate([customElement("pk-textarea")], PkTextarea);
 //#endregion
 export { PkTextarea as t };
 
-//# sourceMappingURL=pk-textarea-CYM2tK88.js.map
+//# sourceMappingURL=pk-textarea-Dhj1WFLH.js.map