docs(examples): improve color editor example components

Author: estherbrunner

docs-src/components/basic-button/copyToClipboard.ts

@@ -12,7 +12,7 @@ export const copyToClipboard =
 		container: HTMLElement,
 		messages: { [COPY_ERROR]?: string; [COPY_SUCCESS]?: string },
 	): Effect<ComponentProps, Component<BasicButtonProps>> =>
-	(host, button) =>
+	(_, button) =>
 		on('click', () => {
 			const label = button.label
 			let status: CopyStatus = COPY_SUCCESS
@@ -38,4 +38,4 @@ export const copyToClipboard =
 					status === COPY_SUCCESS ? 1000 : 3000,
 				)
 			})()
-		})(host, button)
+		})(_, button)

docs-src/components/form-colorgraph/form-colorgraph.css

@@ -46,31 +46,6 @@ form-colorgraph {
 			}
 		}
 
-		/* .knob span {
-			display: inline-block;
-			background: rgba(0 0 0 / var(--opacity-dimmed));
-			color: white;
-			font-size: var(--font-size-xs);
-			position: absolute;
-			left: var(--input-height);
-			padding: var(--space-xxs);
-			border-radius: var(--space-xxs);
-			transform: translateY(-50%);
-			margin-left: var(--space-xs);
-		}
-
-		.knob span:before {
-			position: absolute;
-			left: calc(-1 * var(--space-xs));
-			top: calc(50% - var(--space-xs));
-			content: "";
-			width: 0;
-			height: 0;
-			border: var(--space-xs) solid transparent;
-			border-left-width: 0;
-			border-right-color: rgba(0 0 0 / var(--opacity-dimmed));
-		} */
-
 		& ol {
 			list-style: none;
 			margin: 0;
@@ -128,8 +103,9 @@ form-colorgraph {
 		display: grid;
 		align-items: center;
 		column-gap: var(--space-xs);
-		grid-template-areas: "label buttons" "input buttons";
+		grid-template-areas: "label label" "input buttons" "error error";
 		grid-template-columns: 1fr auto;
+		max-width: 12rem;
 	}
 
 	& label,
@@ -143,6 +119,7 @@ form-colorgraph {
 		display: block;
 		font-size: var(--font-size-s);
 		color: var(--color-text);
+		margin-bottom: var(--space-xxs);
 	}
 
 	& input {
@@ -181,7 +158,18 @@ form-colorgraph {
 		grid-area: input;
 		display: inline-flex;
 		align-items: center;
-		column-gap: var(--space-xxs);
+	}
+
+	.error {
+		grid-area: error;
+		margin: var(--space-xs) 0 0;
+		font-size: var(--font-size-xs);
+		line-height: var(--line-height-s);
+		color: color-mix(in srgb, var(--color-text) 50%, var(--color-error));
+
+		&:empty {
+			display: none;
+		}
 	}
 
 	.slider {
@@ -227,36 +215,9 @@ form-colorgraph {
 		);
 	}
 
-	/* .tooltip {
-		display: inline-block;
-		font-size: var(--font-size-xs);
-		background: rgba(0 0 0 / var(--opacity-dimmed));
-		color: white;
-		position: absolute;
-		top: calc(-1 * var(--input-height));
-		left: calc(0.5 * var(--input-height) - 2px);
-		transform: translateX(-50%);
-		padding: var(--space-xxs);
-		border-radius: var(--space-xxs);
-		margin-bottom: var(--space-xs);
-	}
-
-	.tooltip:before {
-		position: absolute;
-		bottom: calc(-1 * var(--space-xs));
-		left: calc(50% - var(--space-xs));
-		content: "";
-		width: 0;
-		height: 0;
-		border: var(--space-xs) solid transparent;
-		border-bottom-width: 0;
-		border-top-color: rgba(0 0 0 / var(--opacity-dimmed));
-	} */
-
 	.buttons {
 		grid-area: buttons;
 		display: flex;
-		flex-direction: column-reverse;
 		align-items: center;
 
 		& button {
@@ -292,31 +253,24 @@ form-colorgraph {
 			}
 
 			&:first-of-type {
-				border-radius: 0 0 50% 50%;
-				border-top-width: 0;
+				border-radius: var(--space-xs) 0 0 var(--space-xs);
+				border-right-width: 0;
 			}
 
 			&:last-of-type {
-				border-radius: 50% 50% 0 0;
+				border-radius: 0 var(--space-xs) var(--space-xs) 0;
 			}
 		}
 	}
-
-	input::-webkit-textfield-decoration-container {
-		height: 100%;
-	}
-
-	input::-webkit-inner-form-spinbutton {
-		appearance: none;
-	}
 }
 
-@container (width > 18rem) {
+@container (width > 27rem) {
 	form-colorgraph {
 		display: grid;
 		grid-template-areas: "graph graph graph" "slider slider slider" "lightness chroma hue";
 		grid-template-columns: 1fr 1fr 1fr;
 		gap: var(--space-s) var(--space-m);
+		align-items: start;
 
 		.graph {
 			grid-area: graph;

docs-src/components/form-colorgraph/form-colorgraph.html

@@ -30,27 +30,45 @@
 			<span class="unit">%</span>
 		</div>
 		<div class="buttons">
-			<button type="button" class="decrement" aria-label="Decrement">
+			<button
+				type="button"
+				class="decrement"
+				aria-label="Decrement lightness"
+			>
 				−
 			</button>
-			<button type="button" class="increment" aria-label="Increment">
+			<button
+				type="button"
+				class="increment"
+				aria-label="Increment lightness"
+			>
 				+
 			</button>
 		</div>
+		<p class="error" aria-live="assertive" id="lightness-error"></p>
 	</div>
 	<div class="chroma">
 		<label for="chroma">Chroma</label>
 		<div class="input">
 			<input id="chroma" name="chroma" type="number" />
 		</div>
 		<div class="buttons">
-			<button type="button" class="decrement" aria-label="Decrement">
+			<button
+				type="button"
+				class="decrement"
+				aria-label="Decrement chroma"
+			>
 				−
 			</button>
-			<button type="button" class="increment" aria-label="Increment">
+			<button
+				type="button"
+				class="increment"
+				aria-label="Increment chroma"
+			>
 				+
 			</button>
 		</div>
+		<p class="error" aria-live="assertive" id="chroma-error"></p>
 	</div>
 	<div class="hue">
 		<label id="hue-label" for="hue">Hue</label>
@@ -59,12 +77,13 @@
 			<span class="unit">°</span>
 		</div>
 		<div class="buttons">
-			<button type="button" class="decrement" aria-label="Decrement">
+			<button type="button" class="decrement" aria-label="Decrement hue">
 				−
 			</button>
-			<button type="button" class="increment" aria-label="Increment">
+			<button type="button" class="increment" aria-label="Increment hue">
 				+
 			</button>
 		</div>
+		<p class="error" aria-live="assertive" id="hue-error"></p>
 	</div>
 </form-colorgraph>

docs-src/components/form-colorgraph/form-colorgraph.ts

@@ -9,6 +9,7 @@ import {
 	setAttribute,
 	setProperty,
 	setStyle,
+	setText,
 	state,
 } from '../../..'
 import { asOklch } from '../../functions/parser/asOklch'
@@ -19,9 +20,9 @@ export type FormColorgraphAxis = 'l' | 'c' | 'h'
 
 export type FormColorgraphProps = {
 	color: Oklch
-	lightness: number
-	chroma: number
-	hue: number
+	readonly lightness: number
+	readonly chroma: number
+	readonly hue: number
 	stepDown: (axis: FormColorgraphAxis, bigStep?: boolean) => void
 	stepUp: (axis: FormColorgraphAxis, bigStep?: boolean) => void
 }
@@ -52,18 +53,20 @@ export default component<FormColorgraphProps>(
 	},
 	(el, { all, first, useElement }) => {
 		// Required elements
-		const lInput = useElement(
-			'input[name="lightness"]',
-			'Add an <input[name="lightness"]> element to control the lightness of the color.',
-		)
-		const cInput = useElement(
-			'input[name="chroma"]',
-			'Add an <input[name="chroma"]> element to control the chroma of the color.',
-		)
-		const hInput = useElement(
-			'input[name="hue"]',
-			'Add an <input[name="hue"]> element to control the hue of the color.',
-		)
+		const inputs = {
+			l: useElement(
+				'input[name="lightness"]',
+				'Add an <input[name="lightness"]> element to control the lightness of the color.',
+			),
+			c: useElement(
+				'input[name="chroma"]',
+				'Add an <input[name="chroma"]> element to control the chroma of the color.',
+			),
+			h: useElement(
+				'input[name="hue"]',
+				'Add an <input[name="hue"]> element to control the hue of the color.',
+			),
+		}
 		const graph = useElement(
 			'.graph',
 			'Add a <.graph> element as a container for the color graph.',
@@ -82,18 +85,23 @@ export default component<FormColorgraphProps>(
 		)
 
 		// Initialize
-		lInput.min = '0'
-		lInput.max = '100'
-		lInput.step = 'any'
-		cInput.min = '0'
-		cInput.max = '0.4'
-		cInput.step = 'any'
-		hInput.min = '0'
-		hInput.max = '360'
-		hInput.step = 'any'
+		for (const [key, input] of Object.entries(inputs)) {
+			input.min = '0'
+			input.max = key === 'l' ? '100' : key === 'c' ? '0.4' : '360'
+			input.step = 'any'
+		}
 		slider.setAttribute('aria-valuemin', '0')
 		slider.setAttribute('aria-valuemax', '360')
 
+		// Internal states
+		const canvasSize = state(graph.getBoundingClientRect().width)
+		const trackWidth = computed(() => canvasSize.get() - 2 * TRACK_OFFSET)
+		const errors = {
+			l: state(''),
+			c: state(''),
+			h: state(''),
+		}
+
 		// Step methods
 		const getValue = (axis: FormColorgraphAxis) => {
 			return axis === 'l'
@@ -104,13 +112,22 @@ export default component<FormColorgraphProps>(
 		}
 		const commit = (color: Oklch) => {
 			el.color = color
+			for (const key of ['l', 'c', 'h']) {
+				errors[key].set('')
+			}
 			emitEvent('color-change', 'color')
 		}
 		const setToNearestStep = (axis: FormColorgraphAxis, value: number) => {
 			const nearest =
 				Math.round(value / AXIS_STEP[axis]) * AXIS_STEP[axis]
-			if (nearest >= 0 && nearest <= AXIS_MAX[axis])
-				commit({ ...el.color, [axis]: nearest })
+			if (nearest < 0 || nearest > AXIS_MAX[axis]) return
+			const color = { ...el.color, [axis]: nearest }
+			if (inP3Gamut(color)) {
+				commit(color)
+			} else {
+				inputs[axis].setCustomValidity('Color out of gamut')
+				errors[axis].set(inputs[axis].validationMessage)
+			}
 		}
 		el.stepDown = (axis: FormColorgraphAxis, bigStep = false) => {
 			setToNearestStep(axis, getValue(axis) - getStep(axis, bigStep))
@@ -119,10 +136,6 @@ export default component<FormColorgraphProps>(
 			setToNearestStep(axis, getValue(axis) + getStep(axis, bigStep))
 		}
 
-		// Internal states
-		const canvasSize = state(graph.getBoundingClientRect().width)
-		const trackWidth = computed(() => canvasSize.get() - 2 * TRACK_OFFSET)
-
 		// Helper functions
 		const formatNumber = (axis: FormColorgraphAxis, value: number) => {
 			const v = axis === 'l' ? value * 100 : value
@@ -199,6 +212,16 @@ export default component<FormColorgraphProps>(
 				}
 			},
 			all('input', [
+				setProperty('ariaInvalid', target => {
+					const axis = getAxis(target)
+					return axis ? String(!!errors[axis].get()) : 'false'
+				}),
+				setAttribute('aria-errormessage', target => {
+					const axis = getAxis(target)
+					return axis && errors[axis].get()
+						? `${target.id}-error`
+						: null
+				}),
 				setProperty('value', target => {
 					const axis = getAxis(target)
 					return axis ? formatNumber(axis, el.color[axis] ?? 0) : '0'
@@ -207,8 +230,22 @@ export default component<FormColorgraphProps>(
 					const axis = getAxis(target)
 					if (!axis) return
 					const value = target.valueAsNumber
-					const newColor = { ...el.color, [axis]: value }
-					if (inP3Gamut(newColor)) commit(newColor)
+					const newColor = {
+						...el.color,
+						[axis]: axis === 'l' ? value / 100 : value,
+					}
+					if (inP3Gamut(newColor)) {
+						commit(newColor)
+					} else {
+						target.setCustomValidity('Color out of gamut')
+						errors[axis].set(target.validationMessage)
+					}
+				}),
+			]),
+			all('.error', [
+				setText(target => {
+					const axis = getAxis(target)
+					return axis ? errors[axis].get() : ''
 				}),
 			]),
 			first('.graph', [