npm - @verbb/plugin-kit-web - Versions diffs - 2.0.19 → 2.0.21 - Mend

@verbb/plugin-kit-web 2.0.19 → 2.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (165) hide show

package/dist/chunks/{pk-form-associated-element-CCQALRGB.js → pk-form-associated-element-GxX5lbnk.js} RENAMED Viewed

@@ -98,7 +98,7 @@ var PkFormAssociatedElement = class extends PkElement {
 	updated(changed) {
 		if (changed.has("customError")) this.setCustomValidity(this.customError ?? "");
 		if (changed.has("disabled")) this.setState("disabled", Boolean(this.disabled));
-		if (changed.has("value") || changed.has("disabled") || changed.has("required") || changed.has("name")) this.syncFormValue();
+		if (changed.has("value") || changed.has("checked") || changed.has("disabled") || changed.has("required") || changed.has("name")) this.syncFormValue();
 		this.updateValidity();
 		super.updated(changed);
 		this.syncHostAriaMirror();
@@ -269,4 +269,4 @@ __decorate([property({
 //#endregion
 export { CustomErrorValidator as n, PkInvalidEvent as r, PkFormAssociatedElement as t };
-//# sourceMappingURL=pk-form-associated-element-CCQALRGB.js.map
+//# sourceMappingURL=pk-form-associated-element-GxX5lbnk.js.map

package/dist/chunks/pk-form-associated-element-GxX5lbnk.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/dist/chunks/{pk-image-browser-DwiCFOIG.js → pk-image-browser-Bj8LhWfk.js} RENAMED Viewed

@@ -2,7 +2,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 "./pk-spinner-DweuYJ_Z.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 RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
@@ -848,8 +848,7 @@ var PkImageBrowser = class PkImageBrowser extends PkFormAssociatedElement {
 			this.highlightedIndex = -1;
 			return;
 		}
-		const selectedIdx = items.findIndex((item) => item.value === this.value);
-		this.highlightedIndex = selectedIdx >= 0 ? selectedIdx : 0;
+		this.highlightedIndex = items.findIndex((item) => item.value === this.value);
 	}
 	setHighlightedIndex(index) {
 		const items = this.flatVisibleItems();
@@ -1361,4 +1360,4 @@ PkImageBrowser = __decorate([customElement("pk-image-browser")], PkImageBrowser)
 //#endregion
 export { PkImageBrowser as t };
-//# sourceMappingURL=pk-image-browser-DwiCFOIG.js.map
+//# sourceMappingURL=pk-image-browser-Bj8LhWfk.js.map

package/dist/chunks/pk-image-browser-Bj8LhWfk.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-image-browser-Bj8LhWfk.js","names":[],"sources":["../../src/components/image-browser/pk-image-browser.styles.ts","../../src/components/image-browser/pk-image-browser.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { iconStyles } from '../../base/icon.styles.js';\nimport { popupContentAnimationStyles } from '../../styles/popup-content-animation.styles.js';\n\n/**\n * Presentational static image / icon browser.\n * Trigger chrome mirrors combobox popup-mode; panel grid mirrors Vizy icon picker.\n */\nexport const pkImageBrowserStyles = [\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 vertical-align: top;\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-image-browser-trigger-min-height: var(--pk-btn-height-default);\n --pk-image-browser-padding-block: 6px;\n --pk-image-browser-padding-inline: 10px;\n --pk-image-browser-font-size: var(--pk-font-size-base);\n --pk-image-browser-line-height: var(--pk-input-control-line-height, 1.25rem);\n --pk-image-browser-glyph-size: 1rem;\n --pk-image-browser-panel-width: 26.25rem;\n /* Hit target larger than the glyph so the select ring has breathing room. */\n --pk-image-browser-cell-min: 2.25rem;\n --pk-image-browser-glyph-tile: 1.375rem;\n --pk-image-browser-fill: var(--pk-color-slate-250);\n --pk-image-browser-fill-hover: var(--pk-color-slate-300);\n }\n\n /* Caption under each cell — wider tracks; glyph size stays put. */\n :host([label-mode='inline']) {\n --pk-image-browser-cell-min: 3.75rem;\n }\n\n :host([size='xs']) {\n --pk-image-browser-trigger-min-height: var(--pk-btn-height-xs);\n --pk-image-browser-padding-block: 2px;\n --pk-image-browser-padding-inline: 6px;\n --pk-image-browser-font-size: var(--pk-font-size-xs, 0.75rem);\n --pk-image-browser-glyph-size: 0.875rem;\n }\n\n :host([size='sm']) {\n --pk-image-browser-trigger-min-height: var(--pk-btn-height-sm);\n --pk-image-browser-padding-block: 4px;\n --pk-image-browser-padding-inline: 8px;\n --pk-image-browser-font-size: var(--pk-font-size-sm, 0.8125rem);\n --pk-image-browser-glyph-size: 0.875rem;\n }\n\n :host([size='lg']),\n :host([size='xl']) {\n --pk-image-browser-trigger-min-height: var(--pk-btn-height-lg);\n --pk-image-browser-padding-block: 8px;\n --pk-image-browser-padding-inline: 12px;\n --pk-image-browser-font-size: var(--pk-font-size-lg, 1rem);\n --pk-image-browser-glyph-size: 1.125rem;\n }\n\n /* Image mode — roomier photo tiles; captions still opt-in via label-mode=\"inline\". */\n :host([mode='image']) {\n --pk-image-browser-panel-width: 34rem;\n --pk-image-browser-cell-min: 7.5rem;\n }\n\n :host([mode='image'][label-mode='inline']) {\n /* Captions reclaim a little width; preview stays the hero. */\n --pk-image-browser-cell-min: 6.5rem;\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 .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n opacity: 0;\n pointer-events: none;\n }\n\n /* Combobox-style chrome: label + clear + chevron share one filled control.\n * 0.5rem gap keeps ellipsized filenames from kissing the clear glyph. */\n .control {\n display: inline-flex;\n align-items: stretch;\n gap: 0.5rem;\n min-width: 12.5rem;\n max-width: 100%;\n height: var(--pk-image-browser-trigger-min-height);\n min-height: var(--pk-image-browser-trigger-min-height);\n margin: 0;\n padding: 0 0 0 var(--pk-image-browser-padding-inline);\n border: 1px solid transparent;\n border-radius: var(--pk-input-border-radius, var(--pk-radius-lg));\n background: var(--pk-image-browser-fill);\n color: inherit;\n box-sizing: border-box;\n overflow: hidden;\n transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;\n }\n\n .control:hover:not(.is-disabled) {\n background: var(--pk-image-browser-fill-hover);\n }\n\n .control.is-open:not(.is-disabled) {\n background: var(--pk-image-browser-fill-hover);\n }\n\n .control:focus-within:not(.is-disabled) {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n background: var(--pk-color-white);\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-500, #f43f5e);\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 flex: 1 1 auto;\n min-width: 0;\n margin: 0;\n padding: var(--pk-image-browser-padding-block) 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n font-size: var(--pk-image-browser-font-size);\n font-weight: 400;\n line-height: var(--pk-image-browser-line-height);\n text-align: left;\n white-space: nowrap;\n cursor: pointer;\n outline: none;\n box-sizing: border-box;\n }\n\n .trigger:disabled {\n cursor: not-allowed;\n }\n\n .trigger-main {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n }\n\n .trigger-preview {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n width: var(--pk-image-browser-glyph-size);\n height: var(--pk-image-browser-glyph-size);\n overflow: hidden;\n }\n\n .trigger-preview svg,\n .trigger-preview img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .trigger-preview svg {\n fill: currentColor;\n }\n\n .trigger-label {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .trigger-label.is-placeholder {\n color: var(--pk-color-gray-500);\n }\n\n .clear-button,\n .expand-button {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n align-self: stretch;\n box-sizing: border-box;\n width: calc(0.75rem + 0.5rem);\n margin: 0;\n padding: 0;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--pk-color-gray-600);\n cursor: pointer;\n outline: none;\n }\n\n .expand-button {\n width: calc(0.75rem + 0.5rem + var(--pk-image-browser-padding-inline));\n padding-inline-end: var(--pk-image-browser-padding-inline);\n }\n\n .clear-button:hover:not(:disabled),\n .expand-button:hover:not(:disabled) {\n color: var(--pk-color-gray-800);\n }\n\n .clear-button:disabled,\n .expand-button:disabled {\n cursor: not-allowed;\n }\n\n .clear-button-icon,\n .expand-button-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n line-height: 0;\n pointer-events: none;\n }\n\n .clear-button-icon svg,\n .expand-button-icon svg {\n display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .panel {\n position: relative;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n width: var(--pk-image-browser-panel-width);\n max-width: min(100vw - 1.5rem, var(--pk-image-browser-panel-width));\n max-height: min(28.75rem, 60vh);\n border-radius: var(--pk-radius-lg);\n background: var(--pk-color-white);\n box-shadow:\n 0 0 0 1px rgba(31, 41, 51, 0.1),\n 0 5px 20px rgba(31, 41, 51, 0.25);\n overflow: hidden;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n .panel-search {\n flex: none;\n /* Same inline inset as panel-body so search + grid share one vertical edge. */\n padding: 0.625rem 0.625rem 0.5rem;\n border-bottom: 1px solid var(--pk-color-gray-150, rgba(51, 64, 77, 0.1));\n }\n\n .panel-input {\n display: block;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n padding: 0.375rem 0.625rem;\n border: 1px solid var(--pk-color-gray-200, #d4dce4);\n border-radius: var(--pk-input-border-radius, var(--pk-radius-md));\n background: var(--pk-color-white);\n color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-font-size-sm, 0.8125rem);\n line-height: 1.25rem;\n outline: none;\n }\n\n .panel-input:focus {\n border-color: var(--pk-color-sky-600);\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .panel-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n /* Match search field inset so the grid lines up with the input. */\n padding: 0.5rem 0.625rem 0.625rem;\n }\n\n :host([mode='image']) .panel-body {\n padding: 0.5rem 0.625rem 0.625rem;\n }\n\n .group + .group {\n margin-top: 0.875rem;\n }\n\n .group-heading {\n display: flex;\n justify-content: space-between;\n gap: 0.5rem;\n margin: 0 0 0.375rem;\n color: var(--pk-color-gray-500);\n font-size: 0.6875rem;\n font-weight: 600;\n letter-spacing: 0.04em;\n line-height: 1.25;\n text-transform: uppercase;\n }\n\n .group-heading-count {\n font-weight: 400;\n letter-spacing: 0;\n text-transform: none;\n }\n\n /* Fixed column width (not 1fr) so sparse catalogs stay dense instead of stretching. */\n .grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, var(--pk-image-browser-cell-min));\n gap: 0.375rem;\n justify-content: start;\n /* Don’t stretch short single-line cells to match taller wrapped neighbors in the row. */\n align-items: start;\n }\n\n :host([mode='image']) .grid {\n grid-template-columns: repeat(auto-fill, minmax(var(--pk-image-browser-cell-min), 1fr));\n gap: 0.375rem;\n }\n\n .option {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 0;\n width: var(--pk-image-browser-cell-min);\n height: var(--pk-image-browser-cell-min);\n margin: 0;\n /* Square hit target; glyph is smaller so the ring doesn’t clip tips. */\n padding: 0;\n border: 1px solid transparent;\n border-radius: var(--pk-radius-sm);\n background: none;\n color: inherit;\n cursor: pointer;\n outline: none;\n overflow: hidden;\n }\n\n /* With captions, height hugs glyph + label instead of a fixed square. */\n :host([label-mode='inline']) .option {\n justify-content: flex-start;\n gap: 0.125rem;\n height: auto;\n /* Keep glyph + caption inside the inset highlight ring. */\n padding: 0.25rem 0.125rem 0.3125rem;\n }\n\n :host([mode='image']) .option {\n position: relative;\n width: auto;\n height: auto;\n min-height: 0;\n gap: 0;\n padding: 0;\n overflow: hidden;\n border-radius: var(--pk-radius-md);\n }\n\n :host([mode='image'][label-mode='inline']) .option {\n gap: 0.375rem;\n padding: 0.375rem 0.375rem 0.5rem;\n overflow: visible;\n }\n\n .option:hover,\n .option:focus-visible,\n .option.is-highlighted {\n background: var(--pk-color-gray-050, #f3f7fc);\n }\n\n /* Selected is the durable chrome; highlight/hover share the same ring for keyboard parity. */\n .option.is-selected,\n .option.is-highlighted,\n .option:hover {\n box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n }\n\n /*\n * Flush photo tiles paint over inset box-shadow (descendants sit above it).\n * Overlay the same ring so tooltip/none match inline chrome.\n */\n :host([mode='image']) .option.is-selected,\n :host([mode='image']) .option.is-highlighted,\n :host([mode='image']) .option:hover {\n box-shadow: none;\n }\n\n :host([mode='image']) .option.is-selected::after,\n :host([mode='image']) .option.is-highlighted::after,\n :host([mode='image']) .option:hover::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 1;\n border-radius: inherit;\n box-shadow: inset 0 0 0 2px var(--pk-color-sky-600);\n pointer-events: none;\n }\n\n .option:focus-visible {\n outline: none;\n }\n\n .option-preview {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n width: var(--pk-image-browser-glyph-tile);\n height: var(--pk-image-browser-glyph-tile);\n margin: 0;\n overflow: hidden;\n }\n\n :host([mode='image']) .option-preview {\n width: 100%;\n height: auto;\n aspect-ratio: 4 / 3;\n margin: 0;\n border-radius: inherit;\n }\n\n .option-preview svg,\n .option-preview img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n /* Photo tiles crop to fill — previews, not faithful aspect viewers. */\n :host([mode='image']) .option-preview svg,\n :host([mode='image']) .option-preview img {\n object-fit: cover;\n }\n\n .option-preview svg {\n fill: currentColor;\n }\n\n .option-label {\n display: -webkit-box;\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n padding-inline: 2px;\n overflow: hidden;\n color: var(--pk-color-gray-700);\n font-size: 0.625rem;\n line-height: 0.75rem;\n text-align: center;\n overflow-wrap: anywhere;\n word-break: break-word;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 3;\n line-clamp: 3;\n }\n\n :host([mode='image']) .option-label {\n display: block;\n color: var(--pk-color-gray-600);\n font-size: 0.6875rem;\n line-height: 1.2;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-wrap: normal;\n word-break: normal;\n -webkit-line-clamp: unset;\n line-clamp: unset;\n }\n\n .notice {\n margin: 0.375rem 0;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-font-size-sm, 0.8125rem);\n }\n\n .notice.is-error {\n color: var(--pk-color-rose-600, #e11d48);\n }\n\n /* Host-driven catalog warm — spinner only (no loading copy). */\n .loading {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-height: 6rem;\n padding: 1.25rem 0.75rem;\n color: var(--pk-color-gray-500);\n }\n\n .panel-input:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n /* Host is inert layout chrome; the floating tip lives in pk-popup. */\n .option-tooltip {\n position: absolute;\n width: 0;\n height: 0;\n margin: 0;\n padding: 0;\n overflow: hidden;\n pointer-events: none;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { chevronDown, xmark, renderIconHtml } from '../../icons/index.js';\nimport { LiveRegion, uniqueId } from '../../a11y/focus.js';\nimport { isTopDismissible, registerDismissible, unregisterDismissible } from '../../a11y/dismissible-stack.js';\nimport { scrollIntoView } from '../../a11y/scroll-lock.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.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 { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.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 '../spinner/pk-spinner.js';\nimport '../tooltip/pk-tooltip.js';\nimport type { PkTooltip } from '../tooltip/pk-tooltip.js';\nimport { pkImageBrowserStyles } from './pk-image-browser.styles.js';\n\nexport type PkImageBrowserSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/** Grid preview kind — compact glyphs vs larger photo tiles. */\nexport type PkImageBrowserMode = 'icon' | 'image';\n\n/**\n * How option names appear in the grid.\n * - `tooltip` (default) — shared `pk-tooltip` on hover; `aria-label` always\n * - `inline` — caption under each cell\n * - `none` — `aria-label` only (no tooltip, no caption)\n *\n * Named `labelMode` (not `labels`) to avoid clashing with the native\n * form-associated `HTMLElement.labels` NodeList getter.\n */\nexport type PkImageBrowserLabelMode = 'tooltip' | 'inline' | 'none';\n\nexport type PkImageBrowserWidth = 'auto' | 'full';\n\n/**\n * One browsable entry. Plugins own filtering / filesystem scanning and pass\n * already-resolved preview URLs or inline SVG markup.\n */\nexport type PkImageBrowserItem = {\n value: string;\n label: string;\n /** Public URL for `<img>`, or inline `<svg>…</svg>` markup. */\n preview?: string;\n};\n\nexport type PkImageBrowserGroup = {\n name: string;\n items: PkImageBrowserItem[];\n};\n\nconst CHEVRON_ICON = renderIconHtml(chevronDown);\nconst XMARK_ICON = renderIconHtml(xmark);\n\n/** How many matched items per group are painted before scroll reveals more. */\nconst DEFAULT_PAGE_SIZE = 96;\n\nfunction isInlineSvg(preview: string): boolean {\n return /^\\s*<svg[\\s>]/i.test(preview);\n}\n\n/**\n * Image browser — presentational picker for static filesystem icons/images.\n *\n * Plugins supply `items` / `groups` (and optional `selected-label` /\n * `selected-preview` for the closed trigger before the catalog is ready). The\n * kit does not scan disks or filter extensions.\n *\n * Keyboard: trigger opens with Enter / Space / ArrowDown; search owns focus with\n * `aria-activedescendant`; arrows move the highlight (2D in the grid); Enter\n * selects; Escape closes.\n *\n * @csspart root - Filled control surface (trigger + clear + chevron)\n * @csspart trigger - Opens the panel (preview + label)\n * @csspart clear-button - Clear selection button (inside the control)\n * @csspart panel - Popup panel shell\n * @csspart panel-search - Search field container\n * @csspart panel-input - Search input\n * @csspart panel-body - Scrollable results region\n * @csspart loading - Catalog-loading status region (spinner)\n * @csspart option - Grid cell button\n *\n * @dependency pk-popup - Positioned panel host.\n * @dependency pk-spinner - Shown in the panel while `loading` is set.\n * @dependency pk-tooltip - Hover label when `label-mode=\"tooltip\"`.\n */\n@customElement('pk-image-browser')\nexport class PkImageBrowser extends PkFormAssociatedElement {\n static override styles = pkImageBrowserStyles;\n\n static override get validators() {\n return [...super.validators, MirrorValidator(), RequiredValidator()];\n }\n\n override assumeInteractionOn = ['pk-change'];\n\n @property({ reflect: true })\n size: PkImageBrowserSize = 'default';\n\n /** `icon` = compact glyph tiles; `image` = larger photo tiles. */\n @property({ reflect: true })\n mode: PkImageBrowserMode = 'icon';\n\n @property({ reflect: true })\n width: PkImageBrowserWidth = 'auto';\n\n /**\n * How option names appear in the grid: `tooltip` (default), `inline` under\n * each cell, or `none` (`aria-label` only).\n */\n @property({ reflect: true, attribute: 'label-mode' })\n labelMode: PkImageBrowserLabelMode = 'tooltip';\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n @property()\n value = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n placeholder = 'Choose…';\n\n @property({ attribute: 'search-placeholder' })\n searchPlaceholder = 'Search…';\n\n @property({ attribute: 'empty-message' })\n emptyMessage = 'No items match your query.';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n /**\n * Host-driven catalog warm / refresh. Shows a centered `pk-spinner` in the\n * panel (no loading copy). Prefer this over inferring from empty `items` /\n * `groups` — empty can also mean a filter miss or a genuinely empty catalog.\n */\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /** Show a clear control when a value is selected. */\n @property({ type: Boolean, reflect: true, attribute: 'with-clear' })\n withClear = true;\n\n @property({ attribute: false })\n items: PkImageBrowserItem[] = [];\n\n @property({ attribute: false })\n groups: PkImageBrowserGroup[] = [];\n\n /**\n * Closed-trigger label when `value` is set but not yet found in `items` /\n * `groups` (e.g. catalog still loading).\n */\n @property({ attribute: 'selected-label' })\n selectedLabel = '';\n\n /** Closed-trigger preview for the same pre-catalog case as `selected-label`. */\n @property({ attribute: 'selected-preview' })\n selectedPreview = '';\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n @property({ type: Number, attribute: 'side-offset' })\n sideOffset = 4;\n\n /** Items drawn per group before scroll reveals the next page. */\n @property({ type: Number, attribute: 'page-size' })\n pageSize = DEFAULT_PAGE_SIZE;\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @state()\n private query = '';\n\n /** Render budget shared across groups — raised by scrolling, reset on query/open. */\n @state()\n private limit = DEFAULT_PAGE_SIZE;\n\n @state()\n private closing = false;\n\n @state()\n private panelAnimated = false;\n\n /** Flat index into `flatVisibleItems()` for aria-activedescendant navigation. */\n @state()\n private highlightedIndex = -1;\n\n /** Shared hover tooltip target when `labelMode=\"tooltip\"`. */\n @state()\n private tooltipFor = '';\n\n @state()\n private tooltipContent = '';\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n @query('.trigger')\n private triggerElement!: HTMLButtonElement;\n\n @query('.control')\n private controlElement!: HTMLDivElement;\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.panel')\n private panelElement!: HTMLDivElement;\n\n @query('.panel-input')\n private searchInput!: HTMLInputElement | null;\n\n @query('.panel-body')\n private panelBody!: HTMLDivElement | null;\n\n @query('.option-tooltip')\n private optionTooltip!: PkTooltip | null;\n\n private readonly listboxId = uniqueId('pk-image-browser-listbox');\n private readonly searchId = uniqueId('pk-image-browser-search');\n private closeTimer: number | null = null;\n private tooltipOpenTimer: number | null = null;\n private liveRegion: LiveRegion | null = null;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.limit = this.normalizedPageSize();\n }\n\n override disconnectedCallback(): void {\n this.teardownDismissListeners();\n this.clearCloseTimer();\n this.clearTooltipOpenTimer();\n this.liveRegion?.destroy();\n this.liveRegion = null;\n super.disconnectedCallback();\n }\n\n protected override willUpdate(changed: PropertyValues): void {\n if (changed.has('pageSize') && !this.open) {\n this.limit = this.normalizedPageSize();\n }\n\n super.willUpdate(changed);\n }\n\n override updated(changed: PropertyValues): void {\n super.updated(changed);\n\n if (changed.has('open')) {\n if (this.open) {\n this.attachDismissListeners();\n } else if (!this.closing) {\n this.teardownDismissListeners();\n }\n }\n\n if ((changed.has('open') || changed.has('closing')) && (this.open || this.closing)) {\n void this.syncPanelPlacement();\n }\n\n if (this.open && (changed.has('highlightedIndex') || changed.has('query') || changed.has('limit'))) {\n this.scrollHighlightedIntoView();\n }\n\n // Catalog arrived while the panel is open — restore the selected cell when available.\n if (this.open && changed.has('loading') && !this.loading) {\n this.resetHighlightForOpenCatalog();\n }\n }\n\n protected override get validationTarget(): HTMLElement {\n return this.triggerElement ?? this;\n }\n\n protected override syncFormValue(): void {\n this.setFormValue(this.value, this.value);\n }\n\n protected override resetToDefaultValue(): void {\n this.value = this.defaultValue;\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 async show(): Promise<void> {\n if (this.open || this.closing || this.disabled || this.readonly) {\n return;\n }\n\n await this.openPanel();\n }\n\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 optionId(index: number): string {\n return `${this.listboxId}-opt-${index}`;\n }\n\n private groupHeadingId(groupIndex: number): string {\n return `${this.listboxId}-group-${groupIndex}`;\n }\n\n private normalizedPageSize(): number {\n return this.pageSize > 0 ? this.pageSize : DEFAULT_PAGE_SIZE;\n }\n\n private resolveGroups(): PkImageBrowserGroup[] {\n if (this.groups.length > 0) {\n return this.groups;\n }\n\n if (this.items.length > 0) {\n return [{ name: '', items: this.items }];\n }\n\n return [];\n }\n\n private findItem(value: string): PkImageBrowserItem | null {\n if (value === '') {\n return null;\n }\n\n for (const group of this.resolveGroups()) {\n const found = group.items.find((item) => item.value === value);\n if (found) {\n return found;\n }\n }\n\n return null;\n }\n\n private selectedItem(): PkImageBrowserItem | null {\n return this.findItem(this.value);\n }\n\n private triggerDisplay(): { label: string; preview?: string; isPlaceholder: boolean } {\n const selected = this.selectedItem();\n if (selected) {\n return {\n label: selected.label,\n preview: selected.preview,\n isPlaceholder: false,\n };\n }\n\n if (this.value !== '') {\n return {\n label: this.selectedLabel || this.value,\n preview: this.selectedPreview || undefined,\n isPlaceholder: false,\n };\n }\n\n return {\n label: this.placeholder,\n isPlaceholder: true,\n };\n }\n\n /** Groups matching the query, each truncated to the current render budget. */\n private visibleGroups(): Array<PkImageBrowserGroup & { total: number }> {\n const query = this.query.trim().toLowerCase();\n\n return this.resolveGroups().reduce<Array<PkImageBrowserGroup & { total: number }>>((acc, group) => {\n const matched = query === ''\n ? group.items\n : group.items.filter((item) => (\n item.label.toLowerCase().includes(query)\n || item.value.toLowerCase().includes(query)\n ));\n\n if (matched.length === 0) {\n return acc;\n }\n\n acc.push({\n name: group.name,\n total: matched.length,\n items: matched.slice(0, this.limit),\n });\n return acc;\n }, []);\n }\n\n private flatVisibleItems(): PkImageBrowserItem[] {\n return this.visibleGroups().flatMap((group) => group.items);\n }\n\n private isTruncated(): boolean {\n return this.visibleGroups().some((group) => group.items.length < group.total);\n }\n\n private activeDescendantId(): string | null {\n if (!this.open || this.highlightedIndex < 0) {\n return null;\n }\n\n return this.optionId(this.highlightedIndex);\n }\n\n private triggerAccessibleName(): string {\n if (this.ariaLabel) {\n const display = this.triggerDisplay();\n if (display.isPlaceholder) {\n return this.ariaLabel;\n }\n return `${this.ariaLabel}, ${display.label}`;\n }\n\n return this.triggerDisplay().label;\n }\n\n private announceResults(): void {\n // Skip while the host is still warming — empty would read as \"no matches\".\n if (this.loading) {\n return;\n }\n\n const items = this.flatVisibleItems();\n const filter = this.query.trim();\n\n if (!filter) {\n return;\n }\n\n if (!this.liveRegion) {\n this.liveRegion = new LiveRegion('polite');\n }\n\n this.liveRegion.announce(\n items.length === 0\n ? this.emptyMessage\n : `${items.length} ${items.length === 1 ? 'result' : 'results'} available`,\n );\n }\n\n private resetHighlightForOpenCatalog(): void {\n const items = this.flatVisibleItems();\n if (items.length === 0) {\n this.highlightedIndex = -1;\n return;\n }\n\n this.highlightedIndex = items.findIndex((item) => item.value === this.value);\n }\n\n private setHighlightedIndex(index: number): void {\n const items = this.flatVisibleItems();\n if (items.length === 0) {\n this.highlightedIndex = -1;\n return;\n }\n\n const next = Math.max(0, Math.min(index, items.length - 1));\n this.highlightedIndex = next;\n\n // Navigating near the end of a truncated catalog should reveal more, same as scroll.\n if (next >= items.length - 4 && this.isTruncated()) {\n this.limit += this.normalizedPageSize();\n }\n }\n\n private scrollHighlightedIntoView(): void {\n if (this.highlightedIndex < 0 || !this.panelBody) {\n return;\n }\n\n const option = this.renderRoot.querySelector<HTMLElement>(\n `#${CSS.escape(this.optionId(this.highlightedIndex))}`,\n );\n if (!option) {\n return;\n }\n\n scrollIntoView(option, this.panelBody, 'vertical', 'auto');\n }\n\n /** Column count of the CSS grid that owns the highlighted option (for 2D arrows). */\n private columnCountNear(index: number): number {\n const option = this.renderRoot.querySelector<HTMLElement>(\n `#${CSS.escape(this.optionId(index))}`,\n );\n const grid = option?.closest('.grid');\n if (!grid) {\n return 1;\n }\n\n const options = [...grid.querySelectorAll<HTMLElement>('.option')];\n if (options.length === 0) {\n return 1;\n }\n\n const firstTop = options[0]!.offsetTop;\n let cols = 0;\n for (const candidate of options) {\n if (candidate.offsetTop !== firstTop) {\n break;\n }\n cols += 1;\n }\n\n return Math.max(1, cols);\n }\n\n private moveHighlight(key: string): void {\n const items = this.flatVisibleItems();\n if (items.length === 0) {\n this.highlightedIndex = -1;\n return;\n }\n\n let next = this.highlightedIndex;\n\n if (next < 0) {\n next = (key === 'ArrowUp' || key === 'ArrowLeft' || key === 'End')\n ? items.length - 1\n : 0;\n this.setHighlightedIndex(next);\n return;\n }\n\n const cols = this.columnCountNear(next);\n\n switch (key) {\n case 'ArrowRight':\n next = Math.min(next + 1, items.length - 1);\n break;\n case 'ArrowLeft':\n next = Math.max(next - 1, 0);\n break;\n case 'ArrowDown':\n next = Math.min(next + cols, items.length - 1);\n break;\n case 'ArrowUp':\n next = Math.max(next - cols, 0);\n break;\n case 'Home':\n next = 0;\n break;\n case 'End':\n next = items.length - 1;\n break;\n default:\n return;\n }\n\n this.setHighlightedIndex(next);\n }\n\n private emitChange(next: string): void {\n this.value = next;\n this.syncFormValue();\n this.updateValidity();\n\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: next },\n bubbles: true,\n composed: true,\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 selectValue(next: string): void {\n if (this.disabled || this.readonly) {\n return;\n }\n\n const previous = this.value;\n void this.closePanel('api');\n this.query = '';\n this.limit = this.normalizedPageSize();\n this.highlightedIndex = -1;\n\n // Re-clicking the active option clears it (same as the trigger clear control).\n if (previous === next) {\n if (this.withClear && previous !== '') {\n this.emitChange('');\n this.dispatchEvent(new PkClearEvent());\n }\n return;\n }\n\n this.emitChange(next);\n }\n\n private handleClear = (event: Event): void => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.disabled || this.readonly || this.value === '') {\n return;\n }\n\n this.emitChange('');\n this.dispatchEvent(new PkClearEvent());\n this.triggerElement?.focus({ preventScroll: true });\n };\n\n private togglePanel = (event?: Event): void => {\n event?.preventDefault();\n event?.stopPropagation();\n\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (this.open || this.closing) {\n void this.closePanel('api');\n } else {\n void this.openPanel();\n }\n };\n\n private handleTriggerKeyDown = (event: KeyboardEvent): void => {\n if (this.disabled || this.readonly) {\n return;\n }\n\n if (\n event.key === 'ArrowDown'\n || event.key === 'ArrowUp'\n || event.key === 'Enter'\n || event.key === ' '\n ) {\n event.preventDefault();\n if (!this.open && !this.closing) {\n void this.openPanel();\n }\n }\n };\n\n private async openPanel(): Promise<void> {\n if (this.open || this.closing || this.disabled || this.readonly) {\n return;\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.query = '';\n this.limit = this.normalizedPageSize();\n this.open = true;\n this.resetHighlightForOpenCatalog();\n\n await this.updateComplete;\n await this.syncPanelPlacement();\n this.panelAnimated = true;\n this.dispatchEvent(new PkAfterShowEvent());\n await this.focusSearchWhenReady();\n this.scrollHighlightedIntoView();\n }\n\n private async closePanel(source: PkOverlaySource): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n this.dispatchEvent(hideEvent);\n if (hideEvent.defaultPrevented) {\n return;\n }\n\n this.closing = true;\n this.open = false;\n this.highlightedIndex = -1;\n this.clearOptionTooltip();\n this.teardownDismissListeners();\n this.triggerElement?.focus({ preventScroll: true });\n\n this.clearCloseTimer();\n this.closeTimer = window.setTimeout(() => {\n this.closing = false;\n this.panelAnimated = false;\n this.query = '';\n this.limit = this.normalizedPageSize();\n this.closeTimer = null;\n this.dispatchEvent(new PkAfterHideEvent());\n }, 100);\n }\n\n private clearCloseTimer(): void {\n if (this.closeTimer != null) {\n window.clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private async syncPanelPlacement(): Promise<void> {\n if (!this.popupElement || !this.panelElement) {\n return;\n }\n\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n private attachDismissListeners(): void {\n registerDismissible(this);\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private teardownDismissListeners(): void {\n unregisterDismissible(this);\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.open || this.closing || !isTopDismissible(this)) {\n return;\n }\n\n if (isPointerInsideOverlay(event, {\n host: this,\n anchor: this.controlElement ?? this.triggerElement,\n panel: this.panelElement,\n })) {\n return;\n }\n\n void this.closePanel('pointer-dismiss');\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open || this.closing || !isTopDismissible(this)) {\n return;\n }\n\n if (event.key === 'Escape') {\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n }\n };\n\n private handleSearchInput = (event: Event): void => {\n if (this.loading) {\n return;\n }\n\n this.query = (event.target as HTMLInputElement).value;\n // New query = new set; don't keep a tall scroll budget from the previous browse.\n this.limit = this.normalizedPageSize();\n this.resetHighlightForOpenCatalog();\n this.announceResults();\n };\n\n private handleSearchKeyDown = (event: KeyboardEvent): void => {\n if (!this.open || this.closing || this.loading) {\n return;\n }\n\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowUp':\n case 'ArrowLeft':\n case 'ArrowRight':\n case 'Home':\n case 'End':\n event.preventDefault();\n event.stopPropagation();\n this.moveHighlight(event.key);\n return;\n case 'Enter': {\n event.preventDefault();\n event.stopPropagation();\n const items = this.flatVisibleItems();\n const item = items[this.highlightedIndex];\n if (item) {\n this.selectValue(item.value);\n }\n return;\n }\n default:\n break;\n }\n };\n\n private handleResultsScroll = (): void => {\n // Tip can trail a scrolled-away cell; drop it and let hover re-open.\n this.clearOptionTooltip();\n\n const results = this.panelBody;\n if (!results || !this.isTruncated()) {\n return;\n }\n\n if (results.scrollTop + results.clientHeight < results.scrollHeight - 200) {\n return;\n }\n\n const anchor = results.scrollTop;\n this.limit += this.normalizedPageSize();\n void this.updateComplete.then(() => {\n if (this.panelBody) {\n this.panelBody.scrollTop = anchor;\n }\n });\n };\n\n private async focusSearchWhenReady(): Promise<void> {\n const started = performance.now();\n while (this.open && performance.now() - started < 2000) {\n const input = this.searchInput;\n if (input && getComputedStyle(input).visibility !== 'hidden') {\n input.focus({ preventScroll: true });\n if (document.activeElement === input) {\n return;\n }\n }\n await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));\n }\n }\n\n private renderPreview(preview: string | undefined, className: string) {\n if (!preview) {\n return nothing;\n }\n\n if (isInlineSvg(preview)) {\n return html`<span class=${className} aria-hidden=\"true\">${unsafeSVG(preview)}</span>`;\n }\n\n return html`<img class=${className} src=${preview} alt=\"\" />`;\n }\n\n private usesInlineLabels(): boolean {\n return this.labelMode === 'inline';\n }\n\n private usesTooltipLabels(): boolean {\n return this.labelMode === 'tooltip';\n }\n\n /** Hover caption via one shared tooltip — avoids N×pk-tooltip in large catalogs. */\n private showOptionTooltip(optionId: string, label: string): void {\n if (!this.usesTooltipLabels()) {\n return;\n }\n\n // Already tracking a cell → re-anchor immediately; first hover waits so scans don’t flash.\n const alreadyTracking = this.tooltipFor !== '';\n this.tooltipFor = optionId;\n this.tooltipContent = label;\n this.clearTooltipOpenTimer();\n\n const openNow = (): void => {\n this.tooltipOpenTimer = null;\n void this.updateComplete.then(() => {\n void this.optionTooltip?.show();\n });\n };\n\n if (alreadyTracking) {\n openNow();\n return;\n }\n\n this.tooltipOpenTimer = window.setTimeout(openNow, 280);\n }\n\n private clearOptionTooltip(): void {\n this.clearTooltipOpenTimer();\n this.tooltipFor = '';\n this.tooltipContent = '';\n void this.optionTooltip?.hide();\n }\n\n private clearTooltipOpenTimer(): void {\n if (this.tooltipOpenTimer != null) {\n window.clearTimeout(this.tooltipOpenTimer);\n this.tooltipOpenTimer = null;\n }\n }\n\n private handleOptionPointerEnter(index: number, label: string): void {\n this.highlightedIndex = index;\n this.showOptionTooltip(this.optionId(index), label);\n }\n\n private handleOptionPointerLeave = (event: MouseEvent): void => {\n const next = event.relatedTarget;\n const movingToNeighbor = next instanceof Node\n && this.panelBody?.contains(next)\n && Boolean(\n next instanceof Element\n ? next.closest('.option')\n : next.parentElement?.closest('.option'),\n );\n\n if (movingToNeighbor) {\n return;\n }\n\n // Leave the grid — drop sticky hover chrome back onto the selected cell (or none).\n this.resetHighlightToSelected();\n this.clearOptionTooltip();\n };\n\n private resetHighlightToSelected(): void {\n const items = this.flatVisibleItems();\n if (items.length === 0) {\n this.highlightedIndex = -1;\n return;\n }\n\n const selectedIdx = items.findIndex((item) => item.value === this.value);\n this.highlightedIndex = selectedIdx;\n }\n\n private renderTriggerContents() {\n const display = this.triggerDisplay();\n\n return html`\n <span class=\"trigger-main\">\n ${this.renderPreview(display.preview, 'trigger-preview')}\n <span\n class=${classMap({\n 'trigger-label': true,\n 'is-placeholder': display.isPlaceholder,\n })}\n aria-hidden=\"true\"\n >${display.label}</span>\n </span>\n `;\n }\n\n private renderResults() {\n if (this.loading) {\n return html`\n <div\n id=${this.listboxId}\n role=\"listbox\"\n aria-label=${this.ariaLabel || 'Options'}\n aria-busy=\"true\"\n >\n <div part=\"loading\" class=\"loading\" role=\"status\" aria-label=\"Loading\">\n <pk-spinner size=\"sm\" centered></pk-spinner>\n </div>\n </div>\n `;\n }\n\n const groups = this.visibleGroups();\n\n if (groups.length === 0) {\n return html`\n <div\n id=${this.listboxId}\n role=\"listbox\"\n aria-label=${this.ariaLabel || 'Options'}\n >\n <p class=\"notice\" part=\"empty\" role=\"status\">${this.emptyMessage}</p>\n </div>\n `;\n }\n\n let flatIndex = 0;\n\n return html`\n <div\n id=${this.listboxId}\n role=\"listbox\"\n aria-label=${this.ariaLabel || 'Options'}\n >\n ${groups.map((group, groupIndex) => {\n const headingId = this.groupHeadingId(groupIndex);\n const groupStart = flatIndex;\n\n const options = group.items.map((item, itemIndex) => {\n const index = groupStart + itemIndex;\n flatIndex = index + 1;\n const selected = item.value === this.value;\n const highlighted = index === this.highlightedIndex;\n\n return html`\n <button\n type=\"button\"\n part=\"option\"\n id=${this.optionId(index)}\n class=${classMap({\n option: true,\n 'is-highlighted': highlighted,\n 'is-selected': selected,\n })}\n role=\"option\"\n tabindex=\"-1\"\n aria-label=${item.label}\n aria-selected=${selected ? 'true' : 'false'}\n @click=${() => this.selectValue(item.value)}\n @mouseenter=${() => this.handleOptionPointerEnter(index, item.label)}\n @mouseleave=${this.handleOptionPointerLeave}\n >\n ${this.renderPreview(item.preview, 'option-preview')}\n ${this.usesInlineLabels()\n ? html`<span class=\"option-label\" aria-hidden=\"true\">${item.label}</span>`\n : nothing}\n </button>\n `;\n });\n\n return html`\n <div\n class=\"group\"\n role=${group.name ? 'group' : nothing}\n aria-labelledby=${group.name ? headingId : nothing}\n >\n ${group.name\n ? html`\n <h6 class=\"group-heading\" id=${headingId}>\n <span>${group.name}</span>\n ${group.items.length < group.total\n ? html`\n <span class=\"group-heading-count\">\n Showing ${group.items.length} of ${group.total}\n </span>\n `\n : nothing}\n </h6>\n `\n : nothing}\n <div class=\"grid\">\n ${options}\n </div>\n </div>\n `;\n })}\n </div>\n `;\n }\n\n override render() {\n const showClear = this.withClear && this.value !== '' && !this.disabled && !this.readonly;\n const panelActive = this.open || this.closing;\n const activeDescendant = this.activeDescendantId();\n\n return html`\n <input\n class=\"value-input\"\n part=\"value-input\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n .value=${this.value}\n ?required=${this.required}\n @input=${() => this.updateValidity()}\n />\n <div\n part=\"root\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled || this.readonly,\n 'is-open': this.open,\n })}\n >\n <button\n type=\"button\"\n part=\"trigger\"\n class=\"trigger\"\n ?disabled=${this.disabled || this.readonly}\n aria-label=${this.triggerAccessibleName()}\n aria-haspopup=\"listbox\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n @click=${this.togglePanel}\n @keydown=${this.handleTriggerKeyDown}\n >\n ${this.renderTriggerContents()}\n </button>\n ${showClear\n ? html`\n <button\n type=\"button\"\n part=\"clear-button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n ?disabled=${this.disabled}\n @click=${this.handleClear}\n >\n <span class=\"clear-button-icon\" aria-hidden=\"true\">${unsafeSVG(XMARK_ICON)}</span>\n </button>\n `\n : nothing}\n <button\n type=\"button\"\n class=\"expand-button\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n ?disabled=${this.disabled || this.readonly}\n @click=${this.togglePanel}\n >\n <span class=\"expand-button-icon\">${unsafeSVG(CHEVRON_ICON)}</span>\n </button>\n </div>\n <pk-popup\n .active=${panelActive}\n .anchor=${this.controlElement ?? this.triggerElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\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 tabindex=\"-1\"\n ?hidden=${!panelActive}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n >\n <div part=\"panel-search\" class=\"panel-search\">\n <input\n part=\"panel-input\"\n class=\"panel-input\"\n id=${this.searchId}\n type=\"text\"\n role=\"combobox\"\n .value=${this.query}\n placeholder=${this.searchPlaceholder}\n aria-label=${this.searchPlaceholder}\n aria-autocomplete=\"list\"\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n aria-activedescendant=${activeDescendant ?? nothing}\n ?disabled=${this.loading}\n @input=${this.handleSearchInput}\n @keydown=${this.handleSearchKeyDown}\n />\n </div>\n <div\n part=\"panel-body\"\n class=\"panel-body\"\n @scroll=${this.handleResultsScroll}\n >\n ${this.renderResults()}\n </div>\n ${this.usesTooltipLabels() && panelActive\n ? html`\n <pk-tooltip\n class=\"option-tooltip\"\n for=${this.tooltipFor}\n content=${this.tooltipContent}\n placement=\"top\"\n trigger=\"manual\"\n ></pk-tooltip>\n `\n : nothing}\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-image-browser': PkImageBrowser;\n }\n}\n"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
 import { n as syncStandaloneControlAria } from "./control-aria-B2QMq4ji.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-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";
@@ -765,4 +765,4 @@ PkInput = __decorate([customElement("pk-input")], PkInput);
 //#endregion
 export { PkInput as t };
-//# sourceMappingURL=pk-input-CF_icEtR.js.map
+//# sourceMappingURL=pk-input-BywmK5n2.js.map

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

	@@ -1 +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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"}
1	+ {"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} RENAMED Viewed

@@ -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} RENAMED Viewed

	@@ -1 +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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"}
1	+ {"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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"}