@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { l as liveRegionRole } from './aria-DfpCerXM.js';
+import { s as severityIconName } from './icons-CCln56Fj.js';
+import { a as animationsFinished } from './motion-Cta76kgc.js';
+
+const pfAlertCss = () => `:host{display:block}:host([hidden]){display:none}.alert{align-items:flex-start;border:1px solid var(--pf-alert-border);border-radius:var(--radius-md);display:flex;gap:var(--space-3);padding:var(--space-3)}:host([variant='info']) .alert{background:var(--pf-alert-info-background);border-color:var(--pf-alert-info-border);color:var(--pf-alert-info-foreground)}:host([variant='success']) .alert{background:var(--pf-alert-success-background);border-color:var(--pf-alert-success-border);color:var(--pf-alert-success-foreground)}:host([variant='warning']) .alert{background:var(--pf-alert-warning-background);border-color:var(--pf-alert-warning-border);color:var(--pf-alert-warning-foreground)}:host([variant='danger']) .alert{background:var(--pf-alert-danger-background);border-color:var(--pf-alert-danger-border);color:var(--pf-alert-danger-foreground)}.icon{align-items:center;display:inline-flex;font-size:var(--font-size-lg);height:1em;justify-content:center;line-height:1;margin-top:1px;width:1em}.content{display:grid;gap:var(--space-1)}.title{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);line-height:1.3;margin:0}.body{font-size:var(--font-size-sm);line-height:1.4}.body.empty{display:none}::slotted(p){margin:0}.dismiss{align-items:center;background:transparent;border:0;border-radius:var(--radius-sm);color:currentcolor;cursor:pointer;display:inline-flex;font-size:var(--font-size-md);justify-content:center;margin-inline-start:auto;padding:0}.dismiss:focus-visible{box-shadow:var(--pf-alert-focus-ring, var(--pf-focus-ring));outline:none}.alert--exiting{animation:pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;overflow:hidden;pointer-events:none}@keyframes pf-alert-out{from{max-height:480px;opacity:1}to{margin-bottom:0;margin-top:0;max-height:0;opacity:0;padding-bottom:0;padding-top:0}}@media (prefers-reduced-motion: reduce){.alert--exiting{animation:none}}`;
+
+const PfAlert = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfDismiss = createEvent(this, "pfDismiss");
+    }
+    get el() { return getElement(this); }
+    /** Reflected, because the stylesheet selects on it for the colours. */
+    variant = 'info';
+    heading;
+    /** The body. A slotted body is used instead when there is one. */
+    description;
+    /** Show the dismiss button. Reflected. */
+    dismissible = false;
+    /** The dismiss button's accessible name. */
+    dismissLabel = 'Dismiss alert';
+    /** Fires once the alert has finished leaving. */
+    pfDismiss;
+    /** Reflected, because that is what the exit animation selects on. */
+    exiting = false;
+    /** Whether anything was slotted into the default slot. */
+    hasSlottedBody = false;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.readBody();
+    }
+    /**
+     * Dismisses the alert, waiting for its exit animation first.
+     *
+     * The wait is core's `animationsFinished`, which asks the element what is
+     * actually running rather than sleeping for a duration someone wrote down:
+     * under `prefers-reduced-motion` the stylesheet sets `animation: none`, no
+     * test project applies `styleUrl` CSS at all, and a consumer may not have
+     * loaded the stylesheet — in all three an `animationend` listener would
+     * wait for ever and a timeout would be a fiction.
+     */
+    async dismiss() {
+        if (this.exiting)
+            return;
+        this.exiting = true;
+        await animationsFinished(this.el.shadowRoot?.querySelector('.alert'));
+        this.pfDismiss.emit();
+    }
+    readBody() {
+        this.hasSlottedBody = Array.from(this.el.childNodes).some((node) => node.nodeType === Node.ELEMENT_NODE
+            ? !node.getAttribute('slot')
+            : Boolean(node.textContent?.trim()));
+    }
+    render() {
+        const hasBody = this.hasSlottedBody || Boolean(this.description);
+        return (h(Host, { key: 'f3522c8ef72b489525e45dc1fc3c70086af533ac' }, h("div", { key: 'b5b402130872fdfc94878b4d09329399c4adacb5', class: { alert: true, 'alert--exiting': this.exiting }, part: "alert", role: liveRegionRole(this.variant) }, h("span", { key: '048f80625f800c1835fa6e356dfe15d0fdd7f35c', class: "icon", part: "icon", "aria-hidden": "true" }, h("slot", { key: '6a42e99211fd2906e0162bfb31586e06af30aaa5', name: "icon" }, h("pf-icon", { key: '146ff1c59c4f860ec78a6f84162cab58f3e5e15d', name: severityIconName(this.variant) }))), h("div", { key: 'a74939fe38d05d8cf8a3de2c75e048f103b9739c', class: "content" }, this.heading && (h("p", { key: 'a9758f5cfece50320d0eff15c0cbc47a1d7f8a46', class: "title", part: "title" }, this.heading)), h("div", { key: 'e48f83b618e566b3c1884212372607c211557bee', class: { body: true, empty: !hasBody }, part: "body" }, h("slot", { key: '472cbf494dfcaa7f0f539fc2e243a6eab68b05b9', onSlotchange: () => this.readBody() }, this.description))), this.dismissible && (h("button", { key: 'f2cceb0cee8e905cac8d001304ca927245329b1e', type: "button", class: "dismiss", part: "dismiss", "aria-label": this.dismissLabel, onClick: () => this.dismiss() }, h("pf-icon", { key: '0190d8ca15d01969f8992e7dfc14c814c4fa29bf', name: "circle-xmark", "aria-hidden": "true" }))))));
+    }
+};
+PfAlert.style = pfAlertCss();
+
+export { PfAlert as pf_alert };
+//# sourceMappingURL=pf-alert.entry.js.map
+
+//# sourceMappingURL=pf-alert.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-alert.entry.js","sources":["src/components/pf-alert/pf-alert.css?tag=pf-alert&encapsulation=shadow","src/components/pf-alert/pf-alert.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.alert {\n  align-items: flex-start;\n  border: 1px solid var(--pf-alert-border);\n  border-radius: var(--radius-md);\n  display: flex;\n  gap: var(--space-3);\n  padding: var(--space-3);\n}\n\n/*\n * The colours come from the reflected attribute rather than a class: the\n * generated bindings set props as properties, so an unreflected prop would\n * leave no attribute to select on.\n */\n:host([variant='info']) .alert {\n  background: var(--pf-alert-info-background);\n  border-color: var(--pf-alert-info-border);\n  color: var(--pf-alert-info-foreground);\n}\n\n:host([variant='success']) .alert {\n  background: var(--pf-alert-success-background);\n  border-color: var(--pf-alert-success-border);\n  color: var(--pf-alert-success-foreground);\n}\n\n:host([variant='warning']) .alert {\n  background: var(--pf-alert-warning-background);\n  border-color: var(--pf-alert-warning-border);\n  color: var(--pf-alert-warning-foreground);\n}\n\n:host([variant='danger']) .alert {\n  background: var(--pf-alert-danger-background);\n  border-color: var(--pf-alert-danger-border);\n  color: var(--pf-alert-danger-foreground);\n}\n\n.icon {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-lg);\n  height: 1em;\n  justify-content: center;\n  line-height: 1;\n  margin-top: 1px;\n  width: 1em;\n}\n\n.content {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.title {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-semibold);\n  line-height: 1.3;\n  margin: 0;\n}\n\n.body {\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n}\n\n/*\n * Two classes deep, because the ties break on source order. The slot stays\n * rendered inside the hidden box, or content added later never fires\n * `slotchange`.\n */\n.body.empty {\n  display: none;\n}\n\n/* The browser's own paragraphs, if a consumer slots any. */\n::slotted(p) {\n  margin: 0;\n}\n\n.dismiss {\n  align-items: center;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-sm);\n  color: currentcolor;\n  cursor: pointer;\n  display: inline-flex;\n  font-size: var(--font-size-md);\n  justify-content: center;\n  margin-inline-start: auto;\n  padding: 0;\n}\n\n.dismiss:focus-visible {\n  box-shadow: var(--pf-alert-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n/*\n * Fade *and* collapse, so the content below reflows into the space rather\n * than jumping when the alert is removed. This is the difference from\n * `pf-notification`, which slides out of a stack instead.\n */\n.alert--exiting {\n  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;\n  overflow: hidden;\n  pointer-events: none;\n}\n\n/* Its own copy: `@keyframes` do not cross a shadow boundary. */\n@keyframes pf-alert-out {\n  from {\n    max-height: 480px;\n    opacity: 1;\n  }\n\n  to {\n    margin-bottom: 0;\n    margin-top: 0;\n    max-height: 0;\n    opacity: 0;\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .alert--exiting {\n    animation: none;\n  }\n}\n","import {\n  animationsFinished,\n  liveRegionRole,\n  severityIconName,\n  type LiveRegionVariant,\n} from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type PfAlertVariant = LiveRegionVariant;\n\n/**\n * An inline alert: an icon, a heading, a body and an optional dismiss button.\n *\n * The sibling of `pf-notification`, and deliberately a separate element\n * rather than a variant of it: an alert belongs in the page's flow and\n * collapses its own height when dismissed so the content below reflows, while\n * a notification is one of a stack in a corner and slides out. The two look\n * alike and behave differently, which is exactly when one element serving\n * both goes wrong.\n *\n * The role comes from core's `liveRegionRole`, so `warning` and `danger`\n * announce assertively and `info` and `success` wait their turn.\n *\n * @slot - the body, used instead of the `description` prop when present.\n * @slot icon - replaces the icon the variant would choose.\n * @part alert - the root box.\n * @part icon - the icon's box.\n * @part title - the heading.\n * @part body - the description's box.\n * @part dismiss - the dismiss button.\n */\n@Component({\n  tag: 'pf-alert',\n  styleUrl: 'pf-alert.css',\n  shadow: true,\n})\nexport class PfAlert {\n  @Element() el!: HTMLElement;\n\n  /** Reflected, because the stylesheet selects on it for the colours. */\n  @Prop({ reflect: true }) variant: PfAlertVariant = 'info';\n\n  @Prop() heading?: string;\n\n  /** The body. A slotted body is used instead when there is one. */\n  @Prop() description?: string;\n\n  /** Show the dismiss button. Reflected. */\n  @Prop({ reflect: true }) dismissible = false;\n\n  /** The dismiss button's accessible name. */\n  @Prop() dismissLabel = 'Dismiss alert';\n\n  /** Fires once the alert has finished leaving. */\n  @Event() pfDismiss!: EventEmitter<void>;\n\n  /** Reflected, because that is what the exit animation selects on. */\n  @State() exiting = false;\n\n  /** Whether anything was slotted into the default slot. */\n  @State() hasSlottedBody = false;\n\n  /** The light DOM is readable here, so first paint is already right. */\n  componentWillLoad() {\n    this.readBody();\n  }\n\n  /**\n   * Dismisses the alert, waiting for its exit animation first.\n   *\n   * The wait is core's `animationsFinished`, which asks the element what is\n   * actually running rather than sleeping for a duration someone wrote down:\n   * under `prefers-reduced-motion` the stylesheet sets `animation: none`, no\n   * test project applies `styleUrl` CSS at all, and a consumer may not have\n   * loaded the stylesheet — in all three an `animationend` listener would\n   * wait for ever and a timeout would be a fiction.\n   */\n  @Method()\n  async dismiss() {\n    if (this.exiting) return;\n    this.exiting = true;\n\n    await animationsFinished(this.el.shadowRoot?.querySelector('.alert'));\n    this.pfDismiss.emit();\n  }\n\n  private readBody() {\n    this.hasSlottedBody = Array.from(this.el.childNodes).some((node) =>\n      node.nodeType === Node.ELEMENT_NODE\n        ? !(node as Element).getAttribute('slot')\n        : Boolean(node.textContent?.trim()),\n    );\n  }\n\n  render() {\n    const hasBody = this.hasSlottedBody || Boolean(this.description);\n\n    return (\n      <Host>\n        <div\n          class={{ alert: true, 'alert--exiting': this.exiting }}\n          part=\"alert\"\n          role={liveRegionRole(this.variant)}\n        >\n          <span class=\"icon\" part=\"icon\" aria-hidden=\"true\">\n            <slot name=\"icon\">\n              <pf-icon name={severityIconName(this.variant)}></pf-icon>\n            </slot>\n          </span>\n\n          <div class=\"content\">\n            {this.heading && (\n              <p class=\"title\" part=\"title\">\n                {this.heading}\n              </p>\n            )}\n            {/*\n              The slot stays in the tree whether or not it holds anything: a\n              slot that is not rendered never fires `slotchange`, so a body\n              added later would stay invisible for good.\n            */}\n            <div class={{ body: true, empty: !hasBody }} part=\"body\">\n              <slot onSlotchange={() => this.readBody()}>{this.description}</slot>\n            </div>\n          </div>\n\n          {this.dismissible && (\n            <button\n              type=\"button\"\n              class=\"dismiss\"\n              part=\"dismiss\"\n              aria-label={this.dismissLabel}\n              onClick={() => this.dismiss()}\n            >\n              <pf-icon name=\"circle-xmark\" aria-hidden=\"true\"></pf-icon>\n            </button>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/pf-avatar-group.entry.js

@@ -0,0 +1,118 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+//#region src/avatar-group.ts
+/**
+* Splits `count` avatars into the ones shown and the overflow.
+*
+* `total` is for a group that knows how many people there are without being
+* handed an avatar for each — "5 of 40" shows five faces and `+35`. Without
+* it the count is simply how many avatars there are.
+*
+* A negative or fractional `max` cannot produce a negative row: it floors at
+* zero, which shows the chip alone.
+*/
+function splitAvatarGroup(count, max, total) {
+	const safeCount = Number.isFinite(count) ? Math.max(Math.floor(count), 0) : 0;
+	const shown = Math.min(safeCount, Number.isFinite(max) ? Math.max(Math.floor(max), 0) : 0);
+	const resolvedTotal = total !== void 0 && Number.isFinite(total) ? Math.max(Math.floor(total), 0) : safeCount;
+	return {
+		shown,
+		overflow: Math.max(resolvedTotal - shown, 0),
+		total: resolvedTotal
+	};
+}
+/**
+* What an unnamed avatar group is called: "1 person", "4 people".
+*
+* Here rather than in either layer because it is the group's accessible name,
+* and a group that announced itself differently in the two layers would be a
+* different control to a screen reader.
+*/
+function avatarGroupLabel(total) {
+	const safeTotal = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;
+	return `${safeTotal} ${safeTotal === 1 ? "person" : "people"}`;
+}
+
+const pfAvatarGroupCss = () => `:host{--pf-avatar-group-overlap:8px;align-items:center;display:inline-flex}:host([hidden]){display:none}:host([size='lg']),:host([size='xl']){--pf-avatar-group-overlap:12px}::slotted(pf-avatar),.overflow{box-shadow:0 0 0 2px var(--pf-avatar-group-ring);position:relative}::slotted(pf-avatar:not(:first-child)),.overflow{margin-inline-start:calc(-1 * var(--pf-avatar-group-overlap))}::slotted(pf-avatar[data-pf-overflow]){display:none}.overflow{--pf-avatar-bg:var(--pf-avatar-group-overflow-bg);--pf-avatar-text:var(--pf-avatar-group-overflow-text)}`;
+
+const PfAvatarGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** How many avatars to show before collapsing the rest into the chip. */
+    max = 5;
+    /** Applied to every avatar in the group. Reflected, and pushed down. */
+    size = 'md';
+    /**
+     * The group's real size, for a group that knows how many people there are
+     * without being handed an avatar for each: five faces and `+35`.
+     */
+    total;
+    /** Overrides the generated name, which counts the people in the group. */
+    label;
+    /** How many did not fit, which is what the chip says. */
+    overflow = 0;
+    /** How many the group counts, which is what its name says. */
+    counted = 0;
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleStateChange() {
+        this.sync();
+    }
+    /** Re-reads the children, for a consumer who changed one through a property. */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested group owns its own avatars. */
+    get avatars() {
+        return Array.from(this.el.querySelectorAll('pf-avatar')).filter((avatar) => avatar.parentElement === this.el);
+    }
+    sync() {
+        const avatars = this.avatars;
+        const split = splitAvatarGroup(avatars.length, Number(this.max), this.total);
+        for (const [index, avatar] of avatars.entries()) {
+            avatar.size = this.size;
+            /*
+             * A data attribute of the group's own rather than `hidden`: `hidden` is
+             * the consumer's to set, and overwriting it would lose an avatar they
+             * had hidden themselves. This says "the group collapsed you", which is
+             * a different thing, and the stylesheet selects on it.
+             */
+            if (index < split.shown)
+                avatar.removeAttribute('data-pf-overflow');
+            else
+                avatar.setAttribute('data-pf-overflow', '');
+            // Earlier avatars stack above later ones, and the chip sits under all
+            // of them -- so the overlap reads as a stack rather than a ribbon.
+            avatar.style.zIndex = index < split.shown ? `${split.shown - index}` : '';
+        }
+        this.overflow = split.overflow;
+        this.counted = split.total;
+    }
+    render() {
+        return (h(Host, { key: '42ec24fb2307fda7fee46622cab9cd04fd33626d', role: "group", "aria-label": this.label ?? avatarGroupLabel(this.counted) }, h("slot", { key: '774448c455e6aa400b050fde75831f1c9e66ac95', onSlotchange: () => this.refresh() }), this.overflow > 0 && (h("pf-avatar", { key: 'fee71535c6973de304a38761fb8db8ddb5734e3e', class: "overflow", part: "overflow", size: this.size, name: `${this.overflow} more` }, "+", this.overflow))));
+    }
+    static get watchers() { return {
+        "max": [{
+                "handleStateChange": 0
+            }],
+        "size": [{
+                "handleStateChange": 0
+            }],
+        "total": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+PfAvatarGroup.style = pfAvatarGroupCss();
+
+export { PfAvatarGroup as pf_avatar_group };
+//# sourceMappingURL=pf-avatar-group.entry.js.map
+
+//# sourceMappingURL=pf-avatar-group.entry.js.map

package/dist/esm/pf-avatar-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-avatar-group.entry.js","sources":["../core/dist/avatar-group.js","src/components/pf-avatar-group/pf-avatar-group.css?tag=pf-avatar-group&encapsulation=shadow","src/components/pf-avatar-group/pf-avatar-group.tsx"],"sourcesContent":["//#region src/avatar-group.ts\n/**\n* Splits `count` avatars into the ones shown and the overflow.\n*\n* `total` is for a group that knows how many people there are without being\n* handed an avatar for each — \"5 of 40\" shows five faces and `+35`. Without\n* it the count is simply how many avatars there are.\n*\n* A negative or fractional `max` cannot produce a negative row: it floors at\n* zero, which shows the chip alone.\n*/\nfunction splitAvatarGroup(count, max, total) {\n\tconst safeCount = Number.isFinite(count) ? Math.max(Math.floor(count), 0) : 0;\n\tconst shown = Math.min(safeCount, Number.isFinite(max) ? Math.max(Math.floor(max), 0) : 0);\n\tconst resolvedTotal = total !== void 0 && Number.isFinite(total) ? Math.max(Math.floor(total), 0) : safeCount;\n\treturn {\n\t\tshown,\n\t\toverflow: Math.max(resolvedTotal - shown, 0),\n\t\ttotal: resolvedTotal\n\t};\n}\n/**\n* What an unnamed avatar group is called: \"1 person\", \"4 people\".\n*\n* Here rather than in either layer because it is the group's accessible name,\n* and a group that announced itself differently in the two layers would be a\n* different control to a screen reader.\n*/\nfunction avatarGroupLabel(total) {\n\tconst safeTotal = Number.isFinite(total) ? Math.max(Math.floor(total), 0) : 0;\n\treturn `${safeTotal} ${safeTotal === 1 ? \"person\" : \"people\"}`;\n}\n//#endregion\nexport { avatarGroupLabel, splitAvatarGroup };\n",":host {\n  /* How far each avatar laps over the one before it. */\n  --pf-avatar-group-overlap: 8px;\n  align-items: center;\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([size='lg']),\n:host([size='xl']) {\n  --pf-avatar-group-overlap: 12px;\n}\n\n/*\n * The ring is drawn in the surface colour, so overlapping avatars stay\n * separated. `position: relative` is what makes the z-index the group writes\n * on each avatar mean anything.\n */\n::slotted(pf-avatar),\n.overflow {\n  box-shadow: 0 0 0 2px var(--pf-avatar-group-ring);\n  position: relative;\n}\n\n/*\n * `:not(:first-child)` inside `::slotted()` rather than a sibling combinator:\n * the parens take a compound selector and no combinator, so `::slotted(a + a)`\n * cannot be written -- the same limit that keeps pf-accordion's rule in the\n * child. A pseudo-class is part of a compound selector, so this one is fine.\n */\n::slotted(pf-avatar:not(:first-child)),\n.overflow {\n  margin-inline-start: calc(-1 * var(--pf-avatar-group-overlap));\n}\n\n/*\n * Collapsed by the group. A data attribute of the group's own, so an avatar\n * the *consumer* hid with `hidden` is a separate thing and still works.\n */\n::slotted(pf-avatar[data-pf-overflow]) {\n  display: none;\n}\n\n/*\n * The chip's colours go through the properties pf-avatar already reads, which\n * inherit through the shadow boundary -- the pf-option bridge again, and the\n * way to colour a nested element without reaching into its shadow root.\n */\n.overflow {\n  --pf-avatar-bg: var(--pf-avatar-group-overflow-bg);\n  --pf-avatar-text: var(--pf-avatar-group-overflow-text);\n}\n","import { avatarGroupLabel, splitAvatarGroup } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport type { PfAvatarSize } from '../pf-avatar/pf-avatar';\n\n/**\n * A stack of overlapping `pf-avatar` children, with a `+N` chip for the ones\n * that did not fit.\n *\n * Children rather than an array of people, as everywhere else — a consumer\n * loops in their own template, and each avatar keeps its own `src`, `name` and\n * `status`.\n *\n * The chip is a `pf-avatar` of its own, in the shadow root: it needs an\n * avatar's shape, size and ring, and reusing the element is how it gets them\n * without a second copy of all three. Its colours come through the\n * `--pf-avatar-*` properties the avatar already reads, which inherit through\n * the shadow boundary.\n *\n * @slot - the `pf-avatar` children.\n * @part overflow - the `+N` chip, when something did not fit.\n */\n@Component({\n  tag: 'pf-avatar-group',\n  styleUrl: 'pf-avatar-group.css',\n  shadow: true,\n})\nexport class PfAvatarGroup {\n  @Element() el!: HTMLElement;\n\n  /** How many avatars to show before collapsing the rest into the chip. */\n  @Prop() max = 5;\n\n  /** Applied to every avatar in the group. Reflected, and pushed down. */\n  @Prop({ reflect: true }) size: PfAvatarSize = 'md';\n\n  /**\n   * The group's real size, for a group that knows how many people there are\n   * without being handed an avatar for each: five faces and `+35`.\n   */\n  @Prop() total?: number;\n\n  /** Overrides the generated name, which counts the people in the group. */\n  @Prop() label?: string;\n\n  /** How many did not fit, which is what the chip says. */\n  @State() overflow = 0;\n\n  /** How many the group counts, which is what its name says. */\n  @State() counted = 0;\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  @Watch('max')\n  @Watch('size')\n  @Watch('total')\n  handleStateChange() {\n    this.sync();\n  }\n\n  /** Re-reads the children, for a consumer who changed one through a property. */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested group owns its own avatars. */\n  private get avatars(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-avatar')).filter(\n      (avatar) => avatar.parentElement === this.el,\n    );\n  }\n\n  private sync() {\n    const avatars = this.avatars;\n    const split = splitAvatarGroup(avatars.length, Number(this.max), this.total);\n\n    for (const [index, avatar] of avatars.entries()) {\n      (avatar as HTMLElement & { size: PfAvatarSize }).size = this.size;\n\n      /*\n       * A data attribute of the group's own rather than `hidden`: `hidden` is\n       * the consumer's to set, and overwriting it would lose an avatar they\n       * had hidden themselves. This says \"the group collapsed you\", which is\n       * a different thing, and the stylesheet selects on it.\n       */\n      if (index < split.shown) avatar.removeAttribute('data-pf-overflow');\n      else avatar.setAttribute('data-pf-overflow', '');\n\n      // Earlier avatars stack above later ones, and the chip sits under all\n      // of them -- so the overlap reads as a stack rather than a ribbon.\n      avatar.style.zIndex = index < split.shown ? `${split.shown - index}` : '';\n    }\n\n    this.overflow = split.overflow;\n    this.counted = split.total;\n  }\n\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label ?? avatarGroupLabel(this.counted)}>\n        <slot onSlotchange={() => this.refresh()} />\n        {this.overflow > 0 && (\n          <pf-avatar\n            class=\"overflow\"\n            part=\"overflow\"\n            size={this.size}\n            name={`${this.overflow} more`}\n          >\n            +{this.overflow}\n          </pf-avatar>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+import { g as getAvatarInitials } from './text-B8ulhYUJ.js';
+
+const pfAvatarCss = () => `:host{--pf-avatar-status-size:10px;--pf-avatar-status-offset:-2px;background:var(--pf-avatar-bg, var(--pf-surface-subtle));border:1px solid var(--pf-avatar-border, var(--pf-surface-border));border-radius:var(--radius-full);color:var(--pf-avatar-text);display:inline-flex;font-weight:var(--font-weight-semibold);justify-content:center;overflow:visible;position:relative;text-transform:uppercase;user-select:none}:host([size='sm']){--pf-avatar-status-size:9px;--pf-avatar-status-offset:-2px;font-size:var(--font-size-2xs);height:24px;width:24px}:host([size='md']){--pf-avatar-status-size:10px;--pf-avatar-status-offset:-2px;font-size:var(--font-size-xs);height:32px;width:32px}:host([size='lg']){--pf-avatar-status-size:12px;--pf-avatar-status-offset:-2px;font-size:var(--font-size-sm);height:40px;width:40px}:host([size='xl']){--pf-avatar-status-size:14px;--pf-avatar-status-offset:-1px;font-size:var(--font-size-md);height:56px;width:56px}.image{border-radius:inherit;display:block;height:100%;object-fit:cover;width:100%}.fallback{align-items:center;border-radius:inherit;display:inline-flex;height:100%;justify-content:center;line-height:1;width:100%}.status{border:2px solid var(--pf-avatar-status-border);border-radius:var(--radius-full);top:var(--pf-avatar-status-offset);height:var(--pf-avatar-status-size, 10px);position:absolute;inset-inline-end:var(--pf-avatar-status-offset);width:var(--pf-avatar-status-size, 10px);z-index:1}:host([status='online']) .status{background:var(--pf-avatar-status-online)}:host([status='away']) .status{background:var(--pf-avatar-status-away)}:host([status='busy']) .status{background:var(--pf-avatar-status-busy)}:host([status='offline']) .status{background:var(--pf-avatar-status-offline)}:host([hidden]){display:none}`;
+
+const PfAvatar = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Photo URL. Without one the avatar shows initials. */
+    src;
+    /** Alternative text for the photo. */
+    alt;
+    /** The person's name: used for the accessible name and the initials. */
+    name;
+    size = 'md';
+    /** Presence indicator. Decorative — convey it in text as well. */
+    status;
+    render() {
+        return (h(Host, { key: '0824f0bfb483b0be9d76d5e9044dd9e4ae248ebf', role: this.name ? 'img' : null, "aria-label": this.name }, this.src ? (h("img", { class: "image", part: "image", src: this.src, alt: this.alt ?? (this.name ? '' : 'Avatar') })) : (h("span", { class: "fallback", part: "fallback", "aria-hidden": "true" }, h("slot", null, getAvatarInitials(this.name)))), this.status && h("span", { key: '25327b534f0c459ecfd499f4eaca1f5d7484968c', class: "status", part: "status", "aria-hidden": "true" })));
+    }
+};
+PfAvatar.style = pfAvatarCss();
+
+export { PfAvatar as pf_avatar };
+//# sourceMappingURL=pf-avatar.entry.js.map
+
+//# sourceMappingURL=pf-avatar.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-avatar.entry.js","sources":["src/components/pf-avatar/pf-avatar.css?tag=pf-avatar&encapsulation=shadow","src/components/pf-avatar/pf-avatar.tsx"],"sourcesContent":[":host {\n  --pf-avatar-status-size: 10px;\n  --pf-avatar-status-offset: -2px;\n\n  background: var(--pf-avatar-bg, var(--pf-surface-subtle));\n  border: 1px solid var(--pf-avatar-border, var(--pf-surface-border));\n  border-radius: var(--radius-full);\n  color: var(--pf-avatar-text);\n  display: inline-flex;\n  font-weight: var(--font-weight-semibold);\n  justify-content: center;\n  overflow: visible;\n  position: relative;\n  text-transform: uppercase;\n  user-select: none;\n}\n\n:host([size='sm']) {\n  --pf-avatar-status-size: 9px;\n  --pf-avatar-status-offset: -2px;\n\n  font-size: var(--font-size-2xs);\n  height: 24px;\n  width: 24px;\n}\n\n:host([size='md']) {\n  --pf-avatar-status-size: 10px;\n  --pf-avatar-status-offset: -2px;\n\n  font-size: var(--font-size-xs);\n  height: 32px;\n  width: 32px;\n}\n\n:host([size='lg']) {\n  --pf-avatar-status-size: 12px;\n  --pf-avatar-status-offset: -2px;\n\n  font-size: var(--font-size-sm);\n  height: 40px;\n  width: 40px;\n}\n\n:host([size='xl']) {\n  --pf-avatar-status-size: 14px;\n  --pf-avatar-status-offset: -1px;\n\n  font-size: var(--font-size-md);\n  height: 56px;\n  width: 56px;\n}\n\n.image {\n  border-radius: inherit;\n  display: block;\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n\n.fallback {\n  align-items: center;\n  border-radius: inherit;\n  display: inline-flex;\n  height: 100%;\n  justify-content: center;\n  line-height: 1;\n  width: 100%;\n}\n\n.status {\n  border: 2px solid var(--pf-avatar-status-border);\n  border-radius: var(--radius-full);\n  top: var(--pf-avatar-status-offset);\n  height: var(--pf-avatar-status-size, 10px);\n  position: absolute;\n  inset-inline-end: var(--pf-avatar-status-offset);\n  width: var(--pf-avatar-status-size, 10px);\n  z-index: 1;\n}\n\n:host([status='online']) .status {\n  background: var(--pf-avatar-status-online);\n}\n\n:host([status='away']) .status {\n  background: var(--pf-avatar-status-away);\n}\n\n:host([status='busy']) .status {\n  background: var(--pf-avatar-status-busy);\n}\n\n:host([status='offline']) .status {\n  background: var(--pf-avatar-status-offline);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { getAvatarInitials } from '@pitchfork-ui/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfAvatarSize = 'sm' | 'md' | 'lg' | 'xl';\nexport type PfAvatarStatus = 'online' | 'away' | 'busy' | 'offline';\n\n/**\n * A person or entity, as a photo or as initials.\n *\n * The initials are derived from `name` by core's `avatarInitials`, so this and\n * the React `Avatar` shorten the same name the same way.\n *\n * @slot - overrides the derived initials.\n * @part image - the photo, when `src` is set.\n * @part fallback - the initials, when it is not.\n * @part status - the presence dot, when `status` is set.\n */\n@Component({\n  tag: 'pf-avatar',\n  styleUrl: 'pf-avatar.css',\n  shadow: true,\n})\nexport class PfAvatar {\n  /** Photo URL. Without one the avatar shows initials. */\n  @Prop() src?: string;\n\n  /** Alternative text for the photo. */\n  @Prop() alt?: string;\n\n  /** The person's name: used for the accessible name and the initials. */\n  @Prop() name?: string;\n\n  @Prop({ reflect: true }) size: PfAvatarSize = 'md';\n\n  /** Presence indicator. Decorative — convey it in text as well. */\n  @Prop({ reflect: true }) status?: PfAvatarStatus;\n\n  render() {\n    return (\n      <Host role={this.name ? 'img' : null} aria-label={this.name}>\n        {this.src ? (\n          <img\n            class=\"image\"\n            part=\"image\"\n            src={this.src}\n            alt={this.alt ?? (this.name ? '' : 'Avatar')}\n          />\n        ) : (\n          <span class=\"fallback\" part=\"fallback\" aria-hidden=\"true\">\n            <slot>{getAvatarInitials(this.name)}</slot>\n          </span>\n        )}\n        {this.status && <span class=\"status\" part=\"status\" aria-hidden=\"true\"></span>}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,+tDAA+tD,CAAC;;MCsB9uD,QAAQ,GAAA,MAAA;;;;;AAEX,IAAA,GAAG;;AAGH,IAAA,GAAG;;AAGH,IAAA,IAAI;IAEa,IAAI,GAAiB,IAAI;;AAGzB,IAAA,MAAM;IAE/B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,EAAA,YAAA,EAAc,IAAI,CAAC,IAAI,EAAA,EACxD,IAAI,CAAC,GAAG,IACP,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,QAAQ,CAAC,EAAA,CAC5C,KAEF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAA,aAAA,EAAa,MAAM,EAAA,EACvD,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CACtC,CACR,EACA,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,aAAA,EAAa,MAAM,EAAA,CAAQ,CACxE;;;;;;;"}

package/dist/esm/pf-badge-group.entry.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfBadgeGroupCss = () => `:host{align-items:center;display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1}:host([hidden]){display:none}.badge,.text{border:1px solid;display:inline-flex;min-height:24px;padding:0 var(--space-2);white-space:nowrap}.badge{align-items:center;border-radius:var(--radius-full);z-index:1}.text{align-items:center}:host([badge-position='leading']) .text{border-radius:0 var(--radius-full) var(--radius-full) 0;margin-inline-start:-1px;padding-inline-start:calc(var(--space-2) + 2px)}:host([badge-position='leading']) .badge{border-radius:var(--radius-full) 0 0 var(--radius-full)}:host([badge-position='trailing']) .text{border-radius:var(--radius-full) 0 0 var(--radius-full);margin-inline-end:-1px;padding-inline-end:calc(var(--space-2) + 2px)}:host([badge-position='trailing']) .badge{border-radius:0 var(--radius-full) var(--radius-full) 0}:host([color='gray']) .badge{background:var(--pf-badgegroup-gray-100);border-color:var(--pf-badgegroup-gray-200);color:var(--pf-badgegroup-gray-700)}:host([color='brand']) .badge{background:var(--pf-badgegroup-brand-100);border-color:var(--pf-badgegroup-brand-300);color:var(--pf-badgegroup-brand-700)}:host([color='error']) .badge{background:var(--pf-badgegroup-danger-bg);border-color:var(--pf-badgegroup-danger-border);color:var(--pf-badgegroup-danger-text)}:host([color='warning']) .badge{background:var(--pf-badgegroup-warning-bg);border-color:var(--pf-badgegroup-warning-border);color:var(--pf-badgegroup-warning-text)}:host([color='success']) .badge{background:var(--pf-badgegroup-success-bg);border-color:var(--pf-badgegroup-success-border);color:var(--pf-badgegroup-success-text)}:host([appearance='pill']) .text{background:var(--pf-badgegroup-surface-bg, var(--pf-surface-bg))}:host([appearance='modern']) .text{background:var(--pf-badgegroup-surface-subtle, var(--pf-surface-subtle))}:host([color='gray']) .text{border-color:var(--pf-badgegroup-gray-200);color:var(--pf-badgegroup-gray-700)}:host([color='brand']) .text{border-color:var(--pf-badgegroup-brand-300);color:var(--pf-badgegroup-brand-700)}:host([color='error']) .text{border-color:var(--pf-badgegroup-danger-border);color:var(--pf-badgegroup-danger-text)}:host([color='warning']) .text{border-color:var(--pf-badgegroup-warning-border);color:var(--pf-badgegroup-warning-text)}:host([color='success']) .text{border-color:var(--pf-badgegroup-success-border);color:var(--pf-badgegroup-success-text)}`;
+
+const PfBadgeGroup = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The badge's text. */
+    label = '';
+    /** The message beside the badge. */
+    message = '';
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    color = 'gray';
+    /** Surface treatment for the message. Reflected for the stylesheet. */
+    appearance = 'pill';
+    /** Which side the badge sits on. Reflected for the stylesheet. */
+    badgePosition = 'leading';
+    render() {
+        const badge = (h("span", { key: 'decc69e468385f59c798b7b5fc542fd9f0fc76be', class: "badge", part: "badge" }, this.label));
+        const text = (h("span", { key: '944cbbd02fab9c6cc3c344464a55bc2f0d5c2082', class: "text", part: "text" }, this.message));
+        /*
+         * Ordered in the DOM rather than reversed with `flex-direction`, so a
+         * screen reader reads the badge and the message in the order they appear.
+         */
+        return h(Host, { key: 'cdb8ab25262ced71a32ad6de49f3eab4e3daab6a' }, this.badgePosition === 'leading' ? [badge, text] : [text, badge]);
+    }
+};
+PfBadgeGroup.style = pfBadgeGroupCss();
+
+export { PfBadgeGroup as pf_badge_group };
+//# sourceMappingURL=pf-badge-group.entry.js.map
+
+//# sourceMappingURL=pf-badge-group.entry.js.map

package/dist/esm/pf-badge-group.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge-group.entry.js","sources":["src/components/pf-badge-group/pf-badge-group.css?tag=pf-badge-group&encapsulation=shadow","src/components/pf-badge-group/pf-badge-group.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.badge,\n.text {\n  border: 1px solid;\n  display: inline-flex;\n  min-height: 24px;\n  padding: 0 var(--space-2);\n  white-space: nowrap;\n}\n\n.badge {\n  align-items: center;\n  border-radius: var(--radius-full);\n  /* Above the text, so the shared edge shows the badge's border, not both. */\n  z-index: 1;\n}\n\n.text {\n  align-items: center;\n}\n\n/*\n * The two halves overlap by a pixel so their borders coincide into one line,\n * and the inner padding gains that pixel back so the text is not pulled\n * off-centre.\n */\n:host([badge-position='leading']) .text {\n  border-radius: 0 var(--radius-full) var(--radius-full) 0;\n  margin-inline-start: -1px;\n  padding-inline-start: calc(var(--space-2) + 2px);\n}\n\n:host([badge-position='leading']) .badge {\n  border-radius: var(--radius-full) 0 0 var(--radius-full);\n}\n\n:host([badge-position='trailing']) .text {\n  border-radius: var(--radius-full) 0 0 var(--radius-full);\n  margin-inline-end: -1px;\n  padding-inline-end: calc(var(--space-2) + 2px);\n}\n\n:host([badge-position='trailing']) .badge {\n  border-radius: 0 var(--radius-full) var(--radius-full) 0;\n}\n\n:host([color='gray']) .badge {\n  background: var(--pf-badgegroup-gray-100);\n  border-color: var(--pf-badgegroup-gray-200);\n  color: var(--pf-badgegroup-gray-700);\n}\n\n:host([color='brand']) .badge {\n  background: var(--pf-badgegroup-brand-100);\n  border-color: var(--pf-badgegroup-brand-300);\n  color: var(--pf-badgegroup-brand-700);\n}\n\n:host([color='error']) .badge {\n  background: var(--pf-badgegroup-danger-bg);\n  border-color: var(--pf-badgegroup-danger-border);\n  color: var(--pf-badgegroup-danger-text);\n}\n\n:host([color='warning']) .badge {\n  background: var(--pf-badgegroup-warning-bg);\n  border-color: var(--pf-badgegroup-warning-border);\n  color: var(--pf-badgegroup-warning-text);\n}\n\n:host([color='success']) .badge {\n  background: var(--pf-badgegroup-success-bg);\n  border-color: var(--pf-badgegroup-success-border);\n  color: var(--pf-badgegroup-success-text);\n}\n\n:host([appearance='pill']) .text {\n  background: var(--pf-badgegroup-surface-bg, var(--pf-surface-bg));\n}\n\n:host([appearance='modern']) .text {\n  background: var(--pf-badgegroup-surface-subtle, var(--pf-surface-subtle));\n}\n\n:host([color='gray']) .text {\n  border-color: var(--pf-badgegroup-gray-200);\n  color: var(--pf-badgegroup-gray-700);\n}\n\n:host([color='brand']) .text {\n  border-color: var(--pf-badgegroup-brand-300);\n  color: var(--pf-badgegroup-brand-700);\n}\n\n:host([color='error']) .text {\n  border-color: var(--pf-badgegroup-danger-border);\n  color: var(--pf-badgegroup-danger-text);\n}\n\n:host([color='warning']) .text {\n  border-color: var(--pf-badgegroup-warning-border);\n  color: var(--pf-badgegroup-warning-text);\n}\n\n:host([color='success']) .text {\n  border-color: var(--pf-badgegroup-success-border);\n  color: var(--pf-badgegroup-success-text);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfBadgeGroupColor = 'gray' | 'brand' | 'error' | 'warning' | 'success';\nexport type PfBadgeGroupAppearance = 'pill' | 'modern';\nexport type PfBadgeGroupBadgePosition = 'leading' | 'trailing';\n\n/**\n * A badge joined to a line of text, sharing one rounded outline — the\n * \"2 new · See what's changed\" pattern.\n *\n * @part badge - the coloured badge.\n * @part text - the message beside it.\n */\n@Component({\n  tag: 'pf-badge-group',\n  styleUrl: 'pf-badge-group.css',\n  shadow: true,\n})\nexport class PfBadgeGroup {\n  /** The badge's text. */\n  @Prop() label = '';\n\n  /** The message beside the badge. */\n  @Prop() message = '';\n\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) color: PfBadgeGroupColor = 'gray';\n\n  /** Surface treatment for the message. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) appearance: PfBadgeGroupAppearance = 'pill';\n\n  /** Which side the badge sits on. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) badgePosition: PfBadgeGroupBadgePosition = 'leading';\n\n  render() {\n    const badge = (\n      <span class=\"badge\" part=\"badge\">\n        {this.label}\n      </span>\n    );\n    const text = (\n      <span class=\"text\" part=\"text\">\n        {this.message}\n      </span>\n    );\n\n    /*\n     * Ordered in the DOM rather than reversed with `flex-direction`, so a\n     * screen reader reads the badge and the message in the order they appear.\n     */\n    return <Host>{this.badgePosition === 'leading' ? [badge, text] : [text, badge]}</Host>;\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,05EAA05E,CAAC;;MCkB76E,YAAY,GAAA,MAAA;;;;;IAEf,KAAK,GAAG,EAAE;;IAGV,OAAO,GAAG,EAAE;;IAGK,KAAK,GAAsB,MAAM;;IAGjC,UAAU,GAA2B,MAAM;;IAG3C,aAAa,GAA8B,SAAS;IAE7E,MAAM,GAAA;QACJ,MAAM,KAAK,IACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,IAAI,CAAC,KAAK,CACN,CACR;QACD,MAAM,IAAI,IACR,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC3B,IAAI,CAAC,OAAO,CACR,CACR;AAED;;;AAGG;AACH,QAAA,OAAO,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,IAAI,CAAC,aAAa,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAQ;;;;;;;"}

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

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfBadgeCss = () => `:host{align-items:center;border-radius:var(--radius-full);display:inline-flex;font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1;min-height:22px;padding:0 var(--space-2)}:host([hidden]){display:none}:host([variant='neutral']){background:var(--pf-badge-neutral-background);color:var(--pf-badge-neutral-foreground)}:host([variant='brand']){background:var(--pf-badge-brand-background);color:var(--pf-badge-brand-foreground)}:host([variant='success']){background:var(--pf-badge-success-background);color:var(--pf-badge-success-foreground)}:host([variant='warning']){background:var(--pf-badge-warning-background);color:var(--pf-badge-warning-foreground)}:host([variant='danger']){background:var(--pf-badge-danger-background);color:var(--pf-badge-danger-foreground)}`;
+
+const PfBadge = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant = 'neutral';
+    render() {
+        return (h(Host, { key: 'b89402baeefee0c660694be6d26124c7b5a7c44f' }, h("slot", { key: '5df44b2057e50dfe77519f03ac67b2a1a287ec2d' })));
+    }
+};
+PfBadge.style = pfBadgeCss();
+
+export { PfBadge as pf_badge };
+//# sourceMappingURL=pf-badge.entry.js.map
+
+//# sourceMappingURL=pf-badge.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge.entry.js","sources":["src/components/pf-badge/pf-badge.css?tag=pf-badge&encapsulation=shadow","src/components/pf-badge/pf-badge.tsx"],"sourcesContent":["/*\n * The host is the badge. There is no inner wrapper to expose as a part,\n * because a consumer styling the badge styles `pf-badge` itself.\n */\n:host {\n  align-items: center;\n  border-radius: var(--radius-full);\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-medium);\n  line-height: 1;\n  min-height: 22px;\n  padding: 0 var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([variant='neutral']) {\n  background: var(--pf-badge-neutral-background);\n  color: var(--pf-badge-neutral-foreground);\n}\n\n:host([variant='brand']) {\n  background: var(--pf-badge-brand-background);\n  color: var(--pf-badge-brand-foreground);\n}\n\n:host([variant='success']) {\n  background: var(--pf-badge-success-background);\n  color: var(--pf-badge-success-foreground);\n}\n\n:host([variant='warning']) {\n  background: var(--pf-badge-warning-background);\n  color: var(--pf-badge-warning-foreground);\n}\n\n:host([variant='danger']) {\n  background: var(--pf-badge-danger-background);\n  color: var(--pf-badge-danger-foreground);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfBadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';\n\n/**\n * A short status or count, rendered inline with the text around it.\n *\n * The leaf the `::part()` and reflected-attribute conventions were established\n * on, back when the stakes were low.\n *\n * @slot - the badge's content.\n */\n@Component({\n  tag: 'pf-badge',\n  styleUrl: 'pf-badge.css',\n  shadow: true,\n})\nexport class PfBadge {\n  /** Colour treatment. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfBadgeVariant = 'neutral';\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,UAAU,GAAG,MAAM,CAAC,uxBAAuxB,CAAC;;MCiBryB,OAAO,GAAA,MAAA;;;;;IAEO,OAAO,GAAmB,SAAS;IAE5D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

package/dist/esm/pf-bar-chart.entry.js

@@ -0,0 +1,110 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { c as chartSeriesColor, n as niceAxisTicks, b as barGeometry, C as CHART_VIEW, p as plotY, a as CHART_PADDING, d as CHART_PLOT, f as formatAxisTick, e as axisLabelStep } from './cartesian-rMXGMSEx.js';
+import './pie-COAc4ZDB.js';
+
+const pfBarChartCss = () => `:host{display:flex;flex-direction:column;gap:var(--space-3);width:100%}:host([hidden]){display:none}.svg{display:block;height:auto;overflow:visible;width:100%}.empty{align-items:center;color:var(--pf-chart-text-muted);display:flex;font-size:var(--font-size-sm);height:120px;justify-content:center}.grid{stroke:var(--pf-chart-grid);stroke-width:1}.tick{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs)}.tick--y{dominant-baseline:middle;text-anchor:end}.tick--x{dominant-baseline:hanging;text-anchor:middle}.axis-label{fill:var(--pf-chart-text-muted);font-family:inherit;font-size:var(--font-size-2xs);text-anchor:middle}.bar{transition:opacity 80ms ease}.bar:hover{opacity:0.75}.legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);list-style:none;margin:0;padding:0;padding-inline-start:var(--pf-chart-plot-inset-left, 0)}.legend.legend--hidden{display:none}.legend slot{display:contents}@media (prefers-reduced-motion: reduce){.bar{transition:none}}`;
+
+const PfBarChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** The rows to plot. An array, or JSON for plain HTML. */
+    data = [];
+    /** Stack each group's series rather than standing them side by side. */
+    stacked = false;
+    showLegend = true;
+    yAxisLabel;
+    label;
+    series = [];
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only; named to avoid shadowing `Element.children`. */
+    get seriesElements() {
+        return Array.from(this.el.children).filter((child) => child.tagName.toLowerCase() === 'pf-chart-series');
+    }
+    get rows() {
+        const raw = this.data;
+        if (Array.isArray(raw))
+            return raw;
+        try {
+            const parsed = JSON.parse(String(raw || '[]'));
+            return Array.isArray(parsed) ? parsed : [];
+        }
+        catch {
+            return [];
+        }
+    }
+    sync() {
+        this.series = this.seriesElements.map((element, index) => {
+            const node = element;
+            const color = chartSeriesColor(index, node.color ?? element.getAttribute('color') ?? undefined);
+            element.swatch = color;
+            return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };
+        });
+    }
+    render() {
+        const rows = this.rows;
+        const series = this.series;
+        if (rows.length === 0 || series.length === 0) {
+            return (h(Host, null, h("div", { class: "empty", part: "empty" }, h("slot", { name: "empty" }, "No data")), h("ul", { class: "legend legend--hidden", part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+        }
+        /*
+         * Clamped here and nowhere else. A negative value must not pull a stack
+         * down, and it must not give a `<rect>` a negative `height` — which is
+         * an error the browser drops the element for. One clamp rather than two,
+         * so there is one thing to keep right.
+         */
+        const valueAt = (row, key) => Math.max(0, Number(row[key] ?? 0) || 0);
+        /*
+         * A stacked chart's scale is the tallest *stack*, not the tallest bar —
+         * otherwise the top of the stack is drawn above the plot.
+         */
+        const totals = this.stacked
+            ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))
+            : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));
+        const ticks = niceAxisTicks(Math.max(0, ...totals));
+        const maxTick = ticks[ticks.length - 1];
+        const geometry = barGeometry(rows.length, series.length, this.stacked);
+        const labelStep = axisLabelStep(rows.length);
+        const floor = CHART_PADDING.top + CHART_PLOT.height;
+        return (h(Host, { style: {
+                '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,
+            } }, h("svg", { class: "svg", part: "svg", viewBox: `0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`, role: "img", "aria-label": this.label ?? this.yAxisLabel ?? 'Bar chart' }, ticks.map((tick) => {
+            const y = plotY(tick, maxTick);
+            return (h("g", null, h("line", { class: "grid", part: "grid", x1: CHART_PADDING.left, y1: y, x2: CHART_PADDING.left + CHART_PLOT.width, y2: y }), h("text", { class: "tick tick--y", part: "tick", x: CHART_PADDING.left - 8, y: y }, formatAxisTick(tick))));
+        }), rows.map((row, index) => index % labelStep === 0 ? (h("text", { class: "tick tick--x", part: "tick", x: geometry.groupCenters[index], y: floor + 20 }, row.label)) : null), this.yAxisLabel && (h("text", { class: "axis-label", x: -112, y: 14, transform: "rotate(-90)" }, this.yAxisLabel)), rows.map((row, groupIndex) => {
+            let base = 0;
+            return (h("g", null, series.map((item, seriesIndex) => {
+                const value = valueAt(row, item.key);
+                const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;
+                const x = this.stacked
+                    ? geometry.groupLefts[groupIndex]
+                    : geometry.groupLefts[groupIndex] +
+                        seriesIndex * (geometry.barWidth + geometry.gap);
+                const y = this.stacked ? plotY(base + value, maxTick) : floor - height;
+                if (this.stacked)
+                    base += value;
+                return (h("rect", { class: "bar", part: "bar", x: x, y: y, width: geometry.barWidth, height: height, rx: "2", fill: item.color }, h("title", null, `${row.label} — ${item.key}: ${formatAxisTick(value)}`)));
+            })));
+        })), h("ul", { class: { legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }, part: "legend" }, h("slot", { onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "data": [{
+                "sync": 0
+            }]
+    }; }
+};
+PfBarChart.style = pfBarChartCss();
+
+export { PfBarChart as pf_bar_chart };
+//# sourceMappingURL=pf-bar-chart.entry.js.map
+
+//# sourceMappingURL=pf-bar-chart.entry.js.map

package/dist/esm/pf-bar-chart.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-bar-chart.entry.js","sources":["src/components/pf-bar-chart/pf-bar-chart.css?tag=pf-bar-chart&encapsulation=shadow","src/components/pf-bar-chart/pf-bar-chart.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.svg {\n  display: block;\n  height: auto;\n  /* The y-axis label is drawn outside the plot, so the box must not clip. */\n  overflow: visible;\n  width: 100%;\n}\n\n.empty {\n  align-items: center;\n  color: var(--pf-chart-text-muted);\n  display: flex;\n  font-size: var(--font-size-sm);\n  height: 120px;\n  justify-content: center;\n}\n\n.grid {\n  stroke: var(--pf-chart-grid);\n  stroke-width: 1;\n}\n\n.tick {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n}\n\n.tick--y {\n  dominant-baseline: middle;\n  text-anchor: end;\n}\n\n.tick--x {\n  dominant-baseline: hanging;\n  text-anchor: middle;\n}\n\n.axis-label {\n  fill: var(--pf-chart-text-muted);\n  font-family: inherit;\n  font-size: var(--font-size-2xs);\n  text-anchor: middle;\n}\n\n.bar {\n  transition: opacity 80ms ease;\n}\n\n.bar:hover {\n  opacity: 0.75;\n}\n\n.legend {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-4);\n  list-style: none;\n  margin: 0;\n  /*\n   * Lines the legend's start edge up with the plot area: the SVG is inset by\n   * the y-axis gutter, and the inset is set inline from the chart's geometry.\n   */\n  padding: 0;\n  padding-inline-start: var(--pf-chart-plot-inset-left, 0);\n}\n\n/*\n * Hidden rather than dropped, so the series stay slotted and `slotchange`\n * still fires. Two classes deep, because the tie breaks on source order.\n */\n.legend.legend--hidden {\n  display: none;\n}\n\n/* The series are flex children of the list, not of a box inside it. */\n.legend slot {\n  display: contents;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar {\n    transition: none;\n  }\n}\n","import {\n  CHART_PADDING,\n  CHART_PLOT,\n  CHART_VIEW,\n  axisLabelStep,\n  barGeometry,\n  chartSeriesColor,\n  formatAxisTick,\n  niceAxisTicks,\n  plotY,\n} from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { PfChartRow } from '../pf-line-chart/pf-line-chart';\n\n/**\n * A grouped or stacked bar chart over `pf-chart-series` children.\n *\n * The same split as `pf-line-chart`: the rows are bulk numbers in a property,\n * the series are named and coloured and live in the light DOM so the legend\n * can reach their labels.\n *\n * @slot - the `pf-chart-series` children.\n * @slot empty - what to show when there is nothing to draw.\n * @part svg - the drawing.\n * @part grid - one gridline.\n * @part tick - one axis label.\n * @part bar - one bar.\n * @part legend - the list the series are slotted into.\n * @part empty - the empty state's box.\n */\n@Component({\n  tag: 'pf-bar-chart',\n  styleUrl: 'pf-bar-chart.css',\n  shadow: true,\n})\nexport class PfBarChart {\n  @Element() el!: HTMLElement;\n\n  /** The rows to plot. An array, or JSON for plain HTML. */\n  @Prop() data: PfChartRow[] | string = [];\n\n  /** Stack each group's series rather than standing them side by side. */\n  @Prop({ reflect: true }) stacked = false;\n\n  @Prop({ reflect: true }) showLegend = true;\n\n  @Prop() yAxisLabel?: string;\n\n  @Prop() label?: string;\n\n  @State() series: { key: string; color: string }[] = [];\n\n  componentWillLoad() {\n    this.sync();\n  }\n\n  componentDidLoad() {\n    this.sync();\n  }\n\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only; named to avoid shadowing `Element.children`. */\n  private get seriesElements(): HTMLElement[] {\n    return Array.from(this.el.children).filter(\n      (child) => child.tagName.toLowerCase() === 'pf-chart-series',\n    ) as HTMLElement[];\n  }\n\n  private get rows(): PfChartRow[] {\n    const raw = this.data;\n    if (Array.isArray(raw)) return raw;\n\n    try {\n      const parsed = JSON.parse(String(raw || '[]'));\n      return Array.isArray(parsed) ? parsed : [];\n    } catch {\n      return [];\n    }\n  }\n\n  @Watch('data')\n  sync() {\n    this.series = this.seriesElements.map((element, index) => {\n      const node = element as HTMLElement & { seriesKey?: string; color?: string };\n      const color = chartSeriesColor(\n        index,\n        node.color ?? element.getAttribute('color') ?? undefined,\n      );\n\n      (element as HTMLElement & { swatch: string }).swatch = color;\n\n      return { key: node.seriesKey ?? element.getAttribute('series-key') ?? '', color };\n    });\n  }\n\n  render() {\n    const rows = this.rows;\n    const series = this.series;\n\n    if (rows.length === 0 || series.length === 0) {\n      return (\n        <Host>\n          <div class=\"empty\" part=\"empty\">\n            <slot name=\"empty\">No data</slot>\n          </div>\n          <ul class=\"legend legend--hidden\" part=\"legend\">\n            <slot onSlotchange={() => this.refresh()} />\n          </ul>\n        </Host>\n      );\n    }\n\n    /*\n     * Clamped here and nowhere else. A negative value must not pull a stack\n     * down, and it must not give a `<rect>` a negative `height` — which is\n     * an error the browser drops the element for. One clamp rather than two,\n     * so there is one thing to keep right.\n     */\n    const valueAt = (row: PfChartRow, key: string) => Math.max(0, Number(row[key] ?? 0) || 0);\n    /*\n     * A stacked chart's scale is the tallest *stack*, not the tallest bar —\n     * otherwise the top of the stack is drawn above the plot.\n     */\n    const totals = this.stacked\n      ? rows.map((row) => series.reduce((sum, item) => sum + valueAt(row, item.key), 0))\n      : series.flatMap((item) => rows.map((row) => valueAt(row, item.key)));\n\n    const ticks = niceAxisTicks(Math.max(0, ...totals));\n    const maxTick = ticks[ticks.length - 1];\n    const geometry = barGeometry(rows.length, series.length, this.stacked);\n    const labelStep = axisLabelStep(rows.length);\n    const floor = CHART_PADDING.top + CHART_PLOT.height;\n\n    return (\n      <Host\n        style={{\n          '--pf-chart-plot-inset-left': `${(CHART_PADDING.left / CHART_VIEW.width) * 100}%`,\n        }}\n      >\n        <svg\n          class=\"svg\"\n          part=\"svg\"\n          viewBox={`0 0 ${CHART_VIEW.width} ${CHART_VIEW.height}`}\n          role=\"img\"\n          aria-label={this.label ?? this.yAxisLabel ?? 'Bar chart'}\n        >\n          {ticks.map((tick) => {\n            const y = plotY(tick, maxTick);\n            return (\n              <g>\n                <line\n                  class=\"grid\"\n                  part=\"grid\"\n                  x1={CHART_PADDING.left}\n                  y1={y}\n                  x2={CHART_PADDING.left + CHART_PLOT.width}\n                  y2={y}\n                />\n                <text class=\"tick tick--y\" part=\"tick\" x={CHART_PADDING.left - 8} y={y}>\n                  {formatAxisTick(tick)}\n                </text>\n              </g>\n            );\n          })}\n\n          {rows.map((row, index) =>\n            index % labelStep === 0 ? (\n              <text\n                class=\"tick tick--x\"\n                part=\"tick\"\n                x={geometry.groupCenters[index]}\n                y={floor + 20}\n              >\n                {row.label}\n              </text>\n            ) : null,\n          )}\n\n          {this.yAxisLabel && (\n            <text\n              class=\"axis-label\"\n              x={-(CHART_PADDING.top + CHART_PLOT.height / 2)}\n              y={14}\n              transform=\"rotate(-90)\"\n            >\n              {this.yAxisLabel}\n            </text>\n          )}\n\n          {rows.map((row, groupIndex) => {\n            let base = 0;\n\n            return (\n              <g>\n                {series.map((item, seriesIndex) => {\n                  const value = valueAt(row, item.key);\n                  const height = (value / (maxTick > 0 ? maxTick : 1)) * CHART_PLOT.height;\n                  const x = this.stacked\n                    ? geometry.groupLefts[groupIndex]\n                    : geometry.groupLefts[groupIndex] +\n                      seriesIndex * (geometry.barWidth + geometry.gap);\n                  const y = this.stacked ? plotY(base + value, maxTick) : floor - height;\n\n                  if (this.stacked) base += value;\n\n                  return (\n                    <rect\n                      class=\"bar\"\n                      part=\"bar\"\n                      x={x}\n                      y={y}\n                      width={geometry.barWidth}\n                      height={height}\n                      rx=\"2\"\n                      fill={item.color}\n                    >\n                      <title>{`${row.label} — ${item.key}: ${formatAxisTick(value)}`}</title>\n                    </rect>\n                  );\n                })}\n              </g>\n            );\n          })}\n        </svg>\n\n        <ul\n          class={{ legend: true, 'legend--hidden': !this.showLegend || series.length < 2 }}\n          part=\"legend\"\n        >\n          <slot onSlotchange={() => this.refresh()} />\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,w+BAAw+B,CAAC;;MCmCz/B,UAAU,GAAA,MAAA;;;;;;IAIb,IAAI,GAA0B,EAAE;;IAGf,OAAO,GAAG,KAAK;IAEf,UAAU,GAAG,IAAI;AAElC,IAAA,UAAU;AAEV,IAAA,KAAK;IAEJ,MAAM,GAAqC,EAAE;IAEtD,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGb,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;AAIb,IAAA,MAAM,OAAO,GAAA;QACX,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,IAAY,cAAc,GAAA;QACxB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,MAAM,CACxC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,iBAAiB,CAC5C;;AAGpB,IAAA,IAAY,IAAI,GAAA;AACd,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI;AACrB,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAAE,YAAA,OAAO,GAAG;AAElC,QAAA,IAAI;AACF,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,CAAC;AAC9C,YAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,GAAG,EAAE;;AAC1C,QAAA,MAAM;AACN,YAAA,OAAO,EAAE;;;IAKb,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;YACvD,MAAM,IAAI,GAAG,OAA+D;AAC5E,YAAA,MAAM,KAAK,GAAG,gBAAgB,CAC5B,KAAK,EACL,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,SAAS,CACzD;AAEA,YAAA,OAA4C,CAAC,MAAM,GAAG,KAAK;AAE5D,YAAA,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE;AACnF,SAAC,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI;AACtB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;AAE1B,QAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;AAC5C,YAAA,QACE,EAAC,IAAI,EAAA,IAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,OAAO,EAAA,EAAA,SAAA,CAAe,CAC7B,EACN,CAAA,CAAA,IAAA,EAAA,EAAI,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACzC,CACA;;AAIX;;;;;AAKG;QACH,MAAM,OAAO,GAAG,CAAC,GAAe,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AACzF;;;AAGG;AACH,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC;AAClB,cAAE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;AACjF,cAAE,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAEvE,QAAA,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,CAAC;QACnD,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACvC,QAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC;QACtE,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC;QAC5C,MAAM,KAAK,GAAG,aAAa,CAAC,GAAG,GAAG,UAAU,CAAC,MAAM;AAEnD,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,4BAA4B,EAAE,CAAA,EAAG,CAAC,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,IAAI,GAAG,CAAA,CAAA,CAAG;aAClF,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,OAAO,EAAE,CAAA,IAAA,EAAO,UAAU,CAAC,KAAK,CAAA,CAAA,EAAI,UAAU,CAAC,MAAM,CAAA,CAAE,EACvD,IAAI,EAAC,KAAK,EAAA,YAAA,EACE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,WAAW,EAAA,EAEvD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;YAClB,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,EAAE,OAAO,CAAC;AAC9B,YAAA,QACE,CAAA,CAAA,GAAA,EAAA,IAAA,EACE,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,aAAa,CAAC,IAAI,EACtB,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC,KAAK,EACzC,EAAE,EAAE,CAAC,EAAA,CACL,EACF,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,EAAA,EACnE,cAAc,CAAC,IAAI,CAAC,CAChB,CACL;SAEP,CAAC,EAED,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,KACnB,KAAK,GAAG,SAAS,KAAK,CAAC,IACrB,YACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,MAAM,EACX,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,CAAC,EAC/B,CAAC,EAAE,KAAK,GAAG,EAAE,EAAA,EAEZ,GAAG,CAAC,KAAK,CACL,IACL,IAAI,CACT,EAEA,IAAI,CAAC,UAAU,KACd,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,YAAY,EAClB,CAAC,EAAE,IAA4C,EAC/C,CAAC,EAAE,EAAE,EACL,SAAS,EAAC,aAAa,EAAA,EAEtB,IAAI,CAAC,UAAU,CACX,CACR,EAEA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,UAAU,KAAI;YAC5B,IAAI,IAAI,GAAG,CAAC;AAEZ,YAAA,QACE,CAAA,CAAA,GAAA,EAAA,IAAA,EACG,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,WAAW,KAAI;gBAChC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC;gBACpC,MAAM,MAAM,GAAG,CAAC,KAAK,IAAI,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,CAAC,IAAI,UAAU,CAAC,MAAM;AACxE,gBAAA,MAAM,CAAC,GAAG,IAAI,CAAC;AACb,sBAAE,QAAQ,CAAC,UAAU,CAAC,UAAU;AAChC,sBAAE,QAAQ,CAAC,UAAU,CAAC,UAAU,CAAC;wBAC/B,WAAW,IAAI,QAAQ,CAAC,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC;gBACpD,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,GAAG,KAAK,EAAE,OAAO,CAAC,GAAG,KAAK,GAAG,MAAM;gBAEtE,IAAI,IAAI,CAAC,OAAO;oBAAE,IAAI,IAAI,KAAK;AAE/B,gBAAA,QACE,CAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAC,KAAK,EACV,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,QAAQ,CAAC,QAAQ,EACxB,MAAM,EAAE,MAAM,EACd,EAAE,EAAC,GAAG,EACN,IAAI,EAAE,IAAI,CAAC,KAAK,EAAA,EAEhB,CAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,CAAA,EAAG,GAAG,CAAC,KAAK,CAAA,GAAA,EAAM,IAAI,CAAC,GAAG,CAAA,EAAA,EAAK,cAAc,CAAC,KAAK,CAAC,CAAA,CAAE,CAAS,CAClE;aAEV,CAAC,CACA;SAEP,CAAC,CACE,EAEN,CAAA,CAAA,IAAA,EAAA,EACE,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,EAChF,IAAI,EAAC,QAAQ,EAAA,EAEb,CAAA,CAAA,MAAA,EAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACzC,CACA;;;;;;;;;;;;"}

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

@@ -0,0 +1,41 @@
+import { r as registerInstance, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfBreadcrumbCss = () => `:host{align-items:center;display:inline-flex;gap:var(--space-2)}:host([hidden]){display:none}.link{color:var(--pf-breadcrumbs-link-color);font-size:var(--font-size-sm);line-height:1.4;text-decoration:none}a.link:hover{color:var(--pf-breadcrumbs-link-hover-color);text-decoration:underline}:host([current-page]) .link,.link[aria-current='page']{color:var(--pf-breadcrumbs-link-current-color);font-weight:var(--font-weight-medium);text-decoration:none}.separator{color:var(--pf-breadcrumbs-separator-color);display:inline-flex;font-size:var(--font-size-xs);line-height:1}`;
+
+const PfBreadcrumb = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */
+    href;
+    /**
+     * Set it to mark this crumb as the current page, rather than letting the
+     * last crumb be it.
+     *
+     * This is the *asking* half, and the group never writes it — `currentPage`
+     * below is the answer. Keeping the two apart is what lets the trail change:
+     * if the group wrote its answer back here, the crumb that happened to be
+     * last would look like a crumb the consumer had marked, and appending
+     * another would leave the mark behind on it.
+     */
+    current = false;
+    /**
+     * Set by the group: the resolved current page, which is the one thing that
+     * renders `aria-current="page"`. Exactly one crumb in a trail carries it.
+     */
+    currentPage = false;
+    /** Set by the group: no separator is drawn after the last crumb. */
+    last = false;
+    /** Set by the group from its own `separator`. */
+    separator = '/';
+    render() {
+        const label = h("slot", { key: '9867775efe95a88c9d79894089761a835aec4a2c' });
+        return (h(Host, { key: 'ed743e2c769ac704621241b6c63857e0919d7386', role: "listitem" }, this.href ? (h("a", { class: "link", part: "link", href: this.href, "aria-current": this.currentPage ? 'page' : null }, label)) : (h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null }, label)), !this.last && (h("span", { key: '0bf16efee1d46f196bbf61555d05042b0bb8040d', class: "separator", part: "separator", "aria-hidden": "true" }, this.separator))));
+    }
+};
+PfBreadcrumb.style = pfBreadcrumbCss();
+
+export { PfBreadcrumb as pf_breadcrumb };
+//# sourceMappingURL=pf-breadcrumb.entry.js.map
+
+//# sourceMappingURL=pf-breadcrumb.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-breadcrumb.entry.js","sources":["src/components/pf-breadcrumb/pf-breadcrumb.css?tag=pf-breadcrumb&encapsulation=shadow","src/components/pf-breadcrumb/pf-breadcrumb.tsx"],"sourcesContent":[":host {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--space-2);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.link {\n  color: var(--pf-breadcrumbs-link-color);\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  text-decoration: none;\n}\n\na.link:hover {\n  color: var(--pf-breadcrumbs-link-hover-color);\n  text-decoration: underline;\n}\n\n/*\n * `current-page` is the group's answer, not the consumer's `current` ask --\n * a trail where nothing was marked has a current page all the same, and this\n * is the attribute that says which.\n */\n:host([current-page]) .link,\n.link[aria-current='page'] {\n  color: var(--pf-breadcrumbs-link-current-color);\n  font-weight: var(--font-weight-medium);\n  text-decoration: none;\n}\n\n.separator {\n  color: var(--pf-breadcrumbs-separator-color);\n  display: inline-flex;\n  font-size: var(--font-size-xs);\n  line-height: 1;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * One crumb in a `pf-breadcrumbs` trail.\n *\n * With an `href` it renders a link; without one it renders a plain span, which\n * is both what a current page wants and the way to use a framework's own\n * router — slot an `<a routerLink>` or a `<Link>` in and leave `href` unset.\n *\n * `currentPage`, `last` and `separator` are the group's to set: only it can\n * see the trail. A consumer asks by setting `current`; the group resolves the\n * trail with core's rule and writes the answer to `currentPage`.\n *\n * @slot - the crumb's label.\n * @part link - the link, or the span standing in for one.\n * @part separator - the separator after this crumb. Absent on the last.\n */\n@Component({\n  tag: 'pf-breadcrumb',\n  styleUrl: 'pf-breadcrumb.css',\n  shadow: true,\n})\nexport class PfBreadcrumb {\n  /** Where the crumb goes. Reflected; a consumer's stylesheet reads it. */\n  @Prop({ reflect: true }) href?: string;\n\n  /**\n   * Set it to mark this crumb as the current page, rather than letting the\n   * last crumb be it.\n   *\n   * This is the *asking* half, and the group never writes it — `currentPage`\n   * below is the answer. Keeping the two apart is what lets the trail change:\n   * if the group wrote its answer back here, the crumb that happened to be\n   * last would look like a crumb the consumer had marked, and appending\n   * another would leave the mark behind on it.\n   */\n  @Prop({ reflect: true }) current = false;\n\n  /**\n   * Set by the group: the resolved current page, which is the one thing that\n   * renders `aria-current=\"page\"`. Exactly one crumb in a trail carries it.\n   */\n  @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n  /** Set by the group: no separator is drawn after the last crumb. */\n  @Prop({ mutable: true, reflect: true }) last = false;\n\n  /** Set by the group from its own `separator`. */\n  @Prop({ mutable: true }) separator = '/';\n\n  render() {\n    const label = <slot />;\n\n    return (\n      <Host role=\"listitem\">\n        {this.href ? (\n          <a\n            class=\"link\"\n            part=\"link\"\n            href={this.href}\n            aria-current={this.currentPage ? 'page' : null}\n          >\n            {label}\n          </a>\n        ) : (\n          <span class=\"link\" part=\"link\" aria-current={this.currentPage ? 'page' : null}>\n            {label}\n          </span>\n        )}\n        {!this.last && (\n          <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">\n            {this.separator}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,yjBAAyjB,CAAC;;MCsB5kB,YAAY,GAAA,MAAA;;;;;AAEE,IAAA,IAAI;AAE7B;;;;;;;;;AASG;IACsB,OAAO,GAAG,KAAK;AAExC;;;AAGG;IACqC,WAAW,GAAG,KAAK;;IAGnB,IAAI,GAAG,KAAK;;IAG3B,SAAS,GAAG,GAAG;IAExC,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ;AAEtB,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,UAAU,EAAA,EAClB,IAAI,CAAC,IAAI,IACR,CAAA,CAAA,GAAA,EAAA,EACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,cAAA,EACD,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,EAAA,EAE7C,KAAK,CACJ,KAEJ,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,cAAA,EAAe,IAAI,CAAC,WAAW,GAAG,MAAM,GAAG,IAAI,EAAA,EAC1E,KAAK,CACD,CACR,EACA,CAAC,IAAI,CAAC,IAAI,KACT,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,WAAW,EAAA,aAAA,EAAa,MAAM,EAAA,EACxD,IAAI,CAAC,SAAS,CACV,CACR,CACI;;;;;;;"}