@getdom/studio 0.1.0

package/src/pages/forms/listbox/DomListbox.vue

@@ -0,0 +1,105 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Listbox',
+		tag: '<DomListbox>',
+		description: 'A styled select-like list without free-text entry.',
+		slots: [{ name: 'option', payload: '{ option, index }', description: 'Custom option markup.' }],
+		events: [
+			{ name: 'update:modelValue', payload: '(value: string)', description: 'Emitted when selection changes.' },
+			{ name: 'select', payload: '({ option, value })', description: 'Emitted with the full selected option.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: [String, Number],
+		default: '',
+		_edit: { group: 'Control props', description: 'Selected option value.' },
+	},
+	options: {
+		type: Array,
+		required: true,
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Available options.',
+			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}` },
+				],
+			},
+		},
+	},
+	orientation: {
+		type: String,
+		default: 'vertical',
+		_edit: { group: 'Control props', options: ['vertical', 'horizontal'], description: 'Arrow key direction.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'select', 'focus', 'blur']);
+const root = ref(null);
+const field = useField(props, emit, { idPrefix: 'dom-listbox' });
+
+onMounted(async () => {
+	await import('../../lib/headless/listbox.js');
+	root.value?.addEventListener('dom:change', (event) => {
+		const option = props.options.find((item) => valueOf(item) === event.detail.value) || null;
+		field.onInput(event.detail.value);
+		emit('select', { value: event.detail.value, option });
+	});
+});
+
+watch(field.value, (value) => {
+	if (root.value && String(root.value.value) !== String(value ?? '')) root.value.value = value ?? '';
+});
+
+const labelOf = (option) => (option && typeof option === 'object' ? (option.label ?? option.value) : option);
+const valueOf = (option) => String(option && typeof option === 'object' ? (option.value ?? option.label) : option);
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-if="field.htmlName.value"
+			type="hidden"
+			:name="field.htmlName.value"
+			:value="field.value.value"
+		/>
+		<dom-listbox
+			ref="root"
+			:id="field.id.value"
+				:value="field.value.value ?? ''"
+				:orientation="orientation"
+				:aria-label="label || undefined"
+				:aria-describedby="field.describedBy.value || undefined"
+				:aria-invalid="field.invalid.value || undefined"
+				:aria-errormessage="field.errorId.value || undefined"
+				class="skin-card grid gap-1 rounded-2xl p-1 data-[invalid]:border-destructive"
+			:class="orientation === 'horizontal' && 'grid-flow-col'"
+			:data-invalid="field.invalid.value ? '' : undefined"
+		>
+			<button
+				v-for="(option, index) in options"
+				:key="valueOf(option) || index"
+				role="option"
+				:data-value="valueOf(option)"
+				:disabled="field.disabled.value || undefined"
+				class="rounded-xl px-3 py-2 text-left text-sm text-canvas-fg outline-none transition hover:bg-secondary focus:bg-secondary aria-selected:bg-primary aria-selected:text-primary-fg disabled:cursor-not-allowed disabled:opacity-50"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			>
+				<slot name="option" :option="option" :index="index">{{ labelOf(option) }}</slot>
+			</button>
+		</dom-listbox>
+	</DomField>
+</template>

package/src/pages/forms/money-input/DomMoneyInput.vue

@@ -0,0 +1,147 @@
+<script setup>
+import { computed } from 'vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Money input',
+		tag: '<DomMoneyInput>',
+		description: 'A field-compatible decimal input with currency chrome for prices, budgets, invoices, and payouts.',
+		icon: 'M12 5v14M7 8h7a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h8',
+		events: [
+			{ name: 'update:modelValue', payload: 'string | number', description: 'Fired when the amount changes.' },
+			{ name: 'focus', payload: 'FocusEvent', description: 'Fired when the input receives focus.' },
+			{ name: 'blur', payload: 'FocusEvent', description: 'Fired when the input loses focus.' },
+		],
+		playground: {
+			initial: {
+				label: 'Price',
+				modelValue: '149.00',
+				currency: 'GBP',
+				description: 'Stored as a decimal string; upload and billing logic stay parent-owned.',
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: [String, Number],
+		default: '',
+		_edit: { description: 'Current decimal amount.' },
+	},
+	currency: {
+		type: String,
+		default: 'GBP',
+		_edit: { description: 'ISO currency code used for the visual prefix.' },
+	},
+	locale: {
+		type: String,
+		default: 'en-GB',
+		_edit: { description: 'Locale used to resolve the currency symbol.' },
+	},
+	prefix: {
+		type: String,
+		default: '',
+		_edit: { description: 'Prefix override. Defaults to the currency symbol.' },
+	},
+	suffix: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional suffix such as per month.' },
+	},
+	min: {
+		type: Number,
+		default: null,
+		_edit: { description: 'Minimum numeric value.' },
+	},
+	max: {
+		type: Number,
+		default: null,
+		_edit: { description: 'Maximum numeric value.' },
+	},
+	step: {
+		type: Number,
+		default: 0.01,
+		_edit: { description: 'Native numeric step hint.' },
+	},
+	textAlign: {
+		type: String,
+		default: 'right',
+		_edit: {
+			options: ['left', 'right'],
+			description: 'Input text alignment.',
+		},
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-money-input' });
+
+const prefixText = computed(() => props.prefix || currencySymbol(props.currency, props.locale));
+const inputAttrs = computed(() => ({
+	...field.inputAttrs.value,
+	inputmode: 'decimal',
+	autocomplete: 'off',
+	'aria-valuemin': props.min ?? undefined,
+	'aria-valuemax': props.max ?? undefined,
+}));
+const controlClass = computed(() => [
+	'flex h-10 w-full overflow-hidden rounded-lg border border-input bg-canvas text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-ring/50',
+	field.invalid.value && 'border-destructive',
+	(field.disabled.value || field.readOnly.value) && 'opacity-60',
+]);
+const inputClass = computed(() => [
+	'min-w-0 flex-1 bg-transparent px-3 text-canvas-fg outline-none placeholder:text-muted-fg disabled:cursor-not-allowed',
+	props.textAlign === 'right' ? 'text-right' : 'text-left',
+]);
+
+function currencySymbol(currency, locale) {
+	try {
+		const parts = new Intl.NumberFormat(locale || undefined, {
+			style: 'currency',
+			currency: currency || 'GBP',
+			currencyDisplay: 'narrowSymbol',
+		}).formatToParts(0);
+		return parts.find((part) => part.type === 'currency')?.value || currency || '';
+	} catch {
+		return currency || '';
+	}
+}
+
+function onInput(event) {
+	field.onInput(event.target.value);
+}
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div :class="controlClass">
+			<span
+				v-if="prefixText"
+				class="flex shrink-0 items-center border-r border-border bg-secondary px-3 text-sm font-medium text-muted-fg"
+				aria-hidden="true"
+			>
+				{{ prefixText }}
+			</span>
+			<input
+				v-bind="inputAttrs"
+				type="text"
+				:class="inputClass"
+				:placeholder="placeholder || '0.00'"
+				@input="onInput"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			/>
+			<span
+				v-if="suffix"
+				class="flex shrink-0 items-center border-l border-border bg-secondary px-3 text-sm font-medium text-muted-fg"
+			>
+				{{ suffix }}
+			</span>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/native-select/DomNativeSelect.vue

@@ -0,0 +1,67 @@
+<script setup>
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+defineOptions({
+	__doc: {
+		name: 'Native select',
+		tag: '<DomNativeSelect>',
+		description: 'A styled native select for cases where browser-native picker behaviour is intentionally preferred.',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the selected option changes.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	options: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			props: {
+				description: 'Options can be strings or objects with label/value.',
+				compact: true,
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Team workspace' },
+					{ key: 'value', label: 'Value', placeholder: 'team' },
+				],
+			},
+		},
+	},
+	placeholder: {
+		type: String,
+		default: 'Select an option',
+		_edit: { description: 'Disabled placeholder option.' },
+	},
+});
+
+const emit = defineEmits(['update:modelValue']);
+const labelOf = (option) => (option && typeof option === 'object' ? (option.label ?? option.value) : option);
+const valueOf = (option) => (option && typeof option === 'object' ? (option.value ?? option.label) : option);
+const field = useField(props, emit, { idPrefix: 'dom-native-select' });
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<div class="relative">
+			<select
+				v-bind="field.inputAttrs.value"
+				class="skin-input h-10 appearance-none pr-10"
+				@change="field.onInput($event.target.value)"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			>
+				<option v-if="placeholder" disabled value="">{{ placeholder }}</option>
+				<option v-for="option in options" :key="valueOf(option)" :value="valueOf(option)">
+					{{ labelOf(option) }}
+				</option>
+			</select>
+			<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted-fg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+				<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+			</svg>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/number-input/DomNumberInput.vue

@@ -0,0 +1,47 @@
+<script setup>
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: [Number, String],
+		default: '',
+		_edit: { description: 'Current numeric value.' },
+	},
+	min: Number,
+	max: Number,
+	step: Number,
+});
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const field = useField(props, emit, { idPrefix: 'dom-number-input' });
+
+/**
+ * Normalizes numeric input text while preserving a deliberately empty value.
+ *
+ * @param {string|number} value Current input value.
+ * @returns {string|number} Parsed number, empty string, or original invalid value.
+ */
+function toNumber(value) {
+	if (value === '') return '';
+	const number = Number(value);
+	return Number.isNaN(number) ? value : number;
+}
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<input
+			v-bind="field.inputAttrs.value"
+			type="number"
+			:min="min"
+			:max="max"
+			:step="step"
+			class="skin-input h-10"
+			@input="field.onInput(toNumber($event.target.value))"
+			@focus="field.onFocus"
+			@blur="field.onBlur"
+		/>
+	</DomField>
+</template>

package/src/pages/forms/password-input/DomPasswordInput.vue

@@ -0,0 +1,218 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import DomAlert from '../../visual/alert/DomAlert.vue';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+import DomPasswordStrength from '../password-strength/DomPasswordStrength.vue';
+import { checkCompromisedPassword } from './pwnedPasswords.js';
+
+defineOptions({
+	__doc: {
+		name: 'Password input',
+		tag: '<DomPasswordInput>',
+		description: 'A styled password field with show/hide control, strength feedback, and an optional compromised-password warning.',
+		events: [
+			{ name: 'update:modelValue', payload: 'string', description: 'Fired when the password text changes.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	label: {
+		type: String,
+		default: 'Password',
+		_edit: { description: 'Visible field label.' },
+	},
+	description: {
+		type: String,
+		default: '',
+		_edit: { description: 'Optional helper copy below the label.' },
+	},
+	placeholder: {
+		type: String,
+		default: 'Enter password',
+		_edit: { description: 'Placeholder text shown before entry.' },
+	},
+	showStrength: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show a strength meter below the field.' },
+	},
+	compromised: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Show a warning when the current password has been found in a breach.' },
+	},
+	checkCompromised: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Check the password against the Have I Been Pwned Pwned Passwords API.' },
+	},
+	compromisedCheckDelay: {
+		type: Number,
+		default: 600,
+		_edit: { description: 'Delay in milliseconds before checking the Pwned Passwords API after typing.' },
+	},
+	compromisedMessage: {
+		type: String,
+		default: 'Choose a different password that you have not used elsewhere.',
+		_edit: { description: 'Guidance shown when compromised is true.' },
+	},
+	compromisedTitle: {
+		type: String,
+		default: 'Password found in a data breach',
+		_edit: { description: 'Heading shown above the compromised-password guidance.' },
+	},
+});
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur']);
+const visible = ref(false);
+const field = useField(props, emit, { idPrefix: 'dom-password-input' });
+const compromisedCheck = ref({
+	pending: false,
+	compromised: false,
+	count: 0,
+	error: null,
+});
+const isCompromised = computed(() => props.compromised || (props.checkCompromised && compromisedCheck.value.compromised));
+const passwordFieldAttrs = computed(() => ({
+	...field.fieldAttrs.value,
+	invalid: field.invalid.value || isCompromised.value,
+}));
+const compromisedWarning = computed(() => {
+	if (!props.checkCompromised || !compromisedCheck.value.compromised) return props.compromisedMessage;
+	const count = compromisedCheck.value.count;
+	const occurrences = count === 1 ? 'time' : 'times';
+	return `This password appears ${count.toLocaleString()} ${occurrences} in known breach data. ${props.compromisedMessage}`;
+});
+
+let compromisedCheckTimer;
+let compromisedCheckController;
+
+const resetCompromisedCheck = () => {
+	clearTimeout(compromisedCheckTimer);
+	compromisedCheckController?.abort();
+	compromisedCheckController = null;
+	compromisedCheck.value = {
+		pending: false,
+		compromised: false,
+		count: 0,
+		error: null,
+	};
+};
+
+const runCompromisedCheck = async (password) => {
+	compromisedCheckController?.abort();
+	const controller = new AbortController();
+	compromisedCheckController = controller;
+	compromisedCheck.value = {
+		pending: true,
+		compromised: false,
+		count: 0,
+		error: null,
+	};
+
+	try {
+		const result = await checkCompromisedPassword(password, { signal: controller.signal });
+		if (controller.signal.aborted) return;
+		compromisedCheck.value = {
+			pending: false,
+			compromised: result.compromised,
+			count: result.count,
+			error: null,
+		};
+	} catch (error) {
+		if (controller.signal.aborted) return;
+		compromisedCheck.value = {
+			pending: false,
+			compromised: false,
+			count: 0,
+			error,
+		};
+	}
+};
+
+if (typeof window !== 'undefined') {
+	watch(
+		() => [props.checkCompromised, field.value.value, props.compromisedCheckDelay],
+		([shouldCheck, password, delay]) => {
+			clearTimeout(compromisedCheckTimer);
+			compromisedCheckController?.abort();
+
+			if (!shouldCheck || !password) {
+				resetCompromisedCheck();
+				return;
+			}
+
+			compromisedCheck.value = {
+				pending: true,
+				compromised: false,
+				count: 0,
+				error: null,
+			};
+			compromisedCheckTimer = setTimeout(() => runCompromisedCheck(password), Math.max(0, delay));
+		},
+		{ immediate: true },
+	);
+
+	onBeforeUnmount(resetCompromisedCheck);
+}
+
+</script>
+
+<template>
+	<DomField v-bind="passwordFieldAttrs" :chrome="chrome">
+		<div class="dom-password-input__body">
+			<div class="relative">
+				<input
+					v-bind="field.inputAttrs.value"
+					:type="visible ? 'text' : 'password'"
+					:aria-invalid="field.invalid.value || isCompromised || undefined"
+					class="skin-input h-10 pr-11"
+					@input="field.onInput($event.target.value)"
+					@focus="field.onFocus"
+					@blur="field.onBlur"
+				/>
+				<button
+					type="button"
+					class="absolute inset-y-1 right-1 grid size-8 place-items-center rounded-md text-muted-fg transition hover:bg-secondary hover:text-secondary-fg focus-visible:outline-2 focus-visible:outline-ring disabled:opacity-50"
+					:disabled="field.disabled.value"
+					:aria-label="visible ? 'Hide password' : 'Show password'"
+					@click="visible = !visible"
+				>
+					<svg v-if="visible" class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+						<path d="M3 3l18 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+						<path d="M10.6 10.6a2 2 0 0 0 2.8 2.8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
+						<path d="M8.5 5.4A9.8 9.8 0 0 1 12 4.75c4.6 0 7.7 3.4 9 7.25a11 11 0 0 1-2.2 3.7M6.2 6.9A11 11 0 0 0 3 12c1.3 3.85 4.4 7.25 9 7.25 1.2 0 2.3-.23 3.3-.64" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+					</svg>
+					<svg v-else class="size-4" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+						<path d="M3 12c1.3-3.85 4.4-7.25 9-7.25s7.7 3.4 9 7.25c-1.3 3.85-4.4 7.25-9 7.25S4.3 15.85 3 12Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
+						<path d="M12 14.75a2.75 2.75 0 1 0 0-5.5 2.75 2.75 0 0 0 0 5.5Z" stroke="currentColor" stroke-width="1.8" />
+					</svg>
+				</button>
+			</div>
+
+			<DomPasswordStrength v-if="showStrength" :model-value="field.value.value" class="mt-3" />
+			<transition
+				enter-active-class="transition duration-300 ease"
+				enter-from-class="max-h-0 -translate-y-2 opacity-0"
+				enter-to-class="max-h-40 translate-y-0 opacity-100"
+				leave-active-class="transition duration-200 ease"
+				leave-from-class="max-h-40 translate-y-0 opacity-100"
+				leave-to-class="max-h-0 -translate-y-2 opacity-0"
+			>
+				<DomAlert
+					v-if="isCompromised"
+					class="dom-password-input__warning mt-3 overflow-hidden"
+					tone="danger"
+					variant="soft"
+					:title="compromisedTitle"
+					:description="compromisedWarning"
+					style="transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1), transform 0.3s cubic-bezier(0.4,0,0.2,1);"
+				/>
+			</transition>
+		</div>
+	</DomField>
+</template>

package/src/pages/forms/password-input/pwnedPasswords.js

@@ -0,0 +1,47 @@
+const PWNED_PASSWORDS_RANGE_ENDPOINT = 'https://api.pwnedpasswords.com/range/';
+
+const byteToHex = (byte) => byte.toString(16).padStart(2, '0');
+
+export async function sha1PasswordHash(password) {
+	if (!globalThis.crypto?.subtle) {
+		throw new Error('Web Crypto API is required to check compromised passwords.');
+	}
+
+	const encoded = new TextEncoder().encode(password);
+	const digest = await globalThis.crypto.subtle.digest('SHA-1', encoded);
+	return Array.from(new Uint8Array(digest), byteToHex).join('').toUpperCase();
+}
+
+export async function checkCompromisedPassword(password, { signal } = {}) {
+	const value = `${password ?? ''}`;
+	if (!value) {
+		return {
+			compromised: false,
+			count: 0,
+		};
+	}
+
+	const hash = await sha1PasswordHash(value);
+	const prefix = hash.slice(0, 5);
+	const suffix = hash.slice(5);
+	const response = await fetch(`${PWNED_PASSWORDS_RANGE_ENDPOINT}${prefix}`, {
+		headers: {
+			'Add-Padding': 'true',
+		},
+		signal,
+	});
+
+	if (!response.ok) {
+		throw new Error(`Pwned Passwords request failed with ${response.status}.`);
+	}
+
+	const match = (await response.text())
+		.split(/\r?\n/)
+		.find((line) => line.startsWith(`${suffix}:`));
+	const count = match ? Number.parseInt(match.split(':')[1], 10) || 0 : 0;
+
+	return {
+		compromised: count > 0,
+		count,
+	};
+}