@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-time-picker/pf-time-picker.js

@@ -0,0 +1,614 @@
+import { composeDescribedBy, formatTimeDisplay, formatTimeValue, hourOptions, Keys, meridiemOf, observeAnchoredPosition, padTimePart, parseTimeValue, timeRange, toHour12, toHour24, } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
+import { placePopover } from "../../place-popover";
+import { h, Host, } from "@stencil/core";
+/**
+ * A form-associated time field: a trigger that opens hour, minute and (on a
+ * 12-hour cycle) meridiem columns in a popover.
+ *
+ * The submitted value is always canonical 24-hour `HH:mm`, whatever
+ * `hour-cycle` displays. A control whose submitted value changed with its
+ * display would be unusable on a server, so the cycle is a rendering choice
+ * and nothing more — all of that arithmetic is core's.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part trigger - the button that opens the columns.
+ * @part panel - the floating panel.
+ * @part column - each of the scrolling columns.
+ * @part option - every option button.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfTimePicker {
+    el;
+    internals;
+    /** Submitted under this name. Reflected; the submission reads the attribute. */
+    name;
+    /** Canonical 24-hour `HH:mm`, or empty. */
+    value = '';
+    /** Whether the panel is showing. Reflected for the stylesheet. */
+    open = false;
+    /**
+     * 12- or 24-hour display. The value stays 24-hour either way.
+     *
+     * Read through `cycle` below, never directly: Stencil coerces an attribute
+     * using the prop's type as *written*, and it cannot resolve a name it had
+     * to import. Measured: with `HourCycle` imported from core,
+     * `hour-cycle="12"` arrives as the **string** `"12"`, so `=== 12` is
+     * false, while `minute-step="15"` — declared `number` — arrives as `15`.
+     * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`
+     * shows; the alias is kept here because it is the shared type, and the
+     * getter costs nothing.
+     */
+    hourCycle = 24;
+    /** Granularity of the minutes column. */
+    minuteStep = 1;
+    label;
+    description;
+    error;
+    placeholder = 'Select time';
+    required = false;
+    disabled = false;
+    /** Fires when the time changes, with the canonical `HH:mm`. */
+    pfChange;
+    /** Fires whenever the panel opens or closes, whoever caused it. */
+    pfOpenChange;
+    initialValue = '';
+    stopObserving;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    componentDidRender() {
+        if (this.open)
+            this.scrollSelectedIntoView();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showPanel();
+        else
+            this.hidePanel();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the field started with, not an empty one. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** `hourCycle` with the attribute case coerced; see the prop's comment. */
+    get cycle() {
+        return Number(this.hourCycle) === 12 ? 12 : 24;
+    }
+    get panel() {
+        return this.el.shadowRoot?.querySelector('[part="panel"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    get parts() {
+        return parseTimeValue(this.value);
+    }
+    showPanel() {
+        const panel = this.panel;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            align: 'start',
+            matchAnchorWidth: false,
+            flip: true,
+            onChange: ({ left, top }) => placePopover(panel, left, top),
+        });
+        this.scrollSelectedIntoView();
+        // Focus the first column's selected option, so the arrows work at once.
+        panel.querySelector('[data-selected="true"]')?.focus();
+    }
+    hidePanel() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.panel;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /**
+     * Centres each column on its chosen option.
+     *
+     * `block: 'nearest'` would leave a column that is already scrolled roughly
+     * right alone, which reads as the wrong hour being selected.
+     */
+    scrollSelectedIntoView() {
+        for (const option of Array.from(this.panel?.querySelectorAll('[data-selected="true"]') ?? [])) {
+            if (typeof option.scrollIntoView === 'function') {
+                option.scrollIntoView({ block: 'center' });
+            }
+        }
+    }
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    commit(next) {
+        const value = formatTimeValue(next);
+        if (!value || value === this.value)
+            return;
+        this.value = value;
+        this.pfChange.emit({ value });
+    }
+    selectHour(hour) {
+        const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');
+        this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });
+    }
+    selectMinute(minute) {
+        this.commit({ hour: this.parts.hour ?? 0, minute });
+    }
+    selectMeridiem(meridiem) {
+        const { hour, minute } = this.parts;
+        this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });
+    }
+    selectedMeridiem() {
+        const { hour } = this.parts;
+        return hour === null ? null : meridiemOf(hour);
+    }
+    /**
+     * Up and down move within a column, and stop at its ends rather than
+     * wrapping — a wrap in a scrolling column of 60 minutes reads as the list
+     * having jumped rather than moved.
+     *
+     * The focused option is read from `shadowRoot.activeElement`, because
+     * `document.activeElement` is this host: focus inside a shadow root is
+     * reported as the host from the outside.
+     */
+    onColumnKeyDown = (event) => {
+        if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp)
+            return;
+        const column = event.currentTarget;
+        const options = Array.from(column.querySelectorAll('button'));
+        const index = options.indexOf(this.el.shadowRoot?.activeElement);
+        if (index === -1)
+            return;
+        event.preventDefault();
+        const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;
+        options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();
+    };
+    renderColumn(name, options) {
+        return (h("div", { class: "column", part: "column", role: "listbox", "aria-label": name, tabindex: -1, onKeyDown: this.onColumnKeyDown }, options.map((option) => (h("button", { key: option.key, type: "button", part: "option", class: { option: true, 'option--selected': option.selected }, role: "option", "aria-selected": option.selected ? 'true' : 'false', "data-selected": option.selected ? 'true' : 'false', onClick: option.onSelect }, option.label)))));
+    }
+    render() {
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        const { hour, minute } = this.parts;
+        const display = formatTimeDisplay(this.parts, this.cycle);
+        const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);
+        const meridiem = this.selectedMeridiem();
+        return (h(Host, { key: 'c26f419605ca45c6180180ebce68bec77fe99676' }, h("div", { key: 'bf975b4f6ef429212d28be61448df62d54322e90', class: "field", part: "field" }, this.label && (h("label", { key: '80b0160476b03992991886c1e0c2f06dd1195931', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '5d52003ddf874d68adcaad65012197a5262fe64c', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: '842fb04fce12e559fc9f7ef541baa60c118c9f9d', id: "trigger", "aria-label": controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("span", { key: '2eefe098a48de552dd6c869b4696ce09960abf5e', class: { value: true, 'value--placeholder': !display } }, display || this.placeholder), h("pf-icon", { key: '881c2760be97dacb6ffd2df9e46f1c66252ff513', name: "clock" })), this.description && (h("p", { key: 'c09274524b28fa88034eba28138d0559cc0b60cf', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '9a7ac33fc684b137684b6925cf44cb2d26c05aa0', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '1c79f18f2078b4d2ae8c2832f8e49f3a33723354', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a time", onToggle: this.onToggle }, this.renderColumn('Hour', hourOptions(this.cycle).map((option) => ({
+            key: `h-${option}`,
+            label: padTimePart(option),
+            selected: shownHour === option,
+            onSelect: () => this.selectHour(option),
+        }))), this.renderColumn('Minute', timeRange(60, this.minuteStep).map((option) => ({
+            key: `m-${option}`,
+            label: padTimePart(option),
+            selected: minute === option,
+            onSelect: () => this.selectMinute(option),
+        }))), this.cycle === 12 &&
+            this.renderColumn('AM or PM', ['AM', 'PM'].map((option) => ({
+                key: option,
+                label: option,
+                selected: meridiem === option,
+                onSelect: () => this.selectMeridiem(option),
+            }))))));
+    }
+    static get is() { return "pf-time-picker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-time-picker.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-time-picker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Submitted under this name. Reflected; the submission reads the attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Canonical 24-hour `HH:mm`, or empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the panel is showing. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "hourCycle": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "HourCycle",
+                    "resolved": "12 | 24",
+                    "references": {
+                        "HourCycle": {
+                            "location": "import",
+                            "path": "@pitchfork-ui/core",
+                            "id": "../core/dist/index.d.ts::HourCycle",
+                            "referenceLocation": "HourCycle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "12- or 24-hour display. The value stays 24-hour either way.\n\nRead through `cycle` below, never directly: Stencil coerces an attribute\nusing the prop's type as *written*, and it cannot resolve a name it had\nto import. Measured: with `HourCycle` imported from core,\n`hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\nfalse, while `minute-step=\"15\"` \u2014 declared `number` \u2014 arrives as `15`.\nWriting `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\nshows; the alias is kept here because it is the shared type, and the\ngetter costs nothing."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-cycle",
+                "defaultValue": "24"
+            },
+            "minuteStep": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Granularity of the minutes column."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-step",
+                "defaultValue": "1"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Select time'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the time changes, with the canonical `HH:mm`."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfOpenChange",
+                "name": "pfOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the panel opens or closes, whoever caused it."
+                },
+                "complexType": {
+                    "original": "{ open: boolean }",
+                    "resolved": "{ open: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "open",
+                "methodName": "syncOpen"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-time-picker.js.map

package/dist/collection/components/pf-time-picker/pf-time-picker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-time-picker.js","sourceRoot":"","sources":["../../../src/components/pf-time-picker/pf-time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  composeDescribedBy,\n  formatTimeDisplay,\n  formatTimeValue,\n  hourOptions,\n  Keys,\n  meridiemOf,\n  observeAnchoredPosition,\n  padTimePart,\n  parseTimeValue,\n  timeRange,\n  toHour12,\n  toHour24,\n  type HourCycle,\n  type Meridiem,\n  type TimeParts,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n *\n * The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-time-picker',\n  styleUrl: 'pf-time-picker.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTimePicker {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Canonical 24-hour `HH:mm`, or empty. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Whether the panel is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * 12- or 24-hour display. The value stays 24-hour either way.\n   *\n   * Read through `cycle` below, never directly: Stencil coerces an attribute\n   * using the prop's type as *written*, and it cannot resolve a name it had\n   * to import. Measured: with `HourCycle` imported from core,\n   * `hour-cycle=\"12\"` arrives as the **string** `\"12\"`, so `=== 12` is\n   * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n   * Writing `0 | 1` out inline *is* coerced, which `pf-heatmap.weekStartsOn`\n   * shows; the alias is kept here because it is the shared type, and the\n   * getter costs nothing.\n   */\n  @Prop() hourCycle: HourCycle = 24;\n\n  /** Granularity of the minutes column. */\n  @Prop() minuteStep = 1;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select time';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the time changes, with the canonical `HH:mm`. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the panel opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidRender() {\n    if (this.open) this.scrollSelectedIntoView();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showPanel();\n    else this.hidePanel();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the field started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** `hourCycle` with the attribute case coerced; see the prop's comment. */\n  private get cycle(): HourCycle {\n    return Number(this.hourCycle) === 12 ? 12 : 24;\n  }\n\n  private get panel() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private get parts(): TimeParts {\n    return parseTimeValue(this.value);\n  }\n\n  private showPanel() {\n    const panel = this.panel;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      align: 'start',\n      matchAnchorWidth: false,\n      flip: true,\n      onChange: ({ left, top }) => placePopover(panel, left, top),\n    });\n\n    this.scrollSelectedIntoView();\n    // Focus the first column's selected option, so the arrows work at once.\n    panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n  }\n\n  private hidePanel() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    const panel = this.panel;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  /**\n   * Centres each column on its chosen option.\n   *\n   * `block: 'nearest'` would leave a column that is already scrolled roughly\n   * right alone, which reads as the wrong hour being selected.\n   */\n  private scrollSelectedIntoView() {\n    for (const option of Array.from(\n      this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n    )) {\n      if (typeof option.scrollIntoView === 'function') {\n        option.scrollIntoView({ block: 'center' });\n      }\n    }\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private commit(next: TimeParts) {\n    const value = formatTimeValue(next);\n    if (!value || value === this.value) return;\n    this.value = value;\n    this.pfChange.emit({ value });\n  }\n\n  private selectHour(hour: number) {\n    const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n    this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n  }\n\n  private selectMinute(minute: number) {\n    this.commit({ hour: this.parts.hour ?? 0, minute });\n  }\n\n  private selectMeridiem(meridiem: Meridiem) {\n    const { hour, minute } = this.parts;\n    this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n  }\n\n  private selectedMeridiem(): Meridiem | null {\n    const { hour } = this.parts;\n    return hour === null ? null : meridiemOf(hour);\n  }\n\n  /**\n   * Up and down move within a column, and stop at its ends rather than\n   * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n   * having jumped rather than moved.\n   *\n   * The focused option is read from `shadowRoot.activeElement`, because\n   * `document.activeElement` is this host: focus inside a shadow root is\n   * reported as the host from the outside.\n   */\n  private onColumnKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n    const column = event.currentTarget as HTMLElement;\n    const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n    const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n    if (index === -1) return;\n\n    event.preventDefault();\n    const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n    options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n  };\n\n  private renderColumn(\n    name: string,\n    options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n  ) {\n    return (\n      <div\n        class=\"column\"\n        part=\"column\"\n        role=\"listbox\"\n        aria-label={name}\n        tabindex={-1}\n        onKeyDown={this.onColumnKeyDown}\n      >\n        {options.map((option) => (\n          <button\n            key={option.key}\n            type=\"button\"\n            part=\"option\"\n            class={{ option: true, 'option--selected': option.selected }}\n            role=\"option\"\n            aria-selected={option.selected ? 'true' : 'false'}\n            data-selected={option.selected ? 'true' : 'false'}\n            onClick={option.onSelect}\n          >\n            {option.label}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const { hour, minute } = this.parts;\n    const display = formatTimeDisplay(this.parts, this.cycle);\n    const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n    const meridiem = this.selectedMeridiem();\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            aria-label={controlAriaLabel(this.el, this.label)}\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            disabled={this.disabled}\n            aria-haspopup=\"dialog\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the panel, so this IDREF resolves. */\n            aria-controls=\"panel\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !display }}>\n              {display || this.placeholder}\n            </span>\n            <pf-icon name=\"clock\"></pf-icon>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"panel\"\n          part=\"panel\"\n          class=\"panel\"\n          popover=\"auto\"\n          role=\"dialog\"\n          aria-label=\"Choose a time\"\n          onToggle={this.onToggle}\n        >\n          {this.renderColumn(\n            'Hour',\n            hourOptions(this.cycle).map((option) => ({\n              key: `h-${option}`,\n              label: padTimePart(option),\n              selected: shownHour === option,\n              onSelect: () => this.selectHour(option),\n            })),\n          )}\n\n          {this.renderColumn(\n            'Minute',\n            timeRange(60, this.minuteStep).map((option) => ({\n              key: `m-${option}`,\n              label: padTimePart(option),\n              selected: minute === option,\n              onSelect: () => this.selectMinute(option),\n            })),\n          )}\n\n          {this.cycle === 12 &&\n            this.renderColumn(\n              'AM or PM',\n              (['AM', 'PM'] as Meridiem[]).map((option) => ({\n                key: option,\n                label: option,\n                selected: meridiem === option,\n                onSelect: () => this.selectMeridiem(option),\n              })),\n            )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}