@threadlabs/looma 0.25.4 → 0.25.5

package/vue/UiText.d.ts

@@ -36,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "sans" | null>;
         default: string;
     };
+    grow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -73,6 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "sans" | null>;
         default: string;
     };
+    grow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -105,6 +113,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
     wrap: "normal" | "anywhere" | null;
+    grow: boolean | null;
     truncate: boolean | null;
     weight: "inherit" | "medium" | "normal" | "semibold" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiText.vue

@@ -35,6 +35,14 @@ const propValidityContract = {
       values: ['inherit', 'sans'],
       default: 'inherit',
     },
+    grow: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'grow' },
+      description:
+        'Lets this text use remaining inline space in a flex row, including when truncated.',
+      default: false,
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -98,6 +106,7 @@ const props = defineProps({
     default: 'p',
   },
   font: { type: null as unknown as PropType<'inherit' | 'sans' | null>, default: 'inherit' },
+  grow: { type: null as unknown as PropType<boolean | null>, default: false },
   size: {
     type: null as unknown as PropType<'inherit' | 'xs' | 'sm' | 'md' | 'lg' | null>,
     default: 'inherit',
@@ -131,6 +140,7 @@ const acceptedProps: Record<string, unknown> = {
   align: 'start',
   as: 'p',
   font: 'inherit',
+  grow: false,
   size: 'inherit',
   tone: 'default',
   truncate: false,
@@ -167,6 +177,13 @@ const checkedProps = computed(() => ({
     'font',
     acceptedProps,
   ) as 'inherit' | 'sans',
+  grow: checkedProp<boolean>(
+    props['grow'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'grow',
+    acceptedProps,
+  ) as boolean,
   size: checkedProp<'inherit' | 'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -291,6 +308,7 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.grow && 'grow',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.tone && 'tone',
@@ -320,6 +338,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -337,6 +356,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -356,6 +376,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -373,6 +394,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -390,6 +412,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -407,6 +430,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -426,6 +450,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -445,6 +470,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -464,6 +490,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -483,6 +510,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -502,6 +530,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -519,6 +548,10 @@ const hostState = computed(() =>
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
+[data-component~="ui-text"][data-ui-text-state~="grow"] {
+  flex: 1;
+}
+
 [data-component~="ui-text"] {
   margin: 0;
   min-inline-size: 0;

package/vue/UiTextarea.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<boolean | null>;
         default: boolean;
     };
+    maxRows: {
+        type: PropType<number | null>;
+        default: null;
+    };
     readonly: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -50,6 +54,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<boolean | null>;
         default: boolean;
     };
+    maxRows: {
+        type: PropType<number | null>;
+        default: null;
+    };
     readonly: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -83,6 +91,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean | null;
     required: boolean | null;
     readonly: boolean | null;
+    maxRows: number | null;
     autosize: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;

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/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
@@ -49,6 +64,16 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"stretch"
 				]
 			},
+			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 +105,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 +152,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 +164,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 +176,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 +215,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 +232,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 +245,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fafdad21"]]);
+}), [["__scopeId", "data-v-e3a64464"]]);
 //#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/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 };