@threadlabs/looma 0.21.5 → 0.22.0

package/vue/chunks/UiBreadcrumbs.js

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label", "data-label"];
 var _hoisted_2 = { role: "list" };
@@ -14,11 +14,21 @@ var UiBreadcrumbs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		default: "Breadcrumb"
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { label: {
+			type: {
+				kind: "terminal",
+				name: "string"
+			},
+			required: false,
+			target: { attribute: "aria-label" },
+			description: "The navigation landmark's accessible name.",
+			default: "Breadcrumb"
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ label: checkedProp(props["label"], {
 			kind: "terminal",
 			name: "string"
-		}, false, "label", void 0, void 0) }));
+		}, false, "label") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -44,12 +54,15 @@ var UiBreadcrumbs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			})
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", mergeProps({ "data-component": "ui-breadcrumbs" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("nav", mergeProps({ "data-component": "ui-breadcrumbs" }, nativeAttrs(_ctx.$attrs), {
 				"aria-label": checkedProps.value.label ?? void 0,
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false)
-			}), [createElementVNode("ol", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			}), [createElementVNode("ol", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-bf09b165"]]);
+}), [["__scopeId", "data-v-fc9f0e45"]]);
 //#endregion
 export { UiBreadcrumbs_default as t };

package/vue/chunks/UiButton.js

@@ -1,8 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as preserveRootFocus, r as useComponentHost, t as createDispatch } from "./host.js";
-import { t as checkedProp } from "./props.js";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
 import { t as UiSpinner_default } from "./UiSpinner.js";
-import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
+import { computed, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiButton.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"href",
@@ -120,86 +120,232 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "Content alignment. start lays the content out like a list option: from the start edge, with start-aligned text.",
+				values: ["center", "start"],
+				default: "center"
+			},
+			as: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "as" },
+				description: "The native element the button renders: a button, or a link (a) that navigates to href.",
+				values: ["button", "a"],
+				default: "button"
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Makes the button unavailable: it cannot be pressed, uses a flat neutral palette, and loses its raised look. A disabled link (as=\"a\" with href) drops its\n      href and states aria-disabled=\"true\" instead, because a link has no native disabled state.",
+				default: false
+			},
+			href: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "href" },
+				description: "The link's destination. Pair it with as=\"a\" so the button renders as a real link that navigates. A disabled link drops its href and states\n      aria-disabled=\"true\", so it cannot be followed."
+			},
+			loading: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "loading" },
+				description: "Keeps the action focusable and its label visible while work is in progress. It shows a decorative spinner, states aria-disabled and aria-busy, and prevents\n      activation or form submission until cleared.",
+				default: false
+			},
+			pending: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "pending" },
+				description: "Deprecated alias for loading.",
+				default: false
+			},
+			rel: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "rel" },
+				description: "The link's relationship to its destination, as on a native link. Only meaningful with as=\"a\"."
+			},
+			shape: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "shape" },
+				description: "rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.",
+				values: ["rounded", "pill"],
+				default: "rounded"
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by\n      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm\n      grows to the touch minimum, while xs keeps its size inside its line and gains an invisible touch-sized hit area.",
+				values: [
+					"xs",
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			stretch: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "stretch" },
+				description: "Fills the inline size of its container.",
+				default: false
+			},
+			target: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "target" },
+				description: "Where a link opens, as on a native link. Only meaningful with as=\"a\"."
+			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone=\"danger\" variant=\"outline\" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.",
+				values: [
+					"accent",
+					"neutral",
+					"danger",
+					"success",
+					"warning",
+					"info"
+				],
+				default: "accent"
+			},
+			type: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "type" },
+				description: "The button's type, as on a native button. button by default, so it never submits a form by accident. A link has no type.",
+				values: [
+					"button",
+					"submit",
+					"reset"
+				],
+				default: "button"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it.",
+				values: [
+					"outline",
+					"solid",
+					"danger",
+					"ghost",
+					"link"
+				],
+				default: "outline"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			align: checkedProp(props["align"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "align", void 0, ["center", "start"]),
+			}, false, "align"),
 			as: checkedProp(props["as"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "as", void 0, ["button", "a"]),
+			}, false, "as"),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			href: checkedProp(props["href"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "href", void 0, void 0),
+			}, false, "href"),
 			loading: checkedProp(props["loading"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "loading", void 0, void 0),
+			}, false, "loading"),
 			pending: checkedProp(props["pending"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "pending", void 0, void 0),
+			}, false, "pending"),
 			rel: checkedProp(props["rel"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "rel", void 0, void 0),
+			}, false, "rel"),
 			shape: checkedProp(props["shape"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "shape", void 0, ["rounded", "pill"]),
+			}, false, "shape"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, [
-				"xs",
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "size"),
 			stretch: checkedProp(props["stretch"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "stretch", void 0, void 0),
+			}, false, "stretch"),
 			target: checkedProp(props["target"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "target", void 0, void 0),
+			}, false, "target"),
 			tone: checkedProp(props["tone"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "tone", void 0, [
-				"accent",
-				"neutral",
-				"danger",
-				"success",
-				"warning",
-				"info"
-			]),
+			}, false, "tone"),
 			type: checkedProp(props["type"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "type", void 0, [
-				"button",
-				"submit",
-				"reset"
-			]),
+			}, false, "type"),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "variant", void 0, [
-				"outline",
-				"solid",
-				"danger",
-				"ghost",
-				"link"
-			])
+			}, false, "variant")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -263,7 +409,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return checkedProps.value.as === "a" ? (openBlock(), createElementBlock("a", mergeProps({
+			return checkedProps.value.as === "a" ? withDirectives((openBlock(), createElementBlock("a", mergeProps({
 				key: 0,
 				"data-component": "ui-button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -304,7 +450,10 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : (openBlock(), createElementBlock("button", mergeProps({
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_2, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]) : withDirectives((openBlock(), createElementBlock("button", mergeProps({
 				key: 1,
 				"data-component": "ui-button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -337,9 +486,12 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-button-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3));
+			}), [checkedProps.value.loading || checkedProps.value.pending ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode(UiSpinner_default, { size: "sm" })])) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7a112b47"]]);
+}), [["__scopeId", "data-v-d5a1d869"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -1,6 +1,6 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiCallout.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-tone", "data-ui-callout-state"];
 var _hoisted_2 = {
@@ -63,18 +63,29 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		default: "info"
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { tone: {
+			type: {
+				kind: "terminal",
+				name: "keyword"
+			},
+			required: false,
+			target: { attribute: "tone" },
+			description: "Which kind of message the callout carries, shown by its icon and colour: info (the default) for information, neutral for a muted aside, warning for a\n      caution, success for a confirmation, and danger for a harmful consequence. note remains as an alias for neutral.",
+			values: [
+				"info",
+				"neutral",
+				"note",
+				"warning",
+				"success",
+				"danger"
+			],
+			default: "info"
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ tone: checkedProp(props["tone"], {
 			kind: "terminal",
 			name: "keyword"
-		}, false, "tone", void 0, [
-			"info",
-			"neutral",
-			"note",
-			"warning",
-			"success",
-			"danger"
-		]) }));
+		}, false, "tone") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -102,7 +113,7 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [checkedProps.value.tone && "tone", checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-callout",
 				role: "note"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -142,9 +153,12 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					createElementVNode("path", { d: "m15 9-6 6" }, null, -1),
 					createElementVNode("path", { d: "m9 9 6 6" }, null, -1)
 				])])) : createCommentVNode("v-if", true)
-			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
+			]), createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-12d58166"]]);
+}), [["__scopeId", "data-v-394b0843"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCard.js

@@ -1,7 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { n as preserveRootFocus } from "./host.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, useTemplateRef, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiCard.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-as",
@@ -55,37 +55,83 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			as: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "as" },
+				description: "The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.",
+				values: [
+					"div",
+					"section",
+					"article",
+					"aside"
+				],
+				default: "div"
+			},
+			padding: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "padding" },
+				description: "The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "danger adds a soft danger surface and a strong leading edge for consequential content.",
+				values: ["neutral", "danger"],
+				default: "neutral"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;\n      elevated floats above the page with a shadow, for a view's one card, such as sign-in.",
+				values: [
+					"outlined",
+					"subtle",
+					"elevated"
+				],
+				default: "outlined"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			as: checkedProp(props["as"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "as", void 0, [
-				"div",
-				"section",
-				"article",
-				"aside"
-			]),
+			}, false, "as"),
 			padding: checkedProp(props["padding"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "padding", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "padding"),
 			tone: checkedProp(props["tone"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "tone", void 0, ["neutral", "danger"]),
+			}, false, "tone"),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "variant", void 0, [
-				"outlined",
-				"subtle",
-				"elevated"
-			])
+			}, false, "variant")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -124,7 +170,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return checkedProps.value.as === "section" ? (openBlock(), createElementBlock("section", mergeProps({
+			return checkedProps.value.as === "section" ? withDirectives((openBlock(), createElementBlock("section", mergeProps({
 				key: 0,
 				"data-component": "ui-card"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -134,7 +180,10 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)) : checkedProps.value.as === "article" ? (openBlock(), createElementBlock("article", mergeProps({
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]) : checkedProps.value.as === "article" ? withDirectives((openBlock(), createElementBlock("article", mergeProps({
 				key: 1,
 				"data-component": "ui-card"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -144,7 +193,10 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2)) : checkedProps.value.as === "aside" ? (openBlock(), createElementBlock("aside", mergeProps({
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]) : checkedProps.value.as === "aside" ? withDirectives((openBlock(), createElementBlock("aside", mergeProps({
 				key: 2,
 				"data-component": "ui-card"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -154,7 +206,10 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3)) : (openBlock(), createElementBlock("div", mergeProps({
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_3)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]) : withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				key: 3,
 				"data-component": "ui-card"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -164,9 +219,12 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-card-state": hostState.value || void 0,
 				ref: "@html-next/root"
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_4));
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_4)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-979a6da1"]]);
+}), [["__scopeId", "data-v-78ea0ceb"]]);
 //#endregion
 export { UiCard_default as t };