ropav 0.3.1 → 0.5.0

package/dist/{composables → components/table}/use-grid-keyboard.js

@@ -1,7 +1,7 @@
-import { focusableIn, getScrollParent, isScrollable } from "../utils/focus.js";
+import { focusableIn, getScrollParent, isScrollable } from "../../utils/focus.js";
 import { isTableCellControl } from "./use-table-collection.js";
 import { computed, nextTick, shallowRef, toValue, watch } from "vue";
-//#region src/composables/use-grid-keyboard.ts
+//#region src/components/table/use-grid-keyboard.ts
 var NO_FOCUS = {
 	columnKey: null,
 	rowKey: null
@@ -317,60 +317,62 @@ var useGridKeyboard = (options) => {
 			event.stopPropagation();
 			if (event.shiftKey && next.rowKey != null && selection.selectionMode.value === "multiple") selection.extendSelection(next.rowKey);
 		};
-		switch (event.key) {
-			case "ArrowDown":
-				move(from.rowKey == null && from.columnKey == null ? firstKey(from, true) : keyBelow(from));
-				return;
-			case "ArrowUp":
-				move(from.rowKey == null && from.columnKey == null ? lastKey(from, true) : keyAbove(from));
-				return;
-			case "ArrowRight":
-				if (handleExpansion(event, from, isReversed() ? "collapse" : "expand")) return;
-				move(keyRightOf(from));
-				return;
-			case "ArrowLeft":
-				if (handleExpansion(event, from, isReversed() ? "expand" : "collapse")) return;
-				move(keyLeftOf(from));
-				return;
-			case "Home":
-				if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
-				move(firstKey(from, isModified));
-				return;
-			case "End":
-				if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
-				move(lastKey(from, isModified));
-				return;
-			case "PageUp":
-				move(pageStep(from, -1));
-				return;
-			case "PageDown":
-				move(pageStep(from, 1));
-				return;
-			case "a":
-				if (!isModified || toValue(options.disallowSelectAll)) return;
-				if (selection.selectionMode.value !== "multiple") return;
-				selection.selectAll();
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			case "Escape":
-				if (escapeKeyBehavior.value !== "clearSelection" || selection.isEmpty.value) return;
-				selection.clearSelection();
-				event.preventDefault();
-				event.stopPropagation();
-				return;
-			case " ":
-				if (from.rowKey == null || selection.selectionMode.value === "none") return;
-				selection.select(from.rowKey, { isShiftPressed: event.shiftKey });
-				event.preventDefault();
-				return;
-			case "Tab": {
-				const focusable = focusableIn(element);
-				(event.shiftKey ? element : focusable.at(-1))?.focus();
-				return;
+		collection.rows.withOrder(() => {
+			switch (event.key) {
+				case "ArrowDown":
+					move(from.rowKey == null && from.columnKey == null ? firstKey(from, true) : keyBelow(from));
+					return;
+				case "ArrowUp":
+					move(from.rowKey == null && from.columnKey == null ? lastKey(from, true) : keyAbove(from));
+					return;
+				case "ArrowRight":
+					if (handleExpansion(event, from, isReversed() ? "collapse" : "expand")) return;
+					move(keyRightOf(from));
+					return;
+				case "ArrowLeft":
+					if (handleExpansion(event, from, isReversed() ? "expand" : "collapse")) return;
+					move(keyLeftOf(from));
+					return;
+				case "Home":
+					if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
+					move(firstKey(from, isModified));
+					return;
+				case "End":
+					if (from.rowKey == null && from.columnKey == null && event.shiftKey) return;
+					move(lastKey(from, isModified));
+					return;
+				case "PageUp":
+					move(pageStep(from, -1));
+					return;
+				case "PageDown":
+					move(pageStep(from, 1));
+					return;
+				case "a":
+					if (!isModified || toValue(options.disallowSelectAll)) return;
+					if (selection.selectionMode.value !== "multiple") return;
+					selection.selectAll();
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				case "Escape":
+					if (escapeKeyBehavior.value !== "clearSelection" || selection.isEmpty.value) return;
+					selection.clearSelection();
+					event.preventDefault();
+					event.stopPropagation();
+					return;
+				case " ":
+					if (from.rowKey == null || selection.selectionMode.value === "none") return;
+					selection.select(from.rowKey, { isShiftPressed: event.shiftKey });
+					event.preventDefault();
+					return;
+				case "Tab": {
+					const focusable = focusableIn(element);
+					(event.shiftKey ? element : focusable.at(-1))?.focus();
+					return;
+				}
+				default: return;
 			}
-			default: return;
-		}
+		});
 	};
 	/** Where focus should land when it first enters the grid. */
 	const entryTarget = (fromLater) => {

package/dist/{composables → components/table}/use-grid-selection-announcement.d.ts

@@ -1,5 +1,5 @@
-import type { UseCollectionReturn } from "./use-collection.js";
-import type { UseSelectionManagerReturn } from "./use-selection-manager.js";
+import type { UseCollectionReturn } from "../../composables/use-collection.js";
+import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
 export interface UseGridSelectionAnnouncementOptions {
     collection: UseCollectionReturn;
     selection: UseSelectionManagerReturn;

package/dist/{composables → components/table}/use-grid-selection-announcement.js

@@ -1,6 +1,6 @@
-import { announce } from "../utils/live-announcer.js";
+import { announce } from "../../utils/live-announcer.js";
 import { watch } from "vue";
-//#region src/composables/use-grid-selection-announcement.ts
+//#region src/components/table/use-grid-selection-announcement.ts
 /** The keys in `a` that `b` does not have. A select-all is not a diff anyone can name. */
 var diffSelection = (a, b) => {
 	if (a === "all" || b === "all") return /* @__PURE__ */ new Set();

package/dist/{composables → components/table}/use-table-collection.d.ts

@@ -1,5 +1,5 @@
-import type { VirtualizerTableCollection } from "../utils/virtualizer-collection.js";
-import type { CollectionKey, UseCollectionReturn } from "./use-collection.js";
+import type { CollectionKey, UseCollectionReturn } from "../../composables/use-collection.js";
+import type { VirtualizerTableCollection } from "../../utils/virtualizer-collection.js";
 import type { TableColumnSize } from "./use-table-column-layout.js";
 import type { ComputedRef } from "vue";
 /** The least a registry needs from an entry: where it sits in the document. */

package/dist/{composables → components/table}/use-table-collection.js

@@ -1,8 +1,8 @@
-import { FOCUSABLE_SELECTOR } from "../utils/focus.js";
-import { useCollection } from "./use-collection.js";
-import { createTableCollection } from "../utils/virtualizer-collection.js";
+import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
+import { useCollection } from "../../composables/use-collection.js";
+import { createTableCollection } from "../../utils/virtualizer-collection.js";
 import { computed, shallowRef } from "vue";
-//#region src/composables/use-table-collection.ts
+//#region src/components/table/use-table-collection.ts
 /**
 * A registry of table parts that need to know **where they sit**, not just that they exist.
 *

package/dist/{composables → components/table}/use-table-column-layout.d.ts

@@ -1,7 +1,13 @@
-import type { CollectionKey } from "./use-collection.js";
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { FlexSize } from "../../utils/flex-sizing.js";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
-/** A column width: pixels as a number, a percentage of the table, or a fraction of what is left. */
-export type TableColumnSize = number | string;
+/**
+ * A column width: pixels as a number, a percentage of the table, or a fraction of what is left.
+ *
+ * The one name from the sizing vocabulary this package still publishes, because
+ * `TableColumnProps.width` names it.
+ */
+export type TableColumnSize = FlexSize;
 export interface TableColumnDefinition {
     key: CollectionKey;
     /** A width the caller controls. Set, it is never changed by a resize. */
@@ -11,25 +17,12 @@ export interface TableColumnDefinition {
     minWidth?: TableColumnSize | null;
     maxWidth?: TableColumnSize | null;
 }
-/** Pixels and percentages are fixed; `fr` units and anything unrecognised flex. */
-export declare const isStaticWidth: (width?: TableColumnSize | null) => boolean;
-/** The number in front of `fr`. Anything else counts as `1fr`, as React Aria has it. */
-export declare const parseFractionalUnit: (width?: TableColumnSize | null) => number;
-export declare const parseStaticWidth: (width: TableColumnSize, tableWidth: number) => number;
-export declare const getMaxWidth: (maxWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
-/**
- * A minimum cannot be given in `fr`: knowing what a fraction comes to would need every other
- * column's width, which is the very thing being solved for.
- */
-export declare const getMinWidth: (minWidth: TableColumnSize | null | undefined, tableWidth: number) => number;
 /**
- * Column widths for one table width, ported from react-stately's `calculateColumnSizes`.
+ * Column widths for one table width.
  *
- * This is the CSS flexbox layout algorithm, cut down to the shape a table needs: one row, a flex
- * basis of zero unless the column asked for a static width, and grow and shrink both equal to the
- * column's `fr`. It is deliberately **not** plain pixel sizing — `1fr` columns have to share what
- * the static and percentage columns leave over, and a minimum or maximum on any one of them
- * redistributes the rest.
+ * The sizing itself is `calculateFlexSizes`; what this adds is the table's own precedence — a
+ * width changed by a resize in flight outranks the declared one — and the mapping from the
+ * table's `width` vocabulary onto the solver's `size` one.
  */
 export declare const calculateColumnSizes: (availableWidth: number, columns: TableColumnDefinition[], changedColumns: Map<CollectionKey, TableColumnSize>, getDefaultWidth?: (index: number) => TableColumnSize | null | undefined, getDefaultMinWidth?: (index: number) => TableColumnSize | null | undefined) => number[];
 export interface BuildColumnWidthsOptions {

package/dist/components/table/use-table-column-layout.js

@@ -0,0 +1,115 @@
+import { calculateFlexSizes, getMaxSize, getMinSize } from "../../utils/flex-sizing.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+//#region src/components/table/use-table-column-layout.ts
+/**
+* Column widths for one table width.
+*
+* The sizing itself is `calculateFlexSizes`; what this adds is the table's own precedence — a
+* width changed by a resize in flight outranks the declared one — and the mapping from the
+* table's `width` vocabulary onto the solver's `size` one.
+*/
+var calculateColumnSizes = (availableWidth, columns, changedColumns, getDefaultWidth, getDefaultMinWidth) => {
+	const definitions = columns.map((column) => ({
+		defaultSize: column.defaultWidth,
+		maxSize: column.maxWidth,
+		minSize: column.minWidth,
+		size: changedColumns.get(column.key) ?? column.width
+	}));
+	return calculateFlexSizes(availableWidth, definitions, getDefaultWidth, getDefaultMinWidth);
+};
+/**
+* Every column's width in pixels, keyed by column, ported from react-stately's
+* `TableColumnLayout.buildColumnWidths`.
+*
+* The sizing itself is `calculateColumnSizes` above; what this adds is the pair of defaults a
+* table falls back to — `1fr` for a width nobody declared, and a 75px floor — and the mapping back
+* onto keys. Both the resizable container and the virtualizer's table layout need exactly that,
+* and the two must agree: a column laid out at one width by the browser and at another by the
+* layout would put every cell in the wrong place.
+*
+* @param changedWidths Widths that override what the columns declare, as a resize in flight does.
+*/
+var buildColumnWidths = (availableWidth, columns, changedWidths = /* @__PURE__ */ new Map(), options = {}) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const sizes = calculateColumnSizes(availableWidth, columns, changedWidths, (index) => getDefaultWidth(columns[index]), (index) => getDefaultMinWidth(columns[index]));
+	return new Map(columns.map((column, index) => [column.key, sizes[index] ?? 0]));
+};
+/**
+* Column widths for a resizable table, ported from react-stately's `TableColumnLayout` and
+* `useTableColumnResizeState`.
+*
+* Two things are worth knowing before changing any of it. A column whose `width` the caller set is
+* **controlled**: a resize never writes to it. And dragging one column's edge freezes every column
+* to its **left** at the pixel width it currently has, which is what stops the whole table from
+* reflowing while the pointer moves — the columns to the right keep their declared sizes and
+* absorb the difference.
+*/
+var useTableColumnLayout = (options) => {
+	const getDefaultWidth = options.getDefaultWidth ?? (() => "1fr");
+	const getDefaultMinWidth = options.getDefaultMinWidth ?? (() => 75);
+	const resizingColumn = shallowRef(null);
+	const uncontrolledColumns = () => options.columns().filter((column) => column.width == null);
+	const initialUncontrolledWidths = () => new Map(uncontrolledColumns().map((column) => [column.key, column.defaultWidth ?? getDefaultWidth(column) ?? "1fr"]));
+	const uncontrolledWidths = shallowRef(initialUncontrolledWidths());
+	watch(() => options.columns().map((column) => column.key).join(" "), () => {
+		uncontrolledWidths.value = initialUncontrolledWidths();
+	});
+	/** The declared width of every column, with the uncontrolled ones taken from state. */
+	const combinedWidths = () => new Map(options.columns().map((column) => [column.key, uncontrolledWidths.value.get(column.key) ?? column.width ?? "1fr"]));
+	const layout = computed(() => {
+		const columns = options.columns();
+		const tableWidth = toValue(options.tableWidth);
+		const widths = buildColumnWidths(tableWidth, columns, combinedWidths(), {
+			getDefaultMinWidth,
+			getDefaultWidth
+		});
+		const minWidths = /* @__PURE__ */ new Map();
+		const maxWidths = /* @__PURE__ */ new Map();
+		for (const column of columns) {
+			minWidths.set(column.key, getMinSize(column.minWidth ?? getDefaultMinWidth(column), tableWidth));
+			maxWidths.set(column.key, getMaxSize(column.maxWidth, tableWidth));
+		}
+		return {
+			maxWidths,
+			minWidths,
+			widths
+		};
+	});
+	const getColumnWidth = (key) => layout.value.widths.get(key) ?? 0;
+	const getColumnMinWidth = (key) => layout.value.minWidths.get(key) ?? 0;
+	const getColumnMaxWidth = (key) => layout.value.maxWidths.get(key) ?? 0;
+	const updateResizedColumns = (key, width) => {
+		const previous = layout.value.widths;
+		const declared = combinedWidths();
+		const clamped = Math.max(getColumnMinWidth(key), Math.min(getColumnMaxWidth(key), Math.floor(width)));
+		const next = /* @__PURE__ */ new Map();
+		let freeze = true;
+		for (const column of options.columns()) if (column.key === key) {
+			next.set(column.key, clamped);
+			freeze = false;
+		} else if (freeze) next.set(column.key, previous.get(column.key) ?? 0);
+		else next.set(column.key, column.width ?? declared.get(column.key) ?? "1fr");
+		const committed = /* @__PURE__ */ new Map();
+		for (const column of uncontrolledColumns()) committed.set(column.key, next.get(column.key) ?? "1fr");
+		committed.set(key, clamped);
+		uncontrolledWidths.value = committed;
+		return next;
+	};
+	return {
+		columnWidths: computed(() => layout.value.widths),
+		endResize: () => {
+			resizingColumn.value = null;
+		},
+		getColumnMaxWidth,
+		getColumnMinWidth,
+		getColumnWidth,
+		resizingColumn: computed(() => resizingColumn.value),
+		startResize: (key) => {
+			resizingColumn.value = key;
+		},
+		updateResizedColumns
+	};
+};
+//#endregion
+export { buildColumnWidths, calculateColumnSizes, useTableColumnLayout };

package/dist/components/tabs/tabs-panel.js

@@ -2,7 +2,7 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useEnterExit } from "../../composables/use-enter-exit.js";
 import { useTabsContext } from "./tabs.context.js";
-import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 //#region src/components/tabs/tabs-panel.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-slot=tabs-panel role=tabpanel>", 1);
 var tabs_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -20,6 +20,10 @@ var tabs_panel_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		const { slots, state } = useTabsContext();
 		const panelKey = computed(() => props.id);
 		const isSelected = computed(() => state.selectedKey.value === panelKey.value);
+		watch(panelKey, (key, _previous, onCleanup) => {
+			if (key == null) return;
+			onCleanup(state.registerPanel(key));
+		}, { immediate: true });
 		const element = shallowRef(null);
 		const { isEntering, isExiting, isPresent } = useEnterExit({
 			elementRef: element,

package/dist/components/tabs/tabs-tab.js

@@ -60,7 +60,7 @@ var tabs_tab_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE_
 			const _isDisabled = isDisabled.value;
 			const _dataAttr = unref(dataAttr);
 			setProp(n1, "id", _state.tabId(_tabKey));
-			setAttr(n1, "aria-controls", _isSelected ? _state.tabPanelId(_tabKey) : void 0);
+			setAttr(n1, "aria-controls", _isSelected && _state.hasPanel(_tabKey) ? _state.tabPanelId(_tabKey) : void 0);
 			setAttr(n1, "aria-disabled", _isDisabled || void 0);
 			setAttr(n1, "aria-selected", _isSelected);
 			setClass(n1, unref(slots).tab({ class: props.class }));

package/dist/components/textarea/index.d.ts

@@ -2,40 +2,48 @@ import TextAreaRoot from "./textarea-root.js";
 export declare const TextArea: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
     props: import('vue').PublicProps & {
         class?: string;
+        value?: string;
         variant?: import("@ropav/styles").TextAreaVariants["variant"];
+        size?: import("@ropav/styles").TextAreaVariants["size"];
         fullWidth?: boolean;
         placeholder?: string;
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
     } & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 }) & {
     Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
         props: import('vue').PublicProps & {
             class?: string;
+            value?: string;
             variant?: import("@ropav/styles").TextAreaVariants["variant"];
+            size?: import("@ropav/styles").TextAreaVariants["size"];
             fullWidth?: boolean;
             placeholder?: string;
+            onChange?: ((value: string) => any) | undefined;
+            "onUpdate:value"?: ((value: string) => any) | undefined;
         } & (typeof globalThis extends {
             __VLS_PROPS_FALLBACK: infer P;
         } ? P : {});
         expose: (exposed: {}) => void;
         attrs: any;
         slots: {};
-        emit: {};
+        emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
     }>) => import('vue').VNode & {
         __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
     };

package/dist/components/textarea/textarea-root.d.ts

@@ -1,12 +1,15 @@
 import type { TextAreaRootProps } from "./textarea.types.js";
 declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
-    props: import('vue').PublicProps & __VLS_PrettifyLocal<TextAreaRootProps> & (typeof globalThis extends {
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<TextAreaRootProps & {
+        onChange?: ((value: string) => any) | undefined;
+        "onUpdate:value"?: ((value: string) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
-    emit: {};
+    emit: ((evt: "change", value: string) => void) & ((evt: "update:value", value: string) => void);
 }>) => import('vue').VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };

package/dist/components/textarea/textarea-root.js

@@ -1,8 +1,9 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, template, unref } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 import { textAreaVariants } from "@ropav/styles";
 //#region src/components/textarea/textarea-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<textarea>", 1);
@@ -10,32 +11,66 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 	__name: "textarea-root",
 	props: {
 		class: {},
+		value: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
 		},
 		placeholder: {}
 	},
-	setup(__props) {
+	emits: ["change", "update:value"],
+	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const emit = __emit;
 		const control = useTextFieldControlContext();
 		const textField = useTextFieldContext();
-		const setElement = (element) => {
-			control?.registerElement(element instanceof HTMLTextAreaElement ? element : null);
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLTextAreaElement ? next : null;
+			control?.registerElement(element.value);
 		};
 		const resolvedVariant = computed(() => props.variant ?? textField?.variant.value);
+		const resolvedSize = computed(() => props.size ?? textField?.size.value);
 		const styles = computed(() => textAreaVariants({
 			class: props.class,
 			fullWidth: props.fullWidth,
+			size: resolvedSize.value,
 			variant: resolvedVariant.value
 		}));
 		const attrs = computed(() => {
 			const merged = { ...control?.attrs.value };
 			if (props.placeholder !== void 0) merged["placeholder"] = props.placeholder;
+			if (props.value !== void 0) merged["value"] = props.value;
 			return merged;
 		});
 		const interaction = useInteractionStates({ isDisabled: () => control?.isDisabled.value });
+		const inputCount = shallowRef(0);
+		const onInput = (event) => {
+			control?.handlers.onInput(event);
+			const next = event.currentTarget.value;
+			emit("change", next);
+			emit("update:value", next);
+			if (props.value !== void 0) inputCount.value++;
+		};
+		/**
+		* Put the text back to what the caller holds, reset source included. See the same watch in
+		* `input-root.vue`, and {@link setFormValue}, for why this cannot be left to the binding — and note
+		* that a textarea keeps its reset source in its children rather than in a `value` attribute.
+		*/
+		watch([
+			element,
+			() => props.value,
+			inputCount
+		], ([el, pinned]) => {
+			if (pinned === void 0) return;
+			setFormValue(el, pinned);
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		watch(() => props.value !== void 0, (owned) => control?.setValueOwned(owned), { immediate: true });
 		const onFocus = (event) => {
 			interaction.onFocus();
 			control?.handlers.onFocus(event);
@@ -48,7 +83,7 @@ var textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const n0 = t0();
 		on(n0, "blur", onBlur);
 		on(n0, "focus", onFocus);
-		on(n0, "input", (e) => unref(control)?.handlers.onInput(e));
+		on(n0, "input", onInput);
 		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
 		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
 		on(n0, "pointerdown", (e) => unref(interaction).onPointerdown(e));

package/dist/components/textarea/textarea.types.d.ts

@@ -1,8 +1,19 @@
 import type { TextAreaVariants } from "@ropav/styles";
 export interface TextAreaRootProps {
     class?: string;
+    /**
+     * Text in the control. Set here it takes the control over from the surrounding field, so the
+     * caller owns the value even inside a `TextField` — exactly as a `value` prop does in React.
+     * Without a listener to go with it the text is pinned.
+     */
+    value?: string;
     /** Visual variant. Taken from the surrounding field when unset. @default "primary" */
     variant?: TextAreaVariants["variant"];
+    /**
+     * How much room the text is given, matching a field of the same size. Taken from the
+     * surrounding field when unset. @default "md"
+     */
+    size?: TextAreaVariants["size"];
     /** Whether the control stretches to fill its container. */
     fullWidth?: boolean;
     /**

package/dist/components/textfield/index.d.ts

@@ -9,6 +9,7 @@ export declare const TextField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
     props: import('vue').PublicProps & {
         class?: string;
         variant?: "primary" | "secondary";
+        size?: "sm" | "md" | "lg";
         fullWidth?: boolean;
         value?: string;
         defaultValue?: string;
@@ -61,6 +62,7 @@ export declare const TextField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         props: import('vue').PublicProps & {
             class?: string;
             variant?: "primary" | "secondary";
+            size?: "sm" | "md" | "lg";
             fullWidth?: boolean;
             value?: string;
             defaultValue?: string;

package/dist/components/textfield/textfield-root.js

@@ -12,6 +12,7 @@ var textfield_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 	props: {
 		class: {},
 		variant: { default: void 0 },
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -101,7 +102,10 @@ var textfield_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		});
 		provideFieldIdsContext(field.fieldIds);
 		provideTextFieldControlContext(field);
-		provideTextFieldContext({ variant: computed(() => props.variant) });
+		provideTextFieldContext({
+			size: computed(() => props.size),
+			variant: computed(() => props.variant)
+		});
 		provideFieldErrorContext({ validation: field.validation.displayValidation });
 		const styles = computed(() => textFieldVariants({
 			class: props.class,

package/dist/components/textfield/textfield.context.d.ts

@@ -2,6 +2,8 @@ import type { ComputedRef } from "vue";
 export interface TextFieldContext {
     /** Visual variant the control inside picks up when it declares none of its own. */
     variant: ComputedRef<"primary" | "secondary" | undefined>;
+    /** Size the control inside picks up when it declares none of its own. */
+    size: ComputedRef<"sm" | "md" | "lg" | undefined>;
 }
 /**
  * Carries the variant alone, kept apart from the control context that carries the behaviour.

package/dist/components/textfield/textfield.types.d.ts

@@ -3,6 +3,11 @@ export interface TextFieldRootProps {
     class?: string;
     /** Visual variant handed down to the control inside. @default "primary" */
     variant?: "primary" | "secondary";
+    /**
+     * How tall the control inside stands, matching a button of the same size. Handed to the control
+     * unless it declares one of its own. @default "md"
+     */
+    size?: "sm" | "md" | "lg";
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** Text in the field. Makes it controlled. */

package/dist/components/time-field/index.d.ts

@@ -58,6 +58,7 @@ export declare const TimeField: ((__VLS_props: NonNullable<Awaited<typeof __VLS_
         props: import('vue').PublicProps & {
             class?: string;
             variant?: import("@ropav/styles").DateInputGroupVariants["variant"];
+            size?: import("@ropav/styles").DateInputGroupVariants["size"];
             fullWidth?: boolean;
             isDisabled?: boolean;
             isInvalid?: boolean;

package/dist/components/toast/index.d.ts

@@ -223,6 +223,7 @@ export declare const Toast: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setu
 export { ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastRoot, ToastTitle, };
 export type { ToastActionButtonProps, ToastActionValue, ToastAddOptions, ToastCloseButtonProps, ToastContentProps, ToastContentValue, ToastDescriptionProps, ToastIndicatorProps, ToastOptions, ToastPromiseOptions, ToastProviderProps, ToastProviderSlotProps, ToastQueueOptions, ToastRenderable, ToastRootProps, ToastRootProps as ToastProps, ToastTitleProps, QueuedToast, } from "./toast.types.js";
 export { ToastQueue, createToastFunction, getQueuedToastCount, resetToastQueue, toast, toastQueue, useToastQueue, } from "./toast-queue.js";
+export type { Timer } from "./toast-queue.js";
 export type { ToastFunction, UseToastQueueReturn } from "./toast-queue.js";
 export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, } from "./toast.constants.js";
 export { useToastItemContext, useToastRegionContext } from "./toast.context.js";

package/dist/components/toast/toast-default-content.js

@@ -1,10 +1,10 @@
+import { useMediaQuery } from "../../composables/use-media-query.js";
 import spinner_root_default from "../spinner/spinner-root.js";
 import toast_action_button_default from "./toast-action-button.js";
 import toast_close_button_default from "./toast-close-button.js";
 import toast_content_default from "./toast-content.js";
 import toast_description_default from "./toast-description.js";
 import toast_indicator_default from "./toast-indicator.js";
-import { useMediaQuery } from "../../composables/use-media-query.js";
 import toast_renderable_default from "./toast-renderable.js";
 import toast_root_default from "./toast-root.js";
 import toast_title_default from "./toast-title.js";