@verbb/plugin-kit-web 2.0.20 → 2.0.21

package/dist/chunks/{pk-textarea-CYM2tK88.js.map → pk-textarea-Dhj1WFLH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-textarea-CYM2tK88.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\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        .textarea {\n            display: block;\n            width: 100%;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n            background: var(--pk-input-bg);\n            background-clip: padding-box;\n            /* Craft CP body / field value text. */\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            resize: vertical;\n            appearance: none;\n            box-sizing: border-box;\n            outline: none;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n            background: var(--pk-color-gray-50);\n        }\n\n        :host([invalid]) .textarea,\n        :host(:state(user-invalid)) .textarea {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) .textarea:focus,\n        :host([invalid]) .textarea:focus-visible,\n        :host([invalid][data-state='focus-visible']) .textarea,\n        :host(:state(user-invalid)) .textarea:focus,\n        :host(:state(user-invalid)) .textarea:focus-visible {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        /* Editable-table cells (v1): flush into the row and fill cell height.\n         * Chain height through form-control — percentage on .textarea alone\n         * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n        :host([fit-cell]),\n        :host([data-editable-table-input]) {\n            display: block;\n            height: 100%;\n            min-height: 100%;\n            box-sizing: border-box;\n            overflow: hidden;\n        }\n\n        :host([fit-cell]) .form-control,\n        :host([data-editable-table-input]) .form-control {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            min-height: 100%;\n        }\n\n        :host([fit-cell]) .textarea,\n        :host([data-editable-table-input]) .textarea {\n            flex: 1 1 auto;\n            border: none;\n            border-radius: 0;\n            background: transparent;\n            box-shadow: none;\n            height: 100%;\n            min-height: 0;\n            max-height: 100%;\n            /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n             * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n             * even for empty / single-line notes. */\n            padding: 0.375rem 0.5rem;\n            line-height: 1.25;\n            overflow-x: hidden;\n            overflow-y: auto;\n            resize: none;\n        }\n\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .textarea,\n        :host([fit-cell]:state(user-invalid)) .textarea,\n        :host([fit-cell][invalid]) .textarea:focus,\n        :host([fit-cell][invalid]) .textarea:focus-visible,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n        :host([data-editable-table-input][invalid]) .textarea,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea,\n        :host([data-editable-table-input][invalid]) .textarea:focus,\n        :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field —  API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n    static override styles = [formControlStyles, pkTextareaStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n    private readonly controlId = uniqueId('pk-textarea');\n\n    @query('textarea')\n    override input!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    private _value: string | null = null;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    @state()\n    set value(val: string | null) {\n        const next = val ?? '';\n\n        if (this._value === next) {\n            return;\n        }\n\n        this.valueHasChanged = true;\n        this._value = next;\n    }\n\n    @property({ attribute: 'value', reflect: true })\n    defaultValue: string | null = null;\n\n    @property({ reflect: true })\n    size: PkTextareaSize = 'default';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    /** Flush + fill parent cell (editable tables). */\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n    @property({ type: Number })\n    rows?: number;\n\n    @property({ type: Number, attribute: 'max-length' })\n    maxlength?: number;\n\n    @property({ attribute: 'with-label', type: Boolean })\n    withLabel = false;\n\n    @property({ attribute: 'with-instructions', type: Boolean })\n    withInstructions = false;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n\n        if (this.hasAttribute('with-hint')) {\n            this.withInstructions = true;\n        }\n\n        super.connectedCallback();\n    }\n\n    protected override syncFormValue(): void {\n        this.setValue(this.value || '');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    override formResetCallback(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n\n        if (this.input) {\n            this.input.value = this.defaultValue ?? '';\n        }\n\n        super.formResetCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('defaultValue')) {\n            this.setState('blank', !this.value);\n        }\n\n        super.updated(changed);\n    }\n\n    protected override syncStandaloneAria(): void {\n        if (!this.input) {\n            return;\n        }\n\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        syncStandaloneControlAria({\n            control: this.input,\n            labelId: `${this.controlId}-label`,\n            instructionsId: `${this.controlId}-instructions`,\n            hasLabel,\n            hasInstructions,\n            required: this.required,\n            invalid: this.invalid || !this.internals.validity.valid,\n        });\n    }\n\n    private hasLabelContent(): boolean {\n        return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n    }\n\n    private hasInstructionsContent(): boolean {\n        return hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n            this.withInstructions,\n        );\n    }\n\n    focus(options?: FocusOptions): void {\n        this.input?.focus(options);\n    }\n\n    blur(): void {\n        this.input?.blur();\n    }\n\n    private handleInput(): void {\n        this.value = this.input.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    }\n\n    private handleChange(event: Event): void {\n        this.value = this.input.value;\n        event.stopPropagation();\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    override render() {\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel\n                    ? html`\n                        <label\n                            part=\"label\"\n                            class=\"form-control__label\"\n                            id=${`${this.controlId}-label`}\n                            for=${`${this.controlId}-control`}\n                        >\n                            <slot name=\"label\">${this.label}</slot>\n                        </label>\n                    `\n                    : nothing}\n\n                ${hasInstructions\n                    ? html`\n                        <p\n                            part=\"instructions\"\n                            class=\"form-control__instructions\"\n                            id=${`${this.controlId}-instructions`}\n                        >\n                            <slot name=\"instructions\">${this.instructions}</slot>\n                            <slot name=\"hint\"></slot>\n                        </p>\n                    `\n                    : nothing}\n\n                <textarea\n                    part=\"textarea\"\n                    class=\"textarea\"\n                    id=${hasLabel ? `${this.controlId}-control` : nothing}\n                    rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n                    .value=${live(this.value)}\n                    placeholder=${this.placeholder || nothing}\n                    maxlength=${ifDefined(this.maxlength)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    ?required=${this.required}\n                    @input=${this.handleInput}\n                    @change=${this.handleChange}\n                    @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n                    @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n                ></textarea>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-textarea': PkTextarea;\n    }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pk-textarea-Dhj1WFLH.js","names":[],"sources":["../../src/components/textarea/pk-textarea.styles.ts","../../src/components/textarea/pk-textarea.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const pkTextareaStyles = css`\n    @layer pk-component {\n        :host {\n            display: block;\n            width: 100%;\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        .textarea {\n            display: block;\n            width: 100%;\n            min-height: 5rem;\n            margin: 0;\n            padding: 7px 10px;\n            border: var(--pk-input-border);\n            border-radius: var(--pk-textarea-border-radius, var(--pk-radius-md));\n            background: var(--pk-input-bg);\n            background-clip: padding-box;\n            /* Craft CP body / field value text. */\n            color: var(--pk-color-gray-700);\n            font: inherit;\n            line-height: 1.4;\n            resize: vertical;\n            appearance: none;\n            box-sizing: border-box;\n            outline: none;\n            transition: border-color 0.12s ease, box-shadow 0.12s ease;\n        }\n\n        .textarea::placeholder {\n            color: var(--pk-input-placeholder-color, var(--pk-color-gray-400));\n        }\n\n        /* Craft: focus is box-shadow only — do not also flip border-color (double ring). */\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host(:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        .textarea:disabled {\n            cursor: not-allowed;\n            opacity: 0.5;\n            background: var(--pk-color-gray-50);\n        }\n\n        :host([invalid]) .textarea,\n        :host(:state(user-invalid)) .textarea {\n            border-color: var(--pk-color-rose-600);\n        }\n\n        :host([invalid]) .textarea:focus,\n        :host([invalid]) .textarea:focus-visible,\n        :host([invalid][data-state='focus-visible']) .textarea,\n        :host(:state(user-invalid)) .textarea:focus,\n        :host(:state(user-invalid)) .textarea:focus-visible {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        /* Editable-table cells (v1): flush into the row and fill cell height.\n         * Chain height through form-control — percentage on .textarea alone\n         * doesn't resolve when the wrapper sizes to content (rows / min-height). */\n        :host([fit-cell]),\n        :host([data-editable-table-input]) {\n            display: block;\n            height: 100%;\n            min-height: 100%;\n            box-sizing: border-box;\n            overflow: hidden;\n        }\n\n        :host([fit-cell]) .form-control,\n        :host([data-editable-table-input]) .form-control {\n            display: flex;\n            flex-direction: column;\n            height: 100%;\n            min-height: 100%;\n        }\n\n        :host([fit-cell]) .textarea,\n        :host([data-editable-table-input]) .textarea {\n            flex: 1 1 auto;\n            border: none;\n            border-radius: 0;\n            background: transparent;\n            box-shadow: none;\n            height: 100%;\n            min-height: 0;\n            max-height: 100%;\n            /* Match text-cell inset (v1 py-1.5 / px-2). 0.5rem block padding +\n             * line-height 1.4 overflows the 34px et cell and shows a scrollbar\n             * even for empty / single-line notes. */\n            padding: 0.375rem 0.5rem;\n            line-height: 1.25;\n            overflow-x: hidden;\n            overflow-y: auto;\n            resize: none;\n        }\n\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([fit-cell]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([fit-cell][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus,\n        :host([data-editable-table-input]:not([invalid]):not(:state(user-invalid))) .textarea:focus-visible,\n        :host([data-editable-table-input][data-state='focus-visible']:not([invalid]):not(:state(user-invalid))) .textarea {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200);\n        }\n\n        :host([fit-cell][invalid]) .textarea,\n        :host([fit-cell]:state(user-invalid)) .textarea,\n        :host([fit-cell][invalid]) .textarea:focus,\n        :host([fit-cell][invalid]) .textarea:focus-visible,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus,\n        :host([fit-cell]:state(user-invalid)) .textarea:focus-visible,\n        :host([data-editable-table-input][invalid]) .textarea,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea,\n        :host([data-editable-table-input][invalid]) .textarea:focus,\n        :host([data-editable-table-input][invalid]) .textarea:focus-visible,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus,\n        :host([data-editable-table-input]:state(user-invalid)) .textarea:focus-visible {\n            border: none;\n            box-shadow: inset 0 0 0 1px var(--pk-color-rose-600);\n        }\n    }\n`;\n","import { html, nothing } from 'lit';\nimport { customElement, property, query, state } from '../../decorators.js';\nimport type { PropertyValues } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\n\nimport { formControlStyles } from '../../base/form-control.styles.js';\nimport { PkFormAssociatedElement } from '../../base/pk-form-associated-element.js';\nimport { uniqueId } from '../../a11y/focus.js';\nimport { HasSlotController } from '../../internal/has-slot.js';\nimport { syncStandaloneControlAria } from '../../internal/control-aria.js';\nimport { hasInstructionContent, readLegacyInstructions } from '../../internal/field-labels.js';\nimport { MirrorValidator, RequiredValidator } from '../../validators/index.js';\nimport { pkTextareaStyles } from './pk-textarea.styles.js';\n\nexport type PkTextareaSize = 'default' | 'sm';\n\n/**\n * Multiline text field —  API, Craft visuals.\n *\n * @slot label\n * @slot instructions\n * @slot hint - Alias for `instructions`\n *\n * @csspart form-control - Wrapper\n * @csspart label - Label\n * @csspart instructions - Instructions\n * @csspart textarea - Native textarea\n */\n@customElement('pk-textarea')\nexport class PkTextarea extends PkFormAssociatedElement {\n    static override styles = [formControlStyles, pkTextareaStyles];\n\n    static override get validators() {\n        return [...super.validators, MirrorValidator(), RequiredValidator()];\n    }\n\n    override assumeInteractionOn = ['blur', 'input'];\n\n    private readonly hasSlotController = new HasSlotController(this, 'instructions', 'hint', 'label');\n\n    private readonly controlId = uniqueId('pk-textarea');\n\n    @query('textarea')\n    override input!: HTMLTextAreaElement;\n\n    @property()\n    placeholder = '';\n\n    private _value: string | null = null;\n\n    get value(): string {\n        if (this.valueHasChanged) {\n            return this._value ?? '';\n        }\n\n        return this._value ?? this.defaultValue ?? '';\n    }\n\n    @state()\n    set value(val: string | null) {\n        const next = val ?? '';\n\n        if (this._value === next) {\n            return;\n        }\n\n        this.valueHasChanged = true;\n        this._value = next;\n    }\n\n    @property({ attribute: 'value', reflect: true })\n    defaultValue: string | null = null;\n\n    @property({ reflect: true })\n    size: PkTextareaSize = 'default';\n\n    @property()\n    label = '';\n\n    @property()\n    instructions = '';\n\n    @property({ type: Boolean, reflect: true })\n    readonly = false;\n\n    @property({ type: Boolean, reflect: true })\n    invalid = false;\n\n    /** Flush + fill parent cell (editable tables). */\n    @property({ type: Boolean, reflect: true, attribute: 'fit-cell' })\n    fitCell = false;\n\n    /** Native `rows` — use `1` in table cells so intrinsic height doesn't overflow. */\n    @property({ type: Number })\n    rows?: number;\n\n    @property({ type: Number, attribute: 'max-length' })\n    maxlength?: number;\n\n    @property({ attribute: 'with-label', type: Boolean })\n    withLabel = false;\n\n    @property({ attribute: 'with-instructions', type: Boolean })\n    withInstructions = false;\n\n    override connectedCallback(): void {\n        this.instructions = readLegacyInstructions(this, this.instructions);\n\n        if (this.hasAttribute('with-hint')) {\n            this.withInstructions = true;\n        }\n\n        super.connectedCallback();\n    }\n\n    protected override syncFormValue(): void {\n        this.setValue(this.value || '');\n    }\n\n    protected override resetToDefaultValue(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n    }\n\n    protected override restoreFormState(state: string | File | FormData | null): void {\n        if (typeof state === 'string') {\n            this.value = state;\n        }\n    }\n\n    override formResetCallback(): void {\n        this.valueHasChanged = false;\n        this._value = null;\n\n        if (this.input) {\n            this.input.value = this.defaultValue ?? '';\n        }\n\n        super.formResetCallback();\n    }\n\n    override updated(changed: PropertyValues): void {\n        if (changed.has('value') || changed.has('defaultValue')) {\n            this.setState('blank', !this.value);\n        }\n\n        super.updated(changed);\n    }\n\n    protected override syncStandaloneAria(): void {\n        if (!this.input) {\n            return;\n        }\n\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        syncStandaloneControlAria({\n            control: this.input,\n            labelId: `${this.controlId}-label`,\n            instructionsId: `${this.controlId}-instructions`,\n            hasLabel,\n            hasInstructions,\n            required: this.required,\n            invalid: this.invalid || !this.internals.validity.valid,\n        });\n    }\n\n    private hasLabelContent(): boolean {\n        return Boolean(this.label) || this.hasSlotController.test('label', this.withLabel);\n    }\n\n    private hasInstructionsContent(): boolean {\n        return hasInstructionContent(\n            (name, flag) => this.hasSlotController.test(name, flag),\n            this.instructions,\n            this.withInstructions,\n        );\n    }\n\n    focus(options?: FocusOptions): void {\n        this.input?.focus(options);\n    }\n\n    blur(): void {\n        this.input?.blur();\n    }\n\n    private handleInput(): void {\n        this.value = this.input.value;\n        this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n    }\n\n    private handleChange(event: Event): void {\n        this.value = this.input.value;\n        event.stopPropagation();\n        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));\n    }\n\n    override render() {\n        const hasLabel = this.hasLabelContent();\n        const hasInstructions = this.hasInstructionsContent();\n\n        return html`\n            <div part=\"form-control\" class=\"form-control\">\n                ${hasLabel\n                    ? html`\n                        <label\n                            part=\"label\"\n                            class=\"form-control__label\"\n                            id=${`${this.controlId}-label`}\n                            for=${`${this.controlId}-control`}\n                        >\n                            <slot name=\"label\">${this.label}</slot>\n                        </label>\n                    `\n                    : nothing}\n\n                ${hasInstructions\n                    ? html`\n                        <p\n                            part=\"instructions\"\n                            class=\"form-control__instructions\"\n                            id=${`${this.controlId}-instructions`}\n                        >\n                            <slot name=\"instructions\">${this.instructions}</slot>\n                            <slot name=\"hint\"></slot>\n                        </p>\n                    `\n                    : nothing}\n\n                <textarea\n                    part=\"textarea\"\n                    class=\"textarea\"\n                    id=${hasLabel ? `${this.controlId}-control` : nothing}\n                    rows=${ifDefined(this.fitCell ? (this.rows ?? 1) : this.rows)}\n                    .value=${live(this.value)}\n                    placeholder=${this.placeholder || nothing}\n                    maxlength=${ifDefined(this.maxlength)}\n                    ?disabled=${this.disabled}\n                    ?readonly=${this.readonly}\n                    ?required=${this.required}\n                    @input=${this.handleInput}\n                    @change=${this.handleChange}\n                    @focus=${() => this.dispatchEvent(new Event('focus', { bubbles: true, composed: true }))}\n                    @blur=${() => this.dispatchEvent(new Event('blur', { bubbles: true, composed: true }))}\n                ></textarea>\n            </div>\n        `;\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-textarea': PkTextarea;\n    }\n}\n"],"mappings":"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"}

package/dist/chunks/{pk-time-picker-CebRqydV.js → pk-time-picker-ChRbKHNB.js}

@@ -2,7 +2,7 @@ import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import { t as createIconElement } from "./render-Dvc3MHQR.js";
 import "./pk-option-DQZHV9jL.js";
-import { n as pkSelectStyles, t as PkSelect } from "./pk-select-CdQdhnZN.js";
+import { n as pkSelectStyles, t as PkSelect } from "./pk-select-b5S5WKc-.js";
 import { css } from "lit";
 //#region src/utils/time-options.ts
 var timeOptionsCache = null;
@@ -225,4 +225,4 @@ PkTimePicker = __decorate([customElement("pk-time-picker")], PkTimePicker);
 //#endregion
 export { PkTimePicker as t };
 
-//# sourceMappingURL=pk-time-picker-CebRqydV.js.map
+//# sourceMappingURL=pk-time-picker-ChRbKHNB.js.map

package/dist/chunks/{pk-time-picker-CebRqydV.js.map → pk-time-picker-ChRbKHNB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"pk-time-picker-CebRqydV.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n    value: string;\n    label: string;\n};\n\nexport type TimepickerFormatOptions = {\n    timeFormat?: string;\n    lang?: {\n        AM?: string;\n        PM?: string;\n    };\n    locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n    const craft = (globalThis as typeof globalThis & {\n        Craft?: { timepicker?: TimepickerFormatOptions };\n    }).Craft?.timepicker;\n\n    return {\n        timeFormat: craft?.timeFormat || 'g:i A',\n        lang: {\n            AM: craft?.lang?.AM || 'AM',\n            PM: craft?.lang?.PM || 'PM',\n        },\n        locale: craft?.locale || document.documentElement.lang || 'en-US',\n    };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n    if (timeOptionsCache) {\n        return timeOptionsCache;\n    }\n\n    const options: TimeOption[] = [];\n    const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n    for (let hour = 0; hour < 24; hour += 1) {\n        for (let minute = 0; minute < 60; minute += 30) {\n            const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n            let displayTime: string;\n\n            if (timeFormat === 'g:i A') {\n                let displayHour = hour;\n\n                if (hour === 0) {\n                    displayHour = 12;\n                } else if (hour > 12) {\n                    displayHour = hour - 12;\n                }\n\n                const ampm = hour >= 12 ? lang.PM : lang.AM;\n                displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n            } else if (timeFormat === 'G:i') {\n                displayTime = timeString;\n            } else {\n                displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n                    hour: 'numeric',\n                    minute: '2-digit',\n                    hour12: timeFormat.includes('A'),\n                });\n            }\n\n            options.push({\n                value: timeString,\n                label: displayTime,\n            });\n        }\n    }\n\n    timeOptionsCache = options;\n\n    return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n    timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            width: 8.125rem;\n            min-width: 8.125rem;\n            color: var(--pk-color-gray-700);\n            --pk-select-trigger-border-width: 1px;\n            --pk-select-item-min-height: 2.125rem;\n            --pk-select-item-padding-block: 0;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n        }\n\n        .control {\n            justify-content: flex-start;\n            gap: 0.5rem;\n            width: 100%;\n            height: 2.125rem;\n            min-height: 2.125rem;\n            border-color: var(--pk-color-slate-400) !important;\n            border-radius: var(--pk-radius-lg) !important;\n            background: transparent !important;\n            background-color: transparent !important;\n            text-align: left;\n            font-weight: 400;\n            line-height: 1.2;\n            cursor: default;\n        }\n\n        :host([open]) .control {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host(:not([disabled])) .control:hover:not(:disabled) {\n            background: var(--pk-color-slate-50) !important;\n            background-color: var(--pk-color-slate-50) !important;\n        }\n\n        :host(:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(:not([disabled])) .control:active:not(:disabled) {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border-color: var(--pk-color-sky-600) !important;\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host([invalid]) .control,\n        :host(:state(user-invalid)) .control {\n            border-color: var(--pk-color-rose-600) !important;\n        }\n\n        :host([invalid]) .control:focus-visible,\n        :host([invalid][data-state='focus-visible']) .control,\n        :host(:state(user-invalid)) .control:focus-visible,\n        :host(:state(user-invalid)[data-state='focus-visible']) .control {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        .control-start {\n            color: var(--pk-color-gray-400);\n            pointer-events: none;\n        }\n\n        .control-start svg {\n            display: block;\n            width: 14px;\n            height: 14px;\n        }\n\n        .value {\n            flex: 1;\n            line-height: 1.2;\n            color: inherit;\n        }\n\n        .value.is-placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .icon {\n            margin-inline-start: auto;\n            color: var(--pk-color-gray-600);\n        }\n\n        .panel {\n            min-width: 8rem;\n            max-height: 15rem;\n        }\n\n        /* Editable-table cells: flush fill — must live here so !important beats the\n         * standalone trigger chrome (external ::part cannot override it). */\n        :host(.cell-pk-control) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            height: 100%;\n            --pk-select-trigger-border-width: 0;\n            --pk-select-item-min-height: 100%;\n            --pk-select-item-padding-block: 0;\n        }\n\n        :host(.cell-pk-control) .control {\n            width: 100%;\n            height: 100% !important;\n            min-height: 100% !important;\n            border: 0 !important;\n            border-radius: 0 !important;\n            background: transparent !important;\n            background-color: transparent !important;\n        }\n\n        :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n        :host(.cell-pk-control[open]) .control,\n        :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n            border-radius: 0 !important;\n        }\n\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border: 0 !important;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n        }\n    }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not  `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n    // Flatten — `pkSelectStyles` is already a CSSResult[].\n    static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n    private optionsSeeded = false;\n\n    override connectedCallback(): void {\n        this.ensureTimeOptions();\n        this.ensureClockIcon();\n        super.connectedCallback();\n    }\n\n    private ensureTimeOptions(): void {\n        if (this.optionsSeeded || this.querySelector('pk-option')) {\n            this.optionsSeeded = true;\n            return;\n        }\n\n        for (const option of generateTimeOptions()) {\n            const element = document.createElement('pk-option');\n            element.value = option.value;\n            element.textContent = option.label;\n            this.append(element);\n        }\n\n        this.optionsSeeded = true;\n    }\n\n    private ensureClockIcon(): void {\n        if (this.querySelector('[slot=\"start\"]')) {\n            return;\n        }\n\n        const icon = createIconElement(clock);\n        icon.setAttribute('slot', 'start');\n        this.prepend(icon);\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-time-picker': PkTimePicker;\n    }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}
+{"version":3,"file":"pk-time-picker-ChRbKHNB.js","names":[],"sources":["../../src/utils/time-options.ts","../../src/components/time-picker/pk-time-picker.styles.ts","../../src/components/time-picker/pk-time-picker.ts"],"sourcesContent":["export type TimeOption = {\n    value: string;\n    label: string;\n};\n\nexport type TimepickerFormatOptions = {\n    timeFormat?: string;\n    lang?: {\n        AM?: string;\n        PM?: string;\n    };\n    locale?: string;\n};\n\nlet timeOptionsCache: TimeOption[] | null = null;\n\nfunction resolveTimepickerOptions(): Required<Pick<TimepickerFormatOptions, 'timeFormat' | 'lang'>> & { locale: string } {\n    const craft = (globalThis as typeof globalThis & {\n        Craft?: { timepicker?: TimepickerFormatOptions };\n    }).Craft?.timepicker;\n\n    return {\n        timeFormat: craft?.timeFormat || 'g:i A',\n        lang: {\n            AM: craft?.lang?.AM || 'AM',\n            PM: craft?.lang?.PM || 'PM',\n        },\n        locale: craft?.locale || document.documentElement.lang || 'en-US',\n    };\n}\n\n/** Generate time options in 30-minute increments — mirrors React `generateTimeOptions`. */\nexport function generateTimeOptions(): TimeOption[] {\n    if (timeOptionsCache) {\n        return timeOptionsCache;\n    }\n\n    const options: TimeOption[] = [];\n    const { timeFormat, lang, locale } = resolveTimepickerOptions();\n\n    for (let hour = 0; hour < 24; hour += 1) {\n        for (let minute = 0; minute < 60; minute += 30) {\n            const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;\n\n            let displayTime: string;\n\n            if (timeFormat === 'g:i A') {\n                let displayHour = hour;\n\n                if (hour === 0) {\n                    displayHour = 12;\n                } else if (hour > 12) {\n                    displayHour = hour - 12;\n                }\n\n                const ampm = hour >= 12 ? lang.PM : lang.AM;\n                displayTime = `${displayHour}:${minute.toString().padStart(2, '0')} ${ampm}`;\n            } else if (timeFormat === 'G:i') {\n                displayTime = timeString;\n            } else {\n                displayTime = new Date(`2000-01-01T${timeString}:00`).toLocaleTimeString(locale, {\n                    hour: 'numeric',\n                    minute: '2-digit',\n                    hour12: timeFormat.includes('A'),\n                });\n            }\n\n            options.push({\n                value: timeString,\n                label: displayTime,\n            });\n        }\n    }\n\n    timeOptionsCache = options;\n\n    return options;\n}\n\nexport function clearTimeOptionsCache(): void {\n    timeOptionsCache = null;\n}\n","import { css } from 'lit';\n\nexport const pkTimePickerStyles = css`\n    @layer pk-component {\n        :host {\n            display: inline-block;\n            width: 8.125rem;\n            min-width: 8.125rem;\n            color: var(--pk-color-gray-700);\n            --pk-select-trigger-border-width: 1px;\n            --pk-select-item-min-height: 2.125rem;\n            --pk-select-item-padding-block: 0;\n            --pk-select-item-padding-inline: 10px;\n            --pk-select-item-font-size: var(--pk-font-size-base);\n        }\n\n        .control {\n            justify-content: flex-start;\n            gap: 0.5rem;\n            width: 100%;\n            height: 2.125rem;\n            min-height: 2.125rem;\n            border-color: var(--pk-color-slate-400) !important;\n            border-radius: var(--pk-radius-lg) !important;\n            background: transparent !important;\n            background-color: transparent !important;\n            text-align: left;\n            font-weight: 400;\n            line-height: 1.2;\n            cursor: default;\n        }\n\n        :host([open]) .control {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host(:not([disabled])) .control:hover:not(:disabled) {\n            background: var(--pk-color-slate-50) !important;\n            background-color: var(--pk-color-slate-50) !important;\n        }\n\n        :host(:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(:not([disabled])) .control:active:not(:disabled) {\n            background: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n            background-color: var(--pk-color-slate-150, var(--pk-color-slate-100)) !important;\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border-color: var(--pk-color-sky-600) !important;\n            box-shadow: var(--pk-input-focus-shadow);\n        }\n\n        :host(:not([invalid]):not(:state(user-invalid))[open]) .control:focus-visible,\n        :host(:not([invalid]):not(:state(user-invalid))[open][data-state='focus-visible']) .control {\n            border-color: var(--pk-color-slate-400) !important;\n            box-shadow: none;\n        }\n\n        :host([invalid]) .control,\n        :host(:state(user-invalid)) .control {\n            border-color: var(--pk-color-rose-600) !important;\n        }\n\n        :host([invalid]) .control:focus-visible,\n        :host([invalid][data-state='focus-visible']) .control,\n        :host(:state(user-invalid)) .control:focus-visible,\n        :host(:state(user-invalid)[data-state='focus-visible']) .control {\n            box-shadow: var(--pk-input-invalid-focus-shadow);\n        }\n\n        .control-start {\n            color: var(--pk-color-gray-400);\n            pointer-events: none;\n        }\n\n        .control-start svg {\n            display: block;\n            width: 14px;\n            height: 14px;\n        }\n\n        .value {\n            flex: 1;\n            line-height: 1.2;\n            color: inherit;\n        }\n\n        .value.is-placeholder {\n            color: var(--pk-color-gray-400);\n        }\n\n        .icon {\n            margin-inline-start: auto;\n            color: var(--pk-color-gray-600);\n        }\n\n        .panel {\n            min-width: 8rem;\n            max-height: 15rem;\n        }\n\n        /* Editable-table cells: flush fill — must live here so !important beats the\n         * standalone trigger chrome (external ::part cannot override it). */\n        :host(.cell-pk-control) {\n            display: block;\n            width: 100%;\n            min-width: 0;\n            height: 100%;\n            --pk-select-trigger-border-width: 0;\n            --pk-select-item-min-height: 100%;\n            --pk-select-item-padding-block: 0;\n        }\n\n        :host(.cell-pk-control) .control {\n            width: 100%;\n            height: 100% !important;\n            min-height: 100% !important;\n            border: 0 !important;\n            border-radius: 0 !important;\n            background: transparent !important;\n            background-color: transparent !important;\n        }\n\n        :host(.cell-pk-control:not([disabled])) .control:hover:not(:disabled),\n        :host(.cell-pk-control[open]) .control,\n        :host(.cell-pk-control:not([disabled])[open]) .control:hover:not(:disabled),\n        :host(.cell-pk-control:not([disabled])) .control:active:not(:disabled) {\n            border-radius: 0 !important;\n        }\n\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))) .control:focus-visible,\n        :host(.cell-pk-control:not([invalid]):not(:state(user-invalid))[data-state='focus-visible']) .control {\n            border: 0 !important;\n            box-shadow: inset 0 0 0 1px var(--pk-color-gray-200, #e5e7eb);\n        }\n    }\n`;\n","import { customElement } from '../../decorators.js';\n\nimport { createIconElement, clock } from '../../icons/index.js';\nimport { PkSelect } from '../select/pk-select.js';\n// Time picker seeds light-DOM options at connect — register the CE so getLabel() works.\nimport '../select/pk-option.js';\nimport { pkSelectStyles } from '../select/pk-select.styles.js';\nimport { generateTimeOptions } from '../../utils/time-options.js';\nimport { pkTimePickerStyles } from './pk-time-picker.styles.js';\n\n/**\n * Time picker — select wrapper with 30-minute increments and a clock icon.\n * Mirrors React `TimePicker` (not  `pk-time-input`).\n *\n * @slot start - Overrides the default clock icon\n * @slot - Additional `pk-option` items append after the generated list\n *\n * @event input\n * @event change\n * @event pk-change - `detail.value`\n */\n@customElement('pk-time-picker')\nexport class PkTimePicker extends PkSelect {\n    // Flatten — `pkSelectStyles` is already a CSSResult[].\n    static override styles = [...pkSelectStyles, pkTimePickerStyles];\n\n    private optionsSeeded = false;\n\n    override connectedCallback(): void {\n        this.ensureTimeOptions();\n        this.ensureClockIcon();\n        super.connectedCallback();\n    }\n\n    private ensureTimeOptions(): void {\n        if (this.optionsSeeded || this.querySelector('pk-option')) {\n            this.optionsSeeded = true;\n            return;\n        }\n\n        for (const option of generateTimeOptions()) {\n            const element = document.createElement('pk-option');\n            element.value = option.value;\n            element.textContent = option.label;\n            this.append(element);\n        }\n\n        this.optionsSeeded = true;\n    }\n\n    private ensureClockIcon(): void {\n        if (this.querySelector('[slot=\"start\"]')) {\n            return;\n        }\n\n        const icon = createIconElement(clock);\n        icon.setAttribute('slot', 'start');\n        this.prepend(icon);\n    }\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'pk-time-picker': PkTimePicker;\n    }\n}\n"],"mappings":";;;;;;;AAcA,IAAI,mBAAwC;AAE5C,SAAS,2BAAgH;CACrH,MAAM,QAAS,WAEZ,OAAO;AAEV,QAAO;EACH,YAAY,OAAO,cAAc;EACjC,MAAM;GACF,IAAI,OAAO,MAAM,MAAM;GACvB,IAAI,OAAO,MAAM,MAAM;GAC1B;EACD,QAAQ,OAAO,UAAU,SAAS,gBAAgB,QAAQ;EAC7D;;;AAIL,SAAgB,sBAAoC;AAChD,KAAI,iBACA,QAAO;CAGX,MAAM,UAAwB,EAAE;CAChC,MAAM,EAAE,YAAY,MAAM,WAAW,0BAA0B;AAE/D,MAAK,IAAI,OAAO,GAAG,OAAO,IAAI,QAAQ,EAClC,MAAK,IAAI,SAAS,GAAG,SAAS,IAAI,UAAU,IAAI;EAC5C,MAAM,aAAa,GAAG,KAAK,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI;EAE5F,IAAI;AAEJ,MAAI,eAAe,SAAS;GACxB,IAAI,cAAc;AAElB,OAAI,SAAS,EACT,eAAc;YACP,OAAO,GACd,eAAc,OAAO;GAGzB,MAAM,OAAO,QAAQ,KAAK,KAAK,KAAK,KAAK;AACzC,iBAAc,GAAG,YAAY,GAAG,OAAO,UAAU,CAAC,SAAS,GAAG,IAAI,CAAC,GAAG;aAC/D,eAAe,MACtB,eAAc;MAEd,gCAAc,IAAI,KAAK,cAAc,WAAW,KAAK,EAAC,mBAAmB,QAAQ;GAC7E,MAAM;GACN,QAAQ;GACR,QAAQ,WAAW,SAAS,IAAI;GACnC,CAAC;AAGN,UAAQ,KAAK;GACT,OAAO;GACP,OAAO;GACV,CAAC;;AAIV,oBAAmB;AAEnB,QAAO;;;;AC1EX,IAAa,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACoB9B,IAAA,eAAA,MAAM,qBAAqB,SAAS;;;uBAIf;;;gBAFC,CAAC,GAAG,gBAAgB,mBAAmB;;CAIhE,oBAAmC;AAC/B,OAAK,mBAAmB;AACxB,OAAK,iBAAiB;AACtB,QAAM,mBAAmB;;CAG7B,oBAAkC;AAC9B,MAAI,KAAK,iBAAiB,KAAK,cAAc,YAAY,EAAE;AACvD,QAAK,gBAAgB;AACrB;;AAGJ,OAAK,MAAM,UAAU,qBAAqB,EAAE;GACxC,MAAM,UAAU,SAAS,cAAc,YAAY;AACnD,WAAQ,QAAQ,OAAO;AACvB,WAAQ,cAAc,OAAO;AAC7B,QAAK,OAAO,QAAQ;;AAGxB,OAAK,gBAAgB;;CAGzB,kBAAgC;AAC5B,MAAI,KAAK,cAAc,mBAAiB,CACpC;EAGJ,MAAM,OAAO,kBAAkB,cAAA,MAAM;AACrC,OAAK,aAAa,QAAQ,QAAQ;AAClC,OAAK,QAAQ,KAAK;;;2BApCzB,cAAc,iBAAiB,CAAA,EAAA,aAAA"}

package/dist/chunks/{pk-tiptap-editor-CTz-yfHL.js → pk-tiptap-editor-BzZ-J2sl.js}

@@ -1,13 +1,13 @@
 import { t as icons_exports } from "./icons-BR8JcQj2.js";
 import { a as query, i as property, o as state, s as customElement, t as __decorate } from "./decorate-R0X811qp.js";
 import "./pk-button-BrH4u4Qr.js";
-import { t as PkFormAssociatedElement } from "./pk-form-associated-element-CCQALRGB.js";
+import { t as PkFormAssociatedElement } from "./pk-form-associated-element-GxX5lbnk.js";
 import { t as MirrorValidator } from "./mirror-validator-DCjNYrrx.js";
-import "./pk-checkbox-CfV1uDdC.js";
+import "./pk-checkbox-13ArHSmt.js";
 import { t as formControlStyles } from "./form-control.styles-BQdimE5o.js";
 import { n as renderIconHtml } from "./render-Dvc3MHQR.js";
 import { i as uniqueId } from "./focus-aa5dlv8k.js";
-import "./pk-input-CF_icEtR.js";
+import "./pk-input-BywmK5n2.js";
 import "./pk-dialog-VMQqLW1f.js";
 import "./pk-dropdown-item-D9OaG5o-.js";
 import "./pk-dropdown-menu-DW1wI8xQ.js";
@@ -1405,4 +1405,4 @@ PkTiptapEditor = __decorate([customElement("pk-tiptap-editor")], PkTiptapEditor)
 //#endregion
 export { PkTiptapEditor as t };
 
-//# sourceMappingURL=pk-tiptap-editor-CTz-yfHL.js.map
+//# sourceMappingURL=pk-tiptap-editor-BzZ-J2sl.js.map