@threadlabs/looma 0.19.1 → 0.20.0

package/vue/chunks/UiAvatar.js

@@ -1,10 +1,20 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { r as useComponentHost, t as createDispatch } from "./host.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-avatar/ui-avatar.js";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef, watchSyncEffect } from "vue";
 //#region .build/vue/UiAvatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-avatar-state"];
+var _hoisted_1 = [
+	"data-active",
+	"data-alt",
+	"data-decorative",
+	"data-fallback",
+	"data-name",
+	"data-shape",
+	"data-size",
+	"data-src",
+	"data-ui-avatar-state"
+];
 var _hoisted_2 = ["src", "hidden"];
 var _hoisted_3 = ["aria-hidden", "hidden"];
 var _hoisted_4 = ["hidden"];
@@ -16,40 +26,123 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	__name: "UiAvatar",
 	props: {
 		active: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		alt: { default: "" },
+		alt: {
+			type: null,
+			default: ""
+		},
 		decorative: {
-			type: Boolean,
+			type: null,
 			default: false
 		},
-		fallback: { default: "" },
-		name: { default: "" },
-		shape: { default: "circle" },
-		size: { default: "md" },
-		src: {}
+		fallback: {
+			type: null,
+			default: ""
+		},
+		name: {
+			type: null,
+			default: ""
+		},
+		shape: {
+			type: null,
+			default: "circle"
+		},
+		size: {
+			type: null,
+			default: "md"
+		},
+		src: {
+			type: null,
+			default: null
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			active: checkedProp(props["active"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "active", void 0, void 0),
+			alt: checkedProp(props["alt"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "alt", void 0, void 0),
+			decorative: checkedProp(props["decorative"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "decorative", void 0, void 0),
+			fallback: checkedProp(props["fallback"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "fallback", void 0, void 0),
+			name: checkedProp(props["name"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "name", void 0, void 0),
+			shape: checkedProp(props["shape"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "shape", void 0, ["circle", "square"]),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, ["sm", "md"]),
+			src: checkedProp(props["src"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "src", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const imageElement = useTemplateRef("image");
 		const hasImage = ref(false);
 		const hasAuthoredImage = ref(false);
 		const initials = ref("?");
 		const showGlyph = ref(false);
+		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",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-avatar> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.size && `size size=${props.size}`,
+			checkedProps.value.size && "size",
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
 			hasImage.value && "hasImage",
-			props.shape && `shape shape=${props.shape}`,
-			props.active && "active"
+			checkedProps.value.shape && "shape",
+			checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`,
+			checkedProps.value.active && "active"
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-avatar/ui-avatar.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-avatar/ui-avatar.js",
+				definition: "./components/ui-avatar/ui-avatar.html"
+			},
+			props: checkedProps,
 			refs: { image: imageElement },
 			state: {
 				hasImage,
@@ -59,7 +152,15 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-avatar" }, _ctx.$attrs, {
+			return 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),
+				"data-fallback": reflectedProp("fallback", "fallback", checkedProps.value.fallback, void 0, false),
+				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
+				"data-shape": reflectedProp("shape", "shape", checkedProps.value.shape, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-src": reflectedProp("src", "src", checkedProps.value.src, void 0, false),
 				"data-ui-avatar-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -69,7 +170,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					class: "image",
 					alt: "",
 					"aria-hidden": "true",
-					src: __props.src,
+					src: checkedProps.value.src ?? void 0,
 					hidden: hasAuthoredImage.value || !hasImage.value,
 					ref: "image"
 				}, null, 8, _hoisted_2),
@@ -81,6 +182,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-f0891fb1"]]);
+}), [["__scopeId", "data-v-c3838326"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiAvatarGroup.js

@@ -1,9 +1,17 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { n as useComponentHost, t as createDispatch } from "./host.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, ref, renderSlot, toDisplayString, useTemplateRef } from "vue";
-import * as controllerModule from "@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.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";
 //#region .build/vue/UiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label", "data-ui-avatar-group-state"];
+var _hoisted_1 = [
+	"aria-label",
+	"data-label",
+	"data-max",
+	"data-overflow-label",
+	"data-size",
+	"data-total",
+	"data-ui-avatar-group-state"
+];
 var _hoisted_2 = ["hidden", "aria-label"];
 //#endregion
 //#region .build/vue/UiAvatarGroup.vue
@@ -11,25 +19,91 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	inheritAttrs: false,
 	__name: "UiAvatarGroup",
 	props: {
-		label: { default: "People" },
-		max: { default: 5 },
-		overflowLabel: { default: "{count} more" },
-		size: { default: "md" },
-		total: {}
+		label: {
+			type: null,
+			default: "People"
+		},
+		max: {
+			type: null,
+			default: 5
+		},
+		overflowLabel: {
+			type: null,
+			default: "{count} more"
+		},
+		size: {
+			type: null,
+			default: "md"
+		},
+		total: {
+			type: null,
+			default: null
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", void 0, void 0),
+			max: checkedProp(props["max"], {
+				kind: "terminal",
+				name: "number"
+			}, false, "max", void 0, void 0),
+			overflowLabel: checkedProp(props["overflowLabel"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "overflowLabel", void 0, void 0),
+			size: checkedProp(props["size"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "size", void 0, ["sm", "md"]),
+			total: checkedProp(props["total"], {
+				kind: "terminal",
+				name: "integer"
+			}, false, "total", void 0, void 0)
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const overflowElement = useTemplateRef("overflow");
 		const overflowCount = ref(0);
 		const overflowAnnouncement = ref("");
+		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",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-avatar-group> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.size && "size", checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
-		useComponentHost(controllerModule.default, {
+		useComponentHost(() => import("@threadlabs/looma/components/ui-avatar-group/ui-avatar-group.js"), {
 			root,
 			dispatch,
-			props,
+			controllerSource: {
+				specifier: "../components/ui-avatar-group/ui-avatar-group.js",
+				definition: "./components/ui-avatar-group/ui-avatar-group.html"
+			},
+			props: checkedProps,
 			refs: { overflow: overflowElement },
 			state: {
 				overflowCount,
@@ -40,8 +114,13 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			return openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-avatar-group",
 				role: "group"
-			}, _ctx.$attrs, {
-				"aria-label": __props.label,
+			}, nativeAttrs(_ctx.$attrs), {
+				"aria-label": checkedProps.value.label ?? void 0,
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
+				"data-max": reflectedProp("max", "max", checkedProps.value.max, void 0, false),
+				"data-overflow-label": reflectedProp("overflowLabel", "overflow-label", checkedProps.value.overflowLabel, void 0, false),
+				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
+				"data-total": reflectedProp("total", "total", checkedProps.value.total, void 0, false),
 				"data-ui-avatar-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
@@ -54,6 +133,6 @@ var UiAvatarGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}, toDisplayString(`+${overflowCount.value}`), 9, _hoisted_2)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4f555172"]]);
+}), [["__scopeId", "data-v-e8a96513"]]);
 //#endregion
 export { UiAvatarGroup_default as t };

package/vue/chunks/UiBadge.js

@@ -1,29 +1,101 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { computed, createElementBlock, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiBadge.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-badge-state"];
+var _hoisted_1 = [
+	"data-shape",
+	"data-tone",
+	"data-variant",
+	"data-ui-badge-state"
+];
 //#endregion
 //#region .build/vue/UiBadge.vue
 var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiBadge",
 	props: {
-		shape: { default: "pill" },
-		tone: { default: "neutral" },
-		variant: { default: "subtle" }
+		shape: {
+			type: null,
+			default: "pill"
+		},
+		tone: {
+			type: null,
+			default: "neutral"
+		},
+		variant: {
+			type: null,
+			default: "subtle"
+		}
 	},
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({
+			shape: checkedProp(props["shape"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "shape", void 0, ["pill", "tag"]),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", void 0, [
+				"neutral",
+				"accent",
+				"info",
+				"success",
+				"warning",
+				"danger"
+			]),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", void 0, [
+				"solid",
+				"subtle",
+				"outline"
+			])
+		}));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationNode = getCurrentInstance()?.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-badge> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-badge> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
-			props.tone && `tone tone=${props.tone}`,
-			props.variant && `variant variant=${props.variant}`,
-			props.shape && `shape shape=${props.shape}`
+			checkedProps.value.tone && "tone",
+			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
+			checkedProps.value.shape && "shape",
+			checkedProps.value.shape != null && `shape=${encodeURIComponent(checkedProps.value.shape)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			return 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);
 		};
 	}
-}), [["__scopeId", "data-v-fe098822"]]);
+}), [["__scopeId", "data-v-d3cef965"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiBreadcrumbItem.js

@@ -1,8 +1,13 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as checkedProp } from "./props.js";
 import { t as UiIcon_default } from "./UiIcon.js";
-import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiBreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-current", "data-ui-breadcrumb-item-state"];
+var _hoisted_1 = [
+	"aria-current",
+	"data-current",
+	"data-ui-breadcrumb-item-state"
+];
 var _hoisted_2 = {
 	class: "separator",
 	"aria-hidden": "true"
@@ -14,13 +19,41 @@ var UiBreadcrumbItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/
 	inheritAttrs: false,
 	__name: "UiBreadcrumbItem",
 	props: { current: {
-		type: Boolean,
+		type: null,
 		default: false
 	} },
 	setup(__props) {
 		const props = __props;
+		const checkedProps = computed(() => ({ current: checkedProp(props["current"], {
+			kind: "terminal",
+			name: "boolean"
+		}, false, "current", void 0, void 0) }));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "li")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-breadcrumb-item> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-breadcrumb-item> has an incompatible root."
+			})
+		});
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.current && "current"].filter(Boolean).join(" "));
+		const hostState = computed(() => [checkedProps.value.current && "current"].filter(Boolean).join(" "));
 		function text(value) {
 			if (Array.isArray(value)) return value.map(text).join(" ");
 			return value === null || value === void 0 || typeof value === "object" ? "" : String(value);
@@ -30,21 +63,22 @@ 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" }, _ctx.$attrs, {
+			return openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-breadcrumb-item" }, nativeAttrs(_ctx.$attrs), {
 				"aria-current": typeof {
 					true: "page",
 					false: null
-				}[`${__props.current}`] === "boolean" ? String({
+				}[`${checkedProps.value.current ?? ""}`] === "boolean" ? String({
 					true: "page",
 					false: null
-				}[`${__props.current}`]) : attribute({
+				}[`${checkedProps.value.current ?? ""}`]) : attribute({
 					true: "page",
 					false: null
-				}[`${__props.current}`]),
+				}[`${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);
 		};
 	}
-}), [["__scopeId", "data-v-1b6e5330"]]);
+}), [["__scopeId", "data-v-493e2c2a"]]);
 //#endregion
 export { UiBreadcrumbItem_default as t };

package/vue/chunks/UiBreadcrumbs.js

@@ -1,19 +1,55 @@
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
-import { createElementBlock, createElementVNode, defineComponent, mergeProps, openBlock, renderSlot } from "vue";
+import { t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, watchSyncEffect } from "vue";
 //#region .build/vue/UiBreadcrumbs.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["aria-label"];
+var _hoisted_1 = ["aria-label", "data-label"];
 var _hoisted_2 = { role: "list" };
 //#endregion
 //#region .build/vue/UiBreadcrumbs.vue
 var UiBreadcrumbs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiBreadcrumbs",
-	props: { label: { default: "Breadcrumb" } },
+	props: { label: {
+		type: null,
+		default: "Breadcrumb"
+	} },
 	setup(__props) {
+		const props = __props;
+		const checkedProps = computed(() => ({ label: checkedProp(props["label"], {
+			kind: "terminal",
+			name: "string"
+		}, false, "label", void 0, void 0) }));
+		checkedProps.value;
+		watchSyncEffect(() => {
+			checkedProps.value;
+		});
+		function nativeAttrs(attrs) {
+			const names = Object.keys(attrs);
+			if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs;
+			return Object.fromEntries(names.map((name) => [Object.hasOwn(Object.prototype, name) ? name === "__proto__" ? "__Proto__" : name[0].toUpperCase() + name.slice(1) : name, attrs[name]]));
+		}
+		const componentInstance = getCurrentInstance();
+		function reflectedProp(name, kebab, value, fallback, bound, separator) {
+			const incoming = componentInstance?.vnode.props;
+			if (!bound && (incoming === null || incoming === void 0 || !Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab))) return fallback;
+			if (value === null || value === void 0) return void 0;
+			return Array.isArray(value) && separator !== void 0 ? value.join(separator) : typeof value === "object" ? JSON.stringify(value) : String(value);
+		}
+		const hydrationNode = getCurrentInstance()?.vnode.el;
+		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "nav")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-breadcrumbs> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-breadcrumbs> has an incompatible root."
+			})
+		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("nav", mergeProps({ "data-component": "ui-breadcrumbs" }, _ctx.$attrs, { "aria-label": __props.label }), [createElementVNode("ol", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			return 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);
 		};
 	}
-}), [["__scopeId", "data-v-ee3145b6"]]);
+}), [["__scopeId", "data-v-5ab89b1d"]]);
 //#endregion
 export { UiBreadcrumbs_default as t };