@asd20/ui-next 2.7.2 → 2.7.3

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.7.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.2...ui-next-v2.7.3) (2026-05-05)
+
 ## [2.7.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.1...ui-next-v2.7.2) (2026-05-05)
 
 ## [2.7.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.0...ui-next-v2.7.1) (2026-05-05)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/organisms/Asd20ComposeEmailModal/index.vue

@@ -14,7 +14,7 @@
           id="senderName"
           v-model="emailMessage.senderName"
           label="Your Full Name"
-          required
+          aria-required="true"
           @validated="validationErrors.senderName = $event"
         />
         <asd20-text-input
@@ -23,14 +23,15 @@
           type="email"
           :validator="validateEmailAddress"
           label="Your Email Address"
-          required
+          aria-required="true"
           @validated="validationErrors.senderEmail = $event"
         />
         <asd20-text-area-input
           id="messageBody"
           v-model="emailMessage.messageBody"
           label="Message"
-          required
+          help-text="All fields are required."
+          aria-required="true"
           @validated="validationErrors.messageBody = $event"
         />
         <div
@@ -146,6 +147,9 @@ export default {
     },
     isValid() {
       return (
+        Boolean(this.emailMessage.senderName) &&
+        Boolean(this.emailMessage.senderEmail) &&
+        Boolean(this.emailMessage.messageBody) &&
         this.validationErrors.senderName.length === 0 &&
         this.validationErrors.senderEmail.length === 0 &&
         this.validationErrors.messageBody.length === 0
@@ -336,8 +340,35 @@ export default {
 @media (min-width: 1024px) {
   .asd20-compose-email-modal {
     & :deep(.asd20-modal__content .asd20-viewport) {
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
       padding: space(1);
     }
+
+    & :deep(.asd20-text-area-input) {
+      align-items: stretch;
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+      min-height: 0;
+    }
+
+    & :deep(.asd20-text-area-input .input-wrapper) {
+      flex: 1 1 auto;
+      min-height: 0;
+    }
+
+    & :deep(.asd20-text-area-input textarea) {
+      height: 100%;
+      min-height: 0;
+    }
+
+    & :deep(.asd20-text-area-input__help-text) {
+      align-self: flex-start;
+      text-align: left;
+    }
+
     & :deep(.asd20-modal) {
       margin-top: auto;
       margin-bottom: auto;