feat(13-03): port input.templ/input.css and textarea.templ/textarea.css (GREEN)

- input.css: .ui-input with min-height 44px, border-radius 0.75rem, focus ring
- input.templ: InputProps with ID/Name/Type/Placeholder/Value/Disabled/Required/Attrs
- textarea.css: .ui-textarea with min-height 7rem, resize vertical, focus ring
- textarea.templ: TextareaProps with ID/Name/Value/Placeholder/Rows/Disabled/Required/Attrs
- tailwind.input.css: add @import for input.css and textarea.css
- All 7 TestInput/TestTextarea tests passing

backend/internal/web/ui/input.css

@@ -0,0 +1,22 @@
+.ui-input {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 44px;
+  padding: 0.75rem 0.95rem;
+  width: 100%;
+}
+
+.ui-input::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-input:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}

backend/internal/web/ui/input.templ

@@ -0,0 +1,30 @@
+package ui
+
+type InputProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Type        string
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Input(props InputProps) {
+	<input
+		id={ inputID(props.ID, props.Name) }
+		type={ inputType(props.Type) }
+		name={ props.Name }
+		value={ props.Value }
+		placeholder={ props.Placeholder }
+		class="ui-input"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	/>
+}

backend/internal/web/ui/textarea.css

@@ -0,0 +1,23 @@
+.ui-textarea {
+  appearance: none;
+  background: var(--color-surface-default);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0.75rem;
+  color: var(--color-text-primary);
+  font: inherit;
+  line-height: 1.4;
+  min-height: 7rem;
+  padding: 0.85rem 0.95rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.ui-textarea::placeholder {
+  color: var(--color-text-faint);
+}
+
+.ui-textarea:focus {
+  border-color: var(--color-brand-focus);
+  box-shadow: 0 0 0 3px var(--color-focus-ring-strong);
+  outline: none;
+}

backend/internal/web/ui/textarea.templ

@@ -0,0 +1,29 @@
+package ui
+
+type TextareaProps struct {
+	ID          string
+	Name        string
+	Value       string
+	Placeholder string
+	Rows        int
+	Disabled    bool
+	Required    bool
+	Attrs       templ.Attributes
+}
+
+templ Textarea(props TextareaProps) {
+	<textarea
+		id={ inputID(props.ID, props.Name) }
+		name={ props.Name }
+		placeholder={ props.Placeholder }
+		rows={ textareaRows(props.Rows) }
+		class="ui-textarea"
+		if props.Disabled {
+			disabled
+		}
+		if props.Required {
+			required
+		}
+		{ props.Attrs... }
+	>{ props.Value }</textarea>
+}

backend/tailwind.input.css

@@ -7,5 +7,7 @@
 @import "./internal/web/ui/base.css";
 @import "./internal/web/ui/auth.css";
 @import "./internal/web/ui/button.css";
-@import "./internal/web/ui/card.css";
 @import "./internal/web/ui/badge.css";
+@import "./internal/web/ui/card.css";
+@import "./internal/web/ui/input.css";
+@import "./internal/web/ui/textarea.css";