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

@verbb/plugin-kit-web 2.0.15 → 2.0.16

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

package/dist/chunks/pk-autocomplete-kOT0Zlld.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pk-autocomplete-kOT0Zlld.js","names":[],"sources":["../../src/components/autocomplete/pk-autocomplete.styles.ts","../../src/components/autocomplete/pk-autocomplete.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 * Autocomplete chrome matches `pk-input` (text field), not Combobox’s slate\n * select fill / chevron affordance. Panel / listbox tokens stay shared with\n * Combobox so suggestion rows look the same.\n */\nexport const pkAutocompleteStyles = [\n popupContentAnimationStyles,\n css`\n ${iconStyles}\n @layer pk-component {\n :host {\n display: block;\n position: relative;\n width: 100%;\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 /* Match pk-input control tokens — not Combobox slate fill. */\n --pk-autocomplete-padding-block: 6px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 6px;\n --pk-autocomplete-decoration-size: 0.75rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-min-height: 0;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 2rem;\n --pk-select-item-font-size: 14px;\n --pk-select-item-line-height: 1.4;\n --pk-select-item-indicator-size: 0.75rem;\n --pk-select-item-indicator-inset: 0.5rem;\n --pk-select-group-label-font-size: 12px;\n }\n\n /* width=\"full\" is the documented stretch opt-in; host already fills by default. */\n :host([width='full']) {\n display: block;\n width: 100%;\n }\n\n .control {\n display: flex;\n align-items: center;\n gap: var(--pk-autocomplete-control-gap);\n width: 100%;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding-block: var(--pk-autocomplete-padding-block);\n padding-inline: var(--pk-autocomplete-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 color: var(--pk-color-gray-700);\n font: inherit;\n font-size: var(--pk-autocomplete-font-size);\n line-height: var(--pk-input-control-line-height, 1.25rem);\n white-space: nowrap;\n cursor: text;\n outline: none;\n box-sizing: border-box;\n transition: border-color 0.12s ease, box-shadow 0.12s ease;\n }\n\n /*\n * Craft text focus: resting border stays; ring is box-shadow only\n * (--pk-input-focus-shadow already includes the 1px edge). Same when the\n * suggestion panel is open — still a text field, not a select trigger.\n */\n :host(:not([invalid]):not(:state(user-invalid))) .control:focus-within,\n :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control,\n :host(:not([invalid]):not(:state(user-invalid))) .control[data-popup-open] {\n box-shadow: var(--pk-input-focus-shadow);\n }\n\n .control.is-disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .control-start,\n .control-end {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n line-height: 0;\n color: var(--pk-color-gray-400);\n }\n\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n width: var(--pk-autocomplete-decoration-size);\n height: var(--pk-autocomplete-decoration-size);\n }\n\n .autocomplete-input {\n flex: 1 1 auto;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n line-height: var(--pk-input-control-line-height, 1.25rem);\n outline: none;\n }\n\n .autocomplete-input::placeholder {\n color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n }\n\n /* Clear: flex trailing action — same contract as pk-input / Combobox clear. */\n .clear-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n align-self: stretch;\n box-sizing: border-box;\n width: calc(var(--pk-autocomplete-decoration-size) + var(--pk-autocomplete-padding-inline));\n height: auto;\n min-height: var(--pk-autocomplete-decoration-size);\n margin-block: calc(-1 * var(--pk-autocomplete-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-autocomplete-padding-inline) + 4px);\n margin-inline-start: 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 .clear-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .clear-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 display: block;\n width: 0.75rem;\n height: 0.75rem;\n }\n\n .value-input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n .panel ::slotted(pk-separator) {\n margin: 4px 0;\n }\n\n .panel {\n width: max-content;\n min-width: var(--pk-autocomplete-anchor-width, 8rem);\n padding: 0;\n border: 0;\n border-radius: var(--pk-radius-md);\n background: var(--pk-color-white);\n box-shadow: var(--pk-shadow-popup);\n color: var(--pk-color-gray-700);\n outline: none;\n }\n\n .panel-body {\n max-height: 16rem;\n overflow: auto;\n }\n\n .panel:not([data-open]):not(.closing) {\n opacity: 0;\n pointer-events: none;\n }\n\n .panel[data-open]:not(.closing) {\n opacity: 1;\n pointer-events: auto;\n }\n\n .panel[hidden] {\n display: none !important;\n }\n\n .empty,\n .async-status {\n display: flex;\n align-items: center;\n margin: 0;\n min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n padding-block: var(--pk-select-item-padding-block);\n padding-inline: var(--pk-select-item-padding-inline);\n border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n box-sizing: border-box;\n color: var(--pk-color-gray-500);\n font-size: var(--pk-select-item-font-size);\n line-height: var(--pk-select-item-line-height);\n }\n\n :host([invalid]) .control,\n :host(:state(user-invalid)) .control {\n border-color: var(--pk-color-rose-600);\n }\n\n :host([invalid]) .control:focus-within,\n :host([invalid][data-state='focus-visible']) .control,\n :host(:state(user-invalid)) .control:focus-within,\n :host(:state(user-invalid)[data-state='focus-visible']) .control {\n box-shadow: var(--pk-input-invalid-focus-shadow);\n }\n\n :host([size='xs']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 6px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.625rem;\n --pk-autocomplete-font-size: 11px;\n --pk-select-item-padding-block: 4px;\n --pk-select-item-padding-inline: 8px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 11px;\n --pk-select-group-label-font-size: 11px;\n }\n\n :host([size='xs']) .clear-button-icon svg {\n width: 0.625rem;\n height: 0.625rem;\n }\n\n :host([size='sm']) {\n --pk-autocomplete-padding-block: 4px;\n --pk-autocomplete-padding-inline: 8px;\n --pk-autocomplete-control-gap: 4px;\n --pk-autocomplete-decoration-size: 0.6875rem;\n --pk-autocomplete-font-size: 12px;\n --pk-select-item-padding-block: 6px;\n --pk-select-item-padding-inline: 10px;\n --pk-select-item-padding-inline-end: 1.75rem;\n --pk-select-item-font-size: 12px;\n --pk-select-group-label-font-size: 12px;\n }\n\n :host([size='sm']) .clear-button-icon svg {\n width: 0.6875rem;\n height: 0.6875rem;\n }\n\n :host([size='lg']) {\n --pk-autocomplete-padding-block: 8px;\n --pk-autocomplete-padding-inline: 12px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 0.875rem;\n --pk-autocomplete-font-size: var(--pk-font-size-base);\n --pk-select-item-padding-block: 8px;\n --pk-select-item-padding-inline: 12px;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 14px;\n }\n\n :host([size='xl']) {\n --pk-autocomplete-padding-block: 10px;\n --pk-autocomplete-padding-inline: 16px;\n --pk-autocomplete-control-gap: 8px;\n --pk-autocomplete-decoration-size: 1rem;\n --pk-autocomplete-font-size: 16px;\n --pk-select-item-padding-block: 10px;\n --pk-select-item-padding-inline: 14px;\n --pk-select-item-padding-inline-end: 2.25rem;\n --pk-select-item-font-size: 14px;\n --pk-select-group-label-font-size: 16px;\n }\n\n :host([size='xl']) .clear-button-icon svg {\n width: 0.875rem;\n height: 0.875rem;\n }\n }\n`,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport type { PropertyValues } from 'lit';\n\nimport { 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 { HasSlotController } from '../../internal/has-slot.js';\nimport { PkClearEvent } from '../../events/pk-clear.js';\nimport {\n PkAfterHideEvent,\n PkAfterShowEvent,\n PkHideEvent,\n PkShowEvent,\n type PkOverlaySource,\n} from '../../events/overlay-lifecycle.js';\nimport type { PkValidator } from '../../validators/types.js';\nimport { MirrorValidator } from '../../validators/mirror-validator.js';\n// Keep the internal element registered when production builds erase type-only imports.\nimport '../popup/pk-popup.js';\nimport type { PkPopup, PkPopupPlacement } from '../popup/pk-popup.js';\nimport {\n handleListboxKeyDown,\n isListboxTypeToSelectKey,\n LISTBOX_NAVIGATION_KEYS,\n} from '../../utils/listbox-keyboard.js';\nimport {\n syncPopupPlacementAnimation,\n waitForPopupReposition,\n} from '../../utils/popup-placement-animation.js';\nimport { waitForPopupContentExitAnimation } from '../../utils/popup-content-exit.js';\nimport { isEventInsideOverlay, isPointerInsideOverlay } from '../../utils/popup-pointer.js';\nimport { syncFilteredOptions } from '../../internal/sync-filtered-options.js';\nimport {\n AsyncOptionFetcher,\n type PkAsyncOptionFetchHandler,\n type PkAsyncOptionItem,\n} from '../../utils/async-option-fetch.js';\nimport { matchesOptionFilter, type PkOptionFilter } from '../../utils/option-filter.js';\nimport type { PkOption } from '../select/pk-option.js';\nimport type { PkOptionGroup } from '../select/pk-option-group.js';\n// Freeform field chrome matches pk-input — not Combobox’s select fill / chevron.\nimport { pkAutocompleteStyles } from './pk-autocomplete.styles.js';\n\nexport type PkAutocompleteSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nexport type PkAutocompleteFilter = PkOptionFilter;\n\nexport type PkAutocompleteAsyncOption = PkAsyncOptionItem;\n\nexport type PkAutocompleteFetchHandler = PkAsyncOptionFetchHandler;\n\nconst XMARK_ICON = renderIconHtml(xmark);\n\n/**\n * Autocomplete — freeform text field with optional list suggestions.\n *\n * Unlike Combobox, the committed `value` *is* the input text. Choosing a\n * suggestion inserts that option’s value into the field; typing always wins.\n *\n * @slot start - Presentational decoration before the input (e.g. icons)\n * @slot end - Presentational decoration before the clear control\n * @slot - `pk-option` and `pk-option-group` items\n *\n * @csspart control - Input control wrapper\n * @csspart start - Host start decoration container\n * @csspart end - Host end decoration container\n * @csspart input - Autocomplete text input\n * @csspart clear-button - Clear value button\n * @csspart panel-body - Scrollable listbox region inside the popup panel\n * @csspart empty - Empty-state message\n * @csspart async-status - Async search status message\n *\n * @dependency pk-popup - Positioned suggestion panel host.\n */\n@customElement('pk-autocomplete')\nexport class PkAutocomplete extends PkFormAssociatedElement {\n static override styles = pkAutocompleteStyles;\n\n static override get validators(): PkValidator[] {\n return [\n ...super.validators,\n MirrorValidator(),\n {\n observedAttributes: ['required'],\n checkValidity: (element) => {\n const field = element as unknown as PkAutocomplete;\n const result = {\n message: 'Please fill out this field.',\n isValid: true,\n invalidKeys: [] as ReturnType<PkValidator['checkValidity']>['invalidKeys'],\n };\n\n if (!field.required || field.value.trim()) {\n return result;\n }\n\n result.isValid = false;\n result.invalidKeys.push('valueMissing');\n return result;\n },\n },\n ];\n }\n\n override assumeInteractionOn = ['blur', 'input'];\n\n @property({ type: Boolean, reflect: true })\n open = false;\n\n @property({ reflect: true })\n placement: PkPopupPlacement = 'bottom-start';\n\n /** Gap between the control and listbox panel in px (default: 6). */\n @property({ attribute: 'side-offset', type: Number })\n sideOffset = 6;\n\n @property({ type: Boolean, reflect: true })\n clearable = false;\n\n @property({ attribute: 'with-clear', type: Boolean })\n withClear = false;\n\n /** When true, the first matching option is highlighted on open or when filtering. */\n @property({ attribute: 'auto-highlight', type: Boolean })\n autoHighlight = false;\n\n @property({ type: Boolean, reflect: true })\n invalid = false;\n\n @property({ reflect: true })\n size: PkAutocompleteSize = 'default';\n\n /** When `full`, the control stretches to the host width. */\n @property({ reflect: true })\n width?: 'full';\n\n /** Empty by default — consumers opt in when a prompt is useful. */\n @property()\n placeholder = '';\n\n @property({ attribute: 'empty-message' })\n emptyMessage = 'No options found.';\n\n /** Freeform field value — always mirrors the visible input text. */\n @property()\n value = '';\n\n @property({ attribute: 'default-value' })\n defaultValue = '';\n\n @property()\n label = '';\n\n @property()\n instructions = '';\n\n @property({ attribute: 'aria-label' })\n ariaLabel: string | null = null;\n\n /**\n * Whether arrow-key focus loops from the last option back to the first (and vice versa).\n * Default: `true` (same as Combobox).\n */\n @property({ attribute: 'loop-focus', type: Boolean })\n loopFocus = true;\n\n /** Custom filter — `(option, query) => boolean`. Defaults to label/value substring match. */\n @property({ attribute: false })\n filter: PkAutocompleteFilter | null = null;\n\n /**\n * When true, options are loaded via `fetchOptions` as the user types instead of\n * filtering static `pk-option` children.\n */\n @property({ type: Boolean, reflect: true })\n async = false;\n\n /** Message shown while async results are loading. */\n @property({ attribute: 'loading-message' })\n loadingMessage = 'Searching…';\n\n /** Message shown before the user types in async mode. */\n @property({ attribute: 'start-typing-message' })\n startTypingMessage = 'Start typing to search…';\n\n /** Remote search handler — `(query, signal) => Promise<options>`. */\n @property({ attribute: false })\n fetchOptions: PkAutocompleteFetchHandler | null = null;\n\n private readonly hasSlotController = new HasSlotController(this, 'start', 'end');\n\n private readonly listboxId = uniqueId('pk-autocomplete-listbox');\n private readonly inputId = uniqueId('pk-autocomplete-input');\n\n @query('pk-popup')\n private popupElement!: PkPopup;\n\n @query('.control')\n private controlElement!: HTMLElement;\n\n @query('.control-input')\n private controlInput?: HTMLInputElement;\n\n @query('.value-input')\n override input!: HTMLInputElement;\n\n private get panelElement(): HTMLDivElement | null {\n return this.popupElement?.getContentElement() as HTMLDivElement | null ?? null;\n }\n\n private get panelBodyElement(): HTMLDivElement | undefined {\n return this.panelElement?.querySelector('.panel-body') as HTMLDivElement | undefined;\n }\n\n private get listScrollContainer(): HTMLElement {\n return this.panelBodyElement ?? this.panelElement ?? this;\n }\n\n private options: PkOption[] = [];\n\n @state()\n private highlightedIndex = -1;\n\n @state()\n private closing = false;\n\n @state()\n private panelAnimated = false;\n\n private dismissRegistered = false;\n private panelEventTarget: HTMLElement | null = null;\n private optionsObserver?: MutationObserver;\n private liveRegion?: LiveRegion;\n private asyncFetcher: AsyncOptionFetcher | null = null;\n\n @state()\n private asyncLoading = false;\n\n @state()\n private asyncError: string | null = null;\n\n override connectedCallback(): void {\n this.instructions = this.getAttribute('hint') ?? this.instructions;\n this.refreshOptions();\n super.connectedCallback();\n this.syncHasValueAttribute();\n this.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver = new MutationObserver(() => {\n this.handleOptionsMutation({ render: true });\n });\n this.optionsObserver.observe(this, { childList: true, subtree: true });\n }\n\n override disconnectedCallback(): void {\n this.unbindPanelEvents();\n this.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.optionsObserver?.disconnect();\n this.liveRegion?.destroy();\n this.liveRegion = undefined;\n this.asyncFetcher?.cancel();\n void this.closePanel('api');\n super.disconnectedCallback();\n }\n\n override firstUpdated(changed: PropertyValues): void {\n super.firstUpdated(changed);\n\n if (!this.value && this.defaultValue) {\n this.value = this.defaultValue;\n }\n\n this.applyOptionState();\n }\n\n override updated(changed: PropertyValues): void {\n if (changed.has('value')) {\n this.syncHasValueAttribute();\n this.applyOptionState();\n }\n\n super.updated(changed);\n }\n\n protected override get validationTarget(): HTMLElement | undefined {\n return this.controlInput ?? this.controlElement;\n }\n\n protected override getAriaMirrorTarget(): HTMLElement | null {\n return this.controlInput ?? this.controlElement ?? null;\n }\n\n protected override syncFormValue(): void {\n if (!this.name) {\n this.setFormValue(null);\n return;\n }\n\n this.setFormValue(this.value);\n }\n\n private syncHasValueAttribute(): void {\n this.toggleAttribute('data-has-value', Boolean(this.value));\n }\n\n private refreshOptions(): void {\n this.options = [...this.querySelectorAll('pk-option')] as PkOption[];\n }\n\n private handleOptionsMutation(options: { render?: boolean } = {}): void {\n this.refreshOptions();\n this.applyOptionState();\n\n if (options.render) {\n this.requestUpdate();\n }\n }\n\n private bindPanelEvents(): void {\n const panel = this.panelElement;\n\n if (!panel || this.panelEventTarget === panel) {\n return;\n }\n\n this.unbindPanelEvents();\n this.panelEventTarget = panel;\n panel.addEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n panel.addEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n panel.addEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n }\n\n private unbindPanelEvents(): void {\n if (!this.panelEventTarget) {\n return;\n }\n\n this.panelEventTarget.removeEventListener('pk-option-select', this.handleOptionSelect as EventListener);\n this.panelEventTarget.removeEventListener('pk-option-highlight', this.handleOptionHighlight as EventListener);\n this.panelEventTarget.removeEventListener('pk-listbox-keydown', this.handleListboxKeyDownEvent as EventListener);\n this.panelEventTarget = null;\n }\n\n private isOptionInHiddenGroup(option: PkOption): boolean {\n const group = option.closest('pk-option-group') as PkOptionGroup | null;\n return Boolean(group?.hidden);\n }\n\n private getFilterQuery(): string {\n if (!this.open) {\n return '';\n }\n\n return this.value.trim().toLowerCase();\n }\n\n private get usesAsyncSearch(): boolean {\n return this.async && Boolean(this.fetchOptions);\n }\n\n private getVisibleOptions(): PkOption[] {\n if (this.usesAsyncSearch) {\n return this.options.filter((option) => !this.isOptionInHiddenGroup(option));\n }\n\n const filter = this.getFilterQuery();\n\n return this.options.filter((option) => {\n if (this.isOptionInHiddenGroup(option)) {\n return false;\n }\n\n if (!filter) {\n return true;\n }\n\n return matchesOptionFilter(option, filter, this.filter);\n });\n }\n\n private getEnabledVisibleOptions(): PkOption[] {\n return this.getVisibleOptions().filter((option) => !option.disabled);\n }\n\n private clearAsyncOptionNodes(): void {\n this.querySelectorAll(':scope > pk-option, :scope > pk-option-group, :scope > pk-separator')\n .forEach((node) => node.remove());\n }\n\n private renderAsyncOptionNodes(items: PkAutocompleteAsyncOption[]): void {\n this.clearAsyncOptionNodes();\n\n for (const item of items) {\n const option = document.createElement('pk-option');\n option.value = item.value;\n option.textContent = item.label;\n this.append(option);\n }\n\n this.handleOptionsMutation({ render: true });\n }\n\n private scheduleAsyncFetch(query: string): void {\n this.ensureAsyncFetcher().schedule(query);\n }\n\n private ensureAsyncFetcher(): AsyncOptionFetcher {\n if (!this.asyncFetcher) {\n this.asyncFetcher = new AsyncOptionFetcher(\n () => this.fetchOptions,\n {\n errorLabel: 'autocomplete options',\n onLoading: () => {\n this.asyncLoading = true;\n this.asyncError = null;\n // Drop previous results so loading never stacks under a stale list.\n this.renderAsyncOptionNodes([]);\n },\n onResults: (results) => {\n this.renderAsyncOptionNodes(results);\n },\n onError: (message) => {\n this.asyncError = message;\n },\n onSettled: () => {\n this.asyncLoading = false;\n },\n onEmptyQuery: () => {\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n },\n },\n );\n }\n\n return this.asyncFetcher;\n }\n\n private getAsyncStatusMessage(): string | null {\n if (!this.usesAsyncSearch || !this.open) {\n return null;\n }\n\n if (this.asyncLoading) {\n return this.loadingMessage;\n }\n\n if (this.asyncError) {\n return this.asyncError;\n }\n\n const query = this.value.trim();\n\n if (!query) {\n return this.startTypingMessage;\n }\n\n if (this.getEnabledVisibleOptions().length === 0) {\n return `No matches for \"${query}\".`;\n }\n\n return null;\n }\n\n private applyOptionState(): void {\n const visible = this.getVisibleOptions();\n const filterQuery = this.open ? this.getFilterQuery() : '';\n\n // Freeform: never mark options as the “selected” form value — the text is.\n syncFilteredOptions({\n host: this,\n options: this.options,\n visible,\n listboxId: this.listboxId,\n filterQuery,\n isSelected: () => false,\n });\n\n this.syncValueInput();\n\n if (this.open) {\n this.syncHighlight();\n this.announceFilterResults();\n }\n }\n\n private syncValueInput(): void {\n if (!this.input) {\n return;\n }\n\n this.input.value = this.value;\n this.input.required = this.required;\n }\n\n private resetHighlightedIndexOnOpen(): void {\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n }\n\n private syncHighlight(): void {\n const enabled = this.getEnabledVisibleOptions();\n\n for (const option of this.options) {\n option.highlighted = false;\n option.focusIndex = -1;\n }\n\n if (enabled.length === 0 || this.highlightedIndex < 0) {\n return;\n }\n\n if (this.highlightedIndex >= enabled.length) {\n this.highlightedIndex = enabled.length - 1;\n }\n\n const highlighted = enabled[this.highlightedIndex];\n\n if (highlighted) {\n highlighted.highlighted = true;\n // Keep focus on the text field; use aria-activedescendant for the option.\n highlighted.focusIndex = -1;\n scrollIntoView(highlighted, this.listScrollContainer, 'vertical', 'auto');\n this.controlInput?.focus({ preventScroll: true });\n }\n }\n\n private getActiveDescendantId(): string | null {\n const highlighted = this.getEnabledVisibleOptions()[this.highlightedIndex];\n return highlighted?.optionId || null;\n }\n\n private announceFilterResults(): void {\n if (!this.liveRegion) {\n this.liveRegion = new LiveRegion('polite');\n }\n\n const count = this.getEnabledVisibleOptions().length;\n const filter = this.getFilterQuery();\n\n if (!filter) {\n return;\n }\n\n this.liveRegion.announce(\n count === 0\n ? `${this.emptyMessage}`\n : `${count} ${count === 1 ? 'result' : 'results'} available`,\n );\n }\n\n private openPanel(): Promise<void> {\n const anchor = this.controlElement;\n\n if (!anchor) {\n return Promise.resolve();\n }\n\n if (this.open) {\n this.controlInput?.focus({ preventScroll: true });\n return Promise.resolve();\n }\n\n if (this.closing) {\n return Promise.resolve();\n }\n\n this.dispatchEvent(new PkShowEvent());\n this.closing = false;\n this.panelAnimated = false;\n this.open = true;\n this.applyOptionState();\n this.resetHighlightedIndexOnOpen();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n // Freeform async: value is the query. Clear stale nodes and show loading\n // immediately when reopening with text so “Searching…” never sits under\n // the previous result list during debounce.\n this.renderAsyncOptionNodes([]);\n const query = this.value.trim();\n this.asyncLoading = Boolean(query);\n this.scheduleAsyncFetch(query);\n }\n\n this.style.setProperty('--pk-autocomplete-anchor-width', `${anchor.getBoundingClientRect().width}px`);\n this.popupElement.active = true;\n\n if (this.panelElement) {\n this.panelElement.hidden = false;\n syncPopupPlacementAnimation(this.panelElement, this.placement);\n }\n\n this.registerDismissHandlers();\n this.syncHighlight();\n this.controlInput?.focus({ preventScroll: true });\n\n return this.updateComplete.then(async () => {\n const placement = await waitForPopupReposition(this.popupElement, this.placement, 300, {\n requireEvent: true,\n });\n\n if (this.panelElement) {\n syncPopupPlacementAnimation(this.panelElement, placement);\n }\n\n this.panelAnimated = true;\n this.bindPanelEvents();\n this.refreshOptions();\n this.controlInput?.focus({ preventScroll: true });\n\n this.dispatchEvent(new PkAfterShowEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: true },\n bubbles: true,\n composed: true,\n }));\n });\n }\n\n private async closePanel(source: PkOverlaySource = 'unknown'): Promise<void> {\n if (!this.open || this.closing) {\n return;\n }\n\n const hideEvent = new PkHideEvent(source);\n\n if (!this.dispatchEvent(hideEvent)) {\n return;\n }\n\n this.unbindPanelEvents();\n this.closing = true;\n this.panelAnimated = false;\n await waitForPopupContentExitAnimation(this.panelElement);\n\n this.open = false;\n this.closing = false;\n this.panelAnimated = false;\n\n if (this.panelElement) {\n this.panelElement.hidden = true;\n this.panelElement.removeAttribute('data-side');\n }\n\n this.popupElement.active = false;\n this.unregisterDismissHandlers();\n this.applyOptionState();\n\n if (this.usesAsyncSearch) {\n this.asyncFetcher?.cancel();\n this.asyncLoading = false;\n this.asyncError = null;\n this.renderAsyncOptionNodes([]);\n }\n\n if (source !== 'light-dismiss' && source !== 'pointer-dismiss') {\n this.controlInput?.focus({ preventScroll: true });\n } else {\n this.controlInput?.blur();\n }\n\n this.dispatchEvent(new PkAfterHideEvent());\n this.dispatchEvent(new CustomEvent('pk-open-change', {\n detail: { open: false },\n bubbles: true,\n composed: true,\n }));\n }\n\n private registerDismissHandlers(): void {\n registerDismissible(this);\n this.dismissRegistered = true;\n document.addEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.addEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private unregisterDismissHandlers(): void {\n if (this.dismissRegistered) {\n unregisterDismissible(this);\n this.dismissRegistered = false;\n }\n\n document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);\n document.removeEventListener('keydown', this.onDocumentKeyDown, true);\n }\n\n private onDocumentPointerDown = (event: PointerEvent): void => {\n if (isPointerInsideOverlay(event, {\n anchor: this.controlElement,\n panel: this.panelElement,\n })) {\n return;\n }\n\n void this.closePanel('light-dismiss');\n };\n\n private onDocumentKeyDown = (event: KeyboardEvent): void => {\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Escape') {\n if (!isTopDismissible(this)) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n void this.closePanel('escape');\n return;\n }\n\n const isListboxKey = LISTBOX_NAVIGATION_KEYS.has(event.key) || isListboxTypeToSelectKey(event);\n\n if (!isListboxKey) {\n return;\n }\n\n const panel = this.panelElement;\n const path = event.composedPath();\n const focusInPortaledPanel = Boolean(panel && path.includes(panel));\n\n if (!focusInPortaledPanel) {\n return;\n }\n\n if (!isEventInsideOverlay(event, {\n anchor: this.controlElement,\n panel,\n })) {\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n this.onListboxKeyDown(event);\n };\n\n private handleOptionSelect = (event: CustomEvent<{ value: string }>): void => {\n const { value } = event.detail;\n this.commitValue(value, { close: true });\n };\n\n private handleOptionHighlight = (event: CustomEvent<{ value: string }>): void => {\n if (!this.open) {\n return;\n }\n\n const enabled = this.getEnabledVisibleOptions();\n const index = enabled.findIndex((option) => option.value === event.detail.value);\n\n if (index === -1 || index === this.highlightedIndex) {\n return;\n }\n\n this.highlightedIndex = index;\n this.syncHighlight();\n };\n\n private commitValue(next: string, { close = false, emit = true } = {}): void {\n const changed = this.value !== next;\n this.value = next;\n this.syncHasValueAttribute();\n this.applyOptionState();\n\n if (close) {\n void this.closePanel('api');\n }\n\n if (changed && emit) {\n this.emitValueChange();\n }\n }\n\n private handleClear(event: Event): void {\n event.preventDefault();\n event.stopPropagation();\n this.commitValue('');\n this.dispatchEvent(new PkClearEvent());\n this.controlInput?.focus();\n }\n\n private emitValueChange(): void {\n this.dispatchEvent(new CustomEvent('pk-change', {\n detail: { value: this.value },\n bubbles: true,\n composed: true,\n }));\n\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n }\n\n private handleInput(event: Event): void {\n const next = (event.target as HTMLInputElement).value;\n this.value = next;\n this.syncHasValueAttribute();\n this.highlightedIndex = this.autoHighlight ? 0 : -1;\n this.applyOptionState();\n this.emitValueChange();\n\n if (this.usesAsyncSearch) {\n this.asyncError = null;\n this.scheduleAsyncFetch(next.trim());\n }\n\n if (!this.open) {\n void this.openPanel();\n }\n }\n\n private handleControlMouseDown = (event: MouseEvent): void => {\n if (this.disabled) {\n return;\n }\n\n const path = event.composedPath();\n const isInteractiveChild = path.some((node) => {\n if (!(node instanceof HTMLElement)) {\n return false;\n }\n\n return node.classList.contains('clear-button');\n });\n\n if (isInteractiveChild) {\n return;\n }\n\n const isInput = event.target === this.controlInput;\n\n if (!this.open && !this.closing) {\n if (!isInput) {\n event.preventDefault();\n }\n\n this.controlInput?.focus({ preventScroll: true });\n void this.openPanel();\n return;\n }\n\n if (!isInput) {\n event.preventDefault();\n this.controlInput?.focus({ preventScroll: true });\n }\n };\n\n private handleInputKeyDown(event: KeyboardEvent): void {\n if (event.key === 'Escape' && this.open) {\n event.preventDefault();\n void this.closePanel('escape');\n return;\n }\n\n if (event.key === 'ArrowDown' && !this.open) {\n event.preventDefault();\n void this.openPanel();\n return;\n }\n\n if (!this.open) {\n return;\n }\n\n if (event.key === 'Enter') {\n const enabled = this.getEnabledVisibleOptions();\n\n if (this.highlightedIndex >= 0 && enabled[this.highlightedIndex]) {\n event.preventDefault();\n this.commitValue(enabled[this.highlightedIndex]!.value, { close: true });\n } else {\n void this.closePanel('api');\n }\n\n return;\n }\n\n if (LISTBOX_NAVIGATION_KEYS.has(event.key) && event.key !== 'Enter' && event.key !== 'Escape') {\n this.onListboxKeyDown(event);\n }\n }\n\n private onListboxKeyDown(event: KeyboardEvent): void {\n const enabled = this.getEnabledVisibleOptions() as unknown as HTMLElement[];\n\n this.highlightedIndex = handleListboxKeyDown(event, {\n items: enabled,\n currentIndex: this.highlightedIndex,\n loop: this.loopFocus,\n onSelect: (index) => {\n const option = this.getEnabledVisibleOptions()[index];\n\n if (option) {\n this.commitValue(option.value, { close: true });\n }\n },\n onClose: () => {\n void this.closePanel('escape');\n },\n focusItem: (index) => {\n this.highlightedIndex = index;\n this.syncHighlight();\n },\n });\n }\n\n private handleListboxKeyDownEvent = (event: CustomEvent<{ keyboardEvent: KeyboardEvent }>): void => {\n this.onListboxKeyDown(event.detail.keyboardEvent);\n };\n\n async hide(source: PkOverlaySource = 'api'): Promise<void> {\n await this.closePanel(source);\n }\n\n private renderHostDecorationSlot(name: 'start' | 'end') {\n if (!this.hasSlotController.test(name)) {\n return nothing;\n }\n\n return html`<slot name=${name} part=${name} class=${name === 'start' ? 'control-start' : 'control-end'}></slot>`;\n }\n\n override render() {\n const visibleOptions = this.getEnabledVisibleOptions();\n // Async empty / loading / errors use `async-status` only — do not also paint\n // `emptyMessage` or the panel shows two notices for the same empty result.\n const showEmpty = this.open && !this.usesAsyncSearch && visibleOptions.length === 0;\n const asyncStatus = this.getAsyncStatusMessage();\n const showClear = (this.clearable || this.withClear) && Boolean(this.value) && !this.disabled;\n const activeDescendant = this.open ? this.getActiveDescendantId() : null;\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=\"control\"\n class=${classMap({\n control: true,\n 'is-disabled': this.disabled,\n })}\n data-popup-open=${this.open || this.closing ? '' : nothing}\n @mousedown=${this.handleControlMouseDown}\n >\n ${this.renderHostDecorationSlot('start')}\n <input\n part=\"input\"\n class=\"autocomplete-input control-input\"\n type=\"text\"\n role=\"combobox\"\n id=${this.inputId}\n .value=${this.value}\n placeholder=${this.placeholder || nothing}\n ?disabled=${this.disabled}\n aria-label=${this.ariaLabel ?? nothing}\n aria-expanded=${this.open ? 'true' : 'false'}\n aria-controls=${this.listboxId}\n aria-autocomplete=\"both\"\n aria-activedescendant=${activeDescendant ?? nothing}\n @input=${this.handleInput}\n @keydown=${this.handleInputKeyDown}\n />\n ${this.renderHostDecorationSlot('end')}\n ${showClear\n ? html`\n <button\n type=\"button\"\n class=\"clear-button\"\n part=\"clear-button\"\n aria-label=\"Clear\"\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 </div>\n <pk-popup\n .active=${this.open || this.closing}\n .anchor=${this.controlElement ?? ''}\n .placement=${this.placement}\n .distance=${this.sideOffset}\n .sync=${'width'}\n flip\n shift\n >\n <div\n part=\"panel\"\n class=${classMap({\n panel: true,\n 'pk-popup-content': true,\n closing: this.closing,\n })}\n tabindex=\"-1\"\n ?hidden=${!this.open && !this.closing}\n data-open=${this.panelAnimated && !this.closing ? '' : nothing}\n >\n <div\n part=\"panel-body\"\n class=\"panel-body\"\n id=${this.listboxId}\n role=\"listbox\"\n aria-busy=${this.usesAsyncSearch && this.asyncLoading ? 'true' : nothing}\n >\n <slot></slot>\n ${asyncStatus\n ? html`\n <div part=\"async-status\" class=\"async-status\" role=\"status\">${asyncStatus}</div>\n `\n : nothing}\n ${showEmpty\n ? html`\n <div part=\"empty\" class=\"empty\">${this.emptyMessage}</div>\n `\n : nothing}\n </div>\n </div>\n </pk-popup>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-autocomplete': PkAutocomplete;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-button-BWGDkuzc.js → pk-button-BrH4u4Qr.js} RENAMED Viewed

@@ -629,6 +629,7 @@ var PkButton = class PkButton extends PkElement {
 		this.groupTrigger = false;
 		this.icon = false;
 		this.title = "";
+		this.ariaLabel = null;
 		this.type = "button";
 		this.hasDefaultSlotContent = false;
 		this.hasStartSlotContent = false;
@@ -720,15 +721,17 @@ var PkButton = class PkButton extends PkElement {
 	render() {
 		const spinnerSize = this.spinnerSize || getButtonSpinnerSize(this.size);
 		const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);
+		const isLink = Boolean(this.href);
+		const accessibleName = this.ariaLabel || this.title || "";
 		return html`
-            ${Boolean(this.href) ? html`
+            ${isLink ? html`
                     <a
                         part="base"
                         class=${this.buttonClasses()}
                         href=${this.href}
                         target=${this.target ?? nothing}
                         rel=${this.rel ?? nothing}
-                        title=${this.title || nothing}
+                        aria-label=${accessibleName || nothing}
                     >
                         ${this.renderInner(spinnerSize, spinnerVariant)}
                     </a>
@@ -740,9 +743,9 @@ var PkButton = class PkButton extends PkElement {
                         ?disabled=${this.disabled}
                         aria-disabled=${this.disabled ? "true" : nothing}
                         aria-busy=${this.loading ? "true" : nothing}
+                        aria-label=${accessibleName || nothing}
                         name=${this.name ?? nothing}
                         value=${this.value ?? nothing}
-                        title=${this.title || nothing}
                     >
                         ${this.renderInner(spinnerSize, spinnerVariant)}
                     </button>
@@ -832,6 +835,7 @@ __decorate([property()], PkButton.prototype, "rel", void 0);
 __decorate([property()], PkButton.prototype, "name", void 0);
 __decorate([property()], PkButton.prototype, "value", void 0);
 __decorate([property()], PkButton.prototype, "title", void 0);
+__decorate([property({ attribute: "aria-label" })], PkButton.prototype, "ariaLabel", void 0);
 __decorate([property()], PkButton.prototype, "type", void 0);
 __decorate([property({ reflect: true })], PkButton.prototype, "form", void 0);
 __decorate([state()], PkButton.prototype, "hasDefaultSlotContent", void 0);
@@ -841,4 +845,4 @@ PkButton = __decorate([customElement("pk-button")], PkButton);
 //#endregion
 export { PkButton as t };
-//# sourceMappingURL=pk-button-BWGDkuzc.js.map
+//# sourceMappingURL=pk-button-BrH4u4Qr.js.map

package/dist/chunks/{pk-button-BWGDkuzc.js.map → pk-button-BrH4u4Qr.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pk-button-BWGDkuzc.js","names":[],"sources":["../../src/components/button/pk-button.styles.ts","../../src/components/button/pk-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { hostDisplayInlineBlock } from '../../base/styles.js';\nimport { iconStyles } from '../../base/icon.styles.js';\nimport {\n buttonGroupBorderJoinStyles,\n buttonGroupCornerRadiusStyles,\n buttonGroupCornerRoleStyles,\n buttonGroupIndentStyles,\n} from '../button-group/button-group-item.styles.js';\n\nexport const pkButtonStyles = [\n hostDisplayInlineBlock,\n iconStyles,\n buttonGroupCornerRoleStyles(),\n buttonGroupCornerRadiusStyles('.button'),\n buttonGroupIndentStyles(),\n buttonGroupBorderJoinStyles('.button'),\n css`\n @layer pk-component {\n :host {\n font-family: var(--pk-font-family);\n cursor: pointer;\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n /\n Slotted labels inherit from the host — pin the size-token font\n * (and button line-height) so Craft CP / Tailwind hosts match.\n /\n font-size: var(--pk-btn-font);\n line-height: 1.2;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([loading]):not([disabled]) {\n pointer-events: none;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pk-btn-icon-gap);\n box-sizing: border-box;\n width: auto;\n margin: 0;\n / Every button carries a 1px border (transparent for fill/plain variants) so the box\n * model is identical across variants and states. Prevents width shift when swapping a\n * button between filled and outline/dashed, or toggling states. Matches Bootstrap\n * (transparent baseline) and (border always present, only color changes).\n /\n border: 1px solid transparent;\n border-radius: var(--pk-btn-radius);\n font: inherit;\n font-size: var(--pk-btn-font);\n font-weight: 400;\n line-height: 1.2;\n text-decoration: none;\n white-space: nowrap;\n / Inherit host cursor so className/style (e.g. cursor-move) pierce shadow. /\n cursor: inherit;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n background: var(--pk-btn-fill, var(--pk-action-fill));\n color: var(--pk-btn-on, var(--pk-action-on));\n height: var(--pk-btn-height);\n min-height: var(--pk-btn-height);\n / Block padding defaults to 0 (height tokens center content). Override for nav rows. /\n padding-block: var(--pk-btn-padding-block, 0);\n padding-inline: var(--pk-btn-padding-inline);\n transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;\n }\n\n .button:disabled {\n opacity: 0.5;\n }\n\n .icon-slot {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n }\n\n .icon-slot--has-content {\n display: inline-flex;\n }\n\n / Fixed token sizes for all icons (labeled or icon-only) — matches plugin-kit-react Button. /\n .icon-slot slot::slotted(svg),\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .icon-slot slot::slotted(img),\n slot[name='start']::slotted(img),\n slot[name='end']::slotted(img) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n object-fit: contain;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n / pk-icon sizes itself from font-size (1em), so scale it to the\n * icon token. This keeps the idiomatic slotted pk-icon usage in\n * sync with raw slotted svg. Set width/height explicitly — %/size-full\n * collapses when the icon-slot has no definite box.\n /\n .icon-slot slot::slotted(pk-icon),\n slot[name='start']::slotted(pk-icon),\n slot[name='end']::slotted(pk-icon) {\n font-size: var(--pk-btn-icon-size);\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n / Kill pk-icon's text-baseline nudge (-0.125em) — flex slots center optically. /\n vertical-align: 0;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n line-height: 1.2;\n }\n\n / Trailing slot (status): grow + clip the label so end sits at the far edge\n * and long titles truncate instead of colliding with the indicator.\n /\n .button:has(.icon-slot--end.icon-slot--has-content) .label:not(.is-empty) {\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .label.is-empty {\n display: none;\n }\n\n / Icon-only (no label): square hit box = size height. Button owns the target;\n * glyph size comes from --pk-btn-icon-size. Do not Tailwind-size the Icon.\n * Opt out with icon (compact), size=none, or group-trigger (narrow disclosure cap).\n /\n :host(:not([icon]):not([size='none']):not([group-trigger])) .button:not(.has-label) {\n width: var(--pk-btn-height);\n min-width: var(--pk-btn-height);\n padding-inline: 0;\n }\n\n / Compact density (icon attr): padless box that hugs the glyph.\n * size still drives --pk-btn-icon-size; height/width tiers do not apply.\n * Use for dense x / ellipsis in cells — not for table action rows (prefer square above).\n * line-height: 0 collapses whitespace flex-struts so the glyph sits dead-center.\n /\n :host([icon]) {\n display: inline-flex;\n line-height: 0;\n vertical-align: middle;\n }\n\n :host([icon]) .button {\n display: flex;\n width: auto;\n min-width: 0;\n height: auto;\n min-height: 0;\n padding-inline: 0.25rem;\n padding-block: 0;\n line-height: 0;\n align-items: center;\n justify-content: center;\n }\n\n / Keep label space while loading even before slotchange runs. /\n .button.loading .label.is-empty {\n display: inline-flex;\n visibility: hidden;\n }\n\n / Sizes — token-driven scale (see tokens.css) /\n :host([size='xxs']) {\n --pk-btn-height: var(--pk-btn-height-xxs);\n --pk-btn-font: var(--pk-btn-font-xxs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xxs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xxs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xxs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xxs);\n --pk-btn-radius: var(--pk-btn-radius-xxs);\n }\n\n :host([size='xs']) {\n --pk-btn-height: var(--pk-btn-height-xs);\n --pk-btn-font: var(--pk-btn-font-xs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xs);\n --pk-btn-radius: var(--pk-btn-radius-xs);\n }\n\n :host([size='sm']) {\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-icon-gap: var(--pk-btn-icon-gap-sm);\n --pk-btn-caret-size: var(--pk-btn-caret-size-sm);\n --pk-btn-radius: var(--pk-btn-radius-sm);\n }\n\n :host([size='default']) {\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n }\n\n :host([size='lg']) {\n --pk-btn-height: var(--pk-btn-height-lg);\n --pk-btn-font: var(--pk-btn-font-lg);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-lg);\n --pk-btn-icon-size: var(--pk-btn-icon-size-lg);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-lg);\n --pk-btn-caret-size: var(--pk-btn-caret-size-lg);\n --pk-btn-radius: var(--pk-btn-radius-lg);\n }\n\n :host([size='xl']) {\n --pk-btn-height: var(--pk-btn-height-xl);\n --pk-btn-font: var(--pk-btn-font-xl);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xl);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xl);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xl);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xl);\n --pk-btn-radius: var(--pk-btn-radius-xl);\n }\n\n / No preset scale — size to content or set --pk-btn-* on the host for one-off dimensions\n * (height, padding, font, icon, radius) without fighting a named size tier.\n * Pair with icon for a padless glyph host, or set --pk-btn-padding-inline / --pk-btn-height yourself.\n /\n :host([size='none']) {\n --pk-btn-height: auto;\n --pk-btn-font: inherit;\n --pk-btn-padding-inline: 0px;\n --pk-btn-padding-block: 0px;\n --pk-btn-icon-size: 1em;\n --pk-btn-icon-gap: 0px;\n --pk-btn-caret-size: 1em;\n --pk-btn-radius: 0px;\n }\n\n :host([size='none']) .button {\n height: auto;\n min-height: auto;\n width: 100%;\n }\n\n / Variants /\n :host([variant='default']) {\n --pk-btn-fill: var(--pk-action-fill);\n --pk-btn-fill-hover: var(--pk-action-fill-hover);\n --pk-btn-fill-active: var(--pk-action-fill-active);\n --pk-btn-on: var(--pk-action-on);\n }\n\n :host([variant='primary']) {\n --pk-btn-fill: var(--pk-action-primary-fill);\n --pk-btn-fill-hover: var(--pk-action-primary-fill-hover);\n --pk-btn-fill-active: var(--pk-action-primary-fill-active);\n --pk-btn-on: var(--pk-action-primary-on);\n }\n\n :host([variant='primary']) .button,\n :host([variant='secondary']) .button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n :host([variant='secondary']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host([variant='outline']) .button {\n background: transparent;\n border-color: var(--pk-color-slate-400);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='transparent']) .button {\n background: transparent;\n color: var(--pk-color-gray-700);\n }\n\n / link/none opt out of the shared transparent 1px border: they never render a border, so\n * carrying one only pads the box by 2px inline (and 2px block at size='none', where height\n * is auto). These are the \"inline text\" / \"no chrome\" variants — content-sized is the point,\n * and neither participates in button-group border joins. Other variants keep the stable box.\n /\n /\n * Craft CP sets --link-color on :root (inherits into shadow). Prefer that,\n * then kit --pk-color-link — not sky-700 (reads as a different “CP blue”).\n * Color on :host so consumer utilities (e.g. text-[var(--link-color)]) can override.\n * Height must be content-sized — default --pk-btn-height (34px) bloated table rows.\n /\n :host([variant='link']) {\n color: var(--link-color, var(--pk-color-link));\n --pk-btn-height: auto;\n --pk-btn-padding-inline: 0;\n --pk-btn-padding-block: 0;\n }\n\n :host([variant='link']) .button {\n background: transparent;\n border-width: 0;\n border-radius: 0;\n color: inherit;\n width: auto;\n height: auto;\n min-height: 0;\n padding: 0;\n text-underline-offset: 2px;\n }\n\n :host([variant='dashed']) .button {\n background: transparent;\n border-style: dashed;\n border-color: var(--pk-color-slate-500);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='none']) .button {\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n }\n\n / Interaction — pseudo-classes only; playground matrices use dev/pk-button-demo-states.css /\n .button:hover:not(:disabled) {\n background: var(--pk-btn-fill-hover, var(--pk-btn-fill));\n }\n\n :host([variant='outline']) .button:hover:not(:disabled),\n :host([variant='transparent']) .button:hover:not(:disabled),\n :host([variant='dashed']) .button:hover:not(:disabled) {\n background: var(--pk-color-slate-150);\n }\n\n :host([variant='link']) .button:hover:not(:disabled) {\n background: transparent;\n text-decoration: underline;\n }\n\n :host([variant='none']) .button:hover:not(:disabled) {\n background: transparent;\n }\n\n .button:active:not(:disabled) {\n background: var(--pk-btn-fill-active, var(--pk-btn-fill-hover, var(--pk-btn-fill)));\n }\n\n :host([variant='outline']) .button:active:not(:disabled),\n :host([variant='transparent']) .button:active:not(:disabled),\n :host([variant='dashed']) .button:active:not(:disabled) {\n background: var(--pk-color-slate-200);\n }\n\n :host([variant='link']) .button:active:not(:disabled),\n :host([variant='none']) .button:active:not(:disabled) {\n background: transparent;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n / Bordered variants: fold the button's own border into the focus ring by recoloring it to\n * the accent (and solidifying dashed) so focus reads as one cohesive ring instead of a\n * doubled border. The ring is thinned to 1px here because the recolored 1px border already\n * supplies the other half — total 2px, matching the filled variants' ring weight.\n /\n :host([variant='outline']) .button:focus-visible,\n :host([variant='dashed']) .button:focus-visible {\n border-color: var(--pk-color-sky-600);\n box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 5px 1px hsl(from var(--pk-color-sky-600) h s l / 0.7);\n }\n\n :host([variant='dashed']) .button:focus-visible {\n border-style: solid;\n }\n\n :host(.pk-dialog__close) .button:focus-visible {\n box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group) {\n position: relative;\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .button {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group:focus-visible) {\n z-index: 2;\n }\n\n / Bordered variants — matching border divider (filled uses margin gap via buttonGroupIndentStyles) /\n\n :host([variant='primary']) .button:focus-visible,\n :host([variant='secondary']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus-inset);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button {\n background: var(--pk-color-gray-500);\n color: var(--pk-color-white);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:hover:not(:disabled) {\n background: var(--pk-color-gray-550);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:active:not(:disabled) {\n background: var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([variant='link']) .button:focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n\n .button.loading {\n position: relative;\n cursor: default;\n pointer-events: none;\n }\n\n .label.loading {\n visibility: hidden;\n }\n\n .button.loading .icon-slot,\n .button.loading slot[name='start']::slotted(),\n .button.loading slot[name='end']::slotted() {\n visibility: hidden;\n }\n\n .button.caret .icon-slot--end.icon-slot--has-content {\n display: none;\n }\n\n / Scope to the caret span — the button host also gets class caret when\n with-caret is set; an unscoped .caret rule was adding 2px margin\n to the whole button and shifting dropdown anchors left. /\n .button > .caret {\n display: inline-flex;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n / Sits slightly further from the label than the flex gap alone. /\n margin-inline-start: 2px;\n }\n\n / Caret has its own per-size token (--pk-btn-caret-size), kept deliberately smaller than\n * --pk-btn-icon-size so it reads as a subordinate dropdown affordance next to real icons.\n /\n .button > .caret svg {\n display: block;\n width: var(--pk-btn-caret-size);\n height: var(--pk-btn-caret-size);\n }\n\n :host([group-trigger]) .button {\n padding-inline: 6px;\n }\n\n / Compact disclosure cap — hide content, keep only the shared SVG caret (centered). /\n :host([group-trigger]) .label,\n :host([group-trigger]) .icon-slot {\n display: none;\n }\n\n :host([group-trigger]) .button > .caret {\n margin-inline-start: 0;\n }\n\n :host([size='sm'][group-trigger]) .button,\n :host([size='xs'][group-trigger]) .button,\n :host([size='xxs'][group-trigger]) .button {\n padding-inline: 6px;\n }\n\n :host([size='lg'][group-trigger]) .button {\n padding-inline: 10px;\n }\n\n :host([size='xl'][group-trigger]) .button {\n padding-inline: 12px;\n }\n\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\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 }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\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 }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: dashed;\n border-left-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: dashed;\n border-top-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-right-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-bottom-width: 0;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown, iconToSvg } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { getButtonSpinnerSize, resolveSpinnerVariant } from '../spinner/spinner-utils.js';\nimport type { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '../spinner/pk-spinner.js';\n\nexport type { PkSpinnerSize };\nimport '../spinner/pk-spinner.js';\nimport { pkButtonStyles } from './pk-button.styles.js';\n\nexport type PkButtonVariant =\n \| 'default'\n \| 'primary'\n \| 'secondary'\n \| 'outline'\n \| 'transparent'\n \| 'link'\n \| 'dashed'\n \| 'none';\n\nexport type PkButtonSize = 'default' \| 'xxs' \| 'xs' \| 'sm' \| 'lg' \| 'xl' \| 'none';\n\nconst CARET_ICON = iconToSvg(chevronDown);\n\n/\n Craft-aligned action button.\n \n @slot - Button label\n * @slot start - Leading icon or prefix\n * @slot end - Trailing icon or suffix\n \n @csspart base - The native button element\n /\n@customElement('pk-button')\nexport class PkButton extends PkElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkButtonStyles;\n\n @property({ reflect: true })\n variant: PkButtonVariant = 'default';\n\n @property({ reflect: true })\n size: PkButtonSize = 'default';\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /\n Override loading spinner size. When unset, derived from `size` via\n * `getButtonSpinnerSize` — same defaults as v1 Button (xxs/xs → xxs, lg/xl → sm, else xs).\n * Formie New Form passes `xs` on `size=\"lg\"` so the ring stays size-4 (1rem), not sm (1.5rem).\n /\n @property({ reflect: true, attribute: 'spinner-size' })\n spinnerSize?: PkSpinnerSize;\n\n @property({ reflect: true, attribute: 'spinner-variant' })\n spinnerVariant?: PkSpinnerVariant;\n\n @property({ reflect: true, attribute: 'spinner-tone' })\n spinnerTone?: PkSpinnerTone;\n\n @property({ type: Boolean, reflect: true, attribute: 'with-caret' })\n withCaret = false;\n\n /\n Compact chevron-only trigger for grouped split actions — Craft `.menubtn`.\n \n Not a variant or size: set this boolean on the disclosure end-cap in a split group.\n * Hides label/icons and draws a CSS `::after` chevron (0.4375rem, 2px borders).\n * Inherits `variant`/`size` from sibling buttons; inline padding narrows to 8px.\n * Do not pass a chevron icon — use `icon` + a start-slot icon for a padless square control.\n /\n @property({ type: Boolean, reflect: true, attribute: 'group-trigger' })\n groupTrigger = false;\n\n /\n Compact icon density: padless box that hugs the glyph (no square hit target).\n \n Prefer default icon-only usage for action rows — without this flag, icon-only\n * buttons are square (`width`/`height` = size height) with the glyph from\n * `--pk-btn-icon-size`. Use `icon` for dense × / ⋯ in cells.\n * For one-off dimensions use `size=\"none\"` and set `--pk-btn-` on the host.\n /\n @property({ type: Boolean, reflect: true })\n icon = false;\n\n @property()\n href?: string;\n\n @property()\n target?: string;\n\n @property()\n rel?: string;\n\n @property()\n name?: string;\n\n @property()\n value?: string;\n\n @property()\n title = '';\n\n @property()\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /*\n HTML form owner id — same as native `<button form=\"…\">`.\n * Needed when the submit control lives outside the `<form>` (e.g. dialog footer).\n /\n @property({ reflect: true })\n form?: string;\n\n @state()\n private hasDefaultSlotContent = false;\n\n @state()\n private hasStartSlotContent = false;\n\n @state()\n private hasEndSlotContent = false;\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private iconSlotChanged(event: Event, which: 'start' \| 'end'): void {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n\n if (which === 'start') {\n this.hasStartSlotContent = hasContent;\n } else {\n this.hasEndSlotContent = hasContent;\n }\n }\n\n private startSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'start');\n };\n\n private endSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'end');\n };\n\n private buttonClasses() {\n return classMap({\n button: true,\n 'has-label': this.hasDefaultSlotContent,\n loading: this.loading,\n caret: this.withCaret,\n 'group-trigger': this.groupTrigger,\n });\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('data-slot', 'button');\n this.addEventListener('click', this.handleHostClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this.handleHostClick);\n super.disconnectedCallback();\n }\n\n /\n Resolve the light-DOM form for submit/reset.\n * Prefer `form` id (dialog footer submitters), then ancestor `<form>`.\n * Never target Craft’s `#main` shell.\n /\n private resolveAssociatedForm(): HTMLFormElement \| null {\n const byId = (this.form \|\| this.getAttribute('form') \|\| '').trim();\n\n if (byId) {\n const el = this.ownerDocument?.getElementById(byId);\n\n if (el instanceof HTMLFormElement && el.id !== 'main') {\n return el;\n }\n }\n\n const closest = this.closest('form');\n\n if (closest && closest.id !== 'main') {\n return closest;\n }\n\n return null;\n }\n\n /\n Shadow inner `<button type=\"submit\|reset\">` is not a form owner for an\n * ancestor light-DOM `<form>` — bridge click → `requestSubmit` / `reset`.\n * Skip Craft’s `#main` shell form (same guard as implicit Enter submit).\n */\n private handleHostClick = (event: MouseEvent): void => {\n if (this.disabled \|\| this.loading \|\| this.href) {\n return;\n }\n\n if (this.type !== 'submit' && this.type !== 'reset') {\n return;\n }\n\n const form = this.resolveAssociatedForm();\n\n if (!form) {\n return;\n }\n\n // Stop the inner shadow button’s non-associated default; we own submit/reset.\n event.preventDefault();\n event.stopPropagation();\n\n if (this.type === 'reset') {\n form.reset();\n return;\n }\n\n if (typeof form.requestSubmit === 'function') {\n form.requestSubmit();\n return;\n }\n\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n };\n\n override render() {\n // Explicit spinner-size wins (v1 Button `spinnerSize`); else map from button size.\n const spinnerSize = this.spinnerSize \|\| getButtonSpinnerSize(this.size);\n const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);\n const isLink = Boolean(this.href);\n\n return html`\n ${isLink\n ? html`\n <a\n part=\"base\"\n class=${this.buttonClasses()}\n href=${this.href!}\n target=${this.target ?? nothing}\n rel=${this.rel ?? nothing}\n title=${this.title \|\| nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </a>\n `\n : html`\n <button\n part=\"base\"\n class=${this.buttonClasses()}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n name=${this.name ?? nothing}\n value=${this.value ?? nothing}\n title=${this.title \|\| nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </button>\n `}\n `;\n }\n\n private renderInner(spinnerSize: PkSpinnerSize, spinnerVariant: PkSpinnerVariant) {\n return html`\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--start': true,\n 'icon-slot--has-content': this.hasStartSlotContent,\n })}\n >\n <slot name=\"start\" @slotchange=${this.startSlotChanged}></slot>\n </span>\n ${this.loading\n ? html`\n <pk-spinner\n variant=${spinnerVariant}\n size=${spinnerSize}\n tone=${this.spinnerTone ?? nothing}\n centered\n ></pk-spinner>\n `\n : nothing}\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n loading: this.loading,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--end': true,\n 'icon-slot--has-content': this.hasEndSlotContent,\n })}\n >\n <slot name=\"end\" @slotchange=${this.endSlotChanged}></slot>\n </span>\n ${this.withCaret \|\| this.groupTrigger\n ? html`<span part=\"caret\" class=\"caret\">${unsafeSVG(CARET_ICON)}</span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button': PkButton;\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"pk-button-BrH4u4Qr.js","names":[],"sources":["../../src/components/button/pk-button.styles.ts","../../src/components/button/pk-button.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { hostDisplayInlineBlock } from '../../base/styles.js';\nimport { iconStyles } from '../../base/icon.styles.js';\nimport {\n buttonGroupBorderJoinStyles,\n buttonGroupCornerRadiusStyles,\n buttonGroupCornerRoleStyles,\n buttonGroupIndentStyles,\n} from '../button-group/button-group-item.styles.js';\n\nexport const pkButtonStyles = [\n hostDisplayInlineBlock,\n iconStyles,\n buttonGroupCornerRoleStyles(),\n buttonGroupCornerRadiusStyles('.button'),\n buttonGroupIndentStyles(),\n buttonGroupBorderJoinStyles('.button'),\n css`\n @layer pk-component {\n :host {\n font-family: var(--pk-font-family);\n cursor: pointer;\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n /\n Slotted labels inherit from the host — pin the size-token font\n * (and button line-height) so Craft CP / Tailwind hosts match.\n /\n font-size: var(--pk-btn-font);\n line-height: 1.2;\n }\n\n :host([disabled]) {\n cursor: not-allowed;\n pointer-events: none;\n }\n\n :host([loading]):not([disabled]) {\n pointer-events: none;\n }\n\n .button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--pk-btn-icon-gap);\n box-sizing: border-box;\n width: auto;\n margin: 0;\n / Every button carries a 1px border (transparent for fill/plain variants) so the box\n * model is identical across variants and states. Prevents width shift when swapping a\n * button between filled and outline/dashed, or toggling states. Matches Bootstrap\n * (transparent baseline) and (border always present, only color changes).\n /\n border: 1px solid transparent;\n border-radius: var(--pk-btn-radius);\n font: inherit;\n font-size: var(--pk-btn-font);\n font-weight: 400;\n line-height: 1.2;\n text-decoration: none;\n white-space: nowrap;\n / Inherit host cursor so className/style (e.g. cursor-move) pierce shadow. /\n cursor: inherit;\n user-select: none;\n vertical-align: middle;\n appearance: none;\n background: var(--pk-btn-fill, var(--pk-action-fill));\n color: var(--pk-btn-on, var(--pk-action-on));\n height: var(--pk-btn-height);\n min-height: var(--pk-btn-height);\n / Block padding defaults to 0 (height tokens center content). Override for nav rows. /\n padding-block: var(--pk-btn-padding-block, 0);\n padding-inline: var(--pk-btn-padding-inline);\n transition: background-color 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;\n }\n\n .button:disabled {\n opacity: 0.5;\n }\n\n .icon-slot {\n display: none;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n }\n\n .icon-slot--has-content {\n display: inline-flex;\n }\n\n / Fixed token sizes for all icons (labeled or icon-only) — matches plugin-kit-react Button. /\n .icon-slot slot::slotted(svg),\n slot[name='start']::slotted(svg),\n slot[name='end']::slotted(svg) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .icon-slot slot::slotted(img),\n slot[name='start']::slotted(img),\n slot[name='end']::slotted(img) {\n display: block;\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n object-fit: contain;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n / pk-icon sizes itself from font-size (1em), so scale it to the\n * icon token. This keeps the idiomatic slotted pk-icon usage in\n * sync with raw slotted svg. Set width/height explicitly — %/size-full\n * collapses when the icon-slot has no definite box.\n /\n .icon-slot slot::slotted(pk-icon),\n slot[name='start']::slotted(pk-icon),\n slot[name='end']::slotted(pk-icon) {\n font-size: var(--pk-btn-icon-size);\n width: var(--pk-btn-icon-size);\n height: var(--pk-btn-icon-size);\n / Kill pk-icon's text-baseline nudge (-0.125em) — flex slots center optically. /\n vertical-align: 0;\n flex-shrink: 0;\n pointer-events: none;\n }\n\n .label {\n display: inline-flex;\n align-items: center;\n min-width: 0;\n line-height: 1.2;\n }\n\n / Trailing slot (status): grow + clip the label so end sits at the far edge\n * and long titles truncate instead of colliding with the indicator.\n /\n .button:has(.icon-slot--end.icon-slot--has-content) .label:not(.is-empty) {\n flex: 1 1 auto;\n overflow: hidden;\n }\n\n .label.is-empty {\n display: none;\n }\n\n / Icon-only (no label): square hit box = size height. Button owns the target;\n * glyph size comes from --pk-btn-icon-size. Do not Tailwind-size the Icon.\n * Opt out with icon (compact), size=none, or group-trigger (narrow disclosure cap).\n /\n :host(:not([icon]):not([size='none']):not([group-trigger])) .button:not(.has-label) {\n width: var(--pk-btn-height);\n min-width: var(--pk-btn-height);\n padding-inline: 0;\n }\n\n / Compact density (icon attr): padless box that hugs the glyph.\n * size still drives --pk-btn-icon-size; height/width tiers do not apply.\n * Use for dense x / ellipsis in cells — not for table action rows (prefer square above).\n * line-height: 0 collapses whitespace flex-struts so the glyph sits dead-center.\n /\n :host([icon]) {\n display: inline-flex;\n line-height: 0;\n vertical-align: middle;\n }\n\n :host([icon]) .button {\n display: flex;\n width: auto;\n min-width: 0;\n height: auto;\n min-height: 0;\n padding-inline: 0.25rem;\n padding-block: 0;\n line-height: 0;\n align-items: center;\n justify-content: center;\n }\n\n / Keep label space while loading even before slotchange runs. /\n .button.loading .label.is-empty {\n display: inline-flex;\n visibility: hidden;\n }\n\n / Sizes — token-driven scale (see tokens.css) /\n :host([size='xxs']) {\n --pk-btn-height: var(--pk-btn-height-xxs);\n --pk-btn-font: var(--pk-btn-font-xxs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xxs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xxs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xxs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xxs);\n --pk-btn-radius: var(--pk-btn-radius-xxs);\n }\n\n :host([size='xs']) {\n --pk-btn-height: var(--pk-btn-height-xs);\n --pk-btn-font: var(--pk-btn-font-xs);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xs);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xs);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xs);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xs);\n --pk-btn-radius: var(--pk-btn-radius-xs);\n }\n\n :host([size='sm']) {\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-icon-gap: var(--pk-btn-icon-gap-sm);\n --pk-btn-caret-size: var(--pk-btn-caret-size-sm);\n --pk-btn-radius: var(--pk-btn-radius-sm);\n }\n\n :host([size='default']) {\n --pk-btn-height: var(--pk-btn-height-default);\n --pk-btn-font: var(--pk-btn-font-default);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-default);\n --pk-btn-icon-size: var(--pk-btn-icon-size-default);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-default);\n --pk-btn-caret-size: var(--pk-btn-caret-size-default);\n --pk-btn-radius: var(--pk-btn-radius-default);\n }\n\n :host([size='lg']) {\n --pk-btn-height: var(--pk-btn-height-lg);\n --pk-btn-font: var(--pk-btn-font-lg);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-lg);\n --pk-btn-icon-size: var(--pk-btn-icon-size-lg);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-lg);\n --pk-btn-caret-size: var(--pk-btn-caret-size-lg);\n --pk-btn-radius: var(--pk-btn-radius-lg);\n }\n\n :host([size='xl']) {\n --pk-btn-height: var(--pk-btn-height-xl);\n --pk-btn-font: var(--pk-btn-font-xl);\n --pk-btn-padding-inline: var(--pk-btn-padding-inline-xl);\n --pk-btn-icon-size: var(--pk-btn-icon-size-xl);\n --pk-btn-icon-gap: var(--pk-btn-icon-gap-xl);\n --pk-btn-caret-size: var(--pk-btn-caret-size-xl);\n --pk-btn-radius: var(--pk-btn-radius-xl);\n }\n\n / No preset scale — size to content or set --pk-btn-* on the host for one-off dimensions\n * (height, padding, font, icon, radius) without fighting a named size tier.\n * Pair with icon for a padless glyph host, or set --pk-btn-padding-inline / --pk-btn-height yourself.\n /\n :host([size='none']) {\n --pk-btn-height: auto;\n --pk-btn-font: inherit;\n --pk-btn-padding-inline: 0px;\n --pk-btn-padding-block: 0px;\n --pk-btn-icon-size: 1em;\n --pk-btn-icon-gap: 0px;\n --pk-btn-caret-size: 1em;\n --pk-btn-radius: 0px;\n }\n\n :host([size='none']) .button {\n height: auto;\n min-height: auto;\n width: 100%;\n }\n\n / Variants /\n :host([variant='default']) {\n --pk-btn-fill: var(--pk-action-fill);\n --pk-btn-fill-hover: var(--pk-action-fill-hover);\n --pk-btn-fill-active: var(--pk-action-fill-active);\n --pk-btn-on: var(--pk-action-on);\n }\n\n :host([variant='primary']) {\n --pk-btn-fill: var(--pk-action-primary-fill);\n --pk-btn-fill-hover: var(--pk-action-primary-fill-hover);\n --pk-btn-fill-active: var(--pk-action-primary-fill-active);\n --pk-btn-on: var(--pk-action-primary-on);\n }\n\n :host([variant='primary']) .button,\n :host([variant='secondary']) .button {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n }\n\n :host([variant='secondary']) {\n --pk-btn-fill: var(--pk-color-gray-500);\n --pk-btn-fill-hover: var(--pk-color-gray-550);\n --pk-btn-fill-active: var(--pk-color-gray-600);\n --pk-btn-on: var(--pk-color-white);\n }\n\n :host([variant='outline']) .button {\n background: transparent;\n border-color: var(--pk-color-slate-400);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='transparent']) .button {\n background: transparent;\n color: var(--pk-color-gray-700);\n }\n\n / link/none opt out of the shared transparent 1px border: they never render a border, so\n * carrying one only pads the box by 2px inline (and 2px block at size='none', where height\n * is auto). These are the \"inline text\" / \"no chrome\" variants — content-sized is the point,\n * and neither participates in button-group border joins. Other variants keep the stable box.\n /\n /\n * Craft CP sets --link-color on :root (inherits into shadow). Prefer that,\n * then kit --pk-color-link — not sky-700 (reads as a different “CP blue”).\n * Color on :host so consumer utilities (e.g. text-[var(--link-color)]) can override.\n * Height must be content-sized — default --pk-btn-height (34px) bloated table rows.\n /\n :host([variant='link']) {\n color: var(--link-color, var(--pk-color-link));\n --pk-btn-height: auto;\n --pk-btn-padding-inline: 0;\n --pk-btn-padding-block: 0;\n }\n\n :host([variant='link']) .button {\n background: transparent;\n border-width: 0;\n border-radius: 0;\n color: inherit;\n width: auto;\n height: auto;\n min-height: 0;\n padding: 0;\n text-underline-offset: 2px;\n }\n\n :host([variant='dashed']) .button {\n background: transparent;\n border-style: dashed;\n border-color: var(--pk-color-slate-500);\n color: var(--pk-color-gray-700);\n }\n\n :host([variant='none']) .button {\n border-width: 0;\n border-radius: 0;\n background: transparent;\n color: inherit;\n }\n\n / Interaction — pseudo-classes only; playground matrices use dev/pk-button-demo-states.css /\n .button:hover:not(:disabled) {\n background: var(--pk-btn-fill-hover, var(--pk-btn-fill));\n }\n\n :host([variant='outline']) .button:hover:not(:disabled),\n :host([variant='transparent']) .button:hover:not(:disabled),\n :host([variant='dashed']) .button:hover:not(:disabled) {\n background: var(--pk-color-slate-150);\n }\n\n :host([variant='link']) .button:hover:not(:disabled) {\n background: transparent;\n text-decoration: underline;\n }\n\n :host([variant='none']) .button:hover:not(:disabled) {\n background: transparent;\n }\n\n .button:active:not(:disabled) {\n background: var(--pk-btn-fill-active, var(--pk-btn-fill-hover, var(--pk-btn-fill)));\n }\n\n :host([variant='outline']) .button:active:not(:disabled),\n :host([variant='transparent']) .button:active:not(:disabled),\n :host([variant='dashed']) .button:active:not(:disabled) {\n background: var(--pk-color-slate-200);\n }\n\n :host([variant='link']) .button:active:not(:disabled),\n :host([variant='none']) .button:active:not(:disabled) {\n background: transparent;\n }\n\n .button:focus {\n outline: none;\n }\n\n .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n / Bordered variants: fold the button's own border into the focus ring by recoloring it to\n * the accent (and solidifying dashed) so focus reads as one cohesive ring instead of a\n * doubled border. The ring is thinned to 1px here because the recolored 1px border already\n * supplies the other half — total 2px, matching the filled variants' ring weight.\n /\n :host([variant='outline']) .button:focus-visible,\n :host([variant='dashed']) .button:focus-visible {\n border-color: var(--pk-color-sky-600);\n box-shadow: 0 0 0 1px var(--pk-color-sky-600), 0 0 5px 1px hsl(from var(--pk-color-sky-600) h s l / 0.7);\n }\n\n :host([variant='dashed']) .button:focus-visible {\n border-style: solid;\n }\n\n :host(.pk-dialog__close) .button:focus-visible {\n box-shadow: 0 0 0 2px var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group) {\n position: relative;\n }\n\n :host-context(pk-button-group[orientation='vertical']) {\n display: block;\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group[orientation='vertical']) .button {\n width: 100%;\n box-sizing: border-box;\n }\n\n :host-context(pk-button-group:focus-visible) {\n z-index: 2;\n }\n\n / Bordered variants — matching border divider (filled uses margin gap via buttonGroupIndentStyles) /\n\n :host([variant='primary']) .button:focus-visible,\n :host([variant='secondary']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus-inset);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button {\n background: var(--pk-color-gray-500);\n color: var(--pk-color-white);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:hover:not(:disabled) {\n background: var(--pk-color-gray-550);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:active:not(:disabled) {\n background: var(--pk-color-gray-600);\n }\n\n :host-context(pk-button-group[exclusive]):host([aria-pressed='true']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([variant='link']) .button:focus-visible {\n box-shadow: none;\n text-decoration: underline;\n }\n\n .button.loading {\n position: relative;\n cursor: default;\n pointer-events: none;\n }\n\n .label.loading {\n visibility: hidden;\n }\n\n .button.loading .icon-slot,\n .button.loading slot[name='start']::slotted(),\n .button.loading slot[name='end']::slotted() {\n visibility: hidden;\n }\n\n .button.caret .icon-slot--end.icon-slot--has-content {\n display: none;\n }\n\n / Scope to the caret span — the button host also gets class caret when\n with-caret is set; an unscoped .caret rule was adding 2px margin\n to the whole button and shifting dropdown anchors left. /\n .button > .caret {\n display: inline-flex;\n align-self: center;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n line-height: 0;\n / Sits slightly further from the label than the flex gap alone. /\n margin-inline-start: 2px;\n }\n\n / Caret has its own per-size token (--pk-btn-caret-size), kept deliberately smaller than\n * --pk-btn-icon-size so it reads as a subordinate dropdown affordance next to real icons.\n /\n .button > .caret svg {\n display: block;\n width: var(--pk-btn-caret-size);\n height: var(--pk-btn-caret-size);\n }\n\n :host([group-trigger]) .button {\n padding-inline: 6px;\n }\n\n / Compact disclosure cap — hide content, keep only the shared SVG caret (centered). /\n :host([group-trigger]) .label,\n :host([group-trigger]) .icon-slot {\n display: none;\n }\n\n :host([group-trigger]) .button > .caret {\n margin-inline-start: 0;\n }\n\n :host([size='sm'][group-trigger]) .button,\n :host([size='xs'][group-trigger]) .button,\n :host([size='xxs'][group-trigger]) .button {\n padding-inline: 6px;\n }\n\n :host([size='lg'][group-trigger]) .button {\n padding-inline: 10px;\n }\n\n :host([size='xl'][group-trigger]) .button {\n padding-inline: 12px;\n }\n\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='horizontal']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host-context(pk-button-group[orientation='vertical']):host([data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-left-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='dashed']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])[variant='transparent']) .button {\n border-top-width: 0;\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\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 }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button {\n box-shadow: none;\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 }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-left-width: 1px;\n border-left-style: dashed;\n border-left-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button {\n box-shadow: none;\n border-top-width: 1px;\n border-top-style: dashed;\n border-top-color: var(--pk-btn-group-divider-color-dashed, var(--pk-color-slate-500));\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='outline']) .button:focus-visible,\n :host([data-pk-group-orientation='vertical'][data-pk-group-divider][variant='dashed']) .button:focus-visible {\n box-shadow: var(--pk-shadow-focus);\n }\n\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='horizontal'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-right-width: 0;\n }\n\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='outline']) .button,\n :host([data-pk-group-orientation='vertical'][data-pk-group-internal-trail][variant='dashed']) .button {\n border-bottom-width: 0;\n }\n }\n `,\n];\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, state } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { chevronDown, iconToSvg } from '@verbb/plugin-kit-icons';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { getButtonSpinnerSize, resolveSpinnerVariant } from '../spinner/spinner-utils.js';\nimport type { PkSpinnerSize, PkSpinnerTone, PkSpinnerVariant } from '../spinner/pk-spinner.js';\n\nexport type { PkSpinnerSize };\nimport '../spinner/pk-spinner.js';\nimport { pkButtonStyles } from './pk-button.styles.js';\n\nexport type PkButtonVariant =\n \| 'default'\n \| 'primary'\n \| 'secondary'\n \| 'outline'\n \| 'transparent'\n \| 'link'\n \| 'dashed'\n \| 'none';\n\nexport type PkButtonSize = 'default' \| 'xxs' \| 'xs' \| 'sm' \| 'lg' \| 'xl' \| 'none';\n\nconst CARET_ICON = iconToSvg(chevronDown);\n\n/\n Craft-aligned action button.\n \n @slot - Button label\n * @slot start - Leading icon or prefix\n * @slot end - Trailing icon or suffix\n \n @csspart base - The native button / link element\n \n @cssproperty [--pk-btn-height=var(--pk-btn-height-default)] - Control height (also min-height).\n * @cssproperty [--pk-btn-font=var(--pk-btn-font-default)] - Label font size.\n * @cssproperty [--pk-btn-padding-inline=var(--pk-btn-padding-inline-default)] - Horizontal padding.\n * @cssproperty [--pk-btn-padding-block=0] - Vertical padding override.\n * @cssproperty [--pk-btn-icon-size=var(--pk-btn-icon-size-default)] - Start/end slot glyph size.\n * @cssproperty [--pk-btn-icon-gap=var(--pk-btn-icon-gap-default)] - Gap between icons and label.\n * @cssproperty [--pk-btn-caret-size=var(--pk-btn-caret-size-default)] - Built-in caret glyph size.\n * @cssproperty [--pk-btn-radius=var(--pk-btn-radius-default)] - Border radius.\n * @cssproperty [--pk-btn-fill] - Background fill (filled variants).\n * @cssproperty [--pk-btn-fill-hover] - Hover fill.\n * @cssproperty [--pk-btn-fill-active] - Active / pressed fill.\n * @cssproperty [--pk-btn-on] - Foreground color on filled variants.\n \n @dependency pk-spinner - Loading indicator rendered while `loading` is set.\n /\n@customElement('pk-button')\nexport class PkButton extends PkElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n };\n\n static override styles = pkButtonStyles;\n\n /* Visual treatment — filled, outline, link, etc. /\n @property({ reflect: true })\n variant: PkButtonVariant = 'default';\n\n /* Shared CP size scale (`xxs` … `xl`); `none` skips presets for host token overrides. /\n @property({ reflect: true })\n size: PkButtonSize = 'default';\n\n /* Disables the control and blocks activation. /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Shows an inline spinner and prevents activation while busy. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /\n Override loading spinner size. When unset, derived from `size` via\n * `getButtonSpinnerSize` — same defaults as v1 Button (xxs/xs → xxs, lg/xl → sm, else xs).\n * Formie New Form passes `xs` on `size=\"lg\"` so the ring stays size-4 (1rem), not sm (1.5rem).\n /\n @property({ reflect: true, attribute: 'spinner-size' })\n spinnerSize?: PkSpinnerSize;\n\n /* Loading spinner visual style. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-variant' })\n spinnerVariant?: PkSpinnerVariant;\n\n /* Loading spinner tone. Defaults from the button variant when unset. /\n @property({ reflect: true, attribute: 'spinner-tone' })\n spinnerTone?: PkSpinnerTone;\n\n /* Shows a disclosure caret after the label. /\n @property({ type: Boolean, reflect: true, attribute: 'with-caret' })\n withCaret = false;\n\n /\n Compact chevron-only trigger for grouped split actions — Craft `.menubtn`.\n \n Not a variant or size: set this boolean on the disclosure end-cap in a split group.\n * Hides label/icons and draws a CSS `::after` chevron (0.4375rem, 2px borders).\n * Inherits `variant`/`size` from sibling buttons; inline padding narrows to 8px.\n * Do not pass a chevron icon — use `icon` + a start-slot icon for a padless square control.\n /\n @property({ type: Boolean, reflect: true, attribute: 'group-trigger' })\n groupTrigger = false;\n\n /\n Compact icon density: padless box that hugs the glyph (no square hit target).\n \n Prefer default icon-only usage for action rows — without this flag, icon-only\n * buttons are square (`width`/`height` = size height) with the glyph from\n * `--pk-btn-icon-size`. Use `icon` for dense × / ⋯ in cells.\n * For one-off dimensions use `size=\"none\"` and set `--pk-btn-` on the host.\n /\n @property({ type: Boolean, reflect: true })\n icon = false;\n\n /** When set, renders as an anchor instead of a button. /\n @property()\n href?: string;\n\n /* Anchor `target` when `href` is set. /\n @property()\n target?: string;\n\n /* Anchor `rel` when `href` is set. /\n @property()\n rel?: string;\n\n /* Native `name` when used as a submit/reset control. /\n @property()\n name?: string;\n\n /* Native `value` when used as a submit control. /\n @property()\n value?: string;\n\n /\n Accessible name for icon-only / unlabeled controls.\n * Applied as `aria-label` — never as HTML `title` (no native hover tooltip).\n * Prefer the `aria-label` attribute when setting from markup; `title` remains\n * as a concise alias for the same accessible name.\n /\n @property()\n title = '';\n\n /* Accessible name — wins over {@link title} when both are set. /\n @property({ attribute: 'aria-label' })\n ariaLabel: string \| null = null;\n\n /* Native button type — ignored when `href` is set. /\n @property()\n type: 'button' \| 'submit' \| 'reset' = 'button';\n\n /\n HTML form owner id — same as native `<button form=\"…\">`.\n * Needed when the submit control lives outside the `<form>` (e.g. dialog footer).\n /\n @property({ reflect: true })\n form?: string;\n\n @state()\n private hasDefaultSlotContent = false;\n\n @state()\n private hasStartSlotContent = false;\n\n @state()\n private hasEndSlotContent = false;\n\n private defaultSlotChanged(event: Event): void {\n const slot = event.target as HTMLSlotElement;\n this.hasDefaultSlotContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n }\n\n private iconSlotChanged(event: Event, which: 'start' \| 'end'): void {\n const slot = event.target as HTMLSlotElement;\n const hasContent = slot.assignedNodes({ flatten: true }).some((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n return node.textContent?.trim();\n }\n\n return node.nodeType === Node.ELEMENT_NODE;\n });\n\n if (which === 'start') {\n this.hasStartSlotContent = hasContent;\n } else {\n this.hasEndSlotContent = hasContent;\n }\n }\n\n private startSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'start');\n };\n\n private endSlotChanged = (event: Event): void => {\n this.iconSlotChanged(event, 'end');\n };\n\n private buttonClasses() {\n return classMap({\n button: true,\n 'has-label': this.hasDefaultSlotContent,\n loading: this.loading,\n caret: this.withCaret,\n 'group-trigger': this.groupTrigger,\n });\n }\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('data-slot', 'button');\n this.addEventListener('click', this.handleHostClick);\n }\n\n override disconnectedCallback(): void {\n this.removeEventListener('click', this.handleHostClick);\n super.disconnectedCallback();\n }\n\n /\n Resolve the light-DOM form for submit/reset.\n * Prefer `form` id (dialog footer submitters), then ancestor `<form>`.\n * Never target Craft’s `#main` shell.\n /\n private resolveAssociatedForm(): HTMLFormElement \| null {\n const byId = (this.form \|\| this.getAttribute('form') \|\| '').trim();\n\n if (byId) {\n const el = this.ownerDocument?.getElementById(byId);\n\n if (el instanceof HTMLFormElement && el.id !== 'main') {\n return el;\n }\n }\n\n const closest = this.closest('form');\n\n if (closest && closest.id !== 'main') {\n return closest;\n }\n\n return null;\n }\n\n /\n Shadow inner `<button type=\"submit\|reset\">` is not a form owner for an\n * ancestor light-DOM `<form>` — bridge click → `requestSubmit` / `reset`.\n * Skip Craft’s `#main` shell form (same guard as implicit Enter submit).\n */\n private handleHostClick = (event: MouseEvent): void => {\n if (this.disabled \|\| this.loading \|\| this.href) {\n return;\n }\n\n if (this.type !== 'submit' && this.type !== 'reset') {\n return;\n }\n\n const form = this.resolveAssociatedForm();\n\n if (!form) {\n return;\n }\n\n // Stop the inner shadow button’s non-associated default; we own submit/reset.\n event.preventDefault();\n event.stopPropagation();\n\n if (this.type === 'reset') {\n form.reset();\n return;\n }\n\n if (typeof form.requestSubmit === 'function') {\n form.requestSubmit();\n return;\n }\n\n form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));\n };\n\n override render() {\n // Explicit spinner-size wins (v1 Button `spinnerSize`); else map from button size.\n const spinnerSize = this.spinnerSize \|\| getButtonSpinnerSize(this.size);\n const spinnerVariant = resolveSpinnerVariant(this.variant, this.spinnerVariant);\n const isLink = Boolean(this.href);\n // Accessible name only — never HTML title (native tooltips get in the way).\n const accessibleName = this.ariaLabel \|\| this.title \|\| '';\n\n return html`\n ${isLink\n ? html`\n <a\n part=\"base\"\n class=${this.buttonClasses()}\n href=${this.href!}\n target=${this.target ?? nothing}\n rel=${this.rel ?? nothing}\n aria-label=${accessibleName \|\| nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </a>\n `\n : html`\n <button\n part=\"base\"\n class=${this.buttonClasses()}\n type=${this.type}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled ? 'true' : nothing}\n aria-busy=${this.loading ? 'true' : nothing}\n aria-label=${accessibleName \|\| nothing}\n name=${this.name ?? nothing}\n value=${this.value ?? nothing}\n >\n ${this.renderInner(spinnerSize, spinnerVariant)}\n </button>\n `}\n `;\n }\n\n private renderInner(spinnerSize: PkSpinnerSize, spinnerVariant: PkSpinnerVariant) {\n return html`\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--start': true,\n 'icon-slot--has-content': this.hasStartSlotContent,\n })}\n >\n <slot name=\"start\" @slotchange=${this.startSlotChanged}></slot>\n </span>\n ${this.loading\n ? html`\n <pk-spinner\n variant=${spinnerVariant}\n size=${spinnerSize}\n tone=${this.spinnerTone ?? nothing}\n centered\n ></pk-spinner>\n `\n : nothing}\n <span\n class=${classMap({\n label: true,\n 'is-empty': !this.hasDefaultSlotContent,\n loading: this.loading,\n })}\n >\n <slot @slotchange=${this.defaultSlotChanged}></slot>\n </span>\n <span\n class=${classMap({\n 'icon-slot': true,\n 'icon-slot--end': true,\n 'icon-slot--has-content': this.hasEndSlotContent,\n })}\n >\n <slot name=\"end\" @slotchange=${this.endSlotChanged}></slot>\n </span>\n ${this.withCaret \|\| this.groupTrigger\n ? html`<span part=\"caret\" class=\"caret\">${unsafeSVG(CARET_ICON)}</span>`\n : nothing}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pk-button': PkButton;\n }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-calendar-enTOUCRD.js → pk-calendar-Z7Y0PjeY.js} RENAMED Viewed

@@ -1461,4 +1461,4 @@ PkCalendar = __decorate([customElement("pk-calendar")], PkCalendar);
 //#endregion
 export { parseIsoDate as a, parseDateList as i, coerceToDate as n, parseRange as o, formatIsoDate as r, PkCalendar as t };
-//# sourceMappingURL=pk-calendar-enTOUCRD.js.map
+//# sourceMappingURL=pk-calendar-Z7Y0PjeY.js.map