@getdom/studio 0.1.0

package/src/pages/forms/tag-combobox/DomTagCombobox.vue

@@ -0,0 +1,358 @@
+<script setup>
+import { computed, nextTick, ref } from 'vue';
+import DomFieldLoadingSpinner from '../_shared/DomFieldLoadingSpinner.vue';
+import { booleanProp, normalizeOption, optionKey, searchableText, splitTokens as splitOptionTokens } from '../_shared/options.js';
+import { useOptionMenu } from '../_shared/useOptionMenu.js';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Tag combobox',
+		tag: '<DomTagCombobox>',
+		description: 'A tokenizing multi-select combobox for class lists, recipients, labels, and other values that need autocomplete plus optional custom entries.',
+		icon: 'M7 5h5l5 5-7 7-5-5 7-7Zm1.5 4.5h.01M15 15h4M17 13v4',
+		slots: [
+			{ name: 'item', payload: '{ item, index, active, custom }', description: 'Replaces each suggestion row.' },
+			{ name: 'tag', payload: '{ item, value, label, remove }', description: 'Replaces each selected token.' },
+		],
+		events: [
+			{ name: 'query', payload: 'string', description: 'Fired as the user types.' },
+			{ name: 'add', payload: '({ item, value, label, custom })', description: 'Fired when a tag is added.' },
+			{ name: 'remove', payload: '({ item, value, label })', description: 'Fired when a tag is removed.' },
+			{ name: 'select', payload: '({ item, value, label, custom })', description: 'Fired when a suggestion or custom value is committed.' },
+			{ name: 'change', payload: 'Array', description: 'Fired after the selected values array changes.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonInput',
+			description: 'Selected tag values.',
+		},
+	},
+	options: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Autocomplete options. Strings are treated as both label and value.',
+			props: {
+				compact: true,
+				addLabel: '+ Add option',
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Option label', default: (index) => `Option ${index + 1}` },
+					{ key: 'value', label: 'Value', placeholder: 'option-value', default: (index) => `option-${index + 1}` },
+					{ key: 'description', label: 'Description', placeholder: 'Optional helper text' },
+					{ key: 'group', label: 'Group', placeholder: 'Optional group' },
+				],
+			},
+		},
+	},
+	placeholder: {
+		type: String,
+		default: 'Add tags...',
+		_edit: { group: 'Control props', description: 'Placeholder shown when no query is active.' },
+	},
+	allowCustom: {
+		type: [Boolean, String],
+		default: false,
+		_edit: { group: 'Control props', description: 'Allow values that do not exist in options.' },
+	},
+	filterOptions: {
+		type: [Boolean, String],
+		default: true,
+		_edit: { group: 'Control props', description: 'Filter options locally. Turn off when options are already server-filtered.' },
+	},
+	loading: {
+		type: [Boolean, String],
+		default: false,
+		_edit: { group: 'Control props', description: 'Show an inline loading spinner while async options are being fetched.' },
+	},
+	emptyText: {
+		type: String,
+		default: 'No matches',
+		_edit: { group: 'Control props', description: 'Message shown when no option matches and custom values are not available.' },
+	},
+	maxOptions: {
+		type: Number,
+		default: 8,
+		_edit: { group: 'Control props', description: 'Maximum matching suggestions to show.' },
+	},
+	tokenSeparators: {
+		type: Array,
+		default: () => [' ', ','],
+		_edit: { component: 'DomJsonInput', group: 'Control props', description: 'Characters that split pasted text into tags.' },
+	},
+	clearable: {
+		type: [Boolean, String],
+		default: false,
+		_edit: { group: 'Control props', description: 'Show a clear-all button when tags are selected.' },
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'query', 'add', 'remove', 'select', 'change', 'focus', 'blur']);
+
+const inputEl = ref(null);
+const query = ref('');
+const field = useField(props, emit, { idPrefix: 'dom-tag-combobox' });
+
+const selectedValues = computed(() => Array.isArray(field.value.value) ? field.value.value : []);
+const normalizedOptions = computed(() => props.options.map((option) => normalizeOption(option)).filter(Boolean));
+const selectedItems = computed(() => selectedValues.value.map((value) => optionForValue(value) || customOption(value)));
+const selectedValueKeys = computed(() => new Set(selectedValues.value.map(optionKey)));
+const isClearable = computed(() => booleanProp(props.clearable, false));
+const isCustomAllowed = computed(() => booleanProp(props.allowCustom, false));
+const isFilteringOptions = computed(() => booleanProp(props.filterOptions, true));
+const isLoading = computed(() => booleanProp(props.loading, false));
+const controlInputAttrs = computed(() => {
+	const { value, placeholder, ...attrs } = field.inputAttrs.value;
+	return attrs;
+});
+const trimmedQuery = computed(() => query.value.trim());
+const exactQueryOption = computed(() => normalizedOptions.value.find((option) => optionKey(option.value) === optionKey(trimmedQuery.value)));
+const canCreateQuery = computed(() => {
+	if (!isCustomAllowed.value || !trimmedQuery.value) return false;
+	if (selectedValueKeys.value.has(optionKey(trimmedQuery.value))) return false;
+	return !exactQueryOption.value;
+});
+const matchingOptions = computed(() => {
+	const needle = trimmedQuery.value.toLowerCase();
+	return normalizedOptions.value
+		.filter((option) => !option.disabled)
+		.filter((option) => !selectedValueKeys.value.has(optionKey(option.value)))
+		.filter((option) => {
+			if (!needle || !isFilteringOptions.value) return true;
+			return searchableText(option).includes(needle);
+		})
+		.slice(0, Math.max(1, props.maxOptions));
+});
+const menuItems = computed(() => {
+	const items = matchingOptions.value.map((item) => ({ item, value: item.value, label: item.label, custom: false }));
+	if (canCreateQuery.value) {
+		items.push({
+			item: customOption(trimmedQuery.value),
+			value: trimmedQuery.value,
+			label: trimmedQuery.value,
+			custom: true,
+		});
+	}
+	return items;
+});
+const optionMenu = useOptionMenu(menuItems, {
+	query,
+	emitQuery: (value) => emit('query', value),
+});
+const { activeIndex, isOpen } = optionMenu;
+const hasEmptyState = computed(() => !isLoading.value && !menuItems.value.length && trimmedQuery.value && !isCustomAllowed.value);
+const showMenu = computed(() => isOpen.value && (menuItems.value.length > 0 || hasEmptyState.value) && !field.disabled.value && !field.readOnly.value);
+const hasTags = computed(() => selectedValues.value.length > 0);
+
+function customOption(value) {
+	return { value, label: String(value), custom: true };
+}
+
+function optionForValue(value) {
+	return normalizedOptions.value.find((option) => optionKey(option.value) === optionKey(value));
+}
+
+function commitItem(entry) {
+	if (!entry) return;
+	commitValue(entry.value, entry.item, entry.custom);
+}
+
+function commitValue(value, item = null, custom = false) {
+	if (field.disabled.value || field.readOnly.value) return;
+	if (value == null || value === '') return;
+	if (selectedValueKeys.value.has(optionKey(value))) {
+		resetQuery();
+		return;
+	}
+	if (!custom && !optionForValue(value) && !isCustomAllowed.value) return;
+
+	const nextValue = [...selectedValues.value, value];
+	field.setValue(nextValue);
+	emit('add', { item, value, label: item?.label ?? String(value), custom });
+	emit('select', { item, value, label: item?.label ?? String(value), custom });
+	emit('change', nextValue);
+	resetQuery();
+	nextTick(() => inputEl.value?.focus());
+}
+
+function removeValue(value) {
+	if (field.disabled.value || field.readOnly.value) return;
+	const item = optionForValue(value) || customOption(value);
+	const nextValue = selectedValues.value.filter((candidate) => optionKey(candidate) !== optionKey(value));
+	field.setValue(nextValue);
+	emit('remove', { item, value, label: item.label });
+	emit('change', nextValue);
+	nextTick(() => inputEl.value?.focus());
+}
+
+function clearAll() {
+	if (field.disabled.value || field.readOnly.value) return;
+	field.setValue([]);
+	emit('change', []);
+	nextTick(() => inputEl.value?.focus());
+}
+
+function resetQuery() {
+	optionMenu.reset();
+}
+
+function onFocus(event) {
+	field.onFocus(event);
+	isOpen.value = true;
+}
+
+function onBlur(event) {
+	optionMenu.closeSoon();
+	field.onBlur(event);
+}
+
+function onKeydown(event) {
+	if (event.key === 'ArrowDown') {
+		event.preventDefault();
+		optionMenu.move(1);
+		return;
+	}
+	if (event.key === 'ArrowUp') {
+		event.preventDefault();
+		optionMenu.move(-1);
+		return;
+	}
+	if (event.key === 'Enter') {
+		event.preventDefault();
+		if (menuItems.value[activeIndex.value]) commitItem(menuItems.value[activeIndex.value]);
+		else if (isCustomAllowed.value) commitValue(trimmedQuery.value, customOption(trimmedQuery.value), true);
+		return;
+	}
+	if (event.key === 'Escape') {
+		event.preventDefault();
+		isOpen.value = false;
+		return;
+	}
+	if (event.key === 'Backspace' && !query.value && selectedValues.value.length) {
+		removeValue(selectedValues.value[selectedValues.value.length - 1]);
+	}
+}
+
+function onPaste(event) {
+	const text = event.clipboardData?.getData('text') || '';
+	const tokens = splitTokens(text);
+	if (tokens.length <= 1) return;
+	event.preventDefault();
+	for (const token of tokens) {
+		const option = optionForValue(token);
+		if (option) commitValue(option.value, option, false);
+		else if (isCustomAllowed.value) commitValue(token, customOption(token), true);
+	}
+}
+
+function splitTokens(value) {
+	return splitOptionTokens(value, props.tokenSeparators);
+}
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div class="relative">
+			<div
+				class="flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-2xl border border-input bg-canvas px-2 py-1.5 text-sm shadow-sm transition focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20 data-[invalid]:border-destructive"
+				:data-invalid="field.invalid.value ? '' : undefined"
+				@click="inputEl?.focus()"
+			>
+				<span
+					v-for="entry in selectedItems"
+					:key="optionKey(entry.value)"
+					class="inline-flex max-w-full items-center gap-1 rounded-full bg-secondary px-2.5 py-1 text-xs font-medium text-secondary-fg ring-1 ring-border"
+				>
+					<slot name="tag" :item="entry" :value="entry.value" :label="entry.label" :remove="() => removeValue(entry.value)">
+						<span class="truncate">{{ entry.label }}</span>
+						<button
+							type="button"
+							class="-mr-1 inline-flex size-4 items-center justify-center rounded-full text-muted-fg hover:bg-canvas hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+							:aria-label="`Remove ${entry.label}`"
+							@click.stop="removeValue(entry.value)"
+							@mousedown.prevent
+						>
+							<svg viewBox="0 0 16 16" class="size-3" fill="none" aria-hidden="true">
+								<path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+							</svg>
+						</button>
+					</slot>
+				</span>
+					<input
+						v-bind="controlInputAttrs"
+					ref="inputEl"
+					v-model="query"
+					type="text"
+					role="combobox"
+					:aria-expanded="showMenu"
+					:aria-controls="`${field.id.value}-listbox`"
+					:placeholder="hasTags ? '' : placeholder"
+					class="min-w-28 flex-1 bg-transparent px-1 py-1 text-sm outline-none placeholder:text-muted-fg disabled:cursor-not-allowed"
+					@focus="onFocus"
+					@blur="onBlur"
+					@keydown="onKeydown"
+						@paste="onPaste"
+					/>
+					<DomFieldLoadingSpinner
+						v-if="isLoading"
+					/>
+					<button
+						v-if="isClearable && hasTags"
+					type="button"
+					class="inline-flex size-7 shrink-0 items-center justify-center rounded-full text-muted-fg transition hover:bg-secondary hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60"
+					aria-label="Clear tags"
+					@click.stop="clearAll"
+					@mousedown.prevent
+				>
+					<svg viewBox="0 0 20 20" class="size-4" fill="none" aria-hidden="true">
+						<path d="M7 7l6 6M13 7l-6 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
+					</svg>
+				</button>
+			</div>
+
+			<ul
+				v-if="showMenu"
+				:id="`${field.id.value}-listbox`"
+				role="listbox"
+					class="skin-popover absolute z-40 mt-2 max-h-72 w-full overflow-auto rounded-2xl p-1"
+				>
+					<li v-if="hasEmptyState" class="rounded-xl px-3 py-2 text-sm text-muted-fg">
+						{{ emptyText }}
+					</li>
+				<li
+					v-for="(entry, index) in menuItems"
+					:key="`${entry.custom ? 'custom' : 'option'}-${optionKey(entry.value)}`"
+					role="option"
+					:aria-selected="activeIndex === index"
+					class="cursor-pointer rounded-xl px-3 py-2 text-sm transition"
+					:class="activeIndex === index ? 'bg-accent text-accent-fg' : 'hover:bg-accent/70'"
+					@mouseenter="activeIndex = index"
+					@mousedown.prevent
+					@click="commitItem(entry)"
+				>
+					<slot name="item" :item="entry.item" :index="index" :active="activeIndex === index" :custom="entry.custom">
+						<div class="flex min-w-0 items-center justify-between gap-3">
+							<span class="min-w-0">
+								<span class="block truncate font-medium">{{ entry.custom ? `Add "${entry.label}"` : entry.label }}</span>
+								<span v-if="entry.item.description || entry.item.group" class="block truncate text-xs text-muted-fg">
+									{{ entry.item.description || entry.item.group }}
+								</span>
+							</span>
+							<span v-if="entry.custom" class="shrink-0 rounded-full bg-canvas/70 px-2 py-0.5 text-[11px] text-muted-fg ring-1 ring-border">custom</span>
+						</div>
+					</slot>
+				</li>
+			</ul>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/text-input/DomTextInput.vue

@@ -0,0 +1,48 @@
+<script setup>
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Text input',
+		tag: '<DomTextInput>',
+		description: 'A styled text field that uses the shared field contract for labels, validation state, and optional form-provider integration.',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the text changes.' },
+			{ name: 'focus', payload: 'FocusEvent', description: 'Fired when the input receives focus.' },
+			{ name: 'blur', payload: 'FocusEvent', description: 'Fired when the input loses focus.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	type: {
+		type: String,
+		default: 'text',
+		_edit: { description: 'Native input type.' },
+	},
+	autocomplete: {
+		type: String,
+		default: '',
+		_edit: { description: 'Native autocomplete hint.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-text-input' });
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-bind="field.inputAttrs.value"
+			:type="type"
+			:autocomplete="autocomplete || undefined"
+			class="skin-input h-10"
+			@input="field.onInput($event.target.value)"
+			@focusin="field.onFocus"
+			@focusout="field.onBlur"
+		/>
+	</DomField>
+</template>

package/src/pages/forms/textarea-composer/DomTextareaComposer.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { computed } from 'vue';
+import DomIconButton from '../../components/icon-button/DomIconButton.vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+import { useTextareaAutosize } from '../textarea-input/useTextareaAutosize.js';
+
+defineOptions({
+	__doc: {
+		name: 'Textarea composer',
+		tag: '<DomTextareaComposer>',
+		description: 'An autosizing multiline field with attachment content, leading controls, trailing actions, and submit behavior inside one visual input.',
+		icon: 'M5 6h14v10H9l-4 3V6Zm3 4h8M8 13h5',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the composer text changes.' },
+			{ name: 'submit', payload: 'string', description: 'Fired with the current text when the built-in submit action is used.' },
+			{ name: 'keydown', payload: 'KeyboardEvent', description: 'Fired before the built-in Enter key behavior runs.' },
+			{ name: 'focus', payload: 'FocusEvent', description: 'Fired when the textarea receives focus.' },
+			{ name: 'blur', payload: 'FocusEvent', description: 'Fired when the textarea loses focus.' },
+		],
+		slots: [
+			{ name: 'attachments', payload: '{ value, disabled, readOnly }', description: 'File, image, reference, or context previews shown above the text.' },
+			{ name: 'leading', payload: '{ value, submit, disabled }', description: 'Controls at the start of the bottom action row, such as add or tool buttons.' },
+			{ name: 'actions', payload: '{ value, submit, disabled }', description: 'Additional controls before the built-in submit action.' },
+			{ name: 'submit', payload: '{ submit, disabled, submitting, label }', description: 'Replace the built-in circular submit button.' },
+		],
+		keyboard: [
+			{ keys: 'Enter', action: 'Submit when submitOnEnter is enabled.' },
+			{ keys: 'Shift + Enter', action: 'Insert a new line.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	rows: {
+		type: Number,
+		default: 1,
+		_edit: { group: 'Control props', min: 1, description: 'Minimum visible text rows.' },
+	},
+	autosize: {
+		type: Boolean,
+		default: true,
+		_edit: { group: 'Control props', description: 'Grow and shrink the text area to match its content.' },
+	},
+	maxRows: {
+		type: Number,
+		default: 8,
+		_edit: { group: 'Control props', min: 0, description: 'Maximum rows before text scrolls. Use 0 for no maximum.' },
+	},
+	ariaLabel: {
+		type: String,
+		default: 'Message',
+		_edit: { group: 'Control props', description: 'Accessible textarea label used when no visible field label is supplied.' },
+	},
+	showSubmit: {
+		type: Boolean,
+		default: true,
+		_edit: { group: 'Submit props', description: 'Show the built-in circular submit action.' },
+	},
+	submitLabel: {
+		type: String,
+		default: 'Send message',
+		_edit: { group: 'Submit props', description: 'Accessible label for the built-in submit action.' },
+	},
+	submitDisabled: {
+		type: Boolean,
+		default: false,
+		_edit: { group: 'Submit props', description: 'Disable submission in addition to field and empty-value checks.' },
+	},
+	submitting: {
+		type: Boolean,
+		default: false,
+		_edit: { group: 'Submit props', description: 'Show progress and block repeated submission.' },
+	},
+	submitOnEnter: {
+		type: Boolean,
+		default: true,
+		_edit: { group: 'Submit props', description: 'Submit on Enter while Shift + Enter continues to add a new line.' },
+	},
+	allowEmptySubmit: {
+		type: Boolean,
+		default: false,
+		_edit: { group: 'Submit props', description: 'Allow attachment-only or control-defined submission when the text is empty.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'submit', 'keydown', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-textarea-composer' });
+const autosize = computed(() => props.autosize);
+const rows = computed(() => props.rows);
+const maxRows = computed(() => props.maxRows);
+const text = computed(() => String(field.value.value ?? ''));
+const controlsDisabled = computed(() => (
+	field.disabled.value
+	|| field.readOnly.value
+	|| props.submitting
+));
+const canSubmit = computed(() => (
+	!controlsDisabled.value
+	&& !props.submitDisabled
+	&& (props.allowEmptySubmit || text.value.trim().length > 0)
+));
+const { textarea, resize } = useTextareaAutosize({
+	value: field.value,
+	autosize,
+	rows,
+	maxRows,
+});
+
+/**
+ * Writes native composer input through the shared form-field contract.
+ *
+ * @param {InputEvent} event Native input event.
+ * @returns {void}
+ */
+function onInput(event) {
+	field.onInput(event.target.value);
+	resize();
+}
+
+/**
+ * Emits the current value when submission is available.
+ *
+ * @param {Event} [event] Native keyboard or click event that requested submission.
+ * @returns {void}
+ */
+function submit(event) {
+	if (!canSubmit.value) return;
+	emit('submit', text.value, event);
+}
+
+/**
+ * Exposes keyboard activity and applies the composer Enter convention.
+ *
+ * @param {KeyboardEvent} event Native keydown event.
+ * @returns {void}
+ */
+function onKeydown(event) {
+	emit('keydown', event);
+	if (
+		event.defaultPrevented
+		|| !props.submitOnEnter
+		|| event.isComposing
+		|| event.key !== 'Enter'
+		|| event.shiftKey
+	) return;
+	event.preventDefault();
+	submit(event);
+}
+
+/**
+ * Moves focus to the native textarea.
+ *
+ * @returns {void}
+ */
+function focus() {
+	textarea.value?.focus();
+}
+
+defineExpose({ focus, resize });
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div
+			class="skin-input overflow-hidden p-0 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 data-[invalid]:focus-within:border-destructive data-[invalid]:focus-within:ring-destructive/25"
+			:data-invalid="field.invalid.value ? '' : undefined"
+			:aria-busy="submitting || undefined"
+		>
+			<div v-if="$slots.attachments" class="flex flex-wrap gap-2 px-3 pt-3">
+				<slot
+					name="attachments"
+					:value="text"
+					:disabled="field.disabled.value"
+					:read-only="field.readOnly.value"
+				/>
+			</div>
+
+			<textarea
+				ref="textarea"
+				:id="field.id.value"
+				:name="field.htmlName.value"
+				:value="text"
+				:placeholder="placeholder"
+				:rows="rows"
+				:disabled="field.disabled.value || undefined"
+				:readonly="field.readOnly.value || undefined"
+				:required="required || undefined"
+				:aria-label="label ? undefined : ariaLabel"
+				:aria-invalid="field.invalid.value || undefined"
+				:aria-describedby="field.describedBy.value || undefined"
+				:aria-errormessage="field.errorId.value || undefined"
+				:class="[
+					'block w-full border-0 bg-transparent px-3 pb-2 pt-3 text-base leading-6 text-canvas-fg outline-none placeholder:text-muted-fg disabled:cursor-not-allowed disabled:opacity-50',
+					autosize ? 'resize-none overflow-y-hidden' : 'resize-y',
+				]"
+				@input="onInput"
+				@keydown="onKeydown"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			></textarea>
+
+			<div
+				v-if="$slots.leading || $slots.actions || showSubmit"
+				class="flex min-h-10 items-end justify-between gap-2 px-2 pb-2"
+			>
+				<div class="flex min-w-0 flex-1 items-center gap-1">
+					<slot name="leading" :value="text" :submit="submit" :disabled="controlsDisabled" />
+				</div>
+				<div class="flex shrink-0 items-center gap-1">
+					<slot name="actions" :value="text" :submit="submit" :disabled="controlsDisabled" />
+					<slot
+						v-if="showSubmit"
+						name="submit"
+						:submit="submit"
+						:disabled="!canSubmit"
+						:submitting="submitting"
+						:label="submitLabel"
+					>
+						<DomIconButton
+							:label="submitLabel"
+							:disabled="!canSubmit"
+							:loading="submitting"
+							variant="primary"
+							icon="M12 19V5m0 0-6 6m6-6 6 6"
+							@click="submit"
+						/>
+					</slot>
+				</div>
+			</div>
+		</div>
+	</DomField>
+</template>