@pitchfork-ui/elements 0.0.0-stage → 0.2.1

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

@@ -0,0 +1,140 @@
+: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);
+}
+
+/*
+ * The colours come from the reflected attribute rather than a class: the
+ * generated bindings set props as properties, so an unreflected prop would
+ * leave no attribute to select on.
+ */
+: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;
+}
+
+/*
+ * Two classes deep, because the ties break on source order. The slot stays
+ * rendered inside the hidden box, or content added later never fires
+ * `slotchange`.
+ */
+.body.empty {
+  display: none;
+}
+
+/* The browser's own paragraphs, if a consumer slots any. */
+::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;
+}
+
+/*
+ * Fade *and* collapse, so the content below reflows into the space rather
+ * than jumping when the alert is removed. This is the difference from
+ * `pf-notification`, which slides out of a stack instead.
+ */
+.alert--exiting {
+  animation: pf-alert-out var(--duration-moderate) var(--easing-accelerate) forwards;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+/* Its own copy: `@keyframes` do not cross a shadow boundary. */
+@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;
+  }
+}

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

@@ -0,0 +1,238 @@
+import { animationsFinished, liveRegionRole, severityIconName, } from "@pitchfork-ui/core";
+import { h, Host, } from "@stencil/core";
+/**
+ * An inline alert: an icon, a heading, a body and an optional dismiss button.
+ *
+ * The sibling of `pf-notification`, and deliberately a separate element
+ * rather than a variant of it: an alert belongs in the page's flow and
+ * collapses its own height when dismissed so the content below reflows, while
+ * a notification is one of a stack in a corner and slides out. The two look
+ * alike and behave differently, which is exactly when one element serving
+ * both goes wrong.
+ *
+ * The role comes from core's `liveRegionRole`, so `warning` and `danger`
+ * announce assertively and `info` and `success` wait their turn.
+ *
+ * @slot - the body, used instead of the `description` prop when present.
+ * @slot icon - replaces the icon the variant would choose.
+ * @part alert - the root box.
+ * @part icon - the icon's box.
+ * @part title - the heading.
+ * @part body - the description's box.
+ * @part dismiss - the dismiss button.
+ */
+export class PfAlert {
+    el;
+    /** 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" }))))));
+    }
+    static get is() { return "pf-alert"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-alert.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-alert.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAlertVariant",
+                    "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfAlertVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-alert/pf-alert.tsx",
+                            "id": "src/components/pf-alert/pf-alert.tsx::PfAlertVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reflected, because the stylesheet selects on it for the colours."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'info'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The body. A slotted body is used instead when there is one."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the dismiss button. Reflected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The dismiss button's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss alert'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "exiting": {},
+            "hasSlottedBody": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pfDismiss",
+                "name": "pfDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires once the alert has finished leaving."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "dismiss": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Dismisses the alert, waiting for its exit animation first.\n\nThe wait is core's `animationsFinished`, which asks the element what is\nactually running rather than sleeping for a duration someone wrote down:\nunder `prefers-reduced-motion` the stylesheet sets `animation: none`, no\ntest project applies `styleUrl` CSS at all, and a consumer may not have\nloaded the stylesheet \u2014 in all three an `animationend` listener would\nwait for ever and a timeout would be a fiction.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pf-alert.js.map

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

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

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

@@ -0,0 +1,101 @@
+: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;
+}

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

@@ -0,0 +1,152 @@
+import { getAvatarInitials } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A person or entity, as a photo or as initials.
+ *
+ * The initials are derived from `name` by core's `avatarInitials`, so this and
+ * the React `Avatar` shorten the same name the same way.
+ *
+ * @slot - overrides the derived initials.
+ * @part image - the photo, when `src` is set.
+ * @part fallback - the initials, when it is not.
+ * @part status - the presence dot, when `status` is set.
+ */
+export class PfAvatar {
+    /** 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" })));
+    }
+    static get is() { return "pf-avatar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-avatar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-avatar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "src": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Photo URL. Without one the avatar shows initials."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "src"
+            },
+            "alt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Alternative text for the photo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "alt"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The person's name: used for the accessible name and the initials."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAvatarSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "PfAvatarSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-avatar/pf-avatar.tsx",
+                            "id": "src/components/pf-avatar/pf-avatar.tsx::PfAvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAvatarStatus",
+                    "resolved": "\"away\" | \"busy\" | \"offline\" | \"online\" | undefined",
+                    "references": {
+                        "PfAvatarStatus": {
+                            "location": "local",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-avatar/pf-avatar.tsx",
+                            "id": "src/components/pf-avatar/pf-avatar.tsx::PfAvatarStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Presence indicator. Decorative \u2014 convey it in text as well."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "status"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-avatar.js","sourceRoot":"","sources":["../../../src/components/pf-avatar/pf-avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAKzD;;;;;;;;;;GAUG;AAMH,MAAM,OAAO,QAAQ;IACnB,wDAAwD;IAChD,GAAG,CAAU;IAErB,sCAAsC;IAC9B,GAAG,CAAU;IAErB,wEAAwE;IAChE,IAAI,CAAU;IAEG,IAAI,GAAiB,IAAI,CAAC;IAEnD,kEAAkE;IACzC,MAAM,CAAkB;IAEjD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,gBAAc,IAAI,CAAC,IAAI;YACxD,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CACV,WACE,KAAK,EAAC,OAAO,EACb,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,GAC5C,CACH,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,iBAAa,MAAM;gBACvD,gBAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAQ,CACtC,CACR;YACA,IAAI,CAAC,MAAM,IAAI,6DAAM,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,iBAAa,MAAM,GAAQ,CACxE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}