@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-tag-input/pf-tag-input.js

@@ -0,0 +1,533 @@
+import { addTag, composeDescribedBy, formatValueList, Keys, parseValueList, removeTagAt, splitPastedTags, } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { h, Host, } from "@stencil/core";
+/**
+ * A form-associated field that collects free-text tags.
+ *
+ * Unlike the other multi-value controls here the tags are not chosen from a
+ * list, so there are no `pf-option` children — the chips are `pf-tag`
+ * elements this component renders, and `pf-tag` already has the dismiss
+ * button and the event for it.
+ *
+ * The rules are core's: trimming, the case-insensitive dedup (`React` and
+ * `react` are one tag), the maximum, and `validate`. So is the paste split.
+ * What stays here is what to do with the draft, which differs per refusal — a
+ * duplicate clears it, because the tag asked for is already there, while
+ * hitting the maximum leaves it so nothing is lost.
+ *
+ * Submits one entry per tag under one name, the same way `pf-multi-select`
+ * does.
+ *
+ * @slot - nothing; the chips are rendered from `value`.
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part control - the box holding the chips and the draft input.
+ * @part tag - each chip.
+ * @part input - the draft input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfTagInput {
+    el;
+    internals;
+    /** Submitted under this name, once per tag. Reflected. */
+    name;
+    /** The tags, comma-separated. Reflected, so HTML can set it. */
+    value = '';
+    label;
+    description;
+    error;
+    placeholder = 'Add a tag…';
+    /** Stop accepting tags once there are this many. */
+    max;
+    /** Accept the same tag twice. The comparison is case-insensitive. */
+    allowDuplicates = false;
+    /**
+     * Visual variant for the chips, passed through to `pf-tag`.
+     *
+     * The type is imported from `pf-tag` rather than restated, so the two
+     * cannot drift apart — a second copy of the union would compile happily
+     * while offering a variant `pf-tag` has never heard of.
+     */
+    tagVariant = 'neutral';
+    required = false;
+    disabled = false;
+    /**
+     * Refuse a candidate tag. A property rather than an attribute, because a
+     * function cannot be written in HTML — the generated bindings set props as
+     * properties, so a framework consumer passes it like any other.
+     */
+    validate;
+    /** Fires when the tags change, with both representations. */
+    pfChange;
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    /** See pf-multi-select: the name is built into the FormData, so watch it. */
+    syncFormState() {
+        const tags = this.tags();
+        if (tags.length === 0 || !this.name) {
+            this.internals.setFormValue(null);
+        }
+        else {
+            const data = new FormData();
+            for (const tag of tags)
+                data.append(this.name, tag);
+            this.internals.setFormValue(data);
+        }
+        applyControlValidity(this.internals, tags.length > 0, this.required, this.error);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        const field = this.input;
+        if (field)
+            field.value = '';
+    }
+    tags() {
+        return parseValueList(this.value);
+    }
+    get input() {
+        return this.el.shadowRoot?.querySelector('[part="input"]') ?? null;
+    }
+    get options() {
+        return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };
+    }
+    commit(tags) {
+        this.value = formatValueList(tags);
+        this.pfChange.emit({ value: this.value, values: tags });
+    }
+    /** Takes the draft as a tag, and decides what to do with the draft itself. */
+    addDraft(raw) {
+        const result = addTag(this.tags(), raw, this.options);
+        const field = this.input;
+        if (result.added) {
+            this.commit(result.tags);
+            if (field)
+                field.value = '';
+            return;
+        }
+        // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.
+        if (result.refusal === 'duplicate' && field)
+            field.value = '';
+    }
+    remove(index) {
+        if (this.disabled)
+            return;
+        this.commit(removeTagAt(this.tags(), index));
+        this.input?.focus();
+    }
+    /**
+     * Enter and comma commit; Backspace on an empty draft removes the last tag,
+     * which is the gesture every tag field has.
+     */
+    onKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        const field = event.target;
+        if (event.key === Keys.Enter || event.key === ',') {
+            // A bare comma with nothing typed is swallowed rather than committing an
+            // empty tag; Enter is left alone so a form can still be submitted.
+            if (field.value.trim()) {
+                event.preventDefault();
+                this.addDraft(field.value);
+            }
+            else if (event.key !== Keys.Enter) {
+                event.preventDefault();
+            }
+            return;
+        }
+        if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {
+            event.preventDefault();
+            this.remove(this.tags().length - 1);
+        }
+    };
+    /**
+     * A pasted list is folded, not added one at a time, so the maximum and the
+     * dedup see each addition. The React component added them in a loop over
+     * stale state and kept only the last — fixed there too, in the same change.
+     */
+    onPaste = (event) => {
+        if (this.disabled)
+            return;
+        const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');
+        if (pasted.length === 0)
+            return;
+        event.preventDefault();
+        let next = this.tags();
+        for (const candidate of pasted)
+            next = addTag(next, candidate, this.options).tags;
+        this.commit(next);
+        const field = this.input;
+        if (field)
+            field.value = '';
+    };
+    render() {
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        const tags = this.tags();
+        const atMax = this.max !== undefined && tags.length >= this.max;
+        return (h(Host, { key: '57924b0d046c1abc64450b0a70b3ed6edfbdf9f4' }, h("div", { key: '08d98d4400774b3e90881cafdf70580fcf79cce2', class: "field", part: "field" }, this.label && (h("label", { key: '4964890c0aefbd1a81af8344d3a74c8ab32dde37', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '921369e87d6cc0af07bdc791defb816207cc3dc0', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'ec4d7fad20d686473bc9c5f56c9b0c0f69b5f0f5', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, tags.map((tag, index) => (h("pf-tag", { key: tag, part: "tag", variant: this.tagVariant, dismissible: !this.disabled, dismissLabel: `Remove ${tag}`, onPfDismiss: () => this.remove(index) }, tag))), h("input", { key: '1e065f32bb9e13cac1dcfa29c03e516aa5d785bb', id: "input", part: "input", class: "input", type: "text", autocomplete: "off", disabled: this.disabled || atMax, required: this.required && tags.length === 0, placeholder: atMax ? '' : this.placeholder, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onKeyDown: this.onKeyDown, onPaste: this.onPaste, onBlur: (event) => {
+                // Commit on blur, so a typed tag is not lost by clicking away.
+                const field = event.target;
+                if (field.value.trim())
+                    this.addDraft(field.value);
+            } })), this.description && (h("p", { key: '96700116a9bf9d23869c48bc1f0f1c23229a0813', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: 'd846511a00c7e03a4fb5b8be25b01723c742e912', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get is() { return "pf-tag-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-tag-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-tag-input.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, once per tag. Reflected."
+                },
+                "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 tags, comma-separated. Reflected, so HTML can set it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "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": "'Add a tag\u2026'"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Stop accepting tags once there are this many."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "allowDuplicates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accept the same tag twice. The comparison is case-insensitive."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-duplicates",
+                "defaultValue": "false"
+            },
+            "tagVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfTagVariant",
+                    "resolved": "\"brand\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfTagVariant": {
+                            "location": "import",
+                            "path": "../pf-tag/pf-tag",
+                            "id": "src/components/pf-tag/pf-tag.tsx::PfTagVariant",
+                            "referenceLocation": "PfTagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant for the chips, passed through to `pf-tag`.\n\nThe type is imported from `pf-tag` rather than restated, so the two\ncannot drift apart \u2014 a second copy of the union would compile happily\nwhile offering a variant `pf-tag` has never heard of."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-variant",
+                "defaultValue": "'neutral'"
+            },
+            "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"
+            },
+            "validate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(tag: string) => boolean",
+                    "resolved": "((tag: string) => boolean) | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Refuse a candidate tag. A property rather than an attribute, because a\nfunction cannot be written in HTML \u2014 the generated bindings set props as\nproperties, so a framework consumer passes it like any other."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the tags change, with both representations."
+                },
+                "complexType": {
+                    "original": "{ value: string; values: string[] }",
+                    "resolved": "{ value: string; values: string[]; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "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": "name",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-tag-input.js.map

package/dist/collection/components/pf-tag-input/pf-tag-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tag-input.js","sourceRoot":"","sources":["../../../src/components/pf-tag-input/pf-tag-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  addTag,\n  composeDescribedBy,\n  formatValueList,\n  Keys,\n  parseValueList,\n  removeTagAt,\n  splitPastedTags,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport type { PfTagVariant } from '../pf-tag/pf-tag';\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 field that collects free-text tags.\n *\n * Unlike the other multi-value controls here the tags are not chosen from a\n * list, so there are no `pf-option` children — the chips are `pf-tag`\n * elements this component renders, and `pf-tag` already has the dismiss\n * button and the event for it.\n *\n * The rules are core's: trimming, the case-insensitive dedup (`React` and\n * `react` are one tag), the maximum, and `validate`. So is the paste split.\n * What stays here is what to do with the draft, which differs per refusal — a\n * duplicate clears it, because the tag asked for is already there, while\n * hitting the maximum leaves it so nothing is lost.\n *\n * Submits one entry per tag under one name, the same way `pf-multi-select`\n * does.\n *\n * @slot - nothing; the chips are rendered from `value`.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the chips and the draft input.\n * @part tag - each chip.\n * @part input - the draft input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-tag-input',\n  styleUrl: 'pf-tag-input.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfTagInput {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name, once per tag. Reflected. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The tags, comma-separated. Reflected, so HTML can set it. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Add a tag…';\n\n  /** Stop accepting tags once there are this many. */\n  @Prop() max?: number;\n\n  /** Accept the same tag twice. The comparison is case-insensitive. */\n  @Prop() allowDuplicates = false;\n\n  /**\n   * Visual variant for the chips, passed through to `pf-tag`.\n   *\n   * The type is imported from `pf-tag` rather than restated, so the two\n   * cannot drift apart — a second copy of the union would compile happily\n   * while offering a variant `pf-tag` has never heard of.\n   */\n  @Prop() tagVariant: PfTagVariant = 'neutral';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Refuse a candidate tag. A property rather than an attribute, because a\n   * function cannot be written in HTML — the generated bindings set props as\n   * properties, so a framework consumer passes it like any other.\n   */\n  @Prop() validate?: (tag: string) => boolean;\n\n  /** Fires when the tags change, with both representations. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n  private initialValue = '';\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  /** See pf-multi-select: the name is built into the FormData, so watch it. */\n  @Watch('name')\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const tags = this.tags();\n\n    if (tags.length === 0 || !this.name) {\n      this.internals.setFormValue(null);\n    } else {\n      const data = new FormData();\n      for (const tag of tags) data.append(this.name, tag);\n      this.internals.setFormValue(data);\n    }\n\n    applyControlValidity(this.internals, tags.length > 0, this.required, this.error);\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  formResetCallback() {\n    this.value = this.initialValue;\n    const field = this.input;\n    if (field) field.value = '';\n  }\n\n  private tags(): string[] {\n    return parseValueList(this.value);\n  }\n\n  private get input() {\n    return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n  }\n\n  private get options() {\n    return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };\n  }\n\n  private commit(tags: string[]) {\n    this.value = formatValueList(tags);\n    this.pfChange.emit({ value: this.value, values: tags });\n  }\n\n  /** Takes the draft as a tag, and decides what to do with the draft itself. */\n  private addDraft(raw: string) {\n    const result = addTag(this.tags(), raw, this.options);\n    const field = this.input;\n\n    if (result.added) {\n      this.commit(result.tags);\n      if (field) field.value = '';\n      return;\n    }\n\n    // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.\n    if (result.refusal === 'duplicate' && field) field.value = '';\n  }\n\n  private remove(index: number) {\n    if (this.disabled) return;\n    this.commit(removeTagAt(this.tags(), index));\n    this.input?.focus();\n  }\n\n  /**\n   * Enter and comma commit; Backspace on an empty draft removes the last tag,\n   * which is the gesture every tag field has.\n   */\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (this.disabled) return;\n    const field = event.target as HTMLInputElement;\n\n    if (event.key === Keys.Enter || event.key === ',') {\n      // A bare comma with nothing typed is swallowed rather than committing an\n      // empty tag; Enter is left alone so a form can still be submitted.\n      if (field.value.trim()) {\n        event.preventDefault();\n        this.addDraft(field.value);\n      } else if (event.key !== Keys.Enter) {\n        event.preventDefault();\n      }\n      return;\n    }\n\n    if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {\n      event.preventDefault();\n      this.remove(this.tags().length - 1);\n    }\n  };\n\n  /**\n   * A pasted list is folded, not added one at a time, so the maximum and the\n   * dedup see each addition. The React component added them in a loop over\n   * stale state and kept only the last — fixed there too, in the same change.\n   */\n  private onPaste = (event: ClipboardEvent) => {\n    if (this.disabled) return;\n    const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');\n    if (pasted.length === 0) return;\n\n    event.preventDefault();\n    let next = this.tags();\n    for (const candidate of pasted) next = addTag(next, candidate, this.options).tags;\n\n    this.commit(next);\n    const field = this.input;\n    if (field) field.value = '';\n  };\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n    const tags = this.tags();\n    const atMax = this.max !== undefined && tags.length >= this.max;\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\n          <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n            {tags.map((tag, index) => (\n              <pf-tag\n                key={tag}\n                part=\"tag\"\n                variant={this.tagVariant}\n                dismissible={!this.disabled}\n                dismissLabel={`Remove ${tag}`}\n                onPfDismiss={() => this.remove(index)}\n              >\n                {tag}\n              </pf-tag>\n            ))}\n\n            <input\n              id=\"input\"\n              part=\"input\"\n              class=\"input\"\n              type=\"text\"\n              autocomplete=\"off\"\n              disabled={this.disabled || atMax}\n              required={this.required && tags.length === 0}\n              placeholder={atMax ? '' : this.placeholder}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              onKeyDown={this.onKeyDown}\n              onPaste={this.onPaste}\n              onBlur={(event) => {\n                // Commit on blur, so a typed tag is not lost by clicking away.\n                const field = event.target as HTMLInputElement;\n                if (field.value.trim()) this.addDraft(field.value);\n              }}\n            />\n          </div>\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-textarea/pf-textarea.css

@@ -0,0 +1,70 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.label {
+  color: var(--pf-textarea-field-label, var(--pf-field-label));
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.required {
+  color: var(--pf-field-required);
+  margin-inline-start: var(--space-1);
+}
+
+.description {
+  color: var(--pf-textarea-field-description, var(--pf-field-description));
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.error {
+  color: var(--pf-textarea-field-error, var(--pf-field-error));
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.textarea {
+  background: var(--pf-textarea-bg);
+  border: 1px solid var(--pf-textarea-border);
+  border-radius: var(--radius-md);
+  color: var(--pf-textarea-text);
+  font: inherit;
+  line-height: 1.45;
+  min-height: 96px;
+  padding: var(--space-2) var(--space-3);
+  resize: vertical;
+  width: 100%;
+}
+
+.textarea:focus {
+  outline: none;
+}
+
+.textarea:focus-visible {
+  border-color: var(--pf-textarea-focus-border);
+  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));
+}
+
+.textarea::placeholder {
+  color: var(--pf-textarea-text-muted);
+}
+
+.textarea--invalid {
+  border-color: var(--pf-textarea-invalid-border);
+}
+
+.textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}