@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/cjs/pf-tag-input.cjs.entry.js

@@ -0,0 +1,199 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+var keys = require('./keys-S3YTuCcn.js');
+var valueList = require('./value-list-zSKmhcgH.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+
+const pfTagInputCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-taginput-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-taginput-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-taginput-bg);border:1px solid var(--pf-taginput-border);border-radius:var(--radius-md);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1) var(--space-2)}.control:focus-within{border-color:var(--pf-taginput-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-taginput-invalid-border)}.input{background:none;border:0;color:var(--pf-taginput-text);flex:1 1 6ch;font-family:inherit;font-size:var(--font-size-sm);min-width:6ch;outline:none;padding:var(--space-1)}.input::placeholder{color:var(--pf-taginput-placeholder)}.input:disabled{cursor:not-allowed}.description{color:var(--pf-taginput-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-taginput-invalid-border);font-size:var(--font-size-xs);margin:0}`;
+
+const PfTagInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    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);
+        }
+        formValidity.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 valueList.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 = valueList.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 = valueList.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(valueList.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.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.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 = valueList.splitPastedTags(event.clipboardData?.getData('text') ?? '');
+        if (pasted.length === 0)
+            return;
+        event.preventDefault();
+        let next = this.tags();
+        for (const candidate of pasted)
+            next = valueList.addTag(next, candidate, this.options).tags;
+        this.commit(next);
+        const field = this.input;
+        if (field)
+            field.value = '';
+    };
+    render() {
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        const tags = this.tags();
+        const atMax = this.max !== undefined && tags.length >= this.max;
+        return (index.h(index.Host, { key: '57924b0d046c1abc64450b0a70b3ed6edfbdf9f4' }, index.h("div", { key: '08d98d4400774b3e90881cafdf70580fcf79cce2', class: "field", part: "field" }, this.label && (index.h("label", { key: '4964890c0aefbd1a81af8344d3a74c8ab32dde37', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (index.h("span", { key: '921369e87d6cc0af07bdc791defb816207cc3dc0', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: 'ec4d7fad20d686473bc9c5f56c9b0c0f69b5f0f5', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, tags.map((tag, index$1) => (index.h("pf-tag", { key: tag, part: "tag", variant: this.tagVariant, dismissible: !this.disabled, dismissLabel: `Remove ${tag}`, onPfDismiss: () => this.remove(index$1) }, tag))), index.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 && (index.h("p", { key: '96700116a9bf9d23869c48bc1f0f1c23229a0813', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: 'd846511a00c7e03a4fb5b8be25b01723c742e912', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "name": [{
+                "syncFormState": 0
+            }],
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfTagInput.style = pfTagInputCss();
+
+exports.pf_tag_input = PfTagInput;
+//# sourceMappingURL=pf-tag-input.entry.cjs.js.map
+
+//# sourceMappingURL=pf-tag-input.cjs.entry.js.map

package/dist/cjs/pf-tag-input.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-tag-input.cjs.entry.js","mappings":"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","names":["applyControlValidity","parseValueList","formatValueList","addTag","removeTagAt","Keys","splitPastedTags","composeDescribedBy","h","Host","index"],"sources":["src/components/pf-tag-input/pf-tag-input.css?tag=pf-tag-input&encapsulation=shadow","src/components/pf-tag-input/pf-tag-input.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-taginput-text);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-taginput-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n/*\n * The chips and the draft field share one box that looks like a single input,\n * so clicking anywhere in it lands on the field.\n */\n.control {\n  align-items: center;\n  background: var(--pf-taginput-bg);\n  border: 1px solid var(--pf-taginput-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.control:focus-within {\n  border-color: var(--pf-taginput-focus-border);\n  box-shadow: var(--pf-focus-ring);\n}\n\n.control--invalid {\n  border-color: var(--pf-taginput-invalid-border);\n}\n\n.input {\n  background: none;\n  border: 0;\n  color: var(--pf-taginput-text);\n  /* Grows to fill the row's remainder, but never forces the box wider. */\n  flex: 1 1 6ch;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  min-width: 6ch;\n  outline: none;\n  padding: var(--space-1);\n}\n\n.input::placeholder {\n  color: var(--pf-taginput-placeholder);\n}\n\n.input:disabled {\n  cursor: not-allowed;\n}\n\n.description {\n  color: var(--pf-taginput-placeholder);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-taginput-invalid-border);\n  font-size: var(--font-size-xs);\n  margin: 0;\n}\n","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"],"version":3}

package/dist/cjs/pf-tag.cjs.entry.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfTagCss = () => `:host{align-items:center;border-radius:var(--radius-full);display:inline-flex;gap:var(--space-1);min-height:26px;padding:0 var(--space-2)}:host([hidden]){display:none}.label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:1}:host([variant='neutral']){background:var(--pf-tag-neutral-bg);color:var(--pf-tag-neutral-text)}:host([variant='brand']){background:var(--pf-tag-brand-bg);color:var(--pf-tag-brand-text)}:host([variant='success']){background:var(--pf-tag-success-bg);color:var(--pf-tag-success-text)}:host([variant='warning']){background:var(--pf-tag-warning-bg);color:var(--pf-tag-warning-text)}:host([variant='danger']){background:var(--pf-tag-danger-bg);color:var(--pf-tag-danger-text)}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-full);color:currentColor;cursor:pointer;display:inline-flex;height:18px;justify-content:center;margin-inline-end:-2px;padding:0;width:18px}.dismiss:hover{background:var(--pf-tag-subtle-hover-overlay, var(--pf-subtle-hover-overlay))}.dismiss:focus-visible{box-shadow:var(--pf-tag-focus-ring, var(--pf-focus-ring));outline:none}.dismiss pf-icon{font-size:12px}`;
+
+const PfTag = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfDismiss = index.createEvent(this, "pfDismiss");
+    }
+    variant = 'neutral';
+    /** Show a button that removes the tag. */
+    dismissible = false;
+    /** Accessible name for the remove button. */
+    dismissLabel = 'Remove tag';
+    /**
+     * Fired when the remove button is pressed. The tag does not remove itself —
+     * whoever owns the list decides, exactly as the React `onDismiss` callback
+     * leaves it to the caller.
+     */
+    pfDismiss;
+    render() {
+        return (index.h(index.Host, { key: '5ccd32a10cb7fd0b8b29c9b11eb395a0909049c9' }, index.h("span", { key: '0f820e192d5397525bae42c0a4bb5c98a33bdc94', class: "label", part: "label" }, index.h("slot", { key: '47a783001412c88240099c74c8e414930dd1e5d9' })), this.dismissible && (index.h("button", { key: '8b9f7087199924b39ecf16f2a8c5c5f23bf90fd5', type: "button", class: "dismiss", part: "dismiss", "aria-label": this.dismissLabel, onClick: () => this.pfDismiss.emit() }, index.h("pf-icon", { key: '52c0b4bcc7e09fe0c364c703cb04d5ebebbd370d', name: "circle-xmark" })))));
+    }
+};
+PfTag.style = pfTagCss();
+
+exports.pf_tag = PfTag;
+//# sourceMappingURL=pf-tag.entry.cjs.js.map
+
+//# sourceMappingURL=pf-tag.cjs.entry.js.map

package/dist/cjs/pf-tag.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-tag.cjs.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,opCAAopC,CAAC;;MCmBhqC,KAAK,GAAA,MAAA;;;;;IACS,OAAO,GAAiB,SAAS;;IAGjC,WAAW,GAAG,KAAK;;IAGpC,YAAY,GAAG,YAAY;AAEnC;;;;AAIG;AACM,IAAA,SAAS;IAElB,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,EACN,IAAI,CAAC,WAAW,KACfA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EAAA,YAAA,EACF,IAAI,CAAC,YAAY,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAA,EAEpCA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAC,cAAc,EAAA,CAAW,CAChC,CACV,CACI;;;;;;;","names":["h","Host"],"sources":["src/components/pf-tag/pf-tag.css?tag=pf-tag&encapsulation=shadow","src/components/pf-tag/pf-tag.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  border-radius: var(--radius-full);\n  display: inline-flex;\n  gap: var(--space-1);\n  min-height: 26px;\n  padding: 0 var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.label {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n}\n\n:host([variant='neutral']) {\n  background: var(--pf-tag-neutral-bg);\n  color: var(--pf-tag-neutral-text);\n}\n\n:host([variant='brand']) {\n  background: var(--pf-tag-brand-bg);\n  color: var(--pf-tag-brand-text);\n}\n\n:host([variant='success']) {\n  background: var(--pf-tag-success-bg);\n  color: var(--pf-tag-success-text);\n}\n\n:host([variant='warning']) {\n  background: var(--pf-tag-warning-bg);\n  color: var(--pf-tag-warning-text);\n}\n\n:host([variant='danger']) {\n  background: var(--pf-tag-danger-bg);\n  color: var(--pf-tag-danger-text);\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-full);\n  color: currentColor;\n  cursor: pointer;\n  display: inline-flex;\n  height: 18px;\n  justify-content: center;\n  margin-inline-end: -2px;\n  padding: 0;\n  width: 18px;\n}\n\n.dismiss:hover {\n  background: var(--pf-tag-subtle-hover-overlay, var(--pf-subtle-hover-overlay));\n}\n\n.dismiss:focus-visible {\n  box-shadow: var(--pf-tag-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.dismiss pf-icon {\n  font-size: 12px;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type PfTagVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\n\n/**\n * A label a person can remove, for a filter or a selection.\n *\n * It only reports that its dismiss button was pressed — removing it is the\n * consumer's, as it is for `pf-alert`.\n *\n * @slot - the tag's label.\n * @part label - the label wrapper.\n * @part dismiss - the remove button, when dismissible.\n */\n@Component({\n  tag: 'pf-tag',\n  styleUrl: 'pf-tag.css',\n  shadow: true,\n})\nexport class PfTag {\n  @Prop({ reflect: true }) variant: PfTagVariant = 'neutral';\n\n  /** Show a button that removes the tag. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** Accessible name for the remove button. */\n  @Prop() dismissLabel = 'Remove tag';\n\n  /**\n   * Fired when the remove button is pressed. The tag does not remove itself —\n   * whoever owns the list decides, exactly as the React `onDismiss` callback\n   * leaves it to the caller.\n   */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        <span class=\"label\" part=\"label\">\n          <slot />\n        </span>\n        {this.dismissible && (\n          <button\n            type=\"button\"\n            class=\"dismiss\"\n            part=\"dismiss\"\n            aria-label={this.dismissLabel}\n            onClick={() => this.pfDismiss.emit()}\n          >\n            <pf-icon name=\"circle-xmark\"></pf-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-textarea.cjs.entry.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var aria = require('./aria-5oCPUGFo.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+
+const pfTextareaCss = () => `: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}`;
+
+const PfTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfInput = index.createEvent(this, "pfInput");
+        this.pfChange = index.createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    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 ?? '');
+        formValidity.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 = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (index.h(index.Host, { key: '2ec86efeeb1ce4aa2ec112e93157a8f205731bf3' }, index.h("div", { key: '8d68eda3ec27c38703391e14f724e7dc06e76503', class: "field", part: "field" }, this.label && (index.h("label", { key: 'd73433e1f64c2e47b8a8ca88aa1805610e9058bb', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (index.h("span", { key: '1a52649b0e92dd7700aa21d3658126764bbac0d0', class: "required", "aria-hidden": "true" }, "*")))), index.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 && (index.h("p", { key: '91b2ffdb3da3e93e868d2b9a9398d99c2df49a27', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '58508d7aa6efbf4b55b304b029fb8c2ec6c817e3', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfTextarea.style = pfTextareaCss();
+
+exports.pf_textarea = PfTextarea;
+//# sourceMappingURL=pf-textarea.entry.cjs.js.map
+
+//# sourceMappingURL=pf-textarea.cjs.entry.js.map

package/dist/cjs/pf-textarea.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-textarea.cjs.entry.js","mappings":"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","names":["applyControlValidity","composeDescribedBy","h","Host"],"sources":["src/components/pf-textarea/pf-textarea.css?tag=pf-textarea&encapsulation=shadow","src/components/pf-textarea/pf-textarea.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-textarea-field-label, var(--pf-field-label));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-textarea-field-description, var(--pf-field-description));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-textarea-field-error, var(--pf-field-error));\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.textarea {\n  background: var(--pf-textarea-bg);\n  border: 1px solid var(--pf-textarea-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-textarea-text);\n  font: inherit;\n  line-height: 1.45;\n  min-height: 96px;\n  padding: var(--space-2) var(--space-3);\n  resize: vertical;\n  width: 100%;\n}\n\n.textarea:focus {\n  outline: none;\n}\n\n.textarea:focus-visible {\n  border-color: var(--pf-textarea-focus-border);\n  box-shadow: var(--pf-textarea-focus-ring, var(--pf-focus-ring));\n}\n\n.textarea::placeholder {\n  color: var(--pf-textarea-text-muted);\n}\n\n.textarea--invalid {\n  border-color: var(--pf-textarea-invalid-border);\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n","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"],"version":3}