@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/cjs/pf-breadcrumbs.cjs.entry.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+//#region src/breadcrumbs.ts
+/**
+* The index of the current crumb: the first one marked `current`, or the last
+* crumb when none is. `-1` for an empty trail.
+*
+* One index rather than a per-crumb answer, because that is what stops a trail
+* marking two pages. The React `Breadcrumbs` read `item.current ?? isLast` per
+* item, which marked both the explicitly-current crumb *and* the last one as
+* soon as a consumer marked anything but the last — so a screen reader was
+* told the user was on two pages at once.
+*/
+function resolveCurrentCrumb(crumbs) {
+	const explicit = crumbs.findIndex((crumb) => crumb.current);
+	if (explicit >= 0) return explicit;
+	return crumbs.length - 1;
+}
+
+const pfBreadcrumbsCss = () => `:host{display:block;width:100%}:host([hidden]){display:none}.list{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}.list slot{display:contents}`;
+
+const PfBreadcrumbs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** 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 (index.h(index.Host, { key: 'ba6aac87bd5f235035ea7d15cc7be4a400dd4882', role: "navigation", "aria-label": this.label }, index.h("ol", { key: 'fdca023c17af41cba5fa4009de9b0972abf770ab', class: "list", part: "list" }, index.h("slot", { key: 'cd8e5645f012b2db1ac6b22fe90d49c7794064f3', onSlotchange: () => this.refresh() }))));
+    }
+    static get watchers() { return {
+        "separator": [{
+                "handleSeparatorChange": 0
+            }]
+    }; }
+};
+PfBreadcrumbs.style = pfBreadcrumbsCss();
+
+exports.pf_breadcrumbs = PfBreadcrumbs;
+//# sourceMappingURL=pf-breadcrumbs.entry.cjs.js.map
+
+//# sourceMappingURL=pf-breadcrumbs.cjs.entry.js.map

package/dist/cjs/pf-breadcrumbs.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-breadcrumbs.cjs.entry.js","mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,mBAAmB,CAAC,MAAM,EAAE;AACrC,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC;AAC5D,CAAC,IAAI,QAAQ,IAAI,CAAC,EAAE,OAAO,QAAQ;AACnC,CAAC,OAAO,MAAM,CAAC,MAAM,GAAG,CAAC;AACzB;;ACfA,MAAM,gBAAgB,GAAG,MAAM,CAAC,mMAAmM,CAAC;;MCwBvN,aAAa,GAAA,MAAA;;;;;;IAIhB,KAAK,GAAG,YAAY;;IAGpB,SAAS,GAAG,GAAG;;IAGvB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGb,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;IAIb,qBAAqB,GAAA;QACnB,IAAI,CAAC,IAAI,EAAE;;AAGb;;;AAGG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,IAAY,MAAM,GAAA;AAChB,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,eAAe,CAAC,CAAC,CAAC,MAAM,CAC9E,CAAC,KAAK,KAAK,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CAC3C;;AAGH;;;AAGG;AACK,IAAA,SAAS,CAAC,KAAkB,EAAA;QAClC,OAAQ,KAA6C,CAAC,OAAO,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC;;AAGhG;;;;;;;;;;AAUG;IACK,IAAI,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;QAC1B,MAAM,YAAY,GAAG,mBAAmB,CACtC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAC5D;AAED,QAAA,KAAK,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,EAAE,EAAE;YAC7C,MAAM,IAAI,GAAG,KAIZ;AACD,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK,KAAK,YAAY;YACzC,IAAI,CAAC,IAAI,GAAG,KAAK,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC;AACvC,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS;;;IAInC,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,YAAY,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EAC5CD,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAA,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACzC,CACA;;;;;;;;;;;;","names":["h","Host"],"sources":["../core/dist/breadcrumbs.js","src/components/pf-breadcrumbs/pf-breadcrumbs.css?tag=pf-breadcrumbs&encapsulation=shadow","src/components/pf-breadcrumbs/pf-breadcrumbs.tsx"],"sourcesContent":["//#region src/breadcrumbs.ts\n/**\n* The index of the current crumb: the first one marked `current`, or the last\n* crumb when none is. `-1` for an empty trail.\n*\n* One index rather than a per-crumb answer, because that is what stops a trail\n* marking two pages. The React `Breadcrumbs` read `item.current ?? isLast` per\n* item, which marked both the explicitly-current crumb *and* the last one as\n* soon as a consumer marked anything but the last — so a screen reader was\n* told the user was on two pages at once.\n*/\nfunction resolveCurrentCrumb(crumbs) {\n\tconst explicit = crumbs.findIndex((crumb) => crumb.current);\n\tif (explicit >= 0) return explicit;\n\treturn crumbs.length - 1;\n}\n//#endregion\nexport { resolveCurrentCrumb };\n",":host {\n  display: block;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.list {\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * The crumbs have to be flex items of the list, not of a box inside it. The UA\n * stylesheet already gives a slot `display: contents`, and this says so out\n * loud -- the same thing pf-calendar needs for a semantic row in a grid.\n */\n.list slot {\n  display: contents;\n}\n","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"],"version":3}

package/dist/cjs/pf-button-group-item.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfButtonGroupItemCss = () => `:host{display:inline-flex}:host([hidden]){display:none}.button{align-items:center;background:var(--pf-buttongroup-bg);border:1px solid var(--pf-buttongroup-border);color:var(--pf-buttongroup-text);cursor:pointer;display:inline-flex;font:inherit;gap:var(--space-2);justify-content:center;line-height:1;margin-inline-start:-1px;min-height:40px;padding:0 var(--space-4);position:relative;transition:background-color var(--pf-transition-fast),     border-color var(--pf-transition-fast),     color var(--pf-transition-fast),     box-shadow var(--pf-transition-fast)}:host(:first-child) .button{border-bottom-left-radius:var(--radius-md);border-top-left-radius:var(--radius-md);margin-inline-start:0}:host(:last-child) .button{border-bottom-right-radius:var(--radius-md);border-top-right-radius:var(--radius-md)}.button:focus-visible{box-shadow:var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));outline:none;z-index:2}.button:hover:not(:disabled){background:var(--pf-buttongroup-bg-subtle)}:host([selected]) .button{background:var(--pf-buttongroup-action-primary);border-color:var(--pf-buttongroup-action-primary);color:var(--pf-buttongroup-action-primary-text);z-index:1}:host([selected]) .button:hover:not(:disabled){background:var(--pf-buttongroup-action-primary-hover);border-color:var(--pf-buttongroup-action-primary-hover)}.button:disabled{cursor:not-allowed;opacity:0.55}.button:disabled:hover{background:var(--pf-buttongroup-bg)}:host([selected]) .button:disabled:hover{background:var(--pf-buttongroup-action-primary);border-color:var(--pf-buttongroup-action-primary)}.icon{display:inline-flex;flex-shrink:0;font-size:16px}.dot{background:var(--pf-buttongroup-action-primary);border-radius:var(--radius-full);flex-shrink:0;height:8px;width:8px}:host([selected]) .dot{background:var(--pf-buttongroup-dot-selected)}`;
+
+const PfButtonGroupItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfButtonGroupSelect = index.createEvent(this, "pfButtonGroupSelect");
+    }
+    /**
+     * The value the group reports when this button is chosen.
+     *
+     * Reflected, because the generated bindings set props as *properties*: an
+     * unreflected prop leaves no attribute, and anything selecting on one — a
+     * consumer's stylesheet, or a test — finds nothing.
+     */
+    value = '';
+    /** Disable this button alone. Reflected for the stylesheet. */
+    disabled = false;
+    /**
+     * Set by the group when the whole group is disabled, kept apart from
+     * `disabled` so that enabling the group does not enable a button the
+     * consumer disabled on its own.
+     */
+    groupDisabled = false;
+    /** Set by the group. Reflected, so the stylesheet can mark the choice. */
+    selected = false;
+    /** A leading icon's name, from the same registry as `pf-icon`. */
+    icon;
+    /** Draw a leading dot — a status light rather than an icon. */
+    dot = false;
+    /** Asks the group to choose this button. The group decides. */
+    pfButtonGroupSelect;
+    onClick = () => {
+        if (this.disabled || this.groupDisabled)
+            return;
+        this.pfButtonGroupSelect.emit({ value: this.value });
+    };
+    render() {
+        const off = this.disabled || this.groupDisabled;
+        return (index.h(index.Host, { key: '32d9d9f92d18efa67f8f0a1c6958b9aad11f82c6' }, index.h("button", { key: '271d2f140ec040979d4f497aa1b610afe728f48b', type: "button", class: "button", part: "button", "aria-pressed": this.selected ? 'true' : 'false', disabled: off, onClick: this.onClick }, this.icon && (index.h("pf-icon", { key: 'b52b1251a1d5a76ee4956fa71206ff6003d45577', class: "icon", part: "icon", name: this.icon, "aria-hidden": "true" })), this.dot && index.h("span", { key: '56ebc9f5d68ea5bdaee36ed812e143e65cca6613', class: "dot", part: "dot", "aria-hidden": "true" }), index.h("span", { key: '2da80f85ab0cc7650bc0836284a1b21cf96653ce', class: "label", part: "label" }, index.h("slot", { key: '46d2f6cec317a9d4d2b63d96b4678f02ef1f7269' })))));
+    }
+};
+PfButtonGroupItem.style = pfButtonGroupItemCss();
+
+exports.pf_button_group_item = PfButtonGroupItem;
+//# sourceMappingURL=pf-button-group-item.entry.cjs.js.map
+
+//# sourceMappingURL=pf-button-group-item.cjs.entry.js.map

package/dist/cjs/pf-button-group-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-button-group-item.cjs.entry.js","mappings":";;;;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,6xDAA6xD,CAAC;;MCuBrzD,iBAAiB,GAAA,MAAA;;;;;AAC5B;;;;;;AAMG;IACsB,KAAK,GAAG,EAAE;;IAGV,QAAQ,GAAG,KAAK;AAEzC;;;;AAIG;IACqC,aAAa,GAAG,KAAK;;IAGrB,QAAQ,GAAG,KAAK;;AAGhD,IAAA,IAAI;;IAGa,GAAG,GAAG,KAAK;;AAG3B,IAAA,mBAAmB;IAEpB,OAAO,GAAG,MAAK;AACrB,QAAA,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa;YAAE;AACzC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACtD,KAAC;IAED,MAAM,GAAA;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,aAAa;AAE/C,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,QAAQ,EAAA,cAAA,EACC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC9C,QAAQ,EAAE,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAEpB,IAAI,CAAC,IAAI,KACRA,sEAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,aAAA,EAAc,MAAM,EAAA,CAAW,CACjF,EACA,IAAI,CAAC,GAAG,IAAIA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAA,aAAA,EAAa,MAAM,EAAA,CAAQ,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAA,EAC9BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH,CACA,CACJ;;;;;;;","names":["h","Host"],"sources":["src/components/pf-button-group-item/pf-button-group-item.css?tag=pf-button-group-item&encapsulation=shadow","src/components/pf-button-group-item/pf-button-group-item.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.button {\n  align-items: center;\n  background: var(--pf-buttongroup-bg);\n  border: 1px solid var(--pf-buttongroup-border);\n  color: var(--pf-buttongroup-text);\n  cursor: pointer;\n  display: inline-flex;\n  font: inherit;\n  gap: var(--space-2);\n  justify-content: center;\n  line-height: 1;\n  /* The buttons share a border, so each laps one pixel over the last. */\n  margin-inline-start: -1px;\n  min-height: 40px;\n  padding: 0 var(--space-4);\n  position: relative;\n  transition:\n    background-color var(--pf-transition-fast),\n    border-color var(--pf-transition-fast),\n    color var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n}\n\n/*\n * The rounded ends, from in here rather than from the group's sheet:\n * `::slotted()` takes a compound selector and no combinator, and the radius\n * belongs on the inner button in any case -- it is the thing with the border.\n * The same arrangement as pf-accordion-item's rule between sections.\n */\n:host(:first-child) .button {\n  border-bottom-left-radius: var(--radius-md);\n  border-top-left-radius: var(--radius-md);\n  margin-inline-start: 0;\n}\n\n:host(:last-child) .button {\n  border-bottom-right-radius: var(--radius-md);\n  border-top-right-radius: var(--radius-md);\n}\n\n.button:focus-visible {\n  box-shadow: var(--pf-buttongroup-focus-ring, var(--pf-focus-ring));\n  outline: none;\n  /* Above both neighbours, so the ring is not clipped by their borders. */\n  z-index: 2;\n}\n\n.button:hover:not(:disabled) {\n  background: var(--pf-buttongroup-bg-subtle);\n}\n\n:host([selected]) .button {\n  background: var(--pf-buttongroup-action-primary);\n  border-color: var(--pf-buttongroup-action-primary);\n  color: var(--pf-buttongroup-action-primary-text);\n  z-index: 1;\n}\n\n:host([selected]) .button:hover:not(:disabled) {\n  background: var(--pf-buttongroup-action-primary-hover);\n  border-color: var(--pf-buttongroup-action-primary-hover);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.button:disabled:hover {\n  background: var(--pf-buttongroup-bg);\n}\n\n:host([selected]) .button:disabled:hover {\n  background: var(--pf-buttongroup-action-primary);\n  border-color: var(--pf-buttongroup-action-primary);\n}\n\n.icon {\n  display: inline-flex;\n  flex-shrink: 0;\n  font-size: 16px;\n}\n\n.dot {\n  background: var(--pf-buttongroup-action-primary);\n  border-radius: var(--radius-full);\n  flex-shrink: 0;\n  height: 8px;\n  width: 8px;\n}\n\n/* There is an alias for exactly this, so the selected dot uses it. */\n:host([selected]) .dot {\n  background: var(--pf-buttongroup-dot-selected);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n/**\n * One button inside a `pf-button-group`.\n *\n * It only reports that it was pressed; the group owns the selection, exactly\n * as `pf-radio-group` does for its radios. The group writes `selected` and\n * `groupDisabled` back onto it.\n *\n * `aria-pressed` rather than `aria-checked`: these are toggle buttons, not\n * radios, which is also why every one of them is a tab stop.\n *\n * @slot - the button's label.\n * @part button - the button itself.\n * @part icon - the leading icon, when `icon` is set.\n * @part dot - the leading dot, when `dot` is set.\n * @part label - the label's box.\n */\n@Component({\n  tag: 'pf-button-group-item',\n  styleUrl: 'pf-button-group-item.css',\n  shadow: true,\n})\nexport class PfButtonGroupItem {\n  /**\n   * The value the group reports when this button is chosen.\n   *\n   * Reflected, because the generated bindings set props as *properties*: an\n   * unreflected prop leaves no attribute, and anything selecting on one — a\n   * consumer's stylesheet, or a test — finds nothing.\n   */\n  @Prop({ reflect: true }) value = '';\n\n  /** Disable this button alone. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Set by the group when the whole group is disabled, kept apart from\n   * `disabled` so that enabling the group does not enable a button the\n   * consumer disabled on its own.\n   */\n  @Prop({ mutable: true, reflect: true }) groupDisabled = false;\n\n  /** Set by the group. Reflected, so the stylesheet can mark the choice. */\n  @Prop({ mutable: true, reflect: true }) selected = false;\n\n  /** A leading icon's name, from the same registry as `pf-icon`. */\n  @Prop() icon?: string;\n\n  /** Draw a leading dot — a status light rather than an icon. */\n  @Prop({ reflect: true }) dot = false;\n\n  /** Asks the group to choose this button. The group decides. */\n  @Event() pfButtonGroupSelect!: EventEmitter<{ value: string }>;\n\n  private onClick = () => {\n    if (this.disabled || this.groupDisabled) return;\n    this.pfButtonGroupSelect.emit({ value: this.value });\n  };\n\n  render() {\n    const off = this.disabled || this.groupDisabled;\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class=\"button\"\n          part=\"button\"\n          aria-pressed={this.selected ? 'true' : 'false'}\n          disabled={off}\n          onClick={this.onClick}\n        >\n          {this.icon && (\n            <pf-icon class=\"icon\" part=\"icon\" name={this.icon} aria-hidden=\"true\"></pf-icon>\n          )}\n          {this.dot && <span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span>}\n          <span class=\"label\" part=\"label\">\n            <slot />\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-button-group.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var valueList = require('./value-list-zSKmhcgH.js');
+
+const pfButtonGroupCss = () => `:host{align-items:stretch;display:inline-flex;flex-wrap:wrap}:host([hidden]){display:none}slot{display:contents}`;
+
+const PfButtonGroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+    }
+    get el() { return index.getElement(this); }
+    /** The chosen value, or values, as one comma-separated string. */
+    value = '';
+    /** Allow several at once. Reflected for the stylesheet. */
+    multiple = false;
+    /** Disable every button. Reflected, and pushed down. */
+    disabled = false;
+    /** Fires when the selection changes, however it was changed. */
+    pfChange;
+    /** 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 buttons. */
+    get items() {
+        return Array.from(this.el.querySelectorAll('pf-button-group-item')).filter((item) => item.parentElement === this.el);
+    }
+    get chosen() {
+        return valueList.parseValueList(this.value);
+    }
+    /**
+     * The property if the item has upgraded, the attribute if it has not:
+     * `componentWillLoad` can run before a child parsed from HTML upgrades.
+     */
+    itemValue(item) {
+        return item.value ?? item.getAttribute('value') ?? '';
+    }
+    sync() {
+        const chosen = this.chosen;
+        for (const item of this.items) {
+            const node = item;
+            node.selected = chosen.includes(this.itemValue(item));
+            /*
+             * The group's disabled state goes to a prop of its own, not to the
+             * item's `disabled`: that one is the consumer's, and overwriting it
+             * would lose a button they had disabled on its own — and un-disable it
+             * the moment the group was enabled again.
+             */
+            node.groupDisabled = this.disabled;
+        }
+    }
+    /**
+     * A button asking to be chosen. The group decides, because in single mode
+     * the answer depends on what else is chosen.
+     */
+    handleSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);
+        if (!item || item.disabled)
+            return;
+        const next = this.multiple
+            ? valueList.toggleValueInList(this.chosen, event.detail.value)
+            : [event.detail.value];
+        this.value = valueList.formatValueList(next);
+        this.sync();
+        this.pfChange.emit({ value: this.value, values: next });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b7fbde0a2e14fccf291687b378dfd93a16660692', role: "group" }, index.h("slot", { key: 'c81eb48bb1ab31f7b35c7fb9e0c16b8f524e8520', onSlotchange: () => this.refresh() })));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleStateChange": 0
+            }],
+        "multiple": [{
+                "handleStateChange": 0
+            }],
+        "disabled": [{
+                "handleStateChange": 0
+            }]
+    }; }
+};
+PfButtonGroup.style = pfButtonGroupCss();
+
+exports.pf_button_group = PfButtonGroup;
+//# sourceMappingURL=pf-button-group.entry.cjs.js.map
+
+//# sourceMappingURL=pf-button-group.cjs.entry.js.map

package/dist/cjs/pf-button-group.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-button-group.cjs.entry.js","mappings":";;;;;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,gHAAgH,CAAC;;MCkCpI,aAAa,GAAA,MAAA;;;;;;;IAIgB,KAAK,GAAG,EAAE;;IAGzB,QAAQ,GAAG,KAAK;;IAGhB,QAAQ,GAAG,KAAK;;AAGhC,IAAA,QAAQ;;IAGjB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGb,gBAAgB,GAAA;QACd,IAAI,CAAC,IAAI,EAAE;;IAMb,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;;AAKb,IAAA,MAAM,OAAO,GAAA;QACX,IAAI,CAAC,IAAI,EAAE;;;AAIb,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,sBAAsB,CAAC,CAAC,CAAC,MAAM,CACrF,CAAC,IAAI,KAAK,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,EAAE,CACzC;;AAGH,IAAA,IAAY,MAAM,GAAA;AAChB,QAAA,OAAOA,wBAAc,CAAC,IAAI,CAAC,KAAK,CAAC;;AAGnC;;;AAGG;AACK,IAAA,SAAS,CAAC,IAAiB,EAAA;AACjC,QAAA,OAAQ,IAAyC,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;;IAGrF,IAAI,GAAA;AACV,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM;AAE1B,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YAC7B,MAAM,IAAI,GAAG,IAAmE;AAChF,YAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AACrD;;;;;AAKG;AACH,YAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,QAAQ;;;AAItC;;;AAGG;AAEH,IAAA,YAAY,CAAC,KAAqC,EAAA;QAChD,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEnB,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,KAAK,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAC7F,QAAA,IAAI,CAAC,IAAI,IAAK,IAA6C,CAAC,QAAQ;YAAE;AAEtE,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC;AAChB,cAAEC,2BAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;cACjD,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAExB,QAAA,IAAI,CAAC,KAAK,GAAGC,yBAAe,CAAC,IAAI,CAAC;QAClC,IAAI,CAAC,IAAI,EAAE;AACX,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;;IAGzD,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,IAAI,EAAC,OAAO,EAAA,EAChBD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,MAAM,IAAI,CAAC,OAAO,EAAE,EAAA,CAAI,CACvC;;;;;;;;;;;;;;;;;;","names":["parseValueList","toggleValueInList","formatValueList","h","Host"],"sources":["src/components/pf-button-group/pf-button-group.css?tag=pf-button-group&encapsulation=shadow","src/components/pf-button-group/pf-button-group.tsx"],"sourcesContent":[":host {\n  align-items: stretch;\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* The buttons have to be flex items of the host, not of a box inside it. */\nslot {\n  display: contents;\n}\n","import { formatValueList, parseValueList, toggleValueInList } from '@pitchfork-ui/core';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n/**\n * A row of joined toggle buttons: pick one, or several.\n *\n * The group owns the selection, because \"one at a time\" is not a thing a\n * button can decide for itself — the same division as `pf-radio-group`. Each\n * `pf-button-group-item` renders a real `<button>` in its own shadow root, so\n * every one of them is an ordinary tab stop: a group of toggle buttons is not\n * a roving-tabindex pattern, unlike a toolbar or a tab strip.\n *\n * `value` is one comma-separated string, because that is what an attribute\n * can carry; `pfChange` also reports the parsed array, which is what a\n * framework consumer usually wants.\n *\n * @slot - the `pf-button-group-item` children.\n */\n@Component({\n  tag: 'pf-button-group',\n  styleUrl: 'pf-button-group.css',\n  shadow: true,\n})\nexport class PfButtonGroup {\n  @Element() el!: HTMLElement;\n\n  /** The chosen value, or values, as one comma-separated string. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Allow several at once. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) multiple = false;\n\n  /** Disable every button. Reflected, and pushed down. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Fires when the selection changes, however it was changed. */\n  @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\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('value')\n  @Watch('multiple')\n  @Watch('disabled')\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 buttons. */\n  private get items(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-button-group-item')).filter(\n      (item) => item.parentElement === this.el,\n    );\n  }\n\n  private get chosen(): string[] {\n    return parseValueList(this.value);\n  }\n\n  /**\n   * The property if the item has upgraded, the attribute if it has not:\n   * `componentWillLoad` can run before a child parsed from HTML upgrades.\n   */\n  private itemValue(item: HTMLElement) {\n    return (item as HTMLElement & { value?: string }).value ?? item.getAttribute('value') ?? '';\n  }\n\n  private sync() {\n    const chosen = this.chosen;\n\n    for (const item of this.items) {\n      const node = item as HTMLElement & { selected: boolean; groupDisabled: boolean };\n      node.selected = chosen.includes(this.itemValue(item));\n      /*\n       * The group's disabled state goes to a prop of its own, not to the\n       * item's `disabled`: that one is the consumer's, and overwriting it\n       * would lose a button they had disabled on its own — and un-disable it\n       * the moment the group was enabled again.\n       */\n      node.groupDisabled = this.disabled;\n    }\n  }\n\n  /**\n   * A button asking to be chosen. The group decides, because in single mode\n   * the answer depends on what else is chosen.\n   */\n  @Listen('pfButtonGroupSelect')\n  handleSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const item = this.items.find((candidate) => this.itemValue(candidate) === event.detail.value);\n    if (!item || (item as HTMLElement & { disabled?: boolean }).disabled) return;\n\n    const next = this.multiple\n      ? toggleValueInList(this.chosen, event.detail.value)\n      : [event.detail.value];\n\n    this.value = formatValueList(next);\n    this.sync();\n    this.pfChange.emit({ value: this.value, values: next });\n  }\n\n  render() {\n    return (\n      <Host role=\"group\">\n        <slot onSlotchange={() => this.refresh()} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/pf-button.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfButtonCss = () => `@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}}`;
+
+const PfButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** 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 (index.h("svg", { class: "spinner", part: "spinner", viewBox: "0 0 24 24", fill: "none", width: "1em", height: "1em", "aria-hidden": "true", focusable: "false" }, index.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 (index.h(index.Host, { key: '9adf86112a2c18facb4513de37871f81a3b373e2' }, index.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(), index.h("slot", { key: '6ff1a6b6b4cb32ccc865d42ffa396cd5acd43bbe' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+PfButton.style = pfButtonCss();
+
+exports.pf_button = PfButton;
+//# sourceMappingURL=pf-button.entry.cjs.js.map
+
+//# sourceMappingURL=pf-button.cjs.entry.js.map

package/dist/cjs/pf-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-button.cjs.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,MAAM,CAAC,kuEAAkuE,CAAC;;MC0BjvE,QAAQ,GAAA,MAAA;;;;;IAEM,OAAO,GAAoB,SAAS;;IAGpC,IAAI,GAAiB,IAAI;;IAGzB,SAAS,GAAG,KAAK;;IAGjB,OAAO,GAAG,KAAK;;IAGf,QAAQ,GAAG,KAAK;AAEzC;;;;AAIG;IACK,IAAI,GAAiB,QAAQ;;AAG7B,IAAA,KAAK;IAEL,aAAa,GAAA;AACnB,QAAA,QACEA,OAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EAAA,aAAA,EACA,MAAM,EAClB,SAAS,EAAC,OAAO,EAAA,EAEjBA,OAAA,CAAA,QAAA,EAAA,EACE,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EAAA,cAAA,EACR,GAAG,EAAA,gBAAA,EACD,OAAO,EAAA,kBAAA,EACL,IAAI,EAAA,mBAAA,EACH,GAAG,EAAA,CACrB,CACE;;IAIV,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;AAEhD,QAAA,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,UAAU,EAAA,WAAA,EACT,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,EAAA,YAAA,EAC3B,IAAI,CAAC,KAAK,EAAA,EAErB,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE,EACrCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,CACJ;;;;;;;;","names":["h","Host"],"sources":["src/components/pf-button/pf-button.css?tag=pf-button&encapsulation=shadow","src/components/pf-button/pf-button.tsx"],"sourcesContent":["/*\n * `@keyframes` do not cross a shadow boundary. In the React library pf-spin is\n * declared once in LoadingIndicators.css and every component picks it up from\n * the global sheet; here each shadow root needs its own copy.\n */\n@keyframes pf-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  display: inline-flex;\n}\n\n:host([full-width]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nbutton {\n  align-items: center;\n  background: none;\n  border: 1px solid transparent;\n  border-radius: var(--radius-md);\n  color: inherit;\n  cursor: pointer;\n  display: inline-flex;\n  flex: 1;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: var(--font-weight-semibold);\n  gap: var(--space-2);\n  justify-content: center;\n  line-height: 1;\n  min-height: 40px;\n  text-decoration: none;\n  transition:\n    background-color var(--pf-transition-fast),\n    border-color var(--pf-transition-fast),\n    color var(--pf-transition-fast),\n    box-shadow var(--pf-transition-fast);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--pf-button-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\nbutton:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n:host([size='sm']) button {\n  font-size: var(--font-size-sm);\n  min-height: 36px;\n  padding: 0 var(--space-3);\n}\n\n:host([size='md']) button {\n  font-size: var(--font-size-md);\n  min-height: 40px;\n  padding: 0 var(--space-4);\n}\n\n:host([size='lg']) button {\n  font-size: var(--font-size-lg);\n  min-height: 48px;\n  padding: 0 var(--space-5);\n}\n\n:host([variant='primary']) button {\n  background: var(--pf-button-primary-bg);\n  color: var(--pf-button-primary-text);\n}\n\n:host([variant='primary']) button:hover:not(:disabled) {\n  background: var(--pf-button-primary-bg-hover);\n}\n\n:host([variant='secondary']) button {\n  background: var(--pf-button-secondary-bg);\n  border-color: var(--pf-button-secondary-border);\n  color: var(--pf-button-secondary-text);\n}\n\n:host([variant='secondary']) button:hover:not(:disabled) {\n  background: var(--pf-button-secondary-bg-hover);\n  border-color: var(--pf-button-secondary-border-hover);\n}\n\n:host([variant='ghost']) button {\n  background: transparent;\n  color: var(--pf-button-ghost-text);\n}\n\n:host([variant='ghost']) button:hover:not(:disabled) {\n  background: var(--pf-button-ghost-bg-hover);\n}\n\n:host([variant='destructive']) button {\n  background: var(--pf-button-destructive-bg);\n  color: var(--pf-button-destructive-text);\n}\n\n:host([variant='destructive']) button:hover:not(:disabled) {\n  background: var(--pf-button-destructive-bg-hover);\n}\n\n:host([loading]) button:disabled {\n  cursor: wait;\n  opacity: 1;\n}\n\n.spinner {\n  animation: pf-spin 0.65s linear infinite;\n  flex-shrink: 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button {\n    transition: none;\n  }\n\n  .spinner {\n    animation-duration: 0.01ms;\n    animation-iteration-count: 1;\n  }\n}\n","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"],"version":3}

package/dist/cjs/pf-calendar.cjs.entry.js

@@ -0,0 +1,222 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var date = require('./date-CzVt5Lej.js');
+var keys = require('./keys-S3YTuCcn.js');
+
+const pfCalendarCss = () => `:host{display:inline-block}:host([hidden]){display:none}.calendar{background:var(--pf-calendar-bg);border:1px solid var(--pf-calendar-border);border-radius:var(--radius-md);color:var(--pf-calendar-text);display:grid;gap:var(--space-3);padding:var(--space-3)}.header{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between}.controls{display:flex;gap:var(--space-2);min-width:0}.select{background:var(--pf-calendar-bg);border:1px solid var(--pf-calendar-border);border-radius:var(--radius-sm);color:var(--pf-calendar-text);font-family:inherit;font-size:var(--font-size-sm);padding:var(--space-1) var(--space-2)}.select:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.nav{align-items:center;background:none;border:0;border-radius:var(--radius-sm);color:var(--pf-calendar-text-muted);cursor:pointer;display:inline-flex;justify-content:center;padding:var(--space-1)}.nav:hover:not(:disabled){background:var(--pf-calendar-bg-subtle);color:var(--pf-calendar-text)}.nav:disabled{cursor:not-allowed;opacity:0.4}.nav:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.grid{display:grid;gap:2px}.row{display:contents}.grid{grid-template-columns:repeat(7, 1fr)}.weekday{color:var(--pf-calendar-text-muted);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);padding:var(--space-1) 0;text-align:center}.day,.empty{aspect-ratio:1;display:flex;min-width:var(--space-8)}.day{align-items:center;background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--pf-calendar-text);cursor:pointer;font-family:inherit;font-size:var(--font-size-sm);justify-content:center}.day:hover:not([aria-disabled='true']){background:var(--pf-calendar-bg-subtle)}.day:focus-visible{box-shadow:var(--pf-focus-ring);outline:none}.day--outside{color:var(--pf-calendar-text-muted)}.day--today{background:var(--pf-calendar-today-bg);border-color:var(--pf-calendar-today-border)}.day--selected{background:var(--pf-calendar-selected-bg);border-color:var(--pf-calendar-selected-bg);color:var(--pf-calendar-selected-text)}.day--selected:hover{background:var(--pf-calendar-selected-bg-hover)}.day[aria-disabled='true']{cursor:not-allowed;opacity:0.4}`;
+
+const PfCalendar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+    }
+    get el() { return index.getElement(this); }
+    /** The selected date, as `YYYY-MM-DD`. Reflected, so a selector can find it. */
+    value;
+    /** Earliest selectable date, as `YYYY-MM-DD`. */
+    min;
+    /** Latest selectable date, as `YYYY-MM-DD`. */
+    max;
+    /** First year offered in the year picker. Defaults to 50 years back. */
+    startYear;
+    /** Last year offered in the year picker. Defaults to 50 years on. */
+    endYear;
+    /** Render the days borrowed from the neighbouring months. */
+    showOutsideDays = true;
+    /** Accessible name for the grid. */
+    label = 'Calendar';
+    /**
+     * A predicate for days that cannot be chosen, beyond `min` and `max`.
+     *
+     * A property rather than an attribute, because a function cannot be written
+     * in HTML — the generated bindings set props as properties, so a React or
+     * Angular consumer passes it as they would any other prop, and a plain-HTML
+     * consumer uses `min`/`max` or assigns it in script.
+     */
+    isDateDisabled;
+    /** Fires with the chosen date, as `YYYY-MM-DD`. */
+    pfChange;
+    /** The month on screen. */
+    displayMonth = date.startOfMonth(new Date());
+    /** The day the grid's single tab stop sits on. */
+    focusedDate = date.toMidday(new Date());
+    /** Set once a key or a click has moved focus, so the first paint does not steal it. */
+    shouldRestoreFocus = false;
+    componentWillLoad() {
+        const selected = this.selectedDate();
+        const base = selected ?? date.toMidday(new Date());
+        this.focusedDate = base;
+        this.displayMonth = this.clamp(date.startOfMonth(base));
+    }
+    componentDidRender() {
+        if (!this.shouldRestoreFocus)
+            return;
+        this.shouldRestoreFocus = false;
+        // The grid has one tab stop, so after a move the new one has to be given
+        // focus explicitly — the old button may not even exist any more.
+        this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus();
+    }
+    /** Follows a value set from outside, so the grid shows what it is told. */
+    syncValue() {
+        const selected = this.selectedDate();
+        if (!selected)
+            return;
+        this.focusedDate = selected;
+        this.displayMonth = this.clamp(date.startOfMonth(selected));
+    }
+    /** Moves the grid to the month holding `date` (a `Date` or `YYYY-MM-DD`). */
+    async goToMonth(date$1) {
+        const target = typeof date$1 === 'string' ? date.parseISODate(date$1) : date.toMidday(date$1);
+        if (!target)
+            return;
+        this.displayMonth = this.clamp(date.startOfMonth(target));
+        this.focusedDate = target;
+    }
+    /**
+     * Puts focus on the grid's single tab stop.
+     *
+     * A method rather than something a container does for itself: the tab stop
+     * is inside this shadow root, and reaching into another component's shadow
+     * root to find it is exactly the coupling `::part()` and `@Method()` exist
+     * to avoid. `pf-date-picker` calls this when its popover opens.
+     */
+    async focusSelectedDay() {
+        this.el.shadowRoot?.querySelector('button[data-day][tabindex="0"]')?.focus();
+    }
+    selectedDate() {
+        return date.parseISODate(this.value);
+    }
+    get years() {
+        const now = new Date().getFullYear();
+        const start = this.startYear ?? now - 50;
+        const end = this.endYear ?? now + 50;
+        return { start: Math.min(start, end), end: Math.max(start, end) };
+    }
+    clamp(date$1) {
+        const { start, end } = this.years;
+        return date.clampMonthToYearRange(date$1, start, end);
+    }
+    isDisabled(date$1) {
+        const min = date.parseISODate(this.min);
+        const max = date.parseISODate(this.max);
+        if (date.isOutsideDateRange(date$1, min, max))
+            return true;
+        return this.isDateDisabled?.(date$1) ?? false;
+    }
+    select(date$1) {
+        if (this.isDisabled(date$1))
+            return;
+        this.value = date.formatISODate(date$1);
+        this.focusedDate = date$1;
+        this.displayMonth = this.clamp(date.startOfMonth(date$1));
+        this.pfChange.emit({ value: this.value });
+    }
+    /**
+     * Moves the focused day, bringing the grid with it.
+     *
+     * A disabled day can still be focused — skipping it would make a long
+     * blocked stretch impossible to cross, and the ARIA pattern is that focus
+     * moves freely while activation is refused.
+     */
+    moveFocus(move) {
+        const next = date.moveCalendarDate(this.focusedDate, move);
+        const { start, end } = this.years;
+        if (next.getFullYear() < start || next.getFullYear() > end)
+            return;
+        this.focusedDate = next;
+        this.displayMonth = this.clamp(date.startOfMonth(next));
+        this.shouldRestoreFocus = true;
+    }
+    onKeyDown = (event) => {
+        // The key map is core's, so the React `Calendar` cannot disagree with this
+        // grid about what PageUp means.
+        const move = date.resolveCalendarKey(event.key);
+        if (move) {
+            event.preventDefault();
+            this.moveFocus(move);
+            return;
+        }
+        if (event.key === keys.Keys.Enter || event.key === keys.Keys.Space) {
+            event.preventDefault();
+            this.select(this.focusedDate);
+            this.shouldRestoreFocus = true;
+        }
+    };
+    /**
+     * Shows a month and brings the tab stop with it.
+     *
+     * Both halves, always. Moving `displayMonth` alone leaves `focusedDate` on a
+     * day that is no longer rendered, so no cell carries `tabindex="0"` and the
+     * grid drops out of the tab order altogether — reachable by mouse and by
+     * nothing else. The year picker did exactly that until a test went looking.
+     */
+    showMonth(month) {
+        const target = this.clamp(date.startOfMonth(month));
+        const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0, 12).getDate();
+        this.displayMonth = target;
+        this.focusedDate = new Date(target.getFullYear(), target.getMonth(), Math.min(this.focusedDate.getDate(), lastDay), 12);
+    }
+    stepMonth(amount) {
+        this.showMonth(date.addMonths(this.displayMonth, amount));
+    }
+    renderHeader() {
+        const { start, end } = this.years;
+        const years = Array.from({ length: end - start + 1 }, (_, index) => start + index);
+        const months = Array.from({ length: 12 }, (_, month) => new Intl.DateTimeFormat('en-US', { month: 'long' }).format(new Date(2024, month, 1)));
+        const atFirst = this.displayMonth.getFullYear() === start && this.displayMonth.getMonth() === 0;
+        const atLast = this.displayMonth.getFullYear() === end && this.displayMonth.getMonth() === 11;
+        return (index.h("div", { class: "header", part: "header" }, index.h("button", { type: "button", class: "nav", "aria-label": "Previous month", disabled: atFirst, onClick: () => this.stepMonth(-1) }, index.h("pf-icon", { name: "square-caret-left" })), index.h("div", { class: "controls" }, index.h("select", { class: "select", "aria-label": "Month", onChange: (event) => {
+                const month = Number(event.target.value);
+                this.showMonth(new Date(this.displayMonth.getFullYear(), month, 1, 12));
+            } }, months.map((name, month) => (index.h("option", { key: name, value: String(month), selected: month === this.displayMonth.getMonth() }, name)))), index.h("select", { class: "select", "aria-label": "Year", onChange: (event) => {
+                const year = Number(event.target.value);
+                this.showMonth(new Date(year, this.displayMonth.getMonth(), 1, 12));
+            } }, years.map((year) => (index.h("option", { key: year, value: String(year), selected: year === this.displayMonth.getFullYear() }, year))))), index.h("button", { type: "button", class: "nav", "aria-label": "Next month", disabled: atLast, onClick: () => this.stepMonth(1) }, index.h("pf-icon", { name: "square-caret-right" }))));
+    }
+    render() {
+        const days = date.buildCalendarDays(this.displayMonth);
+        const selected = this.selectedDate();
+        const today = date.toMidday(new Date());
+        const monthLabel = new Intl.DateTimeFormat('en-US', {
+            month: 'long',
+            year: 'numeric',
+        }).format(this.displayMonth);
+        return (index.h(index.Host, { key: '1fe86f7b2c22bd62d06e6f2ea54c0a59e747fab1' }, index.h("div", { key: 'd073839e9b2dfb4d4de7c688590462d992f95944', class: "calendar", part: "calendar" }, this.renderHeader(), index.h("div", { key: '56fe4cb44559fd5bf43cff0eb8575178f7dc47ea', class: "grid", part: "grid", role: "grid", "aria-label": `${this.label}, ${monthLabel}`, onKeyDown: this.onKeyDown }, index.h("div", { key: 'd5d7d1afee29cb39f6640da24829ec85def3c886', class: "row", role: "row" }, date.WEEKDAY_LABELS.map((day) => (index.h("span", { key: day, class: "weekday", role: "columnheader", "aria-label": day }, day)))), Array.from({ length: date.CALENDAR_CELL_COUNT / 7 }, (_, week) => (index.h("div", { key: week, class: "row", role: "row" }, days.slice(week * 7, week * 7 + 7).map(({ date: date$1, inCurrentMonth }) => {
+            if (!this.showOutsideDays && !inCurrentMonth) {
+                return index.h("span", { key: date.formatISODate(date$1), class: "empty", role: "gridcell" });
+            }
+            const isSelected = selected ? date.isSameDay(selected, date$1) : false;
+            const isToday = date.isSameDay(today, date$1);
+            const isFocused = date.isSameDay(this.focusedDate, date$1);
+            const disabled = this.isDisabled(date$1);
+            return (index.h("button", { key: date.formatISODate(date$1), type: "button", role: "gridcell", "data-day": date.formatISODate(date$1), part: `day${isSelected ? ' selected' : ''}${isToday ? ' today' : ''}`, class: {
+                    day: true,
+                    'day--outside': !inCurrentMonth,
+                    'day--today': isToday,
+                    'day--selected': isSelected,
+                },
+                /* One tab stop for the whole grid: the arrows do the rest. */
+                tabindex: isFocused ? 0 : -1, "aria-selected": isSelected ? 'true' : 'false', "aria-current": isToday ? 'date' : null, "aria-disabled": disabled ? 'true' : null, "aria-label": new Intl.DateTimeFormat('en-US', {
+                    weekday: 'long',
+                    month: 'long',
+                    day: 'numeric',
+                    year: 'numeric',
+                }).format(date$1), onClick: () => {
+                    this.select(date$1);
+                    this.shouldRestoreFocus = true;
+                } }, date$1.getDate()));
+        }))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "syncValue": 0
+            }]
+    }; }
+};
+PfCalendar.style = pfCalendarCss();
+
+exports.pf_calendar = PfCalendar;
+//# sourceMappingURL=pf-calendar.entry.cjs.js.map
+
+//# sourceMappingURL=pf-calendar.cjs.entry.js.map