@asd20/ui-next 2.24.2 → 2.24.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.24.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.2...ui-next-v2.24.3) (2026-09-17)
+
+
+### Bug Fixes
+
+* fix accessibility form verbiage; add native trigger support for public forms ([54f5b47](https://github.com/academydistrict20/asd20-ui-next/commit/54f5b47b2bb80fbf807439fcfd376e911806e053))
+* fix release verifier from last commit ([b7b8d8f](https://github.com/academydistrict20/asd20-ui-next/commit/b7b8d8f996c757ddd727ab2272f38ea11737ddb7))
+
 ## [2.24.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.24.1...ui-next-v2.24.2) (2026-09-17)
 
 

package/package.json

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

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

@@ -39,6 +39,7 @@ export default {
     hideLabel: { type: Boolean, default: false },
     link: { type: String, default: '' },
     trackingCode: { type: String, default: '' }, // e.g., 'data-analytics-id'
+    publicFormId: { type: String, default: '' },
     icon: { type: String, default: '' },
     badge: { type: Number, default: 0 },
     size: {
@@ -73,7 +74,13 @@ export default {
       }
     },
     tag() {
-      return !this.link || this.link === ' ' ? 'button' : 'a'
+      return this.normalizedPublicFormId || !this.link || this.link === ' '
+        ? 'button'
+        : 'a'
+    },
+    normalizedPublicFormId() {
+      const formId = String(this.publicFormId || '').trim()
+      return /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(formId) ? formId : ''
     },
     isExternal() {
       return shouldOpenInNewWindow(this.link)
@@ -109,16 +116,21 @@ export default {
 
       // Optional tracking code (dynamic attribute key)
       if (this.trackingCode) a[this.trackingCode] = ''
+      if (this.normalizedPublicFormId) {
+        a['data-public-form'] = this.normalizedPublicFormId
+      }
 
       return a
     },
   },
   methods: {
     handleClick(event) {
-      navigateInternalHref(this, event, this.link, {
-        target: event.currentTarget?.getAttribute?.('target'),
-        download: event.currentTarget?.hasAttribute?.('download'),
-      })
+      if (!this.normalizedPublicFormId) {
+        navigateInternalHref(this, event, this.link, {
+          target: event.currentTarget?.getAttribute?.('target'),
+          download: event.currentTarget?.hasAttribute?.('download'),
+        })
+      }
       this.forwardEvent('click', event)
     },
     forwardEvent(name, event) {

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

@@ -8,6 +8,8 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :show-character-count="showCharacterCount"
+      :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
@@ -23,6 +25,8 @@
       :required="field.required"
       :minlength="field.minLength"
       :maxlength="field.maxLength"
+      :show-character-count="showCharacterCount"
+      :show-pristine-validation-errors="showPristineValidationErrors"
       :autocomplete="field.autocomplete || undefined"
       :aria-describedby="describedBy"
       :aria-invalid="hasErrors ? 'true' : undefined"
@@ -127,6 +131,8 @@ export default {
     modelValue: { type: [String, Boolean], default: '' },
     errors: { type: Array, default: () => [] },
     inputId: { type: String, required: true },
+    showCharacterCount: { type: Boolean, default: true },
+    showPristineValidationErrors: { type: Boolean, default: true },
   },
   emits: ['update:modelValue'],
   data() {

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

@@ -25,7 +25,7 @@
       <slot name="suffix" />
     </div>
     <div
-      v-if="validationErrors.length || maxLength !== null"
+      v-if="renderedValidationErrors.length || hasCharacterCount"
       class="asd20-text-area-input__validation-row"
     >
       <div class="asd20-text-area-input__validation-errors">
@@ -37,7 +37,7 @@
         />
       </div>
       <span
-        v-if="maxLength !== null"
+        v-if="hasCharacterCount"
         class="asd20-text-area-input__character-count"
       >{{ characterCountText }}</span>
     </div>

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

@@ -21,7 +21,7 @@
       <slot name="suffix" />
     </div>
     <div
-      v-if="validationErrors.length || maxLength !== null"
+      v-if="renderedValidationErrors.length || hasCharacterCount"
       class="asd20-text-input__validation-row"
     >
       <div class="asd20-text-input__validation-errors">
@@ -33,7 +33,7 @@
         />
       </div>
       <span
-        v-if="maxLength !== null"
+        v-if="hasCharacterCount"
         class="asd20-text-input__character-count"
       >{{ characterCountText }}</span>
     </div>

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

@@ -67,6 +67,8 @@
           :label="cta.label"
           :icon="cta.icon"
           :link="cta.url"
+          :tracking-code="cta.trackingCode"
+          :public-form-id="cta.publicFormId"
           reversed
           horizontal
           centered

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

@@ -158,6 +158,8 @@
         :label="callsToAction[0].label"
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
+        :tracking-code="callsToAction[0].trackingCode"
+        :public-form-id="callsToAction[0].publicFormId"
         reversed
         horizontal
         centered
@@ -168,6 +170,8 @@
         :label="callsToAction[1].label"
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
+        :tracking-code="callsToAction[1].trackingCode"
+        :public-form-id="callsToAction[1].publicFormId"
         reversed
         horizontal
         centered

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

@@ -150,6 +150,7 @@
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
         :tracking-code="callsToAction[0].trackingCode"
+        :public-form-id="callsToAction[0].publicFormId"
         reversed
         horizontal
         centered
@@ -162,6 +163,7 @@
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
         :tracking-code="callsToAction[1].trackingCode"
+        :public-form-id="callsToAction[1].publicFormId"
         reversed
         horizontal
         centered

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

@@ -2,7 +2,7 @@
   <asd20-modal
     :open="open"
     :title="modalTitle"
-    icon="contact"
+    icon="website"
     dismissable
     class="asd20-public-form-modal"
     @dismiss="dismiss"
@@ -77,6 +77,8 @@
           :input-id="fieldId(field.name)"
           :model-value="values[field.name]"
           :errors="validationErrors[field.name] || []"
+          :show-character-count="shouldShowCharacterCount(field)"
+          :show-pristine-validation-errors="showPristineValidationErrors"
           @update:modelValue="updateValue(field.name, $event)"
         />
 
@@ -230,6 +232,9 @@ export default {
     modalTitle() {
       return this.formDefinition?.title || 'Public Form'
     },
+    showPristineValidationErrors() {
+      return this.formDefinition?.id !== 'accessibility-issue'
+    },
     errorEntries() {
       if (!this.formDefinition) return []
       return this.formDefinition.fields
@@ -321,6 +326,9 @@ export default {
     fieldId(name) {
       return `${this.instanceId}-${name}`
     },
+    shouldShowCharacterCount(field) {
+      return this.formDefinition.id !== 'accessibility-issue' || field.name === 'issue'
+    },
     updateValue(name, value) {
       this.values[name] = value
       if (this.validationAttempted) this.validate(false)
@@ -352,7 +360,7 @@ export default {
     },
     captchaFailed() {
       this.showFeedback(
-        'The verification service could not start. Please try again or use the contact options below.'
+        'The verification service could not start. Please try again or use the contact options listed.'
       )
     },
     captchaExpired() {
@@ -368,15 +376,15 @@ export default {
       if (status === 403)
         return 'The verification was not accepted. Please try again.'
       if (status === 429) {
-        return 'Too many submissions were received recently. Please wait and try again, or use the contact options below.'
+        return 'Too many submissions were received recently. Please wait and try again, or use the contact options listed.'
       }
       if (status === 502) {
-        return 'The form could not be delivered right now. Please try again later or use the contact options below.'
+        return 'The form could not be delivered right now. Please try again later or use the contact options listed.'
       }
       if (status === 503) {
-        return 'This form is temporarily unavailable. Please use the contact options below.'
+        return 'This form is temporarily unavailable. Please use the contact options listed.'
       }
-      return 'Something went wrong while submitting the form. Please try again later or use the contact options below.'
+      return 'Something went wrong while submitting the form. Please try again later or use the contact options listed.'
     },
     showFeedback(message, role = 'alert') {
       this.feedbackMessage = message

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

@@ -62,6 +62,8 @@
         :label="cta.label"
         :icon="cta.icon"
         :link="cta.url"
+        :tracking-code="cta.trackingCode"
+        :public-form-id="cta.publicFormId"
         reversed
         horizontal
         centered

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

@@ -88,6 +88,8 @@
             :label="cta.label"
             :icon="cta.icon"
             :link="cta.url"
+            :tracking-code="cta.trackingCode"
+            :public-form-id="cta.publicFormId"
             reversed
             horizontal
             centered

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

@@ -57,6 +57,8 @@
         :label="cta.label"
         :icon="cta.icon"
         :link="cta.url"
+        :tracking-code="cta.trackingCode"
+        :public-form-id="cta.publicFormId"
         bordered
         reversed
         horizontal

package/src/graphql/pageQueryExample.graphql

@@ -25,6 +25,7 @@ query($pageId: uuid!, $now: String) {
         id
         title
         trackingCode
+        publicFormId
         url
         description
       }
@@ -84,6 +85,7 @@ query($pageId: uuid!, $now: String) {
             id
             title
             trackingCode
+            publicFormId
             url
           }
         }

package/src/mixins/inputComponentMixin.js

@@ -25,6 +25,8 @@ export default {
     modelValue: { default: '' },
     label: { type: String, default: '' },
     hideLabel: { type: Boolean, default: false },
+    showCharacterCount: { type: Boolean, default: true },
+    showPristineValidationErrors: { type: Boolean, default: true },
     helpText: { type: String, default: '' },
     items: { type: Array, default: () => [] },
     itemDefault: { type: Object, default: null },
@@ -101,6 +103,8 @@ export default {
       return this.validationErrors.length === 0
     },
     renderedValidationErrors() {
+      if (!this.isDirty && !this.showPristineValidationErrors) return []
+
       return this.validationErrors.map(error =>
         !this.isDirty && error === REQUIRED_VALIDATION_ERROR
           ? 'Required'
@@ -127,13 +131,16 @@ export default {
     },
 
     computedHelpText() {
-      if (this.maxLength !== null) {
+      if (this.hasCharacterCount) {
         return [this.helpText, this.characterCountText].filter(Boolean).join(' ')
       }
       return this.helpText
     },
+    hasCharacterCount() {
+      return this.showCharacterCount && this.maxLength !== null
+    },
     characterCountText() {
-      if (this.maxLength === null) return ''
+      if (!this.hasCharacterCount) return ''
       return `${(this.resolvedValue || '').length}/${this.maxLength}`
     },
     maxLength() {