@threadlabs/looma 0.13.6 → 0.14.1

package/vue/UiTable.d.ts

@@ -0,0 +1,20 @@
+type __VLS_Props = {
+    density?: 'comfortable' | 'compact';
+    stickyHeader?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    density: "comfortable" | "compact";
+    stickyHeader: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiTable.js

@@ -0,0 +1,2 @@
+import { t as UiTable_default } from "./chunks/UiTable.js";
+export { UiTable_default as default };

package/vue/UiTable.vue

@@ -0,0 +1,172 @@
+<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import * as controllerModule from '../components/ui-table/ui-table.js'
+import { createDispatch, useComponentHost } from './host'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    density?: 'comfortable' | 'compact'
+    stickyHeader?: boolean
+  }>(),
+  {
+    density: 'comfortable',
+    stickyHeader: false,
+  },
+)
+
+const root = ref<HTMLElement | null>(null)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.density && `density density=${props.density}`,
+    props.stickyHeader && 'stickyHeader',
+  ].filter(Boolean).join(' ')
+)
+
+const dispatch = createDispatch(root)
+
+useComponentHost(controllerModule.default, {
+  root,
+  dispatch,
+  props,
+})
+</script>
+
+<template>
+  <div
+    data-component="ui-table"
+    v-bind="$attrs"
+    :data-ui-table-state="hostState || undefined"
+    ref="root"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+/* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+[data-component~="ui-table"] {
+  --_pad-block: var(--ui-space-1);
+  --_pad-inline: var(--ui-space-3);
+  --_row-size: var(--ui-control-size);
+  display: block;
+  box-sizing: border-box;
+  max-inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  overscroll-behavior-inline: contain;
+  /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+     fade, so a sticky header never fades. */
+  --_ui-scroll-fade-direction: to right;
+  --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+  mask-image: linear-gradient(
+    var(--_ui-scroll-fade-direction),
+    transparent,
+    #000 var(--_ui-scroll-fade-start),
+    #000 calc(100% - var(--_ui-scroll-fade-end)),
+    transparent
+  );
+  animation:
+    ui-scroll-fade-start linear,
+    ui-scroll-fade-start-hold linear,
+    ui-scroll-fade-end-hold linear,
+    ui-scroll-fade-end linear;
+  animation-timeline: scroll(self inline);
+  animation-range:
+    0 var(--_ui-scroll-fade-size),
+    var(--_ui-scroll-fade-size) calc(100% + 1px),
+    -1px calc(100% - var(--_ui-scroll-fade-size)),
+    calc(100% - var(--_ui-scroll-fade-size)) 100%;
+}
+
+[data-component~="ui-table"]:dir(rtl) {
+  --_ui-scroll-fade-direction: to left;
+}
+
+[data-component~="ui-table"]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: -2px;
+}
+
+[data-component~="ui-table"][data-ui-table-state~="density=compact"] {
+  --_pad-block: var(--ui-space-0-5);
+  --_pad-inline: var(--ui-space-2);
+  --_row-size: var(--ui-control-size-sm);
+}
+
+/* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+:slotted(table) {
+  inline-size: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  color: var(--ui-text-primary);
+  font-size: var(--ui-font-size-sm);
+  line-height: var(--ui-line-height);
+  font-variant-numeric: tabular-nums;
+}
+
+:slotted(caption) {
+  padding-block-end: var(--ui-space-2);
+  color: var(--ui-text-secondary);
+  font-weight: var(--ui-font-medium);
+  text-align: start;
+}
+
+/* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+   rhythm of the rows around it. A cell's height is its minimum. */
+:slotted(th),
+:slotted(td) {
+  block-size: var(--_row-size);
+  padding: var(--_pad-block) var(--_pad-inline);
+  border-block-end: 1px solid var(--ui-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+
+:slotted(thead th) {
+  block-size: auto;
+  padding-block: var(--ui-space-2);
+  border-block-end-color: var(--ui-border-default);
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  font-weight: var(--ui-font-medium);
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+
+:slotted(tbody th) {
+  font-weight: var(--ui-font-medium);
+}
+
+:slotted(tbody tr:last-child > *) {
+  border-block-end-width: 0;
+}
+
+:slotted([data-ui-align="center"]) {
+  text-align: center;
+}
+
+:slotted([data-ui-align="end"]) {
+  text-align: end;
+}
+
+[data-component~="ui-table"][data-ui-table-state~="stickyHeader"] :slotted(thead th) {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 1;
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-table"][hidden] {
+  display: none;
+}
+</style>

package/vue/UiTextarea.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     readonly?: boolean;
     required?: boolean;
     rows?: number;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
     modelValue?: string | null;
 };
@@ -13,6 +14,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     invalid: boolean;
+    size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
     readonly: boolean;

package/vue/UiTextarea.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     readonly?: boolean
     required?: boolean
     rows?: number
+    size?: 'sm' | 'md' | 'lg'
     value?: string
     modelValue?: string | null
   }>(),
@@ -22,6 +23,7 @@ const props = withDefaults(
     readonly: false,
     required: false,
     rows: 4,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
@@ -34,6 +36,13 @@ const model = computed({
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -53,6 +62,7 @@ useComponentHost(controllerModule.default, {
     :aria-invalid="invalid"
     :rows="rows"
     v-model="model"
+    :data-ui-textarea-state="hostState || undefined"
     ref="root"
   ></textarea>
 </template>
@@ -139,6 +149,23 @@ useComponentHost(controllerModule.default, {
   cursor: not-allowed;
 }
 
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+}
+
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"] {
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: var(--ui-font-size-md);
+}
+
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+@media (pointer: coarse) {
+  [data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"] {
+    font-size: inherit;
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-textarea"][hidden] {
   display: none;

package/vue/chunks/UiButton.js

@@ -87,6 +87,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_2));
 		};
 	}
-}), [["__scopeId", "data-v-a45835c7"]]);
+}), [["__scopeId", "data-v-bd32a08d"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCheckbox.js

@@ -42,6 +42,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: { default: "on" }
 	},
 	emits: [
@@ -57,7 +58,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -94,6 +95,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}, null, 40, _hoisted_2), 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);
 		};
 	}
-}), [["__scopeId", "data-v-e122df08"]]);
+}), [["__scopeId", "data-v-bfcc98e1"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCombobox.js

@@ -488,6 +488,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-1482f333"]]);
+}), [["__scopeId", "data-v-fd4a871f"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiDescriptionList.js

@@ -7,15 +7,23 @@ var _hoisted_1 = ["data-ui-description-list-state"];
 var UiDescriptionList_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiDescriptionList",
-	props: { layout: { default: "rows" } },
+	props: {
+		columns: {},
+		density: { default: "comfortable" },
+		layout: { default: "rows" }
+	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.layout && `layout layout=${props.layout}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.layout && `layout layout=${props.layout}`,
+			props.columns && `columns columns=${props.columns}`,
+			props.density && `density density=${props.density}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("dl", mergeProps({ "data-component": "ui-description-list" }, _ctx.$attrs, { "data-ui-description-list-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a4548235"]]);
+}), [["__scopeId", "data-v-640c2332"]]);
 //#endregion
 export { UiDescriptionList_default as t };

package/vue/chunks/UiInput.js

@@ -7,7 +7,8 @@ var _hoisted_1 = [
 	"disabled",
 	"readonly",
 	"required",
-	"aria-invalid"
+	"aria-invalid",
+	"data-ui-input-state"
 ];
 //#endregion
 //#region .build/vue/UiInput.vue
@@ -31,6 +32,7 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: {},
 		modelValue: {}
 	},
@@ -43,6 +45,8 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -56,11 +60,12 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				required: __props.required,
 				"aria-invalid": __props.invalid,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				"data-ui-input-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), null, 16, _hoisted_1)), [[vModelDynamic, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-e1edefb2"]]);
+}), [["__scopeId", "data-v-4ba095d3"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -41,6 +41,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d57b2ead"]]);
+}), [["__scopeId", "data-v-26a5b56d"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiRadio.js

@@ -37,6 +37,7 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: { default: "on" }
 	},
 	emits: [
@@ -52,7 +53,7 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -88,6 +89,6 @@ var UiRadio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}, null, 40, _hoisted_2), 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);
 		};
 	}
-}), [["__scopeId", "data-v-293c00d6"]]);
+}), [["__scopeId", "data-v-02111ebf"]]);
 //#endregion
 export { UiRadio_default as t };

package/vue/chunks/UiSelect.js

@@ -6,7 +6,8 @@ import * as controllerModule from "@threadlabs/looma/components/ui-select/ui-sel
 var _hoisted_1 = [
 	"disabled",
 	"required",
-	"aria-invalid"
+	"aria-invalid",
+	"data-ui-select-state"
 ];
 //#endregion
 //#region .build/vue/UiSelect.vue
@@ -26,6 +27,7 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: {},
 		modelValue: {}
 	},
@@ -38,6 +40,8 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -50,11 +54,12 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				required: __props.required,
 				"aria-invalid": __props.invalid,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				"data-ui-select-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1)), [[vModelSelect, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-57618b8b"]]);
+}), [["__scopeId", "data-v-c81ec3d9"]]);
 //#endregion
 export { UiSelect_default as t };

package/vue/chunks/UiSwitch.js

@@ -37,6 +37,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			type: Boolean,
 			default: false
 		},
+		size: { default: "md" },
 		value: { default: "on" }
 	},
 	emits: [
@@ -52,7 +53,7 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const descriptionElement = useTemplateRef("description");
 		const internalChecked = ref(false);
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.disabled && "disabled"].filter(Boolean).join(" "));
+		const hostState = computed(() => [props.disabled && "disabled", props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const isChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["checked"] === "boolean" && typeof detail["value"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"checked",
 			"value",
@@ -89,6 +90,6 @@ var UiSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}, null, 40, _hoisted_2), 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);
 		};
 	}
-}), [["__scopeId", "data-v-98e06e1e"]]);
+}), [["__scopeId", "data-v-87fc218c"]]);
 //#endregion
 export { UiSwitch_default as t };

package/vue/chunks/UiTable.js

@@ -0,0 +1,40 @@
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { n as useComponentHost, t as createDispatch } from "./host.js";
+import { computed, createElementBlock, defineComponent, mergeProps, openBlock, ref, renderSlot } from "vue";
+import * as controllerModule from "@threadlabs/looma/components/ui-table/ui-table.js";
+//#region .build/vue/UiTable.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-ui-table-state"];
+//#endregion
+//#region .build/vue/UiTable.vue
+var UiTable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	inheritAttrs: false,
+	__name: "UiTable",
+	props: {
+		density: { default: "comfortable" },
+		stickyHeader: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const root = ref(null);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.density && `density density=${props.density}`, props.stickyHeader && "stickyHeader"].filter(Boolean).join(" "));
+		const dispatch = createDispatch(root);
+		useComponentHost(controllerModule.default, {
+			root,
+			dispatch,
+			props
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-table" }, _ctx.$attrs, {
+				"data-ui-table-state": hostState.value || void 0,
+				ref_key: "root",
+				ref: root
+			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
+		};
+	}
+}), [["__scopeId", "data-v-9980d203"]]);
+//#endregion
+export { UiTable_default as t };

package/vue/chunks/UiTextarea.js

@@ -8,7 +8,8 @@ var _hoisted_1 = [
 	"readonly",
 	"required",
 	"aria-invalid",
-	"rows"
+	"rows",
+	"data-ui-textarea-state"
 ];
 //#endregion
 //#region .build/vue/UiTextarea.vue
@@ -33,6 +34,7 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			default: false
 		},
 		rows: { default: 4 },
+		size: { default: "md" },
 		value: {},
 		modelValue: {}
 	},
@@ -45,6 +47,8 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			set: (value) => emit("update:modelValue", value)
 		});
 		const root = ref(null);
+		/** The values the styles' :host-state() rules test. */
+		const hostState = computed(() => [props.size && `size size=${props.size}`].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(controllerModule.default, {
 			root,
@@ -59,11 +63,12 @@ var UiTextarea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-invalid": __props.invalid,
 				rows: __props.rows,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
+				"data-ui-textarea-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), null, 16, _hoisted_1)), [[vModelText, model.value]]);
 		};
 	}
-}), [["__scopeId", "data-v-73461aaf"]]);
+}), [["__scopeId", "data-v-00f7b2fd"]]);
 //#endregion
 export { UiTextarea_default as t };