@pitchfork-ui/elements 0.0.0-stage → 0.1.0

package/dist/esm/pf-section-footer.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfSectionFooterCss = () => `:host{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between;padding-top:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row}}:host([divider]){border-top:1px solid var(--pf-section-footer-border)}:host([align='start']){justify-content:flex-start}:host([align='end']){justify-content:flex-end}.heading.empty,.actions.empty{display:none}.content{min-width:0}.heading{color:var(--pf-section-footer-text);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-section-footer-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.4;margin:var(--space-1) 0 0}.actions{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2);width:100%}@media (min-width: 640px){.actions{width:auto}}`;
+
+const PfSectionFooter = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Draw a rule above the footer. Defaults to true, as the React one does. */
+    divider = true;
+    /** How the heading and the actions share the row. Reflected. */
+    align = 'between';
+    /** Which of the boxes that carry layout have anything in them. */
+    hasHeading = false;
+    hasActions = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const children = Array.from(this.el.children);
+        // The heading is the default slot, so it is anything *without* a slot name
+        // — including a bare text node, which is why the text is counted too.
+        this.hasHeading =
+            children.some((child) => !child.hasAttribute('slot')) ||
+                Array.from(this.el.childNodes).some((node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '');
+        this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');
+    };
+    render() {
+        return (h(Host, { key: 'f25e894c4f0fe0dc340b29f448add3dc71afe52a' }, h("div", { key: '51882857d07254c8998a34c5feaf281d55d87f51', class: "content", part: "content" }, h("h3", { key: '9b67978a5a2824d5d9b8881e76c9d3ed9129ae3f', class: { heading: true, empty: !this.hasHeading }, part: "heading" }, h("slot", { key: '588df184573f0d84d0f0fa073e7ec7bc7007ba2f', onSlotchange: this.read })), h("slot", { key: 'ab2749da402851c1dc922454db4188f1bed5fecf', name: "description" })), h("div", { key: 'fa1cdc6a8a4301d6e61275998f7550057b6cd734', class: { actions: true, empty: !this.hasActions }, part: "actions" }, h("slot", { key: 'b8585a98084951deb0d66c36a7c29a668d5f7dbc', name: "actions", onSlotchange: this.read }))));
+    }
+};
+PfSectionFooter.style = pfSectionFooterCss();
+
+export { PfSectionFooter as pf_section_footer };
+//# sourceMappingURL=pf-section-footer.entry.js.map
+
+//# sourceMappingURL=pf-section-footer.entry.js.map

package/dist/esm/pf-section-footer.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-section-footer.entry.js","sources":["src/components/pf-section-footer/pf-section-footer.css?tag=pf-section-footer&encapsulation=shadow","src/components/pf-section-footer/pf-section-footer.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n  padding-top: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n  }\n}\n\n:host([divider]) {\n  border-top: 1px solid var(--pf-section-footer-border);\n}\n\n:host([align='start']) {\n  justify-content: flex-start;\n}\n\n:host([align='end']) {\n  justify-content: flex-end;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because the actions box sets its own `display` below.\n */\n.heading.empty,\n.actions.empty {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n}\n\n.heading {\n  color: var(--pf-section-footer-text);\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-section-footer-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.4;\n  margin: var(--space-1) 0 0;\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  width: 100%;\n}\n\n@media (--sm) {\n  .actions {\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nimport type { PfSectionHeaderAlign } from '../pf-section-header/pf-section-header';\n\n/**\n * The foot of a section: an optional heading and line of text, and the\n * controls that close it off.\n *\n * The same shape as `pf-section-header` with the rule on the other edge —\n * and, unlike the header, the heading is optional here, so its box is one of\n * the ones that can be empty.\n *\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding the heading and the description.\n * @part heading - the heading's box.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-footer',\n  styleUrl: 'pf-section-footer.css',\n  shadow: true,\n})\nexport class PfSectionFooter {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule above the footer. Defaults to true, as the React one does. */\n  @Prop({ reflect: true }) divider = true;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasHeading = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const children = Array.from(this.el.children);\n\n    // The heading is the default slot, so it is anything *without* a slot name\n    // — including a bare text node, which is why the text is counted too.\n    this.hasHeading =\n      children.some((child) => !child.hasAttribute('slot')) ||\n      Array.from(this.el.childNodes).some(\n        (node) => node.nodeType === 3 && (node.textContent ?? '').trim() !== '',\n      );\n    this.hasActions = children.some((child) => child.getAttribute('slot') === 'actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <h3 class={{ heading: true, empty: !this.hasHeading }} part=\"heading\">\n            <slot onSlotchange={this.read} />\n          </h3>\n          <slot name=\"description\" />\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,q4BAAq4B,CAAC;;MCwB35B,eAAe,GAAA,MAAA;;;;;;IAID,OAAO,GAAG,IAAI;;IAGd,KAAK,GAAyB,SAAS;;IAGvD,UAAU,GAAG,KAAK;IAClB,UAAU,GAAG,KAAK;;IAG3B,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGL,IAAI,GAAG,MAAK;AAClB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;;;AAI7C,QAAA,IAAI,CAAC,UAAU;AACb,YAAA,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;AACrD,gBAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,IAAI,CACjC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CACxE;QACH,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;AACtF,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACnE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC9B,EACL,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,CACvB,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACpE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC5C,CACD;;;;;;;"}

package/dist/esm/pf-section-header.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+
+const pfSectionHeaderCss = () => `:host{align-items:flex-start;display:flex;flex-direction:column;gap:var(--space-4);justify-content:space-between;padding-bottom:var(--space-4)}:host([hidden]){display:none}@media (min-width: 640px){:host{align-items:center;flex-direction:row}}:host([divider]){border-bottom:1px solid var(--pf-section-header-border)}:host([align='start']){justify-content:flex-start}:host([align='end']){justify-content:flex-end}.metadata.empty,.actions.empty{display:none}.content{min-width:0}slot[name='eyebrow']::slotted(*){color:var(--pf-section-header-text-muted);display:block;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);letter-spacing:0.04em;margin:0 0 var(--space-1);text-transform:uppercase}.heading{color:var(--pf-section-header-text);font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0}slot[name='description']::slotted(*){color:var(--pf-section-header-text-muted);display:block;font-size:var(--font-size-sm);line-height:1.5;margin:var(--space-1) 0 0}.metadata{align-items:center;color:var(--pf-section-header-text-muted);display:inline-flex;flex-wrap:wrap;font-size:var(--font-size-sm);gap:var(--space-2);margin-top:var(--space-2)}.actions{align-items:center;display:inline-flex;flex-wrap:wrap;gap:var(--space-2);width:100%}@media (min-width: 640px){.actions{width:auto}}`;
+
+const PfSectionHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Draw a rule below the header. Reflected for the stylesheet. */
+    divider = false;
+    /** How the heading and the actions share the row. Reflected. */
+    align = 'between';
+    /** Which of the boxes that carry layout have anything in them. */
+    hasMetadata = false;
+    hasActions = false;
+    /** Read from the light DOM, so first paint is right without `slotchange`. */
+    componentWillLoad() {
+        this.read();
+    }
+    read = () => {
+        const slotted = (name) => Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);
+        this.hasMetadata = slotted('metadata');
+        this.hasActions = slotted('actions');
+    };
+    render() {
+        return (h(Host, { key: '4ccd9a76ae1dc8921ba2a16ab7a15ced1b626986' }, h("div", { key: '1df5a554bae92dd018741c0eb353f8fb6b0749d1', class: "content", part: "content" }, h("slot", { key: '1559805e1974477782291d45e87bfaafa58e4bbf', name: "eyebrow" }), h("h2", { key: 'ae351a3f5853a16aeaf83f0af5b959a113a7e827', class: "heading", part: "heading" }, h("slot", { key: 'e8f154fc36e3e77e550b28320a0e35f085d3a1ee' })), h("slot", { key: '29213ae43627969251138fc9b1b70193e693ae91', name: "description" }), h("div", { key: '55c17fef4be98e763ac1d9bbf169ad14309f240d', class: { metadata: true, empty: !this.hasMetadata }, part: "metadata" }, h("slot", { key: '191d9e23d9e769303862b6f1afe05b57242cafbe', name: "metadata", onSlotchange: this.read }))), h("div", { key: 'ac2fb5005a90c8f49c70c04a4193c2787ed0f004', class: { actions: true, empty: !this.hasActions }, part: "actions" }, h("slot", { key: '02ce065806d229d45f9498715db2648c767aec10', name: "actions", onSlotchange: this.read }))));
+    }
+};
+PfSectionHeader.style = pfSectionHeaderCss();
+
+export { PfSectionHeader as pf_section_header };
+//# sourceMappingURL=pf-section-header.entry.js.map
+
+//# sourceMappingURL=pf-section-header.entry.js.map

package/dist/esm/pf-section-header.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-section-header.entry.js","sources":["src/components/pf-section-header/pf-section-header.css?tag=pf-section-header&encapsulation=shadow","src/components/pf-section-header/pf-section-header.tsx"],"sourcesContent":[":host {\n  align-items: flex-start;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  justify-content: space-between;\n  padding-bottom: var(--space-4);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n@media (--sm) {\n  :host {\n    align-items: center;\n    flex-direction: row;\n  }\n}\n\n:host([divider]) {\n  border-bottom: 1px solid var(--pf-section-header-border);\n}\n\n:host([align='start']) {\n  justify-content: flex-start;\n}\n\n:host([align='end']) {\n  justify-content: flex-end;\n}\n\n/*\n * Hidden rather than left out, so a later `slotchange` still arrives. Two\n * classes deep, because both boxes set their own `display` below.\n */\n.metadata.empty,\n.actions.empty {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n}\n\nslot[name='eyebrow']::slotted(*) {\n  color: var(--pf-section-header-text-muted);\n  display: block;\n  font-size: var(--font-size-xs);\n  font-weight: var(--font-weight-semibold);\n  letter-spacing: 0.04em;\n  margin: 0 0 var(--space-1);\n  text-transform: uppercase;\n}\n\n.heading {\n  color: var(--pf-section-header-text);\n  font-size: var(--font-size-xl);\n  font-weight: var(--font-weight-semibold);\n  margin: 0;\n}\n\nslot[name='description']::slotted(*) {\n  color: var(--pf-section-header-text-muted);\n  display: block;\n  font-size: var(--font-size-sm);\n  line-height: 1.5;\n  margin: var(--space-1) 0 0;\n}\n\n.metadata {\n  align-items: center;\n  color: var(--pf-section-header-text-muted);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  margin-top: var(--space-2);\n}\n\n.actions {\n  align-items: center;\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  width: 100%;\n}\n\n@media (--sm) {\n  .actions {\n    width: auto;\n  }\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\nexport type PfSectionHeaderAlign = 'start' | 'between' | 'end';\n\n/**\n * The heading of a section, with room for an eyebrow, a line of explanation,\n * some metadata and a control or two.\n *\n * Every optional box stays in the tree and is hidden when empty rather than\n * being left out, because a slot that is not rendered never fires\n * `slotchange` — content added later would stay invisible for good. The\n * eyebrow and the description need no box of their own, so they are styled\n * through `::slotted()` and collapse on their own.\n *\n * @slot eyebrow - small text above the heading.\n * @slot - the heading.\n * @slot description - a line below the heading.\n * @slot metadata - small facts below the description.\n * @slot actions - controls, which sit opposite the heading on a wide screen.\n * @part content - the box holding everything but the actions.\n * @part heading - the heading's box.\n * @part metadata - the box holding the metadata slot.\n * @part actions - the box holding the actions slot.\n */\n@Component({\n  tag: 'pf-section-header',\n  styleUrl: 'pf-section-header.css',\n  shadow: true,\n})\nexport class PfSectionHeader {\n  @Element() el!: HTMLElement;\n\n  /** Draw a rule below the header. Reflected for the stylesheet. */\n  @Prop({ reflect: true }) divider = false;\n\n  /** How the heading and the actions share the row. Reflected. */\n  @Prop({ reflect: true }) align: PfSectionHeaderAlign = 'between';\n\n  /** Which of the boxes that carry layout have anything in them. */\n  @State() hasMetadata = false;\n  @State() hasActions = false;\n\n  /** Read from the light DOM, so first paint is right without `slotchange`. */\n  componentWillLoad() {\n    this.read();\n  }\n\n  private read = () => {\n    const slotted = (name: string) =>\n      Array.from(this.el.children).some((child) => child.getAttribute('slot') === name);\n\n    this.hasMetadata = slotted('metadata');\n    this.hasActions = slotted('actions');\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"content\" part=\"content\">\n          <slot name=\"eyebrow\" />\n          <h2 class=\"heading\" part=\"heading\">\n            <slot />\n          </h2>\n          <slot name=\"description\" />\n          <div class={{ metadata: true, empty: !this.hasMetadata }} part=\"metadata\">\n            <slot name=\"metadata\" onSlotchange={this.read} />\n          </div>\n        </div>\n\n        <div class={{ actions: true, empty: !this.hasActions }} part=\"actions\">\n          <slot name=\"actions\" onSlotchange={this.read} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,uyCAAuyC,CAAC;;MC6B7zC,eAAe,GAAA,MAAA;;;;;;IAID,OAAO,GAAG,KAAK;;IAGf,KAAK,GAAyB,SAAS;;IAGvD,WAAW,GAAG,KAAK;IACnB,UAAU,GAAG,KAAK;;IAG3B,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,EAAE;;IAGL,IAAI,GAAG,MAAK;AAClB,QAAA,MAAM,OAAO,GAAG,CAAC,IAAY,KAC3B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAEnF,QAAA,IAAI,CAAC,WAAW,GAAG,OAAO,CAAC,UAAU,CAAC;AACtC,QAAA,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC;AACtC,KAAC;IAED,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,EACvB,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,EACL,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,EAC3B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EACvE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC7C,CACF,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACpE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC5C,CACD;;;;;;;"}

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

@@ -0,0 +1,410 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-Bm6UxEit.js';
+import { o as observeAnchoredPosition, p as placePopover } from './place-popover-CC7AyfOt.js';
+import { c as composeDescribedBy } from './aria-DfpCerXM.js';
+import { i as isActivationKey, K as Keys } from './keys-g4FlTDZx.js';
+import { g as getEnabledIndexes, r as resolveListMove } from './navigation-CAz7-p8y.js';
+import { a as applyControlValidity } from './form-validity-Cr6IXrUk.js';
+
+//#region src/typeahead.ts
+/**
+* Printable-character typeahead for a listbox, menu or tree.
+*
+* The ARIA listbox pattern expects it: typing `b` jumps to the next option
+* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has
+* none of this — `todo.md` has the fix — so the rules live here, where
+* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /
+* `pf-tree-view` read the same ones.
+*
+* Core owns the matching; the rendering layer owns the buffer and its timer,
+* because a timer is state and core is never a state container.
+*/
+/** How long a quiet gap ends one typeahead word, in milliseconds. */
+var TYPEAHEAD_TIMEOUT_MS = 500;
+/**
+* Whether a key should go into the buffer at all.
+*
+* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length
+* rather than by a list that would need keeping up to date. A space is
+* deliberately *not* typeahead: in a listbox it selects.
+*/
+function isTypeaheadKey(key) {
+	return key.length === 1 && key !== " ";
+}
+/**
+* The buffer after `key`: lower-cased and appended, nothing more.
+*
+* A repeat is *not* special-cased here. Pressing `b` four times means "the
+* fourth option starting with b" rather than "an option starting with bbbb",
+* but that is a matching question, so `findTypeaheadMatch` reads it off the
+* buffer's shape instead — which keeps this function a plain append and lets
+* the caller hold one string.
+*/
+function nextTypeaheadBuffer(buffer, key) {
+	if (!isTypeaheadKey(key)) return buffer;
+	return buffer + key.toLowerCase();
+}
+/**
+* True when the buffer is one character repeated — including just once.
+*
+* The single-character case is the important one, and requiring two got it
+* wrong: pressing `b` while already on Banana has to move to Blackberry, the
+* way a native `<select>` does, not sit still because Banana also starts with
+* `b`. Found by a browser test on `pf-select`.
+*/
+function isCycling(buffer) {
+	return buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);
+}
+/**
+* The index of the option the buffer points at, or -1.
+*
+* Searches from `fromIndex` and wraps, so a match behind the current option is
+* still found. Two modes:
+*
+* - **Narrowing** (`br`): the current option is included, because typing more
+*   of the label you are already on should keep you there rather than skip to
+*   the next `br`.
+* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from
+*   *after* the current option — so pressing one letter walks through the
+*   options beginning with it, which is what a native `<select>` does.
+*
+* A disabled option is never matched: the keyboard would land somewhere it
+* cannot act, which is worse than not moving.
+*/
+function findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {
+	if (!buffer || labels.length === 0) return -1;
+	const cycling = isCycling(buffer);
+	const needle = cycling ? buffer[0] : buffer;
+	const start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;
+	for (let step = 0; step < labels.length; step += 1) {
+		const index = (start + step) % labels.length;
+		if (isDisabled(index)) continue;
+		if (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;
+	}
+	return -1;
+}
+
+const pfSelectCss = () => `:host{display:block;--pf-option-text:var(--pf-select-input-text, var(--pf-input-text));--pf-option-text-disabled:var(--pf-select-input-placeholder, var(--pf-input-placeholder));--pf-option-active-bg:var(--pf-select-option-active-bg);--pf-option-active-text:var(--pf-select-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-input-label-text, var(--pf-input-text));font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-select-invalid-border);margin-inline-start:var(--space-1)}.trigger{align-items:center;background:var(--pf-input-bg);border:1px solid var(--pf-input-border);border-radius:var(--radius-md);color:var(--pf-input-text);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-sm);gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-3);text-align:start;width:100%}.trigger:hover:not(:disabled){border-color:var(--pf-input-border-hover)}.trigger:focus-visible{border-color:var(--pf-select-focus-border);box-shadow:var(--pf-focus-ring);outline:none}.trigger:disabled{cursor:not-allowed;opacity:0.6}.trigger--invalid{border-color:var(--pf-select-invalid-border)}.value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.value--placeholder{color:var(--pf-input-placeholder)}.chevron{align-items:center;display:inline-flex;flex-shrink:0;transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.listbox{inset:auto;margin:0;background:var(--pf-select-menu-bg);border:1px solid var(--pf-select-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);padding:var(--space-1)}.listbox:popover-open{animation:pf-select-in var(--pf-transition-enter)}@keyframes pf-select-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}`;
+
+const MOVES = {
+    [Keys.ArrowDown]: 'next',
+    [Keys.ArrowUp]: 'previous',
+    [Keys.Home]: 'first',
+    [Keys.End]: 'last',
+};
+const PfSelect = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pfChange = createEvent(this, "pfChange");
+        this.pfOpenChange = createEvent(this, "pfOpenChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    get el() { return getElement(this); }
+    internals;
+    /** Submitted under this name. Reflected; the submission reads the attribute. */
+    name;
+    /** The chosen option's value, or empty. */
+    value = '';
+    /** Whether the listbox is showing. Reflected for the stylesheet. */
+    open = false;
+    label;
+    description;
+    error;
+    placeholder = 'Select an option';
+    required = false;
+    disabled = false;
+    /** Options to show before the listbox scrolls. Unset means it fits them all. */
+    maxVisibleOptions;
+    /** Fires when the chosen value changes. */
+    pfChange;
+    /** Fires whenever the listbox opens or closes, whoever caused it. */
+    pfOpenChange;
+    /** The label of the chosen option, for the trigger to show. */
+    selectedLabel = '';
+    initialValue = '';
+    stopObserving;
+    activeOption = null;
+    typeahead = '';
+    typeaheadTimer;
+    componentWillLoad() {
+        this.initialValue = this.value ?? '';
+        this.syncFormState();
+        this.syncOptions();
+    }
+    componentDidRender() {
+        this.syncActiveDescendant();
+    }
+    disconnectedCallback() {
+        this.stopObserving?.();
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+    }
+    syncFormState() {
+        this.internals.setFormValue(this.value || null);
+        applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);
+    }
+    /** The value changed, so the children's `selected` and the trigger follow. */
+    syncOptions() {
+        const options = this.options();
+        let label = '';
+        for (const option of options) {
+            const selected = this.optionValue(option) === this.value && this.value !== '';
+            option.selected = selected;
+            if (selected)
+                label = option.textContent?.trim() ?? '';
+        }
+        this.selectedLabel = label;
+    }
+    syncOpen(next, previous) {
+        if (next)
+            this.showListbox();
+        else
+            this.hideListbox();
+        if (next !== previous)
+            this.pfOpenChange.emit({ open: next });
+    }
+    async show() {
+        if (!this.disabled)
+            this.open = true;
+    }
+    async hide() {
+        this.open = false;
+    }
+    async checkValidity() {
+        return this.internals.checkValidity();
+    }
+    async reportValidity() {
+        return this.internals.reportValidity();
+    }
+    async getValidationMessage() {
+        return this.internals.validationMessage;
+    }
+    /** A reset restores the value the control started with, not an empty one. */
+    formResetCallback() {
+        this.value = this.initialValue;
+    }
+    /** An option added or removed while mounted; re-mark the children. */
+    onSlotChange = () => {
+        this.syncOptions();
+    };
+    /** Re-reads the options, for a label edited in place (which fires no slotchange). */
+    async refresh() {
+        this.syncOptions();
+    }
+    options() {
+        return Array.from(this.el.querySelectorAll('pf-option'));
+    }
+    enabled() {
+        return this.options().filter((option) => !option.hasAttribute('disabled'));
+    }
+    /** The property, never the attribute: a binding may only have set the former. */
+    optionValue(option) {
+        return option.value ?? option.getAttribute('value') ?? '';
+    }
+    get listbox() {
+        return this.el.shadowRoot?.querySelector('[part="listbox"]') ?? null;
+    }
+    get trigger() {
+        return this.el.shadowRoot?.querySelector('[part="trigger"]') ?? null;
+    }
+    showListbox() {
+        const panel = this.listbox;
+        if (this.disabled || !panel || panel.matches(':popover-open'))
+            return;
+        panel.showPopover();
+        this.stopObserving?.();
+        this.stopObserving = observeAnchoredPosition({
+            getAnchor: () => this.trigger,
+            getFloating: () => panel,
+            // The listbox matches the trigger's width, as the React component does.
+            matchAnchorWidth: true,
+            flip: true,
+            /*
+             * `width` *and* `minWidth`: core reports whichever the mode calls for
+             * and leaves the other undefined — `matchAnchorWidth: true` gives a
+             * `width`, false gives a `minWidth`. Reading only `minWidth`, which is
+             * what pf-dropdown needs, left the listbox at its intrinsic 156px beside
+             * a 1216px trigger. The smoke test against a real build caught it.
+             */
+            onChange: ({ left, top, width, minWidth }) => {
+                placePopover(panel, left, top);
+                if (width !== undefined)
+                    panel.style.width = `${width}px`;
+                if (minWidth !== undefined)
+                    panel.style.minWidth = `${minWidth}px`;
+            },
+        });
+        /*
+         * Opens on the chosen option, or the first selectable one. Landing
+         * anywhere else would make the arrows start from somewhere the user has
+         * no reason to expect.
+         */
+        const options = this.options();
+        const chosen = options.find((option) => this.optionValue(option) === this.value);
+        this.setActive(chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null));
+    }
+    hideListbox() {
+        this.stopObserving?.();
+        this.stopObserving = undefined;
+        this.clearTypeahead();
+        const panel = this.listbox;
+        if (panel?.matches(':popover-open'))
+            panel.hidePopover();
+    }
+    onToggle = (event) => {
+        const nowOpen = event.newState === 'open';
+        if (this.open !== nowOpen)
+            this.open = nowOpen;
+        if (!nowOpen)
+            this.trigger?.focus();
+    };
+    setActive(option) {
+        for (const other of this.options()) {
+            if (other !== option)
+                other.active = false;
+        }
+        if (option)
+            option.active = true;
+        this.activeOption = option;
+        this.syncActiveDescendant();
+        if (option && typeof option.scrollIntoView === 'function') {
+            option.scrollIntoView({ block: 'nearest' });
+        }
+    }
+    /**
+     * Feature-detected. Where ARIA element reflection is missing there is no
+     * cross-root equivalent, so the active option stops being *announced* while
+     * the arrows and Enter still work — recorded in `todo.md`.
+     */
+    syncActiveDescendant() {
+        const trigger = this.trigger;
+        if (!trigger || !('ariaActiveDescendantElement' in trigger))
+            return;
+        trigger.ariaActiveDescendantElement = this.open ? this.activeOption : null;
+    }
+    commit(option) {
+        if (option.hasAttribute('disabled'))
+            return;
+        const next = this.optionValue(option);
+        this.open = false;
+        this.trigger?.focus();
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.pfChange.emit({ value: next });
+    }
+    /** An option asked to be taken. The select decides, reports and closes. */
+    handleOptionSelect(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        const option = this.options().find((candidate) => this.optionValue(candidate) === event.detail.value);
+        if (option)
+            this.commit(option);
+    }
+    move(action) {
+        const options = this.options();
+        const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));
+        const current = this.activeOption ? options.indexOf(this.activeOption) : -1;
+        const next = resolveListMove(action, enabledIndexes, current);
+        if (next !== -1)
+            this.setActive(options[next] ?? null);
+    }
+    clearTypeahead() {
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = undefined;
+        this.typeahead = '';
+    }
+    /**
+     * Typeahead. The buffer and its timer live here, because a timer is state
+     * and core is never a state container; the matching is core's.
+     */
+    handleTypeahead(key) {
+        this.typeahead = nextTypeaheadBuffer(this.typeahead, key);
+        if (this.typeaheadTimer)
+            clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);
+        const options = this.options();
+        const labels = options.map((option) => option.textContent ?? '');
+        const from = this.activeOption ? options.indexOf(this.activeOption) : -1;
+        const match = findTypeaheadMatch(labels, this.typeahead, from, (index) => options[index].hasAttribute('disabled'));
+        if (match === -1)
+            return;
+        /*
+         * Closed, typeahead *chooses* rather than merely highlighting: that is
+         * what a native `<select>` does, and with no listbox on screen a
+         * highlight nobody can see would be no feedback at all.
+         */
+        if (this.open)
+            this.setActive(options[match]);
+        else
+            this.commit(options[match]);
+    }
+    handleKeyDown(event) {
+        if (this.disabled || event.defaultPrevented)
+            return;
+        const move = MOVES[event.key];
+        if (move) {
+            event.preventDefault();
+            // Down or Up on a closed select opens it, as a combobox should.
+            if (!this.open)
+                this.open = true;
+            else
+                this.move(move);
+            return;
+        }
+        if (isActivationKey(event.key)) {
+            event.preventDefault();
+            if (!this.open) {
+                this.open = true;
+            }
+            else if (this.activeOption) {
+                this.commit(this.activeOption);
+            }
+            return;
+        }
+        // Escape is the browser's while the listbox is a `popover="auto"`.
+        if (isTypeaheadKey(event.key)) {
+            event.preventDefault();
+            this.handleTypeahead(event.key);
+        }
+    }
+    render() {
+        const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (h(Host, { key: '24c97882ec87fd8dc346ab6b10efe9d6a23359e3' }, h("div", { key: 'd96e86483cad67270c6359f1594872f7638ec218', class: "field", part: "field" }, this.label && (h("label", { key: '92736ce6664e9b107a85008cacccaf0e8b6175d4', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '72c82fe29714e9c3ecca4bcad72318fb0e0dc217', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: 'c07e0f5ef7f202dc1239a6868d4c5360194889a4', id: "trigger", part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", role: "combobox", disabled: this.disabled, "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "listbox", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+                if (!this.disabled)
+                    this.open = !this.open;
+            } }, h("span", { key: 'a745f2fcce7fd7d3e2a8d0b245d4b6e38baf934d', class: { value: true, 'value--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder), h("span", { key: 'f4fe94fb5877aa8b7a9442112d897368d208e108', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: '0e9c5dbedc04f727fe9be09b56a5cebbec99607f', name: "chevron-down" }))), this.description && (h("p", { key: '80e491e4ce53b694803d0f8978af584cb418ea79', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '1e8e8c4d46f746981f831ca8e7574f94bd9673bb', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '9daf605fa081d9e2b3f4a07e9cb41e17cd142b42', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-label": this.label ?? this.placeholder, style: this.maxVisibleOptions
+                ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }
+                : undefined, onToggle: this.onToggle }, h("slot", { key: 'f23712d710ef4aa13b186ef5a8f075494dc7b5ca', onSlotchange: this.onSlotChange }))));
+    }
+    static get formAssociated() { return true; }
+    static get watchers() { return {
+        "value": [{
+                "syncFormState": 0
+            }, {
+                "syncOptions": 0
+            }],
+        "error": [{
+                "syncFormState": 0
+            }],
+        "required": [{
+                "syncFormState": 0
+            }],
+        "open": [{
+                "syncOpen": 0
+            }]
+    }; }
+};
+PfSelect.style = pfSelectCss();
+
+export { PfSelect as pf_select };
+//# sourceMappingURL=pf-select.entry.js.map
+
+//# sourceMappingURL=pf-select.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pf-select.entry.js","sources":["../core/dist/typeahead.js","src/components/pf-select/pf-select.css?tag=pf-select&encapsulation=shadow","src/components/pf-select/pf-select.tsx"],"sourcesContent":["//#region src/typeahead.ts\n/**\n* Printable-character typeahead for a listbox, menu or tree.\n*\n* The ARIA listbox pattern expects it: typing `b` jumps to the next option\n* beginning with `b`, and typing `br` narrows to `br`. The React `Select` has\n* none of this — `todo.md` has the fix — so the rules live here, where\n* `<pf-select>` and every later `pf-combobox` / `pf-multi-select` /\n* `pf-tree-view` read the same ones.\n*\n* Core owns the matching; the rendering layer owns the buffer and its timer,\n* because a timer is state and core is never a state container.\n*/\n/** How long a quiet gap ends one typeahead word, in milliseconds. */\nvar TYPEAHEAD_TIMEOUT_MS = 500;\n/**\n* Whether a key should go into the buffer at all.\n*\n* One character, so `Enter`, `ArrowDown` and `Escape` are excluded by length\n* rather than by a list that would need keeping up to date. A space is\n* deliberately *not* typeahead: in a listbox it selects.\n*/\nfunction isTypeaheadKey(key) {\n\treturn key.length === 1 && key !== \" \";\n}\n/**\n* The buffer after `key`: lower-cased and appended, nothing more.\n*\n* A repeat is *not* special-cased here. Pressing `b` four times means \"the\n* fourth option starting with b\" rather than \"an option starting with bbbb\",\n* but that is a matching question, so `findTypeaheadMatch` reads it off the\n* buffer's shape instead — which keeps this function a plain append and lets\n* the caller hold one string.\n*/\nfunction nextTypeaheadBuffer(buffer, key) {\n\tif (!isTypeaheadKey(key)) return buffer;\n\treturn buffer + key.toLowerCase();\n}\n/**\n* True when the buffer is one character repeated — including just once.\n*\n* The single-character case is the important one, and requiring two got it\n* wrong: pressing `b` while already on Banana has to move to Blackberry, the\n* way a native `<select>` does, not sit still because Banana also starts with\n* `b`. Found by a browser test on `pf-select`.\n*/\nfunction isCycling(buffer) {\n\treturn buffer.length > 0 && [...buffer].every((char) => char === buffer[0]);\n}\n/**\n* The index of the option the buffer points at, or -1.\n*\n* Searches from `fromIndex` and wraps, so a match behind the current option is\n* still found. Two modes:\n*\n* - **Narrowing** (`br`): the current option is included, because typing more\n*   of the label you are already on should keep you there rather than skip to\n*   the next `br`.\n* - **Cycling** (`b`, `bb`, `bbb`): one character repeated, searched from\n*   *after* the current option — so pressing one letter walks through the\n*   options beginning with it, which is what a native `<select>` does.\n*\n* A disabled option is never matched: the keyboard would land somewhere it\n* cannot act, which is worse than not moving.\n*/\nfunction findTypeaheadMatch(labels, buffer, fromIndex = -1, isDisabled = () => false) {\n\tif (!buffer || labels.length === 0) return -1;\n\tconst cycling = isCycling(buffer);\n\tconst needle = cycling ? buffer[0] : buffer;\n\tconst start = fromIndex < 0 ? 0 : cycling ? fromIndex + 1 : fromIndex;\n\tfor (let step = 0; step < labels.length; step += 1) {\n\t\tconst index = (start + step) % labels.length;\n\t\tif (isDisabled(index)) continue;\n\t\tif (labels[index]?.trim().toLowerCase().startsWith(needle)) return index;\n\t}\n\treturn -1;\n}\n//#endregion\nexport { TYPEAHEAD_TIMEOUT_MS, findTypeaheadMatch, isTypeaheadKey, nextTypeaheadBuffer };\n","/*\n * The generic set pf-option reads, mapped to this control's own family. They\n * inherit through the shadow boundary, so a slotted option is themed by the\n * listbox it sits in without knowing which that is.\n */\n:host {\n  display: block;\n  --pf-option-text: var(--pf-select-input-text, var(--pf-input-text));\n  --pf-option-text-disabled: var(--pf-select-input-placeholder, var(--pf-input-placeholder));\n  --pf-option-active-bg: var(--pf-select-option-active-bg);\n  --pf-option-active-text: var(--pf-select-option-active-text);\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.field {\n  display: grid;\n  gap: var(--space-1);\n}\n\n.label {\n  color: var(--pf-input-label-text, var(--pf-input-text));\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n}\n\n.required {\n  color: var(--pf-select-invalid-border);\n  margin-inline-start: var(--space-1);\n}\n\n.trigger {\n  align-items: center;\n  background: var(--pf-input-bg);\n  border: 1px solid var(--pf-input-border);\n  border-radius: var(--radius-md);\n  color: var(--pf-input-text);\n  cursor: pointer;\n  display: flex;\n  font-family: inherit;\n  font-size: var(--font-size-sm);\n  gap: var(--space-2);\n  justify-content: space-between;\n  padding: var(--space-2) var(--space-3);\n  text-align: start;\n  width: 100%;\n}\n\n.trigger:hover:not(:disabled) {\n  border-color: var(--pf-input-border-hover);\n}\n\n.trigger:focus-visible {\n  border-color: var(--pf-select-focus-border);\n  box-shadow: var(--pf-focus-ring);\n  outline: none;\n}\n\n.trigger:disabled {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.trigger--invalid {\n  border-color: var(--pf-select-invalid-border);\n}\n\n.value {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value--placeholder {\n  color: var(--pf-input-placeholder);\n}\n\n.chevron {\n  align-items: center;\n  display: inline-flex;\n  flex-shrink: 0;\n  transition: transform var(--pf-transition-fast);\n}\n\n:host([open]) .chevron {\n  transform: rotate(180deg);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .chevron {\n    transition: none;\n  }\n}\n\n/*\n * See src/place-popover.ts: `inset: auto; margin: 0` are what make the\n * coordinates mean what they say, since the UA stylesheet centres a popover.\n */\n.listbox {\n  inset: auto;\n  margin: 0;\n  background: var(--pf-select-menu-bg);\n  border: 1px solid var(--pf-select-menu-border);\n  border-radius: var(--radius-md);\n  box-shadow: var(--pf-elevation-popover-shadow);\n  padding: var(--space-1);\n}\n\n.listbox:popover-open {\n  animation: pf-select-in var(--pf-transition-enter);\n}\n\n/* Its own copy: @keyframes do not cross a shadow boundary. */\n@keyframes pf-select-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .listbox:popover-open {\n    animation: none;\n  }\n}\n","import {\n  composeDescribedBy,\n  findTypeaheadMatch,\n  getEnabledIndexes,\n  isActivationKey,\n  Keys,\n  nextTypeaheadBuffer,\n  observeAnchoredPosition,\n  resolveListMove,\n  TYPEAHEAD_TIMEOUT_MS,\n  isTypeaheadKey,\n  type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { placePopover } from '../../place-popover';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nconst MOVES: Record<string, ListNavigationAction> = {\n  [Keys.ArrowDown]: 'next',\n  [Keys.ArrowUp]: 'previous',\n  [Keys.Home]: 'first',\n  [Keys.End]: 'last',\n};\n\n/**\n * A form-associated single-choice select over `pf-option` children.\n *\n * The first of Wave 5, and the worked example for §2.1: the options are child\n * elements, so a label is a slot and can hold anything, where the React\n * `Select`'s `options` array can only hold a string.\n *\n * **It has typeahead, which the React component does not.** Typing `b` jumps\n * to the next option beginning with `b`, `br` narrows, and `bbb` cycles — the\n * ARIA listbox pattern, and the matching is core's so a later `pf-combobox`\n * answers the same keystrokes. `todo.md` has the React fix.\n *\n * Form-associated, so the value submits by itself. The React component fakes\n * that with a hidden `<input>` beside the trigger.\n *\n * The active option is set as an *element*, not an IDREF: the trigger is in\n * this shadow root and the options are slotted light DOM, and a cross-root\n * IDREF is absent from the accessibility tree — measured. `aria-controls` does\n * work, because the listbox itself is in this same root.\n *\n * @slot - the `pf-option` children.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the combobox button.\n * @part listbox - the floating listbox the options are slotted into.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n */\n@Component({\n  tag: 'pf-select',\n  styleUrl: 'pf-select.css',\n  formAssociated: true,\n  shadow: true,\n})\nexport class PfSelect {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Submitted under this name. Reflected; the submission reads the attribute. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** The chosen option's value, or empty. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** Whether the listbox is showing. Reflected for the stylesheet. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  @Prop() label?: string;\n\n  @Prop() description?: string;\n\n  @Prop() error?: string;\n\n  @Prop() placeholder = 'Select an option';\n\n  @Prop({ reflect: true }) required = false;\n\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Options to show before the listbox scrolls. Unset means it fits them all. */\n  @Prop() maxVisibleOptions?: number;\n\n  /** Fires when the chosen value changes. */\n  @Event() pfChange!: EventEmitter<{ value: string }>;\n\n  /** Fires whenever the listbox opens or closes, whoever caused it. */\n  @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n  /** The label of the chosen option, for the trigger to show. */\n  @State() selectedLabel = '';\n\n  private initialValue = '';\n  private stopObserving?: () => void;\n  private activeOption: HTMLElement | null = null;\n  private typeahead = '';\n  private typeaheadTimer?: ReturnType<typeof setTimeout>;\n\n  componentWillLoad() {\n    this.initialValue = this.value ?? '';\n    this.syncFormState();\n    this.syncOptions();\n  }\n\n  componentDidRender() {\n    this.syncActiveDescendant();\n  }\n\n  disconnectedCallback() {\n    this.stopObserving?.();\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n  }\n\n  @Watch('value')\n  @Watch('error')\n  @Watch('required')\n  syncFormState() {\n    this.internals.setFormValue(this.value || null);\n    applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n  }\n\n  /** The value changed, so the children's `selected` and the trigger follow. */\n  @Watch('value')\n  syncOptions() {\n    const options = this.options();\n    let label = '';\n\n    for (const option of options) {\n      const selected = this.optionValue(option) === this.value && this.value !== '';\n      (option as HTMLElement & { selected: boolean }).selected = selected;\n      if (selected) label = option.textContent?.trim() ?? '';\n    }\n\n    this.selectedLabel = label;\n  }\n\n  @Watch('open')\n  syncOpen(next: boolean, previous: boolean) {\n    if (next) this.showListbox();\n    else this.hideListbox();\n    if (next !== previous) this.pfOpenChange.emit({ open: next });\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    if (!this.disabled) this.open = true;\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.internals.checkValidity();\n  }\n\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.internals.reportValidity();\n  }\n\n  @Method()\n  async getValidationMessage(): Promise<string> {\n    return this.internals.validationMessage;\n  }\n\n  /** A reset restores the value the control started with, not an empty one. */\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  /** An option added or removed while mounted; re-mark the children. */\n  private onSlotChange = () => {\n    this.syncOptions();\n  };\n\n  /** Re-reads the options, for a label edited in place (which fires no slotchange). */\n  @Method()\n  async refresh(): Promise<void> {\n    this.syncOptions();\n  }\n\n  private options(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('pf-option'));\n  }\n\n  private enabled(): HTMLElement[] {\n    return this.options().filter((option) => !option.hasAttribute('disabled'));\n  }\n\n  /** The property, never the attribute: a binding may only have set the former. */\n  private optionValue(option: HTMLElement): string {\n    return (option as HTMLElement & { value?: string }).value ?? option.getAttribute('value') ?? '';\n  }\n\n  private get listbox() {\n    return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"listbox\"]') ?? null;\n  }\n\n  private get trigger() {\n    return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n  }\n\n  private showListbox() {\n    const panel = this.listbox;\n    if (this.disabled || !panel || panel.matches(':popover-open')) return;\n\n    panel.showPopover();\n    this.stopObserving?.();\n    this.stopObserving = observeAnchoredPosition({\n      getAnchor: () => this.trigger,\n      getFloating: () => panel,\n      // The listbox matches the trigger's width, as the React component does.\n      matchAnchorWidth: true,\n      flip: true,\n      /*\n       * `width` *and* `minWidth`: core reports whichever the mode calls for\n       * and leaves the other undefined — `matchAnchorWidth: true` gives a\n       * `width`, false gives a `minWidth`. Reading only `minWidth`, which is\n       * what pf-dropdown needs, left the listbox at its intrinsic 156px beside\n       * a 1216px trigger. The smoke test against a real build caught it.\n       */\n      onChange: ({ left, top, width, minWidth }) => {\n        placePopover(panel, left, top);\n        if (width !== undefined) panel.style.width = `${width}px`;\n        if (minWidth !== undefined) panel.style.minWidth = `${minWidth}px`;\n      },\n    });\n\n    /*\n     * Opens on the chosen option, or the first selectable one. Landing\n     * anywhere else would make the arrows start from somewhere the user has\n     * no reason to expect.\n     */\n    const options = this.options();\n    const chosen = options.find((option) => this.optionValue(option) === this.value);\n    this.setActive(\n      chosen && !chosen.hasAttribute('disabled') ? chosen : (this.enabled()[0] ?? null),\n    );\n  }\n\n  private hideListbox() {\n    this.stopObserving?.();\n    this.stopObserving = undefined;\n    this.clearTypeahead();\n    const panel = this.listbox;\n    if (panel?.matches(':popover-open')) panel.hidePopover();\n  }\n\n  private onToggle = (event: ToggleEvent) => {\n    const nowOpen = event.newState === 'open';\n    if (this.open !== nowOpen) this.open = nowOpen;\n    if (!nowOpen) this.trigger?.focus();\n  };\n\n  private setActive(option: HTMLElement | null) {\n    for (const other of this.options()) {\n      if (other !== option) (other as HTMLElement & { active: boolean }).active = false;\n    }\n    if (option) (option as HTMLElement & { active: boolean }).active = true;\n\n    this.activeOption = option;\n    this.syncActiveDescendant();\n    if (option && typeof option.scrollIntoView === 'function') {\n      option.scrollIntoView({ block: 'nearest' });\n    }\n  }\n\n  /**\n   * Feature-detected. Where ARIA element reflection is missing there is no\n   * cross-root equivalent, so the active option stops being *announced* while\n   * the arrows and Enter still work — recorded in `todo.md`.\n   */\n  private syncActiveDescendant() {\n    const trigger = this.trigger;\n    if (!trigger || !('ariaActiveDescendantElement' in trigger)) return;\n    (\n      trigger as unknown as { ariaActiveDescendantElement: Element | null }\n    ).ariaActiveDescendantElement = this.open ? this.activeOption : null;\n  }\n\n  private commit(option: HTMLElement) {\n    if (option.hasAttribute('disabled')) return;\n\n    const next = this.optionValue(option);\n    this.open = false;\n    this.trigger?.focus();\n\n    if (next === this.value) return;\n    this.value = next;\n    this.pfChange.emit({ value: next });\n  }\n\n  /** An option asked to be taken. The select decides, reports and closes. */\n  @Listen('pfOptionSelect')\n  handleOptionSelect(event: CustomEvent<{ value: string }>) {\n    event.stopPropagation();\n    if (this.disabled) return;\n\n    const option = this.options().find(\n      (candidate) => this.optionValue(candidate) === event.detail.value,\n    );\n    if (option) this.commit(option);\n  }\n\n  private move(action: ListNavigationAction) {\n    const options = this.options();\n    const enabledIndexes = getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));\n    const current = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const next = resolveListMove(action, enabledIndexes, current);\n    if (next !== -1) this.setActive(options[next] ?? null);\n  }\n\n  private clearTypeahead() {\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = undefined;\n    this.typeahead = '';\n  }\n\n  /**\n   * Typeahead. The buffer and its timer live here, because a timer is state\n   * and core is never a state container; the matching is core's.\n   */\n  private handleTypeahead(key: string) {\n    this.typeahead = nextTypeaheadBuffer(this.typeahead, key);\n\n    if (this.typeaheadTimer) clearTimeout(this.typeaheadTimer);\n    this.typeaheadTimer = setTimeout(() => this.clearTypeahead(), TYPEAHEAD_TIMEOUT_MS);\n\n    const options = this.options();\n    const labels = options.map((option) => option.textContent ?? '');\n    const from = this.activeOption ? options.indexOf(this.activeOption) : -1;\n    const match = findTypeaheadMatch(labels, this.typeahead, from, (index) =>\n      options[index].hasAttribute('disabled'),\n    );\n\n    if (match === -1) return;\n\n    /*\n     * Closed, typeahead *chooses* rather than merely highlighting: that is\n     * what a native `<select>` does, and with no listbox on screen a\n     * highlight nobody can see would be no feedback at all.\n     */\n    if (this.open) this.setActive(options[match]);\n    else this.commit(options[match]);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled || event.defaultPrevented) return;\n\n    const move = MOVES[event.key];\n    if (move) {\n      event.preventDefault();\n      // Down or Up on a closed select opens it, as a combobox should.\n      if (!this.open) this.open = true;\n      else this.move(move);\n      return;\n    }\n\n    if (isActivationKey(event.key)) {\n      event.preventDefault();\n      if (!this.open) {\n        this.open = true;\n      } else if (this.activeOption) {\n        this.commit(this.activeOption);\n      }\n      return;\n    }\n\n    // Escape is the browser's while the listbox is a `popover=\"auto\"`.\n    if (isTypeaheadKey(event.key)) {\n      event.preventDefault();\n      this.handleTypeahead(event.key);\n    }\n  }\n\n  render() {\n    const describedBy = composeDescribedBy(\n      this.description && 'description',\n      this.error && 'error',\n    );\n\n    return (\n      <Host>\n        <div class=\"field\" part=\"field\">\n          {this.label && (\n            <label class=\"label\" part=\"label\" htmlFor=\"trigger\">\n              {this.label}\n              {this.required && (\n                <span class=\"required\" aria-hidden=\"true\">\n                  *\n                </span>\n              )}\n            </label>\n          )}\n\n          <button\n            id=\"trigger\"\n            part=\"trigger\"\n            class={{ trigger: true, 'trigger--invalid': Boolean(this.error) }}\n            type=\"button\"\n            role=\"combobox\"\n            disabled={this.disabled}\n            aria-haspopup=\"listbox\"\n            aria-expanded={this.open ? 'true' : 'false'}\n            /* Same shadow root as the listbox, so this IDREF resolves. */\n            aria-controls=\"listbox\"\n            aria-invalid={this.error ? 'true' : null}\n            aria-required={this.required ? 'true' : null}\n            aria-describedby={describedBy}\n            onClick={() => {\n              if (!this.disabled) this.open = !this.open;\n            }}\n          >\n            <span class={{ value: true, 'value--placeholder': !this.selectedLabel }}>\n              {this.selectedLabel || this.placeholder}\n            </span>\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <pf-icon name=\"chevron-down\"></pf-icon>\n            </span>\n          </button>\n\n          {this.description && (\n            <p class=\"description\" part=\"description\" id=\"description\">\n              {this.description}\n            </p>\n          )}\n          {this.error && (\n            <p class=\"error\" part=\"error\" id=\"error\">\n              {this.error}\n            </p>\n          )}\n        </div>\n\n        <div\n          id=\"listbox\"\n          part=\"listbox\"\n          class=\"listbox\"\n          popover=\"auto\"\n          role=\"listbox\"\n          aria-label={this.label ?? this.placeholder}\n          style={\n            this.maxVisibleOptions\n              ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }\n              : undefined\n          }\n          onToggle={this.onToggle}\n        >\n          <slot onSlotchange={this.onSlotChange} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}