@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-code-snippet/pf-code-snippet.css

@@ -0,0 +1,164 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.figure {
+  background: var(--pf-code-snippet-bg);
+  /*
+   * Derived borders and header stay as fallback mixes rather than theme.css
+   * aliases, so a scoped `--pf-code-snippet-bg` override re-tints them — the
+   * same arrangement the React stylesheet uses, and the reason the two look
+   * identical under a custom background.
+   */
+  border: 1px solid
+    var(
+      --pf-code-snippet-border,
+      color-mix(in srgb, var(--pf-code-snippet-bg) 82%, var(--pf-mix-base))
+    );
+  border-radius: var(--radius-md);
+  color: var(--pf-code-snippet-text);
+  display: grid;
+  margin: 0;
+  overflow: hidden;
+}
+
+.header {
+  align-items: center;
+  background: var(
+    --pf-code-snippet-header-bg,
+    color-mix(in srgb, var(--pf-code-snippet-bg) 78%, var(--pf-mix-base))
+  );
+  border-bottom: 1px solid
+    var(
+      --pf-code-snippet-header-border,
+      color-mix(in srgb, var(--pf-code-snippet-bg) 65%, var(--pf-mix-base))
+    );
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 0 var(--space-3);
+}
+
+.meta {
+  align-items: baseline;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.title {
+  color: var(--pf-code-snippet-title);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
+.language {
+  color: var(--pf-code-snippet-language);
+  font-size: var(--font-size-xs);
+  text-transform: uppercase;
+}
+
+.copy {
+  align-items: center;
+  background: var(
+    --pf-code-snippet-copy-bg,
+    color-mix(in srgb, var(--pf-code-snippet-bg) 70%, var(--pf-mix-base))
+  );
+  border: 1px solid
+    var(
+      --pf-code-snippet-copy-border,
+      color-mix(in srgb, var(--pf-code-snippet-bg) 55%, var(--pf-mix-base))
+    );
+  border-radius: var(--radius-sm);
+  color: var(--pf-code-snippet-copy-text);
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  font-size: var(--font-size-xs);
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+}
+
+.copy:hover {
+  background: var(
+    --pf-code-snippet-copy-hover-bg,
+    color-mix(in srgb, var(--pf-code-snippet-bg) 58%, var(--pf-mix-base))
+  );
+}
+
+.copy:focus-visible {
+  box-shadow: var(--pf-code-snippet-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.pre {
+  font-family: var(--pf-code-font-family);
+  font-size: var(--font-size-xs);
+  line-height: 1.65;
+  margin: 0;
+  overflow: auto;
+  padding: var(--space-3);
+}
+
+.plain,
+.markup {
+  font: inherit;
+}
+
+/*
+ * Two classes deep, because the ties break on source order and a bare
+ * `.empty` would lose to whatever `display` a later rule gives the box. The
+ * slot itself stays rendered inside it either way, or markup added later
+ * would never fire `slotchange`.
+ */
+.markup.empty {
+  display: none;
+}
+
+/*
+ * A grid, not a table: the numbers only have to line up in a column, and a
+ * row here has no box of its own to need. `white-space: pre` on the content
+ * is what keeps the author's indentation.
+ */
+.numbered {
+  display: grid;
+  font: inherit;
+  grid-template-columns: auto 1fr;
+}
+
+.line {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.line-number {
+  color: var(--pf-code-snippet-line-number);
+  padding-inline-end: var(--space-3);
+  text-align: end;
+  user-select: none;
+}
+
+.line-content {
+  white-space: pre;
+}
+
+/*
+ * Each element needs its own copy: `.pf-sr-only` is declared once in the
+ * React library's global sheet and does not cross a shadow boundary.
+ */
+.sr-only {
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/dist/collection/components/pf-code-snippet/pf-code-snippet.js

@@ -0,0 +1,371 @@
+import { copyText, splitCodeLines } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * A code block with a copy button.
+ *
+ * **No syntax highlighting, deliberately.** The React `CodeSnippet` uses
+ * `prism-react-renderer`, which is a React renderer and has no equivalent
+ * here; the alternatives are all large runtime dependencies, and an element in
+ * a design system should not make a consumer's bundle choose one. A consumer
+ * who already highlights code slots the markup their highlighter produced into
+ * the default slot, and this renders that instead of the plain text — it still
+ * owns the frame, the header, the copy button and the announcement.
+ *
+ * Line numbers are offered only for the plain-text path. Aligning a gutter
+ * with someone else's markup needs to know where their lines break, which only
+ * they know.
+ *
+ * @slot - pre-highlighted markup, rendered instead of `code`.
+ * @part figure - the frame.
+ * @part header - the title, language and copy button.
+ * @part title - the title text.
+ * @part language - the language tag.
+ * @part copy - the copy button.
+ * @part pre - the code block.
+ * @part line - one numbered line, when line numbers are on.
+ * @part line-number - that line's number.
+ */
+export class PfCodeSnippet {
+    el;
+    /** The code, as plain text. */
+    code = '';
+    /** Shown as a tag in the header, and not used for anything else. */
+    language;
+    /** Shown in the header. */
+    heading;
+    showLineNumbers = false;
+    /** Scrolls past this height, in pixels. */
+    maxHeight;
+    copyLabel = 'Copy';
+    copiedLabel = 'Copied';
+    copyFailedLabel = 'Copy failed';
+    /**
+     * How long the button keeps saying what the last press did, in
+     * milliseconds.
+     *
+     * A prop rather than a constant because a live region that still holds
+     * "Copied" when the next copy happens announces nothing, so how long it
+     * holds is a real decision — and because a test cannot use fake timers
+     * here: `vi.useFakeTimers()` replaces `requestAnimationFrame`, which
+     * Stencil's render queue runs on, and wedges every test after it.
+     */
+    feedbackDuration = 1600;
+    /** Fires with the text that reached the clipboard. Not fired on a failure. */
+    pfCopy;
+    /** Fires when the copy could not be made, with the reason shown. */
+    pfCopyError;
+    copied = false;
+    failed = false;
+    /** Whether the consumer slotted their own highlighted markup. */
+    hasMarkup = false;
+    resetTimer;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.readSlot();
+    }
+    disconnectedCallback() {
+        if (this.resetTimer !== undefined)
+            window.clearTimeout(this.resetTimer);
+    }
+    /** Copies the snippet, as pressing the button does. */
+    async copy() {
+        /*
+         * The return value is the whole point. The React component guarded the
+         * write with `if (navigator.clipboard?.writeText)` and then said
+         * "Copied" regardless, so in any insecure context it claimed a copy it
+         * had not made.
+         */
+        const ok = await copyText(this.text);
+        this.copied = ok;
+        this.failed = !ok;
+        if (ok)
+            this.pfCopy.emit({ code: this.text });
+        else
+            this.pfCopyError.emit({ message: this.copyFailedLabel });
+        // One timer, restarted rather than stacked.
+        if (this.resetTimer !== undefined)
+            window.clearTimeout(this.resetTimer);
+        this.resetTimer = window.setTimeout(() => {
+            this.copied = false;
+            this.failed = false;
+            this.resetTimer = undefined;
+        }, Number(this.feedbackDuration) || 1600);
+        return ok;
+    }
+    /** What gets copied: the code, or the slotted markup's own text. */
+    get text() {
+        if (this.code)
+            return this.code;
+        return this.el.textContent?.replace(/^\n/, '').trimEnd() ?? '';
+    }
+    readSlot() {
+        this.hasMarkup = Array.from(this.el.children).some((child) => !child.getAttribute('slot') && child.textContent?.trim());
+    }
+    render() {
+        const lines = splitCodeLines(this.code);
+        const numbered = this.showLineNumbers && !this.hasMarkup;
+        const label = this.failed
+            ? this.copyFailedLabel
+            : this.copied
+                ? this.copiedLabel
+                : this.copyLabel;
+        return (h(Host, { key: 'ce790e02e48648e3f7237ae481cc9be19405dff5' }, h("figure", { key: '256bedbf5c296e327a468ca8dcd7eb8a0b222ab5', class: "figure", part: "figure" }, h("figcaption", { key: '19348aab69fda332deaa4bcfe960a51bba03628e', class: "header", part: "header" }, h("span", { key: 'a205ec4595e3c4bc7a3a0014a4f382ba5b1cd60e', class: "meta" }, this.heading && (h("span", { key: '2952765b50ea3f47530f1512f5d3f300a3c7d46c', class: "title", part: "title" }, this.heading)), this.language && (h("span", { key: 'dcf391d1cb9cee8dfdaf6225ea9492b0cf5024aa', class: "language", part: "language" }, this.language))), h("button", { key: '81de649f6f5110741cea4a4a2c1cc5df2f6c1b94', type: "button", class: "copy", part: "copy", "aria-describedby": "status", onClick: () => this.copy() }, h("pf-icon", { key: '2c5a328413fed44f659006170f1b30f436c53e10', name: this.failed ? 'triangle-exclamation' : this.copied ? 'circle-check' : 'copy', "aria-hidden": "true" }), h("span", { key: 'b87e57f38c086e97e3a8a9ab9bc24aee878c388a' }, label))), h("pre", { key: '31e71cc4836610003941856a5455e6ccf8c086f2', class: "pre", part: "pre", style: this.maxHeight ? { maxHeight: `${this.maxHeight}px`, overflow: 'auto' } : {} }, h("code", { key: '6f019f3f6965e2b745ff7447b8c7ce14d76d88ff', class: { markup: true, empty: !this.hasMarkup } }, h("slot", { key: 'ad02a6b56fd9e8429b396e6d3a432801e6a24369', onSlotchange: () => this.readSlot() })), !this.hasMarkup &&
+            (numbered ? (h("code", { class: "numbered" }, lines.map((line, index) => (h("span", { class: "line", part: "line" }, h("span", { class: "line-number", part: "line-number", "aria-hidden": "true" }, index + 1), h("span", { class: "line-content" }, line === '' ? '\n' : line)))))) : (h("code", { class: "plain" }, this.code)))), h("span", { key: '3b0d4abef444eeb902bebe28c97ac1db7c097b24', class: "sr-only", id: "status", "aria-live": "polite" }, this.failed ? this.copyFailedLabel : this.copied ? this.copiedLabel : ''))));
+    }
+    static get is() { return "pf-code-snippet"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-code-snippet.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-code-snippet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "code": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The code, as plain text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "code",
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shown as a tag in the header, and not used for anything else."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "language"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Shown in the header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "showLineNumbers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "show-line-numbers",
+                "defaultValue": "false"
+            },
+            "maxHeight": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Scrolls past this height, in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-height"
+            },
+            "copyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-label",
+                "defaultValue": "'Copy'"
+            },
+            "copiedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copied-label",
+                "defaultValue": "'Copied'"
+            },
+            "copyFailedLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "copy-failed-label",
+                "defaultValue": "'Copy failed'"
+            },
+            "feedbackDuration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How long the button keeps saying what the last press did, in\nmilliseconds.\n\nA prop rather than a constant because a live region that still holds\n\"Copied\" when the next copy happens announces nothing, so how long it\nholds is a real decision \u2014 and because a test cannot use fake timers\nhere: `vi.useFakeTimers()` replaces `requestAnimationFrame`, which\nStencil's render queue runs on, and wedges every test after it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "feedback-duration",
+                "defaultValue": "1600"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "copied": {},
+            "failed": {},
+            "hasMarkup": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfCopy",
+                "name": "pfCopy",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires with the text that reached the clipboard. Not fired on a failure."
+                },
+                "complexType": {
+                    "original": "{ code: string }",
+                    "resolved": "{ code: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "pfCopyError",
+                "name": "pfCopyError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the copy could not be made, with the reason shown."
+                },
+                "complexType": {
+                    "original": "{ message: string }",
+                    "resolved": "{ message: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "copy": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Copies the snippet, as pressing the button does.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-code-snippet.js.map

package/dist/collection/components/pf-code-snippet/pf-code-snippet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-code-snippet.js","sourceRoot":"","sources":["../../../src/components/pf-code-snippet/pf-code-snippet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAMH,MAAM,OAAO,aAAa;IACb,EAAE,CAAe;IAE5B,+BAA+B;IACvB,IAAI,GAAG,EAAE,CAAC;IAElB,oEAAoE;IAC3C,QAAQ,CAAU;IAE3C,2BAA2B;IACnB,OAAO,CAAU;IAEA,eAAe,GAAG,KAAK,CAAC;IAEjD,2CAA2C;IACnC,SAAS,CAAU;IAEnB,SAAS,GAAG,MAAM,CAAC;IAEnB,WAAW,GAAG,QAAQ,CAAC;IAEvB,eAAe,GAAG,aAAa,CAAC;IAExC;;;;;;;;;OASG;IACK,gBAAgB,GAAG,IAAI,CAAC;IAEhC,8EAA8E;IACrE,MAAM,CAAkC;IAEjD,oEAAoE;IAC3D,WAAW,CAAqC;IAEhD,MAAM,GAAG,KAAK,CAAC;IAEf,MAAM,GAAG,KAAK,CAAC;IAExB,iEAAiE;IACxD,SAAS,GAAG,KAAK,CAAC;IAEnB,UAAU,CAAU;IAE5B,uEAAuE;IACvE,iBAAiB;QACf,IAAI,CAAC,QAAQ,EAAE,CAAC;IAClB,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAC1E,CAAC;IAED,uDAAuD;IAEvD,KAAK,CAAC,IAAI;QACR;;;;;WAKG;QACH,MAAM,EAAE,GAAG,MAAM,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAErC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;QAElB,IAAI,EAAE;YAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;;YACzC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;QAE9D,4CAA4C;QAC5C,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS;YAAE,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxE,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CACjC,GAAG,EAAE;YACH,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YACpB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAC9B,CAAC,EACD,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,IAAI,CACtC,CAAC;QAEF,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,oEAAoE;IACpE,IAAY,IAAI;QACd,IAAI,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,IAAI,CAAC;QAChC,OAAO,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC;IACjE,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAChD,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,IAAI,EAAE,CACpE,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QACzD,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM;YACvB,CAAC,CAAC,IAAI,CAAC,eAAe;YACtB,CAAC,CAAC,IAAI,CAAC,MAAM;gBACX,CAAC,CAAC,IAAI,CAAC,WAAW;gBAClB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC;QAErB,OAAO,CACL,EAAC,IAAI;YACH,+DAAQ,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;gBAClC,mEAAY,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ;oBACtC,6DAAM,KAAK,EAAC,MAAM;wBACf,IAAI,CAAC,OAAO,IAAI,CACf,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,IAAI,CAAC,OAAO,CACR,CACR;wBACA,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,IACnC,IAAI,CAAC,QAAQ,CACT,CACR,CACI;oBAEP,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,sBACM,QAAQ,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;wBAE1B,gEACE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,iBACtE,MAAM,GACT;wBACX,+DAAO,KAAK,CAAQ,CACb,CACE;gBAEb,4DACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,SAAS,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE;oBAOnF,6DAAM,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE;wBACnD,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAI,CACxC;oBAEN,CAAC,IAAI,CAAC,SAAS;wBACd,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,YAAM,KAAK,EAAC,UAAU,IACnB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC1B,YAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;4BAC5B,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,iBAAa,MAAM,IAC5D,KAAK,GAAG,CAAC,CACL;4BACP,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAQ,CACxD,CACR,CAAC,CACG,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,IAAI,CAAQ,CACvC,CAAC,CACA;gBAQN,6DAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,QAAQ,eAAW,QAAQ,IACjD,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CACpE,CACA,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { copyText, splitCodeLines } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\n/**\n * A code block with a copy button.\n *\n * **No syntax highlighting, deliberately.** The React `CodeSnippet` uses\n * `prism-react-renderer`, which is a React renderer and has no equivalent\n * here; the alternatives are all large runtime dependencies, and an element in\n * a design system should not make a consumer's bundle choose one. A consumer\n * who already highlights code slots the markup their highlighter produced into\n * the default slot, and this renders that instead of the plain text — it still\n * owns the frame, the header, the copy button and the announcement.\n *\n * Line numbers are offered only for the plain-text path. Aligning a gutter\n * with someone else's markup needs to know where their lines break, which only\n * they know.\n *\n * @slot - pre-highlighted markup, rendered instead of `code`.\n * @part figure - the frame.\n * @part header - the title, language and copy button.\n * @part title - the title text.\n * @part language - the language tag.\n * @part copy - the copy button.\n * @part pre - the code block.\n * @part line - one numbered line, when line numbers are on.\n * @part line-number - that line's number.\n */\n@Component({\n  tag: 'pf-code-snippet',\n  styleUrl: 'pf-code-snippet.css',\n  shadow: true,\n})\nexport class PfCodeSnippet {\n  @Element() el!: HTMLElement;\n\n  /** The code, as plain text. */\n  @Prop() code = '';\n\n  /** Shown as a tag in the header, and not used for anything else. */\n  @Prop({ reflect: true }) language?: string;\n\n  /** Shown in the header. */\n  @Prop() heading?: string;\n\n  @Prop({ reflect: true }) showLineNumbers = false;\n\n  /** Scrolls past this height, in pixels. */\n  @Prop() maxHeight?: number;\n\n  @Prop() copyLabel = 'Copy';\n\n  @Prop() copiedLabel = 'Copied';\n\n  @Prop() copyFailedLabel = 'Copy failed';\n\n  /**\n   * How long the button keeps saying what the last press did, in\n   * milliseconds.\n   *\n   * A prop rather than a constant because a live region that still holds\n   * \"Copied\" when the next copy happens announces nothing, so how long it\n   * holds is a real decision — and because a test cannot use fake timers\n   * here: `vi.useFakeTimers()` replaces `requestAnimationFrame`, which\n   * Stencil's render queue runs on, and wedges every test after it.\n   */\n  @Prop() feedbackDuration = 1600;\n\n  /** Fires with the text that reached the clipboard. Not fired on a failure. */\n  @Event() pfCopy!: EventEmitter<{ code: string }>;\n\n  /** Fires when the copy could not be made, with the reason shown. */\n  @Event() pfCopyError!: EventEmitter<{ message: string }>;\n\n  @State() copied = false;\n\n  @State() failed = false;\n\n  /** Whether the consumer slotted their own highlighted markup. */\n  @State() hasMarkup = false;\n\n  private resetTimer?: number;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readSlot();\n  }\n\n  disconnectedCallback() {\n    if (this.resetTimer !== undefined) window.clearTimeout(this.resetTimer);\n  }\n\n  /** Copies the snippet, as pressing the button does. */\n  @Method()\n  async copy(): Promise<boolean> {\n    /*\n     * The return value is the whole point. The React component guarded the\n     * write with `if (navigator.clipboard?.writeText)` and then said\n     * \"Copied\" regardless, so in any insecure context it claimed a copy it\n     * had not made.\n     */\n    const ok = await copyText(this.text);\n\n    this.copied = ok;\n    this.failed = !ok;\n\n    if (ok) this.pfCopy.emit({ code: this.text });\n    else this.pfCopyError.emit({ message: this.copyFailedLabel });\n\n    // One timer, restarted rather than stacked.\n    if (this.resetTimer !== undefined) window.clearTimeout(this.resetTimer);\n    this.resetTimer = window.setTimeout(\n      () => {\n        this.copied = false;\n        this.failed = false;\n        this.resetTimer = undefined;\n      },\n      Number(this.feedbackDuration) || 1600,\n    );\n\n    return ok;\n  }\n\n  /** What gets copied: the code, or the slotted markup's own text. */\n  private get text(): string {\n    if (this.code) return this.code;\n    return this.el.textContent?.replace(/^\\n/, '').trimEnd() ?? '';\n  }\n\n  private readSlot() {\n    this.hasMarkup = Array.from(this.el.children).some(\n      (child) => !child.getAttribute('slot') && child.textContent?.trim(),\n    );\n  }\n\n  render() {\n    const lines = splitCodeLines(this.code);\n    const numbered = this.showLineNumbers && !this.hasMarkup;\n    const label = this.failed\n      ? this.copyFailedLabel\n      : this.copied\n        ? this.copiedLabel\n        : this.copyLabel;\n\n    return (\n      <Host>\n        <figure class=\"figure\" part=\"figure\">\n          <figcaption class=\"header\" part=\"header\">\n            <span class=\"meta\">\n              {this.heading && (\n                <span class=\"title\" part=\"title\">\n                  {this.heading}\n                </span>\n              )}\n              {this.language && (\n                <span class=\"language\" part=\"language\">\n                  {this.language}\n                </span>\n              )}\n            </span>\n\n            <button\n              type=\"button\"\n              class=\"copy\"\n              part=\"copy\"\n              aria-describedby=\"status\"\n              onClick={() => this.copy()}\n            >\n              <pf-icon\n                name={this.failed ? 'triangle-exclamation' : this.copied ? 'circle-check' : 'copy'}\n                aria-hidden=\"true\"\n              ></pf-icon>\n              <span>{label}</span>\n            </button>\n          </figcaption>\n\n          <pre\n            class=\"pre\"\n            part=\"pre\"\n            style={this.maxHeight ? { maxHeight: `${this.maxHeight}px`, overflow: 'auto' } : {}}\n          >\n            {/*\n              The slot stays in the tree whichever path is taken: a slot that\n              is not rendered never fires `slotchange`, so markup added later\n              would stay invisible for good.\n            */}\n            <code class={{ markup: true, empty: !this.hasMarkup }}>\n              <slot onSlotchange={() => this.readSlot()} />\n            </code>\n\n            {!this.hasMarkup &&\n              (numbered ? (\n                <code class=\"numbered\">\n                  {lines.map((line, index) => (\n                    <span class=\"line\" part=\"line\">\n                      <span class=\"line-number\" part=\"line-number\" aria-hidden=\"true\">\n                        {index + 1}\n                      </span>\n                      <span class=\"line-content\">{line === '' ? '\\n' : line}</span>\n                    </span>\n                  ))}\n                </code>\n              ) : (\n                <code class=\"plain\">{this.code}</code>\n              ))}\n          </pre>\n\n          {/*\n            The announcement, on a box that is always present: a live region\n            added at the moment it changes is not announced. It is also the\n            button's description, which is what tells a reader using the\n            button what the last press did.\n          */}\n          <span class=\"sr-only\" id=\"status\" aria-live=\"polite\">\n            {this.failed ? this.copyFailedLabel : this.copied ? this.copiedLabel : ''}\n          </span>\n        </figure>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,85 @@
+:host {
+  border: 1px solid var(--pf-collapsible-border);
+  border-radius: var(--radius-md);
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--pf-collapsible-trigger-text);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-2);
+  justify-content: space-between;
+  padding: var(--space-3);
+  text-align: start;
+  width: 100%;
+}
+
+.trigger:hover:not(:disabled) {
+  background: var(--pf-collapsible-trigger-hover-bg);
+}
+
+.trigger:focus-visible {
+  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+.trigger:disabled {
+  color: var(--pf-control-text-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  min-width: 0;
+}
+
+.icon {
+  align-items: center;
+  color: var(--pf-collapsible-icon);
+  display: inline-flex;
+  flex-shrink: 0;
+  transition: transform var(--pf-transition-fast);
+}
+
+:host([open]) .icon {
+  transform: rotate(180deg);
+}
+
+/* The 0fr -> 1fr technique, which animates to the content's own height. */
+.panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--pf-transition-medium);
+}
+
+:host([open]) .panel {
+  grid-template-rows: 1fr;
+}
+
+.content {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.inner {
+  border-top: 1px solid var(--pf-collapsible-border);
+  color: var(--pf-collapsible-content-text);
+  padding: var(--space-3);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .icon,
+  .panel {
+    transition: none;
+  }
+}