@threadlabs/looma 0.21.5 → 0.22.0

package/vue/chunks/UiRadio.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/UiRadio.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-checked",
@@ -63,36 +63,99 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		"change"
 	],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			checked: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "checked" },
+				description: "Whether the radio is checked initially or when set externally. A form reset returns it to this. Inside a ui-radio-group the group's value decides\n      instead.",
+				default: false
+			},
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables the native radio, so it cannot be chosen, focused, or reached with the arrow keys.",
+				default: false
+			},
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "The native name that groups radios: of the radios that share a name, only one can be checked, and the arrow keys move between them. Inside a ui-radio-group\n      the group sets the name, so leave this empty there.",
+				default: ""
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "required" },
+				description: "Marks the native radio required, so native form validation fails until a radio with the same name is checked.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Aligns the radio with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres in\n      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 baseline.\n      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 this radio stands for: submitted with a form, reported in its change event, and matched against a ui-radio-group's value to decide which radio is\n      checked.",
+				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 UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const inputElement = useTemplateRef("input");
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
+		provide("html-next:ui-radio: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-radio> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -154,7 +218,7 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			state: { internalChecked }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-radio" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("label", mergeProps({ "data-component": "ui-radio" }, 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),
@@ -177,9 +241,12 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				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-3b478b4d"]]);
+}), [["__scopeId", "data-v-c32e5116"]]);
 //#endregion
 export { UiRadio_default as t };

package/vue/chunks/UiRadioGroup.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, 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, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiRadioGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-required",
@@ -57,36 +57,109 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		"change"
 	],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables every radio in the group through the native fieldset, so no choice can be made and the group submits nothing with its form. A radio disabled on\n      its own stays disabled when the group is enabled.",
+				default: false
+			},
+			invalid: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-invalid" },
+				description: "Exposes an externally validated error on the group and styles its legend with the field danger colour.",
+				default: false
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "label" },
+				description: "The group's legend, shown above the radios and announced as the group's name. Phrase it as the question the radios answer.",
+				default: "Options"
+			},
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "The native name given to every radio in the group, under which a form submits the chosen value. Left empty, the group generates a unique name that keeps\n      the radios together, so set it when the choice submits with a form.",
+				default: ""
+			},
+			orientation: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "orientation" },
+				description: "horizontal lays the radios out in a row; vertical stacks them in a column. The arrow keys move between radios either way.",
+				values: ["horizontal", "vertical"],
+				default: "horizontal"
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-required" },
+				description: "Makes a choice required, as a required native radio does for its group: the group states aria-required, every radio in it is marked required, and native\n      form validation fails until one is checked.",
+				default: false
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The value of the checked radio, initially or when set externally; empty checks none. The user's choice updates it from there and is reported as select and\n      change events, and a form reset returns the group to it.",
+				default: ""
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			invalid: checkedProp(props["invalid"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "invalid", void 0, void 0),
+			}, false, "invalid"),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "name", void 0, void 0),
+			}, false, "name"),
 			orientation: checkedProp(props["orientation"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "orientation", void 0, ["horizontal", "vertical"]),
+			}, false, "orientation"),
 			required: checkedProp(props["required"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "required", void 0, void 0),
+			}, false, "required"),
 			value: checkedProp(props["value"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "value", void 0, void 0)
+			}, false, "value")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -108,6 +181,7 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const emit = __emit;
 		const root = ref(null);
 		const internalValue = ref("");
+		provide("html-next:ui-radio-group:internalValue", internalValue);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "fieldset")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-radio-group> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -150,7 +224,7 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			state: { internalValue }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("fieldset", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("fieldset", mergeProps({
 				"data-component": "ui-radio-group",
 				role: "radiogroup"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -167,9 +241,12 @@ var UiRadioGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-ui-radio-group-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("legend", null, toDisplayString(checkedProps.value.label), 1), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
+			}), [createElementVNode("legend", null, toDisplayString(checkedProps.value.label), 1), renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c3c6550c"]]);
+}), [["__scopeId", "data-v-f987b361"]]);
 //#endregion
 export { UiRadioGroup_default as t };

package/vue/chunks/UiReel.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/UiReel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-gap",
@@ -28,30 +28,62 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			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-reel-gap custom property,\n      set on the reel itself, overrides it; set on an ancestor, it does nothing.",
+				values: [
+					"xs",
+					"s",
+					"m",
+					"l",
+					"xl"
+				]
+			},
+			itemWidth: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "itemwidth" },
+				description: "A fixed width for every item: sm is 12rem, md is 16rem, and lg is 20rem. Unset, each item keeps its content's width. Items never shrink to fit, so the reel\n      scrolls sideways once they overflow.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				]
+			},
+			snap: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "snap" },
+				description: "Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel\n      scrolls freely.",
+				values: ["start", "center"]
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			gap: checkedProp(props["gap"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "gap", void 0, [
-				"xs",
-				"s",
-				"m",
-				"l",
-				"xl"
-			]),
+			}, false, "gap"),
 			itemWidth: checkedProp(props["itemWidth"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "itemWidth", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "itemWidth"),
 			snap: checkedProp(props["snap"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "snap", void 0, ["start", "center"])
+			}, false, "snap")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -87,7 +119,7 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			checkedProps.value.snap != null && `snap=${encodeURIComponent(checkedProps.value.snap)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({
 				"data-component": "ui-reel",
 				role: "region",
 				tabindex: "0"
@@ -96,9 +128,12 @@ var UiReel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				"data-item-width": reflectedProp("itemWidth", "item-width", checkedProps.value.itemWidth, void 0, false),
 				"data-snap": reflectedProp("snap", "snap", checkedProps.value.snap, void 0, false),
 				"data-ui-reel-state": hostState.value || void 0
-			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-94074a4e"]]);
+}), [["__scopeId", "data-v-9fb4110f"]]);
 //#endregion
 export { UiReel_default as t };

package/vue/chunks/UiScrollArea.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, useTemplateRef, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiScrollArea.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-orientation", "data-ui-scroll-area-state"];
 var _hoisted_2 = {
@@ -18,11 +18,22 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		default: "vertical"
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { orientation: {
+			type: {
+				kind: "terminal",
+				name: "keyword"
+			},
+			required: false,
+			target: { attribute: "orientation" },
+			description: "The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical\n      overflow.",
+			values: ["vertical", "horizontal"],
+			default: "vertical"
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ orientation: checkedProp(props["orientation"], {
 			kind: "terminal",
 			name: "keyword"
-		}, false, "orientation", void 0, ["vertical", "horizontal"]) }));
+		}, false, "orientation") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -64,14 +75,17 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			refs: { content: contentElement }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-scroll-area" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-scroll-area" }, nativeAttrs(_ctx.$attrs), {
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
 				"data-ui-scroll-area-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16, _hoisted_1);
+			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-505e4809"]]);
+}), [["__scopeId", "data-v-0b6d2927"]]);
 //#endregion
 export { UiScrollArea_default as t };

package/vue/chunks/UiSearchResultRow.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/UiSearchResultRow.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"disabled",
@@ -31,16 +31,38 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Disables the row's button, so it cannot be chosen or focused, and gives it a flat muted treatment.",
+				default: false
+			},
+			selected: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-current" },
+				description: "Marks the row as the current result: it gets the hover surface and aria-current=\"true\", which assistive technology announces as current. Set it on one row\n      at a time, such as the result the arrow keys have moved to.",
+				default: false
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			disabled: checkedProp(props["disabled"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "disabled", void 0, void 0),
+			}, false, "disabled"),
 			selected: checkedProp(props["selected"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "selected", void 0, void 0)
+			}, false, "selected")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -69,7 +91,7 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [checkedProps.value.selected && "selected"].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("button", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("button", mergeProps({
 				"data-component": "ui-search-result-row",
 				type: "button"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -86,9 +108,12 @@ var UiSearchResultRow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 					createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "excerpt")])
 				]),
 				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "trailing")])
-			], 16, _hoisted_1);
+			], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9aa45ac9"]]);
+}), [["__scopeId", "data-v-7577310c"]]);
 //#endregion
 export { UiSearchResultRow_default as t };

package/vue/chunks/UiSearchShell.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, 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, unref, useTemplateRef, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSearchShell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-dismissible",
@@ -40,24 +40,66 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	},
 	emits: ["update:open", "close"],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			dismissible: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "dismissible" },
+				description: "Allows backdrop activation to close the search surface. Escape always closes it.",
+				default: false
+			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "Provides the native dialog's accessible name.",
+				default: "Search"
+			},
+			modal: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "modal" },
+				description: "Makes the rest of the page inert while the search surface is open.",
+				default: false
+			},
+			open: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "open" },
+				description: "Shows the search surface.",
+				default: false
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			dismissible: checkedProp(props["dismissible"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "dismissible", void 0, void 0),
+			}, false, "dismissible"),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			modal: checkedProp(props["modal"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "modal", void 0, void 0),
+			}, false, "modal"),
 			open: checkedProp(props["open"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "open", void 0, void 0)
+			}, false, "open")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -80,6 +122,7 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 		const root = ref(null);
 		const dialogElement = useTemplateRef("dialog");
 		const internalOpen = ref(false);
+		provide("html-next:ui-search-shell:internalOpen", internalOpen);
 		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-search-shell> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -109,7 +152,7 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			state: { internalOpen }
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-search-shell" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-search-shell" }, nativeAttrs(_ctx.$attrs), {
 				"data-dismissible": reflectedProp("dismissible", "dismissible", checkedProps.value.dismissible, void 0, false),
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-modal": reflectedProp("modal", "modal", checkedProps.value.modal, void 0, false),
@@ -124,9 +167,12 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 				createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "status")]),
 				createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "body")]),
 				createElementVNode("div", _hoisted_7, [renderSlot(_ctx.$slots, "footer")])
-			])], 8, _hoisted_2)], 16, _hoisted_1);
+			])], 8, _hoisted_2)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0cced7f9"]]);
+}), [["__scopeId", "data-v-5489114a"]]);
 //#endregion
 export { UiSearchShell_default as t };