@zeix/ui-element/docs-src/components/rating-feedback/rating-feedback.html

UIElement - minimal reactive framework based on Web Components

<rating-feedback>
	<form>
		<rating-stars>
			<fieldset>
				<legend class="visually-hidden">Rate</legend>
				<label data-key="1">
					<input type="radio" class="visually-hidden" name="rating" value="1">
					<span class="label">☆</span>
				</label>
				<label data-key="2">
					<input type="radio" class="visually-hidden" name="rating" value="2">
					<span class="label">☆</span>
				</label>
				<label data-key="3">
					<input type="radio" class="visually-hidden" name="rating" value="3">
					<span class="label">☆</span>
				</label>
				<label data-key="4">
					<input type="radio" class="visually-hidden" name="rating" value="4">
					<span class="label">☆</span>
				</label>
				<label data-key="5">
					<input type="radio" class="visually-hidden" name="rating" value="5">
					<span class="label">☆</span>
				</label>
			</fieldset>
		</rating-stars>
		<div class="feedback" hidden>
			<header>
				<button button="button" class="hide" aria-label="Hide">×</button>
				<p data-key="1" hidden>We're sorry to hear that! Your feedback is important, and we'd love to improve. Let us know how we can do better.</p>
				<p data-key="2" hidden>Thank you for your honesty. We appreciate your feedback and will work on making things better.</p>
				<p data-key="3" hidden>Thanks for your rating! If there's anything we can improve, we'd love to hear your thoughts.</p>
				<p data-key="4" hidden>We're glad you had a good experience! If there's anything that could make it even better, let us know.</p>
				<p data-key="5" hidden>Thank you for your support! We're thrilled you had a great experience. Your feedback keeps us motivated!</p>
			</header>
			<fieldset>
				<label for="rating-feedback">Describe your experience (optional)</label>
				<textarea id="rating-feedback"></textarea>
				<input-button disabled>
					<button type="submit" class="primary" disabled>Submit</button>
				</input-button>
			</fieldset>
		</div>
	</form>
</rating-feedback>