@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-chart-series/pf-chart-series.js

@@ -0,0 +1,132 @@
+import { h, Host } from "@stencil/core";
+/**
+ * One series of a `pf-line-chart` or a `pf-bar-chart`, and its own row in the
+ * legend.
+ *
+ * The chart's data is a single array of rows keyed by series — bulk numbers,
+ * which belong in a property — while the series are the part with names and
+ * colours, which belong in the light DOM so a consumer can loop over them and
+ * so the legend can hold their labels. A legend built in the chart's shadow
+ * root could not reach a slotted label at all.
+ *
+ * `swatch` is the chart's to set: only it knows this series' place in the
+ * palette.
+ *
+ * @slot - the series' name. Falls back to `seriesKey`.
+ * @part dot - the colour swatch.
+ * @part label - the name.
+ */
+export class PfChartSeries {
+    /**
+     * The property each data row carries this series' value under.
+     *
+     * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,
+     * the same family as `animate` shadowing `Element.prototype.animate`.
+     */
+    seriesKey = '';
+    /** Overrides the palette colour the chart would give it. */
+    color;
+    /** Draw this series' line dashed. Line charts only. Reflected. */
+    dashed = false;
+    /** Set by the chart: the colour actually used, palette or override. */
+    swatch = '';
+    render() {
+        return (h(Host, { key: '42e03761d372da7b9878a86b5afd081e583232e9', role: "listitem" }, h("span", { key: '73da1c97180054c5178eaaecaa882c5a440216e5', class: "dot", part: "dot", "aria-hidden": "true", style: { background: this.swatch } }), h("span", { key: 'dada4085c9a46265eaf454bbcb10b1d849839ca6', class: "label", part: "label" }, h("slot", { key: 'bca6cc3bd7c0fd8f65f10a696ca823526aea46f9' }, this.seriesKey))));
+    }
+    static get is() { return "pf-chart-series"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-chart-series.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-chart-series.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "seriesKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property each data row carries this series' value under.\n\n`seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,\nthe same family as `animate` shadowing `Element.prototype.animate`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "series-key",
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the palette colour the chart would give it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color"
+            },
+            "dashed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Draw this series' line dashed. Line charts only. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dashed",
+                "defaultValue": "false"
+            },
+            "swatch": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set by the chart: the colour actually used, palette or override."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swatch",
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-chart-series.js.map

package/dist/collection/components/pf-chart-series/pf-chart-series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-chart-series.js","sourceRoot":"","sources":["../../../src/components/pf-chart-series/pf-chart-series.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,aAAa;IACxB;;;;;OAKG;IACsB,SAAS,GAAG,EAAE,CAAC;IAExC,4DAA4D;IACnC,KAAK,CAAU;IAExC,kEAAkE;IACzC,MAAM,GAAG,KAAK,CAAC;IAExC,uEAAuE;IAC9C,MAAM,GAAG,EAAE,CAAC;IAErC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,6DAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,iBAAa,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,GAAS;YAC3F,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC9B,+DAAO,IAAI,CAAC,SAAS,CAAQ,CACxB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One series of a `pf-line-chart` or a `pf-bar-chart`, and its own row in the\n * legend.\n *\n * The chart's data is a single array of rows keyed by series — bulk numbers,\n * which belong in a property — while the series are the part with names and\n * colours, which belong in the light DOM so a consumer can loop over them and\n * so the legend can hold their labels. A legend built in the chart's shadow\n * root could not reach a slotted label at all.\n *\n * `swatch` is the chart's to set: only it knows this series' place in the\n * palette.\n *\n * @slot - the series' name. Falls back to `seriesKey`.\n * @part dot - the colour swatch.\n * @part label - the name.\n */\n@Component({\n  tag: 'pf-chart-series',\n  styleUrl: 'pf-chart-series.css',\n  shadow: true,\n})\nexport class PfChartSeries {\n  /**\n   * The property each data row carries this series' value under.\n   *\n   * `seriesKey`, not `key`: `key` is the vdom's own prop name and reserved,\n   * the same family as `animate` shadowing `Element.prototype.animate`.\n   */\n  @Prop({ reflect: true }) seriesKey = '';\n\n  /** Overrides the palette colour the chart would give it. */\n  @Prop({ reflect: true }) color?: string;\n\n  /** Draw this series' line dashed. Line charts only. Reflected. */\n  @Prop({ reflect: true }) dashed = false;\n\n  /** Set by the chart: the colour actually used, palette or override. */\n  @Prop({ mutable: true }) swatch = '';\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <span class=\"dot\" part=\"dot\" aria-hidden=\"true\" style={{ background: this.swatch }}></span>\n        <span class=\"label\" part=\"label\">\n          <slot>{this.seriesKey}</slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-checkbox/pf-checkbox.css

@@ -0,0 +1,77 @@
+:host {
+  display: inline-block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.field {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.input {
+  appearance: none;
+  background: var(--pf-checkbox-bg);
+  border: 1px solid var(--pf-checkbox-border);
+  border-radius: var(--pf-checkbox-radius, var(--radius-sm));
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  flex-shrink: 0;
+  height: 18px;
+  margin: 0;
+  position: relative;
+  width: 18px;
+}
+
+.input:checked {
+  background: var(--pf-checkbox-checked-bg);
+  border-color: var(--pf-checkbox-border);
+}
+
+/* The tick: two borders of a rotated box. */
+.input::after {
+  border: solid var(--pf-checkbox-check-color);
+  border-width: 0 2px 2px 0;
+  content: '';
+  height: 9px;
+  left: 5px;
+  opacity: 0;
+  position: absolute;
+  top: 2px;
+  transform: rotate(45deg);
+  width: 5px;
+}
+
+.input:checked::after {
+  opacity: 1;
+}
+
+.input:focus-visible {
+  box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.input:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.input:disabled + .label {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.label {
+  color: var(--pf-checkbox-label-text);
+  font-size: var(--font-size-md);
+}
+
+.error {
+  color: var(--pf-checkbox-field-error, var(--pf-field-error));
+  font-size: var(--font-size-sm);
+  margin: var(--space-1) 0 0;
+}

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

@@ -0,0 +1,324 @@
+import { h, Host, } from "@stencil/core";
+import { applyControlValidity } from "../../form-validity";
+/**
+ * A form-associated checkbox.
+ *
+ * @part field - the wrapper around control and label.
+ * @part input - the native checkbox.
+ * @part label - the label element.
+ */
+export class PfCheckbox {
+    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;
+    /** Whether the box is ticked. Reflected so the stylesheet can select on it. */
+    checked = false;
+    /**
+     * What is submitted when ticked. Mirrors the native attribute, whose default
+     * is also `on` — a checkbox with no value still submits something.
+     */
+    value = 'on';
+    /** Visible label, rendered in the same root so `for` actually associates. */
+    label;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    required = false;
+    disabled = false;
+    /** Fires when the user ticks or unticks the box. */
+    pfChange;
+    /** The state a form reset restores, which is the initial attribute. */
+    initialChecked = false;
+    componentWillLoad() {
+        this.initialChecked = this.checked;
+        this.syncFormState();
+    }
+    syncFormState() {
+        /*
+         * `null`, not an empty string, when unticked: an unchecked checkbox is
+         * absent from the submission entirely, rather than present and empty.
+         * That is what a server distinguishing "unticked" from "not sent" relies
+         * on, and it is what a native checkbox does.
+         */
+        this.internals.setFormValue(this.checked ? this.value : null);
+        applyControlValidity(this.internals, this.checked, this.required, this.error);
+    }
+    /** A form-associated custom element does not inherit this. */
+    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 initial state, not `false` — a native
+     * `<input type=checkbox checked>` comes back ticked.
+     */
+    formResetCallback() {
+        this.checked = this.initialChecked;
+    }
+    onChange = (event) => {
+        this.checked = event.target.checked;
+        this.pfChange.emit({ checked: this.checked, value: this.value });
+    };
+    render() {
+        return (h(Host, { key: '87e808069908240f3507903e680a2ed25e963fde' }, h("div", { key: '56e201259f99ecf8da235b962a42ed65080f2f68', class: "field", part: "field" }, h("input", { key: '8efc240bd3931bcdf117e529ff4fb7e5f8e544d5', id: "input", part: "input", class: "input", type: "checkbox", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, "aria-invalid": this.error ? 'true' : null, "aria-describedby": this.error ? 'error' : null, onChange: this.onChange }), this.label && (h("label", { key: '8b098a6fd3271d1353447f53b4b06099d7044169', class: "label", part: "label", htmlFor: "input" }, this.label))), this.error && (h("p", { key: '76ba7559865ec18ba77ac50677df53a6459e6989', class: "error", part: "error", id: "error" }, this.error))));
+    }
+    static get is() { return "pf-checkbox"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-checkbox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-checkbox.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"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the box is ticked. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "checked",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "What is submitted when ticked. Mirrors the native attribute, whose default\nis also `on` \u2014 a checkbox with no value still submits something."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'on'"
+            },
+            "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 so `for` actually associates."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "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"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the user ticks or unticks the box."
+                },
+                "complexType": {
+                    "original": "{ checked: boolean; value: string }",
+                    "resolved": "{ checked: boolean; 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": "A form-associated custom element does not inherit this.",
+                    "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 watchers() {
+        return [{
+                "propName": "checked",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "value",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-checkbox.js","sourceRoot":"","sources":["../../../src/components/pf-checkbox/pf-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated checkbox.\n *\n * @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n */\n@Component({\n  tag: 'pf-checkbox',\n  styleUrl: 'pf-checkbox.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\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  /** Whether the box is ticked. Reflected so the stylesheet can select on it. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * What is submitted when ticked. Mirrors the native attribute, whose default\n   * is also `on` — a checkbox with no value still submits something.\n   */\n  @Prop() value = 'on';\n\n  /** Visible label, rendered in the same root so `for` actually associates. */\n  @Prop() label?: string;\n\n  /** Error message. Its presence is what marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the user ticks or unticks the box. */\n  @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n  /** The state a form reset restores, which is the initial attribute. */\n  private initialChecked = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormState();\n  }\n\n  @Watch('checked')\n  @Watch('error')\n  @Watch('required')\n  @Watch('value')\n  syncFormState() {\n    /*\n     * `null`, not an empty string, when unticked: an unchecked checkbox is\n     * absent from the submission entirely, rather than present and empty.\n     * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n     * on, and it is what a native checkbox does.\n     */\n    this.internals.setFormValue(this.checked ? this.value : null);\n    applyControlValidity(this.internals, this.checked, this.required, this.error);\n  }\n\n  /** A form-associated custom element does not inherit this. */\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 initial state, not `false` — a native\n   * `<input type=checkbox checked>` comes back ticked.\n   */\n  formResetCallback() {\n    this.checked = this.initialChecked;\n  }\n\n  private onChange = (event: Event) => {\n    this.checked = (event.target as HTMLInputElement).checked;\n    this.pfChange.emit({ checked: this.checked, value: this.value });\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          <input\n            id=\"input\"\n            part=\"input\"\n            class=\"input\"\n            type=\"checkbox\"\n            name={this.name}\n            value={this.value}\n            checked={this.checked}\n            required={this.required}\n            disabled={this.disabled}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={this.error ? 'error' : null}\n            onChange={this.onChange}\n          />\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"input\">\n              {this.label}\n            </label>\n          )}\n        </div>\n        {this.error && (\n          <p class=\"error\" part=\"error\" id=\"error\">\n            {this.error}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"]}