Implement forms error styles

package.json

@@ -22,7 +22,7 @@
         "test:serve-pod": "community-solid-server -l warn"
     },
     "dependencies": {
-        "@aerogel/core": "0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8",
+        "@aerogel/core": "0.0.0-next.50c27187b57939cdb3063c8915f48bd4c5f584e2",
         "@aerogel/plugin-i18n": "0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8",
         "@aerogel/plugin-offline-first": "0.0.0-next.9e91efc501cd68987d45223eec1e4e749937ca20",
         "@aerogel/plugin-routing": "0.0.0-next.d34923f3b144e8f6720e6a9cdadb2cd4fb4ab289",

src/components/forms/TextInput.vue

@@ -12,9 +12,17 @@
                     @keydown.enter.prevent="form?.submit()"
                 />
             </div>
-            <AGHeadlessInputInput v-else v-bind="attrs" :class="renderedInputClass" />
+            <div v-else class="relative">
+                <AGHeadlessInputInput v-bind="attrs" :class="renderedInputClass" />
+                <div
+                    v-if="$input?.errors"
+                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                >
+                    <i-zondicons-exclamation-solid class="h-5 w-5 text-red-500" />
+                </div>
+            </div>
             <AGHeadlessInputDescription />
-            <AGHeadlessInputError class="mt-1 text-sm text-red-600" />
+            <AGHeadlessInputError class="mt-1 text-start text-sm text-red-600" />
         </div>
     </AGHeadlessInput>
 </template>
@@ -41,9 +49,11 @@ const renderedInputClass = computed(() =>
     twMerge(
         [
             props.multiline ? 'absolute inset-0 block h-full resize-none' : '',
-            'w-full rounded-lg border-0',
-            'text-base text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300',
-            'placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-[--primary-600]',
+            $input.value?.errors
+                ? 'ring-red-300 placeholder:text-red-300 focus:ring-red-500'
+                : 'ring-gray-300 placeholder:text-gray-400 focus:ring-[--primary-600]',
+            'w-full rounded-lg border-0 text-base text-gray-900 shadow-sm ring-1 ring-inset',
+            'focus:ring-2 focus:ring-inset',
         ].join(' '),
         props.inputClass,
     ));

src/lang/en.yaml

@@ -181,7 +181,7 @@ settings:
     title: Settings
     locale: Language
     localeDescription: Can't find your language? [You can contribute it!]({url})
-    localDefault: '{locale} (default)'
+    localeDefault: '{locale} (default)'
 
 time:
     yesterday: Yesterday
@@ -195,3 +195,6 @@ ui:
     close: Close
     viewDetails: View details
     delete: Delete
+
+errors:
+    required: This field is required

src/pages/landing/LandingGetStarted.vue

@@ -13,14 +13,14 @@
             </h2>
             <AGMarkdown lang-key="landing.getStarted.intro" class="mt-2 text-center font-light text-gray-600" />
 
-            <div class="mt-4 flex justify-center gap-2">
+            <div class="mt-4 flex items-start justify-center gap-2">
                 <TextInput
                     name="draft"
                     class="w-80"
                     :aria-label="$t('landing.getStarted.label')"
                     :placeholder="$t('tasks.placeholder')"
                 />
-                <TextButton submit>
+                <TextButton submit class="h-10">
                     {{ $t('landing.getStarted.submit') }}
                 </TextButton>
             </div>