@pitchfork-ui/elements 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,162 @@
+import { resolveCurrentCrumb } from "@pitchfork-ui/core";
+import { h, Host } from "@stencil/core";
+/**
+ * A breadcrumb trail over `pf-breadcrumb` children.
+ *
+ * The group owns the two things a crumb cannot know on its own: which crumb is
+ * the current page, and which one is last — so only the last goes without a
+ * separator after it.
+ *
+ * The separator is a **string**, where the React `separator` is a
+ * `ReactNode`, because it has to appear between every pair: a slot renders its
+ * assigned content once and in one place, so there is no way to repeat
+ * slotted content down the trail. Each crumb draws its own instead, which is
+ * why the group pushes the string down.
+ *
+ * @slot - the `pf-breadcrumb` children.
+ * @part list - the ordered list the crumbs are slotted into.
+ */
+export class PfBreadcrumbs {
+    el;
+    /** The trail's accessible name. */
+    label = 'Breadcrumb';
+    /** Drawn after every crumb but the last. */
+    separator = '/';
+    /** The light DOM is readable here, so first paint is already right. */
+    componentWillLoad() {
+        this.sync();
+    }
+    componentDidLoad() {
+        this.sync();
+    }
+    handleSeparatorChange() {
+        this.sync();
+    }
+    /**
+     * Re-reads the children, for a consumer who marked a crumb current through
+     * its *property* — which leaves no attribute and fires no `slotchange`.
+     */
+    async refresh() {
+        this.sync();
+    }
+    /** Direct children only: a nested trail owns its own crumbs. */
+    get crumbs() {
+        return Array.from(this.el.querySelectorAll('pf-breadcrumb')).filter((crumb) => crumb.parentElement === this.el);
+    }
+    /**
+     * The property if the crumb has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    isCurrent(crumb) {
+        return crumb.current ?? crumb.hasAttribute('current');
+    }
+    /**
+     * Core's rule for which crumb is current — the first one marked, or the last
+     * — so the React `Breadcrumbs` marks the same one. One index, which is what
+     * stops a trail claiming two current pages.
+     *
+     * The answer goes to `currentPage`, never to the `current` the consumer
+     * asked with. Writing it back to `current` looked tidier and was wrong:
+     * with nothing marked, the last crumb was given `current`, and appending
+     * another crumb then found that one marked and left the mark behind on it.
+     * A browser test appends a crumb, which is what caught it.
+     */
+    sync() {
+        const crumbs = this.crumbs;
+        const currentIndex = resolveCurrentCrumb(crumbs.map((crumb) => ({ current: this.isCurrent(crumb) })));
+        for (const [index, crumb] of crumbs.entries()) {
+            const node = crumb;
+            node.currentPage = index === currentIndex;
+            node.last = index === crumbs.length - 1;
+            node.separator = this.separator;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'ba6aac87bd5f235035ea7d15cc7be4a400dd4882', role: "navigation", "aria-label": this.label }, h("ol", { key: 'fdca023c17af41cba5fa4009de9b0972abf770ab', class: "list", part: "list" }, h("slot", { key: 'cd8e5645f012b2db1ac6b22fe90d49c7794064f3', onSlotchange: () => this.refresh() }))));
+    }
+    static get is() { return "pf-breadcrumbs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-breadcrumbs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-breadcrumbs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The trail's accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Breadcrumb'"
+            },
+            "separator": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drawn after every crumb but the last."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "separator",
+                "defaultValue": "'/'"
+            }
+        };
+    }
+    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 marked a crumb current through\nits *property* \u2014 which leaves no attribute and fires no `slotchange`.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "separator",
+                "methodName": "handleSeparatorChange"
+            }];
+    }
+}
+//# sourceMappingURL=pf-breadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/pf-breadcrumbs/pf-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjF;;;;;;;;;;;;;;;GAeG;AAMH,MAAM,OAAO,aAAa;IACb,EAAE,CAAe;IAE5B,mCAAmC;IAC3B,KAAK,GAAG,YAAY,CAAC;IAE7B,4CAA4C;IACpC,SAAS,GAAG,GAAG,CAAC;IAExB,uEAAuE;IACvE,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAGD,qBAAqB;QACnB,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;IACd,CAAC;IAED,gEAAgE;IAChE,IAAY,MAAM;QAChB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,eAAe,CAAC,CAAC,CAAC,MAAM,CAC9E,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CAC3C,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,SAAS,CAAC,KAAkB;QAClC,OAAQ,KAA6C,CAAC,OAAO,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACjG,CAAC;IAED;;;;;;;;;;OAUG;IACK,IAAI;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAM,YAAY,GAAG,mBAAmB,CACtC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAC5D,CAAC;QAEF,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC;YAC9C,MAAM,IAAI,GAAG,KAIZ,CAAC;YACF,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,YAAY,CAAC;YAC1C,IAAI,CAAC,IAAI,GAAG,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;YACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,KAAK;YAC5C,2DAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;gBAC1B,6DAAM,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,GAAI,CACzC,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { resolveCurrentCrumb } from '@pitchfork-ui/core';\nimport { Component, Element, h, Host, Method, Prop, Watch } from '@stencil/core';\n\n/**\n * A breadcrumb trail over `pf-breadcrumb` children.\n *\n * The group owns the two things a crumb cannot know on its own: which crumb is\n * the current page, and which one is last — so only the last goes without a\n * separator after it.\n *\n * The separator is a **string**, where the React `separator` is a\n * `ReactNode`, because it has to appear between every pair: a slot renders its\n * assigned content once and in one place, so there is no way to repeat\n * slotted content down the trail. Each crumb draws its own instead, which is\n * why the group pushes the string down.\n *\n * @slot - the `pf-breadcrumb` children.\n * @part list - the ordered list the crumbs are slotted into.\n */\n@Component({\n  tag: 'pf-breadcrumbs',\n  styleUrl: 'pf-breadcrumbs.css',\n  shadow: true,\n})\nexport class PfBreadcrumbs {\n  @Element() el!: HTMLElement;\n\n  /** The trail's accessible name. */\n  @Prop() label = 'Breadcrumb';\n\n  /** Drawn after every crumb but the last. */\n  @Prop() separator = '/';\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('separator')\n  handleSeparatorChange() {\n    this.sync();\n  }\n\n  /**\n   * Re-reads the children, for a consumer who marked a crumb current through\n   * its *property* — which leaves no attribute and fires no `slotchange`.\n   */\n  @Method()\n  async refresh() {\n    this.sync();\n  }\n\n  /** Direct children only: a nested trail owns its own crumbs. */\n  private get crumbs(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-breadcrumb')).filter(\n      (crumb) => crumb.parentElement === this.el,\n    );\n  }\n\n  /**\n   * The property if the crumb has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private isCurrent(crumb: HTMLElement) {\n    return (crumb as HTMLElement & { current?: boolean }).current ?? crumb.hasAttribute('current');\n  }\n\n  /**\n   * Core's rule for which crumb is current — the first one marked, or the last\n   * — so the React `Breadcrumbs` marks the same one. One index, which is what\n   * stops a trail claiming two current pages.\n   *\n   * The answer goes to `currentPage`, never to the `current` the consumer\n   * asked with. Writing it back to `current` looked tidier and was wrong:\n   * with nothing marked, the last crumb was given `current`, and appending\n   * another crumb then found that one marked and left the mark behind on it.\n   * A browser test appends a crumb, which is what caught it.\n   */\n  private sync() {\n    const crumbs = this.crumbs;\n    const currentIndex = resolveCurrentCrumb(\n      crumbs.map((crumb) => ({ current: this.isCurrent(crumb) })),\n    );\n\n    for (const [index, crumb] of crumbs.entries()) {\n      const node = crumb as HTMLElement & {\n        currentPage: boolean;\n        last: boolean;\n        separator: string;\n      };\n      node.currentPage = index === currentIndex;\n      node.last = index === crumbs.length - 1;\n      node.separator = this.separator;\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\" aria-label={this.label}>\n        <ol class=\"list\" part=\"list\">\n          <slot onSlotchange={() => this.refresh()} />\n        </ol>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,134 @@
+/*
+ * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is
+ * declared once in LoadingIndicators.css and every component picks it up from
+ * the global sheet; here each shadow root needs its own copy.
+ */
+@keyframes pf-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:host {
+  display: inline-flex;
+}
+
+:host([full-width]) {
+  display: flex;
+  width: 100%;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+button {
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: var(--font-weight-semibold);
+  gap: var(--space-2);
+  justify-content: center;
+  line-height: 1;
+  min-height: 40px;
+  text-decoration: none;
+  transition:
+    background-color var(--pf-transition-fast),
+    border-color var(--pf-transition-fast),
+    color var(--pf-transition-fast),
+    box-shadow var(--pf-transition-fast);
+}
+
+button:focus-visible {
+  box-shadow: var(--pf-button-focus-ring, var(--pf-focus-ring));
+  outline: none;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+:host([size='sm']) button {
+  font-size: var(--font-size-sm);
+  min-height: 36px;
+  padding: 0 var(--space-3);
+}
+
+:host([size='md']) button {
+  font-size: var(--font-size-md);
+  min-height: 40px;
+  padding: 0 var(--space-4);
+}
+
+:host([size='lg']) button {
+  font-size: var(--font-size-lg);
+  min-height: 48px;
+  padding: 0 var(--space-5);
+}
+
+:host([variant='primary']) button {
+  background: var(--pf-button-primary-bg);
+  color: var(--pf-button-primary-text);
+}
+
+:host([variant='primary']) button:hover:not(:disabled) {
+  background: var(--pf-button-primary-bg-hover);
+}
+
+:host([variant='secondary']) button {
+  background: var(--pf-button-secondary-bg);
+  border-color: var(--pf-button-secondary-border);
+  color: var(--pf-button-secondary-text);
+}
+
+:host([variant='secondary']) button:hover:not(:disabled) {
+  background: var(--pf-button-secondary-bg-hover);
+  border-color: var(--pf-button-secondary-border-hover);
+}
+
+:host([variant='ghost']) button {
+  background: transparent;
+  color: var(--pf-button-ghost-text);
+}
+
+:host([variant='ghost']) button:hover:not(:disabled) {
+  background: var(--pf-button-ghost-bg-hover);
+}
+
+:host([variant='destructive']) button {
+  background: var(--pf-button-destructive-bg);
+  color: var(--pf-button-destructive-text);
+}
+
+:host([variant='destructive']) button:hover:not(:disabled) {
+  background: var(--pf-button-destructive-bg-hover);
+}
+
+:host([loading]) button:disabled {
+  cursor: wait;
+  opacity: 1;
+}
+
+.spinner {
+  animation: pf-spin 0.65s linear infinite;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button {
+    transition: none;
+  }
+
+  .spinner {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+  }
+}

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

@@ -0,0 +1,216 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A button, with the variants, sizes and loading state the React `Button` has.
+ *
+ * The first element in this package, and the one the whole pipeline was proved
+ * on: the PostCSS chain, the generated React bindings and the generated Angular
+ * component all exist because this built end to end before anything else was
+ * attempted. `delegatesFocus` is why focusing the host reaches the real button
+ * inside, which is what lets `pf-toolbar` treat it as an item.
+ *
+ * @slot - the button's label.
+ * @part button - the native button element.
+ * @part spinner - the loading spinner.
+ */
+export class PfButton {
+    /** Visual style. Reflected so the stylesheet can select on it. */
+    variant = 'primary';
+    /** Control size. Reflected so the stylesheet can select on it. */
+    size = 'md';
+    /** Stretch to the width of the container. */
+    fullWidth = false;
+    /** Show a spinner and block interaction. */
+    loading = false;
+    /** Disable the button. */
+    disabled = false;
+    /**
+     * Mirrors the native attribute. `submit` and `reset` do not yet act on a form
+     * outside this element's shadow root -- that needs ElementInternals, which
+     * arrives with the form controls in Wave 3.
+     */
+    type = 'button';
+    /** Accessible name, for when the slot holds only an icon. */
+    label;
+    renderSpinner() {
+        return (h("svg", { class: "spinner", part: "spinner", viewBox: "0 0 24 24", fill: "none", width: "1em", height: "1em", "aria-hidden": "true", focusable: "false" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "32", "stroke-dashoffset": "8" })));
+    }
+    render() {
+        const isDisabled = this.disabled || this.loading;
+        return (h(Host, { key: '9adf86112a2c18facb4513de37871f81a3b373e2' }, h("button", { key: '1edecdfbce26d76fec0b746f14b7adc6f5d603d5', part: "button", type: this.type, disabled: isDisabled, "aria-busy": this.loading ? 'true' : null, "aria-label": this.label }, this.loading && this.renderSpinner(), h("slot", { key: '6ff1a6b6b4cb32ccc865d42ffa396cd5acd43bbe' }))));
+    }
+    static get is() { return "pf-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pf-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pf-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfButtonVariant",
+                    "resolved": "\"destructive\" | \"ghost\" | \"primary\" | \"secondary\"",
+                    "references": {
+                        "PfButtonVariant": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-button/pf-button.tsx",
+                            "id": "src/components/pf-button/pf-button.tsx::PfButtonVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfButtonSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "PfButtonSize": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-button/pf-button.tsx",
+                            "id": "src/components/pf-button/pf-button.tsx::PfButtonSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Control size. Reflected so the stylesheet can select on it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretch to the width of the container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a spinner and block interaction."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PfButtonType",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {
+                        "PfButtonType": {
+                            "location": "local",
+                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-button/pf-button.tsx",
+                            "id": "src/components/pf-button/pf-button.tsx::PfButtonType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mirrors the native attribute. `submit` and `reset` do not yet act on a form\noutside this element's shadow root -- that needs ElementInternals, which\narrives with the form controls in Wave 3."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name, for when the slot holds only an icon."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pf-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-button.js","sourceRoot":"","sources":["../../../src/components/pf-button/pf-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD;;;;;;;;;;;;GAYG;AAQH,MAAM,OAAO,QAAQ;IACnB,kEAAkE;IACzC,OAAO,GAAoB,SAAS,CAAC;IAE9D,kEAAkE;IACzC,IAAI,GAAiB,IAAI,CAAC;IAEnD,6CAA6C;IACpB,SAAS,GAAG,KAAK,CAAC;IAE3C,4CAA4C;IACnB,OAAO,GAAG,KAAK,CAAC;IAEzC,0BAA0B;IACD,QAAQ,GAAG,KAAK,CAAC;IAE1C;;;;OAIG;IACK,IAAI,GAAiB,QAAQ,CAAC;IAEtC,6DAA6D;IACrD,KAAK,CAAU;IAEf,aAAa;QACnB,OAAO,CACL,WACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,iBACA,MAAM,EAClB,SAAS,EAAC,OAAO;YAEjB,cACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,kBACR,GAAG,oBACD,OAAO,sBACL,IAAI,uBACH,GAAG,GACrB,CACE,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC;QAEjD,OAAO,CACL,EAAC,IAAI;YACH,+DACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,UAAU,eACT,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,gBAC3B,IAAI,CAAC,KAAK;gBAErB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;gBACrC,8DAAQ,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type PfButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';\nexport type PfButtonSize = 'sm' | 'md' | 'lg';\nexport type PfButtonType = 'button' | 'submit' | 'reset';\n\n/**\n * A button, with the variants, sizes and loading state the React `Button` has.\n *\n * The first element in this package, and the one the whole pipeline was proved\n * on: the PostCSS chain, the generated React bindings and the generated Angular\n * component all exist because this built end to end before anything else was\n * attempted. `delegatesFocus` is why focusing the host reaches the real button\n * inside, which is what lets `pf-toolbar` treat it as an item.\n *\n * @slot - the button's label.\n * @part button - the native button element.\n * @part spinner - the loading spinner.\n */\n@Component({\n  tag: 'pf-button',\n  styleUrl: 'pf-button.css',\n  // delegatesFocus so that focusing <pf-button> reaches the real button, and\n  // :focus-visible lands on the element that is actually styled for it.\n  shadow: { delegatesFocus: true },\n})\nexport class PfButton {\n  /** Visual style. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) variant: PfButtonVariant = 'primary';\n\n  /** Control size. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) size: PfButtonSize = 'md';\n\n  /** Stretch to the width of the container. */\n  @Prop({ reflect: true }) fullWidth = false;\n\n  /** Show a spinner and block interaction. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Mirrors the native attribute. `submit` and `reset` do not yet act on a form\n   * outside this element's shadow root -- that needs ElementInternals, which\n   * arrives with the form controls in Wave 3.\n   */\n  @Prop() type: PfButtonType = 'button';\n\n  /** Accessible name, for when the slot holds only an icon. */\n  @Prop() label?: string;\n\n  private renderSpinner() {\n    return (\n      <svg\n        class=\"spinner\"\n        part=\"spinner\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        width=\"1em\"\n        height=\"1em\"\n        aria-hidden=\"true\"\n        focusable=\"false\"\n      >\n        <circle\n          cx=\"12\"\n          cy=\"12\"\n          r=\"10\"\n          stroke=\"currentColor\"\n          stroke-width=\"3\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"32\"\n          stroke-dashoffset=\"8\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const isDisabled = this.disabled || this.loading;\n\n    return (\n      <Host>\n        <button\n          part=\"button\"\n          type={this.type}\n          disabled={isDisabled}\n          aria-busy={this.loading ? 'true' : null}\n          aria-label={this.label}\n        >\n          {this.loading && this.renderSpinner()}\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,14 @@
+:host {
+  align-items: stretch;
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+/* The buttons have to be flex items of the host, not of a box inside it. */
+slot {
+  display: contents;
+}