@threadlabs/looma 0.25.4 → 0.25.6

package/vue/UiTextarea.vue

@@ -32,6 +32,13 @@ const propValidityContract = {
       description: 'Exposes invalid state to assistive technology and styling.',
       default: false,
     },
+    maxRows: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'maxrows' },
+      description:
+        'Optional maximum visible rows, for a growing field in a bounded layout. Extra text scrolls inside the field. Omit it to retain unbounded growth.',
+    },
     readonly: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -75,6 +82,7 @@ const props = defineProps({
   autosize: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  maxRows: { type: null as unknown as PropType<number | null>, default: null },
   readonly: { type: null as unknown as PropType<boolean | null>, default: false },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
   rows: { type: null as unknown as PropType<number | null>, default: 4 },
@@ -86,6 +94,7 @@ const acceptedProps: Record<string, unknown> = {
   autosize: false,
   disabled: false,
   invalid: false,
+  maxRows: null,
   readonly: false,
   required: false,
   rows: 4,
@@ -114,6 +123,13 @@ const checkedProps = computed(() => ({
     'invalid',
     acceptedProps,
   ) as boolean,
+  maxRows: checkedProp<number>(
+    props['maxRows'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'maxRows',
+    acceptedProps,
+  ),
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
@@ -225,6 +241,8 @@ const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.maxRows && 'maxRows',
+    checkedProps.value.maxRows != null && `maxRows=${checkedProps.value.maxRows}`,
     checkedProps.value.autosize && 'autosize',
   ].filter(Boolean).join(' ')
 )
@@ -246,7 +264,17 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['autosize', 'disabled', 'invalid', 'readonly', 'required', 'rows', 'size', 'value'],
+  propNames: [
+    'autosize',
+    'disabled',
+    'invalid',
+    'maxRows',
+    'readonly',
+    'required',
+    'rows',
+    'size',
+    'value',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -261,11 +289,12 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     :rows="checkedProps.rows ?? undefined"
-    :style="{ '--_rows': checkedProps.rows ?? undefined }"
+    :style="{ '--_rows': checkedProps.rows ?? undefined, '--_max-rows': checkedProps.maxRows ?? undefined }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
     :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
@@ -466,6 +495,12 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   font-size: var(--ui-font-size-md);
 }
 
+[data-component~="ui-textarea"][data-ui-textarea-state~="maxRows"] {
+  max-block-size: calc(
+    max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
+  );
+}
+
 @supports (field-sizing: content) {
   [data-component~="ui-textarea"][data-ui-textarea-state~="autosize"] {
     field-sizing: content;

package/vue/chunks/UiCard.js

@@ -119,8 +119,15 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "tone" },
-				description: "danger adds a soft danger surface and a strong leading edge for consequential content.",
-				values: ["neutral", "danger"],
+				description: "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child\n      controls.",
+				values: [
+					"neutral",
+					"accent",
+					"info",
+					"success",
+					"warning",
+					"danger"
+				],
 				default: "neutral"
 			},
 			variant: {
@@ -267,6 +274,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fa2ae386"]]);
+}), [["__scopeId", "data-v-c589f774"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiCheckbox.js

@@ -9,6 +9,7 @@ var _hoisted_1 = [
 	"data-disabled",
 	"data-indeterminate",
 	"data-invalid",
+	"data-label",
 	"data-name",
 	"data-required",
 	"data-size",
@@ -16,6 +17,7 @@ var _hoisted_1 = [
 	"data-ui-checkbox-state"
 ];
 var _hoisted_2 = [
+	"aria-label",
 	".indeterminate",
 	"disabled",
 	"aria-invalid",
@@ -55,6 +57,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		label: {
+			type: null,
+			default: ""
+		},
 		name: {
 			type: null,
 			default: ""
@@ -119,6 +125,16 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Exposes an externally validated error and styles the checkbox with the field danger colour.",
 				default: false
 			},
+			label: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "aria-label" },
+				description: "An accessible name for a checkbox without a visible label slot. It names the native input.",
+				default: ""
+			},
 			name: {
 				type: {
 					kind: "terminal",
@@ -171,6 +187,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			disabled: false,
 			indeterminate: false,
 			invalid: false,
+			label: "",
 			name: "",
 			required: false,
 			size: "md",
@@ -193,6 +210,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "invalid", acceptedProps),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", acceptedProps),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
@@ -284,6 +305,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"disabled",
 				"indeterminate",
 				"invalid",
+				"label",
 				"name",
 				"required",
 				"size",
@@ -305,6 +327,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-indeterminate": reflectedProp("indeterminate", "indeterminate", checkedProps.value.indeterminate, void 0, false),
 				"data-invalid": reflectedProp("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
 				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
@@ -314,6 +337,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref: root
 			}), [withDirectives(createElementVNode("input", {
 				type: "checkbox",
+				"aria-label": checkedProps.value.label ?? void 0,
 				".indeterminate": checkedProps.value.indeterminate,
 				disabled: checkedProps.value.disabled ?? void 0,
 				"aria-invalid": checkedProps.value.invalid ?? void 0,
@@ -339,6 +363,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ce204e6e"]]);
+}), [["__scopeId", "data-v-3bebca63"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -4,8 +4,11 @@ import { computed, createElementBlock, defineComponent, getCurrentInstance, merg
 //#region .build/vue/UiCluster.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"data-align",
+	"data-fixed",
 	"data-gap",
 	"data-justify",
+	"data-padding",
+	"data-padding-end",
 	"data-wrap",
 	"data-ui-cluster-state"
 ];
@@ -19,6 +22,10 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: null,
 			default: null
 		},
+		fixed: {
+			type: null,
+			default: false
+		},
 		gap: {
 			type: null,
 			default: null
@@ -27,6 +34,14 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			type: null,
 			default: null
 		},
+		padding: {
+			type: null,
+			default: "none"
+		},
+		paddingEnd: {
+			type: null,
+			default: "none"
+		},
 		wrap: {
 			type: null,
 			default: null
@@ -41,14 +56,25 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				},
 				required: false,
 				target: { attribute: "align" },
-				description: "How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row.",
+				description: "How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row. baseline aligns the first text baselines, including multiline columns.",
 				values: [
 					"start",
 					"center",
 					"end",
-					"stretch"
+					"stretch",
+					"baseline"
 				]
 			},
+			fixed: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "fixed" },
+				description: "Keeps this group at its content size inside a flex layout.",
+				default: false
+			},
 			gap: {
 				type: {
 					kind: "terminal",
@@ -80,6 +106,39 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"between"
 				]
 			},
+			padding: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "padding" },
+				description: "Optional internal space for an action group, using the shared spacing scale.",
+				values: [
+					"none",
+					"s",
+					"m",
+					"l"
+				],
+				default: "none"
+			},
+			paddingEnd: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "paddingend" },
+				description: "Optional extra space at the inline end, such as clearance beside another control. xl is 4rem.",
+				values: [
+					"none",
+					"s",
+					"m",
+					"l",
+					"xl"
+				],
+				default: "none"
+			},
 			wrap: {
 				type: {
 					kind: "terminal",
@@ -94,8 +153,11 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const props = __props;
 		const acceptedProps = {
 			align: null,
+			fixed: false,
 			gap: null,
 			justify: null,
+			padding: "none",
+			paddingEnd: "none",
 			wrap: null
 		};
 		const checkedProps = computed(() => ({
@@ -103,6 +165,10 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				kind: "terminal",
 				name: "keyword"
 			}, false, "align", acceptedProps),
+			fixed: checkedProp(props["fixed"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "fixed", acceptedProps),
 			gap: checkedProp(props["gap"], {
 				kind: "terminal",
 				name: "keyword"
@@ -111,6 +177,14 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				kind: "terminal",
 				name: "keyword"
 			}, false, "justify", acceptedProps),
+			padding: checkedProp(props["padding"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "padding", acceptedProps),
+			paddingEnd: checkedProp(props["paddingEnd"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "paddingEnd", acceptedProps),
 			wrap: checkedProp(props["wrap"], {
 				kind: "terminal",
 				name: "keyword"
@@ -142,6 +216,11 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
+			checkedProps.value.fixed && "fixed",
+			checkedProps.value.padding && "padding",
+			checkedProps.value.padding != null && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
+			checkedProps.value.paddingEnd && "paddingEnd",
+			checkedProps.value.paddingEnd != null && `paddingEnd=${encodeURIComponent(checkedProps.value.paddingEnd)}`,
 			checkedProps.value.gap && "gap",
 			checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
 			checkedProps.value.align && "align",
@@ -154,8 +233,11 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, nativeAttrs(_ctx.$attrs), {
 				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
+				"data-fixed": reflectedProp("fixed", "fixed", checkedProps.value.fixed, 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-padding": reflectedProp("padding", "padding", checkedProps.value.padding, void 0, false),
+				"data-padding-end": reflectedProp("paddingEnd", "padding-end", checkedProps.value.paddingEnd, void 0, false),
 				"data-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-cluster-state": hostState.value || void 0
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
@@ -164,6 +246,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fafdad21"]]);
+}), [["__scopeId", "data-v-acd23e4a"]]);
 //#endregion
 export { UiCluster_default as t };

package/vue/chunks/UiEditorSurface.js

@@ -0,0 +1,71 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { a as vPropValidity, n as checkedProp } from "./props.js";
+import { computed, createElementBlock, defineComponent, getCurrentInstance, mergeProps, openBlock, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
+//#region .build/vue/UiEditorSurface.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-density", "data-ui-editor-surface-state"];
+//#endregion
+//#region .build/vue/UiEditorSurface.vue
+var UiEditorSurface_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiEditorSurface",
+	props: { density: {
+		type: null,
+		default: "comfortable"
+	} },
+	setup(__props) {
+		const propValidityContract = { props: { density: {
+			type: {
+				kind: "terminal",
+				name: "keyword"
+			},
+			required: false,
+			target: { attribute: "density" },
+			description: "The document canvas. comfortable preserves the editor's normal room and mobile toolbar clearance. compact fits a read-only excerpt to its content without\n      outer padding.",
+			values: ["comfortable", "compact"],
+			default: "comfortable"
+		} } };
+		const props = __props;
+		const acceptedProps = { density: "comfortable" };
+		const checkedProps = computed(() => ({ density: checkedProp(props["density"], {
+			kind: "terminal",
+			name: "keyword"
+		}, false, "density", acceptedProps) }));
+		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 !== "div")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-editor-surface> has an incompatible root."), {
+			name: "HtmlDiagnosticError",
+			diagnostic: Object.freeze({
+				code: "HR005",
+				message: "Server markup for <ui-editor-surface> has an incompatible root."
+			})
+		});
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [checkedProps.value.density && "density", checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`].filter(Boolean).join(" "));
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-editor-surface" }, nativeAttrs(_ctx.$attrs), {
+				"data-density": reflectedProp("density", "density", checkedProps.value.density, void 0, false),
+				"data-ui-editor-surface-state": hostState.value || void 0
+			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[unref(vPropValidity), {
+				contract: propValidityContract,
+				values: { ...props }
+			}]]);
+		};
+	}
+}), [["__scopeId", "data-v-7e72ed22"]]);
+//#endregion
+export { UiEditorSurface_default as t };

package/vue/chunks/UiListItem.js

@@ -6,6 +6,7 @@ var _hoisted_1 = [
 	"aria-current",
 	"data-current",
 	"data-highlighted",
+	"data-leading-interactive",
 	"data-variant",
 	"data-wrap",
 	"data-ui-list-item-state"
@@ -29,6 +30,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		leadingInteractive: {
+			type: null,
+			default: false
+		},
 		variant: {
 			type: null,
 			default: "row"
@@ -60,6 +65,16 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item's text; use current only for the current destination.",
 				default: false
 			},
+			leadingInteractive: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "leadinginteractive" },
+				description: "Makes the leading region an independent control above the row link. Use it for a checkbox or button; keep noninteractive row icons in the title link when\n      combining them with a leading control.",
+				default: false
+			},
 			variant: {
 				type: {
 					kind: "terminal",
@@ -86,6 +101,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const acceptedProps = {
 			current: false,
 			highlighted: false,
+			leadingInteractive: false,
 			variant: "row",
 			wrap: false
 		};
@@ -98,6 +114,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "highlighted", acceptedProps),
+			leadingInteractive: checkedProp(props["leadingInteractive"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "leadingInteractive", acceptedProps),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
@@ -137,6 +157,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current",
+			checkedProps.value.leadingInteractive && "leadingInteractive",
 			checkedProps.value.wrap && "wrap"
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
@@ -144,6 +165,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-current": checkedProps.value.current ?? void 0,
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
 				"data-highlighted": reflectedProp("highlighted", "highlighted", checkedProps.value.highlighted, void 0, false),
+				"data-leading-interactive": reflectedProp("leadingInteractive", "leading-interactive", checkedProps.value.leadingInteractive, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
@@ -157,6 +179,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9f16562f"]]);
+}), [["__scopeId", "data-v-8b9a3e2b"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/chunks/UiScrollArea.js

@@ -4,6 +4,7 @@ import { a as vPropValidity, n as checkedProp, r as propValidityState } from "./
 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-fill",
 	"data-orientation",
 	"data-size",
 	"data-ui-scroll-area-state"
@@ -14,6 +15,10 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	inheritAttrs: false,
 	__name: "UiScrollArea",
 	props: {
+		fill: {
+			type: null,
+			default: false
+		},
 		orientation: {
 			type: null,
 			default: "vertical"
@@ -25,6 +30,16 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			fill: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "fill" },
+				description: "Grows into remaining space within a flex layout while keeping content independently scrollable.",
+				default: false
+			},
 			orientation: {
 				type: {
 					kind: "terminal",
@@ -55,10 +70,15 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		} };
 		const props = __props;
 		const acceptedProps = {
+			fill: false,
 			orientation: "vertical",
 			size: "content"
 		};
 		const checkedProps = computed(() => ({
+			fill: checkedProp(props["fill"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "fill", acceptedProps),
 			orientation: checkedProp(props["orientation"], {
 				kind: "terminal",
 				name: "keyword"
@@ -97,6 +117,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
+			checkedProps.value.fill && "fill",
 			checkedProps.value.orientation && "orientation",
 			checkedProps.value.orientation != null && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
 			checkedProps.value.size && "size",
@@ -116,7 +137,11 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				const kebab = name.replace(/[A-Z]/g, (letter) => "-" + letter.toLowerCase());
 				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
 			},
-			propNames: ["orientation", "size"],
+			propNames: [
+				"fill",
+				"orientation",
+				"size"
+			],
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
 				values: { ...props }
@@ -125,6 +150,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		});
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-scroll-area" }, nativeAttrs(_ctx.$attrs), {
+				"data-fill": reflectedProp("fill", "fill", checkedProps.value.fill, void 0, false),
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-scroll-area-state": hostState.value || void 0,
@@ -140,6 +166,6 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7357ecdb"]]);
+}), [["__scopeId", "data-v-1f6366dd"]]);
 //#endregion
 export { UiScrollArea_default as t };