@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,55 @@
+:host {
+  /* How far each avatar laps over the one before it. */
+  --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;
+}
+
+/*
+ * The ring is drawn in the surface colour, so overlapping avatars stay
+ * separated. `position: relative` is what makes the z-index the group writes
+ * on each avatar mean anything.
+ */
+::slotted(pf-avatar),
+.overflow {
+  box-shadow: 0 0 0 2px var(--pf-avatar-group-ring);
+  position: relative;
+}
+
+/*
+ * `:not(:first-child)` inside `::slotted()` rather than a sibling combinator:
+ * the parens take a compound selector and no combinator, so `::slotted(a + a)`
+ * cannot be written -- the same limit that keeps pf-accordion's rule in the
+ * child. A pseudo-class is part of a compound selector, so this one is fine.
+ */
+::slotted(pf-avatar:not(:first-child)),
+.overflow {
+  margin-inline-start: calc(-1 * var(--pf-avatar-group-overlap));
+}
+
+/*
+ * Collapsed by the group. A data attribute of the group's own, so an avatar
+ * the *consumer* hid with `hidden` is a separate thing and still works.
+ */
+::slotted(pf-avatar[data-pf-overflow]) {
+  display: none;
+}
+
+/*
+ * The chip's colours go through the properties pf-avatar already reads, which
+ * inherit through the shadow boundary -- the pf-option bridge again, and the
+ * way to colour a nested element without reaching into its shadow root.
+ */
+.overflow {
+  --pf-avatar-bg: var(--pf-avatar-group-overflow-bg);
+  --pf-avatar-text: var(--pf-avatar-group-overflow-text);
+}

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

@@ -0,0 +1,222 @@
+import { avatarGroupLabel, splitAvatarGroup } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A stack of overlapping `pf-avatar` children, with a `+N` chip for the ones
+ * that did not fit.
+ *
+ * Children rather than an array of people, as everywhere else — a consumer
+ * loops in their own template, and each avatar keeps its own `src`, `name` and
+ * `status`.
+ *
+ * The chip is a `pf-avatar` of its own, in the shadow root: it needs an
+ * avatar's shape, size and ring, and reusing the element is how it gets them
+ * without a second copy of all three. Its colours come through the
+ * `--pf-avatar-*` properties the avatar already reads, which inherit through
+ * the shadow boundary.
+ *
+ * @slot - the `pf-avatar` children.
+ * @part overflow - the `+N` chip, when something did not fit.
+ */
+export class PfAvatarGroup {
+    el;
+    /** 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 is() { return "pf-avatar-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-avatar-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-avatar-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How many avatars to show before collapsing the rest into the chip."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfAvatarSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
+                    "references": {
+                        "PfAvatarSize": {
+                            "location": "import",
+                            "path": "../pf-avatar/pf-avatar",
+                            "id": "src/components/pf-avatar/pf-avatar.tsx::PfAvatarSize",
+                            "referenceLocation": "PfAvatarSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applied to every avatar in the group. Reflected, and pushed down."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "total": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The group's real size, for a group that knows how many people there are\nwithout being handed an avatar for each: five faces and `+35`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Overrides the generated name, which counts the people in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "overflow": {},
+            "counted": {}
+        };
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Re-reads the children, for a consumer who changed one through a property.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "max",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "size",
+                "methodName": "handleStateChange"
+            }, {
+                "propName": "total",
+                "methodName": "handleStateChange"
+            }];
+    }
+}
+//# sourceMappingURL=pf-avatar-group.js.map

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

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

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

@@ -0,0 +1,43 @@
+/*
+ * The host is the badge. There is no inner wrapper to expose as a part,
+ * because a consumer styling the badge styles `pf-badge` itself.
+ */
+: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);
+}

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

@@ -0,0 +1,59 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A short status or count, rendered inline with the text around it.
+ *
+ * The leaf the `::part()` and reflected-attribute conventions were established
+ * on, back when the stakes were low.
+ *
+ * @slot - the badge's content.
+ */
+export class PfBadge {
+    /** Colour treatment. Reflected so the stylesheet can select on it. */
+    variant = 'neutral';
+    render() {
+        return (h(Host, { key: 'b89402baeefee0c660694be6d26124c7b5a7c44f' }, h("slot", { key: '5df44b2057e50dfe77519f03ac67b2a1a287ec2d' })));
+    }
+    static get is() { return "pf-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfBadgeVariant",
+                    "resolved": "\"brand\" | \"danger\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfBadgeVariant": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-badge/pf-badge.tsx",
+                            "id": "src/components/pf-badge/pf-badge.tsx::PfBadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour treatment. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'neutral'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-badge.js","sourceRoot":"","sources":["../../../src/components/pf-badge/pf-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;;;;GAOG;AAMH,MAAM,OAAO,OAAO;IAClB,sEAAsE;IAC7C,OAAO,GAAmB,SAAS,CAAC;IAE7D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pf-badge-group/pf-badge-group.css

@@ -0,0 +1,119 @@
+: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);
+  /* Above the text, so the shared edge shows the badge's border, not both. */
+  z-index: 1;
+}
+
+.text {
+  align-items: center;
+}
+
+/*
+ * The two halves overlap by a pixel so their borders coincide into one line,
+ * and the inner padding gains that pixel back so the text is not pulled
+ * off-centre.
+ */
+: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);
+}

package/dist/collection/components/pf-badge-group/pf-badge-group.js

@@ -0,0 +1,164 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A badge joined to a line of text, sharing one rounded outline — the
+ * "2 new · See what's changed" pattern.
+ *
+ * @part badge - the coloured badge.
+ * @part text - the message beside it.
+ */
+export class PfBadgeGroup {
+    /** 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]);
+    }
+    static get is() { return "pf-badge-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-badge-group.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-badge-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The badge's text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The message beside the badge."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfBadgeGroupColor",
+                    "resolved": "\"brand\" | \"error\" | \"gray\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PfBadgeGroupColor": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-badge-group/pf-badge-group.tsx",
+                            "id": "src/components/pf-badge-group/pf-badge-group.tsx::PfBadgeGroupColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour treatment. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "color",
+                "defaultValue": "'gray'"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfBadgeGroupAppearance",
+                    "resolved": "\"modern\" | \"pill\"",
+                    "references": {
+                        "PfBadgeGroupAppearance": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-badge-group/pf-badge-group.tsx",
+                            "id": "src/components/pf-badge-group/pf-badge-group.tsx::PfBadgeGroupAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Surface treatment for the message. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "appearance",
+                "defaultValue": "'pill'"
+            },
+            "badgePosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfBadgeGroupBadgePosition",
+                    "resolved": "\"leading\" | \"trailing\"",
+                    "references": {
+                        "PfBadgeGroupBadgePosition": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-badge-group/pf-badge-group.tsx",
+                            "id": "src/components/pf-badge-group/pf-badge-group.tsx::PfBadgeGroupBadgePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Which side the badge sits on. Reflected for the stylesheet."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "badge-position",
+                "defaultValue": "'leading'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-badge-group.js.map