From cb88d362ac06c9eac099ce515ae7ccca66a37b26 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 9 Nov 2026 07:14:59 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Add=20required=20aste?=
 =?UTF-8?q?risk=20to=20Input=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a visual asterisk next to the label when the `required` attribute is present on the `Input` component. The asterisk uses `aria-hidden="true"` to prevent redundant screen reader announcements.

Co-authored-by: bobdivx <6737167+bobdivx@users.noreply.github.com>
---
 apps/web/src/components/ui/Input.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/Input.tsx b/apps/web/src/components/ui/Input.tsx
index 478b50c2e..9ee54fe20 100644
--- a/apps/web/src/components/ui/Input.tsx
+++ b/apps/web/src/components/ui/Input.tsx
@@ -13,7 +13,16 @@ export function Input({ label, hint, class: className, id, ...rest }: Props) {
   const inputId = id ?? (label ? label.toLowerCase().replace(/\s+/g, '-') : fallbackId);
   return (
     <label class="flex min-w-0 w-full flex-col gap-1.5 text-sm">
-      {label && <span class="font-medium text-[var(--color-ink)]">{label}</span>}
+      {label && (
+        <span class="font-medium text-[var(--color-ink)]">
+          {label}
+          {rest.required && (
+            <span class="ml-1 text-[var(--color-danger)]" aria-hidden="true">
+              *
+            </span>
+          )}
+        </span>
+      )}
       <input
         id={inputId}
         class={cn(