@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-input-group-button-XOfVLqGO.js

@@ -0,0 +1,55 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/components/input-group/pk-input-group-button.styles.ts
+var pkInputGroupButtonStyles = css`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+        }
+
+        pk-button {
+            --pk-btn-height: var(--pk-btn-height-sm);
+            --pk-btn-font: var(--pk-btn-font-sm);
+            --pk-btn-padding-inline: var(--pk-btn-padding-inline-sm);
+            --pk-btn-icon-size: var(--pk-btn-icon-size-sm);
+            --pk-btn-radius: var(--pk-btn-radius-sm);
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-button.ts
+var PkInputGroupButton = class PkInputGroupButton extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "none";
+		this.size = "xs";
+		this.disabled = false;
+	}
+	static {
+		this.styles = pkInputGroupButtonStyles;
+	}
+	render() {
+		return html`
+            <pk-button
+                part="base"
+                variant=${this.variant}
+                size=${this.size === "icon-xs" || this.size === "icon-sm" ? "xs" : "xs"}
+                ?disabled=${this.disabled}
+            >
+                <slot></slot>
+            </pk-button>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkInputGroupButton.prototype, "variant", void 0);
+__decorate([property({ reflect: true })], PkInputGroupButton.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupButton.prototype, "disabled", void 0);
+PkInputGroupButton = __decorate([customElement("pk-input-group-button")], PkInputGroupButton);
+//#endregion
+export { PkInputGroupButton as t };
+
+//# sourceMappingURL=pk-input-group-button-XOfVLqGO.js.map

package/dist/chunks/pk-input-group-button-XOfVLqGO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-button-XOfVLqGO.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 'lit/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-CSmR5vdY.js

@@ -0,0 +1,136 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/input-group/pk-input-group-input.styles.ts
+var pkInputGroupInputStyles = css`
+    @layer pk-component {
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            align-self: stretch;
+        }
+
+        .input {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            margin: 0;
+            padding: 6px 8px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            appearance: none;
+            box-sizing: border-box;
+            box-shadow: none;
+            outline: none;
+        }
+
+        .input::placeholder {
+            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));
+        }
+
+        .input:disabled {
+            cursor: not-allowed;
+        }
+
+        :host([size='xs']) .input {
+            padding: 4px 6px;
+            font-size: 11px;
+        }
+
+        :host([size='sm']) .input {
+            padding: 4px 8px;
+            font-size: 12px;
+        }
+
+        :host([size='lg']) .input {
+            padding: 8px 12px;
+            font-size: var(--pk-font-size-base);
+        }
+
+        :host([size='xl']) .input {
+            padding: 10px 16px;
+            font-size: 16px;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-input.ts
+var PkInputGroupInput = class PkInputGroupInput extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "text";
+		this.size = "default";
+		this.placeholder = "";
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.invalid = false;
+	}
+	static {
+		this.styles = pkInputGroupInputStyles;
+	}
+	focus(options) {
+		this.inputElement?.focus(options);
+	}
+	render() {
+		return html`
+            <input
+                part="input"
+                class="input"
+                data-slot="input-group-control"
+                type=${this.type}
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                autocomplete=${ifDefined(this.autocomplete)}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                aria-invalid=${this.invalid ? "true" : nothing}
+                @input=${this.handleInput}
+            />
+        `;
+	}
+	handleInput(event) {
+		const target = event.target;
+		this.value = target.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([query(".input")], PkInputGroupInput.prototype, "inputElement", void 0);
+__decorate([property({ reflect: true })], PkInputGroupInput.prototype, "type", void 0);
+__decorate([property({ reflect: true })], PkInputGroupInput.prototype, "size", void 0);
+__decorate([property()], PkInputGroupInput.prototype, "placeholder", void 0);
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], PkInputGroupInput.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupInput.prototype, "invalid", void 0);
+__decorate([property()], PkInputGroupInput.prototype, "autocomplete", void 0);
+PkInputGroupInput = __decorate([customElement("pk-input-group-input")], PkInputGroupInput);
+//#endregion
+export { PkInputGroupInput as t };
+
+//# sourceMappingURL=pk-input-group-input-CSmR5vdY.js.map

package/dist/chunks/pk-input-group-input-CSmR5vdY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-input-CSmR5vdY.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 'lit/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-text-C6ekhtff.js

@@ -0,0 +1,40 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+//#region src/components/input-group/pk-input-group-text.styles.ts
+var pkInputGroupTextStyles = css`
+    @layer pk-component {
+        :host {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-size: var(--pk-font-size-sm);
+            color: var(--pk-color-gray-500);
+        }
+
+        .text ::slotted(svg) {
+            width: 0.75rem;
+            height: 0.75rem;
+            pointer-events: none;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-text.ts
+var PkInputGroupText = class PkInputGroupText extends PkElement {
+	static {
+		this.styles = pkInputGroupTextStyles;
+	}
+	render() {
+		return html`
+            <span part="base" class="text">
+                <slot></slot>
+            </span>
+        `;
+	}
+};
+PkInputGroupText = __decorate([customElement("pk-input-group-text")], PkInputGroupText);
+//#endregion
+export { PkInputGroupText as t };
+
+//# sourceMappingURL=pk-input-group-text-C6ekhtff.js.map

package/dist/chunks/pk-input-group-text-C6ekhtff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-text-C6ekhtff.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 'lit/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-DALr3pdU.js

@@ -0,0 +1,113 @@
+import { n as PkElement, t as __decorate } from "./decorate-W02hmVTt.js";
+import { css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+//#region src/components/input-group/pk-input-group-textarea.styles.ts
+var pkInputGroupTextareaStyles = css`
+    @layer pk-component {
+        :host {
+            display: flex;
+            flex: 1 1 auto;
+            min-width: 0;
+            align-self: stretch;
+        }
+
+        .textarea {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            min-height: 5rem;
+            margin: 0;
+            padding: 7px 10px;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            appearance: none;
+            box-sizing: border-box;
+            box-shadow: none;
+            outline: none;
+            resize: none;
+        }
+
+        .textarea::placeholder {
+            color: var(--pk-color-gray-400);
+        }
+
+        .textarea:disabled {
+            cursor: not-allowed;
+        }
+    }
+`;
+//#endregion
+//#region src/components/input-group/pk-input-group-textarea.ts
+var PkInputGroupTextarea = class PkInputGroupTextarea extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.placeholder = "";
+		this.value = "";
+		this.disabled = false;
+		this.readonly = false;
+		this.invalid = false;
+		this.rows = 3;
+	}
+	static {
+		this.styles = pkInputGroupTextareaStyles;
+	}
+	focus(options) {
+		this.textareaElement?.focus(options);
+	}
+	render() {
+		return html`
+            <textarea
+                part="textarea"
+                class="textarea"
+                data-slot="input-group-control"
+                rows=${this.rows}
+                .value=${this.value}
+                placeholder=${this.placeholder}
+                ?disabled=${this.disabled}
+                ?readonly=${this.readonly}
+                aria-invalid=${this.invalid ? "true" : nothing}
+                @input=${this.handleInput}
+            ></textarea>
+        `;
+	}
+	handleInput(event) {
+		const target = event.target;
+		this.value = target.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([query(".textarea")], PkInputGroupTextarea.prototype, "textareaElement", void 0);
+__decorate([property()], PkInputGroupTextarea.prototype, "placeholder", void 0);
+__decorate([property({
+	attribute: "value",
+	reflect: true
+})], PkInputGroupTextarea.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkInputGroupTextarea.prototype, "invalid", void 0);
+__decorate([property({ type: Number })], PkInputGroupTextarea.prototype, "rows", void 0);
+PkInputGroupTextarea = __decorate([customElement("pk-input-group-textarea")], PkInputGroupTextarea);
+//#endregion
+export { PkInputGroupTextarea as t };
+
+//# sourceMappingURL=pk-input-group-textarea-DALr3pdU.js.map

package/dist/chunks/pk-input-group-textarea-DALr3pdU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-input-group-textarea-DALr3pdU.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 'lit/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"}