npm - @verbb/plugin-kit-web - Versions diffs - 2.0.15 → 2.0.17 - Mend

@verbb/plugin-kit-web 2.0.15 → 2.0.17

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 (386) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-image-browser-DwiCFOIG.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 — seat highlight on selection / first cell.\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 const selectedIdx = items.findIndex((item) => item.value === this.value);\n this.highlightedIndex = selectedIdx >= 0 ? selectedIdx : 0;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAa,uBAAuB,CAChC,6BACA,GAAG;MACD,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+hBhB;;;ACxeD,IAAM,eAAe,eAAe,cAAA,YAAY;AAChD,IAAM,aAAa,eAAe,cAAA,MAAM;;AAGxC,IAAM,oBAAoB;AAE1B,SAAS,YAAY,SAA0B;AAC3C,QAAO,iBAAiB,KAAK,QAAQ;;AA6BlC,IAAA,iBAAA,MAAM,uBAAuB,wBAAwB;;;6BAOzB,CAAC,YAAY;cAGjB;cAIA;eAGE;mBAOQ;iBAG3B;kBAGC;eAGH;sBAGO;qBAGD;2BAGM;sBAGL;mBAGY;iBAQjB;mBAIE;eAGkB,EAAE;gBAGA,EAAE;uBAOlB;yBAIE;mBAGY;oBAGjB;kBAIF;cAGJ;eAGS;eAIA;iBAGE;uBAGM;0BAIG;oBAIN;wBAGI;mBA0BI,SAAS,2BAA2B;kBACrC,SAAS,0BAA0B;oBAC3B;0BACM;oBACF;sBA0XjB,UAAuB;AAC1C,SAAM,gBAAgB;AACtB,SAAM,iBAAiB;AAEvB,OAAI,KAAK,YAAY,KAAK,YAAY,KAAK,UAAU,GACjD;AAGJ,QAAK,WAAW,GAAG;AACnB,QAAK,cAAc,IAAI,cAAc,CAAC;AACtC,QAAK,gBAAgB,MAAM,EAAE,eAAe,MAAM,CAAC;;sBAGhC,UAAwB;AAC3C,UAAO,gBAAgB;AACvB,UAAO,iBAAiB;AAExB,OAAI,KAAK,YAAY,KAAK,SACtB;AAGJ,OAAI,KAAK,QAAQ,KAAK,QACb,MAAK,WAAW,MAAM;OAEtB,MAAK,WAAW;;+BAIG,UAA+B;AAC3D,OAAI,KAAK,YAAY,KAAK,SACtB;AAGJ,OACI,MAAM,QAAQ,eACX,MAAM,QAAQ,aACd,MAAM,QAAQ,WACd,MAAM,QAAQ,KACnB;AACE,UAAM,gBAAgB;AACtB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,QACf,MAAK,WAAW;;;gCAsFA,UAA8B;AAC3D,OAAI,CAAC,KAAK,QAAQ,KAAK,WAAW,CAAC,iBAAiB,KAAK,CACrD;AAGJ,OAAI,uBAAuB,OAAO;IAC9B,MAAM;IACN,QAAQ,KAAK,kBAAkB,KAAK;IACpC,OAAO,KAAK;IACf,CAAC,CACE;AAGC,QAAK,WAAW,kBAAkB;;4BAGd,UAA+B;AACxD,OAAI,CAAC,KAAK,QAAQ,KAAK,WAAW,CAAC,iBAAiB,KAAK,CACrD;AAGJ,OAAI,MAAM,QAAQ,UAAU;AACxB,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AAClB,SAAK,WAAW,SAAS;;;4BAIT,UAAuB;AAChD,OAAI,KAAK,QACL;AAGJ,QAAK,QAAS,MAAM,OAA4B;AAEhD,QAAK,QAAQ,KAAK,oBAAoB;AACtC,QAAK,8BAA8B;AACnC,QAAK,iBAAiB;;8BAGK,UAA+B;AAC1D,OAAI,CAAC,KAAK,QAAQ,KAAK,WAAW,KAAK,QACnC;AAGJ,WAAQ,MAAM,KAAd;IACI,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACD,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;AACvB,UAAK,cAAc,MAAM,IAAI;AAC7B;IACJ,KAAK,SAAS;AACV,WAAM,gBAAgB;AACtB,WAAM,iBAAiB;KAEvB,MAAM,OADQ,KAAK,kBACN,CAAM,KAAK;AACxB,SAAI,KACA,MAAK,YAAY,KAAK,MAAM;AAEhC;;IAEJ,QACI;;;mCAI8B;AAEtC,QAAK,oBAAoB;GAEzB,MAAM,UAAU,KAAK;AACrB,OAAI,CAAC,WAAW,CAAC,KAAK,aAAa,CAC/B;AAGJ,OAAI,QAAQ,YAAY,QAAQ,eAAe,QAAQ,eAAe,IAClE;GAGJ,MAAM,SAAS,QAAQ;AACvB,QAAK,SAAS,KAAK,oBAAoB;AAClC,QAAK,eAAe,WAAW;AAChC,QAAI,KAAK,UACL,MAAK,UAAU,YAAY;KAEjC;;mCAmF8B,UAA4B;GAC5D,MAAM,OAAO,MAAM;AASnB,OARyB,gBAAgB,QAClC,KAAK,WAAW,SAAS,KAAK,IAC9B,QACC,gBAAgB,UACV,KAAK,QAAQ,UAAU,GACvB,KAAK,eAAe,QAAQ,UAAU,CAC/C,CAGD;AAIJ,QAAK,0BAA0B;AAC/B,QAAK,oBAAoB;;;;gBAr0BJ;;CAEzB,WAAoB,aAAa;AAC7B,SAAO;GAAC,GAAG,MAAM;GAAY,iBAAiB;GAAE,mBAAmB;GAAC;;CA8IxE,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,QAAQ,KAAK,oBAAoB;;CAG1C,uBAAsC;AAClC,OAAK,0BAA0B;AAC/B,OAAK,iBAAiB;AACtB,OAAK,uBAAuB;AAC5B,OAAK,YAAY,SAAS;AAC1B,OAAK,aAAa;AAClB,QAAM,sBAAsB;;CAGhC,WAA8B,SAA+B;AACzD,MAAI,QAAQ,IAAI,WAAW,IAAI,CAAC,KAAK,KACjC,MAAK,QAAQ,KAAK,oBAAoB;AAG1C,QAAM,WAAW,QAAQ;;CAG7B,QAAiB,SAA+B;AAC5C,QAAM,QAAQ,QAAQ;AAEtB,MAAI,QAAQ,IAAI,OAAO;OACf,KAAK,KACL,MAAK,wBAAwB;YACtB,CAAC,KAAK,QACb,MAAK,0BAA0B;;AAIvC,OAAK,QAAQ,IAAI,OAAO,IAAI,QAAQ,IAAI,UAAU,MAAM,KAAK,QAAQ,KAAK,SACjE,MAAK,oBAAoB;AAGlC,MAAI,KAAK,SAAS,QAAQ,IAAI,mBAAmB,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,IAAI,QAAQ,EAC7F,MAAK,2BAA2B;AAIpC,MAAI,KAAK,QAAQ,QAAQ,IAAI,UAAU,IAAI,CAAC,KAAK,QAC7C,MAAK,8BAA8B;;CAI3C,IAAuB,mBAAgC;AACnD,SAAO,KAAK,kBAAkB;;CAGlC,gBAAyC;AACrC,OAAK,aAAa,KAAK,OAAO,KAAK,MAAM;;CAG7C,sBAA+C;AAC3C,OAAK,QAAQ,KAAK;;CAGtB,iBAAoC,OAA8C;AAC9E,MAAI,OAAO,UAAU,SACjB,MAAK,QAAQ;;CAIrB,MAAM,OAAsB;AACxB,MAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,YAAY,KAAK,SACnD;AAGJ,QAAM,KAAK,WAAW;;CAG1B,MAAM,KAAK,SAA0B,OAAsB;AACvD,MAAI,CAAC,KAAK,QAAQ,KAAK,QACnB;AAGJ,QAAM,KAAK,WAAW,OAAO;;CAGjC,SAAiB,OAAuB;AACpC,SAAO,GAAG,KAAK,UAAU,OAAO;;CAGpC,eAAuB,YAA4B;AAC/C,SAAO,GAAG,KAAK,UAAU,SAAS;;CAGtC,qBAAqC;AACjC,SAAO,KAAK,WAAW,IAAI,KAAK,WAAW;;CAG/C,gBAA+C;AAC3C,MAAI,KAAK,OAAO,SAAS,EACrB,QAAO,KAAK;AAGhB,MAAI,KAAK,MAAM,SAAS,EACpB,QAAO,CAAC;GAAE,MAAM;GAAI,OAAO,KAAK;GAAO,CAAC;AAG5C,SAAO,EAAE;;CAGb,SAAiB,OAA0C;AACvD,MAAI,UAAU,GACV,QAAO;AAGX,OAAK,MAAM,SAAS,KAAK,eAAe,EAAE;GACtC,MAAM,QAAQ,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU,MAAM;AAC9D,OAAI,MACA,QAAO;;AAIf,SAAO;;CAGX,eAAkD;AAC9C,SAAO,KAAK,SAAS,KAAK,MAAM;;CAGpC,iBAAsF;EAClF,MAAM,WAAW,KAAK,cAAc;AACpC,MAAI,SACA,QAAO;GACH,OAAO,SAAS;GAChB,SAAS,SAAS;GAClB,eAAe;GAClB;AAGL,MAAI,KAAK,UAAU,GACf,QAAO;GACH,OAAO,KAAK,iBAAiB,KAAK;GAClC,SAAS,KAAK,mBAAmB,KAAA;GACjC,eAAe;GAClB;AAGL,SAAO;GACH,OAAO,KAAK;GACZ,eAAe;GAClB;;;CAIL,gBAAwE;EACpE,MAAM,QAAQ,KAAK,MAAM,MAAM,CAAC,aAAa;AAE7C,SAAO,KAAK,eAAe,CAAC,QAAwD,KAAK,UAAU;GAC/F,MAAM,UAAU,UAAU,KACpB,MAAM,QACN,MAAM,MAAM,QAAQ,SAClB,KAAK,MAAM,aAAa,CAAC,SAAS,MAAM,IACrC,KAAK,MAAM,aAAa,CAAC,SAAS,MAAM,CAC7C;AAEN,OAAI,QAAQ,WAAW,EACnB,QAAO;AAGX,OAAI,KAAK;IACL,MAAM,MAAM;IACZ,OAAO,QAAQ;IACf,OAAO,QAAQ,MAAM,GAAG,KAAK,MAAM;IACtC,CAAC;AACF,UAAO;KACR,EAAE,CAAC;;CAGV,mBAAiD;AAC7C,SAAO,KAAK,eAAe,CAAC,SAAS,UAAU,MAAM,MAAM;;CAG/D,cAA+B;AAC3B,SAAO,KAAK,eAAe,CAAC,MAAM,UAAU,MAAM,MAAM,SAAS,MAAM,MAAM;;CAGjF,qBAA4C;AACxC,MAAI,CAAC,KAAK,QAAQ,KAAK,mBAAmB,EACtC,QAAO;AAGX,SAAO,KAAK,SAAS,KAAK,iBAAiB;;CAG/C,wBAAwC;AACpC,MAAI,KAAK,WAAW;GAChB,MAAM,UAAU,KAAK,gBAAgB;AACrC,OAAI,QAAQ,cACR,QAAO,KAAK;AAEhB,UAAO,GAAG,KAAK,UAAU,IAAI,QAAQ;;AAGzC,SAAO,KAAK,gBAAgB,CAAC;;CAGjC,kBAAgC;AAE5B,MAAI,KAAK,QACL;EAGJ,MAAM,QAAQ,KAAK,kBAAkB;AAGrC,MAAI,CAFW,KAAK,MAAM,MAErB,CACD;AAGJ,MAAI,CAAC,KAAK,WACN,MAAK,aAAa,IAAI,WAAW,SAAS;AAG9C,OAAK,WAAW,SACZ,MAAM,WAAW,IACX,KAAK,eACL,GAAG,MAAM,OAAO,GAAG,MAAM,WAAW,IAAI,WAAW,UAAU,YACtE;;CAGL,+BAA6C;EACzC,MAAM,QAAQ,KAAK,kBAAkB;AACrC,MAAI,MAAM,WAAW,GAAG;AACpB,QAAK,mBAAmB;AACxB;;EAGJ,MAAM,cAAc,MAAM,WAAW,SAAS,KAAK,UAAU,KAAK,MAAM;AACxE,OAAK,mBAAmB,eAAe,IAAI,cAAc;;CAG7D,oBAA4B,OAAqB;EAC7C,MAAM,QAAQ,KAAK,kBAAkB;AACrC,MAAI,MAAM,WAAW,GAAG;AACpB,QAAK,mBAAmB;AACxB;;EAGJ,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,MAAM,SAAS,EAAE,CAAC;AAC3D,OAAK,mBAAmB;AAGxB,MAAI,QAAQ,MAAM,SAAS,KAAK,KAAK,aAAa,CAC9C,MAAK,SAAS,KAAK,oBAAoB;;CAI/C,4BAA0C;AACtC,MAAI,KAAK,mBAAmB,KAAK,CAAC,KAAK,UACnC;EAGJ,MAAM,SAAS,KAAK,WAAW,cAC3B,IAAI,IAAI,OAAO,KAAK,SAAS,KAAK,iBAAiB,CAAC,GACvD;AACD,MAAI,CAAC,OACD;AAGJ,iBAAe,QAAQ,KAAK,WAAW,YAAY,OAAO;;;CAI9D,gBAAwB,OAAuB;EAI3C,MAAM,OAHS,KAAK,WAAW,cAC3B,IAAI,IAAI,OAAO,KAAK,SAAS,MAAM,CAAC,GAE3B,EAAQ,QAAQ,QAAQ;AACrC,MAAI,CAAC,KACD,QAAO;EAGX,MAAM,UAAU,CAAC,GAAG,KAAK,iBAA8B,UAAU,CAAC;AAClE,MAAI,QAAQ,WAAW,EACnB,QAAO;EAGX,MAAM,WAAW,QAAQ,GAAI;EAC7B,IAAI,OAAO;AACX,OAAK,MAAM,aAAa,SAAS;AAC7B,OAAI,UAAU,cAAc,SACxB;AAEJ,WAAQ;;AAGZ,SAAO,KAAK,IAAI,GAAG,KAAK;;CAG5B,cAAsB,KAAmB;EACrC,MAAM,QAAQ,KAAK,kBAAkB;AACrC,MAAI,MAAM,WAAW,GAAG;AACpB,QAAK,mBAAmB;AACxB;;EAGJ,IAAI,OAAO,KAAK;AAEhB,MAAI,OAAO,GAAG;AACV,UAAQ,QAAQ,aAAa,QAAQ,eAAe,QAAQ,QACtD,MAAM,SAAS,IACf;AACN,QAAK,oBAAoB,KAAK;AAC9B;;EAGJ,MAAM,OAAO,KAAK,gBAAgB,KAAK;AAEvC,UAAQ,KAAR;GACI,KAAK;AACD,WAAO,KAAK,IAAI,OAAO,GAAG,MAAM,SAAS,EAAE;AAC3C;GACJ,KAAK;AACD,WAAO,KAAK,IAAI,OAAO,GAAG,EAAE;AAC5B;GACJ,KAAK;AACD,WAAO,KAAK,IAAI,OAAO,MAAM,MAAM,SAAS,EAAE;AAC9C;GACJ,KAAK;AACD,WAAO,KAAK,IAAI,OAAO,MAAM,EAAE;AAC/B;GACJ,KAAK;AACD,WAAO;AACP;GACJ,KAAK;AACD,WAAO,MAAM,SAAS;AACtB;GACJ,QACI;;AAGR,OAAK,oBAAoB,KAAK;;CAGlC,WAAmB,MAAoB;AACnC,OAAK,QAAQ;AACb,OAAK,eAAe;AACpB,OAAK,gBAAgB;AAErB,OAAK,cAAc,IAAI,YAAY,aAAa;GAC5C,QAAQ,EAAE,OAAO,MAAM;GACvB,SAAS;GACT,UAAU;GACb,CAAC,CAAC;AACH,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;CAG9E,YAAoB,MAAoB;AACpC,MAAI,KAAK,YAAY,KAAK,SACtB;EAGJ,MAAM,WAAW,KAAK;AACjB,OAAK,WAAW,MAAM;AAC3B,OAAK,QAAQ;AACb,OAAK,QAAQ,KAAK,oBAAoB;AACtC,OAAK,mBAAmB;AAGxB,MAAI,aAAa,MAAM;AACnB,OAAI,KAAK,aAAa,aAAa,IAAI;AACnC,SAAK,WAAW,GAAG;AACnB,SAAK,cAAc,IAAI,cAAc,CAAC;;AAE1C;;AAGJ,OAAK,WAAW,KAAK;;CAiDzB,MAAc,YAA2B;AACrC,MAAI,KAAK,QAAQ,KAAK,WAAW,KAAK,YAAY,KAAK,SACnD;AAGJ,OAAK,cAAc,IAAI,aAAa,CAAC;AACrC,OAAK,UAAU;AACf,OAAK,gBAAgB;AACrB,OAAK,QAAQ;AACb,OAAK,QAAQ,KAAK,oBAAoB;AACtC,OAAK,OAAO;AACZ,OAAK,8BAA8B;AAEnC,QAAM,KAAK;AACX,QAAM,KAAK,oBAAoB;AAC/B,OAAK,gBAAgB;AACrB,OAAK,cAAc,IAAI,kBAAkB,CAAC;AAC1C,QAAM,KAAK,sBAAsB;AACjC,OAAK,2BAA2B;;CAGpC,MAAc,WAAW,QAAwC;AAC7D,MAAI,CAAC,KAAK,QAAQ,KAAK,QACnB;EAGJ,MAAM,YAAY,IAAI,YAAY,OAAO;AACzC,OAAK,cAAc,UAAU;AAC7B,MAAI,UAAU,iBACV;AAGJ,OAAK,UAAU;AACf,OAAK,OAAO;AACZ,OAAK,mBAAmB;AACxB,OAAK,oBAAoB;AACzB,OAAK,0BAA0B;AAC/B,OAAK,gBAAgB,MAAM,EAAE,eAAe,MAAM,CAAC;AAEnD,OAAK,iBAAiB;AACtB,OAAK,aAAa,OAAO,iBAAiB;AACtC,QAAK,UAAU;AACf,QAAK,gBAAgB;AACrB,QAAK,QAAQ;AACb,QAAK,QAAQ,KAAK,oBAAoB;AACtC,QAAK,aAAa;AAClB,QAAK,cAAc,IAAI,kBAAkB,CAAC;KAC3C,IAAI;;CAGX,kBAAgC;AAC5B,MAAI,KAAK,cAAc,MAAM;AACzB,UAAO,aAAa,KAAK,WAAW;AACpC,QAAK,aAAa;;;CAI1B,MAAc,qBAAoC;AAC9C,MAAI,CAAC,KAAK,gBAAgB,CAAC,KAAK,aAC5B;AAGJ,8BAA4B,KAAK,cAAc,KAAK,UAAU;EAC9D,MAAM,YAAY,MAAM,uBAAuB,KAAK,cAAc,KAAK,WAAW,KAAK,EACnF,cAAc,MACjB,CAAC;AACF,8BAA4B,KAAK,cAAc,UAAU;;CAG7D,yBAAuC;AACnC,sBAAoB,KAAK;AACzB,WAAS,iBAAiB,eAAe,KAAK,uBAAuB,KAAK;AAC1E,WAAS,iBAAiB,WAAW,KAAK,mBAAmB,KAAK;;CAGtE,2BAAyC;AACrC,wBAAsB,KAAK;AAC3B,WAAS,oBAAoB,eAAe,KAAK,uBAAuB,KAAK;AAC7E,WAAS,oBAAoB,WAAW,KAAK,mBAAmB,KAAK;;CAgGzE,MAAc,uBAAsC;EAChD,MAAM,UAAU,YAAY,KAAK;AACjC,SAAO,KAAK,QAAQ,YAAY,KAAK,GAAG,UAAU,KAAM;GACpD,MAAM,QAAQ,KAAK;AACnB,OAAI,SAAS,iBAAiB,MAAM,CAAC,eAAe,UAAU;AAC1D,UAAM,MAAM,EAAE,eAAe,MAAM,CAAC;AACpC,QAAI,SAAS,kBAAkB,MAC3B;;AAGR,SAAM,IAAI,SAAe,YAAY,4BAA4B,SAAS,CAAC,CAAC;;;CAIpF,cAAsB,SAA6B,WAAmB;AAClE,MAAI,CAAC,QACD,QAAO;AAGX,MAAI,YAAY,QAAQ,CACpB,QAAO,IAAI,eAAe,UAAU,sBAAsB,UAAU,QAAQ,CAAC;AAGjF,SAAO,IAAI,cAAc,UAAU,OAAO,QAAQ;;CAGtD,mBAAoC;AAChC,SAAO,KAAK,cAAc;;CAG9B,oBAAqC;AACjC,SAAO,KAAK,cAAc;;;CAI9B,kBAA0B,UAAkB,OAAqB;AAC7D,MAAI,CAAC,KAAK,mBAAmB,CACzB;EAIJ,MAAM,kBAAkB,KAAK,eAAe;AAC5C,OAAK,aAAa;AAClB,OAAK,iBAAiB;AACtB,OAAK,uBAAuB;EAE5B,MAAM,gBAAsB;AACxB,QAAK,mBAAmB;AACnB,QAAK,eAAe,WAAW;AAC3B,SAAK,eAAe,MAAM;KACjC;;AAGN,MAAI,iBAAiB;AACjB,YAAS;AACT;;AAGJ,OAAK,mBAAmB,OAAO,WAAW,SAAS,IAAI;;CAG3D,qBAAmC;AAC/B,OAAK,uBAAuB;AAC5B,OAAK,aAAa;AAClB,OAAK,iBAAiB;AACjB,OAAK,eAAe,MAAM;;CAGnC,wBAAsC;AAClC,MAAI,KAAK,oBAAoB,MAAM;AAC/B,UAAO,aAAa,KAAK,iBAAiB;AAC1C,QAAK,mBAAmB;;;CAIhC,yBAAiC,OAAe,OAAqB;AACjE,OAAK,mBAAmB;AACxB,OAAK,kBAAkB,KAAK,SAAS,MAAM,EAAE,MAAM;;CAsBvD,2BAAyC;EACrC,MAAM,QAAQ,KAAK,kBAAkB;AACrC,MAAI,MAAM,WAAW,GAAG;AACpB,QAAK,mBAAmB;AACxB;;EAGJ,MAAM,cAAc,MAAM,WAAW,SAAS,KAAK,UAAU,KAAK,MAAM;AACxE,OAAK,mBAAmB;;CAG5B,wBAAgC;EAC5B,MAAM,UAAU,KAAK,gBAAgB;AAErC,SAAO,IAAI;;kBAED,KAAK,cAAc,QAAQ,SAAS,kBAAkB,CAAC;;4BAE7C,SAAS;GACb,iBAAiB;GACjB,kBAAkB,QAAQ;GAC7B,CAAC,CAAC;;mBAEJ,QAAQ,MAAM;;;;CAK7B,gBAAwB;AACpB,MAAI,KAAK,QACL,QAAO,IAAI;;yBAEE,KAAK,UAAU;;iCAEP,KAAK,aAAa,UAAU;;;;;;;;EAUrD,MAAM,SAAS,KAAK,eAAe;AAEnC,MAAI,OAAO,WAAW,EAClB,QAAO,IAAI;;yBAEE,KAAK,UAAU;;iCAEP,KAAK,aAAa,UAAU;;mEAEM,KAAK,aAAa;;;EAK7E,IAAI,YAAY;AAEhB,SAAO,IAAI;;qBAEE,KAAK,UAAU;;6BAEP,KAAK,aAAa,UAAU;;kBAEvC,OAAO,KAAK,OAAO,eAAe;GAChC,MAAM,YAAY,KAAK,eAAe,WAAW;GACjD,MAAM,aAAa;GAEnB,MAAM,UAAU,MAAM,MAAM,KAAK,MAAM,cAAc;IACjD,MAAM,QAAQ,aAAa;AAC3B,gBAAY,QAAQ;IACpB,MAAM,WAAW,KAAK,UAAU,KAAK;IACrC,MAAM,cAAc,UAAU,KAAK;AAEnC,WAAO,IAAI;;;;qCAIE,KAAK,SAAS,MAAM,CAAC;wCAClB,SAAS;KACb,QAAQ;KACR,kBAAkB;KAClB,eAAe;KAClB,CAAC,CAAC;;;6CAGU,KAAK,MAAM;gDACR,WAAW,SAAS,QAAQ;+CAC7B,KAAK,YAAY,KAAK,MAAM,CAAC;oDACxB,KAAK,yBAAyB,OAAO,KAAK,MAAM,CAAC;8CACvD,KAAK,yBAAyB;;kCAE1C,KAAK,cAAc,KAAK,SAAS,iBAAiB,CAAC;kCACnD,KAAK,kBAAkB,GACnB,IAAI,iDAAiD,KAAK,MAAM,WAChE,QAAQ;;;KAGxB;AAEF,UAAO,IAAI;;;mCAGI,MAAM,OAAO,UAAU,QAAQ;8CACpB,MAAM,OAAO,YAAY,QAAQ;;8BAEjD,MAAM,OACF,IAAI;mEAC6B,UAAU;gDAC7B,MAAM,KAAK;0CACjB,MAAM,MAAM,SAAS,MAAM,QACvB,IAAI;;8DAEY,MAAM,MAAM,OAAO,MAAM,MAAM,MAAM;;gDAGrD,QAAQ;;oCAGpB,QAAQ;;kCAER,QAAQ;;;;IAIxB,CAAC;;;;CAKf,SAAkB;EACd,MAAM,YAAY,KAAK,aAAa,KAAK,UAAU,MAAM,CAAC,KAAK,YAAY,CAAC,KAAK;EACjF,MAAM,cAAc,KAAK,QAAQ,KAAK;EACtC,MAAM,mBAAmB,KAAK,oBAAoB;AAElD,SAAO,IAAI;;;;;;yBAMM,KAAK,MAAM;4BACR,KAAK,SAAS;+BACX,KAAK,gBAAgB,CAAC;;;;wBAI7B,SAAS;GACb,SAAS;GACT,eAAe,KAAK,YAAY,KAAK;GACrC,WAAW,KAAK;GACnB,CAAC,CAAC;;;;;;gCAMa,KAAK,YAAY,KAAK,SAAS;iCAC9B,KAAK,uBAAuB,CAAC;;oCAE1B,KAAK,OAAO,SAAS,QAAQ;oCAC7B,KAAK,UAAU;6BACtB,KAAK,YAAY;+BACf,KAAK,qBAAqB;;sBAEnC,KAAK,uBAAuB,CAAC;;kBAEjC,YACI,IAAI;;;;;;wCAMc,KAAK,SAAS;qCACjB,KAAK,YAAY;;iFAE2B,UAAU,WAAW,CAAC;;wBAGjF,QAAQ;;;;;;gCAME,KAAK,YAAY,KAAK,SAAS;6BAClC,KAAK,YAAY;;uDAES,UAAU,aAAa,CAAC;;;;0BAIrD,YAAY;0BACZ,KAAK,kBAAkB,KAAK,kBAAkB,GAAG;6BAC9C,KAAK,UAAU;4BAChB,KAAK,WAAW;;;;;;4BAMhB,SAAS;GACb,OAAO;GACP,oBAAoB;GACpB,SAAS,KAAK;GACjB,CAAC,CAAC;;8BAEO,CAAC,YAAY;gCACX,KAAK,iBAAiB,CAAC,KAAK,UAAU,KAAK,QAAQ;;;;;;iCAMlD,KAAK,SAAS;;;qCAGV,KAAK,MAAM;0CACN,KAAK,kBAAkB;yCACxB,KAAK,kBAAkB;;4CAEpB,KAAK,OAAO,SAAS,QAAQ;4CAC7B,KAAK,UAAU;oDACP,oBAAoB,QAAQ;wCACxC,KAAK,QAAQ;qCAChB,KAAK,kBAAkB;uCACrB,KAAK,oBAAoB;;;;;;kCAM9B,KAAK,oBAAoB;;0BAEjC,KAAK,eAAe,CAAC;;sBAEzB,KAAK,mBAAmB,IAAI,cACxB,IAAI;;;sCAGQ,KAAK,WAAW;0CACZ,KAAK,eAAe;;;;4BAKpC,QAAQ;;;;;;YAzjC7B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAI3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAO3B,SAAS;CAAE,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAGpD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAGV,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGxC,UAAU,CAAA,EAAA,eAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS,EAAE,WAAW,sBAAsB,CAAC,CAAA,EAAA,eAAA,WAAA,qBAAA,KAAA,EAAA;YAG7C,SAAS,EAAE,WAAW,iBAAiB,CAAC,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGxC,SAAS,EAAE,WAAW,cAAc,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAQrC,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAI1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAGnE,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAG9B,SAAS,EAAE,WAAW,OAAO,CAAC,CAAA,EAAA,eAAA,WAAA,UAAA,KAAA,EAAA;YAO9B,SAAS,EAAE,WAAW,kBAAkB,CAAC,CAAA,EAAA,eAAA,WAAA,iBAAA,KAAA,EAAA;YAIzC,SAAS,EAAE,WAAW,oBAAoB,CAAC,CAAA,EAAA,eAAA,WAAA,mBAAA,KAAA,EAAA;YAG3C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAG3B,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAIpD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAa,CAAC,CAAA,EAAA,eAAA,WAAA,YAAA,KAAA,EAAA;YAGlD,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,eAAA,WAAA,QAAA,KAAA,EAAA;YAG1C,OAAO,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,eAAA,WAAA,WAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,eAAA,WAAA,iBAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,eAAA,WAAA,oBAAA,KAAA,EAAA;YAIP,OAAO,CAAA,EAAA,eAAA,WAAA,cAAA,KAAA,EAAA;YAGP,OAAO,CAAA,EAAA,eAAA,WAAA,kBAAA,KAAA,EAAA;YAGP,MAAM,eAAe,CAAA,EAAA,eAAA,WAAA,SAAA,KAAA,EAAA;YAGrB,MAAM,WAAW,CAAA,EAAA,eAAA,WAAA,kBAAA,KAAA,EAAA;YAGjB,MAAM,WAAW,CAAA,EAAA,eAAA,WAAA,kBAAA,KAAA,EAAA;YAGjB,MAAM,WAAW,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGjB,MAAM,SAAS,CAAA,EAAA,eAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,MAAM,eAAe,CAAA,EAAA,eAAA,WAAA,eAAA,KAAA,EAAA;YAGrB,MAAM,cAAc,CAAA,EAAA,eAAA,WAAA,aAAA,KAAA,EAAA;YAGpB,MAAM,kBAAkB,CAAA,EAAA,eAAA,WAAA,iBAAA,KAAA,EAAA;6BA1I5B,cAAc,mBAAmB,CAAA,EAAA,eAAA"}

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

@@ -1,14 +1,14 @@
 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-9M2NzOE2.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
 import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
 import { i as uniqueId } from "./focus-aa5dlv8k.js";
 import { t as PkClearEvent } from "./pk-clear--mPWZP7H.js";
-import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CoU9dnNq.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
 import { css, html, nothing } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { live } from "lit/directives/live.js";
@@ -86,6 +86,15 @@ var pkInputStyles = css`
             font-family: var(--pk-font-family);
             font-size: var(--pk-font-size-base);
             line-height: var(--pk-line-height);
+            /*
+             * Control chrome tokens — inherit into light-DOM in-control actions
+             * (e.g. pk-copy-button[slot=end]) the same way combobox/image-browser
+             * size their trailing clear/expand hit targets.
+             */
+            --pk-input-padding-block: 6px;
+            --pk-input-padding-inline: 8px;
+            --pk-input-control-gap: 6px;
+            --pk-input-decoration-size: 0.75rem;
         }
         :host([data-pk-group-orientation]) {
@@ -171,11 +180,13 @@ var pkInputStyles = css`
         /* Chrome lives on the flex shell (part=base) so slot=start/end adornments sit
          * inside the border — same visual contract as pk-input-group / v1 InputGroup.
          * Height is content-sized (v1): padding-block + --pk-input-control-line-height + border.
+         * Trailing actions (clear, pk-copy-button[slot=end]) stay in flex flow so long
+         * values never paint under the button — mirror combobox / image-browser.
          */
         .form-control__input {
             align-items: center;
-            gap: 6px;
-            padding-inline: 8px;
+            gap: var(--pk-input-control-gap);
+            padding-inline: var(--pk-input-padding-inline);
             border: var(--pk-input-border);
             border-radius: var(--pk-input-border-radius, var(--pk-radius-sm));
             background: var(--pk-input-bg);
@@ -189,8 +200,11 @@ var pkInputStyles = css`
             margin: 0;
             color: var(--pk-color-gray-400);
             line-height: 0;
+            align-self: stretch;
+            align-items: center;
         }
+        /* Decorative glyphs only — interactive in-control actions opt out below. */
         .form-control__start ::slotted(*),
         .form-control__end ::slotted(*) {
             display: block;
@@ -198,12 +212,31 @@ var pkInputStyles = css`
             max-height: 1.25rem;
         }
+        /* Copy (and similar) inside the field: flex-reserved space, not absolute overlay. */
+        .form-control__end:has(::slotted(pk-copy-button)) {
+            align-items: stretch;
+        }
+        .form-control__end ::slotted(pk-copy-button) {
+            display: inline-flex;
+            align-self: stretch;
+            align-items: stretch;
+            max-width: none;
+            max-height: none;
+            /*
+             * Pull into trailing padding like combobox expand/clear, but leave a
+             * small inset so the glyph is not tight against the field border.
+             */
+            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);
+            margin-block: calc(-1 * var(--pk-input-padding-block));
+        }
         .input {
             display: block;
             width: 100%;
             margin: 0;
             /* v1 Input default: py-1.5 + text-sm (14px / 1.25rem lh) → 34px with border. */
-            padding-block: 6px;
+            padding-block: var(--pk-input-padding-block);
             padding-inline: 0;
             border: 0;
             border-radius: 0;
@@ -257,43 +290,47 @@ var pkInputStyles = css`
             box-shadow: var(--pk-input-invalid-focus-shadow);
         }
-        :host([size='xs']) .form-control__input {
-            gap: 4px;
-            padding-inline: 6px;
+        :host([size='xs']) {
+            --pk-input-padding-block: 4px;
+            --pk-input-padding-inline: 6px;
+            --pk-input-control-gap: 4px;
+            --pk-input-decoration-size: 0.625rem;
         }
         :host([size='xs']) .input {
-            padding-block: 4px;
             font-size: 11px;
         }
-        :host([size='sm']) .form-control__input {
-            gap: 4px;
-            padding-inline: 8px;
+        :host([size='sm']) {
+            --pk-input-padding-block: 4px;
+            --pk-input-padding-inline: 8px;
+            --pk-input-control-gap: 4px;
+            --pk-input-decoration-size: 0.6875rem;
         }
         :host([size='sm']) .input {
-            padding-block: 4px;
             font-size: 12px;
         }
-        :host([size='lg']) .form-control__input {
-            gap: 8px;
-            padding-inline: 12px;
+        :host([size='lg']) {
+            --pk-input-padding-block: 8px;
+            --pk-input-padding-inline: 12px;
+            --pk-input-control-gap: 8px;
+            --pk-input-decoration-size: 0.875rem;
         }
         :host([size='lg']) .input {
-            padding-block: 8px;
             font-size: var(--pk-font-size-base);
         }
-        :host([size='xl']) .form-control__input {
-            gap: 8px;
-            padding-inline: 16px;
+        :host([size='xl']) {
+            --pk-input-padding-block: 10px;
+            --pk-input-padding-inline: 16px;
+            --pk-input-control-gap: 8px;
+            --pk-input-decoration-size: 1rem;
         }
         :host([size='xl']) .input {
-            padding-block: 10px;
             font-size: 16px;
         }
@@ -416,15 +453,24 @@ var pkInputStyles = css`
             border-bottom-width: 0;
         }
+        /*
+         * Clear is a flex trailing action (not absolute). Reserves width in the
+         * control so values cannot scroll under the glyph — same contract as
+         * combobox clear/expand and image-browser clear.
+         */
         .clear-button {
-            position: absolute;
-            inset-inline-end: 6px;
-            inset-block-start: 50%;
-            translate: 0 -50%;
-        }
-        .form-control__input:has(.clear-button) .input {
-            padding-inline-end: 20px;
+            display: inline-flex;
+            flex-shrink: 0;
+            align-self: stretch;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            width: calc(var(--pk-input-decoration-size) + var(--pk-input-padding-inline));
+            margin-block: calc(-1 * var(--pk-input-padding-block));
+            /* Match pk-copy-button[slot=end]: pull into padding but leave a 4px glyph inset. */
+            margin-inline-end: calc(-1 * var(--pk-input-padding-inline) + 4px);
+            font-size: var(--pk-input-decoration-size);
+            line-height: 1;
         }
     }
 `;
@@ -719,4 +765,4 @@ PkInput = __decorate([customElement("pk-input")], PkInput);
 //#endregion
 export { PkInput as t };
-//# sourceMappingURL=pk-input-DDkIXOkt.js.map
+//# sourceMappingURL=pk-input-CF_icEtR.js.map

package/dist/chunks/pk-input-CF_icEtR.js.map ADDED Viewed

@@ -0,0 +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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"}

package/dist/chunks/{pk-input-group-CRPSBFhX.js → pk-input-group-BLqKPnfc.js} RENAMED Viewed

@@ -210,7 +210,7 @@ var PkInputGroup = class PkInputGroup extends PkElement {
 		this.toggleAttribute("data-block-layout", blockLayout);
 	}
 	/**
-	* Mirror control invalid/disabled onto the host so shadow styles can paint shell chrome
+	* Mirror control invalid/disabled onto the host so shadow styles can paint the shell
 	* without `:host(:has(…))` (unreliable for light-DOM slotted children in Chromium).
 	*/
 	syncControlChromeState() {
@@ -234,4 +234,4 @@ PkInputGroup = __decorate([customElement("pk-input-group")], PkInputGroup);
 //#endregion
 export { PkInputGroup as t };
-//# sourceMappingURL=pk-input-group-CRPSBFhX.js.map
+//# sourceMappingURL=pk-input-group-BLqKPnfc.js.map

package/dist/chunks/{pk-input-group-CRPSBFhX.js.map → pk-input-group-BLqKPnfc.js.map} RENAMED Viewed

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

package/dist/chunks/{pk-input-group-addon-B0StOmTJ.js → pk-input-group-addon-ClBkGmAw.js} RENAMED Viewed

@@ -97,4 +97,4 @@ PkInputGroupAddon = __decorate([customElement("pk-input-group-addon")], PkInputG
 //#endregion
 export { PkInputGroupAddon as t };
-//# sourceMappingURL=pk-input-group-addon-B0StOmTJ.js.map
+//# sourceMappingURL=pk-input-group-addon-ClBkGmAw.js.map

package/dist/chunks/{pk-input-group-addon-B0StOmTJ.js.map → pk-input-group-addon-ClBkGmAw.js.map} RENAMED Viewed

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

package/dist/chunks/{pk-input-group-button-CnKajvsP.js → pk-input-group-button-CHQHsWd4.js} RENAMED Viewed

@@ -51,4 +51,4 @@ PkInputGroupButton = __decorate([customElement("pk-input-group-button")], PkInpu
 //#endregion
 export { PkInputGroupButton as t };
-//# sourceMappingURL=pk-input-group-button-CnKajvsP.js.map
+//# sourceMappingURL=pk-input-group-button-CHQHsWd4.js.map

package/dist/chunks/{pk-input-group-button-CnKajvsP.js.map → pk-input-group-button-CHQHsWd4.js.map} RENAMED Viewed

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