@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-textarea/pf-textarea.js

@@ -0,0 +1,432 @@
+import { composeDescribedBy } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { h, Host, } from "@stencil/core";
+/**
+ * A form-associated multi-line text control.
+ *
+ * Shares `pf-input`'s field anatomy and form wiring; the control is a
+ * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part textarea - the native textarea.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfTextarea {
+    el;
+    internals;
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` *content attribute* -- not from this property. A
+     * framework wrapper that sets properties rather than attributes (the
+     * generated React bindings do) would otherwise leave the control nameless
+     * and absent from the submission, with every other sign of working.
+     */
+    name;
+    /** The control's value. */
+    value = '';
+    /** Visible rows. Mirrors the native attribute. */
+    rows = 4;
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder;
+    required = false;
+    disabled = false;
+    readonly = false;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value ?? '');
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the control is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-textarea value="…">` in a form lost its value on any reset.
+     */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    onInput = (event) => {
+        this.value = event.target.value;
+        this.pfInput.emit({ value: this.value });
+    };
+    onChange = () => {
+        this.pfChange.emit({ value: this.value });
+    };
+    /**
+     * A textarea's value is its text content, not an attribute, so it cannot be
+     * rendered as a JSX child without Stencil replacing that text node on every
+     * keystroke. It is written through the DOM property instead, which is what
+     * the browser itself does.
+     *
+     * Guarded on inequality: assigning the same string still moves the caret to
+     * the end in some engines, which would make typing into the middle of a
+     * paragraph jump the cursor away on every character.
+     */
+    componentDidRender() {
+        const control = this.el.shadowRoot?.querySelector('textarea');
+        if (control && control.value !== (this.value ?? '')) {
+            control.value = this.value ?? '';
+        }
+    }
+    render() {
+        // IDs are scoped to this shadow root, so they can be literal -- the useId()
+        // the React component needs has no counterpart here.
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (h(Host, { key: '2ec86efeeb1ce4aa2ec112e93157a8f205731bf3' }, h("div", { key: '8d68eda3ec27c38703391e14f724e7dc06e76503', class: "field", part: "field" }, this.label && (h("label", { key: 'd73433e1f64c2e47b8a8ca88aa1805610e9058bb', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '1a52649b0e92dd7700aa21d3658126764bbac0d0', class: "required", "aria-hidden": "true" }, "*")))), h("textarea", { key: '879a93a961d1f20d5835873bb8351e2ab04c2a79', id: "input", part: "textarea", class: { textarea: true, 'textarea--invalid': Boolean(this.error) }, name: this.name, rows: this.rows, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readOnly: this.readonly, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange }), this.description && (h("p", { key: '91b2ffdb3da3e93e868d2b9a9398d99c2df49a27', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '58508d7aa6efbf4b55b304b029fb8c2ec6c817e3', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get is() { return "pf-textarea"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-textarea.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-textarea.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.\n\nReflected, because a form-associated custom element takes its submission\nname from the `name` *content attribute* -- not from this property. A\nframework wrapper that sets properties rather than attributes (the\ngenerated React bindings do) would otherwise leave the control nameless\nand absent from the submission, with every other sign of working."
+                },
+                "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": "The control's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "rows": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible rows. Mirrors the native attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows",
+                "defaultValue": "4"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label. Rendered in the same root as the input, so `for` works."
+                },
+                "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": "Hint text below the control."
+                },
+                "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": "Error message. Its presence is what marks the control invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "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": "placeholder"
+            },
+            "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"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfInput",
+                "name": "pfInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke, like the native `input` event."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the value is committed, like the native `change` event."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Whether the control currently satisfies its constraints.\n\nA form-associated custom element does not inherit `checkValidity` from\nanywhere -- the spec puts it on ElementInternals, so the element has to\nforward it or consumers cannot ask.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "As `checkValidity`, but also shows the browser's validation message.",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "The message explaining why the control is invalid, or an empty string.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-textarea.js.map

package/dist/collection/components/pf-textarea/pf-textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-textarea.js","sourceRoot":"","sources":["../../../src/components/pf-textarea/pf-textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;GAWG;AAOH,MAAM,OAAO,UAAU;IACV,EAAE,CAAe;IAET,SAAS,CAAoB;IAEhD;;;;;;;;OAQG;IACsB,IAAI,CAAU;IAEvC,2BAA2B;IACF,KAAK,GAAG,EAAE,CAAC;IAEpC,kDAAkD;IAC1C,IAAI,GAAG,CAAC,CAAC;IAEjB,6EAA6E;IACrE,KAAK,CAAU;IAEvB,mCAAmC;IAC3B,WAAW,CAAU;IAE7B,qEAAqE;IAC7D,KAAK,CAAU;IAEf,WAAW,CAAU;IAEJ,QAAQ,GAAG,KAAK,CAAC;IAEjB,QAAQ,GAAG,KAAK,CAAC;IAEjB,QAAQ,GAAG,KAAK,CAAC;IAE1C,+DAA+D;IACtD,OAAO,CAAmC;IAEnD,yEAAyE;IAChE,QAAQ,CAAmC;IAEpD;;;OAGG;IACK,YAAY,GAAG,EAAE,CAAC;IAE1B,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAKD,aAAa;QACX,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC9C,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACvF,CAAC;IAED;;;;;;OAMG;IAEH,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED,2EAA2E;IAE3E,KAAK,CAAC,cAAc;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAED,6EAA6E;IAE7E,KAAK,CAAC,oBAAoB;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,CAAC;IAEO,OAAO,GAAG,CAAC,KAAY,EAAE,EAAE;QACjC,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA8B,CAAC,KAAK,CAAC;QACzD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEM,QAAQ,GAAG,GAAG,EAAE;QACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF;;;;;;;;;OASG;IACH,kBAAkB;QAChB,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;QAC9D,IAAI,OAAO,IAAI,OAAO,CAAC,KAAK,KAAK,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;YACpD,OAAO,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,4EAA4E;QAC5E,qDAAqD;QACrD,MAAM,WAAW,GAAG,kBAAkB,CACpC,IAAI,CAAC,WAAW,IAAI,aAAa,EACjC,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC5B,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO;oBAC9C,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,QAElC,CACR,CACK,CACT;gBACD,iEACE,EAAE,EAAC,OAAO,EACV,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,mBAAmB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EACnE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,kBACT,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBACtB,WAAW,EAC7B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB;gBACD,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAC,EAAE,EAAC,aAAa,IACvD,IAAI,CAAC,WAAW,CACf,CACL;gBACA,IAAI,CAAC,KAAK,IAAI,CACb,0DAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,IACrC,IAAI,CAAC,KAAK,CACT,CACL,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\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 multi-line text control.\n *\n * Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-textarea',\n  styleUrl: 'pf-textarea.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n  @Element() el!: HTMLElement;\n\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Submitted under this name.\n   *\n   * Reflected, because a form-associated custom element takes its submission\n   * name from the `name` *content attribute* -- not from this property. A\n   * framework wrapper that sets properties rather than attributes (the\n   * generated React bindings do) would otherwise leave the control nameless\n   * and absent from the submission, with every other sign of working.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The control's value. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Visible rows. Mirrors the native attribute. */\n  @Prop() rows = 4;\n\n  /** Visible label. Rendered in the same root as the input, so `for` works. */\n  @Prop() label?: string;\n\n  /** Hint text below the control. */\n  @Prop() description?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Fires on every keystroke, like the native `input` event. */\n  @Event() pfInput!: EventEmitter<{ value: string }>;\n\n  /** Fires when the value is committed, like the native `change` event. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /**\n   * The value the control had when it was created, which is what a form reset\n   * restores. Captured here because `value` has been overwritten by then.\n   */\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /**\n   * Whether the control currently satisfies its constraints.\n   *\n   * A form-associated custom element does not inherit `checkValidity` from\n   * anywhere -- the spec puts it on ElementInternals, so the element has to\n   * forward it or consumers cannot ask.\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  /** As `checkValidity`, but also shows the browser's validation message. */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  /** The message explaining why the control is invalid, or an empty string. */\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * verified against a native `<input value=\"initial\">`, which comes back to\n   * \"initial\" rather than to \"\". Clearing it was a real defect: a\n   * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  private onInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\n  };\n\n  /**\n   * A textarea's value is its text content, not an attribute, so it cannot be\n   * rendered as a JSX child without Stencil replacing that text node on every\n   * keystroke. It is written through the DOM property instead, which is what\n   * the browser itself does.\n   *\n   * Guarded on inequality: assigning the same string still moves the caret to\n   * the end in some engines, which would make typing into the middle of a\n   * paragraph jump the cursor away on every character.\n   */\n  componentDidRender() {\n    const control = this.el.shadowRoot?.querySelector('textarea');\n    if (control && control.value !== (this.value ?? '')) {\n      control.value = this.value ?? '';\n    }\n  }\n\n  render() {\n    // IDs are scoped to this shadow root, so they can be literal -- the useId()\n    // the React component needs has no counterpart here.\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n          <textarea\n            id=\"input\"\n            part=\"textarea\"\n            class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n            name={this.name}\n            rows={this.rows}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\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      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,151 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.label {
+  color: var(--pf-timepicker-text);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.required {
+  color: var(--pf-timepicker-invalid-border);
+  margin-inline-start: var(--space-1);
+}
+
+.trigger {
+  align-items: center;
+  background: var(--pf-timepicker-bg);
+  border: 1px solid var(--pf-timepicker-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  gap: var(--space-2);
+  justify-content: space-between;
+  padding: var(--space-2) var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.trigger:focus-visible {
+  border-color: var(--pf-timepicker-focus-border);
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.trigger--invalid {
+  border-color: var(--pf-timepicker-invalid-border);
+}
+
+.value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.value--placeholder {
+  color: var(--pf-timepicker-placeholder);
+}
+
+.description {
+  color: var(--pf-timepicker-text-muted);
+  font-size: var(--font-size-xs);
+  margin: 0;
+}
+
+.error {
+  color: var(--pf-timepicker-invalid-border);
+  font-size: var(--font-size-xs);
+  margin: 0;
+}
+
+/*
+ * See src/place-popover.ts: `inset: auto; margin: 0` are what make the
+ * coordinates mean what they say, since the UA stylesheet centres a popover.
+ */
+.panel {
+  inset: auto;
+  margin: 0;
+  background: var(--pf-timepicker-menu-bg);
+  border: 1px solid var(--pf-timepicker-menu-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--pf-elevation-popover-shadow);
+  display: flex;
+  gap: var(--space-1);
+  padding: var(--space-1);
+}
+
+.panel:popover-open {
+  animation: pf-time-picker-in var(--pf-transition-enter);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-time-picker-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .panel:popover-open {
+    animation: none;
+  }
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  max-height: 220px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+}
+
+.column:focus-visible {
+  outline: none;
+}
+
+.option {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-timepicker-text);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: var(--font-size-sm);
+  font-variant-numeric: tabular-nums;
+  padding: var(--space-1) var(--space-3);
+  text-align: center;
+}
+
+.option:hover {
+  background: var(--pf-timepicker-option-hover-bg);
+}
+
+.option:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.option--selected {
+  background: var(--pf-timepicker-option-active-bg);
+  color: var(--pf-timepicker-option-active-text);
+}