.Jules/palette.md

@@ -5,3 +5,7 @@
 ## 2024-05-24 - Accessible Loading Buttons
 **Learning:** Replacing button text with a spinner destroys the accessible name.
 **Action:** Use `aria-busy="true"`, keep children in DOM (visually hidden via opacity/class), and overlay spinner absolutely. Ensure wrapper element replicates flex layout (gap/alignment) to prevent layout shifts.
+
+## 2024-05-24 - Enhancing Inputs Safely
+**Learning:** Adding features like character counters to generic input components must handle both controlled and uncontrolled states. Assuming a component is controlled (using `props.value`) can break uncontrolled usage by showing stale data (e.g., sticking at 0/100).
+**Action:** When enhancing generic components, detect uncontrolled state (e.g., `props.value === undefined`) and either implement internal state tracking or gracefully degrade (hide the feature) to avoid misleading UX.

src/components/ui/Input.module.css

@@ -61,3 +61,10 @@
   font-size: 0.8125rem;
   color: var(--md-sys-color-error);
 }
+
+.charCount {
+  font-size: 0.75rem;
+  color: var(--md-sys-color-outline);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

src/components/ui/Input.tsx

@@ -30,6 +30,11 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           {...props}
         />
         {error && <span id={errorId} className={styles.error}>{error}</span>}
+        {props.maxLength !== undefined && props.value !== undefined && (
+          <div className={styles.charCount} aria-hidden="true">
+            {String(props.value).length} / {props.maxLength}
+          </div>
+        )}
       </div>
     );
   }
@@ -66,6 +71,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           {...props}
         />
         {error && <span id={errorId} className={styles.error}>{error}</span>}
+        {props.maxLength !== undefined && props.value !== undefined && (
+          <div className={styles.charCount} aria-hidden="true">
+            {String(props.value).length} / {props.maxLength}
+          </div>
+        )}
       </div>
     );
   }