@quidgest/ui 0.27.1 → 0.28.0

package/esm/components/QField/QField.d.ts

@@ -1,28 +1,253 @@
+import { DEFAULT_ICONS, DEFAULT_TEXTS } from './constants';
 import { QFieldProps } from '.';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         'label.prepend'?(_: {}): any;
         'label.append'?(_: {}): any;
-        control?(_: {}): any;
+        control?(_: {
+            describedBy: string | undefined;
+        }): any;
         prepend?(_: {}): any;
-        default?(_: {}): any;
+        default?(_: {
+            describedBy: string | undefined;
+        }): any;
         append?(_: {}): any;
         extras?(_: {}): any;
     };
     refs: {
+        controlAnchor: HTMLDivElement;
         field: HTMLDivElement;
+        standaloneHelp: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+            triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+            texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            trigger: ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {
+                    readonly id?: string | undefined;
+                    readonly class?: string | unknown[] | undefined;
+                    readonly label?: string | undefined;
+                    readonly help?: string | undefined;
+                    readonly helpDisplay?: import('../..').QHelpDisplay | undefined;
+                    readonly icons?: typeof import('../QButton/constants').DEFAULT_ICONS | undefined;
+                    readonly texts?: typeof import('../QButton/constants').DEFAULT_TEXTS | undefined;
+                    readonly variant?: import('..').QButtonVariant | undefined;
+                    readonly color?: string | undefined;
+                    readonly surface?: string | undefined;
+                    readonly borderless?: boolean | undefined;
+                    readonly elevated?: boolean | undefined;
+                    readonly block?: boolean | undefined;
+                    readonly size?: import('../..').QComponentSize | undefined;
+                    readonly iconPos?: import('..').QButtonIconPosition | undefined;
+                    readonly pill?: boolean | undefined;
+                    readonly effect?: import('..').QButtonEffect | undefined;
+                    readonly disabled?: boolean | undefined;
+                    readonly loading?: boolean | undefined;
+                    readonly tabindex?: number | undefined;
+                    readonly onClick?: ((event: MouseEvent) => any) | undefined;
+                } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+                $attrs: import('vue').Attrs;
+                $refs: {
+                    [x: string]: unknown;
+                } & {
+                    buttonEl: HTMLButtonElement;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                $root: import('vue').ComponentPublicInstance | null;
+                $parent: import('vue').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: (event: "click", event: MouseEvent) => void;
+                $el: any;
+                $options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                    click: (event: MouseEvent) => any;
+                }, string, {
+                    effect: import('..').QButtonEffect;
+                    color: string;
+                    variant: import('..').QButtonVariant;
+                    icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+                    texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+                    helpDisplay: import('../..').QHelpDisplay;
+                    iconPos: import('..').QButtonIconPosition;
+                }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('vue').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            } & Readonly<{
+                effect: import('..').QButtonEffect;
+                color: string;
+                variant: import('..').QButtonVariant;
+                icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+                texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+                helpDisplay: import('../..').QHelpDisplay;
+                iconPos: import('..').QButtonIconPosition;
+            }> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
+                onClick?: ((event: MouseEvent) => any) | undefined;
+            }>, "effect" | "color" | "variant" | "icons" | "texts" | "helpDisplay" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
+                $slots: {
+                    default?(_: {}): any;
+                    append?(_: {}): any;
+                };
+            }) | null;
+        }, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+            triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+        }, {}, {}, {}, {
+            icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+            texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+        }> | null;
     };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<QFieldProps, {
-    fieldRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+    fieldRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+    helpDescribedBy: import('vue').ComputedRef<string | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<QFieldProps> & Readonly<{}>, {
     size: import('./types').QFieldSize;
+    icons: typeof DEFAULT_ICONS;
+    texts: typeof DEFAULT_TEXTS;
+    helpDisplay: import('../..').QHelpDisplay;
     labelPosition: import('..').QLabelPosition;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    controlAnchor: HTMLDivElement;
     field: HTMLDivElement;
+    standaloneHelp: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+        triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+        icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+        texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        trigger: ({
+            $: import('vue').ComponentInternalInstance;
+            $data: {};
+            $props: {
+                readonly id?: string | undefined;
+                readonly class?: string | unknown[] | undefined;
+                readonly label?: string | undefined;
+                readonly help?: string | undefined;
+                readonly helpDisplay?: import('../..').QHelpDisplay | undefined;
+                readonly icons?: typeof import('../QButton/constants').DEFAULT_ICONS | undefined;
+                readonly texts?: typeof import('../QButton/constants').DEFAULT_TEXTS | undefined;
+                readonly variant?: import('..').QButtonVariant | undefined;
+                readonly color?: string | undefined;
+                readonly surface?: string | undefined;
+                readonly borderless?: boolean | undefined;
+                readonly elevated?: boolean | undefined;
+                readonly block?: boolean | undefined;
+                readonly size?: import('../..').QComponentSize | undefined;
+                readonly iconPos?: import('..').QButtonIconPosition | undefined;
+                readonly pill?: boolean | undefined;
+                readonly effect?: import('..').QButtonEffect | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly loading?: boolean | undefined;
+                readonly tabindex?: number | undefined;
+                readonly onClick?: ((event: MouseEvent) => any) | undefined;
+            } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+            $attrs: import('vue').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                buttonEl: HTMLButtonElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('vue').Slot<any> | undefined;
+            }>;
+            $root: import('vue').ComponentPublicInstance | null;
+            $parent: import('vue').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: "click", event: MouseEvent) => void;
+            $el: any;
+            $options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
+                onClick?: ((event: MouseEvent) => any) | undefined;
+            }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                click: (event: MouseEvent) => any;
+            }, string, {
+                effect: import('..').QButtonEffect;
+                color: string;
+                variant: import('..').QButtonVariant;
+                icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+                texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+                helpDisplay: import('../..').QHelpDisplay;
+                iconPos: import('..').QButtonIconPosition;
+            }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('vue').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+        } & Readonly<{
+            effect: import('..').QButtonEffect;
+            color: string;
+            variant: import('..').QButtonVariant;
+            icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+            texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+            helpDisplay: import('../..').QHelpDisplay;
+            iconPos: import('..').QButtonIconPosition;
+        }> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, "effect" | "color" | "variant" | "icons" | "texts" | "helpDisplay" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
+            $slots: {
+                default?(_: {}): any;
+                append?(_: {}): any;
+            };
+        }) | null;
+    }, any, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+        triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+    }, {}, {}, {}, {
+        icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+        texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+    }> | null;
 }, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/esm/components/QField/QField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QField/QField.vue"],"names":[],"mappings":"AA4CA;AAqGC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAiDrC,iBAAS,cAAc;WAiGT,OAAO,IAA6B;;iCAlBb,GAAG;gCACJ,GAAG;yBACV,GAAG;yBACH,GAAG;yBACF,GAAG;wBACJ,GAAG;wBACH,GAAG;;;;;;EAiB/B;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;OASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"QField.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QField/QField.vue"],"names":[],"mappings":"AAoFA;AA6LC,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAW1D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAA;AAsGrC,iBAAS,cAAc;WAwLT,OAAO,IAA6B;;iCApBb,GAAG;gCACJ,GAAG;;;YACT,GAAG;yBACH,GAAG;;;YACH,GAAG;wBACJ,GAAG;wBACH,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAyE2kU,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAtDhuU;AAuBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCA8BslU,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OArB/tU,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/esm/components/QField/QField.vue.js

@@ -1,17 +1,25 @@
 import { useId as e } from "../../composables/useId/index.js";
-import { QLabel as t } from "../QLabel/index.js";
-import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, toRef as f, unref as p, useTemplateRef as m, withCtx as h } from "vue";
+import { QHelpPopover as t } from "../__internal__/QHelpPopover/index.js";
+import { QTooltip as n } from "../QTooltip/index.js";
+import { describedHelpText as r, helpElementId as i, resolveHelp as a } from "../__internal__/QHelpPopover/resolveHelp.js";
+import { DEFAULT_ICONS as o, DEFAULT_TEXTS as s } from "./constants.js";
+import { QLabel as c } from "../QLabel/index.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, defineComponent as p, mergeProps as m, normalizeClass as h, openBlock as g, renderSlot as _, toDisplayString as v, toRef as y, unref as b, useTemplateRef as x, withCtx as S } from "vue";
 //#region src/components/QField/QField.vue?vue&type=script&setup=true&lang.ts
-var g = ["id", "aria-disabled"], _ = {
+var C = ["id", "aria-disabled"], w = {
+	key: 1,
+	ref: "controlAnchor",
+	class: "q-field__slot"
+}, T = {
 	key: 0,
 	class: "q-field__prepend"
-}, v = {
+}, E = {
 	key: 1,
 	class: "q-field__append"
-}, y = {
-	key: 1,
+}, D = {
+	key: 4,
 	class: "q-field__extras"
-}, b = /*@__PURE__*/ s({
+}, O = ["id"], k = ["id"], A = /*@__PURE__*/ p({
 	inheritAttrs: !1,
 	__name: "QField",
 	props: {
@@ -21,57 +29,112 @@ var g = ["id", "aria-disabled"], _ = {
 		required: { type: Boolean },
 		for: {},
 		labelPosition: { default: "topleft" },
+		help: {},
+		helpDisplay: { default: "popover" },
+		icons: { default: () => o },
+		texts: { default: () => s },
 		size: { default: "medium" },
 		readonly: { type: Boolean },
 		disabled: { type: Boolean },
 		invalid: { type: Boolean }
 	},
-	setup(s, { expose: b }) {
-		let x = s, S = e(f(x, "id")), C = m("field"), w = n(() => x.required && !x.readonly && !x.disabled), T = n(() => [
+	setup(o, { expose: s }) {
+		let p = o, A = e(y(p, "id")), j = l(() => `${A.value}_label`), M = l(() => `${A.value}_help-trigger`), N = l(() => i(A.value)), P = l(() => a({
+			help: p.help,
+			helpDisplay: p.helpDisplay
+		})), F = l(() => r(P.value)), I = l(() => P.value.inlineText || F.value ? N.value : void 0), L = l(() => !p.label && !!P.value.popoverText), R = x("field"), z = x("controlAnchor"), B = x("standaloneHelp"), V = l(() => {
+			if (P.value.tooltipText) return z.value ?? R.value ?? B.value?.triggerEl;
+		}), H = l(() => p.required && !p.readonly && !p.disabled), U = l(() => [
 			"q-field",
-			`q-field--${x.size}`,
-			`q-field--label-${x.labelPosition}`,
+			`q-field--${p.size}`,
+			`q-field--label-${p.labelPosition}`,
 			{
-				"q-field--readonly": x.readonly,
-				"q-field--disabled": x.disabled,
-				"q-field--required": w.value,
-				"q-field--invalid": x.invalid
+				"q-field--readonly": p.readonly,
+				"q-field--disabled": p.disabled,
+				"q-field--required": H.value,
+				"q-field--invalid": p.invalid
 			},
-			x.class
+			p.class
 		]);
-		return b({ fieldRef: C }), (e, n) => (u(), a("div", {
-			id: p(S),
-			class: l(T.value),
-			"aria-disabled": x.disabled || void 0
+		return s({
+			fieldRef: R,
+			helpDescribedBy: I
+		}), (e, r) => (g(), f("div", {
+			id: b(A),
+			class: h(U.value),
+			"aria-disabled": p.disabled || void 0
 		}, [
-			x.label ? (u(), r(p(t), {
+			p.label ? (g(), u(b(c), {
 				key: 0,
+				id: j.value,
 				class: "q-field__label",
-				label: x.label,
-				"label-position": x.labelPosition,
-				for: x.for,
-				required: w.value
+				label: p.label,
+				"label-position": p.labelPosition,
+				for: p.for,
+				required: H.value
 			}, {
-				prepend: h(() => [d(e.$slots, "label.prepend")]),
-				append: h(() => [d(e.$slots, "label.append")]),
+				prepend: S(() => [_(e.$slots, "label.prepend")]),
+				append: S(() => [_(e.$slots, "label.append"), P.value.popoverText ? (g(), u(b(t), {
+					key: 0,
+					label: p.label,
+					text: P.value.popoverText,
+					icons: p.icons,
+					texts: p.texts
+				}, null, 8, [
+					"label",
+					"text",
+					"icons",
+					"texts"
+				])) : d("v-if", !0)]),
 				_: 3
 			}, 8, [
+				"id",
 				"label",
 				"label-position",
 				"for",
 				"required"
-			])) : i("v-if", !0),
-			d(e.$slots, "control", {}, () => [o("div", c({
+			])) : d("v-if", !0),
+			e.$slots.control ? (g(), f("div", w, [_(e.$slots, "control", { describedBy: I.value })], 512)) : (g(), f("div", m({
+				key: 2,
 				ref: "field",
 				class: "q-field__control"
 			}, e.$attrs), [
-				e.$slots.prepend ? (u(), a("div", _, [d(e.$slots, "prepend")])) : i("v-if", !0),
-				d(e.$slots, "default"),
-				e.$slots.append ? (u(), a("div", v, [d(e.$slots, "append")])) : i("v-if", !0)
-			], 16)]),
-			e.$slots.extras ? (u(), a("div", y, [d(e.$slots, "extras")])) : i("v-if", !0)
-		], 10, g));
+				e.$slots.prepend ? (g(), f("div", T, [_(e.$slots, "prepend")])) : d("v-if", !0),
+				_(e.$slots, "default", { describedBy: I.value }),
+				e.$slots.append ? (g(), f("div", E, [_(e.$slots, "append")])) : d("v-if", !0)
+			], 16)),
+			L.value ? (g(), u(b(t), {
+				key: 3,
+				id: M.value,
+				ref: "standaloneHelp",
+				class: "q-field__help-trigger",
+				text: P.value.popoverText || "",
+				icons: p.icons,
+				texts: p.texts
+			}, null, 8, [
+				"id",
+				"text",
+				"icons",
+				"texts"
+			])) : d("v-if", !0),
+			e.$slots.extras || P.value.inlineText ? (g(), f("div", D, [_(e.$slots, "extras"), P.value.inlineText ? (g(), f("span", {
+				key: 0,
+				id: N.value,
+				class: "q-field__help"
+			}, v(P.value.inlineText), 9, O)) : d("v-if", !0)])) : d("v-if", !0),
+			F.value ? (g(), f("span", {
+				key: 5,
+				id: N.value,
+				class: "q-sr-only"
+			}, v(F.value), 9, k)) : d("v-if", !0),
+			P.value.tooltipText && V.value ? (g(), u(b(n), {
+				key: 6,
+				anchor: V.value,
+				text: P.value.tooltipText,
+				html: !1
+			}, null, 8, ["anchor", "text"])) : d("v-if", !0)
+		], 10, C));
 	}
 });
 //#endregion
-export { b as default };
+export { A as default };

package/esm/components/QField/constants.d.ts

@@ -0,0 +1,11 @@
+/** Default icons for {@link QField}. Includes the help popover icon. */
+export declare const DEFAULT_ICONS: {
+    help: {
+        icon: string;
+    };
+};
+/** Default accessible strings for {@link QField}. Includes the help button label. */
+export declare const DEFAULT_TEXTS: {
+    showHelp: string;
+};
+//# sourceMappingURL=constants.d.ts.map

package/esm/components/QField/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QField/constants.ts"],"names":[],"mappings":"AASA,wEAAwE;AACxE,eAAO,MAAM,aAAa;;;;CAEY,CAAA;AAEtC,qFAAqF;AACrF,eAAO,MAAM,aAAa;;CAEQ,CAAA"}

package/esm/components/QField/constants.js

@@ -0,0 +1,5 @@
+import { DEFAULT_ICONS as e, DEFAULT_TEXTS as t } from "../__internal__/QHelpPopover/constants.js";
+//#region src/components/QField/constants.ts
+var n = { ...e }, r = { ...t };
+//#endregion
+export { n as DEFAULT_ICONS, r as DEFAULT_TEXTS };

package/esm/components/QField/index.d.ts

@@ -1,11 +1,123 @@
 declare const QField: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./types').QFieldProps> & Readonly<{}>, {
-        fieldRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+        fieldRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+        helpDescribedBy: import('vue').ComputedRef<string | undefined>;
     }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
         size: import('./types').QFieldSize;
+        icons: typeof import('./constants').DEFAULT_ICONS;
+        texts: typeof import('./constants').DEFAULT_TEXTS;
+        helpDisplay: import('../..').QHelpDisplay;
         labelPosition: import('..').QLabelPosition;
     }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        controlAnchor: HTMLDivElement;
         field: HTMLDivElement;
+        standaloneHelp: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+            triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
+            icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+            texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            trigger: ({
+                $: import('vue').ComponentInternalInstance;
+                $data: {};
+                $props: {
+                    readonly id?: string | undefined;
+                    readonly class?: string | unknown[] | undefined;
+                    readonly label?: string | undefined;
+                    readonly help?: string | undefined;
+                    readonly helpDisplay?: import('../..').QHelpDisplay | undefined;
+                    readonly icons?: typeof import('../QButton/constants').DEFAULT_ICONS | undefined;
+                    readonly texts?: typeof import('../QButton/constants').DEFAULT_TEXTS | undefined;
+                    readonly variant?: import('..').QButtonVariant | undefined;
+                    readonly color?: string | undefined;
+                    readonly surface?: string | undefined;
+                    readonly borderless?: boolean | undefined;
+                    readonly elevated?: boolean | undefined;
+                    readonly block?: boolean | undefined;
+                    readonly size?: import('../..').QComponentSize | undefined;
+                    readonly iconPos?: import('..').QButtonIconPosition | undefined;
+                    readonly pill?: boolean | undefined;
+                    readonly effect?: import('..').QButtonEffect | undefined;
+                    readonly disabled?: boolean | undefined;
+                    readonly loading?: boolean | undefined;
+                    readonly tabindex?: number | undefined;
+                    readonly onClick?: ((event: MouseEvent) => any) | undefined;
+                } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+                $attrs: import('vue').Attrs;
+                $refs: {
+                    [x: string]: unknown;
+                } & {
+                    buttonEl: HTMLButtonElement;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('vue').Slot<any> | undefined;
+                }>;
+                $root: import('vue').ComponentPublicInstance | null;
+                $parent: import('vue').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: (event: "click", event: MouseEvent) => void;
+                $el: any;
+                $options: import('vue').ComponentOptionsBase<Readonly<import('..').QButtonProps> & Readonly<{
+                    onClick?: ((event: MouseEvent) => any) | undefined;
+                }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+                    click: (event: MouseEvent) => any;
+                }, string, {
+                    effect: import('..').QButtonEffect;
+                    color: string;
+                    variant: import('..').QButtonVariant;
+                    icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+                    texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+                    helpDisplay: import('../..').QHelpDisplay;
+                    iconPos: import('..').QButtonIconPosition;
+                }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('vue').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+            } & Readonly<{
+                effect: import('..').QButtonEffect;
+                color: string;
+                variant: import('..').QButtonVariant;
+                icons: typeof import('../QButton/constants').DEFAULT_ICONS;
+                texts: typeof import('../QButton/constants').DEFAULT_TEXTS;
+                helpDisplay: import('../..').QHelpDisplay;
+                iconPos: import('..').QButtonIconPosition;
+            }> & Omit<Readonly<import('..').QButtonProps> & Readonly<{
+                onClick?: ((event: MouseEvent) => any) | undefined;
+            }>, "effect" | "color" | "variant" | "icons" | "texts" | "helpDisplay" | "iconPos"> & {} & import('vue').ComponentCustomProperties & {} & {
+                $slots: {
+                    default?(_: {}): any;
+                    append?(_: {}): any;
+                };
+            }) | null;
+        }, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('../__internal__/QHelpPopover').QHelpPopoverProps> & Readonly<{}>, {
+            triggerEl: import('vue').ComputedRef<HTMLElement | undefined>;
+        }, {}, {}, {}, {
+            icons: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_ICONS;
+            texts: typeof import('../__internal__/QHelpPopover/constants').DEFAULT_TEXTS;
+        }> | null;
     }, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
@@ -14,26 +126,38 @@ declare const QField: {
         M: {};
         Defaults: {};
     }, Readonly<import('./types').QFieldProps> & Readonly<{}>, {
-        fieldRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+        fieldRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+        helpDescribedBy: import('vue').ComputedRef<string | undefined>;
     }, {}, {}, {}, {
         size: import('./types').QFieldSize;
+        icons: typeof import('./constants').DEFAULT_ICONS;
+        texts: typeof import('./constants').DEFAULT_TEXTS;
+        helpDisplay: import('../..').QHelpDisplay;
         labelPosition: import('..').QLabelPosition;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import('vue').ComponentOptionsBase<Readonly<import('./types').QFieldProps> & Readonly<{}>, {
-    fieldRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null>>;
+    fieldRef: Readonly<import('vue').ShallowRef<HTMLElement | null>>;
+    helpDescribedBy: import('vue').ComputedRef<string | undefined>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
     size: import('./types').QFieldSize;
+    icons: typeof import('./constants').DEFAULT_ICONS;
+    texts: typeof import('./constants').DEFAULT_TEXTS;
+    helpDisplay: import('../..').QHelpDisplay;
     labelPosition: import('..').QLabelPosition;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {
         'label.prepend'?(_: {}): any;
         'label.append'?(_: {}): any;
-        control?(_: {}): any;
+        control?(_: {
+            describedBy: string | undefined;
+        }): any;
         prepend?(_: {}): any;
-        default?(_: {}): any;
+        default?(_: {
+            describedBy: string | undefined;
+        }): any;
         append?(_: {}): any;
         extras?(_: {}): any;
     };

package/esm/components/QField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QField/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA2B,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,CAAA;AAGjB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QField/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4CAO270B,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAPth1B,CAAA;AAGvC,OAAO,EAAE,MAAM,EAAE,CAAA;AAGjB,cAAc,SAAS,CAAA"}