@asd20/ui-next 2.7.1 → 2.7.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # 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.1",
+  "version": "2.7.3",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/molecules/Asd20TextAreaInput/index.vue

@@ -91,7 +91,7 @@ $input-focus-color: var(--color__accent-t50);
     margin: 0;
     color: var(--website-card__reverse-background-color);
     border: 2px solid var(--color__accent);
-    border-radius: 0;
+    border-radius: var(--website-shape__radius-s);
     font-family: var(--website-typography__font-family-body);
     font-size: 1rem;
     line-height: 1;

package/src/components/molecules/Asd20TextInput/index.vue

@@ -86,7 +86,7 @@ $input-focus-color: var(--color__accent-t50);
     margin: 0;
     color: var(--website-card__reverse-background-color);
     border: 2px solid var(--color__accent);
-    border-radius: 0;
+    border-radius: var(--website-shape__radius-s);
     font-family: var(--website-typography__font-family-body);
     font-size: 1rem;
     line-height: 1;

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,12 +340,40 @@ 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;
-      max-width: 30vw;
+      height: 80vh;
+      max-width: 50vw;
     }
   }
 }