@asd20/ui-next 1.0.8 → 1.0.9

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [1.0.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.8...ui-next-v1.0.9) (2026-03-23)
+
 ## [1.0.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.7...ui-next-v1.0.8) (2026-03-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": false,
   "description": "ASD20 UI component library migration workspace.",
   "license": "MIT",

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

@@ -8,13 +8,8 @@
     ]"
   >
     <input
-      :id="id"
+      v-bind="checkboxAttrs"
       ref="checkbox"
-      :checked="resolvedValue"
-      :role="!checkbox ? 'switch' : null"
-      :aria-checked="resolvedValue.toString()"
-      v-bind="$attrs"
-      type="checkbox"
       @change="toggle"
     />
     <label
@@ -64,6 +59,16 @@ export default {
     resolvedValue() {
       return typeof this.modelValue === 'boolean' ? this.modelValue : this.value
     },
+    checkboxAttrs() {
+      return {
+        ...this.$attrs,
+        id: this.id,
+        checked: this.resolvedValue,
+        role: !this.checkbox ? 'switch' : null,
+        'aria-checked': this.resolvedValue.toString(),
+        type: 'checkbox',
+      }
+    },
     id() {
       if (this.$attrs.id) return this.$attrs.id
 

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

@@ -13,10 +13,7 @@
       />
       <div class="asd20-select-input__select-wrapper">
         <select
-          v-bind="inputAttrs"
-          :id="computedId"
-          :value="resolvedValue"
-          :aria-label="hideLabel ? label : ''"
+          v-bind="mergedInputAttrs"
           v-on="legacyListeners"
           @input="input"
         >
@@ -62,6 +59,15 @@ export default {
   name: 'Asd20SelectInput',
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -13,10 +13,7 @@
       />
 
       <input
-        :id="computedId"
-        type="file"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -46,6 +43,15 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        type: 'file',
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
   methods: {
     input(event) {
       this.isDirty = true

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

@@ -17,12 +17,7 @@
       />
 
       <textarea
-        :id="computedId"
-        rows="10"
-        cols="100"
-        :value="resolvedValue"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -56,6 +51,17 @@ export default {
     value: { type: String, default: '' },
     label: { type: String, default: '' },
   },
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        rows: '10',
+        cols: '100',
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -13,10 +13,7 @@
       />
 
       <input
-        :id="computedId"
-        :value="resolvedValue"
-        v-bind="inputAttrs"
-        :aria-label="hideLabel ? label : ''"
+        v-bind="mergedInputAttrs"
         v-on="legacyListeners"
         @input="input"
       />
@@ -46,6 +43,15 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  computed: {
+    mergedInputAttrs() {
+      return this.mergeInputAttrs({
+        id: this.computedId,
+        value: this.resolvedValue,
+        'aria-label': this.hideLabel ? this.label : '',
+      })
+    },
+  },
 }
 </script>
 

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

@@ -18,14 +18,8 @@
         <asd20-notification
           v-for="(notification, notificationIndex) of notificationsFromIndex"
           :key="notification.key || notification.title"
-          class="notification"
-          v-bind="notification"
-          :notification-style="groupType"
-          :aria-hidden="notificationIndex ? true : undefined"
-          :focus-disabled="notificationIndex ? true : false"
-          @dismiss="$emit('dismiss', notification)"
-        >
-        </asd20-notification>
+          v-bind="notificationBindings(notification, notificationIndex)"
+        />
       </transition-group>
     </transition>
 
@@ -154,6 +148,16 @@ export default {
     this.initNotifications(this.notifications)
   },
   methods: {
+    notificationBindings(notification, notificationIndex) {
+      return {
+        ...notification,
+        class: ['notification', notification.class].filter(Boolean),
+        notificationStyle: this.groupType,
+        ariaHidden: notificationIndex ? true : undefined,
+        focusDisabled: notificationIndex ? true : false,
+        onDismiss: () => this.$emit('dismiss', notification),
+      }
+    },
     initNotifications(incomingNotifications) {
       // filter out old notifications that are no longer present in incoming notifications
       this.notificationsFromIndex = this.notificationsFromIndex.filter(n =>

package/src/mixins/inputComponentMixin.js

@@ -143,6 +143,12 @@ export default {
     },
   },
   methods: {
+    mergeInputAttrs(overrides = {}) {
+      return {
+        ...this.inputAttrs,
+        ...overrides,
+      }
+    },
     validate(value) {
       // Clear validation errors
       this.validationErrors = []