@verbb/plugin-kit-web 2.0.22 → 2.0.23

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

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

package/dist/chunks/{pk-input-group-button-CHQHsWd4.js → pk-input-group-button-Di2vEJLo.js}

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

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

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

package/dist/chunks/{pk-input-group-input-oNnqMBGU.js → pk-input-group-input-CwaaEfr1.js}

@@ -132,4 +132,4 @@ PkInputGroupInput = __decorate([customElement("pk-input-group-input")], PkInputG
 //#endregion
 export { PkInputGroupInput as t };
 
-//# sourceMappingURL=pk-input-group-input-oNnqMBGU.js.map
+//# sourceMappingURL=pk-input-group-input-CwaaEfr1.js.map

package/dist/chunks/{pk-input-group-input-oNnqMBGU.js.map → pk-input-group-input-CwaaEfr1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-input-group-input-oNnqMBGU.js","names":[],"sources":["../../src/components/input-group/pk-input-group-input.styles.ts","../../src/components/input-group/pk-input-group-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .input {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding: 6px 8px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n        }\n\n        .input::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        .input:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='xs']) .input {\n            padding: 4px 6px;\n            font-size: 11px;\n        }\n\n        :host([size='sm']) .input {\n            padding: 4px 8px;\n            font-size: 12px;\n        }\n\n        :host([size='lg']) .input {\n            padding: 8px 12px;\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) .input {\n            padding: 10px 16px;\n            font-size: 16px;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupInputStyles } from './pk-input-group-input.styles.js';\n\nexport type PkInputGroupInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Borderless input for use inside `pk-input-group`.\n *\n * @csspart input - Native input element\n */\n@customElement('pk-input-group-input')\nexport class PkInputGroupInput extends PkElement {\n    static override styles = pkInputGroupInputStyles;\n\n    @query('.input')\n    inputElement!: HTMLInputElement;\n\n    @property({ reflect: true })\n    type = 'text';\n\n    @property({ reflect: true })\n    size: PkInputGroupInputSize = 'default';\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    autocomplete?: string;\n\n    focus(options?: FocusOptions): void {\n        this.inputElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <input\n                part=\"input\"\n                class=\"input\"\n                data-slot=\"input-group-control\"\n                type=${this.type}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                autocomplete=${ifDefined(this.autocomplete)}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            />\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLInputElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-input': PkInputGroupInput;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACanC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;cAOtC;cAGuB;qBAGhB;eAGN;kBAGG;kBAGA;iBAGD;;;gBAxBe;;CA6BzB,MAAM,SAA8B;AAChC,OAAK,cAAc,MAAM,QAAQ;;CAGrC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;+BAChB,UAAU,KAAK,aAAa,CAAC;4BAChC,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YArD7E,MAAM,SAAS,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;gCA5Bd,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}
+{"version":3,"file":"pk-input-group-input-CwaaEfr1.js","names":[],"sources":["../../src/components/input-group/pk-input-group-input.styles.ts","../../src/components/input-group/pk-input-group-input.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .input {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            margin: 0;\n            padding: 6px 8px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n        }\n\n        .input::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        .input:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='xs']) .input {\n            padding: 4px 6px;\n            font-size: 11px;\n        }\n\n        :host([size='sm']) .input {\n            padding: 4px 8px;\n            font-size: 12px;\n        }\n\n        :host([size='lg']) .input {\n            padding: 8px 12px;\n            font-size: var(--pk-font-size-base);\n        }\n\n        :host([size='xl']) .input {\n            padding: 10px 16px;\n            font-size: 16px;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupInputStyles } from './pk-input-group-input.styles.js';\n\nexport type PkInputGroupInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\n/**\n * Borderless input for use inside `pk-input-group`.\n *\n * @csspart input - Native input element\n */\n@customElement('pk-input-group-input')\nexport class PkInputGroupInput extends PkElement {\n    static override styles = pkInputGroupInputStyles;\n\n    @query('.input')\n    inputElement!: HTMLInputElement;\n\n    @property({ reflect: true })\n    type = 'text';\n\n    @property({ reflect: true })\n    size: PkInputGroupInputSize = 'default';\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    autocomplete?: string;\n\n    focus(options?: FocusOptions): void {\n        this.inputElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <input\n                part=\"input\"\n                class=\"input\"\n                data-slot=\"input-group-control\"\n                type=${this.type}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                autocomplete=${ifDefined(this.autocomplete)}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            />\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLInputElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-input': PkInputGroupInput;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,0BAA0B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACanC,IAAA,oBAAA,MAAM,0BAA0B,UAAU;;;cAOtC;cAGuB;qBAGhB;eAGN;kBAGG;kBAGA;iBAGD;;;gBAxBe;;CA6BzB,MAAM,SAA8B;AAChC,OAAK,cAAc,MAAM,QAAQ;;CAGrC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;+BAChB,UAAU,KAAK,aAAa,CAAC;4BAChC,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YArD7E,MAAM,SAAS,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;YAGf,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,QAAA,KAAA,EAAA;YAG3B,UAAU,CAAA,EAAA,kBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,kBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,UAAU,CAAA,EAAA,kBAAA,WAAA,gBAAA,KAAA,EAAA;gCA5Bd,cAAc,uBAAuB,CAAA,EAAA,kBAAA"}

package/dist/chunks/{pk-input-group-BLqKPnfc.js → pk-input-group-k7WV0pQI.js}

@@ -1,6 +1,6 @@
 import { a as query, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-DYmBR28a.js";
-import { t as HostAriaMirror } from "./control-aria-B2QMq4ji.js";
+import { n as buttonGroupCornerRadiusStyles, r as buttonGroupCornerRoleStyles, t as buttonGroupBorderJoinStyles } from "./button-group-item.styles-G05d0DNI.js";
+import { t as HostAriaMirror } from "./control-aria-CzouQRZD.js";
 import { css, html } from "lit";
 //#region src/components/input-group/pk-input-group.styles.ts
 var pkInputGroupStyles = [
@@ -234,4 +234,4 @@ PkInputGroup = __decorate([customElement("pk-input-group")], PkInputGroup);
 //#endregion
 export { PkInputGroup as t };
 
-//# sourceMappingURL=pk-input-group-BLqKPnfc.js.map
+//# sourceMappingURL=pk-input-group-k7WV0pQI.js.map

package/dist/chunks/{pk-input-group-BLqKPnfc.js.map → pk-input-group-k7WV0pQI.js.map}

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

package/dist/chunks/{pk-input-group-text-HUxlXROB.js → pk-input-group-text-C0VAdy0J.js}

@@ -36,4 +36,4 @@ PkInputGroupText = __decorate([customElement("pk-input-group-text")], PkInputGro
 //#endregion
 export { PkInputGroupText as t };
 
-//# sourceMappingURL=pk-input-group-text-HUxlXROB.js.map
+//# sourceMappingURL=pk-input-group-text-C0VAdy0J.js.map

package/dist/chunks/{pk-input-group-text-HUxlXROB.js.map → pk-input-group-text-C0VAdy0J.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-input-group-text-HUxlXROB.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            font-size: var(--pk-font-size-sm);\n            color: var(--pk-color-gray-500);\n        }\n\n        .text ::slotted(svg) {\n            width: 0.75rem;\n            height: 0.75rem;\n            pointer-events: none;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/**\n * Muted label text inside an input-group addon.\n *\n * @slot - Text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n    static override styles = pkInputGroupTextStyles;\n\n    override render() {\n        return html`\n            <span part=\"base\" class=\"text\">\n                <slot></slot>\n            </span>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-text': PkInputGroupText;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}
+{"version":3,"file":"pk-input-group-text-C0VAdy0J.js","names":[],"sources":["../../src/components/input-group/pk-input-group-text.styles.ts","../../src/components/input-group/pk-input-group-text.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            align-items: center;\n            gap: 0.5rem;\n            font-size: var(--pk-font-size-sm);\n            color: var(--pk-color-gray-500);\n        }\n\n        .text ::slotted(svg) {\n            width: 0.75rem;\n            height: 0.75rem;\n            pointer-events: none;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextStyles } from './pk-input-group-text.styles.js';\n\n/**\n * Muted label text inside an input-group addon.\n *\n * @slot - Text content\n *\n * @csspart base - Text container\n */\n@customElement('pk-input-group-text')\nexport class PkInputGroupText extends PkElement {\n    static override styles = pkInputGroupTextStyles;\n\n    override render() {\n        return html`\n            <span part=\"base\" class=\"text\">\n                <slot></slot>\n            </span>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-text': PkInputGroupText;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,yBAAyB,GAAG;;;;;;;;;;;;;;;;;;;ACYlC,IAAA,mBAAA,MAAM,yBAAyB,UAAU;;gBACnB;;CAEzB,SAAkB;AACd,SAAO,IAAI;;;;;;;+BALlB,cAAc,sBAAsB,CAAA,EAAA,iBAAA"}

package/dist/chunks/{pk-input-group-textarea-Cl2FNuw-.js → pk-input-group-textarea-DOG1NIlE.js}

@@ -109,4 +109,4 @@ PkInputGroupTextarea = __decorate([customElement("pk-input-group-textarea")], Pk
 //#endregion
 export { PkInputGroupTextarea as t };
 
-//# sourceMappingURL=pk-input-group-textarea-Cl2FNuw-.js.map
+//# sourceMappingURL=pk-input-group-textarea-DOG1NIlE.js.map

package/dist/chunks/{pk-input-group-textarea-Cl2FNuw-.js.map → pk-input-group-textarea-DOG1NIlE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-input-group-textarea-Cl2FNuw-.js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .textarea {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n            resize: none;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/**\n * Borderless textarea for use inside `pk-input-group`.\n *\n * @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n    static override styles = pkInputGroupTextareaStyles;\n\n    @query('.textarea')\n    textareaElement!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ type: Number })\n    rows = 3;\n\n    focus(options?: FocusOptions): void {\n        this.textareaElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <textarea\n                part=\"textarea\"\n                class=\"textarea\"\n                data-slot=\"input-group-control\"\n                rows=${this.rows}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            ></textarea>\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLTextAreaElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-textarea': PkInputGroupTextarea;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}
+{"version":3,"file":"pk-input-group-textarea-DOG1NIlE.js","names":[],"sources":["../../src/components/input-group/pk-input-group-textarea.styles.ts","../../src/components/input-group/pk-input-group-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkInputGroupTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: flex;\n            flex: 1 1 auto;\n            min-width: 0;\n            align-self: stretch;\n        }\n\n        .textarea {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            appearance: none;\n            box-sizing: border-box;\n            box-shadow: none;\n            outline: none;\n            resize: none;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { pkInputGroupTextareaStyles } from './pk-input-group-textarea.styles.js';\n\n/**\n * Borderless textarea for use inside `pk-input-group`.\n *\n * @csspart textarea - Native textarea element\n */\n@customElement('pk-input-group-textarea')\nexport class PkInputGroupTextarea extends PkElement {\n    static override styles = pkInputGroupTextareaStyles;\n\n    @query('.textarea')\n    textareaElement!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    @property({ attribute: 'value', reflect: true })\n    value = '';\n\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ type: Number })\n    rows = 3;\n\n    focus(options?: FocusOptions): void {\n        this.textareaElement?.focus(options);\n    }\n\n    override render() {\n        return html`\n            <textarea\n                part=\"textarea\"\n                class=\"textarea\"\n                data-slot=\"input-group-control\"\n                rows=${this.rows}\n                .value=${this.value}\n                placeholder=${this.placeholder}\n                ?disabled=${this.disabled}\n                ?readonly=${this.readonly}\n                aria-invalid=${this.invalid ? 'true' : nothing}\n                @input=${this.handleInput}\n            ></textarea>\n        `;\n    }\n\n    private handleInput(event: Event): void {\n        const target = event.target as HTMLTextAreaElement;\n        this.value = target.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-input-group-textarea': PkInputGroupTextarea;\n    }\n}\n"],"mappings":";;;AAEA,IAAa,6BAA6B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUtC,IAAA,uBAAA,MAAM,6BAA6B,UAAU;;;qBAOlC;eAGN;kBAGG;kBAGA;iBAGD;cAGH;;;gBArBkB;;CAuBzB,MAAM,SAA8B;AAChC,OAAK,iBAAiB,MAAM,QAAQ;;CAGxC,SAAkB;AACd,SAAO,IAAI;;;;;uBAKI,KAAK,KAAK;yBACR,KAAK,MAAM;8BACN,KAAK,YAAY;4BACnB,KAAK,SAAS;4BACd,KAAK,SAAS;+BACX,KAAK,UAAU,SAAS,QAAQ;yBACtC,KAAK,YAAY;;;;CAKtC,YAAoB,OAAoB;EACpC,MAAM,SAAS,MAAM;AACrB,OAAK,QAAQ,OAAO;AACpB,OAAK,cAAc,IAAI,MAAM,SAAS;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;AACzE,OAAK,cAAc,IAAI,MAAM,UAAU;GAAE,SAAS;GAAM,UAAU;GAAM,CAAC,CAAC;;;YA9C7E,MAAM,YAAY,CAAA,EAAA,qBAAA,WAAA,mBAAA,KAAA,EAAA;YAGlB,UAAU,CAAA,EAAA,qBAAA,WAAA,eAAA,KAAA,EAAA;YAGV,SAAS;CAAE,WAAW;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,SAAA,KAAA,EAAA;YAG/C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,YAAA,KAAA,EAAA;YAG1C,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,qBAAA,WAAA,WAAA,KAAA,EAAA;YAG1C,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,qBAAA,WAAA,QAAA,KAAA,EAAA;mCAtB9B,cAAc,0BAA0B,CAAA,EAAA,qBAAA"}

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

@@ -1,10 +1,10 @@
 import { a as query, i as property, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
-import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
-import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
-import { t as HasSlotController } from "./has-slot-8BvCt_qo.js";
-import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
-import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CmuAW8Cl.js";
+import { t as HasSlotController } from "./has-slot-9zjTXvea.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-MqaHdIoH.js";
+import { t as MirrorValidator } from "./mirror-validator-Cszpqlxk.js";
+import { t as RequiredValidator } from "./required-validator-CaRnQk1V.js";
+import { t as formControlStyles } from "./form-control.styles-BHwSsx_y.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-CGSfAGf-.js";
 import { css, html, nothing } from "lit";
 //#region src/components/lightswitch/pk-lightswitch.styles.ts
 var pkLightswitchStyles = css`
@@ -428,4 +428,4 @@ PkLightswitch = __decorate([customElement("pk-lightswitch")], PkLightswitch);
 //#endregion
 export { PkLightswitch as t };
 
-//# sourceMappingURL=pk-lightswitch-VHfJizBW.js.map
+//# sourceMappingURL=pk-lightswitch-FH5ZxMG2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"pk-lightswitch-VHfJizBW.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            vertical-align: middle;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-sm);\n            line-height: var(--pk-line-height);\n            --pk-lightswitch-border-color: var(--pk-color-slate-800);\n            --pk-lightswitch-track-off: var(--pk-color-gray-200);\n            --pk-lightswitch-track-on: var(--pk-color-teal-550);\n            --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n            --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n                0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n            --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n            --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n                0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n        }\n\n        :host([disabled]) {\n            cursor: not-allowed;\n        }\n\n        .base {\n            display: inline-flex;\n            align-items: flex-start;\n            gap: 0.5rem;\n        }\n\n        :host([disabled]) .base {\n            opacity: 0.5;\n        }\n\n        .content {\n            min-width: 0;\n            cursor: pointer;\n            user-select: none;\n        }\n\n        :host([disabled]) .content {\n            cursor: not-allowed;\n        }\n\n        .label {\n            display: block;\n            /* Match checkbox / radio option labels (gray-700), not gray-900. */\n            color: var(--pk-color-gray-700);\n            line-height: 1rem;\n        }\n\n        .label:empty {\n            display: none;\n        }\n\n        .instructions:empty,\n        .hint:empty {\n            display: none;\n        }\n\n        .switch {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            border-radius: 11px;\n            background: var(--pk-lightswitch-track-off, #d8dee7);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            cursor: pointer;\n            user-select: none;\n            appearance: none;\n            transition: background-color 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        .switch:focus {\n            outline: none;\n        }\n\n        .switch:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        .switch[aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on, #0f9d8a);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .switch[aria-checked='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        :host([invalid]) .switch,\n        :host(:state(user-invalid)) .switch,\n        .switch[aria-invalid='true'] {\n            box-shadow: var(--pk-lightswitch-invalid-shadow);\n        }\n\n        :host([invalid]) .switch[aria-checked='true'],\n        :host(:state(user-invalid)) .switch[aria-checked='true'],\n        .switch[aria-invalid='true'][aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on);\n        }\n\n        :host([invalid]) .switch:focus-visible,\n        :host(:state(user-invalid)) .switch:focus-visible,\n        .switch[aria-invalid='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n        }\n\n        .switch:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='default']) .switch {\n            width: 34px;\n            height: 22px;\n        }\n\n        :host([size='sm']) .switch {\n            width: 28px;\n            height: 18px;\n            border-radius: 9px;\n        }\n\n        :host([size='xs']) .switch {\n            width: 24px;\n            height: 16px;\n            border-radius: 8px;\n        }\n\n        :host([size='xxs']) .switch {\n            width: 24px;\n            height: 14px;\n            border-radius: 7px;\n        }\n\n        .thumb {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 50%;\n            background: var(--pk-color-white, #fff);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            pointer-events: none;\n            transition: transform 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        :host([size='default']) .thumb {\n            width: 18px;\n            height: 18px;\n            transform: translateX(2px);\n        }\n\n        :host([size='default']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 4px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='sm']) .thumb {\n            width: 14px;\n            height: 14px;\n            transform: translateX(2px);\n        }\n\n        :host([size='sm']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xs']) .thumb {\n            width: 12px;\n            height: 12px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xxs']) .thumb {\n            width: 10px;\n            height: 10px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(12px);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .thumb svg {\n            width: 14px;\n            height: 14px;\n            color: var(--pk-lightswitch-track-on);\n            opacity: 0;\n            transform: translateY(1px);\n            transition: opacity 0.15s ease;\n        }\n\n        .switch[aria-checked='true'] .thumb svg {\n            opacity: 1;\n        }\n\n        :host([size='sm']) .thumb svg {\n            width: 10px;\n            height: 10px;\n        }\n\n        :host([size='xs']) .thumb svg,\n        :host([size='xxs']) .thumb svg {\n            display: none;\n        }\n\n        .input {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n            opacity: 0;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n        <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n    </svg>\n`;\n\nexport type PkLightswitchSize = 'default' | 'sm' | 'xs' | 'xxs';\n\n/**\n * Craft lightswitch —  switch API (`role=\"switch\"`), form-associated.\n *\n * @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n *\n * @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    static override styles = [formControlStyles, pkLightswitchStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n    }\n\n    override assumeInteractionOn = ['change'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ attribute: 'default-checked', type: Boolean })\n    defaultChecked = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ reflect: true })\n    size: PkLightswitchSize = 'default';\n\n    @property()\n    value = 'on';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @query('.input')\n    override input!: HTMLInputElement;\n\n    @query('[part=\"switch\"]')\n    private switchElement!: HTMLButtonElement;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n        super.connectedCallback();\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.checked = this.defaultChecked;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (state === 'on' || state === this.value) {\n            this.checked = true;\n        } else {\n            this.checked = false;\n        }\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (this.input && changed.has('checked')) {\n            this.input.checked = this.checked;\n        }\n\n        super.updated(changed);\n    }\n\n    click(): void {\n        this.switchElement?.click();\n    }\n\n    override focus(options?: FocusOptions): void {\n        this.switchElement?.focus(options);\n    }\n\n    override blur(): void {\n        this.switchElement?.blur();\n    }\n\n    private toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.checked = !this.checked;\n        this.emitCheckedChange();\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const isRtl = this.matches(':dir(rtl)');\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            this.toggle();\n            return;\n        }\n\n        if (event.key === 'ArrowLeft') {\n            event.preventDefault();\n            this.checked = isRtl;\n            this.emitCheckedChange();\n            return;\n        }\n\n        if (event.key === 'ArrowRight') {\n            event.preventDefault();\n            this.checked = !isRtl;\n            this.emitCheckedChange();\n        }\n    }\n\n    private emitCheckedChange(): void {\n        this.hasInteracted = true;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { checked: this.checked },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    private handleLabelClick(event: Event): void {\n        if (this.disabled || event.target === this.switchElement) {\n            return;\n        }\n\n        this.toggle();\n    }\n\n    private hasLabelContent(): boolean {\n        if (this.label) {\n            return true;\n        }\n\n        const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n        if (!slot) {\n            return false;\n        }\n\n        return slot.assignedNodes({ flatten: true }).some((node) => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                return Boolean(node.textContent?.trim());\n            }\n\n            return node.nodeType === Node.ELEMENT_NODE;\n        });\n    }\n\n    override render() {\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n        );\n        const hasLabel = this.hasLabelContent();\n\n        return html`\n            <div part=\"base\" class=\"base\">\n                <button\n                    part=\"switch\"\n                    class=\"switch\"\n                    type=\"button\"\n                    role=\"switch\"\n                    ?disabled=${this.disabled}\n                    aria-checked=${this.checked ? 'true' : 'false'}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-describedby=${hasInstructions ? 'instructions' : nothing}\n                    aria-labelledby=${hasLabel ? 'label' : nothing}\n                    @click=${this.toggle}\n                    @keydown=${this.handleKeyDown}\n                >\n                    <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n                </button>\n                <input\n                    part=\"input\"\n                    class=\"input\"\n                    type=\"checkbox\"\n                    tabindex=\"-1\"\n                    .checked=${this.checked}\n                    ?disabled=${this.disabled}\n                    ?required=${this.required}\n                    value=${this.value}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @change=${(event: Event) => event.stopPropagation()}\n                />\n                ${hasLabel || hasInstructions\n                    ? html`\n                        <div class=\"content\" @click=${this.handleLabelClick}>\n                            ${hasLabel\n                                ? html`\n                                    <span part=\"label\" class=\"label\" id=\"label\">\n                                        <slot></slot>${this.label}\n                                    </span>\n                                `\n                                : nothing}\n                            ${hasInstructions\n                                ? html`\n                                    <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n                                        <slot name=\"instructions\">${this.instructions}</slot>\n                                        <slot name=\"hint\"></slot>\n                                    </span>\n                                `\n                                : nothing}\n                        </div>\n                    `\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-lightswitch': PkLightswitch;\n    }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pk-lightswitch-FH5ZxMG2.js","names":[],"sources":["../../src/components/lightswitch/pk-lightswitch.styles.ts","../../src/components/lightswitch/pk-lightswitch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkLightswitchStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-flex;\n            vertical-align: middle;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-font-size-sm);\n            line-height: var(--pk-line-height);\n            --pk-lightswitch-border-color: var(--pk-color-slate-800);\n            --pk-lightswitch-track-off: var(--pk-color-gray-200);\n            --pk-lightswitch-track-on: var(--pk-color-teal-550);\n            --pk-lightswitch-track-on-border: var(--pk-color-teal-550-border);\n            --pk-lightswitch-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-sky-600),\n                0 0 6px 1px hsl(from var(--pk-color-sky-600) h s l / 0.8);\n            --pk-lightswitch-invalid-shadow: 0 0 0 1px #fff, 0 0 0 2.5px var(--pk-color-rose-600);\n            --pk-lightswitch-invalid-focus-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--pk-color-rose-600),\n                0 0 6px 1px hsl(from var(--pk-color-rose-600) h s l / 0.8);\n        }\n\n        :host([disabled]) {\n            cursor: not-allowed;\n        }\n\n        .base {\n            display: inline-flex;\n            align-items: flex-start;\n            gap: 0.5rem;\n        }\n\n        :host([disabled]) .base {\n            opacity: 0.5;\n        }\n\n        .content {\n            min-width: 0;\n            cursor: pointer;\n            user-select: none;\n        }\n\n        :host([disabled]) .content {\n            cursor: not-allowed;\n        }\n\n        .label {\n            display: block;\n            /* Match checkbox / radio option labels (gray-700), not gray-900. */\n            color: var(--pk-color-gray-700);\n            line-height: 1rem;\n        }\n\n        .label:empty {\n            display: none;\n        }\n\n        .instructions:empty,\n        .hint:empty {\n            display: none;\n        }\n\n        .switch {\n            display: inline-flex;\n            flex-shrink: 0;\n            align-items: center;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            border-radius: 11px;\n            background: var(--pk-lightswitch-track-off, #d8dee7);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            cursor: pointer;\n            user-select: none;\n            appearance: none;\n            transition: background-color 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        .switch:focus {\n            outline: none;\n        }\n\n        .switch:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        .switch[aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on, #0f9d8a);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .switch[aria-checked='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-focus-shadow);\n        }\n\n        :host([invalid]) .switch,\n        :host(:state(user-invalid)) .switch,\n        .switch[aria-invalid='true'] {\n            box-shadow: var(--pk-lightswitch-invalid-shadow);\n        }\n\n        :host([invalid]) .switch[aria-checked='true'],\n        :host(:state(user-invalid)) .switch[aria-checked='true'],\n        .switch[aria-invalid='true'][aria-checked='true'] {\n            background: var(--pk-lightswitch-track-on);\n        }\n\n        :host([invalid]) .switch:focus-visible,\n        :host(:state(user-invalid)) .switch:focus-visible,\n        .switch[aria-invalid='true']:focus-visible {\n            box-shadow: var(--pk-lightswitch-invalid-focus-shadow);\n        }\n\n        .switch:disabled {\n            cursor: not-allowed;\n        }\n\n        :host([size='default']) .switch {\n            width: 34px;\n            height: 22px;\n        }\n\n        :host([size='sm']) .switch {\n            width: 28px;\n            height: 18px;\n            border-radius: 9px;\n        }\n\n        :host([size='xs']) .switch {\n            width: 24px;\n            height: 16px;\n            border-radius: 8px;\n        }\n\n        :host([size='xxs']) .switch {\n            width: 24px;\n            height: 14px;\n            border-radius: 7px;\n        }\n\n        .thumb {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 50%;\n            background: var(--pk-color-white, #fff);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-border-color, #667c92);\n            pointer-events: none;\n            transition: transform 0.15s ease, box-shadow 0.15s ease;\n        }\n\n        :host([size='default']) .thumb {\n            width: 18px;\n            height: 18px;\n            transform: translateX(2px);\n        }\n\n        :host([size='default']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 4px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='sm']) .thumb {\n            width: 14px;\n            height: 14px;\n            transform: translateX(2px);\n        }\n\n        :host([size='sm']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xs']) .thumb {\n            width: 12px;\n            height: 12px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(calc(100% - 2px));\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border);\n        }\n\n        :host([size='xxs']) .thumb {\n            width: 10px;\n            height: 10px;\n            transform: translateX(2px);\n        }\n\n        :host([size='xxs']) .switch[aria-checked='true'] .thumb {\n            transform: translateX(12px);\n            box-shadow: inset 0 0 0 1px var(--pk-lightswitch-track-on-border, #007d6f);\n        }\n\n        .thumb svg {\n            width: 14px;\n            height: 14px;\n            color: var(--pk-lightswitch-track-on);\n            opacity: 0;\n            transform: translateY(1px);\n            transition: opacity 0.15s ease;\n        }\n\n        .switch[aria-checked='true'] .thumb svg {\n            opacity: 1;\n        }\n\n        :host([size='sm']) .thumb svg {\n            width: 10px;\n            height: 10px;\n        }\n\n        :host([size='xs']) .thumb svg,\n        :host([size='xxs']) .thumb svg {\n            display: none;\n        }\n\n        .input {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border: 0;\n            opacity: 0;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkLightswitchStyles } from './pk-lightswitch.styles.js';\n\nconst CHECK_ICON = html`\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\" aria-hidden=\"true\">\n        <path fill=\"currentColor\" d=\"M557.5 192L534.9 214.6L278.9 470.6C266.4 483.1 246.1 483.1 233.6 470.6L105.6 342.6L83 320L128.3 274.7C129.6 276 172.3 318.7 256.3 402.7L489.7 169.3L512.3 146.7L557.6 192z\" />\n    </svg>\n`;\n\nexport type PkLightswitchSize = 'default' | 'sm' | 'xs' | 'xxs';\n\n/**\n * Craft lightswitch —  switch API (`role=\"switch\"`), form-associated.\n *\n * @slot - Switch label\n * @slot instructions - Instructions text (or use `instructions` attribute)\n * @slot hint - Alias for `instructions`\n *\n * @csspart base - Root wrapper\n * @csspart switch - Switch button\n * @csspart thumb - Thumb element\n * @csspart label - Label text\n * @csspart instructions - Instructions text\n * @csspart input - Hidden checkbox input\n */\n@customElement('pk-lightswitch')\nexport class PkLightswitch extends PkFormAssociatedElement {\n    static override shadowRootOptions: ShadowRootInit = {\n        mode: 'open',\n        delegatesFocus: true,\n    };\n\n    static override styles = [formControlStyles, pkLightswitchStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator({ validationProperty: 'checked' })];\n    }\n\n    override assumeInteractionOn = ['change'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint');\n\n    @property({ type: Boolean, reflect: true })\n    checked = false;\n\n    @property({ attribute: 'default-checked', type: Boolean })\n    defaultChecked = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property({ reflect: true })\n    size: PkLightswitchSize = 'default';\n\n    @property()\n    value = 'on';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @query('.input')\n    override input!: HTMLInputElement;\n\n    @query('[part=\"switch\"]')\n    private switchElement!: HTMLButtonElement;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n        super.connectedCallback();\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        this.setFormValue(this.checked ? this.value : null, this.checked ? 'on' : 'off');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.checked = this.defaultChecked;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (state === 'on' || state === this.value) {\n            this.checked = true;\n        } else {\n            this.checked = false;\n        }\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (this.input && changed.has('checked')) {\n            this.input.checked = this.checked;\n        }\n\n        super.updated(changed);\n    }\n\n    click(): void {\n        this.switchElement?.click();\n    }\n\n    override focus(options?: FocusOptions): void {\n        this.switchElement?.focus(options);\n    }\n\n    override blur(): void {\n        this.switchElement?.blur();\n    }\n\n    private toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.checked = !this.checked;\n        this.emitCheckedChange();\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const isRtl = this.matches(':dir(rtl)');\n\n        if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            this.toggle();\n            return;\n        }\n\n        if (event.key === 'ArrowLeft') {\n            event.preventDefault();\n            this.checked = isRtl;\n            this.emitCheckedChange();\n            return;\n        }\n\n        if (event.key === 'ArrowRight') {\n            event.preventDefault();\n            this.checked = !isRtl;\n            this.emitCheckedChange();\n        }\n    }\n\n    private emitCheckedChange(): void {\n        this.hasInteracted = true;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { checked: this.checked },\n            bubbles: true,\n            composed: true,\n        }));\n\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    private handleLabelClick(event: Event): void {\n        if (this.disabled || event.target === this.switchElement) {\n            return;\n        }\n\n        this.toggle();\n    }\n\n    private hasLabelContent(): boolean {\n        if (this.label) {\n            return true;\n        }\n\n        const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;\n\n        if (!slot) {\n            return false;\n        }\n\n        return slot.assignedNodes({ flatten: true }).some((node) => {\n            if (node.nodeType === Node.TEXT_NODE) {\n                return Boolean(node.textContent?.trim());\n            }\n\n            return node.nodeType === Node.ELEMENT_NODE;\n        });\n    }\n\n    override render() {\n        const hasInstructions = hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n        );\n        const hasLabel = this.hasLabelContent();\n\n        return html`\n            <div part=\"base\" class=\"base\">\n                <button\n                    part=\"switch\"\n                    class=\"switch\"\n                    type=\"button\"\n                    role=\"switch\"\n                    ?disabled=${this.disabled}\n                    aria-checked=${this.checked ? 'true' : 'false'}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    aria-describedby=${hasInstructions ? 'instructions' : nothing}\n                    aria-labelledby=${hasLabel ? 'label' : nothing}\n                    @click=${this.toggle}\n                    @keydown=${this.handleKeyDown}\n                >\n                    <span part=\"thumb\" class=\"thumb\">${CHECK_ICON}</span>\n                </button>\n                <input\n                    part=\"input\"\n                    class=\"input\"\n                    type=\"checkbox\"\n                    tabindex=\"-1\"\n                    .checked=${this.checked}\n                    ?disabled=${this.disabled}\n                    ?required=${this.required}\n                    value=${this.value}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @change=${(event: Event) => event.stopPropagation()}\n                />\n                ${hasLabel || hasInstructions\n                    ? html`\n                        <div class=\"content\" @click=${this.handleLabelClick}>\n                            ${hasLabel\n                                ? html`\n                                    <span part=\"label\" class=\"label\" id=\"label\">\n                                        <slot></slot>${this.label}\n                                    </span>\n                                `\n                                : nothing}\n                            ${hasInstructions\n                                ? html`\n                                    <span part=\"instructions\" class=\"instructions form-control__instructions\" id=\"instructions\">\n                                        <slot name=\"instructions\">${this.instructions}</slot>\n                                        <slot name=\"hint\"></slot>\n                                    </span>\n                                `\n                                : nothing}\n                        </div>\n                    `\n                    : nothing}\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-lightswitch': PkLightswitch;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-option-DQZHV9jL.js → pk-option-Cx52kLmz.js}

@@ -1,6 +1,6 @@
-import { t as icons_exports } from "./icons-BR8JcQj2.js";
+import { t as icons_exports } from "./icons-B8siZLOe.js";
 import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
+import { n as renderIconHtml } from "./render-BKGW1a68.js";
 import { css, html, nothing } from "lit";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 //#region src/utils/highlight-text.ts
@@ -317,4 +317,4 @@ PkOption = __decorate([customElement("pk-option")], PkOption);
 //#endregion
 export { PkOption as t };
 
-//# sourceMappingURL=pk-option-DQZHV9jL.js.map
+//# sourceMappingURL=pk-option-Cx52kLmz.js.map

package/dist/chunks/{pk-option-DQZHV9jL.js.map → pk-option-Cx52kLmz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-option-DQZHV9jL.js","names":[],"sources":["../../src/utils/highlight-text.ts","../../src/components/select/pk-option.styles.ts","../../src/components/select/pk-option.ts"],"sourcesContent":["export type HighlightPart = {\n    text: string;\n    match: boolean;\n};\n\n/** Split label text into matched/unmatched segments for typeahead highlighting. */\nexport function splitHighlightParts(text: string, search: string): HighlightPart[] {\n    const label = String(text ?? '');\n    const query = String(search ?? '').trim();\n\n    if (!query) {\n        return [{ text: label, match: false }];\n    }\n\n    const lowerLabel = label.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const parts: HighlightPart[] = [];\n    let cursor = 0;\n    let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n    while (matchIndex !== -1) {\n        if (matchIndex > cursor) {\n            parts.push({\n                text: label.slice(cursor, matchIndex),\n                match: false,\n            });\n        }\n\n        parts.push({\n            text: label.slice(matchIndex, matchIndex + query.length),\n            match: true,\n        });\n\n        cursor = matchIndex + query.length;\n        matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n    }\n\n    if (cursor < label.length) {\n        parts.push({\n            text: label.slice(cursor),\n            match: false,\n        });\n    }\n\n    return parts.length > 0 ? parts : [{ text: label, match: false }];\n}\n","import { css } from 'lit';\n\nexport const pkOptionStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            /*\n             * Slotted option labels inherit type metrics from this host (same\n             * Craft-vs-Tailwind trap as pk-dropdown-item). Size tokens arrive via\n             * pk-select ::slotted(pk-option) custom properties.\n             */\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-select-item-line-height, 1.4);\n            color: var(--pk-color-gray-700);\n        }\n\n        .option {\n            position: relative;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            width: 100%;\n            margin: 0;\n            min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n            padding-block: var(--pk-select-item-padding-block, 6px);\n            padding-inline-start: var(--pk-select-item-padding-inline, 10px);\n            padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);\n            border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-select-item-line-height, 1.4);\n            text-align: left;\n            white-space: nowrap;\n            cursor: default;\n            user-select: none;\n            outline: none;\n            box-sizing: border-box;\n        }\n\n        .start {\n            display: none;\n            flex: 0 0 auto;\n            align-items: center;\n        }\n\n        :host([data-has-start]) .start {\n            display: inline-flex;\n        }\n\n        :host([hidden]) {\n            display: none !important;\n        }\n\n        .option:focus-visible,\n        :host([highlighted]) .option {\n            background: var(--pk-color-slate-100);\n        }\n\n        :host([disabled]) .option,\n        .option[aria-disabled='true'] {\n            pointer-events: none;\n            opacity: 0.5;\n        }\n\n        .check {\n            position: absolute;\n            inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);\n            top: 50%;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            color: var(--pk-color-gray-700);\n            pointer-events: none;\n            transform: translateY(-50%);\n            line-height: 0;\n        }\n\n        :host([selected]) .check {\n            display: inline-flex;\n        }\n\n        .check svg {\n            display: block;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .label {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            /* Allow custom multi-line option layouts (title + subtitle) to stack. */\n            white-space: normal;\n        }\n\n        .match {\n            padding: 0;\n            border-radius: 2px;\n            background: var(--pk-color-blue-100);\n            color: inherit;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { splitHighlightParts } from '../../utils/highlight-text.js';\nimport { pkOptionStyles } from './pk-option.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\n\n/**\n * Select option — use inside `pk-select`, `pk-combobox`, or `pk-autocomplete`.\n *\n * @slot start - Presentational decoration before the label (e.g. `pk-status`).\n * @slot - Option label\n *\n * @csspart start - Start decoration container\n * @csspart option - Option button\n * @csspart label - Option label\n * @csspart check - Selected-state check indicator\n *\n * @event pk-option-select - Emitted when the option is activated (click / Enter).\n * @event pk-option-highlight - Emitted when the option becomes the highlighted item.\n */\n@customElement('pk-option')\nexport class PkOption extends PkElement {\n    static override styles = pkOptionStyles;\n\n    /** Option value submitted / emitted when selected. */\n    @property()\n    value = '';\n\n    /**\n     * Optional short label for the closed trigger / filter identity (v1 itemToStringLabel).\n     * When set, preferred over concatenating rich default-slot text (title + subtitle).\n     */\n    @property()\n    label = '';\n\n    /** Disables the option so it cannot be selected. */\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    /** Whether this option is currently selected. */\n    @property({ type: Boolean, reflect: true })\n    selected = false;\n\n    /** Keyboard / pointer highlight within the listbox. */\n    @property({ type: Boolean, reflect: true })\n    highlighted = false;\n\n    /** Hides the option from the list (e.g. filtered combobox results). */\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    @property({ type: Number, attribute: 'focus-index' })\n    focusIndex = -1;\n\n    @property()\n    optionId = '';\n\n    /** When set, the label renders with matching query text highlighted (combobox filter). */\n    @property({ attribute: false })\n    matchQuery = '';\n\n    /** Focus the option’s inner control (listbox keyboard navigation). */\n    focusControl(preventScroll = true): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.option')?.focus({ preventScroll });\n    }\n\n    /**\n     * Label for the closed combobox/select value.\n     * Prefers the `label` attribute when set; otherwise default-slot text\n     * (excluding `slot=\"start\"`), joined with spaces for multi-node layouts.\n     */\n    getLabel(): string {\n        if (this.label.trim()) {\n            return this.label.trim();\n        }\n\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.textContent?.trim() ?? this.value;\n        }\n\n        // Join with spaces so multi-line custom labels (\"Link\" + \"Craft CMS\") do not\n        // concatenate into \"LinkCraft CMS\" when no explicit `label` is set.\n        return labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n    }\n\n    /** Full default-slot text for typeahead matching (includes subtitle lines). */\n    getSearchText(): string {\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.getLabel();\n        }\n\n        const fromSlot = labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n\n        return fromSlot || this.getLabel();\n    }\n\n    /** True when the default slot has element children (custom multi-line / rich layouts). */\n    private hasRichLabelContent(): boolean {\n        return [...this.children].some((node) => {\n            if (!(node instanceof HTMLElement)) {\n                return false;\n            }\n\n            // Named slots (e.g. start) are not part of the label.\n            return !node.slot || node.slot === '';\n        });\n    }\n\n    /** Light-DOM elements assigned to the start decoration slot. */\n    getStartElements(): HTMLElement[] {\n        return [...this.querySelectorAll(':scope > [slot=\"start\"]')].filter(\n            (node): node is HTMLElement => node instanceof HTMLElement,\n        );\n    }\n\n    override firstUpdated(): void {\n        const startSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]');\n\n        startSlot?.addEventListener('slotchange', () => this.syncStartDecoration());\n        this.syncStartDecoration();\n    }\n\n    private syncStartDecoration(): void {\n        this.toggleAttribute('data-has-start', this.getStartElements().length > 0);\n    }\n\n    private handleClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-select', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleMouseEnter(): void {\n        if (this.disabled || this.hidden) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-highlight', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const navKeys = new Set([\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'Home',\n            'End',\n            'Enter',\n            ' ',\n            'Escape',\n        ]);\n\n        if (!navKeys.has(event.key)) {\n            return;\n        }\n\n        const owner = this.closest('pk-select, pk-combobox, pk-autocomplete');\n        const panel = owner ? null : this.closest('[role=\"listbox\"]');\n\n        if (!owner && !panel) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const keydownEvent = new CustomEvent('pk-listbox-keydown', {\n            detail: { keyboardEvent: event },\n            bubbles: true,\n        });\n\n        if (owner) {\n            owner.dispatchEvent(keydownEvent);\n            return;\n        }\n\n        panel!.dispatchEvent(keydownEvent);\n    }\n\n    private renderLabel() {\n        const query = this.matchQuery.trim();\n        // Flat highlight replaces the default slot — that collapses custom layouts\n        // (title + subtitle) into one run when filtering. Keep the slot for rich content.\n        if (!query || this.hasRichLabelContent()) {\n            return html`\n                <span part=\"label\" class=\"label\">\n                    <slot></slot>\n                </span>\n            `;\n        }\n\n        const label = this.getLabel();\n        const parts = splitHighlightParts(label, query);\n\n        return html`\n            <span part=\"label\" class=\"label\">\n                ${parts.map((part) => part.match\n                    ? html`<mark class=\"match\">${part.text}</mark>`\n                    : html`<span>${part.text}</span>`)}\n            </span>\n        `;\n    }\n\n    override render() {\n        return html`\n            <button\n                part=\"option\"\n                type=\"button\"\n                class=\"option\"\n                role=\"option\"\n                id=${this.optionId || nothing}\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                aria-selected=${this.selected ? 'true' : 'false'}\n                tabindex=${this.focusIndex}\n                @click=${this.handleClick}\n                @mouseenter=${this.handleMouseEnter}\n                @keydown=${this.handleKeyDown}\n            >\n                <span part=\"start\" class=\"start\">\n                    <slot name=\"start\"></slot>\n                </span>\n                ${this.renderLabel()}\n                <span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>\n            </button>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option': PkOption;\n    }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pk-option-Cx52kLmz.js","names":[],"sources":["../../src/utils/highlight-text.ts","../../src/components/select/pk-option.styles.ts","../../src/components/select/pk-option.ts"],"sourcesContent":["export type HighlightPart = {\n    text: string;\n    match: boolean;\n};\n\n/** Split label text into matched/unmatched segments for typeahead highlighting. */\nexport function splitHighlightParts(text: string, search: string): HighlightPart[] {\n    const label = String(text ?? '');\n    const query = String(search ?? '').trim();\n\n    if (!query) {\n        return [{ text: label, match: false }];\n    }\n\n    const lowerLabel = label.toLowerCase();\n    const lowerQuery = query.toLowerCase();\n    const parts: HighlightPart[] = [];\n    let cursor = 0;\n    let matchIndex = lowerLabel.indexOf(lowerQuery);\n\n    while (matchIndex !== -1) {\n        if (matchIndex > cursor) {\n            parts.push({\n                text: label.slice(cursor, matchIndex),\n                match: false,\n            });\n        }\n\n        parts.push({\n            text: label.slice(matchIndex, matchIndex + query.length),\n            match: true,\n        });\n\n        cursor = matchIndex + query.length;\n        matchIndex = lowerLabel.indexOf(lowerQuery, cursor);\n    }\n\n    if (cursor < label.length) {\n        parts.push({\n            text: label.slice(cursor),\n            match: false,\n        });\n    }\n\n    return parts.length > 0 ? parts : [{ text: label, match: false }];\n}\n","import { css } from 'lit';\n\nexport const pkOptionStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            /*\n             * Slotted option labels inherit type metrics from this host (same\n             * Craft-vs-Tailwind trap as pk-dropdown-item). Size tokens arrive via\n             * pk-select ::slotted(pk-option) custom properties.\n             */\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-select-item-line-height, 1.4);\n            color: var(--pk-color-gray-700);\n        }\n\n        .option {\n            position: relative;\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            width: 100%;\n            margin: 0;\n            min-height: var(--pk-select-item-min-height, var(--pk-input-height));\n            padding-block: var(--pk-select-item-padding-block, 6px);\n            padding-inline-start: var(--pk-select-item-padding-inline, 10px);\n            padding-inline-end: var(--pk-select-item-padding-inline-end, 2rem);\n            border: var(--pk-select-trigger-border-width, 1px) solid transparent;\n            background: transparent;\n            color: inherit;\n            font: inherit;\n            font-family: var(--pk-font-family);\n            font-size: var(--pk-select-item-font-size, var(--pk-font-size-base));\n            line-height: var(--pk-select-item-line-height, 1.4);\n            text-align: left;\n            white-space: nowrap;\n            cursor: default;\n            user-select: none;\n            outline: none;\n            box-sizing: border-box;\n        }\n\n        .start {\n            display: none;\n            flex: 0 0 auto;\n            align-items: center;\n        }\n\n        :host([data-has-start]) .start {\n            display: inline-flex;\n        }\n\n        :host([hidden]) {\n            display: none !important;\n        }\n\n        .option:focus-visible,\n        :host([highlighted]) .option {\n            background: var(--pk-color-slate-100);\n        }\n\n        :host([disabled]) .option,\n        .option[aria-disabled='true'] {\n            pointer-events: none;\n            opacity: 0.5;\n        }\n\n        .check {\n            position: absolute;\n            inset-inline-end: var(--pk-select-item-indicator-inset, 0.5rem);\n            top: 50%;\n            display: none;\n            align-items: center;\n            justify-content: center;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            color: var(--pk-color-gray-700);\n            pointer-events: none;\n            transform: translateY(-50%);\n            line-height: 0;\n        }\n\n        :host([selected]) .check {\n            display: inline-flex;\n        }\n\n        .check svg {\n            display: block;\n            width: var(--pk-select-item-indicator-size, 0.75rem);\n            height: var(--pk-select-item-indicator-size, 0.75rem);\n            flex-shrink: 0;\n            pointer-events: none;\n        }\n\n        .label {\n            flex: 1;\n            min-width: 0;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            /* Allow custom multi-line option layouts (title + subtitle) to stack. */\n            white-space: normal;\n        }\n\n        .match {\n            padding: 0;\n            border-radius: 2px;\n            background: var(--pk-color-blue-100);\n            color: inherit;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property } from '../../decorators.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\n\nimport { check, renderIconHtml } from '../../icons/index.js';\nimport { PkElement } from '../../base/pk-element.js';\nimport { splitHighlightParts } from '../../utils/highlight-text.js';\nimport { pkOptionStyles } from './pk-option.styles.js';\n\nconst CHECK_ICON = renderIconHtml(check);\n\n/**\n * Select option — use inside `pk-select`, `pk-combobox`, or `pk-autocomplete`.\n *\n * @slot start - Presentational decoration before the label (e.g. `pk-status`).\n * @slot - Option label\n *\n * @csspart start - Start decoration container\n * @csspart option - Option button\n * @csspart label - Option label\n * @csspart check - Selected-state check indicator\n *\n * @event pk-option-select - Emitted when the option is activated (click / Enter).\n * @event pk-option-highlight - Emitted when the option becomes the highlighted item.\n */\n@customElement('pk-option')\nexport class PkOption extends PkElement {\n    static override styles = pkOptionStyles;\n\n    /** Option value submitted / emitted when selected. */\n    @property()\n    value = '';\n\n    /**\n     * Optional short label for the closed trigger / filter identity (v1 itemToStringLabel).\n     * When set, preferred over concatenating rich default-slot text (title + subtitle).\n     */\n    @property()\n    label = '';\n\n    /** Disables the option so it cannot be selected. */\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    /** Whether this option is currently selected. */\n    @property({ type: Boolean, reflect: true })\n    selected = false;\n\n    /** Keyboard / pointer highlight within the listbox. */\n    @property({ type: Boolean, reflect: true })\n    highlighted = false;\n\n    /** Hides the option from the list (e.g. filtered combobox results). */\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    @property({ type: Number, attribute: 'focus-index' })\n    focusIndex = -1;\n\n    @property()\n    optionId = '';\n\n    /** When set, the label renders with matching query text highlighted (combobox filter). */\n    @property({ attribute: false })\n    matchQuery = '';\n\n    /** Focus the option’s inner control (listbox keyboard navigation). */\n    focusControl(preventScroll = true): void {\n        this.shadowRoot?.querySelector<HTMLButtonElement>('.option')?.focus({ preventScroll });\n    }\n\n    /**\n     * Label for the closed combobox/select value.\n     * Prefers the `label` attribute when set; otherwise default-slot text\n     * (excluding `slot=\"start\"`), joined with spaces for multi-node layouts.\n     */\n    getLabel(): string {\n        if (this.label.trim()) {\n            return this.label.trim();\n        }\n\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.textContent?.trim() ?? this.value;\n        }\n\n        // Join with spaces so multi-line custom labels (\"Link\" + \"Craft CMS\") do not\n        // concatenate into \"LinkCraft CMS\" when no explicit `label` is set.\n        return labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n    }\n\n    /** Full default-slot text for typeahead matching (includes subtitle lines). */\n    getSearchText(): string {\n        const labelSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');\n\n        if (!labelSlot) {\n            return this.getLabel();\n        }\n\n        const fromSlot = labelSlot.assignedNodes()\n            .map((node) => (node.textContent ?? '').trim())\n            .filter(Boolean)\n            .join(' ')\n            .trim();\n\n        return fromSlot || this.getLabel();\n    }\n\n    /** True when the default slot has element children (custom multi-line / rich layouts). */\n    private hasRichLabelContent(): boolean {\n        return [...this.children].some((node) => {\n            if (!(node instanceof HTMLElement)) {\n                return false;\n            }\n\n            // Named slots (e.g. start) are not part of the label.\n            return !node.slot || node.slot === '';\n        });\n    }\n\n    /** Light-DOM elements assigned to the start decoration slot. */\n    getStartElements(): HTMLElement[] {\n        return [...this.querySelectorAll(':scope > [slot=\"start\"]')].filter(\n            (node): node is HTMLElement => node instanceof HTMLElement,\n        );\n    }\n\n    override firstUpdated(): void {\n        const startSlot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"start\"]');\n\n        startSlot?.addEventListener('slotchange', () => this.syncStartDecoration());\n        this.syncStartDecoration();\n    }\n\n    private syncStartDecoration(): void {\n        this.toggleAttribute('data-has-start', this.getStartElements().length > 0);\n    }\n\n    private handleClick(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-select', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleMouseEnter(): void {\n        if (this.disabled || this.hidden) {\n            return;\n        }\n\n        this.dispatchEvent(new CustomEvent('pk-option-highlight', {\n            detail: { value: this.value },\n            bubbles: true,\n            composed: true,\n        }));\n    }\n\n    private handleKeyDown(event: KeyboardEvent): void {\n        const navKeys = new Set([\n            'ArrowDown',\n            'ArrowUp',\n            'ArrowLeft',\n            'ArrowRight',\n            'Home',\n            'End',\n            'Enter',\n            ' ',\n            'Escape',\n        ]);\n\n        if (!navKeys.has(event.key)) {\n            return;\n        }\n\n        const owner = this.closest('pk-select, pk-combobox, pk-autocomplete');\n        const panel = owner ? null : this.closest('[role=\"listbox\"]');\n\n        if (!owner && !panel) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const keydownEvent = new CustomEvent('pk-listbox-keydown', {\n            detail: { keyboardEvent: event },\n            bubbles: true,\n        });\n\n        if (owner) {\n            owner.dispatchEvent(keydownEvent);\n            return;\n        }\n\n        panel!.dispatchEvent(keydownEvent);\n    }\n\n    private renderLabel() {\n        const query = this.matchQuery.trim();\n        // Flat highlight replaces the default slot — that collapses custom layouts\n        // (title + subtitle) into one run when filtering. Keep the slot for rich content.\n        if (!query || this.hasRichLabelContent()) {\n            return html`\n                <span part=\"label\" class=\"label\">\n                    <slot></slot>\n                </span>\n            `;\n        }\n\n        const label = this.getLabel();\n        const parts = splitHighlightParts(label, query);\n\n        return html`\n            <span part=\"label\" class=\"label\">\n                ${parts.map((part) => part.match\n                    ? html`<mark class=\"match\">${part.text}</mark>`\n                    : html`<span>${part.text}</span>`)}\n            </span>\n        `;\n    }\n\n    override render() {\n        return html`\n            <button\n                part=\"option\"\n                type=\"button\"\n                class=\"option\"\n                role=\"option\"\n                id=${this.optionId || nothing}\n                ?disabled=${this.disabled}\n                aria-disabled=${this.disabled ? 'true' : nothing}\n                aria-selected=${this.selected ? 'true' : 'false'}\n                tabindex=${this.focusIndex}\n                @click=${this.handleClick}\n                @mouseenter=${this.handleMouseEnter}\n                @keydown=${this.handleKeyDown}\n            >\n                <span part=\"start\" class=\"start\">\n                    <slot name=\"start\"></slot>\n                </span>\n                ${this.renderLabel()}\n                <span part=\"check\" class=\"check\" aria-hidden=\"true\">${unsafeSVG(CHECK_ICON)}</span>\n            </button>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option': PkOption;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-option-group-CCzJkBFp.js → pk-option-group-CYo9Ukue.js}

@@ -1,5 +1,5 @@
 import { i as property, n as PkElement, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { i as uniqueId } from "./focus-aa5dlv8k.js";
+import { i as uniqueId } from "./focus-C6pY4Ym4.js";
 import { css, html } from "lit";
 //#region src/components/select/pk-option-group.styles.ts
 var pkOptionGroupStyles = css`
@@ -68,4 +68,4 @@ PkOptionGroup = __decorate([customElement("pk-option-group")], PkOptionGroup);
 //#endregion
 export { PkOptionGroup as t };
 
-//# sourceMappingURL=pk-option-group-CCzJkBFp.js.map
+//# sourceMappingURL=pk-option-group-CYo9Ukue.js.map

package/dist/chunks/{pk-option-group-CCzJkBFp.js.map → pk-option-group-CYo9Ukue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-option-group-CCzJkBFp.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n        }\n\n        /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n         * vars / theme tokens may be absent and invalid color inherits option black.\n         * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). */\n        .label {\n            padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n            padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n            padding-inline: var(--pk-select-item-padding-inline, 10px);\n            color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n            font-family: var(--pk-font-family);\n            /* Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). */\n            font-size: var(--pk-select-group-label-font-size, 12px);\n            font-weight: 400;\n            line-height: 1.3;\n            /* Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. */\n            text-align: left;\n            user-select: none;\n            pointer-events: none;\n        }\n\n        :host([hidden]),\n        :host([data-pk-filter-empty]) {\n            display: none !important;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/**\n * Visual option group for `pk-select` — listbox grouping pattern.\n *\n * @slot - `pk-option` items in this group\n *\n * @csspart label - Group label\n */\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n    static override styles = pkOptionGroupStyles;\n\n    /** Visible group heading above the options. */\n    @property({ reflect: true })\n    label = '';\n\n    /** Hides the group and its options. */\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    private readonly labelId = uniqueId('pk-option-group-label');\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.setAttribute('role', 'group');\n        this.setAttribute('aria-labelledby', this.labelId);\n    }\n\n    override render() {\n        return html`\n            <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option-group': PkOptionGroup;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;eAKjC;gBAIC;iBAEkB,SAAS,wBAAwB;;;gBAVnC;;CAYzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;YAjBvE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAI3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAT9C,cAAc,kBAAkB,CAAA,EAAA,cAAA"}
+{"version":3,"file":"pk-option-group-CYo9Ukue.js","names":[],"sources":["../../src/components/select/pk-option-group.styles.ts","../../src/components/select/pk-option-group.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkOptionGroupStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n        }\n\n        /* Hard hex fallbacks: when groups portal outside pk-select, size-token\n         * vars / theme tokens may be absent and invalid color inherits option black.\n         * Weight/color match v1 ComboboxLabel / SelectLabel (text-slate-700, no font-medium). */\n        .label {\n            padding-block-start: var(--pk-select-group-label-padding-block-start, 8px);\n            padding-block-end: var(--pk-select-group-label-padding-block-end, 2px);\n            padding-inline: var(--pk-select-item-padding-inline, 10px);\n            color: var(--pk-select-group-label-color, var(--pk-color-slate-700, rgba(96, 125, 159, 0.7)));\n            font-family: var(--pk-font-family);\n            /* Default matches v1 ComboboxLabel/SelectLabel text-xs (12px). */\n            font-size: var(--pk-select-group-label-font-size, 12px);\n            font-weight: 400;\n            line-height: 1.3;\n            /* Light-DOM ancestors (e.g. Formie empty dropzone text-center) must not center labels. */\n            text-align: left;\n            user-select: none;\n            pointer-events: none;\n        }\n\n        :host([hidden]),\n        :host([data-pk-filter-empty]) {\n            display: none !important;\n        }\n    }\n`;\n","import { html } from 'lit';\nimport { customElement, property } from '../../decorators.js';\n\nimport { PkElement } from '../../base/pk-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { pkOptionGroupStyles } from './pk-option-group.styles.js';\n\n/**\n * Visual option group for `pk-select` — listbox grouping pattern.\n *\n * @slot - `pk-option` items in this group\n *\n * @csspart label - Group label\n */\n@customElement('pk-option-group')\nexport class PkOptionGroup extends PkElement {\n    static override styles = pkOptionGroupStyles;\n\n    /** Visible group heading above the options. */\n    @property({ reflect: true })\n    label = '';\n\n    /** Hides the group and its options. */\n    @property({ type: Boolean, reflect: true })\n    hidden = false;\n\n    private readonly labelId = uniqueId('pk-option-group-label');\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.setAttribute('role', 'group');\n        this.setAttribute('aria-labelledby', this.labelId);\n    }\n\n    override render() {\n        return html`\n            <div part=\"label\" class=\"label\" id=${this.labelId}>${this.label}</div>\n            <div role=\"presentation\">\n                <slot></slot>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-option-group': PkOptionGroup;\n    }\n}\n"],"mappings":";;;;AAEA,IAAa,sBAAsB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACa/B,IAAA,gBAAA,MAAM,sBAAsB,UAAU;;;eAKjC;gBAIC;iBAEkB,SAAS,wBAAwB;;;gBAVnC;;CAYzB,oBAAmC;AAC/B,QAAM,mBAAmB;AACzB,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,aAAa,mBAAmB,KAAK,QAAQ;;CAGtD,SAAkB;AACd,SAAO,IAAI;iDAC8B,KAAK,QAAQ,GAAG,KAAK,MAAM;;;;;;;YAjBvE,SAAS,EAAE,SAAS,MAAM,CAAC,CAAA,EAAA,cAAA,WAAA,SAAA,KAAA,EAAA;YAI3B,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,cAAA,WAAA,UAAA,KAAA,EAAA;4BAT9C,cAAc,kBAAkB,CAAA,EAAA,cAAA"}

package/dist/chunks/{pk-popover-D3jkHfwB.js → pk-popover-209LdoPr.js}

@@ -1,12 +1,12 @@
 import { a as query, i as property, n as PkElement, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
-import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-DYmBR28a.js";
-import { i as uniqueId } from "./focus-aa5dlv8k.js";
-import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-XQUMfKO3.js";
-import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-D0pkTQyI.js";
-import { r as resolveElementById } from "./pk-popup-B65tZMQH.js";
-import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-WlEXnS85.js";
-import { n as isPointerInsideOverlay } from "./popup-pointer-CuLjk1th.js";
-import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-BnNiguJo.js";
+import { r as buttonGroupCornerRoleStyles } from "./button-group-item.styles-G05d0DNI.js";
+import { i as uniqueId } from "./focus-C6pY4Ym4.js";
+import { i as unregisterDismissible, n as isTopDismissible, r as registerDismissible } from "./dismissible-stack-B3BgzdQb.js";
+import { i as PkShowEvent, n as PkAfterShowEvent, r as PkHideEvent, t as PkAfterHideEvent } from "./overlay-lifecycle-CAoT0LE8.js";
+import { r as resolveElementById } from "./pk-popup-0EIt9X_W.js";
+import { i as waitForPopupReposition, r as syncPopupPlacementAnimation } from "./popup-placement-animation-GvFXER7D.js";
+import { n as isPointerInsideOverlay } from "./popup-pointer-BTS3Y6LE.js";
+import { t as popupContentAnimationStyles } from "./popup-content-animation.styles-EUnGV75J.js";
 import { css, html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 //#region src/components/popover/pk-popover.styles.ts
@@ -373,4 +373,4 @@ PkPopover = __decorate([customElement("pk-popover")], PkPopover);
 //#endregion
 export { PkPopover as t };
 
-//# sourceMappingURL=pk-popover-D3jkHfwB.js.map
+//# sourceMappingURL=pk-popover-209LdoPr.js.map