@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-resizable.entry.js

@@ -0,0 +1,203 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { c as clampNumber } from './number-field-DSXauhXX.js';
+
+//#region src/splitter.ts
+/**
+* The arithmetic behind a two-panel splitter: what a pointer position means
+* as a percentage, what a key does to it, and what it is clamped into.
+*
+* Shared because every part of it is visible to a consumer, and because a
+* splitter's keys depend on its orientation — a React `Resizable` and a
+* `<pf-resizable>` that disagreed about which arrow grows the first panel
+* would be two controls wearing one name.
+*/
+/**
+* Keeps a size inside min..max, in percent.
+*
+* A size that is not a finite number becomes an even split *of the bounds*
+* rather than `NaN`. It matters because `NaN` survives arithmetic silently and
+* then reaches the DOM as `flex-basis: NaN%`, an invalid declaration that
+* collapses the panel — the same failure mode as an undefined custom property,
+* and just as hard to read back from the result.
+*/
+function clampSplitSize(size, { min = 0, max = 100 } = {}) {
+	if (!Number.isFinite(size)) return clampNumber((min + max) / 2, min, max);
+	return clampNumber(size, min, max);
+}
+/**
+* Where a pointer sits along a container, as the first panel's share.
+*
+* `null` when the container has no length, which is not a hypothetical: a
+* splitter inside a closed disclosure, or one dragged before its first
+* layout, measures zero, and dividing by it gives `Infinity` — or `NaN` when
+* the pointer is at the container's own edge. The caller keeps the size it
+* had instead.
+*/
+function splitSizeFromPointer(position, start, length, bounds = {}) {
+	if (!(length > 0)) return null;
+	return clampSplitSize(Math.round((position - start) / length * 100), bounds);
+}
+/**
+* What a key does to the size, or `null` for a key the splitter does not
+* handle — which is also the signal not to call `preventDefault`.
+*
+* Which arrows apply follows the orientation: side-by-side panels are grown
+* and shrunk with Left and Right, stacked ones with Up and Down. The other
+* pair is deliberately not handled, so Up and Down still scroll a page with a
+* horizontal splitter focused. Home and End jump to the bounds, which is the
+* only way to collapse a panel in one press.
+*/
+function resolveSplitterKey(key, state) {
+	const { orientation, size, step = 2, min = 0, max = 100 } = state;
+	const current = clampSplitSize(size, {
+		min,
+		max
+	});
+	const decrease = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+	const increase = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+	if (key === decrease) return clampSplitSize(current - step, {
+		min,
+		max
+	});
+	if (key === increase) return clampSplitSize(current + step, {
+		min,
+		max
+	});
+	if (key === "Home") return clampSplitSize(min, {
+		min,
+		max
+	});
+	if (key === "End") return clampSplitSize(max, {
+		min,
+		max
+	});
+	return null;
+}
+
+const pfResizableCss = () => `:host{display:flex;overflow:hidden;width:100%}:host([hidden]){display:none}:host([orientation='horizontal']){flex-direction:row}:host([orientation='vertical']){flex-direction:column}.panel{flex-grow:0;flex-shrink:0;min-height:0;min-width:0;overflow:auto}.end{flex:1 1 0}.handle{align-items:center;background:var(--pf-resizable-handle-bg);display:flex;flex-shrink:0;justify-content:center;position:relative;touch-action:none;transition:background var(--pf-transition-fast)}.handle:hover,.handle:focus-visible{background:var(--pf-resizable-handle-active-bg)}.handle:focus-visible{box-shadow:var(--pf-resizable-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='horizontal']) .handle{cursor:col-resize;width:var(--pf-resizable-handle-size, 6px)}:host([orientation='vertical']) .handle{cursor:row-resize;height:var(--pf-resizable-handle-size, 6px)}.grip{background:var(--pf-resizable-grip);border-radius:var(--radius-full)}:host([orientation='horizontal']) .grip{height:24px;width:2px}:host([orientation='vertical']) .grip{height:2px;width:24px}@media (prefers-reduced-motion: reduce){.handle{transition:none}}`;
+
+const PfResizable = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+    }
+    get el() { return getElement(this); }
+    /**
+     * `horizontal` puts the panels side by side and drags left and right;
+     * `vertical` stacks them. Reflected, because the stylesheet selects on it.
+     */
+    orientation = 'horizontal';
+    /** The first panel's share, in percent. */
+    size = 50;
+    /** The first panel's smallest share, in percent. */
+    min = 10;
+    /** Its largest. */
+    max = 90;
+    /** How far one key press moves it, in percent. */
+    step = 2;
+    /** The separator's accessible name. */
+    handleLabel = 'Resize panels';
+    /** Fires when the split changes, by pointer or by key. */
+    pfChange;
+    dragging = false;
+    handleBoundsChange() {
+        // A consumer narrowing the bounds must not leave the panel outside them.
+        const next = this.resolved;
+        if (next !== this.size)
+            this.size = next;
+    }
+    /**
+     * The size actually in force. The consumer's `size` is left as they set it,
+     * so narrowing the bounds and widening them again restores what they asked
+     * for rather than what it was clamped to.
+     */
+    get resolved() {
+        return clampSplitSize(Number(this.size), { min: this.min, max: this.max });
+    }
+    get bounds() {
+        return { min: this.min, max: this.max };
+    }
+    /**
+     * A pointer release anywhere ends the drag.
+     *
+     * On the host rather than the handle, and `pointercancel` as well as
+     * `pointerup`: a drag interrupted by the browser — a touch turning into a
+     * scroll gesture, a window losing focus mid-drag — fires only `pointercancel`,
+     * and without it the splitter stays in a dragging state and follows the
+     * pointer around with no button held.
+     */
+    handlePointerEnd(event) {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        const handle = this.handle;
+        if (handle?.hasPointerCapture(event.pointerId))
+            handle.releasePointerCapture(event.pointerId);
+    }
+    get handle() {
+        return this.el.shadowRoot?.querySelector('.handle') ?? null;
+    }
+    onPointerDown = (event) => {
+        event.preventDefault();
+        this.dragging = true;
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        // The separator is the control, so a drag has to focus it.
+        handle.focus();
+    };
+    onPointerMove = (event) => {
+        if (!this.dragging)
+            return;
+        const rect = this.el.getBoundingClientRect();
+        /*
+         * `null` when the host has no length, which is not hypothetical: a
+         * splitter inside a collapsed box measures zero and dividing by it gives
+         * Infinity. The size it already had stands.
+         */
+        const next = this.orientation === 'horizontal'
+            ? splitSizeFromPointer(event.clientX, rect.left, rect.width, this.bounds)
+            : splitSizeFromPointer(event.clientY, rect.top, rect.height, this.bounds);
+        if (next !== null)
+            this.commit(next);
+    };
+    onKeyDown = (event) => {
+        const next = resolveSplitterKey(event.key, {
+            orientation: this.orientation,
+            size: this.resolved,
+            min: this.min,
+            max: this.max,
+            step: Number(this.step),
+        });
+        // Nothing is prevented for a key the splitter does not handle, so Up and
+        // Down still scroll a page with a horizontal splitter focused.
+        if (next === null)
+            return;
+        event.preventDefault();
+        this.commit(next);
+    };
+    commit(next) {
+        if (next === this.resolved)
+            return;
+        this.size = next;
+        this.pfChange.emit({ size: next });
+    }
+    render() {
+        const size = this.resolved;
+        const horizontal = this.orientation === 'horizontal';
+        return (h(Host, { key: '2ac1ef130571d8eea4d6443bdf154c30190c7f68' }, h("div", { key: 'acce0a5eac7e80d55f29094d349615e741544b9a', class: "panel start", part: "start", style: { flexBasis: `${size}%` } }, h("slot", { key: 'da6b586f6501216f9496172c359418b27bbe2dda', name: "start" })), h("div", { key: '0d36376c8f1916c6d302216d88a49399b2f1e983', class: "handle", part: "handle", role: "separator", tabindex: "0", "aria-label": this.handleLabel, "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-valuenow": String(size), "aria-valuemin": String(this.min), "aria-valuemax": String(this.max), onPointerDown: this.onPointerDown, onPointerMove: this.onPointerMove, onKeyDown: this.onKeyDown }, h("span", { key: '5d90a73260ad56738b9d697faa86e1eb5cd6bda2', class: "grip", part: "grip", "aria-hidden": "true" })), h("div", { key: '758514a9446b4f9be4164334c56c98cff4492d79', class: "panel end", part: "end" }, h("slot", { key: '8361324119a9ab7b732128d9680125b99a13c6be', name: "end" }))));
+    }
+    static get watchers() { return {
+        "min": [{
+                "handleBoundsChange": 0
+            }],
+        "max": [{
+                "handleBoundsChange": 0
+            }]
+    }; }
+};
+PfResizable.style = pfResizableCss();
+
+export { PfResizable as pf_resizable };
+//# sourceMappingURL=pf-resizable.entry.js.map
+
+//# sourceMappingURL=pf-resizable.entry.js.map

package/dist/esm/pf-resizable.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-resizable.entry.js","sources":["../core/dist/splitter.js","src/components/pf-resizable/pf-resizable.css?tag=pf-resizable&encapsulation=shadow","src/components/pf-resizable/pf-resizable.tsx"],"sourcesContent":["import { clampNumber } from \"./number-field.js\";\n//#region src/splitter.ts\n/**\n* The arithmetic behind a two-panel splitter: what a pointer position means\n* as a percentage, what a key does to it, and what it is clamped into.\n*\n* Shared because every part of it is visible to a consumer, and because a\n* splitter's keys depend on its orientation — a React `Resizable` and a\n* `<pf-resizable>` that disagreed about which arrow grows the first panel\n* would be two controls wearing one name.\n*/\n/**\n* Keeps a size inside min..max, in percent.\n*\n* A size that is not a finite number becomes an even split *of the bounds*\n* rather than `NaN`. It matters because `NaN` survives arithmetic silently and\n* then reaches the DOM as `flex-basis: NaN%`, an invalid declaration that\n* collapses the panel — the same failure mode as an undefined custom property,\n* and just as hard to read back from the result.\n*/\nfunction clampSplitSize(size, { min = 0, max = 100 } = {}) {\n\tif (!Number.isFinite(size)) return clampNumber((min + max) / 2, min, max);\n\treturn clampNumber(size, min, max);\n}\n/**\n* Where a pointer sits along a container, as the first panel's share.\n*\n* `null` when the container has no length, which is not a hypothetical: a\n* splitter inside a closed disclosure, or one dragged before its first\n* layout, measures zero, and dividing by it gives `Infinity` — or `NaN` when\n* the pointer is at the container's own edge. The caller keeps the size it\n* had instead.\n*/\nfunction splitSizeFromPointer(position, start, length, bounds = {}) {\n\tif (!(length > 0)) return null;\n\treturn clampSplitSize(Math.round((position - start) / length * 100), bounds);\n}\n/**\n* What a key does to the size, or `null` for a key the splitter does not\n* handle — which is also the signal not to call `preventDefault`.\n*\n* Which arrows apply follows the orientation: side-by-side panels are grown\n* and shrunk with Left and Right, stacked ones with Up and Down. The other\n* pair is deliberately not handled, so Up and Down still scroll a page with a\n* horizontal splitter focused. Home and End jump to the bounds, which is the\n* only way to collapse a panel in one press.\n*/\nfunction resolveSplitterKey(key, state) {\n\tconst { orientation, size, step = 2, min = 0, max = 100 } = state;\n\tconst current = clampSplitSize(size, {\n\t\tmin,\n\t\tmax\n\t});\n\tconst decrease = orientation === \"horizontal\" ? \"ArrowLeft\" : \"ArrowUp\";\n\tconst increase = orientation === \"horizontal\" ? \"ArrowRight\" : \"ArrowDown\";\n\tif (key === decrease) return clampSplitSize(current - step, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === increase) return clampSplitSize(current + step, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === \"Home\") return clampSplitSize(min, {\n\t\tmin,\n\t\tmax\n\t});\n\tif (key === \"End\") return clampSplitSize(max, {\n\t\tmin,\n\t\tmax\n\t});\n\treturn null;\n}\n//#endregion\nexport { clampSplitSize, resolveSplitterKey, splitSizeFromPointer };\n",":host {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([orientation='horizontal']) {\n  flex-direction: row;\n}\n\n:host([orientation='vertical']) {\n  flex-direction: column;\n}\n\n.panel {\n  flex-grow: 0;\n  flex-shrink: 0;\n  min-height: 0;\n  min-width: 0;\n  overflow: auto;\n}\n\n/* The second panel takes whatever the first one leaves. */\n.end {\n  flex: 1 1 0;\n}\n\n.handle {\n  align-items: center;\n  background: var(--pf-resizable-handle-bg);\n  display: flex;\n  flex-shrink: 0;\n  justify-content: center;\n  position: relative;\n  /* Without this a touch drag scrolls the page instead of moving the split. */\n  touch-action: none;\n  transition: background var(--pf-transition-fast);\n}\n\n.handle:hover,\n.handle:focus-visible {\n  background: var(--pf-resizable-handle-active-bg);\n}\n\n.handle:focus-visible {\n  box-shadow: var(--pf-resizable-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n:host([orientation='horizontal']) .handle {\n  cursor: col-resize;\n  width: var(--pf-resizable-handle-size, 6px);\n}\n\n:host([orientation='vertical']) .handle {\n  cursor: row-resize;\n  height: var(--pf-resizable-handle-size, 6px);\n}\n\n.grip {\n  background: var(--pf-resizable-grip);\n  border-radius: var(--radius-full);\n}\n\n:host([orientation='horizontal']) .grip {\n  height: 24px;\n  width: 2px;\n}\n\n:host([orientation='vertical']) .grip {\n  height: 2px;\n  width: 24px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .handle {\n    transition: none;\n  }\n}\n","import { clampSplitSize, resolveSplitterKey, splitSizeFromPointer } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * Two panels with a draggable separator between them.\n *\n * The panels are slotted — `start` and `end` rather than a default slot taking\n * exactly two children, because a slot cannot be told to take only the first\n * assigned node and a consumer looping in their own template would otherwise\n * find the third child silently ignored, which is what the React `Resizable`\n * does with `Children.toArray(children)`.\n *\n * All of the arithmetic is core's, so this and the React `Resizable` agree on\n * which arrow grows the first panel, on where a pointer sits, and on what a\n * size outside the bounds becomes.\n *\n * @slot start - the first panel: the one whose size this controls.\n * @slot end - the second panel, which takes the rest.\n * @part start - the first panel's box.\n * @part end - the second panel's box.\n * @part handle - the separator.\n * @part grip - the mark in the middle of the separator.\n */\n@Component({\n  tag: 'pf-resizable',\n  styleUrl: 'pf-resizable.css',\n  shadow: true,\n})\nexport class PfResizable {\n  @Element() el!: HTMLElement;\n\n  /**\n   * `horizontal` puts the panels side by side and drags left and right;\n   * `vertical` stacks them. Reflected, because the stylesheet selects on it.\n   */\n  @Prop({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /** The first panel's share, in percent. */\n  @Prop({ mutable: true }) size = 50;\n\n  /** The first panel's smallest share, in percent. */\n  @Prop() min = 10;\n\n  /** Its largest. */\n  @Prop() max = 90;\n\n  /** How far one key press moves it, in percent. */\n  @Prop() step = 2;\n\n  /** The separator's accessible name. */\n  @Prop() handleLabel = 'Resize panels';\n\n  /** Fires when the split changes, by pointer or by key. */\n  @Event() pfChange!: EventEmitter<{ size: number }>;\n\n  private dragging = false;\n\n  @Watch('min')\n  @Watch('max')\n  handleBoundsChange() {\n    // A consumer narrowing the bounds must not leave the panel outside them.\n    const next = this.resolved;\n    if (next !== this.size) this.size = next;\n  }\n\n  /**\n   * The size actually in force. The consumer's `size` is left as they set it,\n   * so narrowing the bounds and widening them again restores what they asked\n   * for rather than what it was clamped to.\n   */\n  private get resolved(): number {\n    return clampSplitSize(Number(this.size), { min: this.min, max: this.max });\n  }\n\n  private get bounds() {\n    return { min: this.min, max: this.max };\n  }\n\n  /**\n   * A pointer release anywhere ends the drag.\n   *\n   * On the host rather than the handle, and `pointercancel` as well as\n   * `pointerup`: a drag interrupted by the browser — a touch turning into a\n   * scroll gesture, a window losing focus mid-drag — fires only `pointercancel`,\n   * and without it the splitter stays in a dragging state and follows the\n   * pointer around with no button held.\n   */\n  @Listen('pointerup')\n  @Listen('pointercancel')\n  handlePointerEnd(event: PointerEvent) {\n    if (!this.dragging) return;\n    this.dragging = false;\n    const handle = this.handle;\n    if (handle?.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);\n  }\n\n  private get handle(): HTMLElement | null {\n    return this.el.shadowRoot?.querySelector('.handle') ?? null;\n  }\n\n  private onPointerDown = (event: PointerEvent) => {\n    event.preventDefault();\n    this.dragging = true;\n    const handle = event.currentTarget as HTMLElement;\n    handle.setPointerCapture(event.pointerId);\n    // The separator is the control, so a drag has to focus it.\n    handle.focus();\n  };\n\n  private onPointerMove = (event: PointerEvent) => {\n    if (!this.dragging) return;\n\n    const rect = this.el.getBoundingClientRect();\n    /*\n     * `null` when the host has no length, which is not hypothetical: a\n     * splitter inside a collapsed box measures zero and dividing by it gives\n     * Infinity. The size it already had stands.\n     */\n    const next =\n      this.orientation === 'horizontal'\n        ? splitSizeFromPointer(event.clientX, rect.left, rect.width, this.bounds)\n        : splitSizeFromPointer(event.clientY, rect.top, rect.height, this.bounds);\n\n    if (next !== null) this.commit(next);\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    const next = resolveSplitterKey(event.key, {\n      orientation: this.orientation,\n      size: this.resolved,\n      min: this.min,\n      max: this.max,\n      step: Number(this.step),\n    });\n\n    // Nothing is prevented for a key the splitter does not handle, so Up and\n    // Down still scroll a page with a horizontal splitter focused.\n    if (next === null) return;\n    event.preventDefault();\n    this.commit(next);\n  };\n\n  private commit(next: number) {\n    if (next === this.resolved) return;\n    this.size = next;\n    this.pfChange.emit({ size: next });\n  }\n\n  render() {\n    const size = this.resolved;\n    const horizontal = this.orientation === 'horizontal';\n\n    return (\n      <Host>\n        <div class=\"panel start\" part=\"start\" style={{ flexBasis: `${size}%` }}>\n          <slot name=\"start\" />\n        </div>\n\n        <div\n          class=\"handle\"\n          part=\"handle\"\n          role=\"separator\"\n          tabindex=\"0\"\n          aria-label={this.handleLabel}\n          aria-orientation={horizontal ? 'vertical' : 'horizontal'}\n          aria-valuenow={String(size)}\n          aria-valuemin={String(this.min)}\n          aria-valuemax={String(this.max)}\n          onPointerDown={this.onPointerDown}\n          onPointerMove={this.onPointerMove}\n          onKeyDown={this.onKeyDown}\n        >\n          <span class=\"grip\" part=\"grip\" aria-hidden=\"true\"></span>\n        </div>\n\n        <div class=\"panel end\" part=\"end\">\n          <slot name=\"end\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-rich-text-editor.entry.js

@@ -0,0 +1,259 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { s as syncRovingTabIndex, g as getRovingItems, r as resolveRovingKey } from './roving-BzRAGyFO.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+import './keys-g4FlTDZx.js';
+
+//#region src/rich-text.ts
+/**
+* The toolbar, as data.
+*
+* Shared so the two layers cannot offer different buttons, or the same
+* buttons under different names — a design system whose editor is `B I U` in
+* one framework and `B I U S` in another is two editors.
+*/
+var RICH_TEXT_COMMANDS = [
+	{
+		command: "bold",
+		label: "Bold",
+		text: "B"
+	},
+	{
+		command: "italic",
+		label: "Italic",
+		text: "I"
+	},
+	{
+		command: "underline",
+		label: "Underline",
+		text: "U"
+	},
+	{
+		command: "insertUnorderedList",
+		label: "Bulleted list",
+		text: "• List",
+		separatorBefore: true
+	},
+	{
+		command: "insertOrderedList",
+		label: "Numbered list",
+		text: "1. List"
+	},
+	{
+		command: "removeFormat",
+		label: "Clear formatting",
+		text: "Clear"
+	}
+];
+/**
+* Drops a single wrapping `<p>` from a value, leaving everything else alone.
+*
+* A contenteditable browsers have been left to themselves wraps a first line
+* in `<p>` in some engines and not others, so a value round-tripped through
+* one and set into another gains a level of nesting each time. Stripping one
+* outer paragraph is what keeps `value` stable.
+*
+* The check that matters is that the first `</p>` **is** the last one. The
+* React `RichTextEditor` tested `startsWith('<p>')`, `endsWith('</p>')`,
+* `indexOf('<p>') === 0` and `lastIndexOf('</p>') === length - 4`, every one
+* of which is true of `<p>a</p><p>b</p>` — two paragraphs, which it then cut
+* into the broken fragment `a</p><p>b`. Measured against that exact input.
+*/
+function stripOuterParagraph(html) {
+	if (!html) return "";
+	const trimmed = html.trim();
+	if (!trimmed.startsWith("<p>") || !trimmed.endsWith("</p>")) return html;
+	if (trimmed.indexOf("</p>") !== trimmed.length - 4) return html;
+	return trimmed.slice(3, -4);
+}
+
+const pfRichTextEditorCss = () => `:host{display:block}:host([hidden]){display:none}.field{display:grid;gap:var(--space-2)}.label{color:var(--pf-field-label);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-field-required);margin-inline-start:var(--space-1)}.description{color:var(--pf-field-description);font-size:var(--font-size-sm);margin:0}.error{color:var(--pf-field-error);font-size:var(--font-size-sm);margin:0}.box{background:var(--pf-rte-bg);border:1px solid var(--pf-rte-border);border-radius:var(--radius-md);overflow:hidden}.box:focus-within{border-color:var(--pf-rte-focus-border);box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring))}.box--invalid{border-color:var(--pf-rte-invalid-border)}.box--disabled{opacity:var(--pf-rte-disabled-opacity, 0.75)}.toolbar{align-items:center;background:var(--pf-rte-bg-subtle);border-bottom:1px solid var(--pf-rte-border);display:flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-2)}.tool{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-rte-text);cursor:pointer;font:inherit;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);min-height:28px;padding:0 var(--space-2)}.tool:hover:not(:disabled){background:var(--pf-rte-bg);border-color:var(--pf-rte-border)}.tool:focus-visible{box-shadow:var(--pf-rte-focus-ring, var(--pf-focus-ring));outline:none}.tool:disabled{cursor:not-allowed;opacity:var(--pf-rte-disabled-opacity, 0.55)}.divider{background:var(--pf-rte-border);height:18px;margin:0 var(--space-1);width:1px}.editor{color:var(--pf-rte-text);font:inherit;line-height:1.5;min-height:var(--pf-rte-min-height, 140px);outline:none;overflow-wrap:anywhere;padding:var(--space-3)}.editor p{margin:0 0 0.75em}.editor p:last-child{margin-bottom:0}.editor:empty::before{color:var(--pf-rte-text-muted);content:attr(data-placeholder);pointer-events:none}.count{color:var(--pf-rte-text-muted);font-size:var(--font-size-sm);margin:0;text-align:end}`;
+
+const PfRichTextEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    get el() { return getElement(this); }
+    /**
+     * Submitted under this name.
+     *
+     * Reflected, because a form-associated custom element takes its submission
+     * name from the `name` content attribute rather than from this property.
+     */
+    name;
+    /** The field's value, as HTML. */
+    value = '';
+    label;
+    description;
+    /** Error message from the consumer. Its presence marks the control invalid. */
+    error;
+    placeholder = 'Start typing...';
+    /** The editable area's smallest height, in pixels. */
+    minHeight = 140;
+    /** The most characters of text the field will hold. */
+    characterMax;
+    required = false;
+    disabled = false;
+    /** Fires when the value changes, however it changed. */
+    pfChange;
+    /** The text length, which the counter shows. */
+    characterCount = 0;
+    /** The value a reset restores, captured before `value` can be replaced. */
+    initialValue = '';
+    /** The last value inside the character limit, which an overrun reverts to. */
+    lastWithinLimit = '';
+    editor;
+    toolbar;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+    }
+    componentDidLoad() {
+        this.writeValueIntoEditor();
+        if (this.toolbar)
+            syncRovingTabIndex(getRovingItems(this.toolbar));
+    }
+    handleValueChange() {
+        this.writeValueIntoEditor();
+        this.syncFormState();
+    }
+    syncFormState() {
+        const text = this.editor?.textContent ?? '';
+        this.internals.setFormValue(this.value ?? '');
+        applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** Applies one of the toolbar's commands, as pressing its button does. */
+    async format(command) {
+        this.runCommand(command);
+    }
+    /**
+     * A reset restores the value the control started with, not an empty string —
+     * the rule a native `<input value="initial">` follows.
+     */
+    formResetCallback() {
+        this.value = this.initialValue;
+        this.writeValueIntoEditor();
+    }
+    /**
+     * The editable area's content is written imperatively, never rendered.
+     *
+     * A `contenteditable` that a vdom also owns is a fight: the person types,
+     * the DOM changes under the renderer, and the next render puts the old
+     * content back with the caret at the start. So the element renders an empty
+     * box once and sets `innerHTML` only when the value it holds and the value
+     * in the box actually differ.
+     */
+    writeValueIntoEditor() {
+        const next = stripOuterParagraph(this.value ?? '');
+        if (this.editor && this.editor.innerHTML !== next)
+            this.editor.innerHTML = next;
+        this.lastWithinLimit = next;
+        this.characterCount = this.editor?.textContent?.length ?? 0;
+    }
+    onInput = () => {
+        if (!this.editor)
+            return;
+        const length = this.editor.textContent?.length ?? 0;
+        /*
+         * Over the limit: put the last good value back rather than let the
+         * content grow. The caret lands at the start of the box, which is the
+         * cost of this approach and the reason a limit should be generous.
+         */
+        if (typeof this.characterMax === 'number' && length > this.characterMax) {
+            this.editor.innerHTML = this.lastWithinLimit;
+            this.characterCount = this.editor.textContent?.length ?? 0;
+            return;
+        }
+        this.lastWithinLimit = this.editor.innerHTML;
+        this.characterCount = length;
+        this.value = this.editor.innerHTML;
+        this.syncFormState();
+        this.pfChange.emit({ value: this.value });
+    };
+    runCommand(command) {
+        if (!this.editor || this.disabled)
+            return;
+        this.editor.focus();
+        /*
+         * Deprecated, and still the only way to format inside a
+         * `contenteditable` without a dependency. It is also the one DOM call
+         * here that a test project cannot make: Stencil's mock DOM has no
+         * `execCommand` at all, so the toolbar is browser-tested.
+         */
+        document.execCommand?.(command);
+        this.onInput();
+    }
+    /** The toolbar is one tab stop, with the arrows moving inside it. */
+    onToolbarKeyDown = (event) => {
+        if (event.defaultPrevented || !this.toolbar)
+            return;
+        const action = resolveRovingKey(event.key, 'horizontal');
+        if (!action)
+            return;
+        const items = getRovingItems(this.toolbar);
+        const current = items.indexOf(this.el.shadowRoot?.activeElement);
+        if (current === -1)
+            return;
+        const next = resolveListMove(action, items.map((_, index) => index), current);
+        if (next >= 0) {
+            event.preventDefault();
+            items[next].focus();
+        }
+    };
+    onToolbarFocusIn = (event) => {
+        if (this.toolbar)
+            syncRovingTabIndex(getRovingItems(this.toolbar), event.target);
+    };
+    render() {
+        const hasCount = typeof this.characterMax === 'number';
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error', hasCount && 'count');
+        return (h(Host, { key: '1e777ccc50af79784ab6348ff378ebc505919fb2' }, h("div", { key: '432f2eaa3288f993ec43423cccc29461713d0231', class: "field", part: "field" }, this.label && (h("label", { key: '04fea69f6c553e6f0a9008696ec9a65b5741ba42', class: "label", part: "label", id: "label", htmlFor: "editor" }, this.label, this.required && (h("span", { key: '104964261dc140c4aa59b3831ed40bdcd298b714', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '221e3f47b1bec4663155ad201bef63e1533eeb85', class: {
+                box: true,
+                'box--invalid': Boolean(this.error),
+                'box--disabled': this.disabled,
+            } }, h("div", { key: '20e03010935746f7491ec091395c698520d65f1b', class: "toolbar", part: "toolbar", role: "toolbar", "aria-label": "Formatting options", "aria-orientation": "horizontal", ref: (node) => (this.toolbar = node), onKeyDown: this.onToolbarKeyDown, onFocusin: this.onToolbarFocusIn }, RICH_TEXT_COMMANDS.map((tool) => [
+            tool.separatorBefore ? h("span", { class: "divider", "aria-hidden": "true" }) : null,
+            h("button", { type: "button", class: "tool", part: "tool", "data-command": tool.command, "aria-label": tool.label, disabled: this.disabled,
+                // A press must not take the caret out of the editor, or the
+                // command has no selection to apply to.
+                onMouseDown: (event) => event.preventDefault(), onClick: () => this.runCommand(tool.command) }, tool.text),
+        ])), h("div", { key: 'ee4fa67a3c45efe5fb9d4e9f77d1a639fcee5c1a', id: "editor", class: "editor", part: "editor", role: "textbox", "aria-multiline": "true", "aria-labelledby": this.label ? 'label' : null, "aria-required": this.required ? 'true' : null, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, "aria-disabled": this.disabled ? 'true' : null, contentEditable: !this.disabled, "data-placeholder": this.placeholder, style: { '--pf-rte-min-height': `${this.minHeight}px` }, ref: (node) => (this.editor = node), onInput: this.onInput })), this.description && (h("p", { key: 'e55178dd64e111d6940a9a2de5541a1adfefef8d', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '118e10b3463e82ef5af5f0a51df45693b864b695', class: "error", part: "error", id: "error" }, this.error)), hasCount && (h("p", { key: 'c8163c0bb3c46c1ea8c6b0def9179fbd93dffa56', class: "count", part: "count", id: "count", "aria-live": "polite" }, this.characterCount, "/", this.characterMax)))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }]
+    }; }
+};
+PfRichTextEditor.style = pfRichTextEditorCss();
+
+export { PfRichTextEditor as pf_rich_text_editor };
+//# sourceMappingURL=pf-rich-text-editor.entry.js.map
+
+//# sourceMappingURL=pf-rich-text-editor.entry.js.map

package/dist/esm/pf-rich-text-editor.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-rich-text-editor.entry.js","sources":["../core/dist/rich-text.js","src/components/pf-rich-text-editor/pf-rich-text-editor.css?tag=pf-rich-text-editor&encapsulation=shadow","src/components/pf-rich-text-editor/pf-rich-text-editor.tsx"],"sourcesContent":["//#region src/rich-text.ts\n/**\n* The toolbar, as data.\n*\n* Shared so the two layers cannot offer different buttons, or the same\n* buttons under different names — a design system whose editor is `B I U` in\n* one framework and `B I U S` in another is two editors.\n*/\nvar RICH_TEXT_COMMANDS = [\n\t{\n\t\tcommand: \"bold\",\n\t\tlabel: \"Bold\",\n\t\ttext: \"B\"\n\t},\n\t{\n\t\tcommand: \"italic\",\n\t\tlabel: \"Italic\",\n\t\ttext: \"I\"\n\t},\n\t{\n\t\tcommand: \"underline\",\n\t\tlabel: \"Underline\",\n\t\ttext: \"U\"\n\t},\n\t{\n\t\tcommand: \"insertUnorderedList\",\n\t\tlabel: \"Bulleted list\",\n\t\ttext: \"• List\",\n\t\tseparatorBefore: true\n\t},\n\t{\n\t\tcommand: \"insertOrderedList\",\n\t\tlabel: \"Numbered list\",\n\t\ttext: \"1. List\"\n\t},\n\t{\n\t\tcommand: \"removeFormat\",\n\t\tlabel: \"Clear formatting\",\n\t\ttext: \"Clear\"\n\t}\n];\n/**\n* Drops a single wrapping `<p>` from a value, leaving everything else alone.\n*\n* A contenteditable browsers have been left to themselves wraps a first line\n* in `<p>` in some engines and not others, so a value round-tripped through\n* one and set into another gains a level of nesting each time. Stripping one\n* outer paragraph is what keeps `value` stable.\n*\n* The check that matters is that the first `</p>` **is** the last one. The\n* React `RichTextEditor` tested `startsWith('<p>')`, `endsWith('</p>')`,\n* `indexOf('<p>') === 0` and `lastIndexOf('</p>') === length - 4`, every one\n* of which is true of `<p>a</p><p>b</p>` — two paragraphs, which it then cut\n* into the broken fragment `a</p><p>b`. Measured against that exact input.\n*/\nfunction stripOuterParagraph(html) {\n\tif (!html) return \"\";\n\tconst trimmed = html.trim();\n\tif (!trimmed.startsWith(\"<p>\") || !trimmed.endsWith(\"</p>\")) return html;\n\tif (trimmed.indexOf(\"</p>\") !== trimmed.length - 4) return html;\n\treturn trimmed.slice(3, -4);\n}\n//#endregion\nexport { RICH_TEXT_COMMANDS, stripOuterParagraph };\n",":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-2);\n}\n\n.label {\n  color: var(--pf-field-label);\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-field-required);\n  margin-inline-start: var(--space-1);\n}\n\n.description {\n  color: var(--pf-field-description);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.error {\n  color: var(--pf-field-error);\n  font-size: var(--font-size-sm);\n  margin: 0;\n}\n\n.box {\n  background: var(--pf-rte-bg);\n  border: 1px solid var(--pf-rte-border);\n  border-radius: var(--radius-md);\n  overflow: hidden;\n}\n\n.box:focus-within {\n  border-color: var(--pf-rte-focus-border);\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n}\n\n.box--invalid {\n  border-color: var(--pf-rte-invalid-border);\n}\n\n.box--disabled {\n  opacity: var(--pf-rte-disabled-opacity, 0.75);\n}\n\n.toolbar {\n  align-items: center;\n  background: var(--pf-rte-bg-subtle);\n  border-bottom: 1px solid var(--pf-rte-border);\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  padding: var(--space-2);\n}\n\n.tool {\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--radius-sm);\n  color: var(--pf-rte-text);\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  min-height: 28px;\n  padding: 0 var(--space-2);\n}\n\n.tool:hover:not(:disabled) {\n  background: var(--pf-rte-bg);\n  border-color: var(--pf-rte-border);\n}\n\n.tool:focus-visible {\n  box-shadow: var(--pf-rte-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n.tool:disabled {\n  cursor: not-allowed;\n  opacity: var(--pf-rte-disabled-opacity, 0.55);\n}\n\n.divider {\n  background: var(--pf-rte-border);\n  height: 18px;\n  margin: 0 var(--space-1);\n  width: 1px;\n}\n\n.editor {\n  color: var(--pf-rte-text);\n  font: inherit;\n  line-height: 1.5;\n  min-height: var(--pf-rte-min-height, 140px);\n  outline: none;\n  overflow-wrap: anywhere;\n  padding: var(--space-3);\n}\n\n/*\n * The browser's own paragraphs, which `execCommand` and Enter both produce.\n * There is no `::slotted` involved: this content is in the shadow root,\n * written there imperatively, so a plain descendant selector reaches it.\n */\n.editor p {\n  margin: 0 0 0.75em;\n}\n\n.editor p:last-child {\n  margin-bottom: 0;\n}\n\n.editor:empty::before {\n  color: var(--pf-rte-text-muted);\n  content: attr(data-placeholder);\n  pointer-events: none;\n}\n\n.count {\n  color: var(--pf-rte-text-muted);\n  font-size: var(--font-size-sm);\n  margin: 0;\n  text-align: end;\n}\n","import {\n  RICH_TEXT_COMMANDS,\n  composeDescribedBy,\n  getRovingItems,\n  resolveListMove,\n  resolveRovingKey,\n  stripOuterParagraph,\n  syncRovingTabIndex,\n} from '@pitchfork-ui/core';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { applyControlValidity } from '../../form-validity';\n\n/**\n * A form-associated rich-text field over a `contenteditable`.\n *\n * The toolbar is core's list, so this and the React `RichTextEditor` cannot\n * offer different buttons, and the value is normalised with core's\n * `stripOuterParagraph`, so they cannot disagree about what a round trip\n * looks like.\n *\n * Two things differ from the React component, both deliberate:\n *\n * - **The toolbar is one tab stop**, with the arrows moving inside it, which\n *   is the ARIA toolbar pattern and what `pf-toolbar` already does. The React\n *   version is six tab stops inside a `role=\"toolbar\"`, so tabbing past the\n *   field walks every button; `todo.md` has that.\n * - **It is a real form control.** `formAssociated` with `ElementInternals` is\n *   what puts the value in `FormData`; a `contenteditable` is not a form\n *   control in any framework, and the React component's value reaches a form\n *   only if the consumer wires it there themselves.\n *\n * `document.execCommand` is deprecated and is still the only way to apply\n * formatting inside a `contenteditable` without a dependency, which is the\n * same trade the React component makes.\n *\n * @part field - the wrapper around label, toolbar, editor and messages.\n * @part label - the label element.\n * @part toolbar - the formatting toolbar.\n * @part tool - one toolbar button.\n * @part editor - the editable area.\n * @part count - the character counter.\n * @part description - the hint text.\n * @part error - the error message.\n */\n@Component({\n  tag: 'pf-rich-text-editor',\n  styleUrl: 'pf-rich-text-editor.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfRichTextEditor {\n  @AttachInternals() internals!: ElementInternals;\n\n  @Element() el!: HTMLElement;\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 rather than from this property.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The field's value, as HTML. */\n  @Prop({ mutable: true }) value = '';\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  /** Error message from the consumer. Its presence marks the control invalid. */\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Start typing...';\n\n  /** The editable area's smallest height, in pixels. */\n  @Prop() minHeight = 140;\n\n  /** The most characters of text the field will hold. */\n  @Prop() characterMax?: number;\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the value changes, however it changed. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** The text length, which the counter shows. */\n  @State() characterCount = 0;\n\n  /** The value a reset restores, captured before `value` can be replaced. */\n  private initialValue = '';\n\n  /** The last value inside the character limit, which an overrun reverts to. */\n  private lastWithinLimit = '';\n\n  private editor?: HTMLElement;\n\n  private toolbar?: HTMLElement;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n  }\n\n  componentDidLoad() {\n    this.writeValueIntoEditor();\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar));\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.writeValueIntoEditor();\n    this.syncFormState();\n  }\n\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    const text = this.editor?.textContent ?? '';\n    this.internals.setFormValue(this.value ?? '');\n    applyControlValidity(this.internals, text.trim().length > 0, this.required, this.error);\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** Applies one of the toolbar's commands, as pressing its button does. */\n  @Method()\n  async format(command: string) {\n    this.runCommand(command);\n  }\n\n  /**\n   * A reset restores the value the control started with, not an empty string —\n   * the rule a native `<input value=\"initial\">` follows.\n   */\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.writeValueIntoEditor();\n  }\n\n  /**\n   * The editable area's content is written imperatively, never rendered.\n   *\n   * A `contenteditable` that a vdom also owns is a fight: the person types,\n   * the DOM changes under the renderer, and the next render puts the old\n   * content back with the caret at the start. So the element renders an empty\n   * box once and sets `innerHTML` only when the value it holds and the value\n   * in the box actually differ.\n   */\n  private writeValueIntoEditor() {\n    const next = stripOuterParagraph(this.value ?? '');\n    if (this.editor && this.editor.innerHTML !== next) this.editor.innerHTML = next;\n\n    this.lastWithinLimit = next;\n    this.characterCount = this.editor?.textContent?.length ?? 0;\n  }\n\n  private onInput = () => {\n    if (!this.editor) return;\n\n    const length = this.editor.textContent?.length ?? 0;\n\n    /*\n     * Over the limit: put the last good value back rather than let the\n     * content grow. The caret lands at the start of the box, which is the\n     * cost of this approach and the reason a limit should be generous.\n     */\n    if (typeof this.characterMax === 'number' && length > this.characterMax) {\n      this.editor.innerHTML = this.lastWithinLimit;\n      this.characterCount = this.editor.textContent?.length ?? 0;\n      return;\n    }\n\n    this.lastWithinLimit = this.editor.innerHTML;\n    this.characterCount = length;\n    this.value = this.editor.innerHTML;\n    this.syncFormState();\n    this.pfChange.emit({ value: this.value });\n  };\n\n  private runCommand(command: string) {\n    if (!this.editor || this.disabled) return;\n\n    this.editor.focus();\n    /*\n     * Deprecated, and still the only way to format inside a\n     * `contenteditable` without a dependency. It is also the one DOM call\n     * here that a test project cannot make: Stencil's mock DOM has no\n     * `execCommand` at all, so the toolbar is browser-tested.\n     */\n    document.execCommand?.(command);\n    this.onInput();\n  }\n\n  /** The toolbar is one tab stop, with the arrows moving inside it. */\n  private onToolbarKeyDown = (event: KeyboardEvent) => {\n    if (event.defaultPrevented || !this.toolbar) return;\n\n    const action = resolveRovingKey(event.key, 'horizontal');\n    if (!action) return;\n\n    const items = getRovingItems(this.toolbar);\n    const current = items.indexOf(this.el.shadowRoot?.activeElement as HTMLElement);\n    if (current === -1) return;\n\n    const next = resolveListMove(\n      action,\n      items.map((_, index) => index),\n      current,\n    );\n    if (next >= 0) {\n      event.preventDefault();\n      items[next].focus();\n    }\n  };\n\n  private onToolbarFocusIn = (event: FocusEvent) => {\n    if (this.toolbar) syncRovingTabIndex(getRovingItems(this.toolbar), event.target as HTMLElement);\n  };\n\n  render() {\n    const hasCount = typeof this.characterMax === 'number';\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n      hasCount && 'count',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" id=\"label\" htmlFor=\"editor\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <div\n            class={{\n              box: true,\n              'box--invalid': Boolean(this.error),\n              'box--disabled': this.disabled,\n            }}\n          >\n            <div\n              class=\"toolbar\"\n              part=\"toolbar\"\n              role=\"toolbar\"\n              aria-label=\"Formatting options\"\n              aria-orientation=\"horizontal\"\n              ref={(node) => (this.toolbar = node)}\n              onKeyDown={this.onToolbarKeyDown}\n              onFocusin={this.onToolbarFocusIn}\n            >\n              {RICH_TEXT_COMMANDS.map((tool) => [\n                tool.separatorBefore ? <span class=\"divider\" aria-hidden=\"true\"></span> : null,\n                <button\n                  type=\"button\"\n                  class=\"tool\"\n                  part=\"tool\"\n                  data-command={tool.command}\n                  aria-label={tool.label}\n                  disabled={this.disabled}\n                  // A press must not take the caret out of the editor, or the\n                  // command has no selection to apply to.\n                  onMouseDown={(event: MouseEvent) => event.preventDefault()}\n                  onClick={() => this.runCommand(tool.command)}\n                >\n                  {tool.text}\n                </button>,\n              ])}\n            </div>\n\n            {/*\n              Rendered empty, once. Its content is set imperatively, because a\n              vdom that also owned it would put the old content back under the\n              person's caret on the next render.\n            */}\n            <div\n              id=\"editor\"\n              class=\"editor\"\n              part=\"editor\"\n              role=\"textbox\"\n              aria-multiline=\"true\"\n              aria-labelledby={this.label ? 'label' : null}\n              aria-required={this.required ? 'true' : null}\n              aria-invalid={this.error ? 'true' : null}\n              aria-describedby={describedBy}\n              aria-disabled={this.disabled ? 'true' : null}\n              contentEditable={!this.disabled}\n              data-placeholder={this.placeholder}\n              style={{ '--pf-rte-min-height': `${this.minHeight}px` }}\n              ref={(node) => (this.editor = node)}\n              onInput={this.onInput}\n            ></div>\n          </div>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n\n          {hasCount && (\n            <p class=\"count\" part=\"count\" id=\"count\" aria-live=\"polite\">\n              {this.characterCount}/{this.characterMax}\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-scroll-area.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfScrollAreaCss = () => `:host{display:block;scrollbar-color:var(--pf-scrollarea-thumb) transparent;scrollbar-width:thin;scrollbar-gutter:stable}:host([hidden]){display:none}:host(:focus-visible){border-radius:var(--radius-sm);box-shadow:var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='vertical']){overflow-x:hidden;overflow-y:auto}:host([orientation='horizontal']){overflow-x:auto;overflow-y:hidden}:host([orientation='both']){overflow:auto}:host::-webkit-scrollbar{height:10px;width:10px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:var(--pf-scrollarea-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--radius-full)}:host::-webkit-scrollbar-thumb:hover{background:var(--pf-scrollarea-thumb-hover);background-clip:padding-box}:host::-webkit-scrollbar-corner{background:transparent}`;
+
+const PfScrollArea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Which axis scrolls. Reflected so the stylesheet can select on it. */
+    orientation = 'vertical';
+    /**
+     * Make the region keyboard-focusable so it can be scrolled with the arrow
+     * keys (WCAG 2.1.1). Set false when a focusable child already provides
+     * keyboard access.
+     */
+    focusable = true;
+    /**
+     * The host scrolls, so the host is what has to be focusable — there is no
+     * inner element to put the tabindex on, which is why this is set here rather
+     * than rendered.
+     *
+     * A consumer's own `tabindex` wins: read before the first render and never
+     * overwritten, so `tabindex="-1"` is respected instead of being silently
+     * reset to 0.
+     */
+    componentWillLoad() {
+        if (this.focusable && !this.el.hasAttribute('tabindex')) {
+            this.el.setAttribute('tabindex', '0');
+        }
+    }
+    render() {
+        return (h(Host, { key: '1981de11e7e17cb513ca642b180062c3767fbf41' }, h("slot", { key: '1260c995e6571cc826038be07fffc584343675c7' })));
+    }
+};
+PfScrollArea.style = pfScrollAreaCss();
+
+export { PfScrollArea as pf_scroll_area };
+//# sourceMappingURL=pf-scroll-area.entry.js.map
+
+//# sourceMappingURL=pf-scroll-area.entry.js.map

package/dist/esm/pf-scroll-area.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-scroll-area.entry.js","sources":["src/components/pf-scroll-area/pf-scroll-area.css?tag=pf-scroll-area&encapsulation=shadow","src/components/pf-scroll-area/pf-scroll-area.tsx"],"sourcesContent":[":host {\n  display: block;\n  /* Standard scrollbar styling (Firefox + modern browsers). */\n  scrollbar-color: var(--pf-scrollarea-thumb) transparent;\n  scrollbar-width: thin;\n  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */\n  scrollbar-gutter: stable;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n:host([orientation='vertical']) {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n:host([orientation='horizontal']) {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:host([orientation='both']) {\n  overflow: auto;\n}\n\n/*\n * WebKit / Blink scrollbar styling. These pseudo-elements target the host's own\n * scrollbar, so they are written against `:host` rather than an inner element.\n */\n:host::-webkit-scrollbar {\n  height: 10px;\n  width: 10px;\n}\n\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n:host::-webkit-scrollbar-thumb {\n  background: var(--pf-scrollarea-thumb);\n  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */\n  background-clip: padding-box;\n  border: 2px solid transparent;\n  border-radius: var(--radius-full);\n}\n\n:host::-webkit-scrollbar-thumb:hover {\n  background: var(--pf-scrollarea-thumb-hover);\n  background-clip: padding-box;\n}\n\n:host::-webkit-scrollbar-corner {\n  background: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/**\n * A scrollable region with a styled, non-overlaying scrollbar.\n *\n * @slot - the content to scroll.\n */\n@Component({\n  tag: 'pf-scroll-area',\n  styleUrl: 'pf-scroll-area.css',\n  shadow: true,\n})\nexport class PfScrollArea {\n  @Element() el!: HTMLElement;\n\n  /** Which axis scrolls. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfScrollAreaOrientation = 'vertical';\n\n  /**\n   * Make the region keyboard-focusable so it can be scrolled with the arrow\n   * keys (WCAG 2.1.1). Set false when a focusable child already provides\n   * keyboard access.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * The host scrolls, so the host is what has to be focusable — there is no\n   * inner element to put the tabindex on, which is why this is set here rather\n   * than rendered.\n   *\n   * A consumer's own `tabindex` wins: read before the first render and never\n   * overwritten, so `tabindex=\"-1\"` is respected instead of being silently\n   * reset to 0.\n   */\n  componentWillLoad() {\n    if (this.focusable && !this.el.hasAttribute('tabindex')) {\n      this.el.setAttribute('tabindex', '0');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,i3BAAi3B,CAAC;;MCcp4B,YAAY,GAAA,MAAA;;;;;;IAIE,WAAW,GAA4B,UAAU;AAE1E;;;;AAIG;IACK,SAAS,GAAG,IAAI;AAExB;;;;;;;;AAQG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YACvD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;;;IAIzC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}