@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/collection/components/pf-rating-stars/pf-rating-stars.css

@@ -0,0 +1,54 @@
+:host {
+  align-items: center;
+  color: var(--pf-rating-text);
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.track {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.star {
+  display: inline-flex;
+  height: var(--pf-rating-size, var(--font-size-lg));
+  position: relative;
+  width: var(--pf-rating-size, var(--font-size-lg));
+}
+
+.icon {
+  font-size: var(--pf-rating-size, var(--font-size-lg));
+  height: 1em;
+  width: 1em;
+}
+
+.base {
+  color: var(--pf-rating-star-empty);
+}
+
+/*
+ * The filled star is the same glyph clipped to the fraction, which is what
+ * makes a half star look like half a star rather than a different icon.
+ */
+.fill {
+  display: inline-flex;
+  inset: 0;
+  overflow: hidden;
+  position: absolute;
+  width: var(--pf-rating-fill, 0%);
+}
+
+.filled {
+  color: var(--pf-rating-star-fill);
+}
+
+.value {
+  color: var(--pf-rating-text-muted);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}

package/dist/collection/components/pf-rating-stars/pf-rating-stars.js

@@ -0,0 +1,159 @@
+import { clampRating, formatRating, starFillPercent } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A row of stars showing a rating, filled to the fraction.
+ *
+ * One `role="img"` with a name rather than a star-by-star reading: the stars
+ * are an image of the rating, and the number is the thing worth announcing.
+ * Every star inside is therefore `aria-hidden`.
+ *
+ * @part track - the row of stars.
+ * @part star - one star, filled to its own share of the rating.
+ * @part value - the rating written out, when `showValue` is set.
+ */
+export class PfRatingStars {
+    /** The rating. Clamped into 0..max, so it cannot overfill the row. */
+    value = 0;
+    /** How many stars there are. */
+    max = 5;
+    /** Star size in pixels. */
+    size = 18;
+    /** Write the rating out beside the stars. */
+    showValue = false;
+    /** Overrides the generated name, for a rating that means something else. */
+    label;
+    /**
+     * Coerced, because the stars are built from it: `Number(max)` of an
+     * attribute string works by luck in a loop count and not at all in
+     * arithmetic, and a nonsense value would render an empty row rather than
+     * throwing.
+     */
+    get count() {
+        const asNumber = Math.round(Number(this.max));
+        return Number.isFinite(asNumber) ? Math.max(asNumber, 0) : 0;
+    }
+    render() {
+        const max = this.count;
+        const value = clampRating(Number(this.value), max);
+        return (h(Host, { key: '01f323b4b49ee170a9849e74c14f4d13709b8e52', role: "img", "aria-label": this.label ?? `Rating ${value} out of ${max}` }, h("div", { key: '717c1eddcb89120cd107f0f2f57ed1e2d132e763', class: "track", part: "track", "aria-hidden": "true" }, Array.from({ length: max }, (_, index) => (h("span", { class: "star", part: "star", style: {
+                '--pf-rating-fill': `${starFillPercent(value, index)}%`,
+                '--pf-rating-size': `${Number(this.size)}px`,
+            } }, h("pf-icon", { class: "icon base", name: "star" }), h("span", { class: "fill" }, h("pf-icon", { class: "icon filled", name: "star" })))))), this.showValue && (h("span", { key: '9f035bc5082e359f1c91a5a81af152f76d3371bf', class: "value", part: "value" }, formatRating(value)))));
+    }
+    static get is() { return "pf-rating-stars"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-rating-stars.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-rating-stars.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The rating. Clamped into 0..max, so it cannot overfill the row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many stars there are."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Star size in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "18"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Write the rating out beside the stars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the generated name, for a rating that means something else."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-rating-stars.js.map

package/dist/collection/components/pf-rating-stars/pf-rating-stars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-rating-stars.js","sourceRoot":"","sources":["../../../src/components/pf-rating-stars/pf-rating-stars.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,aAAa;IACxB,sEAAsE;IAC9D,KAAK,GAAG,CAAC,CAAC;IAElB,gCAAgC;IACxB,GAAG,GAAG,CAAC,CAAC;IAEhB,2BAA2B;IACnB,IAAI,GAAG,EAAE,CAAC;IAElB,6CAA6C;IACrC,SAAS,GAAG,KAAK,CAAC;IAE1B,4EAA4E;IACpE,KAAK,CAAU;IAEvB;;;;;OAKG;IACH,IAAY,KAAK;QACf,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QAC9C,OAAO,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;QACvB,MAAM,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAC;QAEnD,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,gBAAa,IAAI,CAAC,KAAK,IAAI,UAAU,KAAK,WAAW,GAAG,EAAE;YACxE,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,iBAAa,MAAM,IAC/C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACzC,YACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;oBACL,kBAAkB,EAAE,GAAG,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG;oBACvD,kBAAkB,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;iBAC7C;gBAED,eAAS,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,GAAW;gBACjD,YAAM,KAAK,EAAC,MAAM;oBAChB,eAAS,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,GAAW,CAC9C,CACF,CACR,CAAC,CACE;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,IAC7B,YAAY,CAAC,KAAK,CAAC,CACf,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { clampRating, formatRating, starFillPercent } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A row of stars showing a rating, filled to the fraction.\n *\n * One `role=\"img\"` with a name rather than a star-by-star reading: the stars\n * are an image of the rating, and the number is the thing worth announcing.\n * Every star inside is therefore `aria-hidden`.\n *\n * @part track - the row of stars.\n * @part star - one star, filled to its own share of the rating.\n * @part value - the rating written out, when `showValue` is set.\n */\n@Component({\n  tag: 'pf-rating-stars',\n  styleUrl: 'pf-rating-stars.css',\n  shadow: true,\n})\nexport class PfRatingStars {\n  /** The rating. Clamped into 0..max, so it cannot overfill the row. */\n  @Prop() value = 0;\n\n  /** How many stars there are. */\n  @Prop() max = 5;\n\n  /** Star size in pixels. */\n  @Prop() size = 18;\n\n  /** Write the rating out beside the stars. */\n  @Prop() showValue = false;\n\n  /** Overrides the generated name, for a rating that means something else. */\n  @Prop() label?: string;\n\n  /**\n   * Coerced, because the stars are built from it: `Number(max)` of an\n   * attribute string works by luck in a loop count and not at all in\n   * arithmetic, and a nonsense value would render an empty row rather than\n   * throwing.\n   */\n  private get count(): number {\n    const asNumber = Math.round(Number(this.max));\n    return Number.isFinite(asNumber) ? Math.max(asNumber, 0) : 0;\n  }\n\n  render() {\n    const max = this.count;\n    const value = clampRating(Number(this.value), max);\n\n    return (\n      <Host role=\"img\" aria-label={this.label ?? `Rating ${value} out of ${max}`}>\n        <div class=\"track\" part=\"track\" aria-hidden=\"true\">\n          {Array.from({ length: max }, (_, index) => (\n            <span\n              class=\"star\"\n              part=\"star\"\n              style={{\n                '--pf-rating-fill': `${starFillPercent(value, index)}%`,\n                '--pf-rating-size': `${Number(this.size)}px`,\n              }}\n            >\n              <pf-icon class=\"icon base\" name=\"star\"></pf-icon>\n              <span class=\"fill\">\n                <pf-icon class=\"icon filled\" name=\"star\"></pf-icon>\n              </span>\n            </span>\n          ))}\n        </div>\n        {this.showValue && (\n          <span class=\"value\" part=\"value\">\n            {formatRating(value)}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,83 @@
+: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;
+}
+
+/* The second panel takes whatever the first one leaves. */
+.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;
+  /* Without this a touch drag scrolls the page instead of moving the split. */
+  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;
+  }
+}

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

@@ -0,0 +1,309 @@
+import { clampSplitSize, resolveSplitterKey, splitSizeFromPointer } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * Two panels with a draggable separator between them.
+ *
+ * The panels are slotted — `start` and `end` rather than a default slot taking
+ * exactly two children, because a slot cannot be told to take only the first
+ * assigned node and a consumer looping in their own template would otherwise
+ * find the third child silently ignored, which is what the React `Resizable`
+ * does with `Children.toArray(children)`.
+ *
+ * All of the arithmetic is core's, so this and the React `Resizable` agree on
+ * which arrow grows the first panel, on where a pointer sits, and on what a
+ * size outside the bounds becomes.
+ *
+ * @slot start - the first panel: the one whose size this controls.
+ * @slot end - the second panel, which takes the rest.
+ * @part start - the first panel's box.
+ * @part end - the second panel's box.
+ * @part handle - the separator.
+ * @part grip - the mark in the middle of the separator.
+ */
+export class PfResizable {
+    el;
+    /**
+     * `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 is() { return "pf-resizable"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-resizable.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-resizable.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "`horizontal` puts the panels side by side and drags left and right;\n`vertical` stacks them. Reflected, because the stylesheet selects on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The first panel's share, in percent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "50"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The first panel's smallest share, in percent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min",
+                "defaultValue": "10"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Its largest."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "90"
+            },
+            "step": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How far one key press moves it, in percent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "step",
+                "defaultValue": "2"
+            },
+            "handleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The separator's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "handle-label",
+                "defaultValue": "'Resize panels'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfChange",
+                "name": "pfChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the split changes, by pointer or by key."
+                },
+                "complexType": {
+                    "original": "{ size: number }",
+                    "resolved": "{ size: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "min",
+                "methodName": "handleBoundsChange"
+            }, {
+                "propName": "max",
+                "methodName": "handleBoundsChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "pointerup",
+                "method": "handlePointerEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointercancel",
+                "method": "handlePointerEnd",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}
+//# sourceMappingURL=pf-resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-resizable.js","sourceRoot":"","sources":["../../../src/components/pf-resizable/pf-resizable.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}