@verbb/plugin-kit-web 2.0.0

package/dist-loader/chunks/pk-spinner-Di9O69-m.js

@@ -0,0 +1,145 @@
+import { l as n, m as i, p as b, u as t } from "./lit-Dnn7gEi2.js";
+import { c as __decorate, l as PkElement, u as hostDisplayInlineBlock } from "./pk-base-BlxAYXJD.js";
+//#region src/components/spinner/pk-spinner.styles.ts
+var pkSpinnerStyles = [hostDisplayInlineBlock, i`
+        @layer pk-component {
+            :host {
+                display: block;
+                box-sizing: border-box;
+            }
+
+            :host([centered]) {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                display: block;
+                width: fit-content;
+                height: fit-content;
+                margin: 0;
+                transform: translate(-50%, -50%);
+            }
+
+            .spinner {
+                display: block;
+                box-sizing: border-box;
+                margin-inline: auto;
+                border-style: solid;
+                border-bottom-color: transparent;
+                border-left-color: transparent;
+                border-radius: 50%;
+                animation: pk-spinner-spin 0.5s linear infinite;
+            }
+
+            /* Sizes */
+            :host([size='xxs']) .spinner {
+                width: 0.75rem;
+                height: 0.75rem;
+                border-width: 1px;
+            }
+
+            :host([size='xs']) .spinner {
+                width: 1rem;
+                height: 1rem;
+                border-width: 2px;
+            }
+
+            :host([size='sm']) .spinner,
+            :host(:not([size])) .spinner {
+                width: 1.5rem;
+                height: 1.5rem;
+                border-width: 2px;
+            }
+
+            :host([size='md']) .spinner {
+                width: 2rem;
+                height: 2rem;
+                border-width: 2px;
+            }
+
+            :host([size='lg']) .spinner {
+                width: 3rem;
+                height: 3rem;
+                border-width: 2px;
+            }
+
+            :host([size='xl']) .spinner {
+                width: 4rem;
+                height: 4rem;
+                border-width: 2px;
+            }
+
+            /* Variants — matched to button loading contrast */
+            :host([variant='default']:not([tone])) .spinner {
+                border-top-color: var(--pk-color-red-500);
+                border-right-color: var(--pk-color-red-500);
+            }
+
+            :host([variant='primary']:not([tone])) .spinner,
+            :host([variant='secondary']:not([tone])) .spinner {
+                border-top-color: var(--pk-color-white);
+                border-right-color: var(--pk-color-white);
+            }
+
+            :host([variant='dashed']:not([tone])) .spinner,
+            :host([variant='outline']:not([tone])) .spinner,
+            :host([variant='transparent']:not([tone])) .spinner {
+                border-top-color: var(--pk-color-gray-700);
+                border-right-color: var(--pk-color-gray-700);
+            }
+
+            /* Standalone tone overrides */
+            :host([tone='sky']) .spinner {
+                border-top-color: var(--pk-color-sky-600);
+                border-right-color: var(--pk-color-sky-600);
+            }
+
+            :host([tone='emerald']) .spinner {
+                border-top-color: var(--pk-color-emerald-600);
+                border-right-color: var(--pk-color-emerald-600);
+            }
+
+            :host([tone='violet']) .spinner {
+                border-top-color: var(--pk-color-violet-600);
+                border-right-color: var(--pk-color-violet-600);
+            }
+
+            :host([tone='amber']) .spinner {
+                border-top-color: var(--pk-color-amber-500);
+                border-right-color: var(--pk-color-amber-500);
+            }
+
+            @keyframes pk-spinner-spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+        }
+    `];
+//#endregion
+//#region src/components/spinner/pk-spinner.ts
+var PkSpinner = class PkSpinner extends PkElement {
+	constructor(..._args) {
+		super(..._args);
+		this.variant = "default";
+		this.size = "sm";
+		this.centered = false;
+	}
+	static {
+		this.styles = pkSpinnerStyles;
+	}
+	render() {
+		return b`
+            <div part="base" class="spinner" aria-hidden="true"></div>
+        `;
+	}
+};
+__decorate([n({ reflect: true })], PkSpinner.prototype, "variant", void 0);
+__decorate([n({ reflect: true })], PkSpinner.prototype, "size", void 0);
+__decorate([n({ reflect: true })], PkSpinner.prototype, "tone", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkSpinner.prototype, "centered", void 0);
+PkSpinner = __decorate([t("pk-spinner")], PkSpinner);
+//#endregion
+export { PkSpinner as t };

package/dist-loader/chunks/pk-textarea-CC6WXpIu.js

@@ -0,0 +1,334 @@
+import { n as uniqueId } from "./pk-a11y-Cx5RZvhu.js";
+import { c as r, f as A, l as n, m as i, n as l, p as b, r as o, s as e, u as t } from "./lit-Dnn7gEi2.js";
+import { c as __decorate, i as PkFormAssociatedElement, n as formControlStyles, o as syncStandaloneControlAria } from "./pk-base-BlxAYXJD.js";
+import { t as MirrorValidator } from "./mirror-validator-C5XrXPaq.js";
+import { t as RequiredValidator } from "./required-validator-0XwZtX9k.js";
+import { t as HasSlotController } from "./has-slot-BGJeJdHr.js";
+import { n as readLegacyInstructions, t as hasInstructionContent } from "./field-labels-D3lKQ2nq.js";
+//#region src/components/textarea/pk-textarea.styles.ts
+var pkTextareaStyles = i`
+    @layer pk-component {
+        :host {
+            display: block;
+            width: 100%;
+            font-family: var(--pk-font-family);
+            font-size: var(--pk-font-size-base);
+            line-height: var(--pk-line-height);
+        }
+
+        .textarea {
+            display: block;
+            width: 100%;
+            min-height: 5rem;
+            margin: 0;
+            padding: 7px 10px;
+            border: var(--pk-input-border);
+            border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));
+            background: var(--pk-input-bg);
+            background-clip: padding-box;
+            /* Craft CP body / field value text. */
+            color: var(--pk-color-gray-700);
+            font: inherit;
+            line-height: 1.4;
+            resize: vertical;
+            appearance: none;
+            box-sizing: border-box;
+            outline: none;
+            transition: border-color 0.12s ease, box-shadow 0.12s ease;
+        }
+
+        .textarea::placeholder {
+            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));
+        }
+
+        /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */
+        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        .textarea:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+            background: var(--pk-color-gray-50);
+        }
+
+        :host([invalid]) .textarea,
+        :host(:state(user-invalid)) .textarea {
+            border-color: var(--pk-color-rose-600);
+        }
+
+        :host([invalid]) .textarea:focus,
+        :host([invalid]) .textarea:focus-visible,
+        :host([invalid][data-state='focus-visible']) .textarea,
+        :host(:state(user-invalid)) .textarea:focus,
+        :host(:state(user-invalid)) .textarea:focus-visible {
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        /* Editable-table cells (v1): flush into the row and fill cell height.
+         * Chain height through form-control — percentage on .textarea alone
+         * doesn't resolve when the wrapper sizes to content (rows / min-height). */
+        :host([fit-cell]),
+        :host([data-editable-table-input]) {
+            display: block;
+            height: 100%;
+            min-height: 100%;
+            box-sizing: border-box;
+            overflow: hidden;
+        }
+
+        :host([fit-cell]) .form-control,
+        :host([data-editable-table-input]) .form-control {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+            min-height: 100%;
+        }
+
+        :host([fit-cell]) .textarea,
+        :host([data-editable-table-input]) .textarea {
+            flex: 1 1 auto;
+            border: none;
+            border-radius: 0;
+            background: transparent;
+            box-shadow: none;
+            height: 100%;
+            min-height: 0;
+            max-height: 100%;
+            /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +
+             * line-height 1.4 overflows the 34px et cell and shows a scrollbar
+             * even for empty / single-line notes. */
+            padding: 0.375rem 0.5rem;
+            line-height: 1.25;
+            overflow-x: hidden;
+            overflow-y: auto;
+            resize: none;
+        }
+
+        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,
+        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,
+        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,
+        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);
+        }
+
+        :host([fit-cell][invalid]) .textarea,
+        :host([fit-cell]:state(user-invalid)) .textarea,
+        :host([fit-cell][invalid]) .textarea:focus,
+        :host([fit-cell][invalid]) .textarea:focus-visible,
+        :host([fit-cell]:state(user-invalid)) .textarea:focus,
+        :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,
+        :host([data-editable-table-input][invalid]) .textarea,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea,
+        :host([data-editable-table-input][invalid]) .textarea:focus,
+        :host([data-editable-table-input][invalid]) .textarea:focus-visible,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,
+        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {
+            border: none;
+            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);
+        }
+    }
+`;
+//#endregion
+//#region src/components/textarea/pk-textarea.ts
+var PkTextarea = class PkTextarea extends PkFormAssociatedElement {
+	constructor(..._args) {
+		super(..._args);
+		this.assumeInteractionOn = ["blur", "input"];
+		this.hasSlotController = new HasSlotController(this, "instructions", "hint", "label");
+		this.controlId = uniqueId("pk-textarea");
+		this.placeholder = "";
+		this._value = null;
+		this.defaultValue = null;
+		this.size = "default";
+		this.label = "";
+		this.instructions = "";
+		this.readonly = false;
+		this.invalid = false;
+		this.fitCell = false;
+		this.withLabel = false;
+		this.withInstructions = false;
+	}
+	static {
+		this.styles = [formControlStyles, pkTextareaStyles];
+	}
+	static get validators() {
+		return [
+			...super.validators,
+			MirrorValidator(),
+			RequiredValidator()
+		];
+	}
+	get value() {
+		if (this.valueHasChanged) return this._value ?? "";
+		return this._value ?? this.defaultValue ?? "";
+	}
+	set value(val) {
+		const next = val ?? "";
+		if (this._value === next) return;
+		this.valueHasChanged = true;
+		this._value = next;
+	}
+	connectedCallback() {
+		this.instructions = readLegacyInstructions(this, this.instructions);
+		if (this.hasAttribute("with-hint")) this.withInstructions = true;
+		super.connectedCallback();
+	}
+	syncFormValue() {
+		this.setValue(this.value || "");
+	}
+	resetToDefaultValue() {
+		this.valueHasChanged = false;
+		this._value = null;
+	}
+	restoreFormState(state) {
+		if (typeof state === "string") this.value = state;
+	}
+	formResetCallback() {
+		this.valueHasChanged = false;
+		this._value = null;
+		if (this.input) this.input.value = this.defaultValue ?? "";
+		super.formResetCallback();
+	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("defaultValue")) this.setState("blank", !this.value);
+		super.updated(changed);
+	}
+	syncStandaloneAria() {
+		if (!this.input) return;
+		const hasLabel = this.hasLabelContent();
+		const hasInstructions = this.hasInstructionsContent();
+		syncStandaloneControlAria({
+			control: this.input,
+			labelId: `${this.controlId}-label`,
+			instructionsId: `${this.controlId}-instructions`,
+			hasLabel,
+			hasInstructions,
+			required: this.required,
+			invalid: this.invalid || !this.internals.validity.valid
+		});
+	}
+	hasLabelContent() {
+		return Boolean(this.label) || this.hasSlotController.test("label", this.withLabel);
+	}
+	hasInstructionsContent() {
+		return hasInstructionContent((name, flag) => this.hasSlotController.test(name, flag), this.instructions, this.withInstructions);
+	}
+	focus(options) {
+		this.input?.focus(options);
+	}
+	blur() {
+		this.input?.blur();
+	}
+	handleInput() {
+		this.value = this.input.value;
+		this.dispatchEvent(new Event("input", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	handleChange(event) {
+		this.value = this.input.value;
+		event.stopPropagation();
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hasLabel = this.hasLabelContent();
+		const hasInstructions = this.hasInstructionsContent();
+		return b`
+            <div part="form-control" class="form-control">
+                ${hasLabel ? b`
+                        <label
+                            part="label"
+                            class="form-control__label"
+                            id=${`${this.controlId}-label`}
+                            for=${`${this.controlId}-control`}
+                        >
+                            <slot name="label">${this.label}</slot>
+                        </label>
+                    ` : A}
+
+                ${hasInstructions ? b`
+                        <p
+                            part="instructions"
+                            class="form-control__instructions"
+                            id=${`${this.controlId}-instructions`}
+                        >
+                            <slot name="instructions">${this.instructions}</slot>
+                            <slot name="hint"></slot>
+                        </p>
+                    ` : A}
+
+                <textarea
+                    part="textarea"
+                    class="textarea"
+                    id=${hasLabel ? `${this.controlId}-control` : A}
+                    rows=${o(this.fitCell ? this.rows ?? 1 : this.rows)}
+                    .value=${l(this.value)}
+                    placeholder=${this.placeholder || A}
+                    maxlength=${o(this.maxlength)}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?required=${this.required}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @focus=${() => this.dispatchEvent(new Event("focus", {
+			bubbles: true,
+			composed: true
+		}))}
+                    @blur=${() => this.dispatchEvent(new Event("blur", {
+			bubbles: true,
+			composed: true
+		}))}
+                ></textarea>
+            </div>
+        `;
+	}
+};
+__decorate([e("textarea")], PkTextarea.prototype, "input", void 0);
+__decorate([n()], PkTextarea.prototype, "placeholder", void 0);
+__decorate([r()], PkTextarea.prototype, "value", null);
+__decorate([n({
+	attribute: "value",
+	reflect: true
+})], PkTextarea.prototype, "defaultValue", void 0);
+__decorate([n({ reflect: true })], PkTextarea.prototype, "size", void 0);
+__decorate([n()], PkTextarea.prototype, "label", void 0);
+__decorate([n()], PkTextarea.prototype, "instructions", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkTextarea.prototype, "readonly", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true
+})], PkTextarea.prototype, "invalid", void 0);
+__decorate([n({
+	type: Boolean,
+	reflect: true,
+	attribute: "fit-cell"
+})], PkTextarea.prototype, "fitCell", void 0);
+__decorate([n({ type: Number })], PkTextarea.prototype, "rows", void 0);
+__decorate([n({
+	type: Number,
+	attribute: "max-length"
+})], PkTextarea.prototype, "maxlength", void 0);
+__decorate([n({
+	attribute: "with-label",
+	type: Boolean
+})], PkTextarea.prototype, "withLabel", void 0);
+__decorate([n({
+	attribute: "with-instructions",
+	type: Boolean
+})], PkTextarea.prototype, "withInstructions", void 0);
+PkTextarea = __decorate([t("pk-textarea")], PkTextarea);
+//#endregion
+export { PkTextarea as t };

package/dist-loader/chunks/pk-time-picker-BtGXo-KJ.js

@@ -0,0 +1,225 @@
+import { m as i, u as t } from "./lit-Dnn7gEi2.js";
+import { c as __decorate } from "./pk-base-BlxAYXJD.js";
+import { _ as clock } from "./icons-B1i-oRoD.js";
+import { t as createIconElement } from "./render-DApFfV9S.js";
+import { n as pkSelectStyles, t as PkSelect } from "./pk-select-BcbtjIoP.js";
+//#region src/utils/time-options.ts
+var timeOptionsCache = null;
+function resolveTimepickerOptions() {
+	const craft = globalThis.Craft?.timepicker;
+	return {
+		timeFormat: craft?.timeFormat || "g:i A",
+		lang: {
+			AM: craft?.lang?.AM || "AM",
+			PM: craft?.lang?.PM || "PM"
+		},
+		locale: craft?.locale || document.documentElement.lang || "en-US"
+	};
+}
+/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */
+function generateTimeOptions() {
+	if (timeOptionsCache) return timeOptionsCache;
+	const options = [];
+	const { timeFormat, lang, locale } = resolveTimepickerOptions();
+	for (let hour = 0; hour < 24; hour += 1) for (let minute = 0; minute < 60; minute += 30) {
+		const timeString = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+		let displayTime;
+		if (timeFormat === "g:i A") {
+			let displayHour = hour;
+			if (hour === 0) displayHour = 12;
+			else if (hour > 12) displayHour = hour - 12;
+			const ampm = hour >= 12 ? lang.PM : lang.AM;
+			displayTime = `${displayHour}:${minute.toString().padStart(2, "0")} ${ampm}`;
+		} else if (timeFormat === "G:i") displayTime = timeString;
+		else displayTime = (/* @__PURE__ */ new Date(`2000-01-01T${timeString}:00`)).toLocaleTimeString(locale, {
+			hour: "numeric",
+			minute: "2-digit",
+			hour12: timeFormat.includes("A")
+		});
+		options.push({
+			value: timeString,
+			label: displayTime
+		});
+	}
+	timeOptionsCache = options;
+	return options;
+}
+//#endregion
+//#region src/components/time-picker/pk-time-picker.styles.ts
+var pkTimePickerStyles = i`
+    @layer pk-component {
+        :host {
+            display: inline-block;
+            width: 8.125rem;
+            min-width: 8.125rem;
+            color: var(--pk-color-gray-700);
+            --pk-select-trigger-border-width: 1px;
+            --pk-select-item-min-height: 2.125rem;
+            --pk-select-item-padding-block: 0;
+            --pk-select-item-padding-inline: 10px;
+            --pk-select-item-font-size: var(--pk-font-size-base);
+        }
+
+        .control {
+            justify-content: flex-start;
+            gap: 0.5rem;
+            width: 100%;
+            height: 2.125rem;
+            min-height: 2.125rem;
+            border-color: var(--pk-color-slate-400) !important;
+            border-radius: var(--pk-radius-lg) !important;
+            background: transparent !important;
+            background-color: transparent !important;
+            text-align: left;
+            font-weight: 400;
+            line-height: 1.2;
+            cursor: default;
+        }
+
+        :host([open]) .control {
+            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            border-color: var(--pk-color-slate-400) !important;
+            box-shadow: none;
+        }
+
+        :host(:not([disabled])) .control:hover:not(:disabled) {
+            background: var(--pk-color-slate-50) !important;
+            background-color: var(--pk-color-slate-50) !important;
+        }
+
+        :host(:not([disabled])[open]) .control:hover:not(:disabled),
+        :host(:not([disabled])) .control:active:not(:disabled) {
+            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;
+        }
+
+        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,
+        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {
+            border-color: var(--pk-color-sky-600) !important;
+            box-shadow: var(--pk-input-focus-shadow);
+        }
+
+        :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,
+        :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {
+            border-color: var(--pk-color-slate-400) !important;
+            box-shadow: none;
+        }
+
+        :host([invalid]) .control,
+        :host(:state(user-invalid)) .control {
+            border-color: var(--pk-color-rose-600) !important;
+        }
+
+        :host([invalid]) .control:focus-visible,
+        :host([invalid][data-state='focus-visible']) .control,
+        :host(:state(user-invalid)) .control:focus-visible,
+        :host(:state(user-invalid)[data-state='focus-visible']) .control {
+            box-shadow: var(--pk-input-invalid-focus-shadow);
+        }
+
+        .control-start {
+            color: var(--pk-color-gray-400);
+            pointer-events: none;
+        }
+
+        .control-start svg {
+            display: block;
+            width: 14px;
+            height: 14px;
+        }
+
+        .value {
+            flex: 1;
+            line-height: 1.2;
+            color: inherit;
+        }
+
+        .value.is-placeholder {
+            color: var(--pk-color-gray-400);
+        }
+
+        .icon {
+            margin-inline-start: auto;
+            color: var(--pk-color-gray-600);
+        }
+
+        .panel {
+            min-width: 8rem;
+            max-height: 15rem;
+        }
+
+        /* Editable-table cells: flush fill — must live here so !important beats the
+         * standalone trigger chrome (external ::part cannot override it). */
+        :host(.cell-pk-control) {
+            display: block;
+            width: 100%;
+            min-width: 0;
+            height: 100%;
+            --pk-select-trigger-border-width: 0;
+            --pk-select-item-min-height: 100%;
+            --pk-select-item-padding-block: 0;
+        }
+
+        :host(.cell-pk-control) .control {
+            width: 100%;
+            height: 100% !important;
+            min-height: 100% !important;
+            border: 0 !important;
+            border-radius: 0 !important;
+            background: transparent !important;
+            background-color: transparent !important;
+        }
+
+        :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),
+        :host(.cell-pk-control[open]) .control,
+        :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),
+        :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {
+            border-radius: 0 !important;
+        }
+
+        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,
+        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {
+            border: 0 !important;
+            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);
+        }
+    }
+`;
+//#endregion
+//#region src/components/time-picker/pk-time-picker.ts
+var PkTimePicker = class PkTimePicker extends PkSelect {
+	constructor(..._args) {
+		super(..._args);
+		this.optionsSeeded = false;
+	}
+	static {
+		this.styles = [...pkSelectStyles, pkTimePickerStyles];
+	}
+	connectedCallback() {
+		this.ensureTimeOptions();
+		this.ensureClockIcon();
+		super.connectedCallback();
+	}
+	ensureTimeOptions() {
+		if (this.optionsSeeded || this.querySelector("pk-option")) {
+			this.optionsSeeded = true;
+			return;
+		}
+		for (const option of generateTimeOptions()) {
+			const element = document.createElement("pk-option");
+			element.value = option.value;
+			element.textContent = option.label;
+			this.append(element);
+		}
+		this.optionsSeeded = true;
+	}
+	ensureClockIcon() {
+		if (this.querySelector("[slot=\"start\"]")) return;
+		const icon = createIconElement(clock);
+		icon.setAttribute("slot", "start");
+		this.prepend(icon);
+	}
+};
+PkTimePicker = __decorate([t("pk-time-picker")], PkTimePicker);
+//#endregion
+export { PkTimePicker as t };