@threadlabs/looma 0.21.5 → 0.22.0

package/vue/chunks/UiAffordanceScope.js

@@ -1,7 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as useComponentHost, t as createDispatch } from "./host.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAffordanceScope.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-guide",
@@ -24,16 +24,39 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			guide: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "guide" },
+				description: "What marks an anticipatory control at rest. dot shows a small guide dot where it will appear; none shows nothing until the pointer nears it, it is hovered,\n      or it takes focus. Every guide inside the scope follows it, including a sidebar's resize line and the editor table's handles.",
+				values: ["dot", "none"],
+				default: "dot"
+			},
+			nearRadius: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "nearradius" },
+				description: "How close, in pixels, the pointer must come to reveal an affordance.",
+				default: 16
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			guide: checkedProp(props["guide"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "guide", void 0, ["dot", "none"]),
+			}, false, "guide"),
 			nearRadius: checkedProp(props["nearRadius"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "nearRadius", void 0, void 0)
+			}, false, "nearRadius")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -54,6 +77,7 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const engaged = ref(false);
+		provide("html-next:ui-affordance-scope:engaged", engaged);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-affordance-scope> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -80,15 +104,18 @@ var UiAffordanceScope_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			state: { engaged }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-affordance-scope" }, nativeAttrs(_ctx.$attrs), {
 				"data-guide": reflectedProp("guide", "guide", checkedProps.value.guide, void 0, false),
 				"data-near-radius": reflectedProp("nearRadius", "near-radius", checkedProps.value.nearRadius, void 0, false),
 				"data-ui-affordance-scope-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-db655641"]]);
+}), [["__scopeId", "data-v-b83bd2ec"]]);
 //#endregion
 export { UiAffordanceScope_default as t };

package/vue/chunks/UiAvatar.js

@@ -1,8 +1,8 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { 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 UiIcon_default } from "./UiIcon.js";
-import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef, watchSyncEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-active",
@@ -59,44 +59,127 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			active: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "active" },
+				description: "Marks the person as active now, such as editing the same page: a fine accent ring around the avatar. The ring is not announced, so say what it means in alt\n      (\"Ada Lovelace, editing\").",
+				default: false
+			},
+			alt: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "alt" },
+				description: "The avatar's accessible name, announced for it as an image. When empty, name is used, then \"Avatar\". Initials come from name first, so alt supplies them\n      only when name is empty. An authored img carries its own alt instead.",
+				default: ""
+			},
+			decorative: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "decorative" },
+				description: "Hides the avatar from assistive technology when adjacent text already identifies the person.",
+				default: false
+			},
+			fallback: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "fallback" },
+				description: "Text shown instead of the initials derived from name or alt, whenever there is no image. It is uppercased; keep it to a couple of characters, because the\n      circle clips anything wider.",
+				default: ""
+			},
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "The person's name. The initials are drawn from it: the first letters of the first two words, or the first two letters of a single word. It is also the\n      accessible name when alt is empty.",
+				default: ""
+			},
+			shape: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "shape" },
+				description: "Circle by default; square uses the theme's medium radius.",
+				values: ["circle", "square"],
+				default: "circle"
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "md is 2.5rem, for a person on their own (a profile, a comment); sm is 1.75rem with smaller initials, for a row of people in a toolbar or header; xs is\n      1.25rem with small initials, for a person named inline in a line of small text.",
+				values: [
+					"xs",
+					"sm",
+					"md"
+				],
+				default: "md"
+			},
+			src: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "src" },
+				description: "The image to show, cropped to fill the circle. Until it loads, or if it fails, the avatar shows initials instead. An img element authored inside the avatar\n      takes precedence over src."
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			active: checkedProp(props["active"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "active", void 0, void 0),
+			}, false, "active"),
 			alt: checkedProp(props["alt"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "alt", void 0, void 0),
+			}, false, "alt"),
 			decorative: checkedProp(props["decorative"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "decorative", void 0, void 0),
+			}, false, "decorative"),
 			fallback: checkedProp(props["fallback"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "fallback", void 0, void 0),
+			}, false, "fallback"),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "name", void 0, void 0),
+			}, false, "name"),
 			shape: checkedProp(props["shape"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "shape", void 0, ["circle", "square"]),
+			}, false, "shape"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, [
-				"xs",
-				"sm",
-				"md"
-			]),
+			}, false, "size"),
 			src: checkedProp(props["src"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "src", void 0, void 0)
+			}, false, "src")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -121,6 +204,40 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
 		const showGlyph = ref(false);
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!((hasAuthoredImage.value == null || typeof hasAuthoredImage.value === "boolean") && (hasImage.value == null || typeof hasImage.value === "boolean"))) return guardedPrevious;
+			return guardedPrevious = hasAuthoredImage.value || !hasImage.value;
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(hasImage.value == null || typeof hasImage.value === "boolean")) return guardedBindingPrevious;
+			return guardedBindingPrevious = hasImage.value;
+		});
+		let guardedBinding2Previous;
+		const guardedBinding2 = computed(() => {
+			if (!(hasImage.value == null || typeof hasImage.value === "boolean")) return guardedBinding2Previous;
+			return guardedBinding2Previous = hasImage.value;
+		});
+		let guardedBinding3Previous;
+		const guardedBinding3 = computed(() => {
+			if (!(showGlyph.value == null || typeof showGlyph.value === "boolean")) return guardedBinding3Previous;
+			return guardedBinding3Previous = showGlyph.value;
+		});
+		let guardedBinding4Previous;
+		const guardedBinding4 = computed(() => {
+			if (!(initials.value == null || typeof initials.value === "string")) return guardedBinding4Previous;
+			return guardedBinding4Previous = initials.value;
+		});
+		let guardedBinding5Previous;
+		const guardedBinding5 = computed(() => {
+			if (!(showGlyph.value == null || typeof showGlyph.value === "boolean")) return guardedBinding5Previous;
+			return guardedBinding5Previous = !showGlyph.value;
+		});
+		provide("html-next:ui-avatar:hasImage", hasImage);
+		provide("html-next:ui-avatar:hasAuthoredImage", hasAuthoredImage);
+		provide("html-next:ui-avatar:initials", initials);
+		provide("html-next:ui-avatar:showGlyph", showGlyph);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "span")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-avatar> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -156,7 +273,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, nativeAttrs(_ctx.$attrs), {
 				"data-active": reflectedProp("active", "active", checkedProps.value.active, void 0, false),
 				"data-alt": reflectedProp("alt", "alt", checkedProps.value.alt, void 0, false),
 				"data-decorative": reflectedProp("decorative", "decorative", checkedProps.value.decorative, void 0, false),
@@ -175,17 +292,20 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					alt: "",
 					"aria-hidden": "true",
 					src: checkedProps.value.src ?? void 0,
-					hidden: hasAuthoredImage.value || !hasImage.value,
+					hidden: guarded.value,
 					ref: "image"
 				}, null, 8, _hoisted_2),
 				createElementVNode("span", {
 					class: "fallback",
-					"aria-hidden": hasImage.value,
-					hidden: hasImage.value
-				}, [createElementVNode("span", { hidden: showGlyph.value }, toDisplayString(initials.value), 9, _hoisted_4), createElementVNode("span", { hidden: !showGlyph.value }, [createVNode(UiIcon_default, { name: "user-round" })], 8, _hoisted_5)], 8, _hoisted_3)
-			], 16, _hoisted_1);
+					"aria-hidden": guardedBinding.value,
+					hidden: guardedBinding2.value
+				}, [createElementVNode("span", { hidden: guardedBinding3.value }, toDisplayString(guardedBinding4.value), 9, _hoisted_4), createElementVNode("span", { hidden: guardedBinding5.value }, [createVNode(UiIcon_default, { name: "user-round" })], 8, _hoisted_5)], 8, _hoisted_3)
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-13af89a3"]]);
+}), [["__scopeId", "data-v-de00ac16"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -1,7 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
 import { r as useComponentHost, t as createDispatch } from "./host.js";
-import { t as checkedProp } from "./props.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-label",
@@ -41,28 +41,84 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "The group's accessible name, announced for the set of avatars as a whole. Name who they are rather than repeating the default.",
+				default: "People"
+			},
+			max: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "max" },
+				description: "How many avatars to show. The rest are hidden and counted in a +N badge after the last visible one. Fractions round down, and 0 hides every avatar behind\n      the badge.",
+				default: 5
+			},
+			overflowLabel: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "overflowlabel" },
+				description: "Accessible label for the overflow badge. Replace {count} with the number of people beyond the visible avatars.",
+				default: "{count} more"
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "The size of the avatars inside, matched by the +N badge and the overlap. Give each Avatar the same size. xs suits a group inside a line of small text, such\n      as the people listed under a title.",
+				values: [
+					"xs",
+					"sm",
+					"md"
+				],
+				default: "md"
+			},
+			total: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "total" },
+				description: "The true number of people when only some avatars are authored. The overflow badge counts the people beyond the visible avatars; it never counts fewer than\n      the authored avatars."
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			max: checkedProp(props["max"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "max", void 0, void 0),
+			}, false, "max"),
 			overflowLabel: checkedProp(props["overflowLabel"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "overflowLabel", void 0, void 0),
+			}, false, "overflowLabel"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, ["sm", "md"]),
+			}, false, "size"),
 			total: checkedProp(props["total"], {
 				kind: "terminal",
 				name: "integer"
-			}, false, "total", void 0, void 0)
+			}, false, "total")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -85,6 +141,18 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
 		const overflowAnnouncement = ref("");
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!(overflowCount.value == null || Number.isInteger(overflowCount.value))) return guardedPrevious;
+			return guardedPrevious = !overflowCount.value;
+		});
+		let guardedBindingPrevious;
+		const guardedBinding = computed(() => {
+			if (!(overflowAnnouncement.value == null || typeof overflowAnnouncement.value === "string")) return guardedBindingPrevious;
+			return guardedBindingPrevious = overflowAnnouncement.value;
+		});
+		provide("html-next:ui-avatar-group:overflowCount", overflowCount);
+		provide("html-next:ui-avatar-group:overflowAnnouncement", overflowAnnouncement);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-avatar-group> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -111,7 +179,7 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-avatar-group",
 				role: "group"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -127,12 +195,15 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}), [renderSlot(_ctx.$slots, "default"), createElementVNode("span", {
 				class: "overflow",
 				role: "img",
-				hidden: !overflowCount.value,
-				"aria-label": overflowAnnouncement.value,
+				hidden: guarded.value,
+				"aria-label": guardedBinding.value,
 				ref: "overflow"
-			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
+			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-04c833c9"]]);
+}), [["__scopeId", "data-v-c5dfd357"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.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, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBadge.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-shape",
@@ -28,31 +28,66 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			shape: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "shape" },
+				description: "Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.",
+				values: ["pill", "tag"],
+				default: "pill"
+			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger\n      mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS\n      colour, which overrides the tone.",
+				values: [
+					"neutral",
+					"accent",
+					"info",
+					"success",
+					"warning",
+					"danger"
+				],
+				default: "neutral"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      Neutral looks the same in solid and subtle.",
+				values: [
+					"solid",
+					"subtle",
+					"outline"
+				],
+				default: "subtle"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			shape: checkedProp(props["shape"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "shape", void 0, ["pill", "tag"]),
+			}, false, "shape"),
 			tone: checkedProp(props["tone"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "tone", void 0, [
-				"neutral",
-				"accent",
-				"info",
-				"success",
-				"warning",
-				"danger"
-			]),
+			}, false, "tone"),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "variant", void 0, [
-				"solid",
-				"subtle",
-				"outline"
-			])
+			}, false, "variant")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -88,14 +123,17 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, nativeAttrs(_ctx.$attrs), {
 				"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-badge-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ed7b2831"]]);
+}), [["__scopeId", "data-v-30ff44b9"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiBreadcrumbItem.js

@@ -1,7 +1,7 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { t as checkedProp } from "./props.js";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiBreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-current",
@@ -23,11 +23,21 @@ var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 		default: false
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { current: {
+			type: {
+				kind: "terminal",
+				name: "boolean"
+			},
+			required: false,
+			target: { attribute: "current" },
+			description: "Marks the step as the view you are on: it is plain text with aria-current=\"page\". Every other step holds a link.",
+			default: false
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ current: checkedProp(props["current"], {
 			kind: "terminal",
 			name: "boolean"
-		}, false, "current", void 0, void 0) }));
+		}, false, "current") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -63,7 +73,7 @@ var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-breadcrumb-item" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-breadcrumb-item" }, nativeAttrs(_ctx.$attrs), {
 				"aria-current": typeof {
 					true: "page",
 					false: null
@@ -76,9 +86,12 @@ var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 				}[`${checkedProps.value.current ?? ""}`]),
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
 				"data-ui-breadcrumb-item-state": hostState.value || void 0
-			}), [createElementVNode("span", _hoisted_2, [createVNode(UiIcon_default, { name: "chevron-right" })]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1);
+			}), [createElementVNode("span", _hoisted_2, [createVNode(UiIcon_default, { name: "chevron-right" })]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fe563ada"]]);
+}), [["__scopeId", "data-v-09112412"]]);
 //#endregion
 export { UiBreadcrumbItem_default as t };