@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-code-snippet.cjs.entry.js

@@ -0,0 +1,157 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+//#region src/clipboard.ts
+/**
+* Copying text, and saying honestly whether it worked.
+*
+* In core because it is about the DOM — `navigator.clipboard` — rather than
+* about React, and because both layers have a copy button whose label is a
+* claim about what just happened.
+*/
+/**
+* Copies `text`, resolving to whether it was actually copied.
+*
+* The return value is the whole point. The React `CodeSnippet` wrote
+*
+* ```ts
+* if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(code);
+* setCopied(true);
+* ```
+*
+* — so where the API is missing the condition is simply false, nothing is
+* copied, and the button says "Copied" anyway. The API *is* missing in any
+* insecure context, which is every plain-`http` page and any iframe without
+* clipboard permission, so this was not a theoretical branch.
+*
+* There is deliberately no `document.execCommand('copy')` fallback. It is
+* deprecated, it needs a focused selection to work from, and it fails in most
+* of the same places; telling a person the copy failed, so they can select the
+* text themselves, is better than a second silent path to the same false
+* claim.
+*/
+async function copyText(text) {
+	const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+	if (!clipboard?.writeText) return false;
+	try {
+		await clipboard.writeText(text);
+		return true;
+	} catch {
+		return false;
+	}
+}
+/**
+* A snippet's lines, for a gutter to count.
+*
+* A trailing newline is dropped, because a file that ends in one — nearly
+* every file — would otherwise show a numbered blank line at the end that is
+* not part of the code. Every other blank line is kept: they are the author's.
+*/
+function splitCodeLines(code) {
+	const lines = code.replace(/\r\n/g, "\n").split("\n");
+	if (lines.length > 1 && lines[lines.length - 1] === "") lines.pop();
+	return lines;
+}
+
+const pfCodeSnippetCss = () => `:host{display:block}:host([hidden]){display:none}.figure{background:var(--pf-code-snippet-bg);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}.markup.empty{display:none}.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}.sr-only{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+
+const PfCodeSnippet = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfCopy = index.createEvent(this, "pfCopy");
+        this.pfCopyError = index.createEvent(this, "pfCopyError");
+    }
+    get el() { return index.getElement(this); }
+    /** 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 (index.h(index.Host, { key: 'ce790e02e48648e3f7237ae481cc9be19405dff5' }, index.h("figure", { key: '256bedbf5c296e327a468ca8dcd7eb8a0b222ab5', class: "figure", part: "figure" }, index.h("figcaption", { key: '19348aab69fda332deaa4bcfe960a51bba03628e', class: "header", part: "header" }, index.h("span", { key: 'a205ec4595e3c4bc7a3a0014a4f382ba5b1cd60e', class: "meta" }, this.heading && (index.h("span", { key: '2952765b50ea3f47530f1512f5d3f300a3c7d46c', class: "title", part: "title" }, this.heading)), this.language && (index.h("span", { key: 'dcf391d1cb9cee8dfdaf6225ea9492b0cf5024aa', class: "language", part: "language" }, this.language))), index.h("button", { key: '81de649f6f5110741cea4a4a2c1cc5df2f6c1b94', type: "button", class: "copy", part: "copy", "aria-describedby": "status", onClick: () => this.copy() }, index.h("pf-icon", { key: '2c5a328413fed44f659006170f1b30f436c53e10', name: this.failed ? 'triangle-exclamation' : this.copied ? 'circle-check' : 'copy', "aria-hidden": "true" }), index.h("span", { key: 'b87e57f38c086e97e3a8a9ab9bc24aee878c388a' }, label))), index.h("pre", { key: '31e71cc4836610003941856a5455e6ccf8c086f2', class: "pre", part: "pre", style: this.maxHeight ? { maxHeight: `${this.maxHeight}px`, overflow: 'auto' } : {} }, index.h("code", { key: '6f019f3f6965e2b745ff7447b8c7ce14d76d88ff', class: { markup: true, empty: !this.hasMarkup } }, index.h("slot", { key: 'ad02a6b56fd9e8429b396e6d3a432801e6a24369', onSlotchange: () => this.readSlot() })), !this.hasMarkup &&
+            (numbered ? (index.h("code", { class: "numbered" }, lines.map((line, index$1) => (index.h("span", { class: "line", part: "line" }, index.h("span", { class: "line-number", part: "line-number", "aria-hidden": "true" }, index$1 + 1), index.h("span", { class: "line-content" }, line === '' ? '\n' : line)))))) : (index.h("code", { class: "plain" }, this.code)))), index.h("span", { key: '3b0d4abef444eeb902bebe28c97ac1db7c097b24', class: "sr-only", id: "status", "aria-live": "polite" }, this.failed ? this.copyFailedLabel : this.copied ? this.copiedLabel : ''))));
+    }
+};
+PfCodeSnippet.style = pfCodeSnippetCss();
+
+exports.pf_code_snippet = PfCodeSnippet;
+//# sourceMappingURL=pf-code-snippet.entry.cjs.js.map
+
+//# sourceMappingURL=pf-code-snippet.cjs.entry.js.map

package/dist/cjs/pf-code-snippet.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-code-snippet.cjs.entry.js","mappings":"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","names":["h","Host","index"],"sources":["../core/dist/clipboard.js","src/components/pf-code-snippet/pf-code-snippet.css?tag=pf-code-snippet&encapsulation=shadow","src/components/pf-code-snippet/pf-code-snippet.tsx"],"sourcesContent":["//#region src/clipboard.ts\n/**\n* Copying text, and saying honestly whether it worked.\n*\n* In core because it is about the DOM — `navigator.clipboard` — rather than\n* about React, and because both layers have a copy button whose label is a\n* claim about what just happened.\n*/\n/**\n* Copies `text`, resolving to whether it was actually copied.\n*\n* The return value is the whole point. The React `CodeSnippet` wrote\n*\n* ```ts\n* if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(code);\n* setCopied(true);\n* ```\n*\n* — so where the API is missing the condition is simply false, nothing is\n* copied, and the button says \"Copied\" anyway. The API *is* missing in any\n* insecure context, which is every plain-`http` page and any iframe without\n* clipboard permission, so this was not a theoretical branch.\n*\n* There is deliberately no `document.execCommand('copy')` fallback. It is\n* deprecated, it needs a focused selection to work from, and it fails in most\n* of the same places; telling a person the copy failed, so they can select the\n* text themselves, is better than a second silent path to the same false\n* claim.\n*/\nasync function copyText(text) {\n\tconst clipboard = typeof navigator === \"undefined\" ? void 0 : navigator.clipboard;\n\tif (!clipboard?.writeText) return false;\n\ttry {\n\t\tawait clipboard.writeText(text);\n\t\treturn true;\n\t} catch {\n\t\treturn false;\n\t}\n}\n/**\n* A snippet's lines, for a gutter to count.\n*\n* A trailing newline is dropped, because a file that ends in one — nearly\n* every file — would otherwise show a numbered blank line at the end that is\n* not part of the code. Every other blank line is kept: they are the author's.\n*/\nfunction splitCodeLines(code) {\n\tconst lines = code.replace(/\\r\\n/g, \"\\n\").split(\"\\n\");\n\tif (lines.length > 1 && lines[lines.length - 1] === \"\") lines.pop();\n\treturn lines;\n}\n//#endregion\nexport { copyText, splitCodeLines };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.figure {\n  background: var(--pf-code-snippet-bg);\n  /*\n   * Derived borders and header stay as fallback mixes rather than theme.css\n   * aliases, so a scoped `--pf-code-snippet-bg` override re-tints them — the\n   * same arrangement the React stylesheet uses, and the reason the two look\n   * identical under a custom background.\n   */\n  border: 1px solid\n    var(\n      --pf-code-snippet-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 82%, var(--pf-mix-base))\n    );\n  border-radius: var(--radius-md);\n  color: var(--pf-code-snippet-text);\n  display: grid;\n  margin: 0;\n  overflow: hidden;\n}\n\n.header {\n  align-items: center;\n  background: var(\n    --pf-code-snippet-header-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 78%, var(--pf-mix-base))\n  );\n  border-bottom: 1px solid\n    var(\n      --pf-code-snippet-header-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 65%, var(--pf-mix-base))\n    );\n  display: flex;\n  gap: var(--space-3);\n  justify-content: space-between;\n  min-height: 40px;\n  padding: 0 var(--space-3);\n}\n\n.meta {\n  align-items: baseline;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n.title {\n  color: var(--pf-code-snippet-title);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n}\n\n.language {\n  color: var(--pf-code-snippet-language);\n  font-size: var(--font-size-xs);\n  text-transform: uppercase;\n}\n\n.copy {\n  align-items: center;\n  background: var(\n    --pf-code-snippet-copy-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 70%, var(--pf-mix-base))\n  );\n  border: 1px solid\n    var(\n      --pf-code-snippet-copy-border,\n      color-mix(in srgb, var(--pf-code-snippet-bg) 55%, var(--pf-mix-base))\n    );\n  border-radius: var(--radius-sm);\n  color: var(--pf-code-snippet-copy-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--font-size-xs);\n  gap: var(--space-1);\n  padding: var(--space-1) var(--space-2);\n}\n\n.copy:hover {\n  background: var(\n    --pf-code-snippet-copy-hover-bg,\n    color-mix(in srgb, var(--pf-code-snippet-bg) 58%, var(--pf-mix-base))\n  );\n}\n\n.copy:focus-visible {\n  box-shadow: var(--pf-code-snippet-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.pre {\n  font-family: var(--pf-code-font-family);\n  font-size: var(--font-size-xs);\n  line-height: 1.65;\n  margin: 0;\n  overflow: auto;\n  padding: var(--space-3);\n}\n\n.plain,\n.markup {\n  font: inherit;\n}\n\n/*\n * Two classes deep, because the ties break on source order and a bare\n * `.empty` would lose to whatever `display` a later rule gives the box. The\n * slot itself stays rendered inside it either way, or markup added later\n * would never fire `slotchange`.\n */\n.markup.empty {\n  display: none;\n}\n\n/*\n * A grid, not a table: the numbers only have to line up in a column, and a\n * row here has no box of its own to need. `white-space: pre` on the content\n * is what keeps the author's indentation.\n */\n.numbered {\n  display: grid;\n  font: inherit;\n  grid-template-columns: auto 1fr;\n}\n\n.line {\n  display: grid;\n  grid-column: 1 / -1;\n  grid-template-columns: subgrid;\n}\n\n.line-number {\n  color: var(--pf-code-snippet-line-number);\n  padding-inline-end: var(--space-3);\n  text-align: end;\n  user-select: none;\n}\n\n.line-content {\n  white-space: pre;\n}\n\n/*\n * Each element needs its own copy: `.pf-sr-only` is declared once in the\n * React library's global sheet and does not cross a shadow boundary.\n */\n.sr-only {\n  border: 0;\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","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"],"version":3}

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var keys = require('./keys-S3YTuCcn.js');
+
+const pfCollapsibleCss = () => `: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)}.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}}`;
+
+const PfCollapsible = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+    }
+    /** Whether the content is showing. Reflected so the stylesheet selects on it. */
+    open = false;
+    /** Reflected, so the stylesheet can mark the header. */
+    disabled = false;
+    /** Show the rotating chevron. Defaults to true. */
+    showChevron = true;
+    /** Fires whenever the content opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** Opens the content. */
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    /** Closes the content. */
+    async hide() {
+        this.open = false;
+    }
+    /**
+     * The one place the change is announced, whatever caused it: the header, a
+     * method, or a consumer writing the prop. Announcing it from the click
+     * handler instead would miss the other two — the same mistake `pf-popover`
+     * and `pf-modal` both made from their DOM-event handlers.
+     *
+     * A consumer mirroring the value back sets `open` to what it already is,
+     * which Stencil does not treat as a change, so there is no loop.
+     */
+    handleOpenChange(next, previous) {
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    onClick = () => {
+        if (this.disabled)
+            return;
+        this.open = !this.open;
+    };
+    /**
+     * Escape closes it from the header, which is what the React component does.
+     * Only from the header: Escape inside the content belongs to whatever is in
+     * there — a dialog, or a field clearing itself.
+     */
+    handleKeyDown(event) {
+        if (event.key !== keys.Keys.Escape || !this.open)
+            return;
+        if (event.composedPath()[0] !== this.trigger)
+            return;
+        event.preventDefault();
+        this.open = false;
+    }
+    trigger;
+    render() {
+        return (index.h(index.Host, { key: '77ee32aa721e31b94607d5b0043e31a0127ab4cf' }, index.h("button", { key: 'daeb5f647e0ca576fe362a3e6338ce0ac8a353c1', type: "button", id: "trigger", class: "trigger", part: "trigger", ref: (el) => (this.trigger = el), disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", onClick: this.onClick }, index.h("span", { key: 'e0d551ab30b4236451093ee3c9a8e167450c940f', class: "label", part: "label" }, index.h("slot", { key: 'd315563377bef41f59bc236d341be6931a590a36', name: "trigger" })), this.showChevron && (index.h("span", { key: 'efb107225ace280b4fcf44ffef86d63455297364', class: "icon", part: "icon", "aria-hidden": "true" }, index.h("pf-icon", { key: '2f1aad62fd01624b3ef5dba75fc1114af6ac2fa2', name: "chevron-down" })))), index.h("div", { key: 'f2e53680c1073b0d423bd3400376af3fa65773d2', class: "panel", part: "panel" }, index.h("div", { key: '1290a6058f2cf2063b77bb564dca6889f2367a33', class: "content", part: "content", id: "panel", role: "region", "aria-labelledby": "trigger", inert: !this.open }, index.h("div", { key: 'b8634f3e2cf28dec7a1dcea45c983894e4cca130', class: "inner", part: "inner" }, index.h("slot", { key: '2745c65d5c2a8ed9c1863e1db4f40933a3fab5a2' }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+PfCollapsible.style = pfCollapsibleCss();
+
+exports.pf_collapsible = PfCollapsible;
+//# sourceMappingURL=pf-collapsible.entry.cjs.js.map
+
+//# sourceMappingURL=pf-collapsible.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-collapsible.cjs.entry.js","mappings":"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","names":["Keys","h","Host"],"sources":["src/components/pf-collapsible/pf-collapsible.css?tag=pf-collapsible&encapsulation=shadow","src/components/pf-collapsible/pf-collapsible.tsx"],"sourcesContent":[":host {\n  border: 1px solid var(--pf-collapsible-border);\n  border-radius: var(--radius-md);\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.trigger {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-md);\n  color: var(--pf-collapsible-trigger-text);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  font-weight: var(--font-weight-medium);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n  background: var(--pf-collapsible-trigger-hover-bg);\n}\n\n.trigger:focus-visible {\n  box-shadow: var(--pf-collapsible-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.trigger:disabled {\n  color: var(--pf-control-text-disabled);\n  cursor: not-allowed;\n}\n\n.label {\n  min-width: 0;\n}\n\n.icon {\n  align-items: center;\n  color: var(--pf-collapsible-icon);\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .icon {\n  transform: rotate(180deg);\n}\n\n/* The 0fr -> 1fr technique, which animates to the content's own height. */\n.panel {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--pf-transition-medium);\n}\n\n:host([open]) .panel {\n  grid-template-rows: 1fr;\n}\n\n.content {\n  min-height: 0;\n  overflow: hidden;\n}\n\n.inner {\n  border-top: 1px solid var(--pf-collapsible-border);\n  color: var(--pf-collapsible-content-text);\n  padding: var(--space-3);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .icon,\n  .panel {\n    transition: none;\n  }\n}\n","import { Keys } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * One disclosure: a header that shows and hides the content below it.\n *\n * The same panel mechanics as `pf-accordion-item` — a `0fr` → `1fr` grid row\n * so the height animates to the content's own, and `inert` on the closed panel\n * because that height still holds focusable content — but no group above it,\n * so this element owns `open` itself.\n *\n * Both IDREFs stay inside this one shadow root, which is where an IDREF\n * resolves: the header names the panel with `aria-controls` and the panel\n * names the header back with `aria-labelledby`.\n *\n * @slot trigger - the header's label.\n * @slot - the content.\n * @part trigger - the header button.\n * @part label - the label's box inside the header.\n * @part icon - the chevron.\n * @part panel - the animating box around the content.\n * @part content - the region holding the content.\n */\n@Component({\n  tag: 'pf-collapsible',\n  styleUrl: 'pf-collapsible.css',\n  shadow: true,\n})\nexport class PfCollapsible {\n  /** Whether the content is showing. Reflected so the stylesheet selects on it. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Reflected, so the stylesheet can mark the header. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Show the rotating chevron. Defaults to true. */\n  @Prop() showChevron = true;\n\n  /** Fires whenever the content opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** Opens the content. */\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  /** Closes the content. */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * The one place the change is announced, whatever caused it: the header, a\n   * method, or a consumer writing the prop. Announcing it from the click\n   * handler instead would miss the other two — the same mistake `pf-popover`\n   * and `pf-modal` both made from their DOM-event handlers.\n   *\n   * A consumer mirroring the value back sets `open` to what it already is,\n   * which Stencil does not treat as a change, so there is no loop.\n   */\n  @Watch('open')\n  handleOpenChange(next: boolean, previous: boolean) {\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  private onClick = () => {\n    if (this.disabled) return;\n    this.open = !this.open;\n  };\n\n  /**\n   * Escape closes it from the header, which is what the React component does.\n   * Only from the header: Escape inside the content belongs to whatever is in\n   * there — a dialog, or a field clearing itself.\n   */\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== Keys.Escape || !this.open) return;\n    if (event.composedPath()[0] !== this.trigger) return;\n\n    event.preventDefault();\n    this.open = false;\n  }\n\n  private trigger?: HTMLButtonElement;\n\n  render() {\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          id=\"trigger\"\n          class=\"trigger\"\n          part=\"trigger\"\n          ref={(el) => (this.trigger = el)}\n          disabled={this.disabled}\n          aria-expanded={this.open ? 'true' : 'false'}\n          aria-controls=\"panel\"\n          onClick={this.onClick}\n        >\n          <span class=\"label\" part=\"label\">\n            <slot name=\"trigger\" />\n          </span>\n          {this.showChevron && (\n            <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          )}\n        </button>\n\n        <div class=\"panel\" part=\"panel\">\n          {/*\n            `inert` as well as the collapsed height: a panel animating to zero\n            still holds focusable content, so without it the next Tab from the\n            header lands inside the box that just closed.\n          */}\n          <div\n            class=\"content\"\n            part=\"content\"\n            id=\"panel\"\n            role=\"region\"\n            aria-labelledby=\"trigger\"\n            inert={!this.open}\n          >\n            <div class=\"inner\" part=\"inner\">\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,340 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var aria = require('./aria-5oCPUGFo.js');
+var command = require('./command-Du9CowoS.js');
+var keys = require('./keys-S3YTuCcn.js');
+var navigation = require('./navigation-CZce-g58.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.js');
+
+const pfComboboxCss = () => `:host{display:block;--pf-option-text:var(--pf-combobox-text);--pf-option-text-disabled:var(--pf-combobox-placeholder);--pf-option-active-bg:var(--pf-combobox-option-active-bg);--pf-option-active-text:var(--pf-combobox-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-combobox-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-combobox-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-combobox-bg);border:1px solid var(--pf-combobox-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding-inline-end:var(--space-2)}.control:focus-within{border-color:var(--pf-combobox-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-combobox-invalid-border)}.input{background:none;border:0;color:var(--pf-combobox-text);flex:1;font-family:inherit;font-size:var(--font-size-sm);min-width:0;outline:none;padding:var(--space-2) var(--space-3)}.input::placeholder{color:var(--pf-combobox-placeholder)}.input:disabled{cursor:not-allowed;opacity:0.6}.clear,.chevron{align-items:center;color:var(--pf-combobox-placeholder);display:inline-flex;flex-shrink:0;justify-content:center}.clear{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-1)}.clear:hover{color:var(--pf-combobox-text)}.chevron{transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-combobox-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-combobox-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-combobox-menu-bg);border:1px solid var(--pf-combobox-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 320px);overflow-y:auto;padding:var(--space-1)}.listbox:popover-open{animation:pf-combobox-in var(--pf-transition-enter)}@keyframes pf-combobox-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}.empty{color:var(--pf-combobox-placeholder);font-size:var(--font-size-sm);margin:0;padding:var(--space-3);text-align:center}`;
+
+const MOVES = {
+    [keys.Keys.ArrowDown]: 'next',
+    [keys.Keys.ArrowUp]: 'previous',
+    [keys.Keys.Home]: 'first',
+    [keys.Keys.End]: 'last',
+};
+const PfCombobox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfOpenChange = index.createEvent(this, "pfOpenChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return index.getElement(this); }
+    internals;
+    /** Submitted under this name. Reflected; the submission reads the attribute. */
+    name;
+    /** The chosen option's value, or empty. */
+    value = '';
+    /** Whether the listbox is showing. Reflected for the stylesheet. */
+    open = false;
+    label;
+    description;
+    error;
+    placeholder = 'Search…';
+    /** Shown when the query matches nothing. */
+    emptyMessage = 'No matches';
+    required = false;
+    disabled = false;
+    /** Offer a button that empties the field. */
+    clearable = true;
+    /** Accessible name for that button. */
+    clearLabel = 'Clear';
+    /** Fires when the chosen value changes. */
+    pfChange;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** What the field holds, which is not the value until an option is chosen. */
+    query = '';
+    matchCount = 0;
+    initialValue = '';
+    stopObserving;
+    activeOption = null;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+        this.query = this.selectedLabel();
+        this.applyQuery();
+    }
+    componentDidRender() {
+        this.syncActiveDescendant();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        formValidity.applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /** A value set from outside puts its label in the field and marks the option. */
+    syncSelection() {
+        for (const option of this.options()) {
+            option.selected =
+                this.optionValue(option) === this.value && this.value !== '';
+        }
+        this.query = this.selectedLabel();
+        this.applyQuery();
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showListbox();
+        else
+            this.hideListbox();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.query = this.selectedLabel();
+        this.applyQuery();
+    }
+    /** Re-reads the options, for a label edited in place (no `slotchange` fires). */
+    async refresh() {
+        this.syncSelection();
+    }
+    onSlotChange = () => {
+        this.syncSelection();
+    };
+    options() {
+        return Array.from(this.el.querySelectorAll('pf-option'));
+    }
+    visible() {
+        return this.options().filter((option) => !option.hasAttribute('hidden'));
+    }
+    /** The property, never the attribute: a binding may only have set the former. */
+    optionValue(option) {
+        return option.value ?? option.getAttribute('value') ?? '';
+    }
+    selectedLabel() {
+        const chosen = this.options().find((option) => this.optionValue(option) === this.value);
+        return this.value && chosen ? (chosen.textContent?.trim() ?? '') : '';
+    }
+    get listbox() {
+        return this.el.shadowRoot?.querySelector('[part="listbox"]') ?? null;
+    }
+    get input() {
+        return this.el.shadowRoot?.querySelector('[part="input"]') ?? null;
+    }
+    get control() {
+        return this.el.shadowRoot?.querySelector('[part="control"]') ?? null;
+    }
+    /**
+     * Hides the options the query excludes.
+     *
+     * `hidden` plus `:host([hidden]) { display: none }` on the option, because
+     * the attribute alone loses to the option's own `display: block`.
+     */
+    applyQuery() {
+        const echoed = command.queryIsEchoedSelection(this.query, this.selectedLabel());
+        const options = this.options();
+        for (const option of options) {
+            const matches = echoed || command.matchesCommandQuery({ label: option.textContent?.trim() ?? '' }, this.query);
+            if (matches)
+                option.removeAttribute('hidden');
+            else
+                option.setAttribute('hidden', '');
+        }
+        const visible = this.visible();
+        this.matchCount = visible.length;
+        // A new query starts at the top of what is left.
+        const first = visible.find((option) => !option.hasAttribute('disabled')) ?? null;
+        if (!this.activeOption || this.activeOption.hasAttribute('hidden'))
+            this.setActive(first);
+    }
+    showListbox() {
+        const panel = this.listbox;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = placePopover.observeAnchoredPosition({
+            getAnchor: () => this.control,
+            getFloating: () => panel,
+            matchAnchorWidth: true,
+            flip: true,
+            onChange: ({ left, top, width, minWidth }) => {
+                placePopover.placePopover(panel, left, top);
+                if (width !== undefined)
+                    panel.style.width = `${width}px`;
+                if (minWidth !== undefined)
+                    panel.style.minWidth = `${minWidth}px`;
+            },
+        });
+        this.applyQuery();
+    }
+    hideListbox() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        const panel = this.listbox;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    /**
+     * A browser-driven close — light dismiss or Escape — reverts the field to
+     * the chosen label, so a half-typed query never lingers over a different
+     * value. Focus goes back to the input rather than the trigger, because here
+     * the input *is* the control.
+     */
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen) {
+            this.query = this.selectedLabel();
+            this.applyQuery();
+            this.input?.focus();
+        }
+    };
+    setActive(option) {
+        for (const other of this.options()) {
+            if (other !== option)
+                other.active = false;
+        }
+        if (option)
+            option.active = true;
+        this.activeOption = option;
+        this.syncActiveDescendant();
+        if (option && typeof option.scrollIntoView === 'function') {
+            option.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /**
+     * Set as an element, not an IDREF: the input is in this shadow root and the
+     * options are slotted light DOM, and a cross-root IDREF is absent from the
+     * accessibility tree — measured. Feature-detected, because where element
+     * reflection is missing there is no cross-root equivalent.
+     */
+    syncActiveDescendant() {
+        const input = this.input;
+        if (!input || !('ariaActiveDescendantElement' in input))
+            return;
+        input.ariaActiveDescendantElement = this.open ? this.activeOption : null;
+    }
+    commit(option) {
+        if (option.hasAttribute('disabled'))
+            return;
+        const next = this.optionValue(option);
+        this.open = false;
+        if (next !== this.value) {
+            this.value = next;
+            this.pfChange.emit({ value: next });
+        }
+        // Set after the value, so it is the chosen label rather than the query.
+        this.query = this.selectedLabel();
+        this.applyQuery();
+        this.input?.focus();
+    }
+    handleOptionSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const option = this.options().find((candidate) => this.optionValue(candidate) === event.detail.value);
+        if (option)
+            this.commit(option);
+    }
+    move(action) {
+        const visible = this.visible();
+        const enabledIndexes = navigation.getEnabledIndexes(visible, (option) => option.hasAttribute('disabled'));
+        const current = this.activeOption ? visible.indexOf(this.activeOption) : -1;
+        const next = navigation.resolveListMove(action, enabledIndexes, current);
+        if (next !== -1)
+            this.setActive(visible[next] ?? null);
+    }
+    onInput = (event) => {
+        this.query = event.target.value;
+        this.applyQuery();
+        if (!this.open)
+            this.open = true;
+    };
+    clear = () => {
+        this.query = '';
+        if (this.value !== '') {
+            this.value = '';
+            this.pfChange.emit({ value: '' });
+        }
+        this.applyQuery();
+        this.open = true;
+        this.input?.focus();
+    };
+    onKeyDown = (event) => {
+        if (this.disabled)
+            return;
+        const move = MOVES[event.key];
+        if (move) {
+            event.preventDefault();
+            if (!this.open)
+                this.open = true;
+            else
+                this.move(move);
+            return;
+        }
+        /*
+         * Enter only commits while the listbox is open. Closed, it is left alone
+         * so a combobox inside a form still submits it.
+         */
+        if (event.key === keys.Keys.Enter && this.open && this.activeOption) {
+            event.preventDefault();
+            this.commit(this.activeOption);
+        }
+        // Escape is the browser's: `popover="auto"` closes, and `onToggle` reverts.
+    };
+    render() {
+        const describedBy = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        const showClear = this.clearable && !this.disabled && (this.query !== '' || this.value !== '');
+        return (index.h(index.Host, { key: '4a948db9316e8174c9c7592afb9912deb59eecdd' }, index.h("div", { key: 'ac5e469f9c00ec843fdb7a485cb3cbe9ddc08573', class: "field", part: "field" }, this.label && (index.h("label", { key: 'eb610c213cfe510c229f5ffa81e9761bf7303476', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (index.h("span", { key: 'd942137e81be6007aafe2e1dfc43e97e2ab8af59', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: 'b9f4806e7882e5dc2c64abe87f48bb925173d7dc', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, index.h("input", { key: '9a10cc81ff212f3e279cfcc311886756d7ca76f1', id: "input", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "text", role: "combobox", autocomplete: "off", disabled: this.disabled, required: this.required, placeholder: this.placeholder, value: this.query, "aria-autocomplete": "list", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "listbox", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onKeyDown: this.onKeyDown, onClick: () => {
+                if (!this.disabled)
+                    this.open = true;
+            } }), showClear && (index.h("button", { key: 'bc9f8df667df57cbede3aa00a4119f6591faeb7d', class: "clear", part: "clear", type: "button", "aria-label": this.clearLabel,
+            /* Out of the tab order, so it never interrupts the keyboard flow. */
+            tabindex: -1, onMouseDown: (event) => event.preventDefault(), onClick: this.clear }, index.h("pf-icon", { key: '580dab29c2631f79b7a611f7dd95a81fc5cffda2', name: "circle-xmark" }))), index.h("span", { key: '06d06d1fcbae5937632cf2451ab97d42d1410c91', class: "chevron", "aria-hidden": "true" }, index.h("pf-icon", { key: 'd30dd0a5d008cec99c1ec8fd25acc7fdfbdd68db', name: "chevron-down" }))), this.description && (index.h("p", { key: '09873008049536bb2eab61825ae95a2d92e3952a', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: 'ee43b1e024ff0e6e052054278680e04651b55421', class: "error", part: "error", id: "error" }, this.error))), index.h("div", { key: '5b221c6566bc6dd29dc3a5d9ee5268ec65fa296e', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-label": this.label ?? this.placeholder, onToggle: this.onToggle }, index.h("slot", { key: '645c56c8dd776ddd013be68c2bfc544f35c05b35', onSlotchange: this.onSlotChange }), this.matchCount === 0 && (index.h("p", { key: '9a3aac572c41177b41be06f9986d0718756c7de3', class: "empty", part: "empty" }, this.emptyMessage)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }, {
+                "syncSelection": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfCombobox.style = pfComboboxCss();
+
+exports.pf_combobox = PfCombobox;
+//# sourceMappingURL=pf-combobox.entry.cjs.js.map
+
+//# sourceMappingURL=pf-combobox.cjs.entry.js.map