@threadlabs/looma 0.21.6 → 0.22.0

package/vue/chunks/UiStatusMessage.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 UiSpinner_default } from "./UiSpinner.js";
-import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, watchSyncEffect } from "vue";
+import { computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiStatusMessage.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"role",
@@ -34,28 +34,62 @@ var UiStatusMessage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			heading: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "heading" },
+				description: "A short heading above the message, such as \"No pages yet\". Optional.",
+				default: ""
+			},
+			kind: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "kind" },
+				description: "What the view is saying. empty: there is nothing here yet (announced politely); loading: it is on its way, with a spinner (announced politely); error: it\n      could not be shown, in the danger tone (announced at once).",
+				values: [
+					"empty",
+					"loading",
+					"error"
+				],
+				default: "empty"
+			},
+			layout: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "layout" },
+				description: "Where it sits. inline takes its place in the view's flow; panel sits it on a dashed surface, for an empty area in a page; fill centres it in all the space\n      it is given, for a whole view that is loading or failed.",
+				values: [
+					"inline",
+					"panel",
+					"fill"
+				],
+				default: "inline"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			heading: checkedProp(props["heading"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "heading", void 0, void 0),
+			}, false, "heading"),
 			kind: checkedProp(props["kind"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "kind", void 0, [
-				"empty",
-				"loading",
-				"error"
-			]),
+			}, false, "kind"),
 			layout: checkedProp(props["layout"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "layout", void 0, [
-				"inline",
-				"panel",
-				"fill"
-			])
+			}, false, "layout")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -97,7 +131,7 @@ var UiStatusMessage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-status-message" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-status-message" }, nativeAttrs(_ctx.$attrs), {
 				role: attribute({
 					true: "alert",
 					false: "status"
@@ -116,9 +150,12 @@ var UiStatusMessage_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					hidden: !checkedProps.value.heading
 				}, toDisplayString(checkedProps.value.heading), 9, _hoisted_3), createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])]),
 				createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "action", {}, void 0, true)])
-			], 16, _hoisted_1);
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0860f1ef"]]);
+}), [["__scopeId", "data-v-80a22081"]]);
 //#endregion
 export { UiStatusMessage_default as t };

package/vue/chunks/UiSwitch.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 { r as vBindControl } from "./control.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSwitch.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-checked",
@@ -63,36 +63,99 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		"change"
 	],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			checked: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "checked" },
+				description: "Whether the switch is checked initially or when set externally. A form reset returns it to this.",
+				default: false
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables the native switch, so it cannot be toggled or focused.",
+				default: false
+			},
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "The native name the switch submits under: a form that contains it sends name=value while it is on, and nothing while it is off, as a native checkbox does.\n      Left empty, it takes no part in form submission.",
+				default: ""
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "required" },
+				description: "Marks the native switch required, so native form validation treats it as invalid until it is on.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Aligns the switch with fields and buttons of the same size. It keeps its track size; the label takes that size's field type size and its first line centres\n      in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text\n      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The value a form submits under name while the switch is on, also reported in the change event's detail so one handler can tell switches apart. on by\n      default, as on a native checkbox.",
+				default: "on"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			checked: checkedProp(props["checked"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "checked", void 0, void 0),
+			}, false, "checked"),
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "name", void 0, void 0),
+			}, false, "name"),
 			required: checkedProp(props["required"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "required", void 0, void 0),
+			}, false, "required"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "size"),
 			value: checkedProp(props["value"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "value", void 0, void 0)
+			}, false, "value")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -116,6 +179,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const inputElement = useTemplateRef("input");
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
+		provide("html-next:ui-switch:internalChecked", internalChecked);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "label")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-switch> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -154,7 +218,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-switch" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-switch" }, nativeAttrs(_ctx.$attrs), {
 				"data-checked": reflectedProp("checked", "checked", checkedProps.value.checked, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
@@ -178,9 +242,12 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				value: internalChecked.value,
 				nativeProperty: true,
 				defaultChecked: false
-			}]]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1);
+			}]]), createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)], 512)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7697dc1c"]]);
+}), [["__scopeId", "data-v-0588367a"]]);
 //#endregion
 export { UiSwitch_default as t };

package/vue/chunks/UiSwitcher.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/UiSwitcher.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-align",
@@ -34,40 +34,81 @@ var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "How items line up while they sit in a row: stretch (the default) makes them equally tall; start, center, and end align their tops, middles, or\n      bottoms.",
+				values: [
+					"start",
+					"center",
+					"end",
+					"stretch"
+				]
+			},
+			gap: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "gap" },
+				description: "Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom\n      property, set on the switcher itself, overrides it; set on an ancestor, it does nothing.",
+				values: [
+					"xs",
+					"s",
+					"m",
+					"l",
+					"xl"
+				]
+			},
+			limit: {
+				type: {
+					kind: "terminal",
+					name: "integer"
+				},
+				required: false,
+				target: { attribute: "limit" },
+				description: "Most children allowed in a horizontal row. When the count exceeds this value, every child stacks regardless of width. Omit it for no count limit."
+			},
+			threshold: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "threshold" },
+				description: "The container width at which items switch between a row and a stack: wider, they all sit side by side; narrower, each takes the full width. xs is 20rem, sm\n      is 30rem (also the default), md is 45rem, and lg is 60rem.",
+				values: [
+					"xs",
+					"sm",
+					"md",
+					"lg"
+				]
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			align: checkedProp(props["align"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "align", void 0, [
-				"start",
-				"center",
-				"end",
-				"stretch"
-			]),
+			}, false, "align"),
 			gap: checkedProp(props["gap"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "gap", void 0, [
-				"xs",
-				"s",
-				"m",
-				"l",
-				"xl"
-			]),
+			}, false, "gap"),
 			limit: checkedProp(props["limit"], {
 				kind: "terminal",
 				name: "integer"
-			}, false, "limit", void 0, void 0),
+			}, false, "limit"),
 			threshold: checkedProp(props["threshold"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "threshold", void 0, [
-				"xs",
-				"sm",
-				"md",
-				"lg"
-			])
+			}, false, "threshold")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -88,6 +129,7 @@ var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const hydrationInstance = getCurrentInstance();
 		const root = ref(null);
 		const overLimit = ref(false);
+		provide("html-next:ui-switcher:overLimit", overLimit);
 		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-switcher> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -118,7 +160,7 @@ var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			state: { overLimit }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-switcher" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-switcher" }, nativeAttrs(_ctx.$attrs), {
 				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
 				"data-gap": reflectedProp("gap", "gap", checkedProps.value.gap, void 0, false),
 				"data-limit": reflectedProp("limit", "limit", checkedProps.value.limit, void 0, false),
@@ -126,9 +168,12 @@ var UiSwitcher_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-ui-switcher-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3015dd67"]]);
+}), [["__scopeId", "data-v-3773d175"]]);
 //#endregion
 export { UiSwitcher_default as t };

package/vue/chunks/UiTable.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, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiTable.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-density",
@@ -24,16 +24,39 @@ var UiTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			density: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "density" },
+				description: "How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of\n      the standard height (2.5rem), for tables read or edited at a glance; compact fits a small one (2rem), such as a Checkbox or a Button with size=\"sm\", for\n      long tables to scan.",
+				values: ["comfortable", "compact"],
+				default: "comfortable"
+			},
+			stickyHeader: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "stickyheader" },
+				description: "Keeps the header row in view while the rows scroll beneath it. The table scrolls inside its own box, so this needs a bounded height, such as a table that\n      fills a fixed-height panel.",
+				default: false
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			density: checkedProp(props["density"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "density", void 0, ["comfortable", "compact"]),
+			}, false, "density"),
 			stickyHeader: checkedProp(props["stickyHeader"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "stickyHeader", void 0, void 0)
+			}, false, "stickyHeader")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -78,15 +101,18 @@ var UiTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			props: checkedProps
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, nativeAttrs(_ctx.$attrs), {
 				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
 				"data-sticky-header": reflectedProp("stickyHeader", "sticky-header", checkedProps.value.stickyHeader, void 0, false),
 				"data-ui-table-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-14cd8610"]]);
+}), [["__scopeId", "data-v-b35c07bf"]]);
 //#endregion
 export { UiTable_default as t };

package/vue/chunks/UiTabs.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 { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { Fragment, computed, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, h, mergeProps, openBlock, provide, ref, renderList, renderSlot, toDisplayString, unref, useTemplateRef, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiTabs.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-activation",
@@ -56,32 +56,97 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 	},
 	emits: ["update:value", "select"],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			activation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "activation" },
+				description: "In auto mode, arrow keys move focus and select the next panel. In manual mode, arrows move focus while Enter or Space selects a panel. Use manual when\n      displaying a panel takes time.",
+				values: ["auto", "manual"],
+				default: "auto"
+			},
+			density: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "density" },
+				description: "Compact trades padding and type size for rows that fit more on screen.",
+				values: ["comfortable", "compact"],
+				default: "comfortable"
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "The tab list's accessible name, announced when focus enters the list. Name what the tabs switch between.",
+				default: "Tabs"
+			},
+			orientation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "aria-orientation" },
+				description: "horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,\n      moved between with Up and Down.",
+				values: ["horizontal", "vertical"],
+				default: "horizontal"
+			},
+			stretch: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "stretch" },
+				description: "Share the full width of the tab list equally between tabs instead of sizing each to its label.",
+				default: false
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The id of the selected panel, initially or when set externally; empty selects the first panel. Choosing a tab updates it from there and reports a select\n      event. A panel without an id is given a generated one.",
+				default: ""
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			activation: checkedProp(props["activation"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "activation", void 0, ["auto", "manual"]),
+			}, false, "activation"),
 			density: checkedProp(props["density"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "density", void 0, ["comfortable", "compact"]),
+			}, false, "density"),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			orientation: checkedProp(props["orientation"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "orientation", void 0, ["horizontal", "vertical"]),
+			}, false, "orientation"),
 			stretch: checkedProp(props["stretch"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "stretch", void 0, void 0),
+			}, false, "stretch"),
 			value: checkedProp(props["value"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "value", void 0, void 0)
+			}, false, "value")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -130,6 +195,8 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		const panelsElement = useTemplateRef("panels");
 		const internalValue = ref("");
 		const tabs = ref([]);
+		provide("html-next:ui-tabs:internalValue", internalValue);
+		provide("html-next:ui-tabs:tabs", tabs);
 		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-tabs> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -200,7 +267,7 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			return items;
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-tabs" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-tabs" }, nativeAttrs(_ctx.$attrs), {
 				"data-activation": reflectedProp("activation", "activation", checkedProps.value.activation, void 0, false),
 				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
@@ -229,9 +296,12 @@ var UiTabs_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 					}, toDisplayString(tab.label), 9, _hoisted_3);
 				}), 128))]),
 				_: 1
-			})])], 8, _hoisted_2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1);
+			})])], 8, _hoisted_2), createElementVNode("div", _hoisted_4, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-4cc3ab1c"]]);
+}), [["__scopeId", "data-v-be58bc21"]]);
 //#endregion
 export { UiTabs_default as t };