@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/collection/components/pf-gauge-chart/pf-gauge-chart.css

@@ -0,0 +1,83 @@
+:host {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.svg {
+  inset: 0;
+  position: absolute;
+}
+
+.track {
+  stroke: var(--pf-gauge-track-color);
+}
+
+.fill {
+  /*
+   * The animation and the transition together: the first fills the arc in on
+   * first paint, the second carries it between values afterwards. A
+   * `--pf-transition-*` alias where the raw duration tokens would do, because
+   * an alias cannot be half-right.
+   */
+  animation: pf-gauge-fill var(--duration-slow) var(--easing-decelerate);
+  stroke-dashoffset: var(--pf-gauge-offset);
+  transition: stroke-dashoffset var(--pf-transition-medium);
+}
+
+/*
+ * Its own copy: `@keyframes` do not cross a shadow boundary, so the React
+ * library's global declaration is invisible here.
+ */
+@keyframes pf-gauge-fill {
+  from {
+    stroke-dashoffset: var(--pf-gauge-circumference);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fill {
+    animation: none;
+    transition: none;
+  }
+}
+
+.center {
+  align-items: center;
+  background: var(--pf-gauge-center-bg);
+  border-radius: var(--radius-full);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  justify-content: center;
+  padding: var(--space-2);
+  position: relative;
+  text-align: center;
+  z-index: 1;
+}
+
+.label {
+  color: var(--pf-gauge-label-color);
+  font-size: var(--pf-gauge-label-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+/*
+ * The slotted sub-label itself, with no wrapper of ours around it: an
+ * unassigned slot is `display: contents` and generates nothing, so a gauge
+ * with no sub-label lays out nothing extra. A wrapper would still be a flex
+ * item costing the `--space-1` gap, and could not be collapsed from CSS —
+ * `:has()` cannot ask whether a slot has assigned content, because assigned
+ * nodes are not the slot's children.
+ */
+::slotted([slot='sub']) {
+  color: var(--pf-gauge-sub-label-color);
+  font-size: var(--font-size-sm);
+  line-height: 1;
+}

package/dist/collection/components/pf-gauge-chart/pf-gauge-chart.js

@@ -0,0 +1,186 @@
+import { clampProgressPercent, getProgressCircleGeometry } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A single value drawn as a filled arc, with a label in the middle.
+ *
+ * The geometry is `getProgressCircleGeometry`, which `pf-progress-circle` and
+ * the React `ProgressCircle` already share: the dash offset only lands on the
+ * right angle if it and the circumference came from the same radius, and the
+ * radius has to be inset by half the stroke or half of it paints outside the
+ * viewBox.
+ *
+ * It names itself with `label` where the React `GaugeChart` puts the
+ * percentage in `aria-label`. A meter's name should say what is being
+ * measured; the value belongs in `aria-valuetext`, which is where a reader
+ * looks for it, and announcing "73%" as the name of a thing leaves a reader
+ * with no idea what is 73% full.
+ *
+ * @slot center - replaces the percentage in the middle.
+ * @slot sub - a second line under it.
+ * @part svg - the arc's canvas.
+ * @part track - the unfilled ring.
+ * @part fill - the filled arc.
+ * @part center - the box in the middle.
+ * @part label - the big number.
+ */
+export class PfGaugeChart {
+    value = 0;
+    max = 100;
+    /** Diameter, in pixels. */
+    size = 200;
+    /** The arc's thickness, in pixels. */
+    strokeWidth = 16;
+    /** Overrides the token colour. */
+    color;
+    /** What is being measured. The meter's accessible name. */
+    label = 'Gauge';
+    render() {
+        const size = Number(this.size) || 200;
+        const strokeWidth = Number(this.strokeWidth) || 16;
+        const percent = Math.round(clampProgressPercent(Number(this.value), Number(this.max)));
+        const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(size, strokeWidth, percent);
+        const stroke = this.color ?? 'var(--pf-gauge-color)';
+        return (h(Host, { key: '4b68ce456d9e35a64fa2eb16dbcaf7b3d7d8c39a', role: "meter", "aria-label": this.label, "aria-valuenow": String(this.value), "aria-valuemin": "0", "aria-valuemax": String(this.max), "aria-valuetext": `${percent}%`, style: { width: `${size}px`, height: `${size}px` } }, h("svg", { key: 'cfec8943ae89a32ebb53b7590a16a5cb9c7650bd', class: "svg", part: "svg", width: size, height: size, viewBox: `0 0 ${size} ${size}`, "aria-hidden": "true" }, h("circle", { key: '1b582bd780e9eef61d64fd9422881c3bd2980410', class: "track", part: "track", cx: center, cy: center, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: 'f1b871cc4f6c0e30f1f0ed2f97ed947f0733d197', class: "fill", part: "fill", cx: center, cy: center, r: radius, fill: "none", stroke: stroke, "stroke-width": strokeWidth, "stroke-linecap": "round", "stroke-dasharray": circumference, style: {
+                transform: 'rotate(-90deg)',
+                transformOrigin: `${center}px ${center}px`,
+                '--pf-gauge-circumference': String(circumference),
+                '--pf-gauge-offset': String(dashOffset),
+            } })), h("div", { key: 'ca9e8e0cbad4c53bd7b6d1f2cb032ac0e655e728', class: "center", part: "center", "aria-hidden": "true" }, h("span", { key: 'c41cc2ff253f428c8f5a23ec1d8e63aa905ac7d5', class: "label", part: "label" }, h("slot", { key: '491591bff197590cf4dc3431603494879f24652e', name: "center" }, percent, "%")), h("slot", { key: '2027cd831a0e13b89616a3a2e667a1a952fcdf5d', name: "sub" }))));
+    }
+    static get is() { return "pf-gauge-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-gauge-chart.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-gauge-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "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": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "100"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter, in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "200"
+            },
+            "strokeWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The arc's thickness, in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stroke-width",
+                "defaultValue": "16"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the token colour."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "What is being measured. The meter's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Gauge'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-gauge-chart.js.map

package/dist/collection/components/pf-gauge-chart/pf-gauge-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-gauge-chart.js","sourceRoot":"","sources":["../../../src/components/pf-gauge-chart/pf-gauge-chart.tsx"],"names":[],"mappings":"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","sourcesContent":["import { clampProgressPercent, getProgressCircleGeometry } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * A single value drawn as a filled arc, with a label in the middle.\n *\n * The geometry is `getProgressCircleGeometry`, which `pf-progress-circle` and\n * the React `ProgressCircle` already share: the dash offset only lands on the\n * right angle if it and the circumference came from the same radius, and the\n * radius has to be inset by half the stroke or half of it paints outside the\n * viewBox.\n *\n * It names itself with `label` where the React `GaugeChart` puts the\n * percentage in `aria-label`. A meter's name should say what is being\n * measured; the value belongs in `aria-valuetext`, which is where a reader\n * looks for it, and announcing \"73%\" as the name of a thing leaves a reader\n * with no idea what is 73% full.\n *\n * @slot center - replaces the percentage in the middle.\n * @slot sub - a second line under it.\n * @part svg - the arc's canvas.\n * @part track - the unfilled ring.\n * @part fill - the filled arc.\n * @part center - the box in the middle.\n * @part label - the big number.\n */\n@Component({\n  tag: 'pf-gauge-chart',\n  styleUrl: 'pf-gauge-chart.css',\n  shadow: true,\n})\nexport class PfGaugeChart {\n  @Prop() value = 0;\n\n  @Prop() max = 100;\n\n  /** Diameter, in pixels. */\n  @Prop() size = 200;\n\n  /** The arc's thickness, in pixels. */\n  @Prop() strokeWidth = 16;\n\n  /** Overrides the token colour. */\n  @Prop() color?: string;\n\n  /** What is being measured. The meter's accessible name. */\n  @Prop() label = 'Gauge';\n\n  render() {\n    const size = Number(this.size) || 200;\n    const strokeWidth = Number(this.strokeWidth) || 16;\n    const percent = Math.round(clampProgressPercent(Number(this.value), Number(this.max)));\n    const { radius, circumference, dashOffset, center } = getProgressCircleGeometry(\n      size,\n      strokeWidth,\n      percent,\n    );\n    const stroke = this.color ?? 'var(--pf-gauge-color)';\n\n    return (\n      <Host\n        role=\"meter\"\n        aria-label={this.label}\n        aria-valuenow={String(this.value)}\n        aria-valuemin=\"0\"\n        aria-valuemax={String(this.max)}\n        aria-valuetext={`${percent}%`}\n        style={{ width: `${size}px`, height: `${size}px` }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          width={size}\n          height={size}\n          viewBox={`0 0 ${size} ${size}`}\n          aria-hidden=\"true\"\n        >\n          <circle\n            class=\"track\"\n            part=\"track\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke-width={strokeWidth}\n          />\n          {/* Rotated so the arc starts at twelve o'clock rather than at three. */}\n          <circle\n            class=\"fill\"\n            part=\"fill\"\n            cx={center}\n            cy={center}\n            r={radius}\n            fill=\"none\"\n            stroke={stroke}\n            stroke-width={strokeWidth}\n            stroke-linecap=\"round\"\n            stroke-dasharray={circumference}\n            style={{\n              transform: 'rotate(-90deg)',\n              transformOrigin: `${center}px ${center}px`,\n              '--pf-gauge-circumference': String(circumference),\n              '--pf-gauge-offset': String(dashOffset),\n            }}\n          />\n        </svg>\n\n        <div class=\"center\" part=\"center\" aria-hidden=\"true\">\n          <span class=\"label\" part=\"label\">\n            <slot name=\"center\">{percent}%</slot>\n          </span>\n          {/*\n            No wrapper around this slot. An *unassigned* slot is\n            `display: contents` and generates nothing, so nothing is laid out\n            when there is no sub-label — where a wrapper would still be a flex\n            item and still cost the `--space-1` gap above it, and could not be\n            collapsed from CSS: `:has()` on a slot's assigned content is not\n            expressible, because assigned nodes are not the slot's children.\n          */}\n          <slot name=\"sub\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pf-header-navigation/pf-header-navigation.css

@@ -0,0 +1,83 @@
+:host {
+  background: var(--pf-header-nav-bg);
+  border: 1px solid var(--pf-header-nav-border);
+  border-radius: var(--pf-header-nav-radius, var(--radius-md));
+  display: block;
+  width: 100%;
+
+  /*
+   * The bridge to the shared item: custom properties inherit through a shadow
+   * boundary, so a slotted `pf-nav-item` resolves these inside its own shadow
+   * root. It is how one element serves two navigations without
+   * `:host-context`, which Firefox does not support.
+   */
+  --pf-nav-item-text: var(--pf-header-nav-text-muted);
+  --pf-nav-item-hover-text: var(--pf-header-nav-text);
+  --pf-nav-item-hover-bg: var(--pf-header-nav-bg-subtle);
+  --pf-nav-item-current-text: var(--pf-header-nav-text);
+  --pf-nav-item-current-bg: var(--pf-header-nav-bg-subtle);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* Mobile first: one column, the items wrapping under the brand. */
+.nav {
+  align-items: center;
+  display: grid;
+  gap: var(--space-3);
+  grid-template-columns: 1fr;
+  min-height: var(--pf-header-nav-min-height, 56px);
+  padding: var(--space-3);
+}
+
+@media (min-width: 768px) {
+  .nav {
+    grid-template-columns: auto 1fr auto;
+    padding: 0 var(--space-4);
+  }
+}
+
+.brand {
+  color: var(--pf-header-nav-text);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+.list {
+  align-items: center;
+  display: flex;
+  gap: var(--space-1);
+  list-style: none;
+  margin: 0;
+  overflow-x: auto;
+  padding: 0;
+}
+
+/*
+ * The items have to be flex children of the list, not of a box inside it. The
+ * UA stylesheet already gives a slot `display: contents`; this says so out
+ * loud.
+ */
+.list slot {
+  display: contents;
+}
+
+.actions {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--space-2);
+}
+
+/*
+ * Both classes rather than a bare `.empty`, so the rule does not depend on
+ * sitting below the `display` a box sets on itself: specificity ties break on
+ * source order, and `.empty` losing that way is how a bare `pf-metric-card`
+ * came to draw all three of its boxes.
+ */
+.brand.empty,
+.actions.empty {
+  display: none;
+}

package/dist/collection/components/pf-header-navigation/pf-header-navigation.js

@@ -0,0 +1,171 @@
+import { resolveCurrentNavItem } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A header navigation over `pf-nav-item` children.
+ *
+ * The group owns the one thing an item cannot know: which item is the current
+ * page. Core's rule decides, so the React `HeaderNavigation` marks the same
+ * one, and it is one index — which is what stops a navigation claiming two
+ * current pages.
+ *
+ * The host is **not** a banner. The React component renders a `<header>`,
+ * which is the banner landmark at the top level of a page, but an element
+ * cannot know whether it is the page's header: a second banner is a defect,
+ * not a decoration. So the shadow root renders only the `<nav>` landmark, and
+ * a consumer who wants a banner puts this inside their own `<header>`.
+ *
+ * @slot - the `pf-nav-item` children.
+ * @slot brand - a logo or product name, before the items.
+ * @slot actions - controls after the items, such as a sign-in button.
+ * @part nav - the navigation landmark.
+ * @part brand - the brand's box.
+ * @part list - the list the items are slotted into.
+ * @part actions - the actions' box.
+ */
+export class PfHeaderNavigation {
+    el;
+    /** The navigation's accessible name. */
+    label = 'Header navigation';
+    /**
+     * Whether anything was slotted into `brand` and `actions`.
+     *
+     * Asked in JS because a wrapper around a slot cannot be collapsed from CSS
+     * — `:not(:has(*))` never matches, since the `<slot>` is itself a child —
+     * and these two boxes have to exist when they are used: they are grid
+     * items, so an empty one still takes a column and a gap, which would push
+     * every item along by one `--space-3` for no visible reason.
+     */
+    hasBrand = false;
+    hasActions = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    /**
+     * An item's `current` changed, so the resolution has to run again.
+     *
+     * The items are this navigation's own light-DOM children, so nothing is
+     * retargeted and a host listener is safe — the same reason the sidebar can
+     * listen for a section's copy of this event. `refresh()` stays for a
+     * consumer who changes something else the group reads.
+     */
+    handleStructureChange(event) {
+        event.stopPropagation();
+        this.sync();
+    }
+    /**
+     * Re-reads the items, for a consumer who changed something the group reads
+     * and has no event for.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested navigation owns its own items. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-nav-item')).filter((item) => item.parentElement === this.el);
+    }
+    /**
+     * The property if the item has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    isCurrent(item) {
+        return item.current ?? item.hasAttribute('current');
+    }
+    sync() {
+        /*
+         * The children are read one by one rather than with a `:scope >`
+         * selector, which Stencil's mock DOM does not support at all — it throws
+         * from jQuery's selector engine rather than returning nothing.
+         */
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasBrand = slotted('brand');
+        this.hasActions = slotted('actions');
+        const items = this.items;
+        const currentIndex = resolveCurrentNavItem(items.map((item) => ({ current: this.isCurrent(item) })));
+        for (const [index, item] of items.entries()) {
+            const node = item;
+            node.currentPage = index === currentIndex;
+            node.orientation = 'horizontal';
+        }
+    }
+    render() {
+        return (h(Host, { key: 'f3f8c91ba9eab4755b1e5e96adc7245e630bd7fa' }, h("nav", { key: '7984894e4bcc395140ef229f351bbc037efa565e', class: "nav", part: "nav", "aria-label": this.label }, h("span", { key: 'fc21f987ab7f5ac3c74779157f70a23c5375cb27', class: { brand: true, empty: !this.hasBrand }, part: "brand" }, h("slot", { key: 'bb68a3a686be890c522671f3d6a569f438275631', name: "brand", onSlotchange: () => this.refresh() })), h("ul", { key: '43f0bb0d2d82497373ac74bfda26d9e2e545932e', class: "list", part: "list" }, h("slot", { key: '30be86d24556bd3521642ee79195a2af6a8c70c9', onSlotchange: () => this.refresh() })), h("span", { key: '687115f0db5bb7f35a82bb1b5dd79234a0049c99', class: { actions: true, empty: !this.hasActions }, part: "actions" }, h("slot", { key: 'f11f998414c8a424d64ddf759369a31b9ddbd0bb', name: "actions", onSlotchange: () => this.refresh() })))));
+    }
+    static get is() { return "pf-header-navigation"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-header-navigation.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-header-navigation.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The navigation's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Header navigation'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasBrand": {},
+            "hasActions": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the items, for a consumer who changed something the group reads\nand has no event for.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "pfNavStructure",
+                "method": "handleStructureChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pf-header-navigation.js.map

package/dist/collection/components/pf-header-navigation/pf-header-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-header-navigation.js","sourceRoot":"","sources":["../../../src/components/pf-header-navigation/pf-header-navigation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { resolveCurrentNavItem } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Listen, Method, Prop, State } from '@stencil/core';\n\n/**\n * A header navigation over `pf-nav-item` children.\n *\n * The group owns the one thing an item cannot know: which item is the current\n * page. Core's rule decides, so the React `HeaderNavigation` marks the same\n * one, and it is one index — which is what stops a navigation claiming two\n * current pages.\n *\n * The host is **not** a banner. The React component renders a `<header>`,\n * which is the banner landmark at the top level of a page, but an element\n * cannot know whether it is the page's header: a second banner is a defect,\n * not a decoration. So the shadow root renders only the `<nav>` landmark, and\n * a consumer who wants a banner puts this inside their own `<header>`.\n *\n * @slot - the `pf-nav-item` children.\n * @slot brand - a logo or product name, before the items.\n * @slot actions - controls after the items, such as a sign-in button.\n * @part nav - the navigation landmark.\n * @part brand - the brand's box.\n * @part list - the list the items are slotted into.\n * @part actions - the actions' box.\n */\n@Component({\n  tag: 'pf-header-navigation',\n  styleUrl: 'pf-header-navigation.css',\n  shadow: true,\n})\nexport class PfHeaderNavigation {\n  @Element() el!: HTMLElement;\n\n  /** The navigation's accessible name. */\n  @Prop() label = 'Header navigation';\n\n  /**\n   * Whether anything was slotted into `brand` and `actions`.\n   *\n   * Asked in JS because a wrapper around a slot cannot be collapsed from CSS\n   * — `:not(:has(*))` never matches, since the `<slot>` is itself a child —\n   * and these two boxes have to exist when they are used: they are grid\n   * items, so an empty one still takes a column and a gap, which would push\n   * every item along by one `--space-3` for no visible reason.\n   */\n  @State() hasBrand = false;\n  @State() hasActions = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  /**\n   * An item's `current` changed, so the resolution has to run again.\n   *\n   * The items are this navigation's own light-DOM children, so nothing is\n   * retargeted and a host listener is safe — the same reason the sidebar can\n   * listen for a section's copy of this event. `refresh()` stays for a\n   * consumer who changes something else the group reads.\n   */\n  @Listen('pfNavStructure')\n  handleStructureChange(event: CustomEvent<void>) {\n    event.stopPropagation();\n    this.sync();\n  }\n\n  /**\n   * Re-reads the items, for a consumer who changed something the group reads\n   * and has no event for.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested navigation owns its own items. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-nav-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(item: HTMLElement) {\n    return (item as HTMLElement & { current?: boolean }).current ?? item.hasAttribute('current');\n  }\n\n  private sync() {\n    /*\n     * The children are read one by one rather than with a `:scope >`\n     * selector, which Stencil's mock DOM does not support at all — it throws\n     * from jQuery's selector engine rather than returning nothing.\n     */\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasBrand = slotted('brand');\n    this.hasActions = slotted('actions');\n\n    const items = this.items;\n    const currentIndex = resolveCurrentNavItem(\n      items.map((item) => ({ current: this.isCurrent(item) })),\n    );\n\n    for (const [index, item] of items.entries()) {\n      const node = item as HTMLElement & { currentPage: boolean; orientation: string };\n      node.currentPage = index === currentIndex;\n      node.orientation = 'horizontal';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"nav\" part=\"nav\" aria-label={this.label}>\n          {/*\n            The slots stay in the tree whether or not they hold anything: a\n            slot that is not rendered never fires `slotchange`, so content\n            added later would stay invisible for good. The box is hidden\n            instead.\n          */}\n          <span class={{ brand: true, empty: !this.hasBrand }} part=\"brand\">\n            <slot name=\"brand\" onSlotchange={() => this.refresh()} />\n          </span>\n\n          <ul class=\"list\" part=\"list\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n\n          <span class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n            <slot name=\"actions\" onSlotchange={() => this.refresh()} />\n          </span>\n        </nav>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,108 @@
+:host {
+  display: inline-block;
+  font-family: var(--font-family-sans);
+  max-width: 100%;
+  /* A full year is wider than a small screen: scroll rather than overflow. */
+  overflow-x: auto;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.empty {
+  color: var(--pf-heatmap-empty-text);
+  font-size: var(--font-size-sm);
+  padding: var(--space-4);
+  text-align: center;
+}
+
+.body {
+  display: flex;
+  gap: var(--pf-heatmap-cell-gap);
+}
+
+.weekdays {
+  display: flex;
+  flex-direction: column;
+}
+
+.weekday-spacer {
+  display: block;
+  height: calc(var(--font-size-xs) + var(--space-1));
+}
+
+.weekday-grid {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+}
+
+.weekday {
+  align-items: center;
+  color: var(--pf-heatmap-label-color);
+  display: flex;
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  padding-inline-end: var(--space-1);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.months {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  height: var(--font-size-xs);
+}
+
+.month {
+  color: var(--pf-heatmap-label-color);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+}
+
+/*
+ * Columns of seven, filled top to bottom and then left to right, which is
+ * what `grid-auto-flow: column` over seven fixed rows gives.
+ */
+.grid {
+  display: grid;
+  gap: var(--pf-heatmap-cell-gap);
+  grid-auto-columns: var(--pf-heatmap-cell-size);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(7, var(--pf-heatmap-cell-size));
+}
+
+.cell {
+  animation: pf-heatmap-cell-in var(--duration-moderate) var(--easing-decelerate) both;
+  border-radius: var(--pf-heatmap-cell-radius);
+  height: var(--pf-heatmap-cell-size);
+  width: var(--pf-heatmap-cell-size);
+}
+
+.cell--empty {
+  background: transparent;
+}
+
+/* Its own copy: `@keyframes` do not cross a shadow boundary. */
+@keyframes pf-heatmap-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.6);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cell {
+    animation: none;
+  }
+}