@threadlabs/looma 0.21.5 → 0.22.0

package/vue/chunks/UiSection.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, toDisplayString, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, toDisplayString, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSection.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-heading",
@@ -34,24 +34,58 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			heading: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "heading" },
+				description: "The section's heading, an h2. Leave it empty for a section with no visible heading, and name the section with aria-label.",
+				default: ""
+			},
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "danger marks a section of destructive actions (a danger zone): its heading and a card's border take the danger colour.",
+				values: ["neutral", "danger"],
+				default: "neutral"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "How the section is set apart. plain is a heading and content in the flow of the page; card sits it on a bordered surface, for a settings group; divided\n      rules it off from the section before it, for a long form.",
+				values: [
+					"plain",
+					"card",
+					"divided"
+				],
+				default: "plain"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			heading: checkedProp(props["heading"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "heading", void 0, void 0),
+			}, false, "heading"),
 			tone: checkedProp(props["tone"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "tone", void 0, ["neutral", "danger"]),
+			}, false, "tone"),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "variant", void 0, [
-				"plain",
-				"card",
-				"divided"
-			])
+			}, false, "variant")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -85,7 +119,7 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("section", mergeProps({ "data-component": "ui-section" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("section", mergeProps({ "data-component": "ui-section" }, nativeAttrs(_ctx.$attrs), {
 				"data-heading": reflectedProp("heading", "heading", checkedProps.value.heading, 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),
@@ -93,9 +127,12 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}), [createElementVNode("span", _hoisted_2, [createElementVNode("span", _hoisted_3, [createElementVNode("h2", {
 				class: "heading",
 				hidden: !checkedProps.value.heading
-			}, toDisplayString(checkedProps.value.heading), 9, _hoisted_4), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])]), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1);
+			}, toDisplayString(checkedProps.value.heading), 9, _hoisted_4), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]), createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])]), createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-23647879"]]);
+}), [["__scopeId", "data-v-733826b4"]]);
 //#endregion
 export { UiSection_default as t };

package/vue/chunks/UiSelect.js

@@ -1,6 +1,6 @@
 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 { n as readBoundControl, r as vBindControl, t as SelectedOptions } from "./control.js";
 import { computed, createElementBlock, createVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, ref, renderSlot, unref, watchSyncEffect, withCtx, withDirectives } from "vue";
 //#region .build/vue/UiSelect.vue?vue&type=script&setup=true&lang.ts
@@ -45,36 +45,88 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			disabled: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "disabled" },
+				description: "Prevents selection and form submission.",
+				default: false
+			},
+			invalid: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "aria-invalid" },
+				description: "Exposes invalid state to assistive technology and styling.",
+				default: false
+			},
+			required: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "required" },
+				description: "Requires a non-empty option for form validation.",
+				default: false
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "Height, padding, chevron, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by\n      default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller\n      with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select\n      is always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			value: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "value" },
+				description: "The value of the selected option, initially or when set externally. It is also the default, so a form reset returns to it rather than to the first\n      option."
+			}
+		} };
 		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"),
 			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"),
 			modelValue: checkedProp(props.modelValue, {
 				kind: "terminal",
 				name: "string"
-			}, false, "modelValue", void 0, void 0)
+			}, false, "modelValue")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -140,7 +192,10 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 				_: 3
-			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vBindControl), {
+			}, 8, ["value"])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}], [unref(vBindControl), {
 				tag: "select",
 				name: "value",
 				value: model.value,
@@ -148,6 +203,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-da3beb3b"]]);
+}), [["__scopeId", "data-v-560178c9"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSeparator.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, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSeparator.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-orientation", "data-orientation"];
 //#endregion
@@ -13,11 +13,22 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 		default: "horizontal"
 	} },
 	setup(__props) {
+		const propValidityContract = { props: { orientation: {
+			type: {
+				kind: "terminal",
+				name: "keyword"
+			},
+			required: false,
+			target: { attribute: "aria-orientation" },
+			description: "Whether the separator divides stacked content (horizontal) or inline content (vertical).",
+			values: ["horizontal", "vertical"],
+			default: "horizontal"
+		} } };
 		const props = __props;
 		const checkedProps = computed(() => ({ orientation: checkedProp(props["orientation"], {
 			kind: "terminal",
 			name: "keyword"
-		}, false, "orientation", void 0, ["horizontal", "vertical"]) }));
+		}, false, "orientation") }));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -43,12 +54,15 @@ var UiSeparator_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__
 			})
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("hr", mergeProps({ "data-component": "ui-separator" }, nativeAttrs(_ctx.$attrs), {
 				"aria-orientation": checkedProps.value.orientation ?? void 0,
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false)
-			}), null, 16, _hoisted_1);
+			}), null, 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-330bc21b"]]);
+}), [["__scopeId", "data-v-38463d0f"]]);
 //#endregion
 export { UiSeparator_default as t };

package/vue/chunks/UiSidebar.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/UiSidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-breakpoint",
@@ -66,48 +66,142 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		"toggle"
 	],
 	setup(__props, { emit: __emit }) {
+		const propValidityContract = { props: {
+			breakpoint: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "breakpoint" },
+				description: "Below this viewport width (40rem, 48rem, 64rem) the sidebar becomes an off-canvas drawer, closed until toggled.",
+				values: [
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "md"
+			},
+			collapsed: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "collapsed" },
+				description: "Whether the docked sidebar is collapsed.",
+				default: false
+			},
+			maxWidth: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "maxwidth" },
+				description: "The widest width the resize handle allows, in pixels.",
+				default: 480
+			},
+			minWidth: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "minwidth" },
+				description: "The narrowest width the resize handle allows, in pixels.",
+				default: 200
+			},
+			resizable: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "resizable" },
+				description: "Adds a resize handle on the inner edge (drag, or arrow keys, Home, and End).",
+				default: false
+			},
+			resizeLabel: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "Accessible name of the resize handle.",
+				default: "Resize sidebar"
+			},
+			resizeStep: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "resizestep" },
+				description: "Arrow-key resize step in pixels.",
+				default: 16
+			},
+			side: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "side" },
+				description: "The edge the sidebar sits on. The page places it beside its main content.",
+				values: ["start", "end"],
+				default: "start"
+			},
+			width: {
+				type: {
+					kind: "terminal",
+					name: "number"
+				},
+				required: false,
+				target: { attribute: "width" },
+				description: "Docked width in pixels. 0 uses --ui-sidebar-width (280px by default); dragging the handle updates it.",
+				default: 0
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			breakpoint: checkedProp(props["breakpoint"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "breakpoint", void 0, [
-				"sm",
-				"md",
-				"lg"
-			]),
+			}, false, "breakpoint"),
 			collapsed: checkedProp(props["collapsed"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "collapsed", void 0, void 0),
+			}, false, "collapsed"),
 			maxWidth: checkedProp(props["maxWidth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "maxWidth", void 0, void 0),
+			}, false, "maxWidth"),
 			minWidth: checkedProp(props["minWidth"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "minWidth", void 0, void 0),
+			}, false, "minWidth"),
 			resizable: checkedProp(props["resizable"], {
 				kind: "terminal",
 				name: "boolean"
-			}, false, "resizable", void 0, void 0),
+			}, false, "resizable"),
 			resizeLabel: checkedProp(props["resizeLabel"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "resizeLabel", void 0, void 0),
+			}, false, "resizeLabel"),
 			resizeStep: checkedProp(props["resizeStep"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "resizeStep", void 0, void 0),
+			}, false, "resizeStep"),
 			side: checkedProp(props["side"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "side", void 0, ["start", "end"]),
+			}, false, "side"),
 			width: checkedProp(props["width"], {
 				kind: "terminal",
 				name: "number"
-			}, false, "width", void 0, void 0)
+			}, false, "width")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -131,6 +225,13 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const resizerElement = useTemplateRef("resizer");
 		const internalCollapsed = ref(false);
 		const drawer = ref(false);
+		let guardedPrevious;
+		const guarded = computed(() => {
+			if (!((drawer.value == null || typeof drawer.value === "boolean") && (internalCollapsed.value == null || typeof internalCollapsed.value === "boolean"))) return guardedPrevious;
+			return guardedPrevious = !checkedProps.value.resizable || drawer.value || internalCollapsed.value;
+		});
+		provide("html-next:ui-sidebar:internalCollapsed", internalCollapsed);
+		provide("html-next:ui-sidebar:drawer", drawer);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "aside")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-sidebar> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -173,7 +274,7 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("aside", mergeProps({ "data-component": "ui-sidebar" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("aside", mergeProps({ "data-component": "ui-sidebar" }, nativeAttrs(_ctx.$attrs), {
 				"data-breakpoint": reflectedProp("breakpoint", "breakpoint", checkedProps.value.breakpoint, void 0, false),
 				"data-collapsed": reflectedProp("collapsed", "collapsed", checkedProps.value.collapsed, void 0, false),
 				"data-max-width": reflectedProp("maxWidth", "max-width", checkedProps.value.maxWidth, void 0, false),
@@ -193,14 +294,17 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				tabindex: "0",
 				"data-ui-affordance": "resize",
 				"aria-label": checkedProps.value.resizeLabel ?? void 0,
-				hidden: !checkedProps.value.resizable || drawer.value || internalCollapsed.value,
+				hidden: guarded.value,
 				ref: "resizer"
 			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
 				class: "guide",
 				"aria-hidden": "true"
-			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1);
+			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7e0ccf24"]]);
+}), [["__scopeId", "data-v-ecac8900"]]);
 //#endregion
 export { UiSidebar_default as t };

package/vue/chunks/UiSpinner.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, watchSyncEffect } from "vue";
+import { r as vPropValidity, t as checkedProp } from "./props.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiSpinner.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"role",
@@ -27,16 +27,39 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "label" },
+				description: "What is loading, for assistive technology (\"Loading pages\"). With a label the spinner is a status that is announced; without one it is decoration, for a\n      spinner beside visible text that already says so.",
+				default: ""
+			},
+			size: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "size" },
+				description: "sm fits inside a button or a line of small text; md sits beside body text.",
+				values: ["sm", "md"],
+				default: "md"
+			}
+		} };
 		const props = __props;
 		const checkedProps = computed(() => ({
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "label", void 0, void 0),
+			}, false, "label"),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", void 0, ["sm", "md"])
+			}, false, "size")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -73,7 +96,7 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return value === true ? "" : text(value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("span", mergeProps({
+			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
 				"data-component": "ui-spinner",
 				class: "ring"
 			}, nativeAttrs(_ctx.$attrs), {
@@ -129,9 +152,12 @@ var UiSpinner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				cx: "25",
 				cy: "25",
 				r: "20"
-			})], -1)])], 16, _hoisted_1);
+			})], -1)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...checkedProps.value }
+			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8de2921b"]]);
+}), [["__scopeId", "data-v-dd46da2f"]]);
 //#endregion
 export { UiSpinner_default as t };

package/vue/chunks/UiStack.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/UiStack.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-align",
@@ -28,36 +28,68 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		}
 	},
 	setup(__props) {
+		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the\n      start, in the middle, or against the end.",
+				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-stack-gap custom property,\n      set on the stack itself, overrides it; set on an ancestor, it does nothing.",
+				values: [
+					"xs",
+					"s",
+					"m",
+					"l",
+					"xl"
+				]
+			},
+			justify: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "justify" },
+				description: "Where items sit along a stack that is taller than its content: start (the default), center, end, or between, which spreads the spare space between items.\n      It has no effect unless the stack is given a height or stretched to one.",
+				values: [
+					"start",
+					"center",
+					"end",
+					"between"
+				]
+			}
+		} };
 		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"),
 			justify: checkedProp(props["justify"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "justify", void 0, [
-				"start",
-				"center",
-				"end",
-				"between"
-			])
+			}, false, "justify")
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -93,14 +125,17 @@ var UiStack_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			checkedProps.value.justify != null && `justify=${encodeURIComponent(checkedProps.value.justify)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-stack" }, nativeAttrs(_ctx.$attrs), {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-stack" }, 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-justify": reflectedProp("justify", "justify", checkedProps.value.justify, void 0, false),
 				"data-ui-stack-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-0109dc0e"]]);
+}), [["__scopeId", "data-v-5d511bbb"]]);
 //#endregion
 export { UiStack_default as t };