npm - @pitchfork-ui/elements - Versions diffs - 0.1.0 → 0.2.1 - Mend

@pitchfork-ui/elements 0.1.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (264) hide show

package/dist/collection/components/pf-modal/pf-modal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["../../../src/components/pf-modal/pf-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nexport type PfModalSize = 'sm' \| 'md' \| 'lg';\n\n/*\n A modal dialog.\n \n A native `<dialog>` opened with `showModal()`, which from inside a shadow\n * root gives the focus trap, Escape and the backdrop for nothing — all\n * measured: focus moves inside on open and cannot be taken by a light-DOM\n * button, and a real Escape fires `cancel` then `close`. So `trapFocus` from\n * core is not needed here, unlike in the React component.\n \n What `showModal()` does not do is lock page scroll — measured: a real\n * wheel still scrolled the page behind an open modal — so this element locks\n * it, exactly as the React component does.\n \n @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and\n * `pf-modal-footer`.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the bordered box the content sits in.\n * @part close - the close button.\n /\n@Component({\n tag: 'pf-modal',\n styleUrl: 'pf-modal.css',\n shadow: true,\n})\nexport class PfModal {\n @Element() el!: HTMLElement;\n\n /* Whether the modal is showing. Reflected so the stylesheet can select on it. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Panel width. Reflected so the stylesheet can select on it. /\n @Prop({ reflect: true }) size: PfModalSize = 'md';\n\n /\n Accessible name. Falls back to the text of whatever is slotted, which is\n * usually the header — `aria-labelledby` cannot be used, because an IDREF\n * does not cross a shadow boundary and the header is in the light DOM.\n /\n @Prop() label?: string;\n\n /* Close on Escape or a click on the overlay. Defaults to true. /\n @Prop() dismissable = true;\n\n /* Render the corner close button. Defaults to true. /\n @Prop() showCloseButton = true;\n\n /* Fires whenever the modal opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /\n Releases the page-scroll lock, or null when this modal does not hold it.\n * The lock is core's and reference-counted, so a slideout opening over a\n * modal cannot leave the page unscrollable.\n /\n private releaseScroll: (() => void) \| null = null;\n\n componentDidLoad() {\n if (this.open) this.showDialog();\n }\n\n disconnectedCallback() {\n // A modal removed while open would otherwise leave the page unscrollable.\n this.unlockScroll();\n }\n\n /* Opens the modal. /\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n /* Closes the modal. /\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n /\n The one place a state change is announced, whatever caused it: `show()`,\n * the close button, Escape, an overlay click, or a consumer writing the prop.\n \n The first version emitted from the `close` handler alone, which fired for\n * every close and for no open — caught by its own test. A consumer mirroring\n * this value back sets `open` to what it already is, which Stencil does not\n * treat as a change, so there is no loop.\n /\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showDialog();\n else this.closeDialog();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n private get dialog() {\n return this.el.shadowRoot?.querySelector('dialog') ?? null;\n }\n\n private lockScroll() {\n if (this.releaseScroll) return;\n this.releaseScroll = lockPageScroll();\n }\n\n private unlockScroll() {\n this.releaseScroll?.();\n this.releaseScroll = null;\n }\n\n private showDialog() {\n const dialog = this.dialog;\n if (!dialog \|\| dialog.open) return;\n dialog.showModal();\n this.lockScroll();\n }\n\n private closeDialog() {\n const dialog = this.dialog;\n this.unlockScroll();\n if (dialog?.open) dialog.close();\n }\n\n /* Fires on Escape. Blocking it is how a non-dismissable modal stays put. /\n private onCancel = (event: Event) => {\n if (!this.dismissable) {\n event.preventDefault();\n return;\n }\n // Let it close; `close` does the state mirroring.\n };\n\n /\n Mirrors a close the browser made — Escape, or the dialog being closed by\n * anything other than this element — back into `open`, which then announces\n * it through the watch above.\n /\n private onClose = () => {\n this.unlockScroll();\n if (this.open) this.open = false;\n };\n\n /\n A click on the dialog element itself is a click on the overlay: the panel\n * is an inner box, so anything landing on the dialog missed the content.\n */\n private onDialogClick = (event: MouseEvent) => {\n if (!this.dismissable \|\| event.target !== this.dialog) return;\n this.open = false;\n };\n\n private accessibleName() {\n if (this.label) return this.label;\n const text = this.el.textContent?.trim();\n return text ? text.slice(0, 120) : undefined;\n }\n\n render() {\n return (\n <Host>\n <dialog\n part=\"dialog\"\n class=\"dialog\"\n aria-label={this.accessibleName()}\n onCancel={this.onCancel}\n onClose={this.onClose}\n onClick={this.onDialogClick}\n >\n <div class=\"panel\" part=\"panel\">\n {this.showCloseButton && (\n <button\n class=\"close\"\n part=\"close\"\n type=\"button\"\n aria-label=\"Close\"\n onClick={() => this.hide()}\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n )}\n <slot />\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pf-modal.js","sourceRoot":"","sources":["../../../src/components/pf-modal/pf-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getFocusableElements, lockPageScroll } from '@pitchfork-ui/core';\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nexport type PfModalSize = 'sm' \| 'md' \| 'lg';\n\n/*\n A modal dialog.\n \n A native `<dialog>` opened with `showModal()`, which from inside a shadow\n * root gives the focus trap, Escape and the backdrop for nothing — all\n * measured: focus cannot be taken by a light-DOM button, and a real Escape\n * fires `cancel` then `close`. So `trapFocus` from core is not needed here,\n * unlike in the React component.\n \n The one part of `showModal()` that cannot be relied on is where it puts\n * focus, and the gap is exactly the case every framework consumer is in. See\n * `showDialog` below.\n \n What `showModal()` does not do is lock page scroll — measured: a real\n * wheel still scrolled the page behind an open modal — so this element locks\n * it, exactly as the React component does.\n \n @slot - the modal's sections, usually `pf-modal-header`, `pf-modal-body` and\n * `pf-modal-footer`.\n * @part dialog - the native dialog, which is also the overlay.\n * @part panel - the bordered box the content sits in.\n * @part close - the close button.\n /\n@Component({\n tag: 'pf-modal',\n styleUrl: 'pf-modal.css',\n shadow: true,\n})\nexport class PfModal {\n @Element() el!: HTMLElement;\n\n /* Whether the modal is showing. Reflected so the stylesheet can select on it. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Panel width. Reflected so the stylesheet can select on it. /\n @Prop({ reflect: true }) size: PfModalSize = 'md';\n\n /\n Accessible name. Falls back to the text of whatever is slotted, which is\n * usually the header — `aria-labelledby` cannot be used, because an IDREF\n * does not cross a shadow boundary and the header is in the light DOM.\n /\n @Prop() label?: string;\n\n /* Close on Escape or a click on the overlay. Defaults to true. /\n @Prop() dismissable = true;\n\n /* Render the corner close button. Defaults to true. /\n @Prop() showCloseButton = true;\n\n /* Fires whenever the modal opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /\n Releases the page-scroll lock, or null when this modal does not hold it.\n * The lock is core's and reference-counted, so a slideout opening over a\n * modal cannot leave the page unscrollable.\n /\n private releaseScroll: (() => void) \| null = null;\n\n componentDidLoad() {\n if (this.open) this.showDialog();\n }\n\n disconnectedCallback() {\n // A modal removed while open would otherwise leave the page unscrollable.\n this.unlockScroll();\n }\n\n /* Opens the modal. /\n @Method()\n async show(): Promise<void> {\n this.open = true;\n }\n\n /* Closes the modal. /\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n /\n The one place a state change is announced, whatever caused it: `show()`,\n * the close button, Escape, an overlay click, or a consumer writing the prop.\n \n The first version emitted from the `close` handler alone, which fired for\n * every close and for no open — caught by its own test. A consumer mirroring\n * this value back sets `open` to what it already is, which Stencil does not\n * treat as a change, so there is no loop.\n /\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showDialog();\n else this.closeDialog();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n private get dialog() {\n return this.el.shadowRoot?.querySelector('dialog') ?? null;\n }\n\n private lockScroll() {\n if (this.releaseScroll) return;\n this.releaseScroll = lockPageScroll();\n }\n\n private unlockScroll() {\n this.releaseScroll?.();\n this.releaseScroll = null;\n }\n\n /\n Opens the dialog, and makes sure focus actually went into it.\n \n `showModal()` focuses the dialog or its first focusable descendant — but\n * not when light-DOM children were appended in the same task as the\n * open. Measured in Chromium with no framework involved: append the three\n * `pf-modal-` sections to a long-mounted `pf-modal` and set `open` in the\n same task, and the dialog opens with `document.activeElement` still on\n * `<body>` and `:focus-within` false. Leave one frame between the two and\n * focus lands inside; mount the element with its children and `open`\n * already set and focus lands inside. So it is the append racing the open,\n * and the flattened tree `showModal()`'s focusing steps read.\n \n That race is not an edge case: React, Angular and Vue all commit a\n * modal's content and its `open` in one go, so every framework consumer got\n * an open modal with focus outside it and nothing to say so — the page is\n * still inert, so the only symptom is that a reader is not taken to the\n * dialog and the first Tab is needed. Porting `apps/demo` is what found it.\n \n What the trace shows, with element identity and a `MutationObserver` on\n * the shadow root: `showModal()` does focus, onto `div[part=panel]`,\n * and one frame later a `focusout` with `relatedTarget: null` drops it,\n * with nothing removed from the shadow root. That is Chromium's focus\n * fixup running once the appended children are assigned to the slot and\n * finding the panel is no longer a valid target -- so it is not a render\n * that loses focus, and re-asserting after a render does not catch it\n * (measured: `componentDidRender` alone changes nothing here).\n \n So the dialog watches for exactly that: a `focusout` that goes nowhere\n * while the modal is open puts focus back. `requestAnimationFrame` after\n * `showModal()` covers the case where focus never arrived at all, and\n * `componentDidRender` covers a render that discards the focused node. All\n * three are the same guarded call, and the `:focus-within` guard makes it a\n * no-op whenever focus is already inside -- so none of them moves focus\n * that the platform or a consumer placed.\n /\n private showDialog() {\n const dialog = this.dialog;\n if (!dialog \|\| dialog.open) return;\n dialog.showModal();\n this.lockScroll();\n requestAnimationFrame(() => this.ensureFocusInside());\n }\n\n componentDidRender() {\n this.ensureFocusInside();\n }\n\n /\n Focus left the dialog for nothing while it is open, which the platform\n * does when its focus fixup runs after the slotted content changes.\n \n `relatedTarget` is the test: a Tab or a click inside names where focus\n * went, and a modal dialog means it cannot have gone outside. The window\n * losing focus also reports null, hence the `document.hasFocus()` guard --\n * without it, switching tabs would pull focus back on return.\n /\n private onFocusOut = (event: FocusEvent) => {\n if (!this.open \|\| event.relatedTarget) return;\n requestAnimationFrame(() => {\n if (document.hasFocus()) this.ensureFocusInside();\n });\n };\n\n /* Focus inside the open dialog, unless it is already there. /\n private ensureFocusInside() {\n const dialog = this.dialog;\n if (!this.open \|\| !dialog?.isConnected \|\| !dialog.open) return;\n if (dialog.matches(':focus-within')) return;\n const [first] = getFocusableElements(dialog);\n (first ?? dialog).focus();\n }\n\n private closeDialog() {\n const dialog = this.dialog;\n this.unlockScroll();\n if (dialog?.open) dialog.close();\n }\n\n /* Fires on Escape. Blocking it is how a non-dismissable modal stays put. /\n private onCancel = (event: Event) => {\n if (!this.dismissable) {\n event.preventDefault();\n return;\n }\n // Let it close; `close` does the state mirroring.\n };\n\n /\n Mirrors a close the browser made — Escape, or the dialog being closed by\n * anything other than this element — back into `open`, which then announces\n * it through the watch above.\n /\n private onClose = () => {\n this.unlockScroll();\n if (this.open) this.open = false;\n };\n\n /\n A click on the dialog element itself is a click on the overlay: the panel\n * is an inner box, so anything landing on the dialog missed the content.\n */\n private onDialogClick = (event: MouseEvent) => {\n if (!this.dismissable \|\| event.target !== this.dialog) return;\n this.open = false;\n };\n\n private accessibleName() {\n if (this.label) return this.label;\n const text = this.el.textContent?.trim();\n return text ? text.slice(0, 120) : undefined;\n }\n\n render() {\n return (\n <Host>\n <dialog\n part=\"dialog\"\n class=\"dialog\"\n aria-label={this.accessibleName()}\n onCancel={this.onCancel}\n onFocusout={this.onFocusOut}\n onClose={this.onClose}\n onClick={this.onDialogClick}\n >\n <div class=\"panel\" part=\"panel\">\n {this.showCloseButton && (\n <button\n class=\"close\"\n part=\"close\"\n type=\"button\"\n aria-label=\"Close\"\n onClick={() => this.hide()}\n >\n <svg\n viewBox=\"0 0 16 16\"\n width=\"16\"\n height=\"16\"\n aria-hidden=\"true\"\n focusable=\"false\"\n >\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.6\"\n stroke-linecap=\"round\"\n fill=\"none\"\n />\n </svg>\n </button>\n )}\n <slot />\n </div>\n </dialog>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pf-multi-select/pf-multi-select.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { composeDescribedBy, formatValueList, getEnabledIndexes, isActivationKey, Keys, observeAnchoredPosition, parseValueList, resolveListMove, toggleValueInList, assertSeparableValues, } from "@pitchfork-ui/core";
 import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
 import { placePopover } from "../../place-popover";
 import { h, Host, } from "@stencil/core";
 const MOVES = {
@@ -286,12 +287,12 @@ export class PfMultiSelect {
     }
     render() {
         const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
-        return (h(Host, { key: '68ee3f2e23741c14f955523bf3cbcb10e4fc3e71' }, h("div", { key: 'ffbfe398e848a5134740908327bca92afe74f39c', class: "field", part: "field" }, this.label && (h("label", { key: '7fe73bdad7836709b5e30536412283edf72abd37', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '1cecfe1256d01e6770417b030a8aba22ca65f802', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: '03c611dff79a67cda5478d586eaa301fd4178843', 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: () => {
+        return (h(Host, { key: '84f645358443d6dc41515a835cf0c7136a6f2a30' }, h("div", { key: '2abaf9886654a5cef6756a4c566f61e37c7c876a', class: "field", part: "field" }, this.label && (h("label", { key: '76f9cf451c6fba652494862a0fa05e320a4790c4', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '9f4a8074bc2ef06ae7256267bab07d9baf52dc2c', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: 'a5a15ff1c857e6f727bc43131741ee95ba345efd', id: "trigger", "aria-label": 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;
-            } }, this.chips.length > 0 ? (h("span", { class: "chips" }, this.chips.map((chip) => (h("span", { key: chip, class: "chip", part: "chip" }, chip))))) : (h("span", { class: "placeholder" }, this.placeholder)), h("span", { key: 'a31710bfb23f890b33a010962b93792424b71e36', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: '517857c8ab460c5a60a50d42c3ff68d986e0c744', name: "chevron-down" }))), this.description && (h("p", { key: '549f06c9be1d291d4654ac63c6f03f749453113d', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '0da14622c434e02f6098a61382b22ee2b74a3f84', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: 'f62c24c5870b4a05bcba73969af4721ed52bf4e3', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label ?? this.placeholder, style: this.maxVisibleOptions
+            } }, this.chips.length > 0 ? (h("span", { class: "chips" }, this.chips.map((chip) => (h("span", { key: chip, class: "chip", part: "chip" }, chip))))) : (h("span", { class: "placeholder" }, this.placeholder)), h("span", { key: '9b662f3899c243059b07b4ecc0166b74b97501cc', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: '5a869e8d9d1aa023e57ed556afc613544f54424f', name: "chevron-down" }))), this.description && (h("p", { key: 'd231f94ad697dc52d3115cf13c0b47f0b20045a6', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: 'dcc0995d743ea214575031de7225f0bce71aebb6', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: 'c161c902c9859dd71dda4967dc4e074db29dd448', id: "listbox", part: "listbox", class: "listbox", popover: "auto", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label ?? this.placeholder, style: this.maxVisibleOptions
                 ? { maxHeight: `calc(${this.maxVisibleOptions} * 36px)`, overflowY: 'auto' }
-                : undefined, onToggle: this.onToggle }, h("slot", { key: '6d8c84b2173904d99f7b3583cbb2203636cd6214', onSlotchange: this.onSlotChange }))));
+                : undefined, onToggle: this.onToggle }, h("slot", { key: '8fec52209e91211ba15d8c32f53d111b2058b76f', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "pf-multi-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pf-multi-select/pf-multi-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-multi-select.js","sourceRoot":"","sources":["../../../src/components/pf-multi-select/pf-multi-select.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,uBAAuB,EACvB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,qBAAqB,GAEtB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,MAAM,KAAK,GAAyC;IAClD,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM;IACxB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,UAAU;IAC1B,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO;IACpB,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,MAAM;CACnB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAOH,MAAM,OAAO,aAAa;IACb,EAAE,CAAe;IACT,SAAS,CAAoB;IAEhD,mEAAmE;IAC1C,IAAI,CAAU;IAEvC,yEAAyE;IACjC,KAAK,GAAG,EAAE,CAAC;IAEnD,oEAAoE;IAC5B,IAAI,GAAG,KAAK,CAAC;IAE7C,KAAK,CAAU;IAEf,WAAW,CAAU;IAErB,KAAK,CAAU;IAEf,WAAW,GAAG,gBAAgB,CAAC;IAEd,QAAQ,GAAG,KAAK,CAAC;IAEjB,QAAQ,GAAG,KAAK,CAAC;IAE1C,kDAAkD;IAC1C,iBAAiB,CAAU;IAEnC,oEAAoE;IAC3D,QAAQ,CAAqD;IAEtE,qEAAqE;IAC5D,YAAY,CAAmC;IAExD,iEAAiE;IACxD,KAAK,GAAa,EAAE,CAAC;IAEtB,YAAY,GAAG,EAAE,CAAC;IAClB,aAAa,CAAc;IAC3B,YAAY,GAAuB,IAAI,CAAC;IACxC,oBAAoB,GAAG,KAAK,CAAC;IAErC,iBAAiB;QACf,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;IACzB,CAAC;IAED;;;;;;OAMG;IAKH,aAAa;QACX,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAE7B,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;aAAM,CAAC;YACN,oEAAoE;YACpE,0BAA0B;YAC1B,MAAM,IAAI,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC5B,KAAK,MAAM,KAAK,IAAI,MAAM;gBAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1D,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACpC,CAAC;QAED,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACrF,CAAC;IAED,4EAA4E;IAE5E,WAAW;QACT,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,MAAM,MAAM,GAAa,EAAE,CAAC;QAE5B,KAAK,MAAM,MAAM,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;YAC1D,MAA8C,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACtE,CAAC;QAED,+DAA+D;QAC/D,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,CAAC;YACzF,IAAI,MAAM;gBAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,KAAK,CAAC,CAAC;QAC/D,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC;QACpB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACK,mBAAmB;QACzB,IAAI,IAAI,CAAC,oBAAoB;YAAE,OAAO;QACtC,MAAM,SAAS,GAAG,qBAAqB,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACxF,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAEnC,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC;QACjC,OAAO,CAAC,IAAI,CACV,iFAAiF;YAC/E,yBAAyB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CACjD,CAAC;IACJ,CAAC;IAGD,QAAQ,CAAC,IAAa,EAAE,QAAiB;QACvC,IAAI,IAAI;YAAE,IAAI,CAAC,WAAW,EAAE,CAAC;;YACxB,IAAI,CAAC,WAAW,EAAE,CAAC;QACxB,IAAI,IAAI,KAAK,QAAQ;YAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAGD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACvC,CAAC;IAGD,KAAK,CAAC,IAAI;QACR,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IACpB,CAAC;IAGD,KAAK,CAAC,aAAa;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAGD,KAAK,CAAC,cAAc;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IACzC,CAAC;IAGD,KAAK,CAAC,oBAAoB;QACxB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;IACjC,CAAC;IAED,yDAAyD;IAEzD,KAAK,CAAC,OAAO;QACX,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEO,YAAY,GAAG,GAAG,EAAE;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC,CAAC;IAEM,MAAM;QACZ,OAAO,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;IAEO,OAAO;QACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAc,WAAW,CAAC,CAAC,CAAC;IACxE,CAAC;IAEO,OAAO;QACb,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,iFAAiF;IACzE,WAAW,CAAC,MAAmB;QACrC,OAAQ,MAA2C,CAAC,KAAK,IAAI,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IAClG,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAc,kBAAkB,CAAC,IAAI,IAAI,CAAC;IACpF,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAoB,kBAAkB,CAAC,IAAI,IAAI,CAAC;IAC1F,CAAC;IAEO,WAAW;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC;YAAE,OAAO;QAEtE,KAAK,CAAC,WAAW,EAAE,CAAC;QACpB,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,uBAAuB,CAAC;YAC3C,SAAS,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO;YAC7B,WAAW,EAAE,GAAG,EAAE,CAAC,KAAK;YACxB,gBAAgB,EAAE,IAAI;YACtB,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;gBAC3C,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC;gBAC/B,IAAI,KAAK,KAAK,SAAS;oBAAE,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;gBAC1D,IAAI,QAAQ,KAAK,SAAS;oBAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,QAAQ,IAAI,CAAC;YACrE,CAAC;SACF,CAAC,CAAC;QAEH,iEAAiE;QACjE,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7B,MAAM,KAAK,GACT,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CACjB,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAC1F,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC;IAChC,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;QACvB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;QAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC;QAC3B,IAAI,KAAK,EAAE,OAAO,CAAC,eAAe,CAAC;YAAE,KAAK,CAAC,WAAW,EAAE,CAAC;IAC3D,CAAC;IAEO,QAAQ,GAAG,CAAC,KAAkB,EAAE,EAAE;QACxC,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,KAAK,MAAM,CAAC;QAC1C,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC;QAC/C,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;IACtC,CAAC,CAAC;IAEM,SAAS,CAAC,MAA0B;QAC1C,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC;YACnC,IAAI,KAAK,KAAK,MAAM;gBAAG,KAA2C,CAAC,MAAM,GAAG,KAAK,CAAC;QACpF,CAAC;QACD,IAAI,MAAM;YAAG,MAA4C,CAAC,MAAM,GAAG,IAAI,CAAC;QAExE,IAAI,CAAC,YAAY,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,cAAc,KAAK,UAAU,EAAE,CAAC;YAC1D,MAAM,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IAED,wEAAwE;IAChE,oBAAoB;QAC1B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC,6BAA6B,IAAI,OAAO,CAAC;YAAE,OAAO;QAElE,OACD,CAAC,2BAA2B,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACK,MAAM,CAAC,MAAmB;QAChC,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE7D,MAAM,IAAI,GAAG,iBAAiB,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,KAAK,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;QACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC;IAGD,kBAAkB,CAAC,KAAqC;QACtD,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC,IAAI,CAChC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAClE,CAAC;QACF,IAAI,MAAM;YAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IAEO,IAAI,CAAC,MAA4B;QACvC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,EAAE,CAAC;QAC/B,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,CAAC;QAC/F,MAAM,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5E,MAAM,IAAI,GAAG,eAAe,CAAC,MAAM,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;QAC9D,IAAI,IAAI,KAAK,CAAC,CAAC;YAAE,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;IACzD,CAAC;IAGD,aAAa,CAAC,KAAoB;QAChC,IAAI,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,gBAAgB;YAAE,OAAO;QAEpD,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC9B,IAAI,IAAI,EAAE,CAAC;YACT,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;;gBAC5B,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACrB,OAAO;QACT,CAAC;QAED,IAAI,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC;YAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;iBAC5B,IAAI,IAAI,CAAC,YAAY;gBAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,kBAAkB,CACpC,IAAI,CAAC,WAAW,IAAI,aAAa,EACjC,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC5B,IAAI,CAAC,KAAK,IAAI,CACb,8DAAO,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS;oBAChD,IAAI,CAAC,KAAK;oBACV,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,UAAU,iBAAa,MAAM,QAElC,CACR,CACK,CACT;gBAED,+DACE,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,SAAS,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,kBAAkB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EACjE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,mBACT,SAAS,mBACR,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAE7B,SAAS,kBACT,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,mBACzB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,sBAC1B,WAAW,EAC7B,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAI,CAAC,IAAI,CAAC,QAAQ;4BAAE,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC7C,CAAC;oBAEA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACvB,YAAM,KAAK,EAAC,OAAO,IAChB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACxB,YAAM,GAAG,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,IACtC,IAAI,CACA,CACR,CAAC,CACG,CACR,CAAC,CAAC,CAAC,CACF,YAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CACpD;oBACD,6DAAM,KAAK,EAAC,SAAS,iBAAa,MAAM;wBACtC,gEAAS,IAAI,EAAC,cAAc,GAAW,CAClC,CACA;gBAER,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,aAAa,EAAC,EAAE,EAAC,aAAa,IACvD,IAAI,CAAC,WAAW,CACf,CACL;gBACA,IAAI,CAAC,KAAK,IAAI,CACb,0DAAG,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,EAAE,EAAC,OAAO,IACrC,IAAI,CAAC,KAAK,CACT,CACL,CACG;YAEN,4DACE,EAAE,EAAC,SAAS,EACZ,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,0BAEO,MAAM,gBACf,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,EAC1C,KAAK,EACH,IAAI,CAAC,iBAAiB;oBACpB,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,IAAI,CAAC,iBAAiB,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE;oBAC5E,CAAC,CAAC,SAAS,EAEf,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,6DAAM,YAAY,EAAE,IAAI,CAAC,YAAY,GAAI,CACrC,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n composeDescribedBy,\n formatValueList,\n getEnabledIndexes,\n isActivationKey,\n Keys,\n observeAnchoredPosition,\n parseValueList,\n resolveListMove,\n toggleValueInList,\n assertSeparableValues,\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 multi-choice select over `pf-option` children.\n \n It submits one entry per chosen value from a single control.\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n \n `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n \n Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-` set.\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 chip - each chosen value's chip in the trigger.\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-multi-select',\n styleUrl: 'pf-multi-select.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfMultiSelect {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name, once per chosen value. Reflected. /\n @Prop({ reflect: true }) name?: string;\n\n /* The chosen values, comma-separated. Reflected, so HTML can set it. /\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 options';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Options to show before the listbox scrolls. /\n @Prop() maxVisibleOptions?: number;\n\n /* Fires when the chosen set changes, with both representations. /\n @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n /* Fires whenever the listbox opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /* The labels of the chosen options, for the trigger's chips. /\n @State() chips: string[] = [];\n\n private initialValue = '';\n private stopObserving?: () => void;\n private activeOption: HTMLElement \| null = null;\n private warnedAboutSeparator = false;\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 }\n\n /\n * `name` is watched here and not on the controls that pass a plain string to\n * `setFormValue`: those take their submission name from the reflected\n * attribute, so the platform picks a change up by itself. This one builds\n * the name into a FormData, so without the watch a name assigned after\n * load would never reach the submission.\n /\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const values = this.values();\n\n if (values.length === 0 \|\| !this.name) {\n this.internals.setFormValue(null);\n } else {\n // One entry per value under the one name, which `data.getAll(name)`\n // reads back as an array.\n const data = new FormData();\n for (const value of values) data.append(this.name, value);\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n }\n\n /* The value changed, so the children's `selected` and the chips follow. /\n @Watch('value')\n syncOptions() {\n const chosen = this.values();\n const labels: string[] = [];\n\n for (const option of this.options()) {\n const selected = chosen.includes(this.optionValue(option));\n (option as HTMLElement & { selected: boolean }).selected = selected;\n }\n\n // Chips in the order they were chosen, not the options' order.\n for (const value of chosen) {\n const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n if (option) labels.push(option.textContent?.trim() ?? value);\n }\n\n this.chips = labels;\n this.warnAboutSeparators();\n }\n\n /\n One warning naming every offending value.\n \n A value holding a comma cannot round-trip through `value`, and failing\n * silently would show the right chips over a wrong submission.\n /\n private warnAboutSeparators() {\n if (this.warnedAboutSeparator) return;\n const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n if (offenders.length === 0) return;\n\n this.warnedAboutSeparator = true;\n console.warn(\n `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n `comma-separated list: ${offenders.join(' ')}`,\n );\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 formResetCallback() {\n this.value = this.initialValue;\n }\n\n /* Re-reads the options, for a label edited in place. /\n @Method()\n async refresh(): Promise<void> {\n this.syncOptions();\n }\n\n private onSlotChange = () => {\n this.syncOptions();\n };\n\n private values(): string[] {\n return parseValueList(this.value);\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 matchAnchorWidth: true,\n flip: true,\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 // Opens on the first chosen option, or the first selectable one.\n const chosen = this.values();\n const first =\n this.options().find(\n (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n ) ?? this.enabled()[0];\n this.setActive(first ?? null);\n }\n\n private hideListbox() {\n this.stopObserving?.();\n this.stopObserving = undefined;\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 /* An element, not an IDREF: a cross-root IDREF resolves to nothing. /\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 /\n Toggles one value and keeps the listbox open — the difference from\n * `pf-select`, and the whole point of a multi-choice control: closing after\n * each pick would make choosing three things three round trips.\n /\n private toggle(option: HTMLElement) {\n if (option.hasAttribute('disabled') \|\| this.disabled) return;\n\n const next = toggleValueInList(this.values(), this.optionValue(option));\n this.value = formatValueList(next);\n this.pfChange.emit({ value: this.value, values: next });\n }\n\n @Listen('pfOptionSelect')\n handleOptionSelect(event: CustomEvent<{ value: string }>) {\n event.stopPropagation();\n const option = this.options().find(\n (candidate) => this.optionValue(candidate) === event.detail.value,\n );\n if (option) this.toggle(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 @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 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) this.open = true;\n else if (this.activeOption) this.toggle(this.activeOption);\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 {this.chips.length > 0 ? (\n <span class=\"chips\">\n {this.chips.map((chip) => (\n <span key={chip} class=\"chip\" part=\"chip\">\n {chip}\n </span>\n ))}\n </span>\n ) : (\n <span class=\"placeholder\">{this.placeholder}</span>\n )}\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 / The one ARIA difference from pf-select, and the important one. /\n aria-multiselectable=\"true\"\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"]}
1	+ {"version":3,"file":"pf-multi-select.js","sourceRoot":"","sources":["../../../src/components/pf-multi-select/pf-multi-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n composeDescribedBy,\n formatValueList,\n getEnabledIndexes,\n isActivationKey,\n Keys,\n observeAnchoredPosition,\n parseValueList,\n resolveListMove,\n toggleValueInList,\n assertSeparableValues,\n type ListNavigationAction,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\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 multi-choice select over `pf-option` children.\n \n It submits one entry per chosen value from a single control.\n * `setFormValue` takes a `FormData`, and a key repeated in it is submitted\n * once per value — measured, and the same shape the React component gets from\n * rendering one hidden `<input>` per selection. So a server reads\n * `data.getAll(name)` exactly as it would from a native multiple select.\n \n `value` is one comma-separated string, because that is what an attribute can\n * carry; `pfChange` also reports the parsed `values` array, which is what a\n * framework consumer usually wants. A value containing a comma cannot survive\n * that, so one is reported on the console rather than silently mangled.\n \n Shares `pf-option` with `pf-select` and `pf-combobox` through the generic\n * `--pf-option-` set.\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 chip - each chosen value's chip in the trigger.\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-multi-select',\n styleUrl: 'pf-multi-select.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfMultiSelect {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name, once per chosen value. Reflected. /\n @Prop({ reflect: true }) name?: string;\n\n /* The chosen values, comma-separated. Reflected, so HTML can set it. /\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 options';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Options to show before the listbox scrolls. /\n @Prop() maxVisibleOptions?: number;\n\n /* Fires when the chosen set changes, with both representations. /\n @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n /* Fires whenever the listbox opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n /* The labels of the chosen options, for the trigger's chips. /\n @State() chips: string[] = [];\n\n private initialValue = '';\n private stopObserving?: () => void;\n private activeOption: HTMLElement \| null = null;\n private warnedAboutSeparator = false;\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 }\n\n /\n * `name` is watched here and not on the controls that pass a plain string to\n * `setFormValue`: those take their submission name from the reflected\n * attribute, so the platform picks a change up by itself. This one builds\n * the name into a FormData, so without the watch a name assigned after\n * load would never reach the submission.\n /\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const values = this.values();\n\n if (values.length === 0 \|\| !this.name) {\n this.internals.setFormValue(null);\n } else {\n // One entry per value under the one name, which `data.getAll(name)`\n // reads back as an array.\n const data = new FormData();\n for (const value of values) data.append(this.name, value);\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, values.length > 0, this.required, this.error);\n }\n\n /* The value changed, so the children's `selected` and the chips follow. /\n @Watch('value')\n syncOptions() {\n const chosen = this.values();\n const labels: string[] = [];\n\n for (const option of this.options()) {\n const selected = chosen.includes(this.optionValue(option));\n (option as HTMLElement & { selected: boolean }).selected = selected;\n }\n\n // Chips in the order they were chosen, not the options' order.\n for (const value of chosen) {\n const option = this.options().find((candidate) => this.optionValue(candidate) === value);\n if (option) labels.push(option.textContent?.trim() ?? value);\n }\n\n this.chips = labels;\n this.warnAboutSeparators();\n }\n\n /\n One warning naming every offending value.\n \n A value holding a comma cannot round-trip through `value`, and failing\n * silently would show the right chips over a wrong submission.\n /\n private warnAboutSeparators() {\n if (this.warnedAboutSeparator) return;\n const offenders = assertSeparableValues(this.options().map((o) => this.optionValue(o)));\n if (offenders.length === 0) return;\n\n this.warnedAboutSeparator = true;\n console.warn(\n `[pf-multi-select] option values cannot contain a comma, because \\`value\\` is a ` +\n `comma-separated list: ${offenders.join(' ')}`,\n );\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 formResetCallback() {\n this.value = this.initialValue;\n }\n\n /* Re-reads the options, for a label edited in place. /\n @Method()\n async refresh(): Promise<void> {\n this.syncOptions();\n }\n\n private onSlotChange = () => {\n this.syncOptions();\n };\n\n private values(): string[] {\n return parseValueList(this.value);\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 matchAnchorWidth: true,\n flip: true,\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 // Opens on the first chosen option, or the first selectable one.\n const chosen = this.values();\n const first =\n this.options().find(\n (option) => chosen.includes(this.optionValue(option)) && !option.hasAttribute('disabled'),\n ) ?? this.enabled()[0];\n this.setActive(first ?? null);\n }\n\n private hideListbox() {\n this.stopObserving?.();\n this.stopObserving = undefined;\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 /* An element, not an IDREF: a cross-root IDREF resolves to nothing. /\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 /\n Toggles one value and keeps the listbox open — the difference from\n * `pf-select`, and the whole point of a multi-choice control: closing after\n * each pick would make choosing three things three round trips.\n /\n private toggle(option: HTMLElement) {\n if (option.hasAttribute('disabled') \|\| this.disabled) return;\n\n const next = toggleValueInList(this.values(), this.optionValue(option));\n this.value = formatValueList(next);\n this.pfChange.emit({ value: this.value, values: next });\n }\n\n @Listen('pfOptionSelect')\n handleOptionSelect(event: CustomEvent<{ value: string }>) {\n event.stopPropagation();\n const option = this.options().find(\n (candidate) => this.optionValue(candidate) === event.detail.value,\n );\n if (option) this.toggle(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 @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 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) this.open = true;\n else if (this.activeOption) this.toggle(this.activeOption);\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 aria-label={controlAriaLabel(this.el, this.label)}\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 {this.chips.length > 0 ? (\n <span class=\"chips\">\n {this.chips.map((chip) => (\n <span key={chip} class=\"chip\" part=\"chip\">\n {chip}\n </span>\n ))}\n </span>\n ) : (\n <span class=\"placeholder\">{this.placeholder}</span>\n )}\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 / The one ARIA difference from pf-select, and the important one. /\n aria-multiselectable=\"true\"\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"]}

package/dist/collection/components/pf-nav-item/pf-nav-item.js CHANGED Viewed

@@ -14,7 +14,9 @@ import { h, Host } from "@stencil/core";
  *
  * `currentPage` and `orientation` are the group's to set. A consumer asks by
  * setting `current`; the group resolves every item with core's rule and
- * writes the answer to `currentPage`.
+ * writes the answer to `currentPage`. Changing the ask tells the group, so
+ * the answer follows a framework's re-render without the consumer calling
+ * anything.
  *
  * @slot - the item's label.
  * @slot icon - a leading icon.
@@ -37,6 +39,25 @@ export class PfNavItem {
      * behind on an item the consumer had not marked.
      */
     current = false;
+    /**
+     * Tells the group the ask changed, so it can resolve again.
+     *
+     * The same event `pf-nav-section` emits when its items move, because the
+     * groups do the same thing with both: re-read every item and resolve the
+     * one current page. Without this a navigation resolves at load and never
+     * again for a consumer who marks items through the *property*, which is
+     * every framework consumer — the generated bindings set props as
+     * properties, so there is no attribute change and no `slotchange` either.
+     * The symptom is a navigation whose highlight never moves while the router
+     * works perfectly, which is what porting `apps/demo` ran into.
+     *
+     * `current` only. Watching `currentPage` would loop, since that is what the
+     * group writes back.
+     */
+    pfNavStructure;
+    handleCurrentChange() {
+        this.pfNavStructure.emit();
+    }
     /**
      * Set by the group: the resolved current page, which is the one thing that
      * renders `aria-current="page"`. At most one item in a navigation carries
@@ -57,11 +78,11 @@ export class PfNavItem {
     orientation = 'horizontal';
     render() {
         const content = [
-            h("slot", { key: '35769e4f7edb3524591111fd8c78eca5a6ae5e76', name: "icon" }),
-            h("span", { key: '201e0efd80af4ec26fde67d5c90fbf47d2f8f16f', class: "label", part: "label" }, h("slot", { key: 'bf2ada457257d25f3a054beb41133e872585a26b' })),
-            h("slot", { key: 'c807ea3208d83e9f205392aa655a35e211c75e3e', name: "badge" }),
+            h("slot", { key: 'b478a66b7ae6c6d00b18f762600435dbac37996d', name: "icon" }),
+            h("span", { key: '4b1ddbe87804c604d492b00bbc743299c54f7240', class: "label", part: "label" }, h("slot", { key: '86778db42fef8af44096211cd8a743155dca3fb0' })),
+            h("slot", { key: '02fef2701ef217701ce18e71e9ff873dc3bd3a44', name: "badge" }),
         ];
-        return (h(Host, { key: 'ad28038cf786d9c8431e1da725305cceacac5a15', role: "listitem" }, this.href && !this.disabled ? (h("a", { class: "link", part: "link", href: this.href, target: this.target, rel: this.rel, "aria-current": this.currentPage ? 'page' : null }, content)) : (h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null, "aria-disabled": this.disabled ? 'true' : null }, content))));
+        return (h(Host, { key: 'c4ee7f6245eedd2bf0546ebcb987120212ea18e3', role: "listitem" }, this.href && !this.disabled ? (h("a", { class: "link", part: "link", href: this.href, target: this.target, rel: this.rel, "aria-current": this.currentPage ? 'page' : null }, content)) : (h("span", { class: "link", part: "link", "aria-current": this.currentPage ? 'page' : null, "aria-disabled": this.disabled ? 'true' : null }, content))));
     }
     static get is() { return "pf-nav-item"; }
     static get encapsulation() { return "shadow"; }
@@ -216,5 +237,29 @@ export class PfNavItem {
             }
         };
     }
+    static get events() {
+        return [{
+                "method": "pfNavStructure",
+                "name": "pfNavStructure",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Tells the group the ask changed, so it can resolve again.\n\nThe same event `pf-nav-section` emits when its items move, because the\ngroups do the same thing with both: re-read every item and resolve the\none current page. Without this a navigation resolves at load and never\nagain for a consumer who marks items through the *property*, which is\nevery framework consumer \u2014 the generated bindings set props as\nproperties, so there is no attribute change and no `slotchange` either.\nThe symptom is a navigation whose highlight never moves while the router\nworks perfectly, which is what porting `apps/demo` ran into.\n\n`current` only. Watching `currentPage` would loop, since that is what the\ngroup writes back."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "current",
+                "methodName": "handleCurrentChange"
+            }];
+    }
 }
 //# sourceMappingURL=pf-nav-item.js.map

package/dist/collection/components/pf-nav-item/pf-nav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-nav-item.js","sourceRoot":"","sources":["../../../src/components/pf-nav-item/pf-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;~~AAEzD;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AAMH,MAAM,OAAO,SAAS;IACpB,wEAAwE;IAC/C,IAAI,CAAU;IAEvC,wEAAwE;IAChE,MAAM,CAAU;IAExB,2DAA2D;IACnD,GAAG,CAAU;IAErB;;;;;;;OAOG;IACsB,OAAO,GAAG,KAAK,CAAC;IAEzC;;;;;OAKG;IACqC,WAAW,GAAG,KAAK,CAAC;IAE5D;;;;;;;OAOG;IACsB,QAAQ,GAAG,KAAK,CAAC;IAE1C,sEAAsE;IAC9B,WAAW,GAA8B,YAAY,CAAC;IAE9F,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,6DAAM,IAAI,EAAC,MAAM,GAAG;YACpB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC9B,8DAAQ,CACH;YACP,6DAAM,IAAI,EAAC,OAAO,GAAG;SACtB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC7B,SACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,kBACC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE7C,OAAO,CACN,CACL,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE3C,OAAO,CACH,CACR,CACI,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n/*\n One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n \n Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n \n With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n \n `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage~~`.\~~n \n @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n /\n@Component({\n tag: 'pf-nav-item',\n styleUrl: 'pf-nav-item.css',\n shadow: true,\n})\nexport class PfNavItem {\n /* Where the item goes. Reflected; a consumer's stylesheet reads it. /\n @Prop({ reflect: true }) href?: string;\n\n /* Opens elsewhere, as on a plain anchor. Ignored without an `href`. /\n @Prop() target?: string;\n\n /* Goes on the anchor as-is. Ignored without an `href`. /\n @Prop() rel?: string;\n\n /\n Set it to mark this item as the current page.\n \n The asking half, which the group never writes — `currentPage` below is\n * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n * them apart: a group that wrote its answer back would leave the mark\n * behind on an item the consumer had not marked.\n /\n @Prop({ reflect: true }) current = false;\n\n /\n Set by the group: the resolved current page, which is the one thing that\n * renders `aria-current=\"page\"`. At most one item in a navigation carries\n * it, and the highlight follows it rather than `current` — a second\n * highlighted item with no `aria-current` would be a sighted-only lie.\n /\n @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n /\n Takes the item out of the navigation without removing it.\n \n A disabled item renders no anchor at all, because an anchor has no\n * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n * and dropping the `href` is the only thing that really takes it out of the\n * tab order.\n /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set by the group, which is the only one that knows which it is. */\n @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n render() {\n const content = [\n <slot name=\"icon\" />,\n <span class=\"label\" part=\"label\">\n <slot />\n </span>,\n <slot name=\"badge\" />,\n ];\n\n return (\n <Host role=\"listitem\">\n {this.href && !this.disabled ? (\n <a\n class=\"link\"\n part=\"link\"\n href={this.href}\n target={this.target}\n rel={this.rel}\n aria-current={this.currentPage ? 'page' : null}\n >\n {content}\n </a>\n ) : (\n <span\n class=\"link\"\n part=\"link\"\n aria-current={this.currentPage ? 'page' : null}\n aria-disabled={this.disabled ? 'true' : null}\n >\n {content}\n </span>\n )}\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pf-nav-item.js","sourceRoot":"","sources":["../../../src/components/pf-nav-item/pf-nav-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,MAAM,OAAO,SAAS;IACpB,wEAAwE;IAC/C,IAAI,CAAU;IAEvC,wEAAwE;IAChE,MAAM,CAAU;IAExB,2DAA2D;IACnD,GAAG,CAAU;IAErB;;;;;;;OAOG;IACsB,OAAO,GAAG,KAAK,CAAC;IAEzC;;;;;;;;;;;;;;OAcG;IACM,cAAc,CAAsB;IAG7C,mBAAmB;QACjB,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;IAC7B,CAAC;IAED;;;;;OAKG;IACqC,WAAW,GAAG,KAAK,CAAC;IAE5D;;;;;;;OAOG;IACsB,QAAQ,GAAG,KAAK,CAAC;IAE1C,sEAAsE;IAC9B,WAAW,GAA8B,YAAY,CAAC;IAE9F,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,6DAAM,IAAI,EAAC,MAAM,GAAG;YACpB,6DAAM,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO;gBAC9B,8DAAQ,CACH;YACP,6DAAM,IAAI,EAAC,OAAO,GAAG;SACtB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,IAClB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC7B,SACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,kBACC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE7C,OAAO,CACN,CACL,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,kBACG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,mBAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE3C,OAAO,CACH,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop, Watch } from '@stencil/core';\n\n/*\n One item in a `pf-header-navigation` or a `pf-sidebar-navigation`.\n \n Shared by both, because the React library's `HeaderNavigationItem` and\n * `SidebarNavigationItem` are the same shape — one element rather than two\n * that would drift. What differs is the layout, and that is the group's to\n * say: it pushes `orientation` down, which is the only thing an item cannot\n * work out for itself.\n \n With an `href` it renders a link; without one it renders a plain box, which\n * is how a framework's own router is used — slot an `<a routerLink>` or a\n * `<Link>` in and leave `href` unset.\n \n `currentPage` and `orientation` are the group's to set. A consumer asks by\n * setting `current`; the group resolves every item with core's rule and\n * writes the answer to `currentPage`. Changing the ask tells the group, so\n * the answer follows a framework's re-render without the consumer calling\n * anything.\n \n @slot - the item's label.\n * @slot icon - a leading icon.\n * @slot badge - a trailing badge or count.\n * @part link - the link, or the box standing in for one.\n /\n@Component({\n tag: 'pf-nav-item',\n styleUrl: 'pf-nav-item.css',\n shadow: true,\n})\nexport class PfNavItem {\n /* Where the item goes. Reflected; a consumer's stylesheet reads it. /\n @Prop({ reflect: true }) href?: string;\n\n /* Opens elsewhere, as on a plain anchor. Ignored without an `href`. /\n @Prop() target?: string;\n\n /* Goes on the anchor as-is. Ignored without an `href`. /\n @Prop() rel?: string;\n\n /\n Set it to mark this item as the current page.\n \n The asking half, which the group never writes — `currentPage` below is\n * the answer. The two are kept apart for the reason `pf-breadcrumb` keeps\n * them apart: a group that wrote its answer back would leave the mark\n * behind on an item the consumer had not marked.\n /\n @Prop({ reflect: true }) current = false;\n\n /\n Tells the group the ask changed, so it can resolve again.\n \n The same event `pf-nav-section` emits when its items move, because the\n * groups do the same thing with both: re-read every item and resolve the\n * one current page. Without this a navigation resolves at load and never\n * again for a consumer who marks items through the property, which is\n * every framework consumer — the generated bindings set props as\n * properties, so there is no attribute change and no `slotchange` either.\n * The symptom is a navigation whose highlight never moves while the router\n * works perfectly, which is what porting `apps/demo` ran into.\n \n `current` only. Watching `currentPage` would loop, since that is what the\n * group writes back.\n /\n @Event() pfNavStructure!: EventEmitter<void>;\n\n @Watch('current')\n handleCurrentChange() {\n this.pfNavStructure.emit();\n }\n\n /\n Set by the group: the resolved current page, which is the one thing that\n * renders `aria-current=\"page\"`. At most one item in a navigation carries\n * it, and the highlight follows it rather than `current` — a second\n * highlighted item with no `aria-current` would be a sighted-only lie.\n /\n @Prop({ mutable: true, reflect: true }) currentPage = false;\n\n /\n Takes the item out of the navigation without removing it.\n \n A disabled item renders no anchor at all, because an anchor has no\n * disabled state: `aria-disabled` alone leaves it focusable and clickable,\n * and dropping the `href` is the only thing that really takes it out of the\n * tab order.\n /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set by the group, which is the only one that knows which it is. */\n @Prop({ mutable: true, reflect: true }) orientation: 'horizontal' \| 'vertical' = 'horizontal';\n\n render() {\n const content = [\n <slot name=\"icon\" />,\n <span class=\"label\" part=\"label\">\n <slot />\n </span>,\n <slot name=\"badge\" />,\n ];\n\n return (\n <Host role=\"listitem\">\n {this.href && !this.disabled ? (\n <a\n class=\"link\"\n part=\"link\"\n href={this.href}\n target={this.target}\n rel={this.rel}\n aria-current={this.currentPage ? 'page' : null}\n >\n {content}\n </a>\n ) : (\n <span\n class=\"link\"\n part=\"link\"\n aria-current={this.currentPage ? 'page' : null}\n aria-disabled={this.disabled ? 'true' : null}\n >\n {content}\n </span>\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pf-notification/pf-notification.js CHANGED Viewed

@@ -88,7 +88,7 @@ export class PfNotification {
                     "references": {
                         "PfNotificationVariant": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-notification/pf-notification.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-notification/pf-notification.tsx",
                             "id": "src/components/pf-notification/pf-notification.tsx::PfNotificationVariant"
                         }
                     }

package/dist/collection/components/pf-number-input/pf-number-input.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { clampNumber, composeDescribedBy, formatNumberValue, Keys, parseNumberValue, roundToStep, stepNumber, } from "@pitchfork-ui/core";
 import { h, Host, } from "@stencil/core";
 import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
 /**
  * A form-associated stepper field.
  *
@@ -170,7 +171,7 @@ export class PfNumberInput {
         const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
         const { min, max } = this.bounds;
         const shown = this.draft ?? formatNumberValue(this.current);
-        return (h(Host, { key: 'b873ad5d26191b9589a3f67432f911f57a3db2cc' }, h("div", { key: '1fe3503ee61589e6cd9ebe683c937665b934fc8e', class: "field", part: "field" }, this.label && (h("label", { key: '7d9da068ca611a068b89e5292238852f2d40ba53', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: 'bfb6e221092438b3ccef19dfe811767f4d2f3a5d', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '7bb8c35312b4d30e1b09fefa78f752c6791a34f9', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, h("button", { key: 'ff991dc6a65ca1fc5984e5b260b7b9c77def5d49', type: "button", class: "step", part: "decrement", "aria-label": this.decrementLabel, disabled: this.disabled || this.atMin, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(-1) }, h("pf-icon", { key: '4d65e8eda2958a1e9a7308a3b23f2f3bcf9083cf', name: "minus", "aria-hidden": "true" })), h("input", { key: '4a7db9fb97f9cdf12c4228ff47079f2cecadf7d8', id: "input", part: "input", class: "input", type: "text", inputMode: "decimal", role: "spinbutton", name: this.name, value: shown, placeholder: this.placeholder, required: this.required, disabled: this.disabled, autocomplete: "off", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, "aria-valuenow": this.current ?? null, "aria-valuemin": Number.isFinite(min) ? min : null, "aria-valuemax": Number.isFinite(max) ? max : null, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onKeyDown }), h("button", { key: '436e0a6557aef36b2bd59b7f0cee8d0a08636c53', type: "button", class: "step", part: "increment", "aria-label": this.incrementLabel, disabled: this.disabled || this.atMax, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(1) }, h("pf-icon", { key: '0ae5162f3d63f69c135cc9991c9d02aaf3ac86ea', name: "plus", "aria-hidden": "true" }))), this.description && (h("p", { key: '6c958dd2bdeb22310d6c422d1757f4938687513c', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: 'f8ea4d36f4941251e63cdfdc127fd08d3bb55ae4', class: "error", part: "error", id: "error" }, this.error)))));
+        return (h(Host, { key: '27f7f45a2732cbca6d252f4b9128901ed7868663' }, h("div", { key: '75bfab2f72a83b830fd960e5fae19b9941eeae6c', class: "field", part: "field" }, this.label && (h("label", { key: 'f2e60206f153933cde6b36a23c510225bd5fb2ab', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '3925b4690d5b560190aaa04e7e7cf83453c7c49e', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'dcf1949c7fd8626c5a334fd3d72d8c4544369b41', class: { control: true, 'control--invalid': Boolean(this.error) }, part: "control" }, h("button", { key: '03e3592fa8ff57a23e3675c475e7a66908af6cc3', type: "button", class: "step", part: "decrement", "aria-label": this.decrementLabel, disabled: this.disabled || this.atMin, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(-1) }, h("pf-icon", { key: '157e45ebe127230052c34215c3f88d487dacd41a', name: "minus", "aria-hidden": "true" })), h("input", { key: '6fb05cb46de22b37387a16869f93b31b2ea6cc0a', id: "input", "aria-label": controlAriaLabel(this.el, this.label), part: "input", class: "input", type: "text", inputMode: "decimal", role: "spinbutton", name: this.name, value: shown, placeholder: this.placeholder, required: this.required, disabled: this.disabled, autocomplete: "off", "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, "aria-valuenow": this.current ?? null, "aria-valuemin": Number.isFinite(min) ? min : null, "aria-valuemax": Number.isFinite(max) ? max : null, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onKeyDown }), h("button", { key: '9b6eeddb4884a2961ac5a5cfe6a406111635cf79', type: "button", class: "step", part: "increment", "aria-label": this.incrementLabel, disabled: this.disabled || this.atMax, tabindex: "-1", onMouseDown: (event) => event.preventDefault(), onClick: () => this.step_(1) }, h("pf-icon", { key: '2a97e66ca7bf42c6d10a872c4b8eec52316d0784', name: "plus", "aria-hidden": "true" }))), this.description && (h("p", { key: '3943b0c1ec5ad58d749b0e6d1fb5f60a17eb917e', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '5aafabcd042976f000f906e6c16fc3eb45d57bf6', class: "error", part: "error", id: "error" }, this.error)))));
     }
     static get is() { return "pf-number-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pf-number-input/pf-number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-number-input.js","sourceRoot":"","sources":["../../../src/components/pf-number-input/pf-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n clampNumber,\n composeDescribedBy,\n formatNumberValue,\n Keys,\n parseNumberValue,\n roundToStep,\n stepNumber,\n} from '@pitchfork-ui/core';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/*\n A form-associated stepper field.\n \n The value is a string rather than a number, because that is what an\n * attribute can carry and what a form submits; `pfChange` reports the parsed\n * number beside it, which is what a framework consumer wants. An empty string\n * is an empty field — not zero, which is a value someone chose.\n \n All of the arithmetic is core's, so this and the React `NumberInput` step,\n * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the steppers and the input.\n * @part decrement - the step-down button.\n * @part input - the native input.\n * @part increment - the step-up button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-number-input',\n styleUrl: 'pf-number-input.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfNumberInput {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name. Reflected, because a form-associated element\n * takes its submission name from the attribute, not this property.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* The value, as a string. Empty means an empty field. /\n @Prop({ mutable: true }) value = '';\n\n /* The lowest value the field accepts. /\n @Prop() min?: number;\n\n /* The highest value the field accepts. /\n @Prop() max?: number;\n\n /* How far one step moves, and what the result is rounded to. /\n @Prop() step = 1;\n\n /* Visible label. Rendered in the same root as the input, so `for` works. /\n @Prop() label?: string;\n\n /* Hint text below the control. /\n @Prop() description?: string;\n\n /* Error message. Its presence is what marks the control invalid. /\n @Prop() error?: string;\n\n @Prop() placeholder?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* The step-down button's accessible name. /\n @Prop() decrementLabel = 'Decrease';\n\n /* The step-up button's accessible name. /\n @Prop() incrementLabel = 'Increase';\n\n /* Fires when the value changes, with the parsed number beside the string. /\n @Event() pfChange!: EventEmitter<{ value: string; number: number \| null }>;\n\n /\n What the input shows while it is being edited, which is not always the\n * value: a half-typed \"-\" or \"1.\" is neither a number nor a reason to throw\n * the keystroke away.\n /\n @State() draft: string \| null = null;\n\n /* The value a form reset restores, which is the initial attribute. /\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value ?? '');\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n /* A form-associated custom element does not inherit this. /\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /* As `checkValidity`, but also shows the browser's validation message. /\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /* The message explaining why the control is invalid, or an empty string. /\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /* A reset restores the value the field started with. /\n formResetCallback() {\n this.value = this.initialValue;\n this.draft = null;\n }\n\n /* Steps the value up or down, as the buttons and the arrows do. /\n @Method()\n async stepBy(direction: 1 \| -1): Promise<void> {\n this.step_(direction);\n }\n\n private get bounds() {\n return {\n min: this.min === undefined ? -Infinity : Number(this.min),\n max: this.max === undefined ? Infinity : Number(this.max),\n step: Number(this.step) \|\| 1,\n };\n }\n\n private get current(): number \| null {\n return parseNumberValue(this.value);\n }\n\n private get atMin(): boolean {\n const { min } = this.bounds;\n return this.current !== null && this.current <= min;\n }\n\n private get atMax(): boolean {\n const { max } = this.bounds;\n return this.current !== null && this.current >= max;\n }\n\n private commit(next: number \| null) {\n const { min, max, step } = this.bounds;\n const value = next === null ? '' : String(roundToStep(clampNumber(next, min, max), step));\n if (value === this.value) return;\n\n this.value = value;\n this.pfChange.emit({ value, number: parseNumberValue(value) });\n }\n\n private step_(direction: 1 \| -1) {\n if (this.disabled) return;\n this.draft = null;\n this.commit(stepNumber(this.current, direction, this.bounds));\n }\n\n private onInput = (event: Event) => {\n const raw = (event.target as HTMLInputElement).value;\n /\n * The draft is kept as typed and the value follows it, rather than the\n * input being rewritten from the value: clamping mid-keystroke would make\n * \"5\" unreachable in a field whose minimum is 50, and rounding would eat\n * the \".\" of \"1.5\" as it was typed.\n /\n this.draft = raw;\n const parsed = parseNumberValue(raw);\n if (raw.trim() === '') {\n this.commit(null);\n return;\n }\n if (parsed !== null) this.commit(parsed);\n };\n\n /* On blur the draft is given up, so the field shows its real value. /\n private onBlur = () => {\n this.draft = null;\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n const { min, max } = this.bounds;\n\n if (event.key === Keys.ArrowUp) {\n event.preventDefault();\n this.step_(1);\n } else if (event.key === Keys.ArrowDown) {\n event.preventDefault();\n this.step_(-1);\n } else if (event.key === Keys.Home && Number.isFinite(min)) {\n event.preventDefault();\n this.draft = null;\n this.commit(min);\n } else if (event.key === Keys.End && Number.isFinite(max)) {\n event.preventDefault();\n this.draft = null;\n this.commit(max);\n }\n };\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal.\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const { min, max } = this.bounds;\n const shown = this.draft ?? formatNumberValue(this.current);\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n \n </span>\n )}\n </label>\n )}\n\n <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n {/\n The steppers are out of the tab order and the arrows are on the\n input, which is the spinbutton pattern: a keyboard user steps\n without leaving the field. `mousedown` is prevented so a click\n does not take focus off it either.\n /}\n <button\n type=\"button\"\n class=\"step\"\n part=\"decrement\"\n aria-label={this.decrementLabel}\n disabled={this.disabled \|\| this.atMin}\n tabindex=\"-1\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.step_(-1)}\n >\n <pf-icon name=\"minus\" aria-hidden=\"true\"></pf-icon>\n </button>\n\n <input\n id=\"input\"\n part=\"input\"\n class=\"input\"\n type=\"text\"\n inputMode=\"decimal\"\n role=\"spinbutton\"\n name={this.name}\n value={shown}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n autocomplete=\"off\"\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n aria-valuenow={this.current ?? null}\n aria-valuemin={Number.isFinite(min) ? min : null}\n aria-valuemax={Number.isFinite(max) ? max : null}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n />\n\n <button\n type=\"button\"\n class=\"step\"\n part=\"increment\"\n aria-label={this.incrementLabel}\n disabled={this.disabled \|\| this.atMax}\n tabindex=\"-1\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.step_(1)}\n >\n <pf-icon name=\"plus\" aria-hidden=\"true\"></pf-icon>\n </button>\n </div>\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 </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pf-number-input.js","sourceRoot":"","sources":["../../../src/components/pf-number-input/pf-number-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n clampNumber,\n composeDescribedBy,\n formatNumberValue,\n Keys,\n parseNumberValue,\n roundToStep,\n stepNumber,\n} from '@pitchfork-ui/core';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/*\n A form-associated stepper field.\n \n The value is a string rather than a number, because that is what an\n * attribute can carry and what a form submits; `pfChange` reports the parsed\n * number beside it, which is what a framework consumer wants. An empty string\n * is an empty field — not zero, which is a value someone chose.\n \n All of the arithmetic is core's, so this and the React `NumberInput` step,\n * round and clamp identically: ten steps of `0.1` reach exactly 1 in both.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the steppers and the input.\n * @part decrement - the step-down button.\n * @part input - the native input.\n * @part increment - the step-up button.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-number-input',\n styleUrl: 'pf-number-input.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfNumberInput {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name. Reflected, because a form-associated element\n * takes its submission name from the attribute, not this property.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* The value, as a string. Empty means an empty field. /\n @Prop({ mutable: true }) value = '';\n\n /* The lowest value the field accepts. /\n @Prop() min?: number;\n\n /* The highest value the field accepts. /\n @Prop() max?: number;\n\n /* How far one step moves, and what the result is rounded to. /\n @Prop() step = 1;\n\n /* Visible label. Rendered in the same root as the input, so `for` works. /\n @Prop() label?: string;\n\n /* Hint text below the control. /\n @Prop() description?: string;\n\n /* Error message. Its presence is what marks the control invalid. /\n @Prop() error?: string;\n\n @Prop() placeholder?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* The step-down button's accessible name. /\n @Prop() decrementLabel = 'Decrease';\n\n /* The step-up button's accessible name. /\n @Prop() incrementLabel = 'Increase';\n\n /* Fires when the value changes, with the parsed number beside the string. /\n @Event() pfChange!: EventEmitter<{ value: string; number: number \| null }>;\n\n /\n What the input shows while it is being edited, which is not always the\n * value: a half-typed \"-\" or \"1.\" is neither a number nor a reason to throw\n * the keystroke away.\n /\n @State() draft: string \| null = null;\n\n /* The value a form reset restores, which is the initial attribute. /\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value ?? '');\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n /* A form-associated custom element does not inherit this. /\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n /* As `checkValidity`, but also shows the browser's validation message. /\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n /* The message explaining why the control is invalid, or an empty string. /\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /* A reset restores the value the field started with. /\n formResetCallback() {\n this.value = this.initialValue;\n this.draft = null;\n }\n\n /* Steps the value up or down, as the buttons and the arrows do. /\n @Method()\n async stepBy(direction: 1 \| -1): Promise<void> {\n this.step_(direction);\n }\n\n private get bounds() {\n return {\n min: this.min === undefined ? -Infinity : Number(this.min),\n max: this.max === undefined ? Infinity : Number(this.max),\n step: Number(this.step) \|\| 1,\n };\n }\n\n private get current(): number \| null {\n return parseNumberValue(this.value);\n }\n\n private get atMin(): boolean {\n const { min } = this.bounds;\n return this.current !== null && this.current <= min;\n }\n\n private get atMax(): boolean {\n const { max } = this.bounds;\n return this.current !== null && this.current >= max;\n }\n\n private commit(next: number \| null) {\n const { min, max, step } = this.bounds;\n const value = next === null ? '' : String(roundToStep(clampNumber(next, min, max), step));\n if (value === this.value) return;\n\n this.value = value;\n this.pfChange.emit({ value, number: parseNumberValue(value) });\n }\n\n private step_(direction: 1 \| -1) {\n if (this.disabled) return;\n this.draft = null;\n this.commit(stepNumber(this.current, direction, this.bounds));\n }\n\n private onInput = (event: Event) => {\n const raw = (event.target as HTMLInputElement).value;\n /\n * The draft is kept as typed and the value follows it, rather than the\n * input being rewritten from the value: clamping mid-keystroke would make\n * \"5\" unreachable in a field whose minimum is 50, and rounding would eat\n * the \".\" of \"1.5\" as it was typed.\n /\n this.draft = raw;\n const parsed = parseNumberValue(raw);\n if (raw.trim() === '') {\n this.commit(null);\n return;\n }\n if (parsed !== null) this.commit(parsed);\n };\n\n /* On blur the draft is given up, so the field shows its real value. /\n private onBlur = () => {\n this.draft = null;\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n const { min, max } = this.bounds;\n\n if (event.key === Keys.ArrowUp) {\n event.preventDefault();\n this.step_(1);\n } else if (event.key === Keys.ArrowDown) {\n event.preventDefault();\n this.step_(-1);\n } else if (event.key === Keys.Home && Number.isFinite(min)) {\n event.preventDefault();\n this.draft = null;\n this.commit(min);\n } else if (event.key === Keys.End && Number.isFinite(max)) {\n event.preventDefault();\n this.draft = null;\n this.commit(max);\n }\n };\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal.\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const { min, max } = this.bounds;\n const shown = this.draft ?? formatNumberValue(this.current);\n\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n \n </span>\n )}\n </label>\n )}\n\n <div class={{ control: true, 'control--invalid': Boolean(this.error) }} part=\"control\">\n {/\n The steppers are out of the tab order and the arrows are on the\n input, which is the spinbutton pattern: a keyboard user steps\n without leaving the field. `mousedown` is prevented so a click\n does not take focus off it either.\n /}\n <button\n type=\"button\"\n class=\"step\"\n part=\"decrement\"\n aria-label={this.decrementLabel}\n disabled={this.disabled \|\| this.atMin}\n tabindex=\"-1\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.step_(-1)}\n >\n <pf-icon name=\"minus\" aria-hidden=\"true\"></pf-icon>\n </button>\n\n <input\n id=\"input\"\n aria-label={controlAriaLabel(this.el, this.label)}\n part=\"input\"\n class=\"input\"\n type=\"text\"\n inputMode=\"decimal\"\n role=\"spinbutton\"\n name={this.name}\n value={shown}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n autocomplete=\"off\"\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n aria-valuenow={this.current ?? null}\n aria-valuemin={Number.isFinite(min) ? min : null}\n aria-valuemax={Number.isFinite(max) ? max : null}\n onInput={this.onInput}\n onBlur={this.onBlur}\n onKeyDown={this.onKeyDown}\n />\n\n <button\n type=\"button\"\n class=\"step\"\n part=\"increment\"\n aria-label={this.incrementLabel}\n disabled={this.disabled \|\| this.atMax}\n tabindex=\"-1\"\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.step_(1)}\n >\n <pf-icon name=\"plus\" aria-hidden=\"true\"></pf-icon>\n </button>\n </div>\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 </Host>\n );\n }\n}\n"]}

package/dist/collection/components/pf-progress-steps/pf-progress-steps.js CHANGED Viewed

@@ -88,7 +88,7 @@ export class PfProgressSteps {
                     "references": {
                         "PfProgressStepsOrientation": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-progress-steps/pf-progress-steps.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-progress-steps/pf-progress-steps.tsx",
                             "id": "src/components/pf-progress-steps/pf-progress-steps.tsx::PfProgressStepsOrientation"
                         }
                     }

package/dist/collection/components/pf-radio-group/pf-radio-group.js CHANGED Viewed

@@ -249,7 +249,7 @@ export class PfRadioGroup {
                     "references": {
                         "PfRadioGroupOrientation": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-radio-group/pf-radio-group.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-radio-group/pf-radio-group.tsx",
                             "id": "src/components/pf-radio-group/pf-radio-group.tsx::PfRadioGroupOrientation"
                         }
                     }

package/dist/collection/components/pf-rating-badge/pf-rating-badge.js CHANGED Viewed

@@ -108,7 +108,7 @@ export class PfRatingBadge {
                     "references": {
                         "PfRatingBadgeSize": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-rating-badge/pf-rating-badge.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-rating-badge/pf-rating-badge.tsx",
                             "id": "src/components/pf-rating-badge/pf-rating-badge.tsx::PfRatingBadgeSize"
                         }
                     }

package/dist/collection/components/pf-scroll-area/pf-scroll-area.js CHANGED Viewed

@@ -54,7 +54,7 @@ export class PfScrollArea {
                     "references": {
                         "PfScrollAreaOrientation": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-scroll-area/pf-scroll-area.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-scroll-area/pf-scroll-area.tsx",
                             "id": "src/components/pf-scroll-area/pf-scroll-area.tsx::PfScrollAreaOrientation"
                         }
                     }

package/dist/collection/components/pf-section-header/pf-section-header.js CHANGED Viewed

@@ -83,7 +83,7 @@ export class PfSectionHeader {
                     "references": {
                         "PfSectionHeaderAlign": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-section-header/pf-section-header.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-section-header/pf-section-header.tsx",
                             "id": "src/components/pf-section-header/pf-section-header.tsx::PfSectionHeaderAlign"
                         }
                     }

package/dist/collection/components/pf-select/pf-select.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { composeDescribedBy, findTypeaheadMatch, getEnabledIndexes, isActivationKey, Keys, nextTypeaheadBuffer, observeAnchoredPosition, resolveListMove, TYPEAHEAD_TIMEOUT_MS, isTypeaheadKey, } from "@pitchfork-ui/core";
 import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
 import { placePopover } from "../../place-popover";
 import { h, Host, } from "@stencil/core";
 const MOVES = {
@@ -310,12 +311,12 @@ export class PfSelect {
     }
     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: () => {
+        return (h(Host, { key: 'ccb96054293516751523dc6b89d3fd3bb3e08902' }, h("div", { key: '65d6ca23015f8371f02715f1b3cf862122c94932', class: "field", part: "field" }, this.label && (h("label", { key: '580a891de1e1c60481a494ab5f915e0c8528d511', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: 'dd0e347bcfafdca6eba7dc06f596215b47331e8f', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: '7c6b543a99a06b9d18a6339e0aa3c6ad3d2eb260', id: "trigger", "aria-label": 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;
-            } }, 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
+            } }, h("span", { key: '032fb5d8de622dde393a5100ce69d08944916bb9', class: { value: true, 'value--placeholder': !this.selectedLabel } }, this.selectedLabel || this.placeholder), h("span", { key: 'eae5f550a6b4f16a27a044220db57236aebd31b8', class: "chevron", "aria-hidden": "true" }, h("pf-icon", { key: '7983ac569e121be6a98822cdbec4c46ae43dc99e', name: "chevron-down" }))), this.description && (h("p", { key: 'c27fc89569900855af8966fcec3246f7f12c1d20', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '6d805181ffb58622ed41e688195bdf58511e7efa', class: "error", part: "error", id: "error" }, this.error))), 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 }, h("slot", { key: 'f23712d710ef4aa13b186ef5a8f075494dc7b5ca', onSlotchange: this.onSlotChange }))));
+                : undefined, onToggle: this.onToggle }, h("slot", { key: '02373173990a5e9ecad005b21f1a4b11d2cef032', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "pf-select"; }
     static get encapsulation() { return "shadow"; }