@verbb/plugin-kit-web 2.0.14 → 2.0.15

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 2.0.15 - 2026-09-04
+
+### Fixed
+- Idempotent `@customElement` now actually ships in component builds. The Vite
+  alias alone never applied when `lit` is external — published chunks still
+  imported Lit’s bare decorator and threw `NotSupportedError` when multiple
+  Craft plugins each bundled Plugin Kit. Components import `customElement` from
+  `src/decorators.ts` (safe `customElements.get` guard) instead.
+
 ## 2.0.14 - 2026-08-25
 
 ### Added

package/dist/chunks/{decorate-W02hmVTt.js → decorate-R0X811qp.js}

@@ -1,4 +1,15 @@
 import { LitElement, css, unsafeCSS } from "lit";
+import { property as property$1, query, state } from "lit/decorators.js";
+//#region src/internal/safe-custom-element.ts
+var customElement = (tagName) => (classOrTarget, context) => {
+	const define = () => {
+		if (customElements.get(tagName)) return;
+		customElements.define(tagName, classOrTarget);
+	};
+	if (context !== void 0) context.addInitializer(define);
+	else define();
+};
+//#endregion
 //#region src/base/styles.ts
 var sharedStyleSheets = /* @__PURE__ */ new Map();
 /**
@@ -144,6 +155,6 @@ function __decorate(decorators, target, key, desc) {
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 //#endregion
-export { PkElement as n, hostDisplayInlineBlock as r, __decorate as t };
+export { query as a, property$1 as i, PkElement as n, state as o, hostDisplayInlineBlock as r, customElement as s, __decorate as t };
 
-//# sourceMappingURL=decorate-W02hmVTt.js.map
+//# sourceMappingURL=decorate-R0X811qp.js.map

package/dist/chunks/decorate-R0X811qp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorate-R0X811qp.js","names":[],"sources":["../../src/internal/safe-custom-element.ts","../../src/base/styles.ts","../../src/base/shadow-reset.styles.ts","../../src/base/pk-element.ts"],"sourcesContent":["/**\n * Lit's `@customElement` always calls `customElements.define`. On Craft CP pages\n * that load multiple Plugin Kit consumers (each with its own bundled copy of the\n * same tag), the second define throws NotSupportedError and aborts the rest of\n * that register bundle. Skip redefine — first registrant wins.\n *\n * Drop-in replacement for `customElement` from `lit/decorators.js` /\n * `@lit/reactive-element/decorators/custom-element.js`.\n */\n\ntype CustomElementClass = Omit<typeof HTMLElement, 'new'>;\n\ntype Constructor<T> = {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    new (...args: any[]): T;\n};\n\nexport type CustomElementDecorator = {\n    (cls: CustomElementClass): void;\n    (\n        target: CustomElementClass,\n        context: ClassDecoratorContext<Constructor<HTMLElement>>,\n    ): void;\n};\n\nexport const customElement =\n    (tagName: string): CustomElementDecorator =>\n    (\n        classOrTarget: CustomElementClass | Constructor<HTMLElement>,\n        context?: ClassDecoratorContext<Constructor<HTMLElement>>,\n    ) => {\n        const define = (): void => {\n            if (customElements.get(tagName)) {\n                return;\n            }\n\n            customElements.define(tagName, classOrTarget as CustomElementConstructor);\n        };\n\n        if (context !== undefined) {\n            context.addInitializer(define);\n        } else {\n            define();\n        }\n    };\n","import { css, unsafeCSS, type CSSResultGroup } from 'lit';\n\nconst sharedStyleSheets = new Map<string, CSSStyleSheet>();\n\n/**\n * Share constructable stylesheets across component instances ( pattern).\n * Falls back to an injected `<style>` tag when adoptedStyleSheets aren't supported.\n */\nexport function adoptStyles(\n    shadowRoot: ShadowRoot,\n    styleResults: CSSResultGroup[],\n    cacheKey?: string,\n): void {\n    const cssText = styleResults\n        .flatMap((result) => (Array.isArray(result) ? result : [result]))\n        .map((result) => {\n            if ('cssText' in result && typeof result.cssText === 'string') {\n                return result.cssText;\n            }\n\n            return unsafeCSS(result).cssText;\n        })\n        .join('\\n');\n\n    if (!('adoptedStyleSheets' in Document.prototype) || typeof CSSStyleSheet === 'undefined') {\n        const styleKey = cacheKey ?? String(styleResults.length);\n\n        if (!shadowRoot.querySelector(`style[data-pk-adopted-styles=\"${styleKey}\"]`)) {\n            const style = document.createElement('style');\n            style.dataset.pkAdoptedStyles = styleKey;\n            style.textContent = cssText;\n            shadowRoot.prepend(style);\n        }\n\n        return;\n    }\n\n    const key = cacheKey ?? cssText;\n    let sheet = sharedStyleSheets.get(key);\n\n    if (!sheet) {\n        sheet = new CSSStyleSheet();\n        sheet.replaceSync(cssText);\n        sharedStyleSheets.set(key, sheet);\n    }\n\n    shadowRoot.adoptedStyleSheets = [...shadowRoot.adoptedStyleSheets, sheet];\n}\n\nexport const hostDisplayInlineBlock = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            vertical-align: middle;\n        }\n    }\n`;\n\nexport const focusRing = css`\n    .pk-focus-ring:focus {\n        outline: none;\n    }\n\n    .pk-focus-ring:focus-visible {\n        box-shadow: var(--pk-shadow-focus);\n    }\n`;\n","import { css } from 'lit';\n\n/**\n * Shadow-root baseline — box model + inherited typography inside every pk-* component.\n * Applied via PkElement.createRenderRoot(); does not replace per-component styles.\n */\nexport const shadowResetStyles = css`\n    @layer pk-reset {\n        :host {\n            box-sizing: border-box;\n        }\n\n        :host *,\n        :host *::before,\n        :host *::after {\n            box-sizing: border-box;\n        }\n\n        :host(:not([hidden])) {\n            /* Prevent UA / CP margin on unstyled custom element hosts in light DOM. */\n            margin: 0;\n        }\n    }\n`;\n","import { LitElement } from 'lit';\n\nimport { adoptStyles } from './styles.js';\nimport { shadowResetStyles } from './shadow-reset.styles.js';\n\nexport type PkElementErrorDetail = {\n    tagName: string;\n    message: string;\n    stack?: string;\n};\n\ndeclare global {\n    interface GlobalEventHandlersEventMap {\n        'pk-error': CustomEvent<PkElementErrorDetail>;\n    }\n}\n\n/**\n * Base class for Plugin Kit web components.\n * Open shadow root; Lit adopts constructable stylesheets where supported.\n *\n * `performUpdate` is wrapped so a single control failure degrades inline instead of\n * taking down the whole CP surface (React error boundaries do not see Lit throws).\n */\nexport class PkElement extends LitElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    /** When set, subclasses should skip normal render — base shows a minimal error shell. */\n    protected pkRenderFailed = false;\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        // Host marker for document/shadow peers (e.g. Tailwind preflight). Must not set\n        // attributes in the constructor — CE rules forbid that on createElement().\n        if (!this.hasAttribute('data-pk')) {\n            this.setAttribute('data-pk', '');\n        }\n    }\n\n    override createRenderRoot(): HTMLElement | DocumentFragment {\n        const root = super.createRenderRoot();\n        adoptStyles(root as ShadowRoot, [shadowResetStyles], 'pk-shadow-reset');\n        return root;\n    }\n\n    override performUpdate(): void {\n        if (this.pkRenderFailed) {\n            return;\n        }\n\n        try {\n            const result = super.performUpdate();\n\n            // Lit deprecates returning a Promise from performUpdate — handle async render\n            // failures without making this override async (avoids dev-mode update-queue bugs).\n            // Lit may return void; keep a Promise guard for older async performUpdate paths.\n            if ((result as unknown) instanceof Promise) {\n                void (result as unknown as Promise<unknown>).catch((error: unknown) => {\n                    this.handleRenderFailure(error);\n                });\n            }\n        } catch (error) {\n            this.handleRenderFailure(error);\n        }\n    }\n\n    protected handleRenderFailure(error: unknown): void {\n        const err = error instanceof Error ? error : new Error(String(error));\n        this.pkRenderFailed = true;\n\n        this.dispatchEvent(\n            new CustomEvent<PkElementErrorDetail>('pk-error', {\n                detail: {\n                    tagName: this.localName || this.tagName.toLowerCase(),\n                    message: err.message,\n                    stack: err.stack,\n                },\n                bubbles: true,\n                composed: true,\n            }),\n        );\n\n        // Last-resort inline fallback — plain DOM so we do not recurse through Lit render().\n        try {\n            const root = this.renderRoot as ShadowRoot | HTMLElement | undefined;\n\n            if (root) {\n                root.textContent = '';\n                const shell = document.createElement('div');\n                shell.setAttribute('part', 'error');\n                shell.setAttribute('role', 'alert');\n                shell.textContent = 'This control failed to load.';\n                root.appendChild(shell);\n            }\n        } catch {\n            /* never throw from the error handler */\n        }\n    }\n}\n"],"mappings":";;;AAyBA,IAAa,iBACR,aAEG,eACA,YACC;CACD,MAAM,eAAqB;AACvB,MAAI,eAAe,IAAI,QAAQ,CAC3B;AAGJ,iBAAe,OAAO,SAAS,cAA0C;;AAG7E,KAAI,YAAY,KAAA,EACZ,SAAQ,eAAe,OAAO;KAE9B,SAAQ;;;;ACxCpB,IAAM,oCAAoB,IAAI,KAA4B;;;;;AAM1D,SAAgB,YACZ,YACA,cACA,UACI;CACJ,MAAM,UAAU,aACX,SAAS,WAAY,MAAM,QAAQ,OAAO,GAAG,SAAS,CAAC,OAAO,CAAE,CAChE,KAAK,WAAW;AACb,MAAI,aAAa,UAAU,OAAO,OAAO,YAAY,SACjD,QAAO,OAAO;AAGlB,SAAO,UAAU,OAAO,CAAC;GAC3B,CACD,KAAK,KAAK;AAEf,KAAI,EAAE,wBAAwB,SAAS,cAAc,OAAO,kBAAkB,aAAa;EACvF,MAAM,WAAW,YAAY,OAAO,aAAa,OAAO;AAExD,MAAI,CAAC,WAAW,cAAc,iCAAiC,SAAS,IAAI,EAAE;GAC1E,MAAM,QAAQ,SAAS,cAAc,QAAQ;AAC7C,SAAM,QAAQ,kBAAkB;AAChC,SAAM,cAAc;AACpB,cAAW,QAAQ,MAAM;;AAG7B;;CAGJ,MAAM,MAAM,YAAY;CACxB,IAAI,QAAQ,kBAAkB,IAAI,IAAI;AAEtC,KAAI,CAAC,OAAO;AACR,UAAQ,IAAI,eAAe;AAC3B,QAAM,YAAY,QAAQ;AAC1B,oBAAkB,IAAI,KAAK,MAAM;;AAGrC,YAAW,qBAAqB,CAAC,GAAG,WAAW,oBAAoB,MAAM;;AAG7E,IAAa,yBAAyB,GAAG;;;;;;;;AAShB,GAAG;;;;;;;;;;;;;;;ACpD5B,IAAa,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;ACkBpC,IAAa,YAAb,cAA+B,WAAW;;;wBAOX;;;2BANyB;GAChD,MAAM;GACN,gBAAgB;GACnB;;CAKD,oBAAmC;AAC/B,QAAM,mBAAmB;AAGzB,MAAI,CAAC,KAAK,aAAa,UAAU,CAC7B,MAAK,aAAa,WAAW,GAAG;;CAIxC,mBAA4D;EACxD,MAAM,OAAO,MAAM,kBAAkB;AACrC,cAAY,MAAoB,CAAC,kBAAkB,EAAE,kBAAkB;AACvE,SAAO;;CAGX,gBAA+B;AAC3B,MAAI,KAAK,eACL;AAGJ,MAAI;GACA,MAAM,SAAS,MAAM,eAAe;AAKpC,OAAK,kBAA8B,QACzB,QAAuC,OAAO,UAAmB;AACnE,SAAK,oBAAoB,MAAM;KACjC;WAED,OAAO;AACZ,QAAK,oBAAoB,MAAM;;;CAIvC,oBAA8B,OAAsB;EAChD,MAAM,MAAM,iBAAiB,QAAQ,QAAQ,IAAI,MAAM,OAAO,MAAM,CAAC;AACrE,OAAK,iBAAiB;AAEtB,OAAK,cACD,IAAI,YAAkC,YAAY;GAC9C,QAAQ;IACJ,SAAS,KAAK,aAAa,KAAK,QAAQ,aAAa;IACrD,SAAS,IAAI;IACb,OAAO,IAAI;IACd;GACD,SAAS;GACT,UAAU;GACb,CAAC,CACL;AAGD,MAAI;GACA,MAAM,OAAO,KAAK;AAElB,OAAI,MAAM;AACN,SAAK,cAAc;IACnB,MAAM,QAAQ,SAAS,cAAc,MAAM;AAC3C,UAAM,aAAa,QAAQ,QAAQ;AACnC,UAAM,aAAa,QAAQ,QAAQ;AACnC,UAAM,cAAc;AACpB,SAAK,YAAY,MAAM;;UAEvB"}

package/dist/chunks/{pk-button-QpDDlRbG.js → pk-button-BWGDkuzc.js}

@@ -1,11 +1,10 @@
-import { n as PkElement, r as hostDisplayInlineBlock, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, o as state, r as hostDisplayInlineBlock, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as resolveSpinnerVariant, t as getButtonSpinnerSize } from "./spinner-utils-CDfHypTv.js";
-import "./pk-spinner-Blxd3SIH.js";
+import "./pk-spinner-DweuYJ_Z.js";
 import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
 import { i as buttonGroupIndentStyles, n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
 import { css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { chevronDown, iconToSvg } from "@verbb/plugin-kit-icons";
 //#region src/components/button/pk-button.styles.ts
@@ -842,4 +841,4 @@ PkButton = __decorate([customElement("pk-button")], PkButton);
 //#endregion
 export { PkButton as t };
 
-//# sourceMappingURL=pk-button-QpDDlRbG.js.map
+//# sourceMappingURL=pk-button-BWGDkuzc.js.map

package/dist/chunks/{pk-button-QpDDlRbG.js.map → pk-button-BWGDkuzc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-button-QpDDlRbG.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 'lit/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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"}
+{"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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"}

package/dist/chunks/{pk-button-group-D9hqSfb_.js → pk-button-group-BSz5T5iS.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { a as query, i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
 //#region src/components/button-group/pk-button-group.styles.ts
 var pkButtonGroupStyles = css`
     @layer pk-component {
@@ -419,4 +418,4 @@ PkButtonGroup = __decorate([customElement("pk-button-group")], PkButtonGroup);
 //#endregion
 export { PkButtonGroup as t };
 
-//# sourceMappingURL=pk-button-group-D9hqSfb_.js.map
+//# sourceMappingURL=pk-button-group-BSz5T5iS.js.map

package/dist/chunks/pk-button-group-BSz5T5iS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-button-group-BSz5T5iS.js","names":[],"sources":["../../src/components/button-group/pk-button-group.styles.ts","../../src/components/button-group/pk-button-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            width: fit-content;\n            vertical-align: middle;\n        }\n\n        .group {\n            display: flex;\n            position: relative;\n            isolation: isolate;\n            flex-wrap: nowrap;\n            gap: 0;\n            width: fit-content;\n            max-width: 100%;\n            align-items: stretch;\n        }\n\n        :host([orientation='horizontal']) .group {\n            flex-direction: row;\n        }\n\n        :host([orientation='vertical']) .group {\n            flex-direction: column;\n            align-items: stretch;\n        }\n\n        :host([orientation='vertical']) ::slotted(pk-button),\n        :host([orientation='vertical']) ::slotted(pk-toggle),\n        :host([orientation='vertical']) ::slotted(pk-input),\n        :host([orientation='vertical']) ::slotted(pk-input-group),\n        :host([orientation='vertical']) ::slotted(.button-group-text),\n        :host([orientation='vertical']) ::slotted(select.button-group-select) {\n            align-self: stretch;\n            width: 100%;\n            max-width: 100%;\n            box-sizing: border-box;\n        }\n\n        @media (hover: hover) {\n            .group > :hover,\n            ::slotted(:hover) {\n                z-index: 1;\n            }\n        }\n\n        .group > :focus-visible,\n        ::slotted(:focus-visible),\n        ::slotted(:focus-within),\n        ::slotted([aria-checked='true']),\n        ::slotted([checked]) {\n            position: relative;\n            z-index: 2;\n        }\n\n        /* Flush join: filled controls sit edge-to-edge; outlined controls overlap 1px to collapse borders */\n        :host([orientation='horizontal']) {\n            --pk-bg-horizontal-indent: 0;\n            --pk-bg-horizontal-indent-outlined: -1px;\n            --pk-btn-group-gap: 1px;\n            --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n            --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n        }\n\n        :host([orientation='vertical']) {\n            --pk-bg-vertical-indent: 0;\n            --pk-bg-vertical-indent-outlined: -1px;\n            --pk-btn-group-gap: 1px;\n            --pk-btn-group-divider-color-outline: var(--pk-color-slate-400);\n            --pk-btn-group-divider-color-dashed: var(--pk-color-slate-500);\n        }\n\n        :host([separators][orientation='horizontal']) {\n            --pk-bg-horizontal-indent: 0;\n        }\n\n        :host([separators][orientation='vertical']) {\n            --pk-bg-vertical-indent: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='horizontal']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n            --pk-bg-start-start-radius: 0;\n            --pk-bg-start-end-radius: 0;\n            --pk-bg-end-start-radius: 0;\n            --pk-bg-end-end-radius: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n            --pk-bg-start-end-radius: 0;\n            --pk-bg-end-end-radius: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n            --pk-bg-start-start-radius: 0;\n            --pk-bg-end-start-radius: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='vertical']:not([data-pk-group-item-first]):not([data-pk-group-item-last])) {\n            --pk-bg-start-start-radius: 0;\n            --pk-bg-start-end-radius: 0;\n            --pk-bg-end-start-radius: 0;\n            --pk-bg-end-end-radius: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-first]:not([data-pk-group-item-last])) {\n            --pk-bg-end-start-radius: 0;\n            --pk-bg-end-end-radius: 0;\n        }\n\n        ::slotted([data-pk-group-orientation='vertical'][data-pk-group-item-last]:not([data-pk-group-item-first])) {\n            --pk-bg-start-start-radius: 0;\n            --pk-bg-start-end-radius: 0;\n        }\n\n        :host([exclusive]) ::slotted(pk-button[aria-pressed='true']) {\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:has(::slotted(pk-button-group-separator)) {\n            --pk-btn-group-separator-color: transparent;\n        }\n\n        ::slotted(pk-input),\n        ::slotted(pk-input-group) {\n            width: auto;\n            flex: 0 1 auto;\n            align-self: stretch;\n        }\n\n        ::slotted(pk-popover),\n        ::slotted(pk-dropdown-menu) {\n            display: inline-flex;\n            align-self: auto;\n            flex: 0 0 auto;\n        }\n\n        ::slotted(.button-group-text) {\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            min-height: var(--pk-btn-height-default);\n            padding: 0 0.625rem;\n            border-width: 1px;\n            border-style: solid;\n            border-color: var(--pk-color-slate-400);\n            background: var(--pk-color-gray-100);\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-sm);\n            font-weight: 500;\n            line-height: var(--pk-line-height);\n            box-sizing: border-box;\n            white-space: nowrap;\n            border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n            border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n            border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n            border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n        }\n\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n            margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n            border-left-width: 0;\n        }\n\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider]).button-group-text),\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])select.button-group-select),\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-join]:not([data-pk-group-divider])pk-input-group) {\n            margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            border-top-width: 0;\n        }\n\n        ::slotted(select.button-group-select) {\n            display: block;\n            margin: 0;\n            padding: 0 10px;\n            border-width: 1px;\n            border-style: solid;\n            border-color: var(--pk-color-slate-400);\n            background: var(--pk-color-white);\n            color: var(--pk-color-gray-900);\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-base);\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            align-self: stretch;\n            min-height: var(--pk-btn-height-default);\n            height: var(--pk-btn-height-default);\n            border-top-left-radius: var(--pk-bg-start-start-radius, var(--pk-radius-lg));\n            border-top-right-radius: var(--pk-bg-start-end-radius, var(--pk-radius-lg));\n            border-bottom-left-radius: var(--pk-bg-end-start-radius, var(--pk-radius-lg));\n            border-bottom-right-radius: var(--pk-bg-end-end-radius, var(--pk-radius-lg));\n        }\n\n        ::slotted(pk-separator) {\n            align-self: stretch;\n        }\n\n        ::slotted(pk-separator[orientation='vertical']),\n        ::slotted(pk-button-group-separator) {\n            height: auto;\n            flex-shrink: 0;\n        }\n\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join].button-group-text),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-orientation='horizontal'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n            margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n        }\n\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join].button-group-text),\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]select.button-group-select),\n        :host([orientation='vertical']) ::slotted([data-pk-group-orientation='vertical'][data-pk-group-divider][data-pk-group-join]pk-input-group) {\n            margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n        }\n\n        :host([orientation='horizontal']) ::slotted(.button-group-text[data-pk-group-divider]),\n        :host([orientation='horizontal']) ::slotted(select.button-group-select[data-pk-group-divider]),\n        :host([orientation='horizontal']) ::slotted(pk-input-group[data-pk-group-divider]) {\n            border-left-width: 1px;\n            border-left-style: solid;\n            border-left-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n            box-shadow: none;\n        }\n\n        :host([orientation='vertical']) ::slotted(.button-group-text[data-pk-group-divider]),\n        :host([orientation='vertical']) ::slotted(select.button-group-select[data-pk-group-divider]),\n        :host([orientation='vertical']) ::slotted(pk-input-group[data-pk-group-divider]) {\n            border-top-width: 1px;\n            border-top-style: solid;\n            border-top-color: var(--pk-btn-group-divider-color-outline, var(--pk-color-slate-400));\n            box-shadow: none;\n        }\n\n        :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-text),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail].button-group-select),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n        :host([orientation='horizontal']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n            border-right-width: 0;\n        }\n\n        :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-text),\n        :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail].button-group-select),\n        :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]select.button-group-select),\n        :host([orientation='vertical']) ::slotted([data-pk-group-internal-trail]pk-input-group) {\n            border-bottom-width: 0;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupStyles } from './pk-button-group.styles.js';\n\nexport type PkButtonGroupOrientation = 'horizontal' | 'vertical';\n\nconst GROUP_JOIN_ATTR = 'data-pk-group-join';\nconst GROUP_DIVIDER_ATTR = 'data-pk-group-divider';\nconst GROUP_ITEM_FIRST = 'data-pk-group-item-first';\nconst GROUP_ITEM_LAST = 'data-pk-group-item-last';\nconst GROUP_INTERNAL_TRAIL = 'data-pk-group-internal-trail';\nconst GROUP_BTN_LAST = 'data-pk-group-btn-last';\nconst GROUP_ORIENTATION_ATTR = 'data-pk-group-orientation';\nconst GROUP_SEPARATOR_TAGS = new Set(['PK-SEPARATOR', 'PK-BUTTON-GROUP-SEPARATOR']);\nconst OVERLAY_WRAPPER_TAGS = new Set(['PK-POPOVER', 'PK-DROPDOWN-MENU']);\n\n/** Boolean attribute defaulting to true — absent means on; `separators=\"false\"` opts out. */\nconst separatorsConverter = {\n    fromAttribute(value: string | null): boolean {\n        if (value === null) {\n            return true;\n        }\n\n        return value !== 'false';\n    },\n    toAttribute(value: boolean): string | null {\n        if (value) {\n            return '';\n        }\n\n        return 'false';\n    },\n};\n\nfunction isGroupSeparator(element: Element): boolean {\n    return GROUP_SEPARATOR_TAGS.has(element.tagName);\n}\n\nfunction getLayoutTarget(element: Element): Element {\n    if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n        return element.querySelector('[slot=\"trigger\"]') ?? element;\n    }\n\n    return element;\n}\n\nfunction getLayoutTargets(element: Element): Element[] {\n    if (OVERLAY_WRAPPER_TAGS.has(element.tagName)) {\n        const trigger = getLayoutTarget(element);\n\n        return trigger === element ? [element] : [element, trigger];\n    }\n\n    return [element];\n}\n\nfunction getCornerTargets(element: Element, surface: Element): Element[] {\n    return element === surface ? [element] : [element, surface];\n}\n\nfunction collectSyncTargets(element: Element): Element[] {\n    const surface = getLayoutTarget(element);\n\n    return [...new Set([...getLayoutTargets(element), ...getCornerTargets(element, surface)])];\n}\n\nfunction clearLayoutAttrs(element: Element): void {\n    for (const target of collectSyncTargets(element)) {\n        target.removeAttribute(GROUP_JOIN_ATTR);\n        target.removeAttribute(GROUP_DIVIDER_ATTR);\n        target.removeAttribute(GROUP_ITEM_FIRST);\n        target.removeAttribute(GROUP_ITEM_LAST);\n        target.removeAttribute(GROUP_INTERNAL_TRAIL);\n        target.removeAttribute(GROUP_BTN_LAST);\n        target.removeAttribute(GROUP_ORIENTATION_ATTR);\n    }\n}\n\nfunction isGroupTrigger(element: Element): boolean {\n    const target = getLayoutTarget(element);\n\n    return target.hasAttribute('group-trigger')\n        || element.hasAttribute('group-trigger');\n}\n\nfunction splitSegments(items: Element[]): Element[][] {\n    const segments: Element[][] = [];\n    let current: Element[] = [];\n\n    for (const item of items) {\n        if (isGroupSeparator(item)) {\n            if (current.length) {\n                segments.push(current);\n            }\n\n            current = [];\n            continue;\n        }\n\n        current.push(item);\n    }\n\n    if (current.length) {\n        segments.push(current);\n    }\n\n    return segments;\n}\n\n/**\n * Visually groups related buttons —  `pk-button-group` pattern (CSS var join, no JS).\n *\n * @slot - Buttons, toolbars, and overlay triggers\n *\n * @csspart base - Group container\n */\n@customElement('pk-button-group')\nexport class PkButtonGroup extends PkElement {\n    static override styles = pkButtonGroupStyles;\n\n    @property({ reflect: true })\n    orientation: PkButtonGroupOrientation = 'horizontal';\n\n    /**\n     * Draw 1px dividers between adjacent controls (Craft default).\n     * Set `separators=\"false\"` for flush join. Explicit `pk-button-group-separator` elements always work for segment splits.\n     */\n    @property({ type: Boolean, reflect: true, converter: separatorsConverter })\n    separators = true;\n\n    /**\n     * Exclusive icon/text toggle styling — Craft `.btngroup--exclusive`.\n     * Use with `pk-toggle` items for view-mode pickers.\n     */\n    @property({ type: Boolean, reflect: true })\n    exclusive = false;\n\n    /** Accessible label for the group —  `pk-button-group.label`. */\n    @property()\n    label = '';\n\n    @query('slot:not([name])')\n    private defaultSlot!: HTMLSlotElement;\n\n    override firstUpdated(): void {\n        this.scheduleSyncGroupLayout();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('orientation')) {\n            this.setAttribute('aria-orientation', this.orientation);\n            this.scheduleSyncGroupLayout();\n        }\n\n        if (changed.has('label')) {\n            if (this.label) {\n                this.setAttribute('aria-label', this.label);\n            } else {\n                this.removeAttribute('aria-label');\n            }\n        }\n\n        if (changed.has('separators') || changed.has('exclusive')) {\n            this.scheduleSyncGroupLayout();\n        }\n    }\n\n    private scheduleSyncGroupLayout(): void {\n        this.syncGroupLayout();\n        queueMicrotask(() => this.syncGroupLayout());\n    }\n\n    private handleSlotChange(): void {\n        this.scheduleSyncGroupLayout();\n    }\n\n    /** Overlap-join adjacent items within each segment; 1px divider between joins when `separators` is on. */\n    private syncGroupLayout(): void {\n        const items = this.defaultSlot?.assignedElements({ flatten: true }) ?? [];\n        const segments = splitSegments(items);\n\n        for (const element of items) {\n            clearLayoutAttrs(element);\n        }\n\n        for (const element of items) {\n            for (const target of collectSyncTargets(element)) {\n                target.setAttribute(GROUP_ORIENTATION_ATTR, this.orientation);\n            }\n        }\n\n        for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {\n            const segment = segments[segmentIndex];\n            const isFirstSegment = segmentIndex === 0;\n            const isLastSegment = segmentIndex === segments.length - 1;\n\n            for (let index = 0; index < segment.length; index++) {\n                const element = segment[index];\n                const surface = getLayoutTarget(element);\n                const cornerTargets = getCornerTargets(element, surface);\n                const isOnly = segment.length === 1;\n                const isFirst = index === 0;\n                const isLast = index === segment.length - 1;\n\n                for (const target of cornerTargets) {\n                    if (isOnly) {\n                        if (isFirstSegment) {\n                            target.setAttribute(GROUP_ITEM_FIRST, '');\n                        }\n\n                        if (isLastSegment) {\n                            target.setAttribute(GROUP_ITEM_LAST, '');\n                        }\n                    } else {\n                        if (isFirst) {\n                            target.setAttribute(GROUP_ITEM_FIRST, '');\n                        }\n\n                        if (isLast) {\n                            target.setAttribute(GROUP_ITEM_LAST, '');\n                        }\n                    }\n                }\n\n                if (isFirst) {\n                    if (this.separators && !isLast) {\n                        for (const target of getLayoutTargets(element)) {\n                            target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n                        }\n                    }\n\n                    continue;\n                }\n\n                for (const target of getLayoutTargets(element)) {\n                    target.setAttribute(GROUP_JOIN_ATTR, '');\n\n                    if (this.separators) {\n                        target.setAttribute(GROUP_DIVIDER_ATTR, '');\n                    }\n                }\n\n                if (this.separators && !isLast) {\n                    for (const target of getLayoutTargets(element)) {\n                        target.setAttribute(GROUP_INTERNAL_TRAIL, '');\n                    }\n                }\n\n                if (isGroupTrigger(element)) {\n                    surface.setAttribute(GROUP_BTN_LAST, '');\n                }\n            }\n        }\n    }\n\n    override render() {\n        return html`\n            <div part=\"base\" class=\"group\" role=\"group\" aria-label=${this.label || nothing}>\n                <slot @slotchange=${this.handleSlotChange}></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-button-group': PkButtonGroup;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-button-group-separator-DG0CYaqc.js → pk-button-group-separator-DH3Rl24b.js}

@@ -1,6 +1,5 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { css, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
 //#region src/components/button-group/pk-button-group-separator.styles.ts
 var pkButtonGroupSeparatorStyles = css`
     @layer pk-component {
@@ -58,4 +57,4 @@ PkButtonGroupSeparator = __decorate([customElement("pk-button-group-separator")]
 //#endregion
 export { PkButtonGroupSeparator as t };
 
-//# sourceMappingURL=pk-button-group-separator-DG0CYaqc.js.map
+//# sourceMappingURL=pk-button-group-separator-DH3Rl24b.js.map

package/dist/chunks/pk-button-group-separator-DH3Rl24b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-button-group-separator-DH3Rl24b.js","names":[],"sources":["../../src/components/button-group/pk-button-group-separator.styles.ts","../../src/components/button-group/pk-button-group-separator.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkButtonGroupSeparatorStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            align-self: stretch;\n            flex-shrink: 0;\n        }\n\n        .separator {\n            display: block;\n            width: 1px;\n            height: 100%;\n            margin-block: 1px;\n            background: var(--pk-btn-group-separator-color, transparent);\n        }\n\n        :host-context(pk-button-group[orientation='vertical']) {\n            display: block;\n            width: 100%;\n            height: auto;\n        }\n\n        :host-context(pk-button-group[orientation='vertical']) .separator {\n            width: 100%;\n            height: 1px;\n            margin-block: 1px;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupSeparatorStyles } from './pk-button-group-separator.styles.js';\n\nexport type PkButtonGroupSeparatorOrientation = 'horizontal' | 'vertical';\n\n/**\n * Vertical separator for button groups.\n *\n * @csspart base - Separator element\n */\n@customElement('pk-button-group-separator')\nexport class PkButtonGroupSeparator extends PkElement {\n    static override styles = pkButtonGroupSeparatorStyles;\n\n    @property({ reflect: true })\n    orientation: PkButtonGroupSeparatorOrientation = 'vertical';\n\n    override render() {\n        return html`\n            <div\n                part=\"base\"\n                class=\"separator pk-btn-group__separator\"\n                role=\"separator\"\n                aria-orientation=${this.orientation}\n                data-orientation=${this.orientation}\n            ></div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-button-group-separator': PkButtonGroupSeparator;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,+BAA+B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACYxC,IAAA,yBAAA,MAAM,+BAA+B,UAAU;;;qBAID;;;gBAHxB;;CAKzB,SAAkB;AACd,SAAO,IAAI;;;;;mCAKgB,KAAK,YAAY;mCACjB,KAAK,YAAY;;;;;YAV/C,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,uBAAA,WAAA,eAAA,KAAA,EAAA;qCAJ/B,cAAc,4BAA4B,CAAA,EAAA,uBAAA"}

package/dist/chunks/{pk-button-group-text-C5z4P7ur.js → pk-button-group-text-Qro_KmZb.js}

@@ -1,7 +1,6 @@
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { n as buttonGroupCornerRadiusStyles } from "./button-group-item.styles-DYmBR28a.js";
 import { css, html } from "lit";
-import { customElement } from "lit/decorators.js";
 //#region src/components/button-group/pk-button-group-text.styles.ts
 var pkButtonGroupTextStyles = [buttonGroupCornerRadiusStyles(".text", "var(--pk-radius-lg)"), css`
         @layer pk-component {
@@ -46,4 +45,4 @@ PkButtonGroupText = __decorate([customElement("pk-button-group-text")], PkButton
 //#endregion
 export { PkButtonGroupText as t };
 
-//# sourceMappingURL=pk-button-group-text-C5z4P7ur.js.map
+//# sourceMappingURL=pk-button-group-text-Qro_KmZb.js.map

package/dist/chunks/{pk-button-group-text-C5z4P7ur.js.map → pk-button-group-text-Qro_KmZb.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-button-group-text-C5z4P7ur.js","names":[],"sources":["../../src/components/button-group/pk-button-group-text.styles.ts","../../src/components/button-group/pk-button-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRadiusStyles } from './button-group-item.styles.js';\n\nexport const pkButtonGroupTextStyles = [\n    buttonGroupCornerRadiusStyles('.text', 'var(--pk-radius-lg)'),\n    css`\n        @layer pk-component {\n            :host {\n                display: inline-flex;\n                vertical-align: middle;\n                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            }\n\n            .text {\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n                padding: 0 0.625rem;\n                border: 1px solid var(--pk-color-slate-400);\n                background: var(--pk-color-gray-100);\n                color: var(--pk-color-gray-700);\n                font-family: var(--pk-font-family);\n                font-size: var(--pk-font-size-sm);\n                font-weight: 500;\n                line-height: var(--pk-line-height);\n                white-space: nowrap;\n            }\n        }\n    `,\n];\n","import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupTextStyles } from './pk-button-group-text.styles.js';\n\n/**\n * Prefix text span for URL / compound button groups.\n *\n * @slot - Prefix text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-button-group-text')\nexport class PkButtonGroupText extends PkElement {\n    static override styles = pkButtonGroupTextStyles;\n\n    override render() {\n        return html`\n            <span part=\"base\" class=\"text pk-btn-group__text\">\n                <slot></slot>\n            </span>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-button-group-text': PkButtonGroupText;\n    }\n}\n"],"mappings":";;;;;AAIA,IAAa,0BAA0B,CACnC,8BAA8B,SAAS,sBAAsB,EAC7D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;MAyBN;;;ACjBM,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;gBACpB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;gCALlB,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}
+{"version":3,"file":"pk-button-group-text-Qro_KmZb.js","names":[],"sources":["../../src/components/button-group/pk-button-group-text.styles.ts","../../src/components/button-group/pk-button-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nimport { buttonGroupCornerRadiusStyles } from './button-group-item.styles.js';\n\nexport const pkButtonGroupTextStyles = [\n    buttonGroupCornerRadiusStyles('.text', 'var(--pk-radius-lg)'),\n    css`\n        @layer pk-component {\n            :host {\n                display: inline-flex;\n                vertical-align: middle;\n                margin-inline-start: var(--pk-bg-horizontal-indent-outlined, 0);\n                margin-block-start: var(--pk-bg-vertical-indent-outlined, 0);\n            }\n\n            .text {\n                display: flex;\n                align-items: center;\n                gap: 0.5rem;\n                padding: 0 0.625rem;\n                border: 1px solid var(--pk-color-slate-400);\n                background: var(--pk-color-gray-100);\n                color: var(--pk-color-gray-700);\n                font-family: var(--pk-font-family);\n                font-size: var(--pk-font-size-sm);\n                font-weight: 500;\n                line-height: var(--pk-line-height);\n                white-space: nowrap;\n            }\n        }\n    `,\n];\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkButtonGroupTextStyles } from './pk-button-group-text.styles.js';\n\n/**\n * Prefix text span for URL / compound button groups.\n *\n * @slot - Prefix text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-button-group-text')\nexport class PkButtonGroupText extends PkElement {\n    static override styles = pkButtonGroupTextStyles;\n\n    override render() {\n        return html`\n            <span part=\"base\" class=\"text pk-btn-group__text\">\n                <slot></slot>\n            </span>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-button-group-text': PkButtonGroupText;\n    }\n}\n"],"mappings":";;;;AAIA,IAAa,0BAA0B,CACnC,8BAA8B,SAAS,sBAAsB,EAC7D,GAAG;;;;;;;;;;;;;;;;;;;;;;;;MAyBN;;;ACjBM,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;gBACpB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;gCALlB,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}

package/dist/chunks/{pk-calendar-CoUil0F7.js → pk-calendar-enTOUCRD.js}

@@ -1,11 +1,10 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
-import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { t as iconStyles } from "./icon.styles-BLTWLqYp.js";
 import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
 import { css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { customElement, property, state } from "lit/decorators.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 //#region src/utils/date.ts
@@ -1462,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-CoUil0F7.js.map
+//# sourceMappingURL=pk-calendar-enTOUCRD.js.map