@asd20/ui-next 2.23.2 → 2.23.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.23.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.2...ui-next-v2.23.3) (2026-09-10)
+
+
+### Bug Fixes
+
+* revise api contract to accommodate previous changes ([79ea872](https://github.com/academydistrict20/asd20-ui-next/commit/79ea8729f75b5aa382d69fd936d05b523d7f63d7))
+
 ## [2.23.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.1...ui-next-v2.23.2) (2026-09-10)
 
 ## [2.23.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.23.0...ui-next-v2.23.1) (2026-09-09)

package/package.json

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

package/src/components/atoms/Asd20MultiselectInput/index.vue

@@ -53,7 +53,7 @@
       v-html="computedHelpText"
     />
     <div
-      v-for="(v, index) in validationErrors"
+      v-for="(v, index) in renderedValidationErrors"
       :key="index"
       class="asd20-multiselect-input__validation-error"
       v-html="v"
@@ -168,6 +168,8 @@ export default {
   },
   methods: {
     emitValue(value) {
+      this.isDirty = true
+      this.validate(value)
       this.$emit('update:modelValue', value)
     },
     resolveSelectedItem(item) {
@@ -417,24 +419,13 @@ $input-reversed-text-color: var(--color__accent-t100);
 
   &__validation-error {
     flex-basis: 100%;
-    color: darkred;
     font-size: 0.75rem;
     margin-top: space(0.125);
   }
 
   &--has-errors {
-    label {
-      color: darkred;
-    }
     & :deep(.multiselect__tags) {
-      border: 2px solid darkred;
-    }
-    & :deep(.multiselect--active .multiselect__tags) {
-      box-shadow: 0 0 0 5px darkred inset;
-    }
-    & :deep(.multiselect__select:before) {
-      color: darkred;
-      /* border-color: var(--color__danger) transparent transparent transparent;*/
+      border: 2px solid asd20-swatch('emergency', -1);
     }
   }
 }

package/src/components/atoms/Asd20SelectInput/index.vue

@@ -14,6 +14,7 @@
       <div class="asd20-select-input__select-wrapper">
         <select
           v-bind="mergedInputAttrs"
+          @blur="onBlur"
           @input="input"
         >
           <option
@@ -43,7 +44,7 @@
       v-html="computedHelpText"
     />
     <div
-      v-for="(v, index) in validationErrors"
+      v-for="(v, index) in renderedValidationErrors"
       :key="index"
       class="asd20-select-input__validation-error"
       v-html="v"
@@ -215,25 +216,15 @@ $input-reversed-text-color: var(--color__accent-t100);
   }
 
   &__validation-error {
-    color: var(--color__danger-s20);
     font-size: 0.75rem;
     margin-top: space(0.125);
   }
 
-  &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
-    select ~ label,
-    select:focus ~ label {
-      @include asd20-focus;
-    }
-    input {
-      border-color: var(--color__danger);
-      &:focus {
-        @include asd20-focus;
-      }
-    }
+  &--has-errors .asd20-select-input__field-wrapper,
+  &--has-errors.asd20-select-input--bordered
+    .asd20-select-input__field-wrapper {
+    box-shadow: 0 0 0 $input-border-width
+      asd20-swatch('emergency', -1) inset;
   }
 }
 </style>

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

@@ -14,6 +14,7 @@
 
       <input
         v-bind="mergedInputAttrs"
+        @blur="onBlur"
         @input="input"
       />
 
@@ -25,7 +26,7 @@
       v-html="computedHelpText"
     />
     <div
-      v-for="(v, index) in validationErrors"
+      v-for="(v, index) in renderedValidationErrors"
       :key="index"
       class="asd20-file-input__validation-error"
       v-html="v"
@@ -140,20 +141,13 @@ $input-focus-color: var(--color__accent-t50);
   }
 
   &__validation-error {
-    color: var(--color__danger-s20);
     font-size: 0.75rem;
     margin-top: space(0.125);
   }
 
   &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
     input {
-      border-color: var(--color__danger);
-      &:focus {
-        box-shadow: 0 0 0 5px var(--color__danger) inset;
-      }
+      border-color: asd20-swatch('emergency', -1);
     }
   }
 }

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

@@ -18,30 +18,35 @@
 
       <textarea
         v-bind="mergedInputAttrs"
+        @blur="onBlur"
         @input="input"
       />
 
       <slot name="suffix" />
     </div>
     <div
-      v-if="computedHelpText"
-      class="asd20-text-area-input__help-text"
+      v-if="validationErrors.length || maxLength !== null"
+      class="asd20-text-area-input__validation-row"
     >
-      <span
-        v-if="helpText"
-        v-html="helpText"
-      />
+      <div class="asd20-text-area-input__validation-errors">
+        <div
+          v-for="(v, index) in renderedValidationErrors"
+          :key="index"
+          class="asd20-text-area-input__validation-error"
+          v-html="v"
+        />
+      </div>
       <span
         v-if="maxLength !== null"
         class="asd20-text-area-input__character-count"
       >{{ characterCountText }}</span>
     </div>
     <div
-      v-for="(v, index) in validationErrors"
-      :key="index"
-      class="asd20-text-area-input__validation-error"
-      v-html="v"
-    />
+      v-if="helpText"
+      class="asd20-text-area-input__help-text"
+    >
+      <span v-html="helpText" />
+    </div>
   </div>
 </template>
 
@@ -144,6 +149,13 @@ $input-focus-color: var(--color__accent-t50);
   }
 
   &__help-text {
+    width: 100%;
+    color: var(--website-card__reverse-background-color);
+    font-size: 0.75rem;
+    margin-top: space(0.125);
+  }
+
+  &__validation-row {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -154,27 +166,25 @@ $input-focus-color: var(--color__accent-t50);
     margin-top: space(0.125);
   }
 
+  &__validation-errors {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   &__character-count {
+    flex: 0 0 auto;
     margin-left: auto;
     text-align: right;
     white-space: nowrap;
   }
 
   &__validation-error {
-    color: var(--color__danger-s20);
     font-size: 0.75rem;
-    margin-top: space(0.125);
   }
 
   &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
     textarea {
-      border-color: var(--color__danger);
-      &:focus {
-        box-shadow: 0 0 0 5px var(--color__danger) inset;
-      }
+      border-color: asd20-swatch('emergency', -1);
     }
   }
 }

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

@@ -14,30 +14,35 @@
 
       <input
         v-bind="mergedInputAttrs"
+        @blur="onBlur"
         @input="input"
       />
 
       <slot name="suffix" />
     </div>
     <div
-      v-if="computedHelpText"
-      class="asd20-text-input__help-text"
+      v-if="validationErrors.length || maxLength !== null"
+      class="asd20-text-input__validation-row"
     >
-      <span
-        v-if="helpText"
-        v-html="helpText"
-      />
+      <div class="asd20-text-input__validation-errors">
+        <div
+          v-for="(v, index) in renderedValidationErrors"
+          :key="index"
+          class="asd20-text-input__validation-error"
+          v-html="v"
+        />
+      </div>
       <span
         v-if="maxLength !== null"
         class="asd20-text-input__character-count"
       >{{ characterCountText }}</span>
     </div>
     <div
-      v-for="(v, index) in validationErrors"
-      :key="index"
-      class="asd20-text-input__validation-error"
-      v-html="v"
-    />
+      v-if="helpText"
+      class="asd20-text-input__help-text"
+    >
+      <span v-html="helpText" />
+    </div>
   </div>
 </template>
 
@@ -137,6 +142,13 @@ $input-focus-color: var(--color__accent-t50);
   }
 
   &__help-text {
+    width: 100%;
+    color: var(--website-card__reverse-background-color);
+    font-size: 0.75rem;
+    margin-top: space(0.125);
+  }
+
+  &__validation-row {
     display: flex;
     align-items: baseline;
     justify-content: space-between;
@@ -147,27 +159,25 @@ $input-focus-color: var(--color__accent-t50);
     margin-top: space(0.125);
   }
 
+  &__validation-errors {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   &__character-count {
+    flex: 0 0 auto;
     margin-left: auto;
     text-align: right;
     white-space: nowrap;
   }
 
   &__validation-error {
-    color: var(--color__danger-s20);
     font-size: 0.75rem;
-    margin-top: space(0.125);
   }
 
   &--has-errors {
-    label {
-      color: var(--color__danger-s20);
-    }
     input {
-      border-color: var(--color__danger);
-      &:focus {
-        box-shadow: 0 0 0 5px var(--color__danger) inset;
-      }
+      border-color: asd20-swatch('emergency', -1);
     }
   }
 }

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

@@ -189,7 +189,7 @@ export default {
   & :deep(.asd20-modal__content .asd20-viewport) {
     padding: space(1);
   }
-  :deep(.asd20-text-area-input textarea) {
+  & :deep(.asd20-text-area-input textarea) {
     font-family: Arial, sans-serif;
     font-size: 1rem;
   }

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

@@ -13,7 +13,7 @@
         id="senderName"
         v-model="emailMessage.senderName"
         label="Your Full Name"
-        aria-required="true"
+        required
         @validated="validationErrors.senderName = $event"
       />
       <asd20-text-input
@@ -22,7 +22,7 @@
         type="email"
         :validator="validateEmailAddress"
         label="Your Email Address"
-        aria-required="true"
+        required
         @validated="validationErrors.senderEmail = $event"
       />
       <asd20-text-input
@@ -30,16 +30,15 @@
         v-model="emailMessage.subject"
         label="Subject"
         maxlength="200"
-        aria-required="true"
+        required
         @validated="validationErrors.subject = $event"
       />
       <asd20-text-area-input
         id="messageBody"
         v-model="emailMessage.messageBody"
         label="Message"
-        help-text="All fields are required."
         maxlength="8000"
-        aria-required="true"
+        required
         @validated="validationErrors.messageBody = $event"
       />
       <div

package/src/mixins/inputComponentMixin.js

@@ -3,6 +3,7 @@ import createComponentInstanceId from '../utils/createComponentInstanceId'
 
 const INPUT_MODEL_LISTENER_KEYS = ['onInput', 'onUpdate:modelValue']
 const DEFAULT_INPUT_COMPONENT_NAME = 'asd20-input'
+const REQUIRED_VALIDATION_ERROR = 'This field is required.'
 
 function resolveKebabComponentName(componentName = DEFAULT_INPUT_COMPONENT_NAME) {
   return kebabCase(componentName).replace(/-([0-9])/g, '$1')
@@ -75,7 +76,8 @@ export default {
       classes[`${this.kebabComponentName}`] = true
       classes[`${this.kebabComponentName}--hide-label`] = this.hideLabel
       classes[`${this.kebabComponentName}--is-valid`] = this.isValid
-      classes[`${this.kebabComponentName}--has-errors`] = !this.isValid
+      classes[`${this.kebabComponentName}--has-errors`] =
+        this.isDirty && !this.isValid
       classes[`${this.kebabComponentName}--horizontal`] = this.horizontal
       classes[`${this.kebabComponentName}--transparent`] = this.transparent
       classes[`${this.kebabComponentName}--expanded`] = this.expanded
@@ -98,6 +100,13 @@ export default {
     isValid() {
       return this.validationErrors.length === 0
     },
+    renderedValidationErrors() {
+      return this.validationErrors.map(error =>
+        !this.isDirty && error === REQUIRED_VALIDATION_ERROR
+          ? 'Required'
+          : error
+      )
+    },
     resolvedValue() {
       return this.modelValue
     },
@@ -163,7 +172,7 @@ export default {
         this.$attrs.required.toString().toLowerCase() !== 'false'
       ) {
         if (!value) {
-          this.validationErrors.push(`This field is required.`)
+          this.validationErrors.push(REQUIRED_VALIDATION_ERROR)
         }
       }