@verbb/plugin-kit-web 2.0.0

package/dist/chunks/pk-color-input-D4L0DE5S.js

@@ -0,0 +1,398 @@
+import { t as __decorate } from "./decorate-W02hmVTt.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-DmZKgNPL.js";
+import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
+import { t as RequiredValidator } from "./required-validator-CEg8dvjS.js";
+import { css, html, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+//#region src/components/color-input/pk-color-input.styles.ts
+/**
+* Size scale matches pk-input (xs / sm / default / lg). Metrics are shifted so
+* former `lg` (2.125rem / ~34px) is default — aligned with base input chrome.
+* `xl` is kept as a deprecated alias of `lg`.
+*/
+var pkColorInputStyles = css`
+    @layer pk-component {
+        :host {
+            display: inline-block;
+            position: relative;
+            /* Former lg min-width — default now matches input default chrome. */
+            min-width: 6.75rem;
+            font-family: var(--pk-font-family);
+            vertical-align: middle;
+        }
+
+        :host([size='xs']) {
+            min-width: 5.5rem;
+        }
+
+        :host([size='sm']) {
+            min-width: 6.125rem;
+        }
+
+        :host([size='lg']),
+        :host([size='xl']) {
+            min-width: 7.375rem;
+        }
+
+        :host([fit-cell]) {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            max-width: 100%;
+            height: 100%;
+        }
+
+        :host([fit-cell]) .root {
+            display: block;
+            width: 100%;
+            height: 100%;
+        }
+
+        .root {
+            position: relative;
+            display: inline-block;
+            width: 100%;
+        }
+
+        .swatch {
+            position: absolute;
+            top: 50%;
+            left: 0.5rem;
+            z-index: 2;
+            width: 1.25rem;
+            height: 1.25rem;
+            transform: translateY(-50%);
+            border-radius: var(--pk-radius-sm);
+        }
+
+        :host([size='xs']) .swatch {
+            left: 0.375rem;
+            width: 1rem;
+            height: 1rem;
+        }
+
+        :host([size='sm']) .swatch {
+            left: 0.375rem;
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+
+        :host([size='lg']) .swatch,
+        :host([size='xl']) .swatch {
+            left: 0.5rem;
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+
+        :host([fit-cell]) .swatch {
+            left: 0.5rem;
+            width: 1rem;
+            height: 1rem;
+        }
+
+        .swatch-preview {
+            position: absolute;
+            inset: 0;
+            border-radius: inherit;
+            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
+        }
+
+        .swatch-preview.is-transparent {
+            background-color: #fff;
+            background-image:
+                linear-gradient(45deg, #d1d5db 25%, transparent 25%),
+                linear-gradient(-45deg, #d1d5db 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #d1d5db 75%),
+                linear-gradient(-45deg, transparent 75%, #d1d5db 75%);
+            background-size: 8px 8px;
+            background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+        }
+
+        .swatch-picker {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            opacity: 0;
+            cursor: pointer;
+            appearance: none;
+        }
+
+        .swatch-picker:disabled {
+            cursor: not-allowed;
+        }
+
+        .hash {
+            position: absolute;
+            top: 50%;
+            left: 2.125rem;
+            z-index: 1;
+            transform: translateY(-50%);
+            color: var(--pk-color-gray-300);
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            pointer-events: none;
+            user-select: none;
+        }
+
+        :host([size='xs']) .hash {
+            left: 1.625rem;
+        }
+
+        :host([size='sm']) .hash {
+            left: 2rem;
+        }
+
+        :host([size='lg']) .hash,
+        :host([size='xl']) .hash {
+            left: 2.5rem;
+        }
+
+        :host([fit-cell]) .hash {
+            left: 1.75rem;
+        }
+
+        .hex-input {
+            display: block;
+            width: 100%;
+            /* Former lg — matches pk-input default chrome (~34px). */
+            height: 2.125rem;
+            margin: 0;
+            padding-inline: 3rem 0.75rem;
+            border: var(--pk-input-border);
+            border-radius: var(--pk-input-border-radius);
+            background: var(--pk-input-bg);
+            color: var(--pk-color-gray-700);
+            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+            font-size: var(--pk-font-size-mono, 0.9em);
+            line-height: var(--pk-line-height-mono, 1.5);
+            outline: none;
+            box-sizing: border-box;
+            transition: border-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        :host([size='xs']) .hex-input {
+            height: 1.625rem;
+            padding-inline: 2.25rem 0.625rem;
+        }
+
+        :host([size='sm']) .hex-input {
+            height: 1.875rem;
+            padding-inline: 2.75rem 0.75rem;
+        }
+
+        :host([size='lg']) .hex-input,
+        :host([size='xl']) .hex-input {
+            height: 2.375rem;
+            padding-inline: 3.25rem 0.875rem;
+        }
+
+        :host([fit-cell]) .hex-input {
+            width: 100%;
+            max-width: 100%;
+            height: 100%;
+            padding-inline: 2.25rem 0.5rem;
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        .hex-input:focus,
+        .hex-input:focus-visible {
+            border-color: var(--pk-color-sky-600);
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        :host([invalid]) .hex-input:focus,
+        :host([invalid]) .hex-input:focus-visible {
+            border-color: var(--pk-color-rose-600);
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        :host([fit-cell]:not([invalid])) .hex-input:focus,
+        :host([fit-cell]:not([invalid])) .hex-input:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);
+        }
+
+        :host([fit-cell][invalid]) .hex-input,
+        :host([fit-cell][invalid]) .hex-input:focus,
+        :host([fit-cell][invalid]) .hex-input:focus-visible {
+            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);
+        }
+
+        .hex-input:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+
+        :host([invalid]) .hex-input {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([disabled]) .swatch {
+            opacity: 0.5;
+        }
+    }
+`;
+//#endregion
+//#region src/components/color-input/pk-color-input.ts
+var DEFAULT_COLOR = "#000000";
+function sanitizeHex(value) {
+	return String(value || "").replace(/^#/, "").replace(/[^0-9a-fA-F]/g, "").slice(0, 6).toLowerCase();
+}
+function isCompleteHex(value) {
+	return value.length === 3 || value.length === 6;
+}
+function expandShortHex(value) {
+	if (value.length !== 3) return value;
+	return value.split("").map((char) => `${char}${char}`).join("");
+}
+function toPickerValue(hex) {
+	if (hex.length === 6) return `#${hex}`;
+	if (hex.length === 3) return `#${expandShortHex(hex)}`;
+	return DEFAULT_COLOR;
+}
+var PkColorInput = class PkColorInput extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.size = "default";
+		this.fitCell = false;
+		this.invalid = false;
+		this.value = "";
+		this.defaultValue = "";
+		this.ariaLabel = null;
+		this.hexValue = "";
+	}
+	static {
+		this.styles = pkColorInputStyles;
+	}
+	static get validators() {
+		return [
+			...super.validators,
+			MirrorValidator(),
+			RequiredValidator()
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.syncHexFromValue();
+	}
+	willUpdate(changed) {
+		if (changed.has("value")) this.syncHexFromValue();
+		super.willUpdate(changed);
+	}
+	syncHexFromValue() {
+		this.hexValue = sanitizeHex(this.value);
+	}
+	get validationTarget() {
+		return this.input;
+	}
+	syncFormValue() {
+		const submitted = this.hexValue ? `#${this.hexValue}` : "";
+		this.setFormValue(submitted, submitted);
+	}
+	resetToDefaultValue() {
+		this.value = this.defaultValue;
+		this.hexValue = sanitizeHex(this.defaultValue);
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") {
+			this.value = state;
+			this.hexValue = sanitizeHex(state);
+		}
+	}
+	emitChange() {
+		const next = this.hexValue ? `#${this.hexValue}` : "";
+		this.value = next;
+		this.dispatchEvent(new CustomEvent("pk-change", {
+			detail: { value: next },
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleHexInput(event) {
+		const nextHex = sanitizeHex(event.target.value);
+		this.hexValue = nextHex;
+		this.emitChange();
+	}
+	handlePickerChange(event) {
+		const nextHex = sanitizeHex(event.target.value);
+		this.hexValue = nextHex;
+		this.emitChange();
+	}
+	render() {
+		const previewColor = toPickerValue(this.hexValue);
+		const isTransparent = !isCompleteHex(this.hexValue);
+		return html`
+            <div class="root">
+                <div part="swatch" class="swatch">
+                    <div
+                        class=${classMap({
+			"swatch-preview": true,
+			"is-transparent": isTransparent
+		})}
+                        style=${isTransparent ? nothing : `background-color: ${previewColor}`}
+                    ></div>
+                    <input
+                        part="picker"
+                        class="swatch-picker"
+                        type="color"
+                        .value=${previewColor}
+                        ?disabled=${this.disabled}
+                        aria-label="Color picker"
+                        @input=${this.handlePickerChange}
+                    />
+                </div>
+                <span class="hash" aria-hidden="true">#</span>
+                <input
+                    part="input"
+                    class="hex-input"
+                    type="text"
+                    inputmode="text"
+                    autocomplete="off"
+                    maxlength="6"
+                    .value=${this.hexValue}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    aria-label=${this.ariaLabel ?? nothing}
+                    aria-invalid=${this.invalid ? "true" : nothing}
+                    @input=${this.handleHexInput}
+                />
+            </div>
+        `;
+	}
+};
+__decorate([property({ reflect: true })], PkColorInput.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-cell"
+})], PkColorInput.prototype, "fitCell", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], PkColorInput.prototype, "invalid", void 0);
+__decorate([property()], PkColorInput.prototype, "value", void 0);
+__decorate([property({ attribute: "default-value" })], PkColorInput.prototype, "defaultValue", void 0);
+__decorate([property({ attribute: "aria-label" })], PkColorInput.prototype, "ariaLabel", void 0);
+__decorate([query(".hex-input")], PkColorInput.prototype, "input", void 0);
+__decorate([state()], PkColorInput.prototype, "hexValue", void 0);
+PkColorInput = __decorate([customElement("pk-color-input")], PkColorInput);
+//#endregion
+export { PkColorInput as t };
+
+//# sourceMappingURL=pk-color-input-D4L0DE5S.js.map

package/dist/chunks/pk-color-input-D4L0DE5S.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pk-color-input-D4L0DE5S.js","names":[],"sources":["../../src/components/color-input/pk-color-input.styles.ts","../../src/components/color-input/pk-color-input.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Size scale matches pk-input (xs / sm / default / lg). Metrics are shifted so\n * former `lg` (2.125rem / ~34px) is default — aligned with base input chrome.\n * `xl` is kept as a deprecated alias of `lg`.\n */\nexport const pkColorInputStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            position: relative;\n            /* Former lg min-width — default now matches input default chrome. */\n            min-width: 6.75rem;\n            font-family: var(--pk-font-family);\n            vertical-align: middle;\n        }\n\n        :host([size='xs']) {\n            min-width: 5.5rem;\n        }\n\n        :host([size='sm']) {\n            min-width: 6.125rem;\n        }\n\n        :host([size='lg']),\n        :host([size='xl']) {\n            min-width: 7.375rem;\n        }\n\n        :host([fit-cell]) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            max-width: 100%;\n            height: 100%;\n        }\n\n        :host([fit-cell]) .root {\n            display: block;\n            width: 100%;\n            height: 100%;\n        }\n\n        .root {\n            position: relative;\n            display: inline-block;\n            width: 100%;\n        }\n\n        .swatch {\n            position: absolute;\n            top: 50%;\n            left: 0.5rem;\n            z-index: 2;\n            width: 1.25rem;\n            height: 1.25rem;\n            transform: translateY(-50%);\n            border-radius: var(--pk-radius-sm);\n        }\n\n        :host([size='xs']) .swatch {\n            left: 0.375rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        :host([size='sm']) .swatch {\n            left: 0.375rem;\n            width: 1.25rem;\n            height: 1.25rem;\n        }\n\n        :host([size='lg']) .swatch,\n        :host([size='xl']) .swatch {\n            left: 0.5rem;\n            width: 1.5rem;\n            height: 1.5rem;\n        }\n\n        :host([fit-cell]) .swatch {\n            left: 0.5rem;\n            width: 1rem;\n            height: 1rem;\n        }\n\n        .swatch-preview {\n            position: absolute;\n            inset: 0;\n            border-radius: inherit;\n            box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);\n        }\n\n        .swatch-preview.is-transparent {\n            background-color: #fff;\n            background-image:\n                linear-gradient(45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(-45deg, #d1d5db 25%, transparent 25%),\n                linear-gradient(45deg, transparent 75%, #d1d5db 75%),\n                linear-gradient(-45deg, transparent 75%, #d1d5db 75%);\n            background-size: 8px 8px;\n            background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n        }\n\n        .swatch-picker {\n            position: absolute;\n            inset: 0;\n            width: 100%;\n            height: 100%;\n            margin: 0;\n            padding: 0;\n            border: 0;\n            opacity: 0;\n            cursor: pointer;\n            appearance: none;\n        }\n\n        .swatch-picker:disabled {\n            cursor: not-allowed;\n        }\n\n        .hash {\n            position: absolute;\n            top: 50%;\n            left: 2.125rem;\n            z-index: 1;\n            transform: translateY(-50%);\n            color: var(--pk-color-gray-300);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            pointer-events: none;\n            user-select: none;\n        }\n\n        :host([size='xs']) .hash {\n            left: 1.625rem;\n        }\n\n        :host([size='sm']) .hash {\n            left: 2rem;\n        }\n\n        :host([size='lg']) .hash,\n        :host([size='xl']) .hash {\n            left: 2.5rem;\n        }\n\n        :host([fit-cell]) .hash {\n            left: 1.75rem;\n        }\n\n        .hex-input {\n            display: block;\n            width: 100%;\n            /* Former lg — matches pk-input default chrome (~34px). */\n            height: 2.125rem;\n            margin: 0;\n            padding-inline: 3rem 0.75rem;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-input-border-radius);\n            background: var(--pk-input-bg);\n            color: var(--pk-color-gray-700);\n            font-family: var(--pk-font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);\n            font-size: var(--pk-font-size-mono, 0.9em);\n            line-height: var(--pk-line-height-mono, 1.5);\n            outline: none;\n            box-sizing: border-box;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        :host([size='xs']) .hex-input {\n            height: 1.625rem;\n            padding-inline: 2.25rem 0.625rem;\n        }\n\n        :host([size='sm']) .hex-input {\n            height: 1.875rem;\n            padding-inline: 2.75rem 0.75rem;\n        }\n\n        :host([size='lg']) .hex-input,\n        :host([size='xl']) .hex-input {\n            height: 2.375rem;\n            padding-inline: 3.25rem 0.875rem;\n        }\n\n        :host([fit-cell]) .hex-input {\n            width: 100%;\n            max-width: 100%;\n            height: 100%;\n            padding-inline: 2.25rem 0.5rem;\n            border: 0;\n            border-radius: 0;\n            background: transparent;\n        }\n\n        .hex-input:focus,\n        .hex-input:focus-visible {\n            border-color: var(--pk-color-sky-600);\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host([invalid]) .hex-input:focus,\n        :host([invalid]) .hex-input:focus-visible {\n            border-color: var(--pk-color-rose-600);\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        :host([fit-cell]:not([invalid])) .hex-input:focus,\n        :host([fit-cell]:not([invalid])) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .hex-input,\n        :host([fit-cell][invalid]) .hex-input:focus,\n        :host([fit-cell][invalid]) .hex-input:focus-visible {\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n\n        .hex-input:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n        }\n\n        :host([invalid]) .hex-input {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([disabled]) .swatch {\n            opacity: 0.5;\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport type { PropertyValues } from 'lit';\n\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkColorInputStyles } from './pk-color-input.styles.js';\n\n/** Public scale is xs / sm / default / lg (`xl` aliases `lg` for compatibility). */\nexport type PkColorInputSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl';\n\nconst DEFAULT_COLOR = '#000000';\n\nfunction sanitizeHex(value: string): string {\n    return String(value || '')\n        .replace(/^#/, '')\n        .replace(/[^0-9a-fA-F]/g, '')\n        .slice(0, 6)\n        .toLowerCase();\n}\n\nfunction isCompleteHex(value: string): boolean {\n    return value.length === 3 || value.length === 6;\n}\n\nfunction expandShortHex(value: string): string {\n    if (value.length !== 3) {\n        return value;\n    }\n\n    return value.split('').map((char) => `${char}${char}`).join('');\n}\n\nfunction toPickerValue(hex: string): string {\n    if (hex.length === 6) {\n        return `#${hex}`;\n    }\n\n    if (hex.length === 3) {\n        return `#${expandShortHex(hex)}`;\n    }\n\n    return DEFAULT_COLOR;\n}\n\n/**\n * Color input — swatch picker + hex text field (Craft ColorInput parity).\n * Form-associated; submits `#rrggbb` or empty string.\n *\n * @csspart swatch - Swatch container\n * @csspart input - Hex text input\n */\n@customElement('pk-color-input')\nexport class PkColorInput extends PkFormAssociatedElement {\n    static override styles = pkColorInputStyles;\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    @property({ reflect: true })\n    size: PkColorInputSize = 'default';\n\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    @property()\n    value = '';\n\n    @property({ attribute: 'default-value' })\n    defaultValue = '';\n\n    @property({ attribute: 'aria-label' })\n    ariaLabel: string | null = null;\n\n    @query('.hex-input')\n    override input!: HTMLInputElement;\n\n    @state()\n    private hexValue = '';\n\n    override connectedCallback(): void {\n        super.connectedCallback();\n        this.syncHexFromValue();\n    }\n\n    protected override willUpdate(changed: PropertyValues): void {\n        if (changed.has('value')) {\n            this.syncHexFromValue();\n        }\n\n        super.willUpdate(changed);\n    }\n\n    private syncHexFromValue(): void {\n        this.hexValue = sanitizeHex(this.value);\n    }\n\n    protected override get validationTarget(): HTMLElement {\n        return this.input;\n    }\n\n    protected override syncFormValue(): void {\n        const submitted = this.hexValue ? `#${this.hexValue}` : '';\n        this.setFormValue(submitted, submitted);\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.value = this.defaultValue;\n        this.hexValue = sanitizeHex(this.defaultValue);\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n            this.hexValue = sanitizeHex(state);\n        }\n    }\n\n    private emitChange(): void {\n        const next = this.hexValue ? `#${this.hexValue}` : '';\n        this.value = next;\n\n        this.dispatchEvent(new CustomEvent('pk-change', {\n            detail: { value: next },\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 handleHexInput(event: Event): void {\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    private handlePickerChange(event: Event): void {\n        const nextHex = sanitizeHex((event.target as HTMLInputElement).value);\n        this.hexValue = nextHex;\n        this.emitChange();\n    }\n\n    override render() {\n        const previewColor = toPickerValue(this.hexValue);\n        const isTransparent = !isCompleteHex(this.hexValue);\n\n        return html`\n            <div class=\"root\">\n                <div part=\"swatch\" class=\"swatch\">\n                    <div\n                        class=${classMap({\n                            'swatch-preview': true,\n                            'is-transparent': isTransparent,\n                        })}\n                        style=${isTransparent ? nothing : `background-color: ${previewColor}`}\n                    ></div>\n                    <input\n                        part=\"picker\"\n                        class=\"swatch-picker\"\n                        type=\"color\"\n                        .value=${previewColor}\n                        ?disabled=${this.disabled}\n                        aria-label=\"Color picker\"\n                        @input=${this.handlePickerChange}\n                    />\n                </div>\n                <span class=\"hash\" aria-hidden=\"true\">#</span>\n                <input\n                    part=\"input\"\n                    class=\"hex-input\"\n                    type=\"text\"\n                    inputmode=\"text\"\n                    autocomplete=\"off\"\n                    maxlength=\"6\"\n                    .value=${this.hexValue}\n                    ?disabled=${this.disabled}\n                    ?required=${this.required}\n                    aria-label=${this.ariaLabel ?? nothing}\n                    aria-invalid=${this.invalid ? 'true' : nothing}\n                    @input=${this.handleHexInput}\n                />\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-color-input': PkColorInput;\n    }\n}\n"],"mappings":"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"}