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-tag-input/pf-tag-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-tag-input.js","sourceRoot":"","sources":["../../../src/components/pf-tag-input/pf-tag-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n addTag,\n composeDescribedBy,\n formatValueList,\n Keys,\n parseValueList,\n removeTagAt,\n splitPastedTags,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport type { PfTagVariant } from '../pf-tag/pf-tag';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated field that collects free-text tags.\n \n Unlike the other multi-value controls here the tags are not chosen from a\n * list, so there are no `pf-option` children — the chips are `pf-tag`\n * elements this component renders, and `pf-tag` already has the dismiss\n * button and the event for it.\n \n The rules are core's: trimming, the case-insensitive dedup (`React` and\n * `react` are one tag), the maximum, and `validate`. So is the paste split.\n * What stays here is what to do with the draft, which differs per refusal — a\n * duplicate clears it, because the tag asked for is already there, while\n * hitting the maximum leaves it so nothing is lost.\n \n Submits one entry per tag under one name, the same way `pf-multi-select`\n * does.\n \n @slot - nothing; the chips are rendered from `value`.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the chips and the draft input.\n * @part tag - each chip.\n * @part input - the draft input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-tag-input',\n styleUrl: 'pf-tag-input.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfTagInput {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name, once per tag. Reflected. /\n @Prop({ reflect: true }) name?: string;\n\n /* The tags, comma-separated. Reflected, so HTML can set it. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Add a tag…';\n\n /* Stop accepting tags once there are this many. /\n @Prop() max?: number;\n\n /* Accept the same tag twice. The comparison is case-insensitive. /\n @Prop() allowDuplicates = false;\n\n /\n Visual variant for the chips, passed through to `pf-tag`.\n \n The type is imported from `pf-tag` rather than restated, so the two\n * cannot drift apart — a second copy of the union would compile happily\n * while offering a variant `pf-tag` has never heard of.\n /\n @Prop() tagVariant: PfTagVariant = 'neutral';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /\n Refuse a candidate tag. A property rather than an attribute, because a\n * function cannot be written in HTML — the generated bindings set props as\n * properties, so a framework consumer passes it like any other.\n /\n @Prop() validate?: (tag: string) => boolean;\n\n /* Fires when the tags change, with both representations. /\n @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n /* See pf-multi-select: the name is built into the FormData, so watch it. /\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const tags = this.tags();\n\n if (tags.length === 0 \|\| !this.name) {\n this.internals.setFormValue(null);\n } else {\n const data = new FormData();\n for (const tag of tags) data.append(this.name, tag);\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, tags.length > 0, this.required, this.error);\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 const field = this.input;\n if (field) field.value = '';\n }\n\n private tags(): string[] {\n return parseValueList(this.value);\n }\n\n private get input() {\n return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n }\n\n private get options() {\n return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };\n }\n\n private commit(tags: string[]) {\n this.value = formatValueList(tags);\n this.pfChange.emit({ value: this.value, values: tags });\n }\n\n /* Takes the draft as a tag, and decides what to do with the draft itself. /\n private addDraft(raw: string) {\n const result = addTag(this.tags(), raw, this.options);\n const field = this.input;\n\n if (result.added) {\n this.commit(result.tags);\n if (field) field.value = '';\n return;\n }\n\n // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.\n if (result.refusal === 'duplicate' && field) field.value = '';\n }\n\n private remove(index: number) {\n if (this.disabled) return;\n this.commit(removeTagAt(this.tags(), index));\n this.input?.focus();\n }\n\n /\n Enter and comma commit; Backspace on an empty draft removes the last tag,\n * which is the gesture every tag field has.\n /\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n const field = event.target as HTMLInputElement;\n\n if (event.key === Keys.Enter \|\| event.key === ',') {\n // A bare comma with nothing typed is swallowed rather than committing an\n // empty tag; Enter is left alone so a form can still be submitted.\n if (field.value.trim()) {\n event.preventDefault();\n this.addDraft(field.value);\n } else if (event.key !== Keys.Enter) {\n event.preventDefault();\n }\n return;\n }\n\n if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {\n event.preventDefault();\n this.remove(this.tags().length - 1);\n }\n };\n\n /\n A pasted list is folded, not added one at a time, so the maximum and the\n * dedup see each addition. The React component added them in a loop over\n * stale state and kept only the last — fixed there too, in the same change.\n /\n private onPaste = (event: ClipboardEvent) => {\n if (this.disabled) return;\n const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');\n if (pasted.length === 0) return;\n\n event.preventDefault();\n let next = this.tags();\n for (const candidate of pasted) next = addTag(next, candidate, this.options).tags;\n\n this.commit(next);\n const field = this.input;\n if (field) field.value = '';\n };\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const tags = this.tags();\n const atMax = this.max !== undefined && tags.length >= this.max;\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 {tags.map((tag, index) => (\n <pf-tag\n key={tag}\n part=\"tag\"\n variant={this.tagVariant}\n dismissible={!this.disabled}\n dismissLabel={`Remove ${tag}`}\n onPfDismiss={() => this.remove(index)}\n >\n {tag}\n </pf-tag>\n ))}\n\n <input\n id=\"input\"\n part=\"input\"\n class=\"input\"\n type=\"text\"\n autocomplete=\"off\"\n disabled={this.disabled \|\| atMax}\n required={this.required && tags.length === 0}\n placeholder={atMax ? '' : this.placeholder}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onKeyDown={this.onKeyDown}\n onPaste={this.onPaste}\n onBlur={(event) => {\n // Commit on blur, so a typed tag is not lost by clicking away.\n const field = event.target as HTMLInputElement;\n if (field.value.trim()) this.addDraft(field.value);\n }}\n />\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-tag-input.js","sourceRoot":"","sources":["../../../src/components/pf-tag-input/pf-tag-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n addTag,\n composeDescribedBy,\n formatValueList,\n Keys,\n parseValueList,\n removeTagAt,\n splitPastedTags,\n} from '@pitchfork-ui/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport type { PfTagVariant } from '../pf-tag/pf-tag';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated field that collects free-text tags.\n \n Unlike the other multi-value controls here the tags are not chosen from a\n * list, so there are no `pf-option` children — the chips are `pf-tag`\n * elements this component renders, and `pf-tag` already has the dismiss\n * button and the event for it.\n \n The rules are core's: trimming, the case-insensitive dedup (`React` and\n * `react` are one tag), the maximum, and `validate`. So is the paste split.\n * What stays here is what to do with the draft, which differs per refusal — a\n * duplicate clears it, because the tag asked for is already there, while\n * hitting the maximum leaves it so nothing is lost.\n \n Submits one entry per tag under one name, the same way `pf-multi-select`\n * does.\n \n @slot - nothing; the chips are rendered from `value`.\n * @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part control - the box holding the chips and the draft input.\n * @part tag - each chip.\n * @part input - the draft input.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-tag-input',\n styleUrl: 'pf-tag-input.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfTagInput {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name, once per tag. Reflected. /\n @Prop({ reflect: true }) name?: string;\n\n /* The tags, comma-separated. Reflected, so HTML can set it. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Add a tag…';\n\n /* Stop accepting tags once there are this many. /\n @Prop() max?: number;\n\n /* Accept the same tag twice. The comparison is case-insensitive. /\n @Prop() allowDuplicates = false;\n\n /\n Visual variant for the chips, passed through to `pf-tag`.\n \n The type is imported from `pf-tag` rather than restated, so the two\n * cannot drift apart — a second copy of the union would compile happily\n * while offering a variant `pf-tag` has never heard of.\n /\n @Prop() tagVariant: PfTagVariant = 'neutral';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /\n Refuse a candidate tag. A property rather than an attribute, because a\n * function cannot be written in HTML — the generated bindings set props as\n * properties, so a framework consumer passes it like any other.\n /\n @Prop() validate?: (tag: string) => boolean;\n\n /* Fires when the tags change, with both representations. /\n @Event() pfChange!: EventEmitter<{ value: string; values: string[] }>;\n\n private initialValue = '';\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n /* See pf-multi-select: the name is built into the FormData, so watch it. /\n @Watch('name')\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n const tags = this.tags();\n\n if (tags.length === 0 \|\| !this.name) {\n this.internals.setFormValue(null);\n } else {\n const data = new FormData();\n for (const tag of tags) data.append(this.name, tag);\n this.internals.setFormValue(data);\n }\n\n applyControlValidity(this.internals, tags.length > 0, this.required, this.error);\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 const field = this.input;\n if (field) field.value = '';\n }\n\n private tags(): string[] {\n return parseValueList(this.value);\n }\n\n private get input() {\n return this.el.shadowRoot?.querySelector<HTMLInputElement>('[part=\"input\"]') ?? null;\n }\n\n private get options() {\n return { max: this.max, allowDuplicates: this.allowDuplicates, validate: this.validate };\n }\n\n private commit(tags: string[]) {\n this.value = formatValueList(tags);\n this.pfChange.emit({ value: this.value, values: tags });\n }\n\n /* Takes the draft as a tag, and decides what to do with the draft itself. /\n private addDraft(raw: string) {\n const result = addTag(this.tags(), raw, this.options);\n const field = this.input;\n\n if (result.added) {\n this.commit(result.tags);\n if (field) field.value = '';\n return;\n }\n\n // Only a duplicate consumes the draft; `max` leaves it so nothing is lost.\n if (result.refusal === 'duplicate' && field) field.value = '';\n }\n\n private remove(index: number) {\n if (this.disabled) return;\n this.commit(removeTagAt(this.tags(), index));\n this.input?.focus();\n }\n\n /\n Enter and comma commit; Backspace on an empty draft removes the last tag,\n * which is the gesture every tag field has.\n /\n private onKeyDown = (event: KeyboardEvent) => {\n if (this.disabled) return;\n const field = event.target as HTMLInputElement;\n\n if (event.key === Keys.Enter \|\| event.key === ',') {\n // A bare comma with nothing typed is swallowed rather than committing an\n // empty tag; Enter is left alone so a form can still be submitted.\n if (field.value.trim()) {\n event.preventDefault();\n this.addDraft(field.value);\n } else if (event.key !== Keys.Enter) {\n event.preventDefault();\n }\n return;\n }\n\n if (event.key === 'Backspace' && field.value === '' && this.tags().length > 0) {\n event.preventDefault();\n this.remove(this.tags().length - 1);\n }\n };\n\n /\n A pasted list is folded, not added one at a time, so the maximum and the\n * dedup see each addition. The React component added them in a loop over\n * stale state and kept only the last — fixed there too, in the same change.\n /\n private onPaste = (event: ClipboardEvent) => {\n if (this.disabled) return;\n const pasted = splitPastedTags(event.clipboardData?.getData('text') ?? '');\n if (pasted.length === 0) return;\n\n event.preventDefault();\n let next = this.tags();\n for (const candidate of pasted) next = addTag(next, candidate, this.options).tags;\n\n this.commit(next);\n const field = this.input;\n if (field) field.value = '';\n };\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const tags = this.tags();\n const atMax = this.max !== undefined && tags.length >= this.max;\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 {tags.map((tag, index) => (\n <pf-tag\n key={tag}\n part=\"tag\"\n variant={this.tagVariant}\n dismissible={!this.disabled}\n dismissLabel={`Remove ${tag}`}\n onPfDismiss={() => this.remove(index)}\n >\n {tag}\n </pf-tag>\n ))}\n\n <input\n id=\"input\"\n aria-label={controlAriaLabel(this.el, this.label)}\n part=\"input\"\n class=\"input\"\n type=\"text\"\n autocomplete=\"off\"\n disabled={this.disabled \|\| atMax}\n required={this.required && tags.length === 0}\n placeholder={atMax ? '' : this.placeholder}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onKeyDown={this.onKeyDown}\n onPaste={this.onPaste}\n onBlur={(event) => {\n // Commit on blur, so a typed tag is not lost by clicking away.\n const field = event.target as HTMLInputElement;\n if (field.value.trim()) this.addDraft(field.value);\n }}\n />\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-textarea/pf-textarea.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { composeDescribedBy } from "@pitchfork-ui/core";
 import { applyControlValidity } from "../../form-validity";
+import { controlAriaLabel } from "../../control-label";
 import { h, Host, } from "@stencil/core";
 /**
  * A form-associated multi-line text control.
@@ -111,7 +112,7 @@ export class PfTextarea {
         // IDs are scoped to this shadow root, so they can be literal -- the useId()
         // the React component needs has no counterpart here.
         const describedBy = composeDescribedBy(this.description && 'description', this.error && 'error');
-        return (h(Host, { key: '2ec86efeeb1ce4aa2ec112e93157a8f205731bf3' }, h("div", { key: '8d68eda3ec27c38703391e14f724e7dc06e76503', class: "field", part: "field" }, this.label && (h("label", { key: 'd73433e1f64c2e47b8a8ca88aa1805610e9058bb', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: '1a52649b0e92dd7700aa21d3658126764bbac0d0', class: "required", "aria-hidden": "true" }, "*")))), h("textarea", { key: '879a93a961d1f20d5835873bb8351e2ab04c2a79', id: "input", part: "textarea", class: { textarea: true, 'textarea--invalid': Boolean(this.error) }, name: this.name, rows: this.rows, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readOnly: this.readonly, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange }), this.description && (h("p", { key: '91b2ffdb3da3e93e868d2b9a9398d99c2df49a27', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '58508d7aa6efbf4b55b304b029fb8c2ec6c817e3', class: "error", part: "error", id: "error" }, this.error)))));
+        return (h(Host, { key: '80a5c7f53163f8336121fb8f37b9523e6bed32ab' }, h("div", { key: 'fa50dbbd2d5f9320d21abf12ee83edce19aee843', class: "field", part: "field" }, this.label && (h("label", { key: 'f38ae2638abf5eb7f646dac050fa4a8888c03c31', class: "label", part: "label", htmlFor: "input" }, this.label, this.required && (h("span", { key: 'e7dbd26e3c88a3ab31eb0f2a578d07354c413efe', class: "required", "aria-hidden": "true" }, "*")))), h("textarea", { key: '88c3b5be8039120c49e76a8099be97f2755f73b7', id: "input", "aria-label": controlAriaLabel(this.el, this.label), part: "textarea", class: { textarea: true, 'textarea--invalid': Boolean(this.error) }, name: this.name, rows: this.rows, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readOnly: this.readonly, "aria-invalid": this.error ? 'true' : null, "aria-describedby": describedBy, onInput: this.onInput, onChange: this.onChange }), this.description && (h("p", { key: '4157ccc35337f16ca15b26e4442e260aa7f47019', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '04a8583bdde73b69402113a4659e00a316b330fc', class: "error", part: "error", id: "error" }, this.error)))));
     }
     static get is() { return "pf-textarea"; }
     static get encapsulation() { return "shadow"; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-textarea.js","sourceRoot":"","sources":["../../../src/components/pf-textarea/pf-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated multi-line text control.\n \n Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-textarea',\n styleUrl: 'pf-textarea.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name.\n \n Reflected, because a form-associated custom element takes its submission\n * name from the `name` content attribute -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* The control's value. /\n @Prop({ mutable: true }) value = '';\n\n /* Visible rows. Mirrors the native attribute. /\n @Prop() rows = 4;\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 @Prop({ reflect: true }) readonly = false;\n\n /* Fires on every keystroke, like the native `input` event. /\n @Event() pfInput!: EventEmitter<{ value: string }>;\n\n /* Fires when the value is committed, like the native `change` event. /\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /\n The value the control had when it was created, which is what a form reset\n * restores. Captured here because `value` has been overwritten by then.\n /\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 /\n Whether the control currently satisfies its constraints.\n \n A form-associated custom element does not inherit `checkValidity` from\n * anywhere -- the spec puts it on ElementInternals, so the element has to\n * forward it or consumers cannot ask.\n /\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 /\n A reset restores the value the control started with, not an empty string —\n * verified against a native `<input value=\"initial\">`, which comes back to\n * \"initial\" rather than to \"\". Clearing it was a real defect: a\n * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n /\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n private onInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.pfInput.emit({ value: this.value });\n };\n\n private onChange = () => {\n this.pfChange.emit({ value: this.value });\n };\n\n /\n A textarea's value is its text content, not an attribute, so it cannot be\n * rendered as a JSX child without Stencil replacing that text node on every\n * keystroke. It is written through the DOM property instead, which is what\n * the browser itself does.\n \n Guarded on inequality: assigning the same string still moves the caret to\n * the end in some engines, which would make typing into the middle of a\n * paragraph jump the cursor away on every character.\n /\n componentDidRender() {\n const control = this.el.shadowRoot?.querySelector('textarea');\n if (control && control.value !== (this.value ?? '')) {\n control.value = this.value ?? '';\n }\n }\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal -- the useId()\n // the React component needs has no counterpart here.\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=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n \n </span>\n )}\n </label>\n )}\n <textarea\n id=\"input\"\n part=\"textarea\"\n class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n name={this.name}\n rows={this.rows}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onInput={this.onInput}\n onChange={this.onChange}\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-textarea.js","sourceRoot":"","sources":["../../../src/components/pf-textarea/pf-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { composeDescribedBy } from '@pitchfork-ui/core';\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated multi-line text control.\n \n Shares `pf-input`'s field anatomy and form wiring; the control is a\n * `<textarea>` rather than an `<input>`, so it takes `rows` and resizes.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part textarea - the native textarea.\n * @part description - the hint text below the control.\n * @part error - the error message below the control.\n /\n@Component({\n tag: 'pf-textarea',\n styleUrl: 'pf-textarea.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfTextarea {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name.\n \n Reflected, because a form-associated custom element takes its submission\n * name from the `name` content attribute -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* The control's value. /\n @Prop({ mutable: true }) value = '';\n\n /* Visible rows. Mirrors the native attribute. /\n @Prop() rows = 4;\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 @Prop({ reflect: true }) readonly = false;\n\n /* Fires on every keystroke, like the native `input` event. /\n @Event() pfInput!: EventEmitter<{ value: string }>;\n\n /* Fires when the value is committed, like the native `change` event. /\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /\n The value the control had when it was created, which is what a form reset\n * restores. Captured here because `value` has been overwritten by then.\n /\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 /\n Whether the control currently satisfies its constraints.\n \n A form-associated custom element does not inherit `checkValidity` from\n * anywhere -- the spec puts it on ElementInternals, so the element has to\n * forward it or consumers cannot ask.\n /\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 /\n A reset restores the value the control started with, not an empty string —\n * verified against a native `<input value=\"initial\">`, which comes back to\n * \"initial\" rather than to \"\". Clearing it was a real defect: a\n * `<pf-textarea value=\"…\">` in a form lost its value on any reset.\n /\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n private onInput = (event: Event) => {\n this.value = (event.target as HTMLTextAreaElement).value;\n this.pfInput.emit({ value: this.value });\n };\n\n private onChange = () => {\n this.pfChange.emit({ value: this.value });\n };\n\n /\n A textarea's value is its text content, not an attribute, so it cannot be\n * rendered as a JSX child without Stencil replacing that text node on every\n * keystroke. It is written through the DOM property instead, which is what\n * the browser itself does.\n \n Guarded on inequality: assigning the same string still moves the caret to\n * the end in some engines, which would make typing into the middle of a\n * paragraph jump the cursor away on every character.\n /\n componentDidRender() {\n const control = this.el.shadowRoot?.querySelector('textarea');\n if (control && control.value !== (this.value ?? '')) {\n control.value = this.value ?? '';\n }\n }\n\n render() {\n // IDs are scoped to this shadow root, so they can be literal -- the useId()\n // the React component needs has no counterpart here.\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=\"input\">\n {this.label}\n {this.required && (\n <span class=\"required\" aria-hidden=\"true\">\n \n </span>\n )}\n </label>\n )}\n <textarea\n id=\"input\"\n aria-label={controlAriaLabel(this.el, this.label)}\n part=\"textarea\"\n class={{ textarea: true, 'textarea--invalid': Boolean(this.error) }}\n name={this.name}\n rows={this.rows}\n placeholder={this.placeholder}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={describedBy}\n onInput={this.onInput}\n onChange={this.onChange}\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-time-picker/pf-time-picker.js CHANGED Viewed

@@ -1,5 +1,6 @@
 import { composeDescribedBy, formatTimeDisplay, formatTimeValue, hourOptions, Keys, meridiemOf, observeAnchoredPosition, padTimePart, parseTimeValue, timeRange, toHour12, toHour24, } 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";
 /**
@@ -209,10 +210,10 @@ export class PfTimePicker {
         const display = formatTimeDisplay(this.parts, this.cycle);
         const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);
         const meridiem = this.selectedMeridiem();
-        return (h(Host, { key: '8397a5200df46b5834039d4356dfa21b8ff04900' }, h("div", { key: '5b28cd916ea6fb07080b7ccb953cb46f3f50e2a1', class: "field", part: "field" }, this.label && (h("label", { key: 'dca55c09008da4d20087f89e9574332ed5750c05', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '85dc9a7dde71ff2b8a73cacffb432a006c2244ab', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: 'e0860a424c00c771a7f384f210c570707596dd42', id: "trigger", part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "aria-invalid": this.error ? 'true' : null, "aria-required": this.required ? 'true' : null, "aria-describedby": describedBy, onClick: () => {
+        return (h(Host, { key: 'c26f419605ca45c6180180ebce68bec77fe99676' }, h("div", { key: 'bf975b4f6ef429212d28be61448df62d54322e90', class: "field", part: "field" }, this.label && (h("label", { key: '80b0160476b03992991886c1e0c2f06dd1195931', class: "label", part: "label", htmlFor: "trigger" }, this.label, this.required && (h("span", { key: '5d52003ddf874d68adcaad65012197a5262fe64c', class: "required", "aria-hidden": "true" }, "*")))), h("button", { key: '842fb04fce12e559fc9f7ef541baa60c118c9f9d', id: "trigger", "aria-label": controlAriaLabel(this.el, this.label), part: "trigger", class: { trigger: true, 'trigger--invalid': Boolean(this.error) }, type: "button", disabled: this.disabled, "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "panel", "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: '03c67a53cf957fc1f3d18ae291cf6216b6fce11f', class: { value: true, 'value--placeholder': !display } }, display || this.placeholder), h("pf-icon", { key: '72f2cf8f61d3b547436edc0f9080ce141f989f46', name: "clock" })), this.description && (h("p", { key: 'b891c75c8942c32d920aaab2a82476f3ff5879ab', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '64b4eae8a178da68308e5c641ad3144b29373339', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: 'c29b038ea9d75b0ecac1f4f79b2e915e827b5859', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a time", onToggle: this.onToggle }, this.renderColumn('Hour', hourOptions(this.cycle).map((option) => ({
+            } }, h("span", { key: '2eefe098a48de552dd6c869b4696ce09960abf5e', class: { value: true, 'value--placeholder': !display } }, display || this.placeholder), h("pf-icon", { key: '881c2760be97dacb6ffd2df9e46f1c66252ff513', name: "clock" })), this.description && (h("p", { key: 'c09274524b28fa88034eba28138d0559cc0b60cf', class: "description", part: "description", id: "description" }, this.description)), this.error && (h("p", { key: '9a7ac33fc684b137684b6925cf44cb2d26c05aa0', class: "error", part: "error", id: "error" }, this.error))), h("div", { key: '1c79f18f2078b4d2ae8c2832f8e49f3a33723354', id: "panel", part: "panel", class: "panel", popover: "auto", role: "dialog", "aria-label": "Choose a time", onToggle: this.onToggle }, this.renderColumn('Hour', hourOptions(this.cycle).map((option) => ({
             key: `h-${option}`,
             label: padTimePart(option),
             selected: shownHour === option,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"pf-time-picker.js","sourceRoot":"","sources":["../../../src/components/pf-time-picker/pf-time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n composeDescribedBy,\n formatTimeDisplay,\n formatTimeValue,\n hourOptions,\n Keys,\n meridiemOf,\n observeAnchoredPosition,\n padTimePart,\n parseTimeValue,\n timeRange,\n toHour12,\n toHour24,\n type HourCycle,\n type Meridiem,\n type TimeParts,\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 Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n \n The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option 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-time-picker',\n styleUrl: 'pf-time-picker.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfTimePicker {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name. Reflected; the submission reads the attribute. /\n @Prop({ reflect: true }) name?: string;\n\n /* Canonical 24-hour `HH:mm`, or empty. /\n @Prop({ mutable: true }) value = '';\n\n /* Whether the panel is showing. Reflected for the stylesheet. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n 12- or 24-hour display. The value stays 24-hour either way.\n \n Read through `cycle` below, never directly: Stencil coerces an attribute\n * using the prop's type as written, and it cannot resolve a name it had\n * to import. Measured: with `HourCycle` imported from core,\n * `hour-cycle=\"12\"` arrives as the string `\"12\"`, so `=== 12` is\n * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n * Writing `0 \| 1` out inline is coerced, which `pf-heatmap.weekStartsOn`\n * shows; the alias is kept here because it is the shared type, and the\n * getter costs nothing.\n /\n @Prop() hourCycle: HourCycle = 24;\n\n /* Granularity of the minutes column. /\n @Prop() minuteStep = 1;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select time';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Fires when the time changes, with the canonical `HH:mm`. /\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /* Fires whenever the panel opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n private initialValue = '';\n private stopObserving?: () => void;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n componentDidRender() {\n if (this.open) this.scrollSelectedIntoView();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value \|\| null);\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showPanel();\n else this.hidePanel();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /* A reset restores the value the field started with, not an empty one. /\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n /* `hourCycle` with the attribute case coerced; see the prop's comment. /\n private get cycle(): HourCycle {\n return Number(this.hourCycle) === 12 ? 12 : 24;\n }\n\n private get panel() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private get parts(): TimeParts {\n return parseTimeValue(this.value);\n }\n\n private showPanel() {\n const panel = this.panel;\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 align: 'start',\n matchAnchorWidth: false,\n flip: true,\n onChange: ({ left, top }) => placePopover(panel, left, top),\n });\n\n this.scrollSelectedIntoView();\n // Focus the first column's selected option, so the arrows work at once.\n panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n }\n\n private hidePanel() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n const panel = this.panel;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n /\n Centres each column on its chosen option.\n \n `block: 'nearest'` would leave a column that is already scrolled roughly\n * right alone, which reads as the wrong hour being selected.\n /\n private scrollSelectedIntoView() {\n for (const option of Array.from(\n this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n )) {\n if (typeof option.scrollIntoView === 'function') {\n option.scrollIntoView({ block: 'center' });\n }\n }\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 commit(next: TimeParts) {\n const value = formatTimeValue(next);\n if (!value \|\| value === this.value) return;\n this.value = value;\n this.pfChange.emit({ value });\n }\n\n private selectHour(hour: number) {\n const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n }\n\n private selectMinute(minute: number) {\n this.commit({ hour: this.parts.hour ?? 0, minute });\n }\n\n private selectMeridiem(meridiem: Meridiem) {\n const { hour, minute } = this.parts;\n this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n }\n\n private selectedMeridiem(): Meridiem \| null {\n const { hour } = this.parts;\n return hour === null ? null : meridiemOf(hour);\n }\n\n /\n Up and down move within a column, and stop at its ends rather than\n * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n * having jumped rather than moved.\n \n The focused option is read from `shadowRoot.activeElement`, because\n * `document.activeElement` is this host: focus inside a shadow root is\n * reported as the host from the outside.\n /\n private onColumnKeyDown = (event: KeyboardEvent) => {\n if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n const column = event.currentTarget as HTMLElement;\n const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n if (index === -1) return;\n\n event.preventDefault();\n const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n };\n\n private renderColumn(\n name: string,\n options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n ) {\n return (\n <div\n class=\"column\"\n part=\"column\"\n role=\"listbox\"\n aria-label={name}\n tabindex={-1}\n onKeyDown={this.onColumnKeyDown}\n >\n {options.map((option) => (\n <button\n key={option.key}\n type=\"button\"\n part=\"option\"\n class={{ option: true, 'option--selected': option.selected }}\n role=\"option\"\n aria-selected={option.selected ? 'true' : 'false'}\n data-selected={option.selected ? 'true' : 'false'}\n onClick={option.onSelect}\n >\n {option.label}\n </button>\n ))}\n </div>\n );\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const { hour, minute } = this.parts;\n const display = formatTimeDisplay(this.parts, this.cycle);\n const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n const meridiem = this.selectedMeridiem();\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 disabled={this.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={this.open ? 'true' : 'false'}\n /* Same shadow root as the panel, so this IDREF resolves. */\n aria-controls=\"panel\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n <span class={{ value: true, 'value--placeholder': !display }}>\n {display \|\| this.placeholder}\n </span>\n <pf-icon name=\"clock\"></pf-icon>\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=\"panel\"\n part=\"panel\"\n class=\"panel\"\n popover=\"auto\"\n role=\"dialog\"\n aria-label=\"Choose a time\"\n onToggle={this.onToggle}\n >\n {this.renderColumn(\n 'Hour',\n hourOptions(this.cycle).map((option) => ({\n key: `h-${option}`,\n label: padTimePart(option),\n selected: shownHour === option,\n onSelect: () => this.selectHour(option),\n })),\n )}\n\n {this.renderColumn(\n 'Minute',\n timeRange(60, this.minuteStep).map((option) => ({\n key: `m-${option}`,\n label: padTimePart(option),\n selected: minute === option,\n onSelect: () => this.selectMinute(option),\n })),\n )}\n\n {this.cycle === 12 &&\n this.renderColumn(\n 'AM or PM',\n (['AM', 'PM'] as Meridiem[]).map((option) => ({\n key: option,\n label: option,\n selected: meridiem === option,\n onSelect: () => this.selectMeridiem(option),\n })),\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pf-time-picker.js","sourceRoot":"","sources":["../../../src/components/pf-time-picker/pf-time-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n composeDescribedBy,\n formatTimeDisplay,\n formatTimeValue,\n hourOptions,\n Keys,\n meridiemOf,\n observeAnchoredPosition,\n padTimePart,\n parseTimeValue,\n timeRange,\n toHour12,\n toHour24,\n type HourCycle,\n type Meridiem,\n type TimeParts,\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 Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\n/*\n A form-associated time field: a trigger that opens hour, minute and (on a\n * 12-hour cycle) meridiem columns in a popover.\n \n The submitted value is always canonical 24-hour `HH:mm`, whatever\n * `hour-cycle` displays. A control whose submitted value changed with its\n * display would be unusable on a server, so the cycle is a rendering choice\n * and nothing more — all of that arithmetic is core's.\n \n @part field - the wrapper around label, control and messages.\n * @part label - the label element.\n * @part trigger - the button that opens the columns.\n * @part panel - the floating panel.\n * @part column - each of the scrolling columns.\n * @part option - every option 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-time-picker',\n styleUrl: 'pf-time-picker.css',\n formAssociated: true,\n shadow: true,\n})\nexport class PfTimePicker {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n /* Submitted under this name. Reflected; the submission reads the attribute. /\n @Prop({ reflect: true }) name?: string;\n\n /* Canonical 24-hour `HH:mm`, or empty. /\n @Prop({ mutable: true }) value = '';\n\n /* Whether the panel is showing. Reflected for the stylesheet. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n 12- or 24-hour display. The value stays 24-hour either way.\n \n Read through `cycle` below, never directly: Stencil coerces an attribute\n * using the prop's type as written, and it cannot resolve a name it had\n * to import. Measured: with `HourCycle` imported from core,\n * `hour-cycle=\"12\"` arrives as the string `\"12\"`, so `=== 12` is\n * false, while `minute-step=\"15\"` — declared `number` — arrives as `15`.\n * Writing `0 \| 1` out inline is coerced, which `pf-heatmap.weekStartsOn`\n * shows; the alias is kept here because it is the shared type, and the\n * getter costs nothing.\n /\n @Prop() hourCycle: HourCycle = 24;\n\n /* Granularity of the minutes column. /\n @Prop() minuteStep = 1;\n\n @Prop() label?: string;\n\n @Prop() description?: string;\n\n @Prop() error?: string;\n\n @Prop() placeholder = 'Select time';\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Fires when the time changes, with the canonical `HH:mm`. /\n @Event() pfChange!: EventEmitter<{ value: string }>;\n\n /* Fires whenever the panel opens or closes, whoever caused it. /\n @Event() pfOpenChange!: EventEmitter<{ open: boolean }>;\n\n private initialValue = '';\n private stopObserving?: () => void;\n\n componentWillLoad() {\n this.initialValue = this.value ?? '';\n this.syncFormState();\n }\n\n componentDidRender() {\n if (this.open) this.scrollSelectedIntoView();\n }\n\n disconnectedCallback() {\n this.stopObserving?.();\n }\n\n @Watch('value')\n @Watch('error')\n @Watch('required')\n syncFormState() {\n this.internals.setFormValue(this.value \|\| null);\n applyControlValidity(this.internals, Boolean(this.value), this.required, this.error);\n }\n\n @Watch('open')\n syncOpen(next: boolean, previous: boolean) {\n if (next) this.showPanel();\n else this.hidePanel();\n if (next !== previous) this.pfOpenChange.emit({ open: next });\n }\n\n @Method()\n async show(): Promise<void> {\n if (!this.disabled) this.open = true;\n }\n\n @Method()\n async hide(): Promise<void> {\n this.open = false;\n }\n\n @Method()\n async checkValidity(): Promise<boolean> {\n return this.internals.checkValidity();\n }\n\n @Method()\n async reportValidity(): Promise<boolean> {\n return this.internals.reportValidity();\n }\n\n @Method()\n async getValidationMessage(): Promise<string> {\n return this.internals.validationMessage;\n }\n\n /* A reset restores the value the field started with, not an empty one. /\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n /* `hourCycle` with the attribute case coerced; see the prop's comment. /\n private get cycle(): HourCycle {\n return Number(this.hourCycle) === 12 ? 12 : 24;\n }\n\n private get panel() {\n return this.el.shadowRoot?.querySelector<HTMLElement>('[part=\"panel\"]') ?? null;\n }\n\n private get trigger() {\n return this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part=\"trigger\"]') ?? null;\n }\n\n private get parts(): TimeParts {\n return parseTimeValue(this.value);\n }\n\n private showPanel() {\n const panel = this.panel;\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 align: 'start',\n matchAnchorWidth: false,\n flip: true,\n onChange: ({ left, top }) => placePopover(panel, left, top),\n });\n\n this.scrollSelectedIntoView();\n // Focus the first column's selected option, so the arrows work at once.\n panel.querySelector<HTMLButtonElement>('[data-selected=\"true\"]')?.focus();\n }\n\n private hidePanel() {\n this.stopObserving?.();\n this.stopObserving = undefined;\n const panel = this.panel;\n if (panel?.matches(':popover-open')) panel.hidePopover();\n }\n\n /\n Centres each column on its chosen option.\n \n `block: 'nearest'` would leave a column that is already scrolled roughly\n * right alone, which reads as the wrong hour being selected.\n /\n private scrollSelectedIntoView() {\n for (const option of Array.from(\n this.panel?.querySelectorAll<HTMLElement>('[data-selected=\"true\"]') ?? [],\n )) {\n if (typeof option.scrollIntoView === 'function') {\n option.scrollIntoView({ block: 'center' });\n }\n }\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 commit(next: TimeParts) {\n const value = formatTimeValue(next);\n if (!value \|\| value === this.value) return;\n this.value = value;\n this.pfChange.emit({ value });\n }\n\n private selectHour(hour: number) {\n const hour24 = this.cycle === 24 ? hour : toHour24(hour, this.selectedMeridiem() ?? 'AM');\n this.commit({ hour: hour24, minute: this.parts.minute ?? 0 });\n }\n\n private selectMinute(minute: number) {\n this.commit({ hour: this.parts.hour ?? 0, minute });\n }\n\n private selectMeridiem(meridiem: Meridiem) {\n const { hour, minute } = this.parts;\n this.commit({ hour: toHour24(toHour12(hour ?? 0), meridiem), minute: minute ?? 0 });\n }\n\n private selectedMeridiem(): Meridiem \| null {\n const { hour } = this.parts;\n return hour === null ? null : meridiemOf(hour);\n }\n\n /\n Up and down move within a column, and stop at its ends rather than\n * wrapping — a wrap in a scrolling column of 60 minutes reads as the list\n * having jumped rather than moved.\n \n The focused option is read from `shadowRoot.activeElement`, because\n * `document.activeElement` is this host: focus inside a shadow root is\n * reported as the host from the outside.\n /\n private onColumnKeyDown = (event: KeyboardEvent) => {\n if (event.key !== Keys.ArrowDown && event.key !== Keys.ArrowUp) return;\n\n const column = event.currentTarget as HTMLElement;\n const options = Array.from(column.querySelectorAll<HTMLButtonElement>('button'));\n const index = options.indexOf(this.el.shadowRoot?.activeElement as HTMLButtonElement);\n if (index === -1) return;\n\n event.preventDefault();\n const next = event.key === Keys.ArrowDown ? index + 1 : index - 1;\n options[Math.min(Math.max(next, 0), options.length - 1)]?.focus();\n };\n\n private renderColumn(\n name: string,\n options: Array<{ key: string; label: string; selected: boolean; onSelect: () => void }>,\n ) {\n return (\n <div\n class=\"column\"\n part=\"column\"\n role=\"listbox\"\n aria-label={name}\n tabindex={-1}\n onKeyDown={this.onColumnKeyDown}\n >\n {options.map((option) => (\n <button\n key={option.key}\n type=\"button\"\n part=\"option\"\n class={{ option: true, 'option--selected': option.selected }}\n role=\"option\"\n aria-selected={option.selected ? 'true' : 'false'}\n data-selected={option.selected ? 'true' : 'false'}\n onClick={option.onSelect}\n >\n {option.label}\n </button>\n ))}\n </div>\n );\n }\n\n render() {\n const describedBy = composeDescribedBy(\n this.description && 'description',\n this.error && 'error',\n );\n const { hour, minute } = this.parts;\n const display = formatTimeDisplay(this.parts, this.cycle);\n const shownHour = hour === null ? null : this.cycle === 24 ? hour : toHour12(hour);\n const meridiem = this.selectedMeridiem();\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 disabled={this.disabled}\n aria-haspopup=\"dialog\"\n aria-expanded={this.open ? 'true' : 'false'}\n /* Same shadow root as the panel, so this IDREF resolves. */\n aria-controls=\"panel\"\n aria-invalid={this.error ? 'true' : null}\n aria-required={this.required ? 'true' : null}\n aria-describedby={describedBy}\n onClick={() => {\n if (!this.disabled) this.open = !this.open;\n }}\n >\n <span class={{ value: true, 'value--placeholder': !display }}>\n {display \|\| this.placeholder}\n </span>\n <pf-icon name=\"clock\"></pf-icon>\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=\"panel\"\n part=\"panel\"\n class=\"panel\"\n popover=\"auto\"\n role=\"dialog\"\n aria-label=\"Choose a time\"\n onToggle={this.onToggle}\n >\n {this.renderColumn(\n 'Hour',\n hourOptions(this.cycle).map((option) => ({\n key: `h-${option}`,\n label: padTimePart(option),\n selected: shownHour === option,\n onSelect: () => this.selectHour(option),\n })),\n )}\n\n {this.renderColumn(\n 'Minute',\n timeRange(60, this.minuteStep).map((option) => ({\n key: `m-${option}`,\n label: padTimePart(option),\n selected: minute === option,\n onSelect: () => this.selectMinute(option),\n })),\n )}\n\n {this.cycle === 12 &&\n this.renderColumn(\n 'AM or PM',\n (['AM', 'PM'] as Meridiem[]).map((option) => ({\n key: option,\n label: option,\n selected: meridiem === option,\n onSelect: () => this.selectMeridiem(option),\n })),\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

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

@@ -66,7 +66,7 @@ export class PfTimelineItem {
                     "references": {
                         "PfTimelineTone": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-timeline-item/pf-timeline-item.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-timeline-item/pf-timeline-item.tsx",
                             "id": "src/components/pf-timeline-item/pf-timeline-item.tsx::PfTimelineTone"
                         }
                     }

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

@@ -116,7 +116,7 @@ export class PfToaster {
                     "references": {
                         "PfToasterPlacement": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
                             "id": "src/components/pf-toaster/pf-toaster.tsx::PfToasterPlacement"
                         }
                     }
@@ -195,7 +195,7 @@ export class PfToaster {
                         },
                         "PfToastOptions": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toaster/pf-toaster.tsx",
                             "id": "src/components/pf-toaster/pf-toaster.tsx::PfToastOptions"
                         }
                     },

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

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

package/dist/collection/components/pf-toolbar-separator/pf-toolbar-separator.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class PfToolbarSeparator {
                     "references": {
                         "PfToolbarSeparatorOrientation": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-toolbar-separator/pf-toolbar-separator.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-toolbar-separator/pf-toolbar-separator.tsx",
                             "id": "src/components/pf-toolbar-separator/pf-toolbar-separator.tsx::PfToolbarSeparatorOrientation"
                         }
                     }

package/dist/collection/components/pf-utility-button/pf-utility-button.js CHANGED Viewed

@@ -71,7 +71,7 @@ export class PfUtilityButton {
                     "references": {
                         "PfUtilityButtonVariant": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-utility-button/pf-utility-button.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-utility-button/pf-utility-button.tsx",
                             "id": "src/components/pf-utility-button/pf-utility-button.tsx::PfUtilityButtonVariant"
                         }
                     }
@@ -97,7 +97,7 @@ export class PfUtilityButton {
                     "references": {
                         "PfUtilityButtonSize": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-utility-button/pf-utility-button.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-utility-button/pf-utility-button.tsx",
                             "id": "src/components/pf-utility-button/pf-utility-button.tsx::PfUtilityButtonSize"
                         }
                     }

package/dist/collection/components/pf-video-player/pf-video-player.js CHANGED Viewed

@@ -114,7 +114,7 @@ export class PfVideoPlayer {
                     "references": {
                         "PfVideoSource": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-video-player/pf-video-player.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-video-player/pf-video-player.tsx",
                             "id": "src/components/pf-video-player/pf-video-player.tsx::PfVideoSource"
                         }
                     }
@@ -138,7 +138,7 @@ export class PfVideoPlayer {
                     "references": {
                         "PfVideoTrack": {
                             "location": "local",
-                            "path": "/Users/lelandrangel/Development/lelandrangel.com/pitchfork-ui/packages/elements/src/components/pf-video-player/pf-video-player.tsx",
+                            "path": "/home/runner/work/pitchfork-ui/pitchfork-ui/packages/elements/src/components/pf-video-player/pf-video-player.tsx",
                             "id": "src/components/pf-video-player/pf-video-player.tsx::PfVideoTrack"
                         }
                     }

package/dist/collection/control-label.js ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * How a form control here gets an accessible name when it has no visible one.
+ *
+ * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only
+ * this layer has.
+ *
+ * The React components extend `InputHTMLAttributes`, so
+ * `<Input aria-label="Search" />` lands the attribute on the real `<input>`
+ * and names it. An element cannot do that. `aria-label` on the host names the
+ * **host**, and the host is not the control -- the `<input>` lives in the
+ * shadow root with nothing pointing at it, so a consumer who writes the same
+ * thing gets a control with no accessible name at all and no warning. Measured
+ * against Chromium's accessibility tree: the host reports the name and the
+ * textbox inside it reports none.
+ *
+ * `aria-labelledby` has no answer either, for the rule this library keeps
+ * running into: an IDREF cannot point into a shadow root. So the text is
+ * copied across, which is what `pf-tooltip` does for its trigger's
+ * description and for the same reason.
+ *
+ * A visible `label` wins, because it is both the name and a `for` target in
+ * the control's own root -- the kind of reference that does resolve.
+ */
+export function controlAriaLabel(host, label) {
+    if (label)
+        return null;
+    const copied = host.getAttribute('aria-label');
+    return copied && copied.trim().length > 0 ? copied : null;
+}
+//# sourceMappingURL=control-label.js.map

package/dist/collection/control-label.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"control-label.js","sourceRoot":"","sources":["../src/control-label.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,UAAU,gBAAgB,CAAC,IAAiB,EAAE,KAAyB;IAC3E,IAAI,KAAK;QAAE,OAAO,IAAI,CAAC;IACvB,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;IAC/C,OAAO,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;AAC5D,CAAC","sourcesContent":["/**\n * How a form control here gets an accessible name when it has no visible one.\n *\n * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only\n * this layer has.\n *\n * The React components extend `InputHTMLAttributes`, so\n * `<Input aria-label=\"Search\" />` lands the attribute on the real `<input>`\n * and names it. An element cannot do that. `aria-label` on the host names the\n * **host**, and the host is not the control -- the `<input>` lives in the\n * shadow root with nothing pointing at it, so a consumer who writes the same\n * thing gets a control with no accessible name at all and no warning. Measured\n * against Chromium's accessibility tree: the host reports the name and the\n * textbox inside it reports none.\n *\n * `aria-labelledby` has no answer either, for the rule this library keeps\n * running into: an IDREF cannot point into a shadow root. So the text is\n * copied across, which is what `pf-tooltip` does for its trigger's\n * description and for the same reason.\n *\n * A visible `label` wins, because it is both the name and a `for` target in\n * the control's own root -- the kind of reference that does resolve.\n */\nexport function controlAriaLabel(host: HTMLElement, label: string | undefined): string | null {\n if (label) return null;\n const copied = host.getAttribute('aria-label');\n return copied && copied.trim().length > 0 ? copied : null;\n}\n"]}

package/dist/components/p-Cy_kHPeC.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function n(n,l){if(l)return null;const r=n.getAttribute("aria-label");return r&&r.trim().length>0?r:null}export{n as c};
2	+ //# sourceMappingURL=p-Cy_kHPeC.js.map

package/dist/components/p-Cy_kHPeC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["controlAriaLabel","host","label","copied","getAttribute","trim","length"],"sources":["src/control-label.ts"],"sourcesContent":["/**\n * How a form control here gets an accessible name when it has no visible one.\n *\n * Not in `@pitchfork-ui/core`: it is about the shadow boundary, which only\n * this layer has.\n *\n * The React components extend `InputHTMLAttributes`, so\n * `<Input aria-label=\"Search\" />` lands the attribute on the real `<input>`\n * and names it. An element cannot do that. `aria-label` on the host names the\n * **host**, and the host is not the control -- the `<input>` lives in the\n * shadow root with nothing pointing at it, so a consumer who writes the same\n * thing gets a control with no accessible name at all and no warning. Measured\n * against Chromium's accessibility tree: the host reports the name and the\n * textbox inside it reports none.\n *\n * `aria-labelledby` has no answer either, for the rule this library keeps\n * running into: an IDREF cannot point into a shadow root. So the text is\n * copied across, which is what `pf-tooltip` does for its trigger's\n * description and for the same reason.\n *\n * A visible `label` wins, because it is both the name and a `for` target in\n * the control's own root -- the kind of reference that does resolve.\n */\nexport function controlAriaLabel(host: HTMLElement, label: string | undefined): string | null {\n if (label) return null;\n const copied = host.getAttribute('aria-label');\n return copied && copied.trim().length > 0 ? copied : null;\n}\n"],"mappings":"AAuBM,SAAUA,EAAiBC,EAAmBC,GAClD,GAAIA,EAAO,OAAO,KAClB,MAAMC,EAASF,EAAKG,aAAa,cACjC,OAAOD,GAAUA,EAAOE,OAAOC,OAAS,EAAIH,EAAS,IACvD,Q","ignoreList":[]}

package/dist/components/pf-checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{t as e,p as t,H as r,c as i,h as a,a as s}from"./index.js";import{a as o}from"./p-Cr6IXrUk.js";const c=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;const n=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);o(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return a(s,{key:"87e808069908240f3507903e680a2ed25e963fde"},a("div",{key:"56e201259f99ecf8da235b962a42ed65080f2f68",class:"field",part:"field"},a("input",{key:"8efc240bd3931bcdf117e529ff4fb7e5f8e544d5",id:"input",part:"input",class:"input",type:"checkbox",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&a("label",{key:"8b098a6fd3271d1353447f53b4b06099d7044169",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&a("p",{key:"76ba7559865ec18ba77ac50677df53a6459e6989",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}static get style(){return c()}},[593,"pf-checkbox",{name:[513],checked:[1540],value:[1],label:[1],error:[1],required:[516],disabled:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-checkbox"];t.forEach((t=>{switch(t){case"pf-checkbox":if(!customElements.get(e(t))){customElements.define(e(t),n)}break}}))}l();const d=n;const h=l;export{d as PfCheckbox,h as defineCustomElement};
+import{t as e,p as t,H as r,c as i,h as a,a as s}from"./index.js";import{a as c}from"./p-Cr6IXrUk.js";import{c as o}from"./p-Cy_kHPeC.js";const n=()=>`:host{display:inline-block}:host([hidden]){display:none}.field{align-items:center;display:inline-flex;gap:var(--space-2)}.input{appearance:none;background:var(--pf-checkbox-bg);border:1px solid var(--pf-checkbox-border);border-radius:var(--pf-checkbox-radius, var(--radius-sm));box-sizing:border-box;cursor:pointer;display:inline-block;flex-shrink:0;height:18px;margin:0;position:relative;width:18px}.input:checked{background:var(--pf-checkbox-checked-bg);border-color:var(--pf-checkbox-border)}.input::after{border:solid var(--pf-checkbox-check-color);border-width:0 2px 2px 0;content:'';height:9px;left:5px;opacity:0;position:absolute;top:2px;transform:rotate(45deg);width:5px}.input:checked::after{opacity:1}.input:focus-visible{box-shadow:var(--pf-checkbox-focus-ring, var(--pf-focus-ring));outline:none}.input:disabled{cursor:not-allowed;opacity:0.55}.input:disabled+.label{cursor:not-allowed;opacity:0.65}.label{color:var(--pf-checkbox-label-text);font-size:var(--font-size-md)}.error{color:var(--pf-checkbox-field-error, var(--pf-field-error));font-size:var(--font-size-sm);margin:var(--space-1) 0 0}`;const d=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=i(this,"pfChange");this.internals=this.attachInternals()}get el(){return this}internals;name;checked=false;value="on";label;error;required=false;disabled=false;pfChange;initialChecked=false;componentWillLoad(){this.initialChecked=this.checked;this.syncFormState()}syncFormState(){this.internals.setFormValue(this.checked?this.value:null);c(this.internals,this.checked,this.required,this.error)}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.checked=this.initialChecked}onChange=e=>{this.checked=e.target.checked;this.pfChange.emit({checked:this.checked,value:this.value})};render(){return a(s,{key:"f0888c00b688aef2c90deb60a7496971c2e52ac3"},a("div",{key:"25dbafc87f7c597cc055ade975033bab23ed67d9",class:"field",part:"field"},a("input",{key:"2d6f97d80d2686ad13ddac12bf70d12828611ad8",id:"input","aria-label":o(this.el,this.label),part:"input",class:"input",type:"checkbox",name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,"aria-invalid":this.error?"true":null,"aria-describedby":this.error?"error":null,onChange:this.onChange}),this.label&&a("label",{key:"0c6427fb3168226dd5c69e06e5769efab4cc0d5e",class:"label",part:"label",htmlFor:"input"},this.label)),this.error&&a("p",{key:"401852018ce3b0c0a856e669d96c33d185a5b730",class:"error",part:"error",id:"error"},this.error))}static get delegatesFocus(){return true}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}}static get style(){return n()}},[593,"pf-checkbox",{name:[513],checked:[1540],value:[1],label:[1],error:[1],required:[516],disabled:[516],checkValidity:[64],reportValidity:[64],getValidationMessage:[64]},undefined,{checked:[{syncFormState:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],value:[{syncFormState:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["pf-checkbox"];t.forEach((t=>{switch(t){case"pf-checkbox":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}l();const h=d;const p=l;export{h as PfCheckbox,p as defineCustomElement};
 //# sourceMappingURL=pf-checkbox.js.map

package/dist/components/pf-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["pfCheckboxCss","PfCheckbox","__stencil_proxyCustomElement","HTMLElement","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","type","htmlFor"],"sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n align-items: center;\n display: inline-flex;\n gap: var(--space-2);\n}\n\n.input {\n appearance: none;\n background: var(--pf-checkbox-bg);\n border: 1px solid var(--pf-checkbox-border);\n border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n box-sizing: border-box;\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: 18px;\n margin: 0;\n position: relative;\n width: 18px;\n}\n\n.input:checked {\n background: var(--pf-checkbox-checked-bg);\n border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. /\n.input::after {\n border: solid var(--pf-checkbox-check-color);\n border-width: 0 2px 2px 0;\n content: '';\n height: 9px;\n left: 5px;\n opacity: 0;\n position: absolute;\n top: 2px;\n transform: rotate(45deg);\n width: 5px;\n}\n\n.input:checked::after {\n opacity: 1;\n}\n\n.input:focus-visible {\n box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n outline: none;\n}\n\n.input:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.input:disabled + .label {\n cursor: not-allowed;\n opacity: 0.65;\n}\n\n.label {\n color: var(--pf-checkbox-label-text);\n font-size: var(--font-size-md);\n}\n\n.error {\n color: var(--pf-checkbox-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: var(--space-1) 0 0;\n}\n","import {\n AttachInternals,\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\n\n/\n A form-associated checkbox.\n \n @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n /\n@Component({\n tag: 'pf-checkbox',\n styleUrl: 'pf-checkbox.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name.\n \n Reflected, because a form-associated custom element takes its submission\n * name from the `name` content attribute -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* Whether the box is ticked. Reflected so the stylesheet can select on it. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n What is submitted when ticked. Mirrors the native attribute, whose default\n * is also `on` — a checkbox with no value still submits something.\n /\n @Prop() value = 'on';\n\n /* Visible label, rendered in the same root so `for` actually associates. /\n @Prop() label?: string;\n\n /* Error message. Its presence is what marks the control invalid. /\n @Prop() error?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Fires when the user ticks or unticks the box. /\n @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n /* The state a form reset restores, which is the initial attribute. /\n private initialChecked = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormState();\n }\n\n @Watch('checked')\n @Watch('error')\n @Watch('required')\n @Watch('value')\n syncFormState() {\n /\n * `null`, not an empty string, when unticked: an unchecked checkbox is\n * absent from the submission entirely, rather than present and empty.\n * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n * on, and it is what a native checkbox does.\n /\n this.internals.setFormValue(this.checked ? this.value : null);\n applyControlValidity(this.internals, this.checked, 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 /\n A reset restores the initial state, not `false` — a native\n * `<input type=checkbox checked>` comes back ticked.\n */\n formResetCallback() {\n this.checked = this.initialChecked;\n }\n\n private onChange = (event: Event) => {\n this.checked = (event.target as HTMLInputElement).checked;\n this.pfChange.emit({ checked: this.checked, value: this.value });\n };\n\n render() {\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n <input\n id=\"input\"\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={this.error ? 'error' : null}\n onChange={this.onChange}\n />\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n </label>\n )}\n </div>\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"~~sGAAA~~,MAAMA,EAAgB,IAAM,slC,~~MC2BfC~~,EAAUC,EAAA,MAAAD,UAAAE,E,~~wJACFC~~,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,~~QACHD~~,KAAK,QACLD,MAAM,~~QACNG~~,KAAK,~~WACL9B~~,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,~~QAAQG~~,QAAQ,~~SACvCrB~~,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}
1	+ {"version":3,"names":["pfCheckboxCss","PfCheckbox","__stencil_proxyCustomElement","HTMLElement","internals","name","checked","value","label","error","required","disabled","pfChange","initialChecked","componentWillLoad","this","syncFormState","setFormValue","applyControlValidity","checkValidity","reportValidity","getValidationMessage","validationMessage","formResetCallback","onChange","event","target","emit","render","h","Host","key","class","part","id","controlAriaLabel","el","type","htmlFor"],"sources":["src/components/pf-checkbox/pf-checkbox.css?tag=pf-checkbox&encapsulation=shadow","src/components/pf-checkbox/pf-checkbox.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n.field {\n align-items: center;\n display: inline-flex;\n gap: var(--space-2);\n}\n\n.input {\n appearance: none;\n background: var(--pf-checkbox-bg);\n border: 1px solid var(--pf-checkbox-border);\n border-radius: var(--pf-checkbox-radius, var(--radius-sm));\n box-sizing: border-box;\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: 18px;\n margin: 0;\n position: relative;\n width: 18px;\n}\n\n.input:checked {\n background: var(--pf-checkbox-checked-bg);\n border-color: var(--pf-checkbox-border);\n}\n\n/* The tick: two borders of a rotated box. /\n.input::after {\n border: solid var(--pf-checkbox-check-color);\n border-width: 0 2px 2px 0;\n content: '';\n height: 9px;\n left: 5px;\n opacity: 0;\n position: absolute;\n top: 2px;\n transform: rotate(45deg);\n width: 5px;\n}\n\n.input:checked::after {\n opacity: 1;\n}\n\n.input:focus-visible {\n box-shadow: var(--pf-checkbox-focus-ring, var(--pf-focus-ring));\n outline: none;\n}\n\n.input:disabled {\n cursor: not-allowed;\n opacity: 0.55;\n}\n\n.input:disabled + .label {\n cursor: not-allowed;\n opacity: 0.65;\n}\n\n.label {\n color: var(--pf-checkbox-label-text);\n font-size: var(--font-size-md);\n}\n\n.error {\n color: var(--pf-checkbox-field-error, var(--pf-field-error));\n font-size: var(--font-size-sm);\n margin: var(--space-1) 0 0;\n}\n","import {\n AttachInternals,\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\n\nimport { applyControlValidity } from '../../form-validity';\nimport { controlAriaLabel } from '../../control-label';\n\n/\n A form-associated checkbox.\n \n @part field - the wrapper around control and label.\n * @part input - the native checkbox.\n * @part label - the label element.\n /\n@Component({\n tag: 'pf-checkbox',\n styleUrl: 'pf-checkbox.css',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n})\nexport class PfCheckbox {\n @Element() el!: HTMLElement;\n\n @AttachInternals() internals!: ElementInternals;\n\n /\n Submitted under this name.\n \n Reflected, because a form-associated custom element takes its submission\n * name from the `name` content attribute -- not from this property. A\n * framework wrapper that sets properties rather than attributes (the\n * generated React bindings do) would otherwise leave the control nameless\n * and absent from the submission, with every other sign of working.\n /\n @Prop({ reflect: true }) name?: string;\n\n /* Whether the box is ticked. Reflected so the stylesheet can select on it. /\n @Prop({ mutable: true, reflect: true }) checked = false;\n\n /\n What is submitted when ticked. Mirrors the native attribute, whose default\n * is also `on` — a checkbox with no value still submits something.\n /\n @Prop() value = 'on';\n\n /* Visible label, rendered in the same root so `for` actually associates. /\n @Prop() label?: string;\n\n /* Error message. Its presence is what marks the control invalid. /\n @Prop() error?: string;\n\n @Prop({ reflect: true }) required = false;\n\n @Prop({ reflect: true }) disabled = false;\n\n /* Fires when the user ticks or unticks the box. /\n @Event() pfChange!: EventEmitter<{ checked: boolean; value: string }>;\n\n /* The state a form reset restores, which is the initial attribute. /\n private initialChecked = false;\n\n componentWillLoad() {\n this.initialChecked = this.checked;\n this.syncFormState();\n }\n\n @Watch('checked')\n @Watch('error')\n @Watch('required')\n @Watch('value')\n syncFormState() {\n /\n * `null`, not an empty string, when unticked: an unchecked checkbox is\n * absent from the submission entirely, rather than present and empty.\n * That is what a server distinguishing \"unticked\" from \"not sent\" relies\n * on, and it is what a native checkbox does.\n /\n this.internals.setFormValue(this.checked ? this.value : null);\n applyControlValidity(this.internals, this.checked, 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 /\n A reset restores the initial state, not `false` — a native\n * `<input type=checkbox checked>` comes back ticked.\n */\n formResetCallback() {\n this.checked = this.initialChecked;\n }\n\n private onChange = (event: Event) => {\n this.checked = (event.target as HTMLInputElement).checked;\n this.pfChange.emit({ checked: this.checked, value: this.value });\n };\n\n render() {\n return (\n <Host>\n <div class=\"field\" part=\"field\">\n <input\n id=\"input\"\n aria-label={controlAriaLabel(this.el, this.label)}\n part=\"input\"\n class=\"input\"\n type=\"checkbox\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n required={this.required}\n disabled={this.disabled}\n aria-invalid={this.error ? 'true' : null}\n aria-describedby={this.error ? 'error' : null}\n onChange={this.onChange}\n />\n {this.label && (\n <label class=\"label\" part=\"label\" htmlFor=\"input\">\n {this.label}\n </label>\n )}\n </div>\n {this.error && (\n <p class=\"error\" part=\"error\" id=\"error\">\n {this.error}\n </p>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"0IAAA,MAAMA,EAAgB,IAAM,slC,MC6BfC,EAAUC,EAAA,MAAAD,UAAAE,E,6KAGFC,UAWMC,KAGeC,QAAU,MAM1CC,MAAQ,KAGRC,MAGAC,MAEiBC,SAAW,MAEXC,SAAW,MAG3BC,SAGDC,eAAiB,MAEzB,iBAAAC,GACEC,KAAKF,eAAiBE,KAAKT,QAC3BS,KAAKC,e,CAOP,aAAAA,GAOED,KAAKX,UAAUa,aAAaF,KAAKT,QAAUS,KAAKR,MAAQ,MACxDW,EAAqBH,KAAKX,UAAWW,KAAKT,QAASS,KAAKL,SAAUK,KAAKN,M,CAKzE,mBAAMU,GACJ,OAAOJ,KAAKX,UAAUe,e,CAKxB,oBAAMC,GACJ,OAAOL,KAAKX,UAAUgB,gB,CAKxB,0BAAMC,GACJ,OAAON,KAAKX,UAAUkB,iB,CAOxB,iBAAAC,GACER,KAAKT,QAAUS,KAAKF,c,CAGdW,SAAYC,IAClBV,KAAKT,QAAWmB,EAAMC,OAA4BpB,QAClDS,KAAKH,SAASe,KAAK,CAAErB,QAASS,KAAKT,QAASC,MAAOQ,KAAKR,OAAQ,EAGlE,MAAAqB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QAAQC,KAAK,SACtBJ,EAAA,SAAAE,IAAA,2CACEG,GAAG,QAAO,aACEC,EAAiBpB,KAAKqB,GAAIrB,KAAKP,OAC3CyB,KAAK,QACLD,MAAM,QACNK,KAAK,WACLhC,KAAMU,KAAKV,KACXE,MAAOQ,KAAKR,MACZD,QAASS,KAAKT,QACdI,SAAUK,KAAKL,SACfC,SAAUI,KAAKJ,SAAQ,eACTI,KAAKN,MAAQ,OAAS,KAAI,mBACtBM,KAAKN,MAAQ,QAAU,KACzCe,SAAUT,KAAKS,WAEhBT,KAAKP,OACJqB,EAAA,SAAAE,IAAA,2CAAOC,MAAM,QAAQC,KAAK,QAAQK,QAAQ,SACvCvB,KAAKP,QAIXO,KAAKN,OACJoB,EAAA,KAAAE,IAAA,2CAAGC,MAAM,QAAQC,KAAK,QAAQC,GAAG,SAC9BnB,KAAKN,O","ignoreList":[]}

package/dist/components/pf-combobox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{t as e,p as t,H as i,c as o,h as s,a as r}from"./index.js";import{o as a,p as n}from"./p-CC7AyfOt.js";import{c}from"./p-DfpCerXM.js";import{q as l,m as h}from"./p-Dkd7BUB5.js";import{K as d}from"./p-g4FlTDZx.js";import{g as p,r as f}from"./p-CAz7-p8y.js";import{a as b}from"./p-Cr6IXrUk.js";import{d as u}from"./p-CkFjPRTe.js";const m=()=>`:host{display:block;--pf-option-text:var(--pf-combobox-text);--pf-option-text-disabled:var(--pf-combobox-placeholder);--pf-option-active-bg:var(--pf-combobox-option-active-bg);--pf-option-active-text:var(--pf-combobox-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-combobox-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-combobox-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-combobox-bg);border:1px solid var(--pf-combobox-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding-inline-end:var(--space-2)}.control:focus-within{border-color:var(--pf-combobox-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-combobox-invalid-border)}.input{background:none;border:0;color:var(--pf-combobox-text);flex:1;font-family:inherit;font-size:var(--font-size-sm);min-width:0;outline:none;padding:var(--space-2) var(--space-3)}.input::placeholder{color:var(--pf-combobox-placeholder)}.input:disabled{cursor:not-allowed;opacity:0.6}.clear,.chevron{align-items:center;color:var(--pf-combobox-placeholder);display:inline-flex;flex-shrink:0;justify-content:center}.clear{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-1)}.clear:hover{color:var(--pf-combobox-text)}.chevron{transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-combobox-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-combobox-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-combobox-menu-bg);border:1px solid var(--pf-combobox-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 320px);overflow-y:auto;padding:var(--space-1)}.listbox:popover-open{animation:pf-combobox-in var(--pf-transition-enter)}@keyframes pf-combobox-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}.empty{color:var(--pf-combobox-placeholder);font-size:var(--font-size-sm);margin:0;padding:var(--space-3);text-align:center}`;const v={[d.ArrowDown]:"next",[d.ArrowUp]:"previous",[d.Home]:"first",[d.End]:"last"};const y=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=o(this,"pfChange");this.pfOpenChange=o(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Search…";emptyMessage="No matches";required=false;disabled=false;clearable=true;clearLabel="Clear";pfChange;pfOpenChange;query="";matchCount=0;initialValue="";stopObserving;activeOption=null;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.query=this.selectedLabel();this.applyQuery()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);b(this.internals,Boolean(this.value),this.required,this.error)}syncSelection(){for(const e of this.options()){e.selected=this.optionValue(e)===this.value&&this.value!==""}this.query=this.selectedLabel();this.applyQuery()}syncOpen(e,t){if(e)this.showListbox();else this.hideListbox();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.query=this.selectedLabel();this.applyQuery()}async refresh(){this.syncSelection()}onSlotChange=()=>{this.syncSelection()};options(){return Array.from(this.el.querySelectorAll("pf-option"))}visible(){return this.options().filter((e=>!e.hasAttribute("hidden")))}optionValue(e){return e.value??e.getAttribute("value")??""}selectedLabel(){const e=this.options().find((e=>this.optionValue(e)===this.value));return this.value&&e?e.textContent?.trim()??"":""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get input(){return this.el.shadowRoot?.querySelector('[part="input"]')??null}get control(){return this.el.shadowRoot?.querySelector('[part="control"]')??null}applyQuery(){const e=l(this.query,this.selectedLabel());const t=this.options();for(const i of t){const t=e||h({label:i.textContent?.trim()??""},this.query);if(t)i.removeAttribute("hidden");else i.setAttribute("hidden","")}const i=this.visible();this.matchCount=i.length;const o=i.find((e=>!e.hasAttribute("disabled")))??null;if(!this.activeOption||this.activeOption.hasAttribute("hidden"))this.setActive(o)}showListbox(){const e=this.listbox;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.control,getFloating:()=>e,matchAnchorWidth:true,flip:true,onChange:({left:t,top:i,width:o,minWidth:s})=>{n(e,t,i);if(o!==undefined)e.style.width=`${o}px`;if(s!==undefined)e.style.minWidth=`${s}px`}});this.applyQuery()}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const e=this.listbox;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t){this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}};setActive(e){for(const t of this.options()){if(t!==e)t.active=false}if(e)e.active=true;this.activeOption=e;this.syncActiveDescendant();if(e&&typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const e=this.input;if(!e||!("ariaActiveDescendantElement"in e))return;e.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(e){if(e.hasAttribute("disabled"))return;const t=this.optionValue(e);this.open=false;if(t!==this.value){this.value=t;this.pfChange.emit({value:t})}this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}handleOptionSelect(e){e.stopPropagation();if(this.disabled)return;const t=this.options().find((t=>this.optionValue(t)===e.detail.value));if(t)this.commit(t)}move(e){const t=this.visible();const i=p(t,(e=>e.hasAttribute("disabled")));const o=this.activeOption?t.indexOf(this.activeOption):-1;const s=f(e,i,o);if(s!==-1)this.setActive(t[s]??null)}onInput=e=>{this.query=e.target.value;this.applyQuery();if(!this.open)this.open=true};clear=()=>{this.query="";if(this.value!==""){this.value="";this.pfChange.emit({value:""})}this.applyQuery();this.open=true;this.input?.focus()};onKeyDown=e=>{if(this.disabled)return;const t=v[e.key];if(t){e.preventDefault();if(!this.open)this.open=true;else this.move(t);return}if(e.key===d.Enter&&this.open&&this.activeOption){e.preventDefault();this.commit(this.activeOption)}};render(){const e=c(this.description&&"description",this.error&&"error");const t=this.clearable&&!this.disabled&&(this.query!==""||this.value!=="");return s(r,{key:"a8de74e291d2b9b200ecd25aa173a0b5d3b7b626"},s("div",{key:"90e0c5924b6bf0bc06cae69fa69d03d8a7839991",class:"field",part:"field"},this.label&&s("label",{key:"40c0f27b7320895673dfe5a222e5c9a9c177342e",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&s("span",{key:"dd07ad670d93b1aff47c4ad879d021e5c01b4744",class:"required","aria-hidden":"true"},"*")),s("div",{key:"125a49726f50d094cd5b07055dac55a18ac5f730",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},s("input",{key:"f5af0e210b95aaf50f6aa26fea9923ecce23a9d9",id:"input",part:"input",class:"input",type:"text",role:"combobox",autocomplete:"off",disabled:this.disabled,required:this.required,placeholder:this.placeholder,value:this.query,"aria-autocomplete":"list","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onKeyDown:this.onKeyDown,onClick:()=>{if(!this.disabled)this.open=true}}),t&&s("button",{key:"3de0deb6fa499c4f09a8135e8f437a0b8d800e2b",class:"clear",part:"clear",type:"button","aria-label":this.clearLabel,tabindex:-1,onMouseDown:e=>e.preventDefault(),onClick:this.clear},s("pf-icon",{key:"4690b5b9889c4fa42d9a517c44881dcc39a3ce6a",name:"circle-xmark"})),s("span",{key:"91d963abe51964b40952c20662cda34fe6bc8422",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"26d800a4907e4c043771cf88939a452140656cc2",name:"chevron-down"}))),this.description&&s("p",{key:"25aa3122181742855db9407918564609e5229b9d",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"383cea1cb15a3d5007fffae49fa9ebe713d4c46e",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"56960b3bba88d5699a8dc813050bdb726bafa905",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,onToggle:this.onToggle},s("slot",{key:"746f17fc39239ee6d577fb1bd1a0e0ac8165081d",onSlotchange:this.onSlotChange}),this.matchCount===0&&s("p",{key:"58b33af6e2edd8f4b64d0f9ee7fc62004f219cf4",class:"empty",part:"empty"},this.emptyMessage)))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return m()}},[833,"pf-combobox",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],emptyMessage:[1,"empty-message"],required:[516],disabled:[516],clearable:[4],clearLabel:[1,"clear-label"],query:[32],matchCount:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"]],{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["pf-combobox","pf-icon"];t.forEach((t=>{switch(t){case"pf-combobox":if(!customElements.get(e(t))){customElements.define(e(t),y)}break;case"pf-icon":if(!customElements.get(e(t))){u()}break}}))}x();const g=y;const k=x;export{g as PfCombobox,k as defineCustomElement};
+import{t as e,p as t,H as i,c as o,h as s,a as r}from"./index.js";import{o as a,p as n}from"./p-CC7AyfOt.js";import{c}from"./p-DfpCerXM.js";import{q as l,m as h}from"./p-Dkd7BUB5.js";import{K as d}from"./p-g4FlTDZx.js";import{g as p,r as f}from"./p-CAz7-p8y.js";import{a as b}from"./p-Cr6IXrUk.js";import{c as u}from"./p-Cy_kHPeC.js";import{d as m}from"./p-CkFjPRTe.js";const v=()=>`:host{display:block;--pf-option-text:var(--pf-combobox-text);--pf-option-text-disabled:var(--pf-combobox-placeholder);--pf-option-active-bg:var(--pf-combobox-option-active-bg);--pf-option-active-text:var(--pf-combobox-option-active-text)}:host([hidden]){display:none}.field{display:grid;gap:var(--space-1)}.label{color:var(--pf-combobox-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.required{color:var(--pf-combobox-invalid-border);margin-inline-start:var(--space-1)}.control{align-items:center;background:var(--pf-combobox-bg);border:1px solid var(--pf-combobox-border);border-radius:var(--radius-md);display:flex;gap:var(--space-1);padding-inline-end:var(--space-2)}.control:focus-within{border-color:var(--pf-combobox-focus-border);box-shadow:var(--pf-focus-ring)}.control--invalid{border-color:var(--pf-combobox-invalid-border)}.input{background:none;border:0;color:var(--pf-combobox-text);flex:1;font-family:inherit;font-size:var(--font-size-sm);min-width:0;outline:none;padding:var(--space-2) var(--space-3)}.input::placeholder{color:var(--pf-combobox-placeholder)}.input:disabled{cursor:not-allowed;opacity:0.6}.clear,.chevron{align-items:center;color:var(--pf-combobox-placeholder);display:inline-flex;flex-shrink:0;justify-content:center}.clear{background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;padding:var(--space-1)}.clear:hover{color:var(--pf-combobox-text)}.chevron{transition:transform var(--pf-transition-fast)}:host([open]) .chevron{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.chevron{transition:none}}.description{color:var(--pf-combobox-placeholder);font-size:var(--font-size-xs);margin:0}.error{color:var(--pf-combobox-invalid-border);font-size:var(--font-size-xs);margin:0}.listbox{inset:auto;margin:0;background:var(--pf-combobox-menu-bg);border:1px solid var(--pf-combobox-menu-border);border-radius:var(--radius-md);box-shadow:var(--pf-elevation-popover-shadow);max-height:min(60vh, 320px);overflow-y:auto;padding:var(--space-1)}.listbox:popover-open{animation:pf-combobox-in var(--pf-transition-enter)}@keyframes pf-combobox-in{from{opacity:0;transform:translateY(-4px)}}@media (prefers-reduced-motion: reduce){.listbox:popover-open{animation:none}}.empty{color:var(--pf-combobox-placeholder);font-size:var(--font-size-sm);margin:0;padding:var(--space-3);text-align:center}`;const y={[d.ArrowDown]:"next",[d.ArrowUp]:"previous",[d.Home]:"first",[d.End]:"last"};const x=t(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.pfChange=o(this,"pfChange");this.pfOpenChange=o(this,"pfOpenChange");this.internals=this.attachInternals()}get el(){return this}internals;name;value="";open=false;label;description;error;placeholder="Search…";emptyMessage="No matches";required=false;disabled=false;clearable=true;clearLabel="Clear";pfChange;pfOpenChange;query="";matchCount=0;initialValue="";stopObserving;activeOption=null;componentWillLoad(){this.initialValue=this.value??"";this.syncFormState();this.query=this.selectedLabel();this.applyQuery()}componentDidRender(){this.syncActiveDescendant()}disconnectedCallback(){this.stopObserving?.()}syncFormState(){this.internals.setFormValue(this.value||null);b(this.internals,Boolean(this.value),this.required,this.error)}syncSelection(){for(const e of this.options()){e.selected=this.optionValue(e)===this.value&&this.value!==""}this.query=this.selectedLabel();this.applyQuery()}syncOpen(e,t){if(e)this.showListbox();else this.hideListbox();if(e!==t)this.pfOpenChange.emit({open:e})}async show(){if(!this.disabled)this.open=true}async hide(){this.open=false}async checkValidity(){return this.internals.checkValidity()}async reportValidity(){return this.internals.reportValidity()}async getValidationMessage(){return this.internals.validationMessage}formResetCallback(){this.value=this.initialValue;this.query=this.selectedLabel();this.applyQuery()}async refresh(){this.syncSelection()}onSlotChange=()=>{this.syncSelection()};options(){return Array.from(this.el.querySelectorAll("pf-option"))}visible(){return this.options().filter((e=>!e.hasAttribute("hidden")))}optionValue(e){return e.value??e.getAttribute("value")??""}selectedLabel(){const e=this.options().find((e=>this.optionValue(e)===this.value));return this.value&&e?e.textContent?.trim()??"":""}get listbox(){return this.el.shadowRoot?.querySelector('[part="listbox"]')??null}get input(){return this.el.shadowRoot?.querySelector('[part="input"]')??null}get control(){return this.el.shadowRoot?.querySelector('[part="control"]')??null}applyQuery(){const e=l(this.query,this.selectedLabel());const t=this.options();for(const i of t){const t=e||h({label:i.textContent?.trim()??""},this.query);if(t)i.removeAttribute("hidden");else i.setAttribute("hidden","")}const i=this.visible();this.matchCount=i.length;const o=i.find((e=>!e.hasAttribute("disabled")))??null;if(!this.activeOption||this.activeOption.hasAttribute("hidden"))this.setActive(o)}showListbox(){const e=this.listbox;if(this.disabled||!e||e.matches(":popover-open"))return;e.showPopover();this.stopObserving?.();this.stopObserving=a({getAnchor:()=>this.control,getFloating:()=>e,matchAnchorWidth:true,flip:true,onChange:({left:t,top:i,width:o,minWidth:s})=>{n(e,t,i);if(o!==undefined)e.style.width=`${o}px`;if(s!==undefined)e.style.minWidth=`${s}px`}});this.applyQuery()}hideListbox(){this.stopObserving?.();this.stopObserving=undefined;const e=this.listbox;if(e?.matches(":popover-open"))e.hidePopover()}onToggle=e=>{const t=e.newState==="open";if(this.open!==t)this.open=t;if(!t){this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}};setActive(e){for(const t of this.options()){if(t!==e)t.active=false}if(e)e.active=true;this.activeOption=e;this.syncActiveDescendant();if(e&&typeof e.scrollIntoView==="function"){e.scrollIntoView({block:"nearest"})}}syncActiveDescendant(){const e=this.input;if(!e||!("ariaActiveDescendantElement"in e))return;e.ariaActiveDescendantElement=this.open?this.activeOption:null}commit(e){if(e.hasAttribute("disabled"))return;const t=this.optionValue(e);this.open=false;if(t!==this.value){this.value=t;this.pfChange.emit({value:t})}this.query=this.selectedLabel();this.applyQuery();this.input?.focus()}handleOptionSelect(e){e.stopPropagation();if(this.disabled)return;const t=this.options().find((t=>this.optionValue(t)===e.detail.value));if(t)this.commit(t)}move(e){const t=this.visible();const i=p(t,(e=>e.hasAttribute("disabled")));const o=this.activeOption?t.indexOf(this.activeOption):-1;const s=f(e,i,o);if(s!==-1)this.setActive(t[s]??null)}onInput=e=>{this.query=e.target.value;this.applyQuery();if(!this.open)this.open=true};clear=()=>{this.query="";if(this.value!==""){this.value="";this.pfChange.emit({value:""})}this.applyQuery();this.open=true;this.input?.focus()};onKeyDown=e=>{if(this.disabled)return;const t=y[e.key];if(t){e.preventDefault();if(!this.open)this.open=true;else this.move(t);return}if(e.key===d.Enter&&this.open&&this.activeOption){e.preventDefault();this.commit(this.activeOption)}};render(){const e=c(this.description&&"description",this.error&&"error");const t=this.clearable&&!this.disabled&&(this.query!==""||this.value!=="");return s(r,{key:"4a948db9316e8174c9c7592afb9912deb59eecdd"},s("div",{key:"ac5e469f9c00ec843fdb7a485cb3cbe9ddc08573",class:"field",part:"field"},this.label&&s("label",{key:"eb610c213cfe510c229f5ffa81e9761bf7303476",class:"label",part:"label",htmlFor:"input"},this.label,this.required&&s("span",{key:"d942137e81be6007aafe2e1dfc43e97e2ab8af59",class:"required","aria-hidden":"true"},"*")),s("div",{key:"b9f4806e7882e5dc2c64abe87f48bb925173d7dc",class:{control:true,"control--invalid":Boolean(this.error)},part:"control"},s("input",{key:"9a10cc81ff212f3e279cfcc311886756d7ca76f1",id:"input","aria-label":u(this.el,this.label),part:"input",class:"input",type:"text",role:"combobox",autocomplete:"off",disabled:this.disabled,required:this.required,placeholder:this.placeholder,value:this.query,"aria-autocomplete":"list","aria-expanded":this.open?"true":"false","aria-controls":"listbox","aria-invalid":this.error?"true":null,"aria-describedby":e,onInput:this.onInput,onKeyDown:this.onKeyDown,onClick:()=>{if(!this.disabled)this.open=true}}),t&&s("button",{key:"bc9f8df667df57cbede3aa00a4119f6591faeb7d",class:"clear",part:"clear",type:"button","aria-label":this.clearLabel,tabindex:-1,onMouseDown:e=>e.preventDefault(),onClick:this.clear},s("pf-icon",{key:"580dab29c2631f79b7a611f7dd95a81fc5cffda2",name:"circle-xmark"})),s("span",{key:"06d06d1fcbae5937632cf2451ab97d42d1410c91",class:"chevron","aria-hidden":"true"},s("pf-icon",{key:"d30dd0a5d008cec99c1ec8fd25acc7fdfbdd68db",name:"chevron-down"}))),this.description&&s("p",{key:"09873008049536bb2eab61825ae95a2d92e3952a",class:"description",part:"description",id:"description"},this.description),this.error&&s("p",{key:"ee43b1e024ff0e6e052054278680e04651b55421",class:"error",part:"error",id:"error"},this.error)),s("div",{key:"5b221c6566bc6dd29dc3a5d9ee5268ec65fa296e",id:"listbox",part:"listbox",class:"listbox",popover:"auto",role:"listbox","aria-label":this.label??this.placeholder,onToggle:this.onToggle},s("slot",{key:"645c56c8dd776ddd013be68c2bfc544f35c05b35",onSlotchange:this.onSlotChange}),this.matchCount===0&&s("p",{key:"9a3aac572c41177b41be06f9986d0718756c7de3",class:"empty",part:"empty"},this.emptyMessage)))}static get formAssociated(){return true}static get watchers(){return{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}}static get style(){return v()}},[833,"pf-combobox",{name:[513],value:[1537],open:[1540],label:[1],description:[1],error:[1],placeholder:[1],emptyMessage:[1,"empty-message"],required:[516],disabled:[516],clearable:[4],clearLabel:[1,"clear-label"],query:[32],matchCount:[32],show:[64],hide:[64],checkValidity:[64],reportValidity:[64],getValidationMessage:[64],refresh:[64]},[[0,"pfOptionSelect","handleOptionSelect"]],{value:[{syncFormState:0},{syncSelection:0}],error:[{syncFormState:0}],required:[{syncFormState:0}],open:[{syncOpen:0}]}]);function g(){if(typeof customElements==="undefined"){return}const t=["pf-combobox","pf-icon"];t.forEach((t=>{switch(t){case"pf-combobox":if(!customElements.get(e(t))){customElements.define(e(t),x)}break;case"pf-icon":if(!customElements.get(e(t))){m()}break}}))}g();const k=x;const C=g;export{k as PfCombobox,C as defineCustomElement};
 //# sourceMappingURL=pf-combobox.js.map