@getdom/studio 0.1.1 → 0.2.0

package/src/pages/forms/range-input/DomRangeInput.vue

@@ -11,6 +11,10 @@ defineOptions({
 		description: 'A compact slider input for numeric values with a stylable track and handle.',
 		icon: 'M5 12h14M8 12a2 2 0 1 0 0.01 0M16 12a2 2 0 1 0 0.01 0',
 		slots: [],
+		events: [
+			{ name: 'update:modelValue', payload: 'number', description: 'The value changed through pointer or keyboard input.' },
+			{ name: 'update:dragging', payload: 'boolean', description: 'Pointer scrubbing started or finished, including cancellation.' },
+		],
 		playground: {
 			initial: {
 				label: 'Confidence',
@@ -60,6 +64,11 @@ const props = defineProps({
 		default: '',
 		_edit: { description: 'Classes applied to the visual range track.' },
 	},
+	controlClass: {
+		type: [String, Array, Object],
+		default: '',
+		_edit: { description: 'Classes applied to the interactive track area, including its touch target height.' },
+	},
 	progressClass: {
 		type: [String, Array, Object],
 		default: '',
@@ -76,11 +85,14 @@ const props = defineProps({
 		_edit: { description: 'Additional classes applied to the handle while it is being dragged.' },
 	},
 });
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'update:dragging', 'focus', 'blur']);
 const field = useField(props, emit, { idPrefix: 'dom-range-input' });
 const control = ref(null);
 const rangeInput = ref(null);
 const dragging = ref(false);
+const keyboardFocused = ref(false);
+let dragWindow;
+let dragPointerId;
 
 const displayValue = computed(() => {
 	const value = field.value.value === '' ? props.min : Number(field.value.value);
@@ -110,10 +122,11 @@ const handleStyle = computed(() => ({
 	left: `${progress.value}%`,
 }));
 
-const controlClass = computed(() => [
-	'dom-range-input__control group relative min-h-7 w-full rounded-full outline-none',
+const controlClassName = computed(() => [
+	'dom-range-input__control group group/range relative min-h-7 w-full touch-none rounded-full outline-none',
 	field.disabled.value || field.readOnly.value ? 'cursor-not-allowed' : 'cursor-pointer',
 	(field.disabled.value || field.readOnly.value) && 'opacity-50',
+	props.controlClass,
 ]);
 
 const inputClass = computed(() => [
@@ -126,12 +139,12 @@ const rangeInputAttrs = computed(() => ({
 }));
 
 const trackClassName = computed(() => [
-	'dom-range-input__bar pointer-events-none absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-secondary',
+	'pointer-events-none absolute inset-x-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-secondary shadow-[inset_0_1px_2px_color-mix(in_oklch,var(--border)_70%,transparent)]',
 	props.trackClass,
 ]);
 
 const progressClassName = computed(() => [
-	'dom-range-input__bar pointer-events-none absolute left-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary',
+	'pointer-events-none absolute left-0 top-1/2 h-2 -translate-y-1/2 rounded-full bg-primary shadow-[inset_0_1px_2px_color-mix(in_oklch,var(--border)_70%,transparent)]',
 	props.progressClass,
 ]);
 
@@ -141,11 +154,13 @@ const handleClassName = computed(() => [
 	dragging.value && props.activeHandleClass,
 ]);
 
+/** Converts native range values to numbers without discarding unparseable input. */
 function toNumber(value) {
 	const number = Number(value);
 	return Number.isNaN(number) ? value : number;
 }
 
+/** Commits native input changes while preserving read-only field values. */
 function onInput(value, event) {
 	if (field.readOnly.value) {
 		event.target.value = displayValue.value;
@@ -155,51 +170,75 @@ function onInput(value, event) {
 	field.onInput(toNumber(value));
 }
 
+/** Starts one primary-pointer drag in the control's owning window, including iframe previews. */
 function beginDrag(event) {
+	if (event.button !== 0 || !event.isPrimary || dragging.value) return;
 	if (field.disabled.value || field.readOnly.value) {
 		event.preventDefault();
 		return;
 	}
 
 	event.preventDefault();
-	rangeInput.value?.focus({ preventScroll: true });
+	keyboardFocused.value = false;
 	dragging.value = true;
+	rangeInput.value?.focus({ preventScroll: true });
+	dragPointerId = event.pointerId;
+	dragWindow = control.value.ownerDocument.defaultView;
+	emit('update:dragging', true);
 	updateFromPointer(event);
-	window.addEventListener('pointermove', moveDrag);
-	window.addEventListener('pointerup', endDrag, { once: true });
-	window.addEventListener('pointercancel', endDrag, { once: true });
+	dragWindow.addEventListener('pointermove', moveDrag);
+	dragWindow.addEventListener('pointerup', endDrag);
+	dragWindow.addEventListener('pointercancel', endDrag);
+	dragWindow.addEventListener('blur', endDrag);
 }
 
+/** Follows only the pointer that started the current drag. */
 function moveDrag(event) {
+	if (event.pointerId !== dragPointerId) return;
+	if (field.disabled.value || field.readOnly.value) {
+		endDrag();
+		return;
+	}
 	event.preventDefault();
 	updateFromPointer(event);
 }
 
-function endDrag() {
+/** Releases drag listeners on completion, cancellation, window blur, or unmount. */
+function endDrag(event) {
+	if (event?.pointerId != null && event.pointerId !== dragPointerId) return;
+	const wasDragging = dragging.value;
 	dragging.value = false;
-	window.removeEventListener('pointermove', moveDrag);
-	window.removeEventListener('pointerup', endDrag);
-	window.removeEventListener('pointercancel', endDrag);
+	dragWindow?.removeEventListener('pointermove', moveDrag);
+	dragWindow?.removeEventListener('pointerup', endDrag);
+	dragWindow?.removeEventListener('pointercancel', endDrag);
+	dragWindow?.removeEventListener('blur', endDrag);
+	dragWindow = undefined;
+	dragPointerId = undefined;
+	if (wasDragging) emit('update:dragging', false);
 }
 
+/** Writes the pointer's clamped and step-aligned value to the shared field state. */
 function updateFromPointer(event) {
 	field.onInput(valueFromPointer(event));
 }
 
+/** Maps horizontal pointer position onto the finite numeric range. */
 function valueFromPointer(event) {
 	const rect = control.value?.getBoundingClientRect();
 	const min = Number(props.min);
 	const max = Number(props.max);
 	const range = max - min;
 
-	if (!rect || !Number.isFinite(min) || !Number.isFinite(max) || range <= 0) return displayValue.value;
+	if (!rect?.width || !Number.isFinite(min) || !Number.isFinite(max) || range <= 0) return displayValue.value;
 
 	const ratio = Math.min(1, Math.max(0, (event.clientX - rect.left) / rect.width));
 	return snapValue(min + ratio * range);
 }
 
+/** Implements native slider keyboard navigation with the same bounds and stepping as pointer input. */
 function onKeydown(event) {
 	if (field.disabled.value || field.readOnly.value) return;
+	keyboardFocused.value = true;
 
 	const step = stepSize();
 	const current = displayValue.value;
@@ -219,6 +258,19 @@ function onKeydown(event) {
 	field.onInput(snapValue(next));
 }
 
+/** Reveals keyboard focus while excluding the programmatic focus used during pointer scrubbing. */
+function onFocus(event) {
+	keyboardFocused.value = !dragging.value;
+	field.onFocus(event);
+}
+
+/** Clears the keyboard indicator and preserves shared field blur and validation behavior. */
+function onBlur(event) {
+	keyboardFocused.value = false;
+	field.onBlur(event);
+}
+
+/** Clamps a requested value and snaps it to the nearest increment relative to the minimum. */
 function snapValue(value) {
 	const min = Number(props.min);
 	const max = Number(props.max);
@@ -234,16 +286,19 @@ function snapValue(value) {
 	return roundToStep(next, step);
 }
 
+/** Resolves a positive step, falling back to the native range default. */
 function stepSize() {
 	const step = Number(props.step);
 	return Number.isFinite(step) && step > 0 ? step : 1;
 }
 
+/** Removes floating-point noise without losing precision required by the configured step. */
 function roundToStep(value, step) {
 	const decimals = decimalPlaces(step);
 	return Number(value.toFixed(Math.min(12, decimals + 2)));
 }
 
+/** Counts decimal precision for ordinary and negative-exponent step values. */
 function decimalPlaces(value) {
 	const text = String(value);
 	if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;
@@ -259,9 +314,10 @@ onBeforeUnmount(endDrag);
 		<div class="flex w-full items-center gap-3">
 			<div
 				ref="control"
-				:class="controlClass"
+				:class="controlClassName"
 				:style="rangeStyle"
 				:data-dragging="dragging ? 'true' : undefined"
+				:data-keyboard-focus="keyboardFocused ? '' : undefined"
 				@pointerdown="beginDrag"
 			>
 				<span aria-hidden="true" :class="trackClassName"></span>
@@ -270,6 +326,8 @@ onBeforeUnmount(endDrag);
 				<input
 					ref="rangeInput"
 					v-bind="rangeInputAttrs"
+					:aria-label="$attrs['aria-label']"
+					:aria-valuetext="$attrs['aria-valuetext']"
 					type="range"
 					:min="min"
 					:max="max"
@@ -278,8 +336,8 @@ onBeforeUnmount(endDrag);
 					:class="inputClass"
 					@input="onInput($event.target.value, $event)"
 					@keydown="onKeydown"
-					@focus="field.onFocus"
-					@blur="field.onBlur"
+					@focus="onFocus"
+					@blur="onBlur"
 				/>
 			</div>
 			<output v-if="showValue" class="min-w-10 text-right font-mono text-xs text-muted-fg">
@@ -288,9 +346,3 @@ onBeforeUnmount(endDrag);
 		</div>
 	</DomField>
 </template>
-
-<style scoped>
-.dom-range-input__bar {
-	box-shadow: inset 0 1px 2px color-mix(in oklch, var(--border) 70%, transparent);
-}
-</style>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
 import DomIconButton from '../../components/icon-button/DomIconButton.vue';
 import DomField from '../field/DomField.vue';
 import { fieldProps } from '../field/fieldProps.js';
@@ -23,11 +23,11 @@ defineOptions({
 			{ 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.' },
+			{ name: 'submit', payload: '{ submit, disabled, submitting, label, pressed }', description: 'Replace the built-in circular submit button. Bind pressed to DomButton or DomIconButton to retain keyboard submit feedback.' },
 		],
 		keyboard: [
-			{ keys: 'Enter', action: 'Submit when submitOnEnter is enabled.' },
-			{ keys: 'Shift + Enter', action: 'Insert a new line.' },
+			{ keys: 'Enter', action: 'Submit with button press feedback when submitOnEnter is enabled; otherwise insert a new line.' },
+			{ keys: 'Shift + Enter', action: 'Insert a new line when submitOnEnter is enabled; otherwise submit with button press feedback.' },
 		],
 	},
 });
@@ -77,7 +77,7 @@ const props = defineProps({
 	submitOnEnter: {
 		type: Boolean,
 		default: true,
-		_edit: { group: 'Submit props', description: 'Submit on Enter while Shift + Enter continues to add a new line.' },
+		_edit: { group: 'Submit props', description: 'When enabled, Enter submits and Shift + Enter adds a new line. When disabled, Enter adds a new line and Shift + Enter submits.' },
 	},
 	allowEmptySubmit: {
 		type: Boolean,
@@ -107,6 +107,85 @@ const { textarea, resize } = useTextareaAutosize({
 	rows,
 	maxRows,
 });
+const submitPressed = ref(false);
+let enterHeld = false;
+let pressTimer;
+let ownerWindow;
+
+/**
+ * Keeps quick submit shortcuts visible while retaining feedback for a held key.
+ *
+ * @returns {void}
+ */
+function pressSubmit() {
+	clearTimeout(pressTimer);
+	enterHeld = true;
+	submitPressed.value = true;
+	pressTimer = setTimeout(() => {
+		pressTimer = undefined;
+		if (!enterHeld) submitPressed.value = false;
+	}, 150);
+}
+
+/**
+ * Releases Enter feedback even if submission moved focus or disabled the field.
+ *
+ * @param {KeyboardEvent} event Native window keyup event.
+ * @returns {void}
+ */
+function onKeyup(event) {
+	if (event.key !== 'Enter') return;
+	enterHeld = false;
+	if (pressTimer === undefined) submitPressed.value = false;
+}
+
+/**
+ * Clears pending feedback when focus leaves the composer or its window.
+ *
+ * @returns {void}
+ */
+function resetSubmitPress() {
+	clearTimeout(pressTimer);
+	pressTimer = undefined;
+	enterHeld = false;
+	submitPressed.value = false;
+}
+
+/**
+ * Preserves field blur handling and cancels any outstanding Enter press.
+ *
+ * @param {FocusEvent} event Native textarea blur event.
+ * @returns {void}
+ */
+function onBlur(event) {
+	resetSubmitPress();
+	field.onBlur(event);
+}
+
+/**
+ * Observes key release and window blur in the textarea's owning document.
+ *
+ * @returns {void}
+ */
+function mountPressListeners() {
+	ownerWindow = textarea.value?.ownerDocument.defaultView ?? window;
+	ownerWindow?.addEventListener('keyup', onKeyup, true);
+	ownerWindow?.addEventListener('blur', resetSubmitPress);
+}
+
+/**
+ * Removes native listeners and timers when the composer is unmounted.
+ *
+ * @returns {void}
+ */
+function unmountPressListeners() {
+	ownerWindow?.removeEventListener('keyup', onKeyup, true);
+	ownerWindow?.removeEventListener('blur', resetSubmitPress);
+	resetSubmitPress();
+}
+
+onMounted(mountPressListeners);
+onBeforeUnmount(unmountPressListeners);
 
 /**
  * Writes native composer input through the shared form-field contract.
@@ -131,7 +210,7 @@ function submit(event) {
 }
 
 /**
- * Exposes keyboard activity and applies the composer Enter convention.
+ * Exposes keyboard activity and applies the selected submit/newline shortcut pair.
  *
  * @param {KeyboardEvent} event Native keydown event.
  * @returns {void}
@@ -140,12 +219,13 @@ function onKeydown(event) {
 	emit('keydown', event);
 	if (
 		event.defaultPrevented
-		|| !props.submitOnEnter
 		|| event.isComposing
 		|| event.key !== 'Enter'
-		|| event.shiftKey
+		|| event.shiftKey === props.submitOnEnter
 	) return;
 	event.preventDefault();
+	if (event.repeat || enterHeld || !canSubmit.value) return;
+	pressSubmit();
 	submit(event);
 }
 
@@ -198,7 +278,7 @@ defineExpose({ focus, resize });
 				@input="onInput"
 				@keydown="onKeydown"
 				@focus="field.onFocus"
-				@blur="field.onBlur"
+				@blur="onBlur"
 			></textarea>
 
 			<div
@@ -217,11 +297,13 @@ defineExpose({ focus, resize });
 						:disabled="!canSubmit"
 						:submitting="submitting"
 						:label="submitLabel"
+						:pressed="submitPressed"
 					>
 						<DomIconButton
 							:label="submitLabel"
 							:disabled="!canSubmit"
 							:loading="submitting"
+							:pressed="submitPressed"
 							variant="primary"
 							icon="M12 19V5m0 0-6 6m6-6 6 6"
 							@click="submit"

package/src/pages/forms/toggle/DomToggle.vue

@@ -33,7 +33,7 @@ const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
 
 const root = ref(null);
 const field = useField(props, emit, { idPrefix: 'dom-toggle' });
-const labelId = computed(() => (props.label ? `${field.id.value}-label` : ''));
+const labelId = computed(() => (props.label && props.chrome !== 'none' ? `${field.id.value}-label` : ''));
 const sizeConfig = computed(() => ({
 	sm: {
 		wrapper: 'gap-2',

package/src/pages/lib/headless/base.js

@@ -60,7 +60,7 @@ export class DomElementBase extends (isBrowser ? HTMLElement : class {}) {
 	}
 }
 
-// Tiny focus-trap used by dialog & combobox panel.
+/** Keeps Tab navigation inside a panel, including panels adopted into another document. */
 export function focusTrap(container) {
 	const sel = [
 		'a[href]', 'button:not([disabled])', 'input:not([disabled])',
@@ -69,14 +69,19 @@ export function focusTrap(container) {
 	].join(',');
 	const onKey = (e) => {
 		if (e.key !== 'Tab') return;
-		const nodes = container.querySelectorAll(sel);
-		if (!nodes.length) return;
+		const nodes = [...container.querySelectorAll(sel)].filter((node) => !node.closest('[inert], [hidden]') && node.getClientRects().length > 0);
+		if (!nodes.length) {
+			e.preventDefault();
+			container.focus({ preventScroll: true });
+			return;
+		}
 		const first = nodes[0];
 		const last = nodes[nodes.length - 1];
-		if (e.shiftKey && document.activeElement === first) {
+		const active = container.ownerDocument.activeElement;
+		if (e.shiftKey && (active === first || active === container)) {
 			e.preventDefault();
 			last.focus();
-		} else if (!e.shiftKey && document.activeElement === last) {
+		} else if (!e.shiftKey && (active === last || active === container)) {
 			e.preventDefault();
 			first.focus();
 		}

package/src/pages/lib/headless/dialog.js

@@ -51,9 +51,9 @@ function getTemplate() {
 		-webkit-backdrop-filter: blur(4px);
 		opacity: 0;
 		transition:
-			opacity 140ms ease,
-			overlay 140ms ease allow-discrete,
-			display 140ms ease allow-discrete;
+			opacity var(--dom-dialog-backdrop-duration, 140ms) ease,
+			overlay var(--dom-dialog-backdrop-duration, 140ms) ease allow-discrete,
+			display var(--dom-dialog-backdrop-duration, 140ms) ease allow-discrete;
 	}
 	dialog[open]::backdrop { opacity: 1; }
 	:host([no-backdrop]) dialog::backdrop {
@@ -153,6 +153,7 @@ export class DomDialogElement extends DomElementBase {
 		events: [
 			{ name: 'dom:before-open', description: 'Fired immediately before the dialog opens so callers can prepare render state.' },
 			{ name: 'dom:open', description: 'Fired when the dialog opens.' },
+			{ name: 'dom:request-close', description: 'Cancelable dismissal request with { reason: "escape" | "backdrop" | "control" }. Prevent the event to keep the dialog open.' },
 			{ name: 'dom:close', description: 'Fired when the dialog closes (Esc, .close(), backdrop, or data-close).' },
 			{ name: 'dom:close-complete', description: 'Fired after the close transition completes so callers can release retained data.' },
 		],
@@ -207,16 +208,17 @@ export class DomDialogElement extends DomElementBase {
 
 		this.on(this, 'click', (ev) => {
 			const closer = ev.target.closest?.('[data-close]');
-			if (closer && this.contains(closer)) this._setOpen(false);
+			if (closer && this.contains(closer)) this._requestClose('control');
 		});
 
 		this.on(this._dialog, 'click', (e) => {
 			if (this.hasAttribute('static')) return;
-			if (e.target === this._dialog) this._setOpen(false);
+			if (e.target === this._dialog) this._requestClose('backdrop');
 		});
 
 		this.on(this._dialog, 'cancel', (e) => {
-			if (this.hasAttribute('static')) e.preventDefault();
+			e.preventDefault();
+			this._requestClose('escape');
 		});
 		this.on(this._dialog, 'keydown', (e) => {
 			if (this.hasAttribute('static') && e.key === 'Escape') e.preventDefault();
@@ -251,6 +253,23 @@ export class DomDialogElement extends DomElementBase {
 		}
 	}
 
+	/**
+	 * Ask consumers whether a user-initiated dismissal may close the dialog.
+	 *
+	 * @param {'escape'|'backdrop'|'control'} reason Dismissal source.
+	 * @returns {void}
+	 */
+	_requestClose(reason) {
+		const request = new CustomEvent('dom:request-close', {
+			detail: { reason },
+			bubbles: true,
+			composed: true,
+			cancelable: true,
+		});
+		const blockedByStatic = this.hasAttribute('static') && reason !== 'control';
+		if (this.dispatchEvent(request) && !blockedByStatic) this._setOpen(false);
+	}
+
 	/** Fallback when Invoker Commands are unavailable — wire [commandfor] buttons by id. */
 	_wireCommandForButtons() {
 		const id = this.id;