@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-metric-card/pf-metric-card.css

@@ -0,0 +1,125 @@
+:host {
+  background: var(--pf-metric-bg);
+  border: 1px solid var(--pf-metric-border);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-3);
+  padding: var(--space-3);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  :host {
+    padding: var(--space-4);
+  }
+}
+
+/*
+ * The boxes that carry layout are hidden rather than left out when empty, so
+ * that content slotted in later still fires `slotchange`.
+ *
+ * Two classes deep, because each of these boxes sets its own `display` below:
+ * `.empty` alone ties on specificity and loses on order, which is a defect
+ * only a real stylesheet shows -- `scripts/smoke-consumer.mjs` caught it as a
+ * bare card drawing all three of its empty boxes.
+ */
+.icon.empty,
+.action.empty,
+.trend.empty {
+  display: none;
+}
+
+.header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--space-3);
+  justify-content: space-between;
+}
+
+.heading-wrap {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.heading {
+  color: var(--pf-metric-text-muted);
+  font-size: var(--font-size-sm);
+  margin: 0;
+}
+
+.icon {
+  align-items: center;
+  color: var(--pf-metric-text-muted);
+  display: inline-flex;
+  font-size: var(--font-size-sm);
+  justify-content: center;
+}
+
+.action {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+.body {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.value {
+  color: var(--pf-metric-text);
+  font-size: clamp(var(--font-size-3xl), 3vw, var(--font-size-4xl));
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+  margin: 0;
+}
+
+.trend {
+  align-items: center;
+  border-radius: var(--radius-full);
+  display: inline-flex;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  gap: var(--space-1);
+  padding: var(--space-1) var(--space-2);
+}
+
+.trend-symbol {
+  font-size: var(--font-size-2xs);
+  line-height: 1;
+}
+
+:host([trend='positive']) .trend {
+  background: color-mix(in srgb, var(--pf-metric-success-bg) 55%, var(--pf-mix-base));
+  color: var(--pf-metric-success-text);
+}
+
+:host([trend='negative']) .trend {
+  background: color-mix(in srgb, var(--pf-metric-danger-bg) 55%, var(--pf-mix-base));
+  color: var(--pf-metric-danger-text);
+}
+
+:host([trend='neutral']) .trend {
+  background: var(--pf-metric-bg-subtle);
+  color: var(--pf-metric-text-muted);
+}
+
+/*
+ * The description needs no box of its own, so it has none: an unassigned slot
+ * generates nothing, where an empty wrapper would leave the grid's own gap
+ * behind it.
+ */
+slot[name='description']::slotted(*) {
+  color: var(--pf-metric-text-muted);
+  display: block;
+  font-size: var(--font-size-sm);
+  margin: 0;
+}

package/dist/collection/components/pf-metric-card/pf-metric-card.js

@@ -0,0 +1,128 @@
+import { h, Host } from "@stencil/core";
+/** The symbol each trend is drawn with, which is decorative either way. */
+const TREND_SYMBOL = {
+    positive: '+',
+    negative: '-',
+    neutral: '=',
+};
+/**
+ * One figure worth looking at: a heading, the number, and optionally how it
+ * has moved.
+ *
+ * @slot heading - what the number is.
+ * @slot - the number.
+ * @slot trend - how it has moved, shown as a pill beside the number.
+ * @slot description - a line below the number.
+ * @slot icon - a small icon beside the heading.
+ * @slot action - a control in the card's top corner.
+ * @part header - the row holding the heading and the action.
+ * @part heading - the heading's box.
+ * @part icon - the icon's box.
+ * @part action - the box holding the action slot.
+ * @part body - the row holding the number and the trend.
+ * @part value - the number's box.
+ * @part trend - the trend pill.
+ */
+export class PfMetricCard {
+    el;
+    /** Which way the trend reads. Reflected so the stylesheet can colour it. */
+    trend = 'neutral';
+    /** An icon name from the same registry as `pf-icon`. */
+    icon;
+    /**
+     * Which of the optional slots have anything in them.
+     *
+     * Asked in JS because each of these three carries layout — a row, a pill —
+     * that its content cannot, and a wrapper around a slot cannot be collapsed
+     * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a
+     * child. The description needs no box, so it is styled through `::slotted()`
+     * and collapses on its own.
+     */
+    hasIcon = false;
+    hasAction = false;
+    hasTrend = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasIcon = slotted('icon');
+        this.hasAction = slotted('action');
+        this.hasTrend = slotted('trend');
+    };
+    render() {
+        const showIcon = this.hasIcon || Boolean(this.icon);
+        return (h(Host, { key: 'f0080f6c50f8b6f305f7ba95ee141d44bb3525eb' }, h("div", { key: 'cf60ec686ecb6a0332333c0be121ec25c74f2c33', class: "header", part: "header" }, h("div", { key: 'f7ec949ba8c658cda28be64f2621a367a0940c69', class: "heading-wrap" }, h("p", { key: '36fb4bac641a685fc4ccb14f0149c64b4ca39086', class: "heading", part: "heading" }, h("slot", { key: '07d7e7fe3e280d81b5355054dc68897e32d79208', name: "heading" })), h("span", { key: '47ab4af87d3579281de4b03d9342d8a103a6347b', class: { icon: true, empty: !showIcon }, part: "icon", "aria-hidden": "true" }, this.icon && !this.hasIcon && h("pf-icon", { key: '0405bc2d5771976075019cbd771f6c9d5e292756', name: this.icon }), h("slot", { key: 'f40c6534905851d680e35ec2787571cc23d955b7', name: "icon", onSlotchange: this.read }))), h("span", { key: 'd562acc9b5ed5797c07d1240fb3e68c25166e8df', class: { action: true, empty: !this.hasAction }, part: "action" }, h("slot", { key: '036b278bd1f5d4a6aa8592dbdf801f4cee1f2e69', name: "action", onSlotchange: this.read }))), h("div", { key: '54725ad239175914a1c2dc5da6c240a3591f3d05', class: "body", part: "body" }, h("p", { key: 'dad5ea0763235663ec0dab48739d4773a2442bd8', class: "value", part: "value" }, h("slot", { key: 'b5cf390faf708ec25772c6734cd3296328b56849' })), h("span", { key: 'f52b7bd58efbcb33324ec6df991cc4174263fbe3', class: { trend: true, empty: !this.hasTrend }, part: "trend" }, h("span", { key: '9db49c651c30c5ca89832a3a7577cb1f97f10a85', class: "trend-symbol", "aria-hidden": "true" }, TREND_SYMBOL[this.trend] ?? TREND_SYMBOL.neutral), h("slot", { key: '9f7efb7e27d855a6d5e8c721a808f0aa005c2170', name: "trend", onSlotchange: this.read }))), h("slot", { key: '77e4e3c62b902087d674fb32edd9bdad7004524d', name: "description" })));
+    }
+    static get is() { return "pf-metric-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-metric-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-metric-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "trend": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfMetricTrend",
+                    "resolved": "\"negative\" | \"neutral\" | \"positive\"",
+                    "references": {
+                        "PfMetricTrend": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-metric-card/pf-metric-card.tsx",
+                            "id": "src/components/pf-metric-card/pf-metric-card.tsx::PfMetricTrend"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which way the trend reads. Reflected so the stylesheet can colour it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "trend",
+                "defaultValue": "'neutral'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An icon name from the same registry as `pf-icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasIcon": {},
+            "hasAction": {},
+            "hasTrend": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-metric-card.js.map

package/dist/collection/components/pf-metric-card/pf-metric-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-metric-card.js","sourceRoot":"","sources":["../../../src/components/pf-metric-card/pf-metric-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfMetricTrend = 'positive' | 'negative' | 'neutral';\n\n/** The symbol each trend is drawn with, which is decorative either way. */\nconst TREND_SYMBOL: Record<PfMetricTrend, string> = {\n  positive: '+',\n  negative: '-',\n  neutral: '=',\n};\n\n/**\n * One figure worth looking at: a heading, the number, and optionally how it\n * has moved.\n *\n * @slot heading - what the number is.\n * @slot - the number.\n * @slot trend - how it has moved, shown as a pill beside the number.\n * @slot description - a line below the number.\n * @slot icon - a small icon beside the heading.\n * @slot action - a control in the card's top corner.\n * @part header - the row holding the heading and the action.\n * @part heading - the heading's box.\n * @part icon - the icon's box.\n * @part action - the box holding the action slot.\n * @part body - the row holding the number and the trend.\n * @part value - the number's box.\n * @part trend - the trend pill.\n */\n@Component({\n  tag: 'pf-metric-card',\n  styleUrl: 'pf-metric-card.css',\n  shadow: true,\n})\nexport class PfMetricCard {\n  @Element() el!: HTMLElement;\n\n  /** Which way the trend reads. Reflected so the stylesheet can colour it. */\n  @Prop({ reflect: true }) trend: PfMetricTrend = 'neutral';\n\n  /** An icon name from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /**\n   * Which of the optional slots have anything in them.\n   *\n   * Asked in JS because each of these three carries layout — a row, a pill —\n   * that its content cannot, and a wrapper around a slot cannot be collapsed\n   * from CSS: `:not(:has(*))` never matches, since the `<slot>` is itself a\n   * child. The description needs no box, so it is styled through `::slotted()`\n   * and collapses on its own.\n   */\n  @State() hasIcon = false;\n  @State() hasAction = false;\n  @State() hasTrend = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasIcon = slotted('icon');\n    this.hasAction = slotted('action');\n    this.hasTrend = slotted('trend');\n  };\n\n  render() {\n    const showIcon = this.hasIcon || Boolean(this.icon);\n\n    return (\n      <Host>\n        <div class=\"header\" part=\"header\">\n          <div class=\"heading-wrap\">\n            <p class=\"heading\" part=\"heading\">\n              <slot name=\"heading\" />\n            </p>\n            {/*\n              Every one of these boxes stays in the tree and is hidden when\n              empty, rather than being left out: a slot that is not rendered\n              never fires `slotchange`, so content added later would stay\n              invisible for good.\n            */}\n            <span class={{ icon: true, empty: !showIcon }} part=\"icon\" aria-hidden=\"true\">\n              {this.icon && !this.hasIcon && <pf-icon name={this.icon}></pf-icon>}\n              <slot name=\"icon\" onSlotchange={this.read} />\n            </span>\n          </div>\n          <span class={{ action: true, empty: !this.hasAction }} part=\"action\">\n            <slot name=\"action\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <div class=\"body\" part=\"body\">\n          <p class=\"value\" part=\"value\">\n            <slot />\n          </p>\n          <span class={{ trend: true, empty: !this.hasTrend }} part=\"trend\">\n            {/* Decorative: the trend's direction is in its label and its colour. */}\n            <span class=\"trend-symbol\" aria-hidden=\"true\">\n              {TREND_SYMBOL[this.trend] ?? TREND_SYMBOL.neutral}\n            </span>\n            <slot name=\"trend\" onSlotchange={this.read} />\n          </span>\n        </div>\n\n        <slot name=\"description\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-metric-grid/pf-metric-grid.css

@@ -0,0 +1,14 @@
+:host {
+  display: grid;
+  gap: var(--space-4);
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The cards have to be grid items of the host, not of a box inside it. */
+slot {
+  display: contents;
+}

package/dist/collection/components/pf-metric-grid/pf-metric-grid.js

@@ -0,0 +1,29 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A responsive grid of `pf-metric-card` children.
+ *
+ * Nothing but layout — the cards are independent, so there is no state to
+ * push down and no group behaviour to own. It exists because the column
+ * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than
+ * something a consumer should have to repeat.
+ *
+ * @slot - the `pf-metric-card` children.
+ */
+export class PfMetricGrid {
+    render() {
+        return (h(Host, { key: 'cd17f60b2f8f7b5c3e6e0b3d692100b2bf9e0984' }, h("slot", { key: 'f8f804e6e990e4a969637dc8acea9d761c6d466b' })));
+    }
+    static get is() { return "pf-metric-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-metric-grid.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-metric-grid.css"]
+        };
+    }
+}
+//# sourceMappingURL=pf-metric-grid.js.map

package/dist/collection/components/pf-metric-grid/pf-metric-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-metric-grid.js","sourceRoot":"","sources":["../../../src/components/pf-metric-grid/pf-metric-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AAMH,MAAM,OAAO,YAAY;IACvB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * A responsive grid of `pf-metric-card` children.\n *\n * Nothing but layout — the cards are independent, so there is no state to\n * push down and no group behaviour to own. It exists because the column\n * arithmetic (`auto-fit`, `minmax(220px, 1fr)`) is a decision rather than\n * something a consumer should have to repeat.\n *\n * @slot - the `pf-metric-card` children.\n */\n@Component({\n  tag: 'pf-metric-grid',\n  styleUrl: 'pf-metric-grid.css',\n  shadow: true,\n})\nexport class PfMetricGrid {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,94 @@
+:host {
+  display: contents;
+}
+
+/*
+ * The dialog is the overlay: it fills the viewport and centres the panel, so a
+ * click that lands on it rather than on the panel is an overlay click.
+ */
+.dialog {
+  align-items: center;
+  background: none;
+  border: 0;
+  display: none;
+  height: 100%;
+  justify-content: center;
+  max-height: 100%;
+  max-width: 100%;
+  padding: var(--space-4);
+  width: 100%;
+}
+
+.dialog[open] {
+  display: flex;
+}
+
+.dialog::backdrop {
+  background: var(--pf-modal-overlay-backdrop, var(--pf-overlay-backdrop));
+}
+
+.panel {
+  background: var(--pf-modal-bg);
+  border: 1px solid var(--pf-modal-border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  color: var(--pf-modal-text);
+  display: flex;
+  flex-direction: column;
+  max-height: 100%;
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+:host([size='sm']) .panel {
+  max-width: 400px;
+}
+
+:host([size='md']) .panel {
+  max-width: 560px;
+}
+
+:host([size='lg']) .panel {
+  max-width: 800px;
+}
+
+.close {
+  background: none;
+  border: 0;
+  border-radius: var(--radius-sm);
+  color: var(--pf-modal-text-muted);
+  cursor: pointer;
+  display: inline-flex;
+  inset-block-start: var(--space-3);
+  inset-inline-end: var(--space-3);
+  padding: var(--space-1);
+  position: absolute;
+}
+
+.close:hover {
+  color: var(--pf-modal-text);
+}
+
+.close:focus-visible {
+  box-shadow: var(--pf-focus-ring);
+  outline: none;
+}
+
+.dialog[open] .panel {
+  animation: pf-modal-in var(--pf-transition-enter);
+}
+
+/* Its own copy: @keyframes do not cross a shadow boundary. */
+@keyframes pf-modal-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dialog[open] .panel {
+    animation: none;
+  }
+}