@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,421 @@
+import { composeDescribedBy } from "@pitchfork-ui/core";
+import { applyControlValidity } from "../../form-validity";
+import { h, Host, } from "@stencil/core";
+/**
+ * A form-associated text input.
+ *
+ * `formAssociated` plus `ElementInternals` is what makes this participate in a
+ * real `<form>`: the value reaches `FormData`, constraint validation works, and
+ * Angular's generated value accessor has something to bind to. A plain
+ * `<input>` inside a shadow root does none of that.
+ *
+ * @part field - the wrapper around label, control and messages.
+ * @part label - the label element.
+ * @part input - the native input.
+ * @part description - the hint text below the control.
+ * @part error - the error message below the control.
+ */
+export class PfInput {
+    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 = '';
+    type = 'text';
+    /** Visible label. Rendered in the same root as the input, so `for` works. */
+    label;
+    /** Hint text below the control. */
+    description;
+    /** Error message. Its presence is what marks the control invalid. */
+    error;
+    placeholder;
+    required = false;
+    disabled = false;
+    readonly = false;
+    /** Fires on every keystroke, like the native `input` event. */
+    pfInput;
+    /** Fires when the value is committed, like the native `change` event. */
+    pfChange;
+    /**
+     * The value the control had when it was created, which is what a form reset
+     * restores. Captured here because `value` has been overwritten by then.
+     */
+    initialValue = '';
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value ?? '');
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /**
+     * Whether the control currently satisfies its constraints.
+     *
+     * A form-associated custom element does not inherit `checkValidity` from
+     * anywhere -- the spec puts it on ElementInternals, so the element has to
+     * forward it or consumers cannot ask.
+     */
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    /** As `checkValidity`, but also shows the browser's validation message. */
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    /** The message explaining why the control is invalid, or an empty string. */
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * verified against a native `<input value="initial">`, which comes back to
+     * "initial" rather than to "". Clearing it was a real defect: a
+     * `<pf-input 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 });
+    };
+    render() {
+        // IDs are scoped to this shadow root, so they can be literal -- the useId()
+        // the React component needs has no counterpart here.
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (h(Host, { key: 'a6d68ce6641fb92407356c94e2181b280bdc03b6' }, h("div", { key: '312ee69f4a661494548b01f598b74ed56bd443fc', class: "field", part: "field" }, this.label && (h("label", { key: '59188fde6b3639105f8ade8b497c764ddd5d658f', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '4f71679ec6bb99d3f7dc8f941d8c02bb94452c21', class: "required", "aria-hidden": "true" }, "*")))), h("input", { key: '0680b0e5aa0f8ddf9850a212f735f0f8c5b273a3', id: "input", part: "input", class: { input: true, 'input--invalid': Boolean(this.error) }, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readOnly: this.readonly, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange }), this.description && (h("p", { key: 'f732742b8602ed6094600065d5036bdad538ad35', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '9d524a204abfb733afaf2bf3cc5ec9a5e1c65b94', class: "error", part: "error", id: "error" }, this.error)))));
+    }
+    static get is() { return "pf-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-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.\n\nReflected, because a form-associated custom element takes its submission\nname from the `name` *content attribute* -- not from this property. A\nframework wrapper that sets properties rather than attributes (the\ngenerated React bindings do) would otherwise leave the control nameless\nand absent from the submission, with every other sign of working."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The control's value."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfInputType",
+                    "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+                    "references": {
+                        "PfInputType": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-input/pf-input.tsx",
+                            "id": "src/components/pf-input/pf-input.tsx::PfInputType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'text'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Visible label. Rendered in the same root as the input, so `for` works."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Hint text below the control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message. Its presence is what marks the control invalid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfInput",
+                "name": "pfInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires on every keystroke, like the native `input` event."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the value is committed, like the native `change` event."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "checkValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Whether the control currently satisfies its constraints.\n\nA form-associated custom element does not inherit `checkValidity` from\nanywhere -- the spec puts it on ElementInternals, so the element has to\nforward it or consumers cannot ask.",
+                    "tags": []
+                }
+            },
+            "reportValidity": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "As `checkValidity`, but also shows the browser's validation message.",
+                    "tags": []
+                }
+            },
+            "getValidationMessage": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "The message explaining why the control is invalid, or an empty string.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "error",
+                "methodName": "syncFormState"
+            }, {
+                "propName": "required",
+                "methodName": "syncFormState"
+            }];
+    }
+    static get attachInternalsMemberName() { return "internals"; }
+}
+//# sourceMappingURL=pf-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-input.js","sourceRoot":"","sources":["../../../src/components/pf-input/pf-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\nexport type PfInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';\n\n/**\n * A form-associated text input.\n *\n * `formAssociated` plus `ElementInternals` is what makes this participate in a\n * real `<form>`: the value reaches `FormData`, constraint validation works, and\n * Angular's generated value accessor has something to bind to. A plain\n * `<input>` inside a shadow root does none of that.\n *\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part input - the native 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-input',\n  styleUrl: 'pf-input.css',\n  formAssociated: true,\n  shadow: { delegatesFocus: true },\n})\nexport class PfInput {\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  @Prop({ reflect: true }) type: PfInputType = 'text';\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-input 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 HTMLInputElement).value;\n    this.pfInput.emit({ value: this.value });\n  };\n\n  private onChange = () => {\n    this.pfChange.emit({ value: this.value });\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          <input\n            id=\"input\"\n            part=\"input\"\n            class={{ input: true, 'input--invalid': Boolean(this.error) }}\n            type={this.type}\n            name={this.name}\n            value={this.value}\n            placeholder={this.placeholder}\n            required={this.required}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            aria-invalid={this.error ? 'true' : null}\n            aria-describedby={describedBy}\n            onInput={this.onInput}\n            onChange={this.onChange}\n          />\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,33 @@
+:host {
+  display: inline-flex;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+kbd {
+  align-items: center;
+  background: var(--pf-kbd-bg);
+  border: 1px solid var(--pf-kbd-border);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-sm);
+  color: var(--pf-kbd-text);
+  display: inline-flex;
+  font-family: var(--font-family-mono, ui-monospace, monospace);
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+:host([size='md']) kbd {
+  font-size: var(--font-size-xs);
+  min-width: 1.5em;
+  padding: 3px 6px;
+}
+
+:host([size='sm']) kbd {
+  font-size: var(--font-size-2xs);
+  min-width: 1.35em;
+  padding: 2px 5px;
+}

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

@@ -0,0 +1,102 @@
+import { formatKeyCombination } from "@pitchfork-ui/core";
+import { h } from "@stencil/core";
+/**
+ * A keyboard key or a combination of them, as `<kbd>` elements.
+ *
+ * `keys` renders one cap per entry with separators between; a single key can
+ * be slotted instead.
+ *
+ * @slot - a single key, when `keys` is not given.
+ * @part kbd - the native kbd element.
+ */
+export class PfKbd {
+    /** A key combination rendered as one cap, e.g. `["⌘", "K"]`. */
+    keys;
+    size = 'md';
+    /** Separator between keys in a combination. Defaults to `+`. */
+    separator = '+';
+    render() {
+        const combination = this.keys?.length ? formatKeyCombination(this.keys, this.separator) : null;
+        return h("kbd", { key: 'dc9375fb271fa1b60e81c39ec69effd38c7e5723', part: "kbd" }, combination ?? h("slot", { key: '280a222509ba677e5ce6ad2afe99306a5a2bda09' }));
+    }
+    static get is() { return "pf-kbd"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-kbd.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-kbd.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "keys": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[] | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A key combination rendered as one cap, e.g. `[\"\u2318\", \"K\"]`."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfKbdSize",
+                    "resolved": "\"md\" | \"sm\"",
+                    "references": {
+                        "PfKbdSize": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-kbd/pf-kbd.tsx",
+                            "id": "src/components/pf-kbd/pf-kbd.tsx::PfKbdSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Separator between keys in a combination. Defaults to `+`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'+'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-kbd.js","sourceRoot":"","sources":["../../../src/components/pf-kbd/pf-kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;GAQG;AAMH,MAAM,OAAO,KAAK;IAChB,gEAAgE;IACxD,IAAI,CAAY;IAEC,IAAI,GAAc,IAAI,CAAC;IAEhD,gEAAgE;IACxD,SAAS,GAAG,GAAG,CAAC;IAExB,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAE/F,OAAO,4DAAK,IAAI,EAAC,KAAK,IAAE,WAAW,IAAI,8DAAQ,CAAO,CAAC;IACzD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { formatKeyCombination } from '@pitchfork-ui/core';\nimport { Component, h, Prop } from '@stencil/core';\n\nexport type PfKbdSize = 'sm' | 'md';\n\n/**\n * A keyboard key or a combination of them, as `<kbd>` elements.\n *\n * `keys` renders one cap per entry with separators between; a single key can\n * be slotted instead.\n *\n * @slot - a single key, when `keys` is not given.\n * @part kbd - the native kbd element.\n */\n@Component({\n  tag: 'pf-kbd',\n  styleUrl: 'pf-kbd.css',\n  shadow: true,\n})\nexport class PfKbd {\n  /** A key combination rendered as one cap, e.g. `[\"⌘\", \"K\"]`. */\n  @Prop() keys?: string[];\n\n  @Prop({ reflect: true }) size: PfKbdSize = 'md';\n\n  /** Separator between keys in a combination. Defaults to `+`. */\n  @Prop() separator = '+';\n\n  render() {\n    const combination = this.keys?.length ? formatKeyCombination(this.keys, this.separator) : null;\n\n    return <kbd part=\"kbd\">{combination ?? <slot />}</kbd>;\n  }\n}\n"]}

package/dist/collection/components/pf-line-chart/pf-line-chart.css

@@ -0,0 +1,98 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.svg {
+  display: block;
+  height: auto;
+  /* The y-axis label is drawn outside the plot, so the box must not clip. */
+  overflow: visible;
+  width: 100%;
+}
+
+.empty {
+  align-items: center;
+  color: var(--pf-chart-text-muted);
+  display: flex;
+  font-size: var(--font-size-sm);
+  height: 120px;
+  justify-content: center;
+}
+
+.grid {
+  stroke: var(--pf-chart-grid);
+  stroke-width: 1;
+}
+
+.tick {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+}
+
+.tick--y {
+  dominant-baseline: middle;
+  text-anchor: end;
+}
+
+.tick--x {
+  dominant-baseline: hanging;
+  text-anchor: middle;
+}
+
+.axis-label {
+  fill: var(--pf-chart-text-muted);
+  font-family: inherit;
+  font-size: var(--font-size-2xs);
+  text-anchor: middle;
+}
+
+/* The dots appear on hover, so the line reads cleanly at rest. */
+.dot {
+  opacity: 0;
+  transition: opacity 80ms ease;
+}
+
+.svg:hover .dot {
+  opacity: 1;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-4);
+  list-style: none;
+  margin: 0;
+  /*
+   * Lines the legend's start edge up with the plot area: the SVG is inset by
+   * the y-axis gutter, and the inset is set inline from the chart's geometry.
+   */
+  padding: 0;
+  padding-inline-start: var(--pf-chart-plot-inset-left, 0);
+}
+
+/*
+ * Hidden rather than dropped, so the series stay slotted and `slotchange`
+ * still fires. Two classes deep, because the tie breaks on source order.
+ */
+.legend.legend--hidden {
+  display: none;
+}
+
+/* The series are flex children of the list, not of a box inside it. */
+.legend slot {
+  display: contents;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dot {
+    transition: none;
+  }
+}