@getdom/studio 0.1.0

package/src/pages/visual/spinner/DomSpinner.vue

@@ -0,0 +1,122 @@
+<script setup>
+import { computed } from 'vue';
+
+defineOptions({
+	__doc: {
+		name: 'Spinner',
+		tag: '<DomSpinner>',
+		description: 'A compact loading indicator for buttons, toolbars, inline rows, and pending states.',
+		icon: 'M12 4a8 8 0 1 1-8 8',
+		playground: {
+			initial: {
+				label: 'Saving',
+				size: 'md',
+				background: 'color-mix(in oklab, var(--warning) 20%, transparent)',
+				foreground: 'var(--warning)',
+			},
+		},
+	},
+});
+
+const props = defineProps({
+	label: {
+		type: String,
+		default: 'Loading',
+		_edit: { description: 'Screen reader label.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: {
+			options: ['sm', 'md', 'lg'],
+			description: 'Spinner size.',
+		},
+	},
+	tone: {
+		type: String,
+		default: 'primary',
+		_edit: {
+			options: ['primary', 'neutral', 'success', 'warning', 'danger'],
+			description: 'Spinner foreground colour when no custom foreground is provided.',
+		},
+	},
+	background: {
+		type: String,
+		default: '',
+		_edit: { description: 'CSS color for the stationary donut track. Defaults to a tint of the foreground.' },
+	},
+	foreground: {
+		type: String,
+		default: '',
+		_edit: { description: 'CSS color for the spinning arc. Overrides tone when provided.' },
+	},
+});
+
+const classes = computed(getClasses);
+const spinnerStyle = computed(getSpinnerStyle);
+
+/**
+ * Builds the spinner class list for the selected size and semantic tone.
+ *
+ * @returns {Array<string>} Vue class list.
+ */
+function getClasses() {
+	return [
+		'dom-spinner inline-block rounded-full border-2',
+		{
+			sm: 'size-4',
+			md: 'size-5',
+			lg: 'size-7',
+		}[props.size] || 'size-5',
+		{
+			primary: 'text-primary',
+			neutral: 'text-muted-fg',
+			success: 'text-success',
+			warning: 'text-warning-fg',
+			danger: 'text-destructive',
+		}[props.tone] || 'text-primary',
+	];
+}
+
+/**
+ * Maps optional custom colors to the spinner's CSS variables.
+ *
+ * @returns {Record<string, string|undefined>} Inline CSS custom properties.
+ */
+function getSpinnerStyle() {
+	return {
+		'--dom-spinner-background': props.background || undefined,
+		'--dom-spinner-foreground': props.foreground || undefined,
+	};
+}
+</script>
+
+<template>
+	<span role="status" :aria-label="label" class="inline-flex items-center">
+		<span :class="classes" :style="spinnerStyle" aria-hidden="true"></span>
+		<span class="sr-only">{{ label }}</span>
+	</span>
+</template>
+
+<style scoped>
+.dom-spinner {
+	animation: dom-spinner-spin 0.7s linear infinite;
+	border-color: var(
+		--dom-spinner-background,
+		color-mix(in oklab, var(--dom-spinner-foreground, currentColor) 20%, transparent)
+	);
+	border-top-color: var(--dom-spinner-foreground, currentColor);
+}
+
+@keyframes dom-spinner-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.dom-spinner {
+		animation: none;
+	}
+}
+</style>

package/src/pages/visual/status-pill/DomStatusPill.vue

@@ -0,0 +1,75 @@
+<script setup>
+import { computed } from 'vue';
+import DomBadge from '../badge/DomBadge.vue';
+
+defineOptions({
+	__doc: {
+		name: 'Status pill',
+		tag: '<DomStatusPill>',
+		description: 'A badge with an optional status dot for live state, severity, and workflow labels.',
+		playground: {
+			initial: { label: 'Live', tone: 'success', dot: true },
+		},
+		slots: [
+			{ name: '(default)', description: 'Status label.' },
+		],
+	},
+});
+
+const props = defineProps({
+	tone: {
+		type: String,
+		default: 'neutral',
+		_edit: {
+			options: ['neutral', 'primary', 'success', 'warning', 'danger', 'info'],
+			description: 'Semantic status tone.',
+		},
+	},
+	label: {
+		type: String,
+		default: 'Status',
+		_edit: { description: 'Fallback label when no default slot is provided.' },
+	},
+	size: {
+		type: String,
+		default: 'md',
+		_edit: { options: ['sm', 'md', 'lg'], description: 'Pill density.' },
+	},
+	variant: {
+		type: String,
+		default: 'soft',
+		_edit: { options: ['soft', 'solid', 'outline'], description: 'Visual weight.' },
+	},
+	dot: {
+		type: Boolean,
+		default: true,
+		_edit: { description: 'Show a leading state dot.' },
+	},
+	pulse: {
+		type: Boolean,
+		default: false,
+		_edit: { description: 'Animate the dot for live or active states.' },
+	},
+});
+
+const dotClasses = computed(() => ({
+	neutral: 'bg-muted-fg',
+	primary: 'bg-primary',
+	success: 'bg-success',
+	warning: 'bg-warning',
+	danger: 'bg-destructive',
+	info: 'bg-primary',
+}[props.tone] || 'bg-muted-fg'));
+</script>
+
+<template>
+	<DomBadge :tone="tone" :size="size" :variant="variant">
+		<span
+			v-if="dot"
+			class="size-1.5 rounded-full"
+			:class="[dotClasses, pulse && 'animate-pulse']"
+			aria-hidden="true"
+		></span>
+		<slot>{{ label }}</slot>
+	</DomBadge>
+</template>