@pitchfork-ui/elements 0.0.0-stage → 0.2.1

package/dist/cjs/pf-scroll-area.cjs.entry.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+
+const pfScrollAreaCss = () => `:host{display:block;scrollbar-color:var(--pf-scrollarea-thumb) transparent;scrollbar-width:thin;scrollbar-gutter:stable}:host([hidden]){display:none}:host(:focus-visible){border-radius:var(--radius-sm);box-shadow:var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));outline:none}:host([orientation='vertical']){overflow-x:hidden;overflow-y:auto}:host([orientation='horizontal']){overflow-x:auto;overflow-y:hidden}:host([orientation='both']){overflow:auto}:host::-webkit-scrollbar{height:10px;width:10px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:var(--pf-scrollarea-thumb);background-clip:padding-box;border:2px solid transparent;border-radius:var(--radius-full)}:host::-webkit-scrollbar-thumb:hover{background:var(--pf-scrollarea-thumb-hover);background-clip:padding-box}:host::-webkit-scrollbar-corner{background:transparent}`;
+
+const PfScrollArea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.getElement(this); }
+    /** Which axis scrolls. Reflected so the stylesheet can select on it. */
+    orientation = 'vertical';
+    /**
+     * Make the region keyboard-focusable so it can be scrolled with the arrow
+     * keys (WCAG 2.1.1). Set false when a focusable child already provides
+     * keyboard access.
+     */
+    focusable = true;
+    /**
+     * The host scrolls, so the host is what has to be focusable — there is no
+     * inner element to put the tabindex on, which is why this is set here rather
+     * than rendered.
+     *
+     * A consumer's own `tabindex` wins: read before the first render and never
+     * overwritten, so `tabindex="-1"` is respected instead of being silently
+     * reset to 0.
+     */
+    componentWillLoad() {
+        if (this.focusable && !this.el.hasAttribute('tabindex')) {
+            this.el.setAttribute('tabindex', '0');
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '1981de11e7e17cb513ca642b180062c3767fbf41' }, index.h("slot", { key: '1260c995e6571cc826038be07fffc584343675c7' })));
+    }
+};
+PfScrollArea.style = pfScrollAreaCss();
+
+exports.pf_scroll_area = PfScrollArea;
+//# sourceMappingURL=pf-scroll-area.entry.cjs.js.map
+
+//# sourceMappingURL=pf-scroll-area.cjs.entry.js.map

package/dist/cjs/pf-scroll-area.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pf-scroll-area.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,i3BAAi3B,CAAC;;MCcp4B,YAAY,GAAA,MAAA;;;;;;IAIE,WAAW,GAA4B,UAAU;AAE1E;;;;AAIG;IACK,SAAS,GAAG,IAAI;AAExB;;;;;;;;AAQG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE;YACvD,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;;;IAIzC,MAAM,GAAA;QACJ,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/pf-scroll-area/pf-scroll-area.css?tag=pf-scroll-area&encapsulation=shadow","src/components/pf-scroll-area/pf-scroll-area.tsx"],"sourcesContent":[":host {\n  display: block;\n  /* Standard scrollbar styling (Firefox + modern browsers). */\n  scrollbar-color: var(--pf-scrollarea-thumb) transparent;\n  scrollbar-width: thin;\n  /* Reserve a gutter so the scrollbar never overlays (and obscures) content. */\n  scrollbar-gutter: stable;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  border-radius: var(--radius-sm);\n  box-shadow: var(--pf-scrollarea-focus-ring, var(--pf-focus-ring));\n  outline: none;\n}\n\n:host([orientation='vertical']) {\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n\n:host([orientation='horizontal']) {\n  overflow-x: auto;\n  overflow-y: hidden;\n}\n\n:host([orientation='both']) {\n  overflow: auto;\n}\n\n/*\n * WebKit / Blink scrollbar styling. These pseudo-elements target the host's own\n * scrollbar, so they are written against `:host` rather than an inner element.\n */\n:host::-webkit-scrollbar {\n  height: 10px;\n  width: 10px;\n}\n\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n:host::-webkit-scrollbar-thumb {\n  background: var(--pf-scrollarea-thumb);\n  /* Transparent border + padding-box clip insets the thumb so it reads slimmer. */\n  background-clip: padding-box;\n  border: 2px solid transparent;\n  border-radius: var(--radius-full);\n}\n\n:host::-webkit-scrollbar-thumb:hover {\n  background: var(--pf-scrollarea-thumb-hover);\n  background-clip: padding-box;\n}\n\n:host::-webkit-scrollbar-corner {\n  background: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type PfScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';\n\n/**\n * A scrollable region with a styled, non-overlaying scrollbar.\n *\n * @slot - the content to scroll.\n */\n@Component({\n  tag: 'pf-scroll-area',\n  styleUrl: 'pf-scroll-area.css',\n  shadow: true,\n})\nexport class PfScrollArea {\n  @Element() el!: HTMLElement;\n\n  /** Which axis scrolls. Reflected so the stylesheet can select on it. */\n  @Prop({ reflect: true }) orientation: PfScrollAreaOrientation = 'vertical';\n\n  /**\n   * Make the region keyboard-focusable so it can be scrolled with the arrow\n   * keys (WCAG 2.1.1). Set false when a focusable child already provides\n   * keyboard access.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * The host scrolls, so the host is what has to be focusable — there is no\n   * inner element to put the tabindex on, which is why this is set here rather\n   * than rendered.\n   *\n   * A consumer's own `tabindex` wins: read before the first render and never\n   * overwritten, so `tabindex=\"-1\"` is respected instead of being silently\n   * reset to 0.\n   */\n  componentWillLoad() {\n    if (this.focusable && !this.el.hasAttribute('tabindex')) {\n      this.el.setAttribute('tabindex', '0');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: 'f25e894c4f0fe0dc340b29f448add3dc71afe52a' }, index.h("div", { key: '51882857d07254c8998a34c5feaf281d55d87f51', class: "content", part: "content" }, index.h("h3", { key: '9b67978a5a2824d5d9b8881e76c9d3ed9129ae3f', class: { heading: true, empty: !this.hasHeading }, part: "heading" }, index.h("slot", { key: '588df184573f0d84d0f0fa073e7ec7bc7007ba2f', onSlotchange: this.read })), index.h("slot", { key: 'ab2749da402851c1dc922454db4188f1bed5fecf', name: "description" })), index.h("div", { key: 'fa1cdc6a8a4301d6e61275998f7550057b6cd734', class: { actions: true, empty: !this.hasActions }, part: "actions" }, index.h("slot", { key: 'b8585a98084951deb0d66c36a7c29a668d5f7dbc', name: "actions", onSlotchange: this.read }))));
+    }
+};
+PfSectionFooter.style = pfSectionFooterCss();
+
+exports.pf_section_footer = PfSectionFooter;
+//# sourceMappingURL=pf-section-footer.entry.cjs.js.map
+
+//# sourceMappingURL=pf-section-footer.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-section-footer.cjs.entry.js","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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,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,EACnEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,YAAY,EAAE,IAAI,CAAC,IAAI,GAAI,CAC9B,EACLA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,CACvB,EAENA,OAAA,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,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC5C,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.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) {
+        index.registerInstance(this, hostRef);
+    }
+    get el() { return index.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 (index.h(index.Host, { key: '4ccd9a76ae1dc8921ba2a16ab7a15ced1b626986' }, index.h("div", { key: '1df5a554bae92dd018741c0eb353f8fb6b0749d1', class: "content", part: "content" }, index.h("slot", { key: '1559805e1974477782291d45e87bfaafa58e4bbf', name: "eyebrow" }), index.h("h2", { key: 'ae351a3f5853a16aeaf83f0af5b959a113a7e827', class: "heading", part: "heading" }, index.h("slot", { key: 'e8f154fc36e3e77e550b28320a0e35f085d3a1ee' })), index.h("slot", { key: '29213ae43627969251138fc9b1b70193e693ae91', name: "description" }), index.h("div", { key: '55c17fef4be98e763ac1d9bbf169ad14309f240d', class: { metadata: true, empty: !this.hasMetadata }, part: "metadata" }, index.h("slot", { key: '191d9e23d9e769303862b6f1afe05b57242cafbe', name: "metadata", onSlotchange: this.read }))), index.h("div", { key: 'ac2fb5005a90c8f49c70c04a4193c2787ed0f004', class: { actions: true, empty: !this.hasActions }, part: "actions" }, index.h("slot", { key: '02ce065806d229d45f9498715db2648c767aec10', name: "actions", onSlotchange: this.read }))));
+    }
+};
+PfSectionHeader.style = pfSectionHeaderCss();
+
+exports.pf_section_header = PfSectionHeader;
+//# sourceMappingURL=pf-section-header.entry.cjs.js.map
+
+//# sourceMappingURL=pf-section-header.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"pf-section-header.cjs.entry.js","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,QACEA,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,EACvBA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAA,EAChCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACL,EACLA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,aAAa,EAAA,CAAG,EAC3BA,OAAA,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,EACvEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,UAAU,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC7C,CACF,EAENA,OAAA,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,EACpEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CAC5C,CACD;;;;;;;","names":["h","Host"],"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"],"version":3}

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

@@ -0,0 +1,413 @@
+'use strict';
+
+var index = require('./index-CIskGKk1.js');
+var placePopover = require('./place-popover-CMqeolzZ.js');
+var aria = require('./aria-5oCPUGFo.js');
+var keys = require('./keys-S3YTuCcn.js');
+var navigation = require('./navigation-CZce-g58.js');
+var formValidity = require('./form-validity-BCrcqnZ7.js');
+var controlLabel = require('./control-label-C0eK8bPh.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.Keys.ArrowDown]: 'next',
+    [keys.Keys.ArrowUp]: 'previous',
+    [keys.Keys.Home]: 'first',
+    [keys.Keys.End]: 'last',
+};
+const PfSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pfChange = index.createEvent(this, "pfChange");
+        this.pfOpenChange = index.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 index.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);
+        formValidity.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 = placePopover.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.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 = navigation.getEnabledIndexes(options, (option) => option.hasAttribute('disabled'));
+        const current = this.activeOption ? options.indexOf(this.activeOption) : -1;
+        const next = navigation.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 (keys.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 = aria.composeDescribedBy(this.description && 'description', this.error && 'error');
+        return (index.h(index.Host, { key: 'ccb96054293516751523dc6b89d3fd3bb3e08902' }, index.h("div", { key: '65d6ca23015f8371f02715f1b3cf862122c94932', class: "field", part: "field" }, this.label && (index.h("label", { key: '580a891de1e1c60481a494ab5f915e0c8528d511', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (index.h("span", { key: 'dd0e347bcfafdca6eba7dc06f596215b47331e8f', class: "required", "aria-hidden": "true" }, "*")))), index.h("button", { key: '7c6b543a99a06b9d18a6339e0aa3c6ad3d2eb260', id: "trigger", "aria-label": controlLabel.controlAriaLabel(this.el, this.label), 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;
+            } }, index.h("span", { key: '032fb5d8de622dde393a5100ce69d08944916bb9', class: { value: true, 'value--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder), index.h("span", { key: 'eae5f550a6b4f16a27a044220db57236aebd31b8', class: "chevron", "aria-hidden": "true" }, index.h("pf-icon", { key: '7983ac569e121be6a98822cdbec4c46ae43dc99e', name: "chevron-down" }))), this.description && (index.h("p", { key: 'c27fc89569900855af8966fcec3246f7f12c1d20', class: "description", part: "description", id: "description" }, this.description)), this.error && (index.h("p", { key: '6d805181ffb58622ed41e688195bdf58511e7efa', class: "error", part: "error", id: "error" }, this.error))), index.h("div", { key: '2dbc1adeaf68449ffaf32fc07d694d4c66860e90', 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 }, index.h("slot", { key: '02373173990a5e9ecad005b21f1a4b11d2cef032', 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();
+
+exports.pf_select = PfSelect;
+//# sourceMappingURL=pf-select.entry.cjs.js.map
+
+//# sourceMappingURL=pf-select.cjs.entry.js.map