@quidgest/ui 0.27.1 → 0.28.0

package/esm/components/QButton/QButton.vue.js

@@ -1,26 +1,37 @@
 import { useId as e } from "../../composables/useId/index.js";
-import { QSpinnerLoader as t } from "../QSpinnerLoader/index.js";
-import { useColor as n } from "../../composables/useColor/index.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, renderSlot as g, toDisplayString as _, toRef as v, unref as y, withModifiers as b } from "vue";
+import { DEFAULT_ICONS as t, DEFAULT_TEXTS as n } from "./constants.js";
+import { useColor as r } from "../../composables/useColor/index.js";
+import { QHelpPopover as i } from "../__internal__/QHelpPopover/index.js";
+import { QSpinnerLoader as a } from "../QSpinnerLoader/index.js";
+import { QTooltip as o } from "../QTooltip/index.js";
+import { describedHelpText as s, helpElementId as c, mergeDescribedBy as l, resolveHelp as u } from "../__internal__/QHelpPopover/resolveHelp.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, h as b, mergeProps as x, normalizeStyle as ee, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, toRef as D, unref as O, useAttrs as k, useTemplateRef as A, withCtx as j, withModifiers as M } from "vue";
 //#region src/components/QButton/QButton.vue?vue&type=script&setup=true&lang.ts
-var x = [
+var N = [
 	"id",
 	"disabled",
-	"tabindex"
-], S = {
+	"tabindex",
+	"aria-describedby"
+], P = {
 	key: 0,
 	class: "q-button__spinner"
-}, C = { class: "q-button__content" }, w = {
+}, F = { class: "q-button__content" }, I = {
 	key: 0,
 	class: "q-button__append"
-}, T = ["onAnimationend"], E = /*@__PURE__*/ u({
+}, L = ["onAnimationend"], R = ["id"], z = ["id"], B = /*@__PURE__*/ y({
+	inheritAttrs: !1,
 	__name: "QButton",
 	props: {
 		id: {},
 		class: {},
 		label: {},
+		help: {},
+		helpDisplay: { default: "popover" },
+		icons: { default: () => t },
+		texts: { default: () => n },
 		variant: { default: "outlined" },
 		color: { default: "primary" },
+		surface: {},
 		borderless: { type: Boolean },
 		elevated: { type: Boolean },
 		block: { type: Boolean },
@@ -33,82 +44,123 @@ var x = [
 		tabindex: {}
 	},
 	emits: ["click"],
-	setup(u, { emit: E }) {
-		let D = u, O = E, k = e(v(D, "id")), A = i(() => D.disabled || D.loading), j = m([]), M = 0;
-		function N(e) {
+	setup(t, { emit: n }) {
+		let y = t, B = n, V = e(D(y, "id")), H = k(), U = f(() => typeof H["aria-describedby"] == "string" ? H["aria-describedby"] : void 0), W = A("buttonEl"), G = f(() => c(V.value)), K = f(() => u({
+			help: y.help,
+			helpDisplay: y.helpDisplay
+		})), q = f(() => s(K.value)), J = f(() => !!(K.value.popoverText || K.value.inlineText || K.value.tooltipText)), Y = (e, { slots: t }) => e.wrap ? b("span", { class: "q-button__root" }, [t.default?.(), t.help?.()]) : t.default?.()[0];
+		Y.props = { wrap: Boolean };
+		let X = f(() => K.value.inlineText || q.value ? G.value : void 0), Z = f(() => y.disabled || y.loading), Q = C([]), te = 0;
+		function ne(e) {
 			let t = e.currentTarget.getBoundingClientRect(), n = Math.hypot(t.width, t.height) * 2, r = e.clientX !== 0 || e.clientY !== 0, i = e.clientX - t.left, a = e.clientY - t.top, o = r && i >= 0 && i <= t.width && a >= 0 && a <= t.height, s = o ? i : t.width / 2, c = o ? a : t.height / 2;
-			j.value.push({
-				id: M++,
+			Q.value.push({
+				id: te++,
 				x: s - n / 2,
 				y: c - n / 2,
 				size: n
 			});
 		}
-		function P(e) {
-			j.value = j.value.filter((t) => t.id !== e);
+		function re(e) {
+			Q.value = Q.value.filter((t) => t.id !== e);
 		}
-		function F(e) {
-			A.value || (D.effect === "ripple" && N(e), O("click", e));
+		function ie(e) {
+			Z.value || (y.effect === "ripple" && ne(e), B("click", e));
 		}
-		let { style: I } = n(v(D, "color")), L = i(() => {
-			let e = D.color === "background" ? "q-button--background" : void 0, t = D.size === "small" || D.size === "large" ? `q-button--${D.size}` : void 0, n = D.iconPos === "start" ? void 0 : `q-button--icon-${D.iconPos}`;
+		let { style: $ } = r(D(y, "color"), D(y, "surface")), ae = f(() => {
+			let e = y.size === "small" || y.size === "large" ? `q-button--${y.size}` : void 0, t = y.iconPos === "start" ? void 0 : `q-button--icon-${y.iconPos}`;
 			return [
 				"q-button",
-				`q-button--${D.variant}`,
+				`q-button--${y.variant}`,
 				e,
 				t,
-				n,
 				{
-					"q-button--labeled": D.label,
-					"q-button--borderless": D.borderless,
-					"q-button--elevated": D.elevated,
-					"q-button--block": D.block,
-					"q-button--loading": D.loading,
-					"q-button--pill": D.pill
+					"q-button--labeled": y.label,
+					"q-button--borderless": y.borderless,
+					"q-button--elevated": y.elevated,
+					"q-button--block": y.block,
+					"q-button--loading": y.loading,
+					"q-button--pill": y.pill
 				},
-				D.class
+				y.class
 			];
-		}), R = i(() => {
-			if (!(D.color === "background" || !I.value)) return {
-				"--q-button-main-color": I.value.mainColor,
-				"--q-button-main-color-rgb": I.value.mainColorRgb,
-				"--q-button-on-main-color": I.value.onMainColor,
-				"--q-button-text-color": I.value.textColor,
-				"--q-button-hover-text-color": I.value.hoverTextColor,
-				"--q-button-hover-color": I.value.hoverColor,
-				"--q-button-hover-color-rgb": I.value.hoverColorRgb,
-				"--q-button-on-hover-color": I.value.onHoverColor
+		}), oe = f(() => {
+			if ($.value) return {
+				"--q-button-main-color": $.value.mainColor,
+				"--q-button-main-color-rgb": $.value.mainColorRgb,
+				"--q-button-on-main-color": $.value.onMainColor,
+				"--q-button-text-color": $.value.textColor,
+				"--q-button-hover-text-color": $.value.hoverTextColor,
+				"--q-button-hover-color": $.value.hoverColor,
+				"--q-button-hover-color-rgb": $.value.hoverColorRgb,
+				"--q-button-on-hover-color": $.value.onHoverColor
 			};
 		});
-		return (e, n) => (p(), o("button", {
-			id: y(k),
-			type: "button",
-			class: d(L.value),
-			disabled: A.value,
-			tabindex: D.tabindex,
-			style: f(R.value),
-			onClick: b(F, ["stop", "prevent"])
-		}, [
-			D.loading ? (p(), o("div", S, [l(y(t))])) : a("v-if", !0),
-			s("span", C, [
-				g(e.$slots, "default"),
-				c(" " + _(D.label) + " ", 1),
-				e.$slots.append ? (p(), o("span", w, [g(e.$slots, "append")])) : a("v-if", !0)
+		return (e, t) => (S(), p(Y, { wrap: J.value }, {
+			help: j(() => [
+				K.value.popoverText ? (S(), p(O(i), {
+					key: 0,
+					label: y.label,
+					text: K.value.popoverText,
+					icons: y.icons,
+					texts: y.texts
+				}, null, 8, [
+					"label",
+					"text",
+					"icons",
+					"texts"
+				])) : m("v-if", !0),
+				K.value.inlineText ? (S(), h("span", {
+					key: 1,
+					id: G.value,
+					class: "q-button__help"
+				}, E(K.value.inlineText), 9, R)) : m("v-if", !0),
+				q.value ? (S(), h("span", {
+					key: 2,
+					id: G.value,
+					class: "q-sr-only"
+				}, E(q.value), 9, z)) : m("v-if", !0),
+				K.value.tooltipText && W.value ? (S(), p(O(o), {
+					key: 3,
+					anchor: W.value,
+					text: K.value.tooltipText,
+					html: !1
+				}, null, 8, ["anchor", "text"])) : m("v-if", !0)
 			]),
-			(p(!0), o(r, null, h(j.value, (e) => (p(), o("span", {
-				key: e.id,
-				class: "q-button__ripple",
-				style: f({
-					left: `${e.x}px`,
-					top: `${e.y}px`,
-					width: `${e.size}px`,
-					height: `${e.size}px`
-				}),
-				"aria-hidden": "true",
-				onAnimationend: (t) => P(e.id)
-			}, null, 44, T))), 128))
-		], 14, x));
+			default: j(() => [g("button", x({
+				id: O(V),
+				ref_key: "buttonEl",
+				ref: W,
+				type: "button",
+				class: ae.value,
+				disabled: Z.value,
+				tabindex: y.tabindex,
+				style: oe.value
+			}, e.$attrs, {
+				"aria-describedby": O(l)(X.value, U.value),
+				onClick: M(ie, ["stop", "prevent"])
+			}), [
+				y.loading ? (S(), h("div", P, [v(O(a))])) : m("v-if", !0),
+				g("span", F, [
+					T(e.$slots, "default"),
+					_(" " + E(y.label) + " ", 1),
+					e.$slots.append ? (S(), h("span", I, [T(e.$slots, "append")])) : m("v-if", !0)
+				]),
+				(S(!0), h(d, null, w(Q.value, (e) => (S(), h("span", {
+					key: e.id,
+					class: "q-button__ripple",
+					style: ee({
+						left: `${e.x}px`,
+						top: `${e.y}px`,
+						width: `${e.size}px`,
+						height: `${e.size}px`
+					}),
+					"aria-hidden": "true",
+					onAnimationend: (t) => re(e.id)
+				}, null, 44, L))), 128))
+			], 16, N)]),
+			_: 3
+		}, 8, ["wrap"]));
 	}
 });
 //#endregion
-export { E as default };
+export { B as default };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/constants.ts"],"names":[],"mappings":"AASA,yEAAyE;AACzE,eAAO,MAAM,aAAa;;;;CAEY,CAAA;AAEtC,sFAAsF;AACtF,eAAO,MAAM,aAAa;;CAEQ,CAAA"}

package/esm/components/QButton/constants.js

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

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

@@ -4,11 +4,16 @@ declare const QButton: {
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
         click: (event: MouseEvent) => any;
     }, import('vue').PublicProps, {
-        variant: import('./types').QButtonVariant;
         effect: import('./types').QButtonEffect;
         color: string;
+        variant: import('./types').QButtonVariant;
+        icons: typeof import('./constants').DEFAULT_ICONS;
+        texts: typeof import('./constants').DEFAULT_TEXTS;
+        helpDisplay: import('../..').QHelpDisplay;
         iconPos: import('./types').QButtonIconPosition;
-    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLButtonElement, import('vue').ComponentProvideOptions, {
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        buttonEl: HTMLButtonElement;
+    }, any, import('vue').ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
@@ -18,9 +23,12 @@ declare const QButton: {
     }, Readonly<import('./types').QButtonProps> & Readonly<{
         onClick?: ((event: MouseEvent) => any) | undefined;
     }>, {}, {}, {}, {}, {
-        variant: import('./types').QButtonVariant;
         effect: import('./types').QButtonEffect;
         color: string;
+        variant: import('./types').QButtonVariant;
+        icons: typeof import('./constants').DEFAULT_ICONS;
+        texts: typeof import('./constants').DEFAULT_TEXTS;
+        helpDisplay: import('../..').QHelpDisplay;
         iconPos: import('./types').QButtonIconPosition;
     }>;
     __isFragment?: never;
@@ -31,9 +39,12 @@ declare const QButton: {
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     click: (event: MouseEvent) => any;
 }, string, {
-    variant: import('./types').QButtonVariant;
     effect: import('./types').QButtonEffect;
     color: string;
+    variant: import('./types').QButtonVariant;
+    icons: typeof import('./constants').DEFAULT_ICONS;
+    texts: typeof import('./constants').DEFAULT_TEXTS;
+    helpDisplay: import('../..').QHelpDisplay;
     iconPos: import('./types').QButtonIconPosition;
 }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
     $slots: {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA4B,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,CAAA;AAGlB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/index.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAA4B,CAAA;AAGzC,OAAO,EAAE,OAAO,EAAE,CAAA;AAGlB,cAAc,SAAS,CAAA"}

package/esm/components/QButton/types.d.ts

@@ -1,4 +1,6 @@
+import { DEFAULT_ICONS, DEFAULT_TEXTS } from './constants';
 import { QBaseComponentProps, QComponentSize } from '../../types/component';
+import { QHelpDisplay } from '../../types';
 export type QButtonVariant = 'bold' | 'tonal' | 'outlined' | 'ghost' | 'text';
 export type QButtonIconPosition = 'start' | 'end' | 'top' | 'bottom';
 export type QButtonEffect = 'ripple' | 'none';
@@ -9,6 +11,47 @@ export type QButtonProps = QBaseComponentProps & {
      * @category Content
      */
     label?: string;
+    /**
+     * Help text. Plain text only. One display at a time.
+     *
+     * Tooltip and popover help is also exposed to assistive tech on the button.
+     * The popover title is the button label.
+     *
+     * With help, the root element is a `display: contents` wrapper around the button
+     * (and the help), not the button itself, so:
+     * - Anchor popovers, tooltips, and measurements to the inner `button`, not to the
+     *   component's `$el`, which has no box.
+     * - Do not toggle `help` on a focused button: the button is remounted and loses focus.
+     * - Direct-child selectors such as those of `QButtonGroup` no longer match the button,
+     *   so `QToggleGroupItem` does not accept help.
+     *
+     * @category Content
+     */
+    help?: string;
+    /**
+     * How {@link QButtonProps.help} is presented. Defaults to a popover.
+     *
+     * `subtext` renders the help under the button only in block flow. In a flex row
+     * (such as a dialog footer) or in an inline run it becomes a sibling beside the
+     * button, or breaks the line, so prefer `popover` or `tooltip` there.
+     *
+     * @category Presentation
+     */
+    helpDisplay?: QHelpDisplay;
+    /**
+     * Icon overrides. Includes the help popover icon, `help`.
+     * Pass every key, or omit the prop to keep the defaults.
+     *
+     * @category Configuration
+     */
+    icons?: typeof DEFAULT_ICONS;
+    /**
+     * Accessible text overrides. Includes the help button label, `showHelp`.
+     * Pass every key, or omit the prop to keep the defaults.
+     *
+     * @category Configuration
+     */
+    texts?: typeof DEFAULT_TEXTS;
     /**
      * Specifies the visual style of the button.
      *
@@ -23,6 +66,15 @@ export type QButtonProps = QBaseComponentProps & {
      * @category Presentation
      */
     color?: string;
+    /**
+     * The color the button sits on, when it is not the theme background: a utility color
+     * like 'primary', or a CSS color code. The label color of the `tonal`, `outlined`,
+     * `ghost` and `text` variants, and the hover color, are measured against it, so the
+     * button stays readable on a colored banner. Defaults to the theme background.
+     *
+     * @category Presentation
+     */
+    surface?: string;
     /**
      * If true, the button has no borders.
      *

package/esm/components/QButton/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEhF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;AAE7E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/QButton/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAC/D,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAChF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AAE/C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAA;AAE7E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAA;AAEpE,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,YAAY,GAAG,mBAAmB,GAAG;IAChD;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,YAAY,CAAA;IAE1B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,aAAa,CAAA;IAE5B;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAA;IAExB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IAEpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IAErB;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAA;IAE7B;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAA;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"QCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCard/QCard.vue"],"names":[],"mappings":"AAuEA;AA8IC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAA;AA4DpC,iBAAS,cAAc;WAwHT,OAAO,IAA6B;;wBAlBrB,GAAG;kCACO,GAAG;0CACK,GAAG;uBACtB,GAAG;0BACA,GAAG;yCACY,GAAG;iCACX,GAAG;yBACX,GAAG;wBACJ,GAAG;;;;EAe/B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;6EAQnB,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":"QCard.vue.d.ts","sourceRoot":"","sources":["../../../src/components/QCard/QCard.vue"],"names":[],"mappings":"AAwEA;AAwJC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,GAAG,CAAA;AAmEpC,iBAAS,cAAc;WA0HT,OAAO,IAA6B;;wBAlBrB,GAAG;kCACO,GAAG;0CACK,GAAG;uBACtB,GAAG;0BACA,GAAG;yCACY,GAAG;iCACX,GAAG;yBACX,GAAG;wBACJ,GAAG;;;;EAe/B;AAeD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;6EAQnB,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/QCard/QCard.vue.js

@@ -1,20 +1,21 @@
 import { useId as e } from "../../composables/useId/index.js";
-import { QSpinnerLoader as t } from "../QSpinnerLoader/index.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, defineComponent as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, toRef as h, unref as g, useAttrs as _, withCtx as v } from "vue";
+import { useColor as t } from "../../composables/useColor/index.js";
+import { QSpinnerLoader as n } from "../QSpinnerLoader/index.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, toRef as _, unref as v, useAttrs as y, withCtx as b } from "vue";
 //#region src/components/QCard/QCard.vue?vue&type=script&setup=true&lang.ts
-var y = { class: "q-card__header" }, b = {
+var x = { class: "q-card__header" }, S = {
 	key: 0,
 	class: "q-card__header-content"
-}, x = { class: "q-card__header-text" }, S = {
+}, C = { class: "q-card__header-text" }, w = {
 	key: 0,
 	class: "q-card__title"
-}, C = {
+}, T = {
 	key: 1,
 	class: "q-card__subtitle"
-}, w = { class: "q-card__content" }, T = {
+}, E = { class: "q-card__content" }, D = {
 	key: 0,
 	class: "q-card__footer"
-}, E = /*@__PURE__*/ l({
+}, O = /*@__PURE__*/ u({
 	__name: "QCard",
 	props: {
 		id: {},
@@ -29,63 +30,65 @@ var y = { class: "q-card__header" }, b = {
 		disabled: { type: Boolean },
 		loading: { type: Boolean }
 	},
-	setup(l) {
-		let E = l, D = e(h(E, "id")), O = r(() => [
+	setup(u) {
+		let O = u, k = e(_(O, "id")), { style: A } = t("primary"), j = i(() => ({ "--q-card-tint-color-rgb": A.value?.tintColorRgb })), M = i(() => [
 			"q-card",
-			E.width ? `q-card--${E.width}` : void 0,
-			E.variant && E.variant !== "default" ? `q-card--${E.variant}` : void 0,
-			E.elevation && E.elevation !== "none" ? `q-card--elevation-${E.elevation}` : void 0,
+			O.width ? `q-card--${O.width}` : void 0,
+			O.variant && O.variant !== "default" ? `q-card--${O.variant}` : void 0,
+			O.elevation && O.elevation !== "none" ? `q-card--elevation-${O.elevation}` : void 0,
 			{
-				"q-card--clickable": A.value,
-				"q-card--loading": E.loading,
-				"q-card--borderless": E.borderless,
-				"q-card--disabled": E.disabled
+				"q-card--clickable": P.value,
+				"q-card--loading": O.loading,
+				"q-card--borderless": O.borderless,
+				"q-card--disabled": O.disabled
 			},
-			E.class
-		]), k = _(), A = r(() => !!k.onClick || E.href), j = r(() => E.disabled || E.loading);
-		function M(e) {
-			j.value && e.stopImmediatePropagation();
+			O.class
+		]), N = y(), P = i(() => !!N.onClick || O.href), F = i(() => O.disabled || O.loading);
+		function I(e) {
+			F.value && e.stopImmediatePropagation();
 		}
-		return (e, r) => (d(), i(p(E.href ? "a" : "div"), {
-			id: g(D),
-			class: u(O.value),
-			href: E.href && !j.value ? E.href : void 0,
-			onClick: M
+		return (e, t) => (p(), a(h(O.href ? "a" : "div"), {
+			id: v(k),
+			class: d(M.value),
+			style: f(j.value),
+			href: O.href && !F.value ? O.href : void 0,
+			onClick: I
 		}, {
-			default: v(() => [E.loading ? (d(), i(g(t), {
+			default: b(() => [O.loading ? (p(), a(v(n), {
 				key: 0,
 				size: 36
-			})) : (d(), o(n, { key: 1 }, [
-				a(" HEADER "),
-				s("div", y, [f(e.$slots, "header", {}, () => [
-					a(" HEADER: PREPEND "),
-					f(e.$slots, "header.prepend"),
-					a(" HEADER CONTENT "),
-					e.$slots.title || E.title || e.$slots.subtitle || E.subtitle ? (d(), o("div", b, [
-						f(e.$slots, "header.content.prepend"),
-						s("div", x, [
-							a(" TITLE "),
-							e.$slots.title || E.title ? (d(), o("p", S, [e.$slots.title ? f(e.$slots, "title", { key: 0 }) : (d(), o(n, { key: 1 }, [c(m(e.$props.title), 1)], 64))])) : a("v-if", !0),
-							a(" SUBTITLE "),
-							e.$slots.subtitle || E.subtitle ? (d(), o("p", C, [e.$slots.subtitle ? f(e.$slots, "subtitle", { key: 0 }) : (d(), o(n, { key: 1 }, [c(m(e.$props.subtitle), 1)], 64))])) : a("v-if", !0)
+			})) : (p(), s(r, { key: 1 }, [
+				o(" HEADER "),
+				c("div", x, [m(e.$slots, "header", {}, () => [
+					o(" HEADER: PREPEND "),
+					m(e.$slots, "header.prepend"),
+					o(" HEADER CONTENT "),
+					e.$slots.title || O.title || e.$slots.subtitle || O.subtitle ? (p(), s("div", S, [
+						m(e.$slots, "header.content.prepend"),
+						c("div", C, [
+							o(" TITLE "),
+							e.$slots.title || O.title ? (p(), s("p", w, [e.$slots.title ? m(e.$slots, "title", { key: 0 }) : (p(), s(r, { key: 1 }, [l(g(e.$props.title), 1)], 64))])) : o("v-if", !0),
+							o(" SUBTITLE "),
+							e.$slots.subtitle || O.subtitle ? (p(), s("p", T, [e.$slots.subtitle ? m(e.$slots, "subtitle", { key: 0 }) : (p(), s(r, { key: 1 }, [l(g(e.$props.subtitle), 1)], 64))])) : o("v-if", !0)
 						]),
-						f(e.$slots, "header.content.append")
-					])) : a("v-if", !0),
-					a(" HEADER: APPEND "),
-					f(e.$slots, "header.append")
+						m(e.$slots, "header.content.append")
+					])) : o("v-if", !0),
+					o(" HEADER: APPEND "),
+					m(e.$slots, "header.append")
 				])]),
-				a(" CONTENT "),
-				s("div", w, [f(e.$slots, "default")]),
-				a(" FOOTER "),
-				e.$slots.footer ? (d(), o("div", T, [f(e.$slots, "footer")])) : a("v-if", !0)
+				o(" CONTENT "),
+				c("div", E, [m(e.$slots, "default")]),
+				o(" FOOTER "),
+				e.$slots.footer ? (p(), s("div", D, [m(e.$slots, "footer")])) : o("v-if", !0)
 			], 64))]),
 			_: 3
 		}, 8, [
 			"id",
 			"class",
+			"style",
 			"href"
 		]));
 	}
 });
 //#endregion
-export { E as default };
+export { O as default };

package/esm/components/QCarousel/QCarousel.d.ts

@@ -26,12 +26,12 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps,
 }>, {
     icons: typeof DEFAULT_ICONS;
     texts: typeof DEFAULT_TEXTS;
+    wrap: boolean;
     slides: QCarouselSlide[];
     autoCycleInterval: number;
     autoCyclePause: "hover" | "false";
     ride: "carousel" | "false";
     swipeThreshold: number;
-    wrap: boolean;
     animationDuration: number;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/esm/components/QCarousel/QCarousel.vue.js

@@ -1,6 +1,6 @@
 import { useId as e } from "../../composables/useId/index.js";
-import { QButton as t } from "../QButton/index.js";
-import { QIcon as n } from "../QIcon/index.js";
+import { QIcon as t } from "../QIcon/index.js";
+import { QButton as n } from "../QButton/index.js";
 import { DEFAULT_ICONS as r, DEFAULT_TEXTS as i } from "./constants.js";
 import { QSkeletonLoader as a } from "../QSkeletonLoader/index.js";
 import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, nextTick as h, normalizeClass as g, normalizeStyle as _, onMounted as v, onUnmounted as y, openBlock as b, ref as x, renderList as S, renderSlot as C, toDisplayString as w, toRef as T, unref as E, useModel as D, watch as O, withCtx as k, withModifiers as A } from "vue";
@@ -228,21 +228,21 @@ var j = ["id"], M = {
 				onClick: () => J(t)
 			}, null, 8, P)], 6))), 128))])) : c("v-if", !0),
 			c(" Controls "),
-			r.showControls && r.slides.length > 1 ? (b(), l(o, { key: 4 }, [d(E(t), {
+			r.showControls && r.slides.length > 1 ? (b(), l(o, { key: 4 }, [d(E(n), {
 				class: "q-carousel__control q-carousel__control--prev",
 				"data-testid": "carousel-prev",
-				"aria-label": r.texts.previousText,
+				"aria-label": r.texts.back,
 				onClick: X
 			}, {
-				default: k(() => [d(E(n), m({ class: "q-carousel__control-icon q-carousel__control-icon--prev" }, f.icons.back), null, 16), u("span", F, w(r.texts.previousText), 1)]),
+				default: k(() => [d(E(t), m({ class: "q-carousel__control-icon q-carousel__control-icon--prev" }, f.icons.back), null, 16), u("span", F, w(r.texts.back), 1)]),
 				_: 1
-			}, 8, ["aria-label"]), d(E(t), {
+			}, 8, ["aria-label"]), d(E(n), {
 				class: "q-carousel__control q-carousel__control--next",
 				"data-testid": "carousel-next",
-				"aria-label": r.texts.nextText,
+				"aria-label": r.texts.forward,
 				onClick: Y
 			}, {
-				default: k(() => [d(E(n), m({ class: "q-carousel__control-icon q-carousel__control-icon--next" }, f.icons.forward), null, 16), u("span", I, w(r.texts.nextText), 1)]),
+				default: k(() => [d(E(t), m({ class: "q-carousel__control-icon q-carousel__control-icon--next" }, f.icons.forward), null, 16), u("span", I, w(r.texts.forward), 1)]),
 				_: 1
 			}, 8, ["aria-label"])], 64)) : c("v-if", !0)
 		], 64))], 42, j));

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

@@ -7,8 +7,8 @@ export declare const DEFAULT_ICONS: {
     };
 };
 export declare const DEFAULT_TEXTS: {
-    previousText: string;
-    nextText: string;
+    back: string;
+    forward: string;
     goToSlide: string;
 };
 //# sourceMappingURL=constants.d.ts.map

package/esm/components/QCarousel/constants.js

@@ -3,8 +3,8 @@ var e = {
 	back: { icon: "chevron-left" },
 	forward: { icon: "chevron-right" }
 }, t = {
-	previousText: "Previous",
-	nextText: "Next",
+	back: "Previous",
+	forward: "Next",
 	goToSlide: "Go to slide {0}"
 };
 //#endregion