@asd20/ui-next 2.3.1 → 2.3.3

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.3.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.2...ui-next-v2.3.3) (2026-04-17)
+
+## [2.3.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.1...ui-next-v2.3.2) (2026-04-14)
+
 ## [2.3.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.3.0...ui-next-v2.3.1) (2026-04-14)
 
 

package/package.json

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

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

@@ -1,7 +1,7 @@
 <template>
   <component
-    :is="tag"
     v-bind="rootAttrs"
+    :is="tag"
     @click="handleClick"
     @mouseup="forwardEvent('mouseup', $event)"
     @keyup="forwardEvent('keyup', $event)"

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

@@ -99,7 +99,7 @@ export default {
     },
     labeledByPropRender() {
       if (this.hidden === true) {
-        return false
+        return null
       }
       return this.uniqueId
     },

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

@@ -294,6 +294,7 @@ export default {
     selected: { type: Boolean, default: false },
     reversed: { type: Boolean, default: false },
     pinned: { type: Boolean, default: false },
+    isFeatured: { type: Boolean, default: false },
     zoom: { type: Boolean, default: false },
     separateImage: { type: Boolean, default: false },
     seperateImage: { type: Boolean, default: false },

package/src/components/molecules/Asd20CardGroup.vue

@@ -2,8 +2,8 @@
   <div class="asd20-card-collection">
     <asd20-card
       v-for="(card, index) in cards"
-      :key="index"
       v-bind="card"
+      :key="index"
       :class="{ 'card--expanded-horizontal': index % 2 == 0 }"
     />
   </div>

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

@@ -19,8 +19,8 @@
     >
       <Asd20ListItem
         v-for="(item, index) in contactListItems"
-        :key="index"
         v-bind="item"
+        :key="index"
         @click="onItemClick(item)"
       />
     </asd20-list>

package/src/components/molecules/Asd20MessagingGroup.vue

@@ -6,8 +6,8 @@
   >
     <asd20-messaging
       v-for="(messaging, index) in messages"
-      :key="index"
       v-bind="messaging"
+      :key="index"
     ></asd20-messaging>
     <slot></slot>
   </component>

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

@@ -2,8 +2,8 @@
   <div :class="emptyNav ? 'asd20-action-menu emptyNav' : 'asd20-action-menu'">
     <asd20-action-menu-item
       v-for="(item, index) in items"
-      :key="index"
       v-bind="item"
+      :key="index"
       :size="zoomed ? 'md' : 'lg'"
     />
     <slot />

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

@@ -21,8 +21,8 @@
       <div class="feed-items">
         <asd20-card
           v-for="(card, index) in cards.slice(0, numberToShow)"
-          :key="index"
           v-bind="card"
+          :key="index"
           zoom
           expanded-description
         ></asd20-card>
@@ -49,8 +49,8 @@
     <!-- <intersect @enter="$emit('stories-in-view')"> -->
     <asd20-card
       v-for="(card, index) in storyCards.slice(0, numberToShow)"
-      :key="index"
       v-bind="card"
+      :key="index"
       zoom
       expanded-description
     ></asd20-card>

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

@@ -74,8 +74,8 @@
       <asd20-list-category :label="category.name" />
       <asd20-list-item
         v-for="item in category.items"
-        :key="item.file.id + category.name"
         v-bind="item"
+        :key="item.file.id + category.name"
       />
     </div>
     <div
@@ -532,20 +532,21 @@ export default {
         },
       ]
     },
+    fileWatchKey() {
+      return JSON.stringify(this.files || [])
+    },
   },
 
   watch: {
-    files: {
+    fileWatchKey: {
       handler() {
         this.currentPage = 1
         this.resetVisibleCount()
         this.$nextTick(() => {
-          // console.log('Change in Files detected:', this.files)
-          this.checkForOverflow() // Ensure overflow check happens after file changes
-          this.handleResize() // Ensure column resize happens after file changes
+          this.checkForOverflow()
+          this.handleResize()
         })
       },
-      deep: true,
       immediate: true,
     },
     searchQuery() {

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

@@ -21,8 +21,8 @@
       <asd20-list-category :label="category.name" />
       <asd20-list-item
         v-for="(item, index) in category.items"
-        :key="`${category.name}-${index}`"
         v-bind="item"
+        :key="`${category.name}-${index}`"
       />
     </div>
   </asd20-list>
@@ -66,17 +66,17 @@ export default {
     hasImages() {
       return !!this.links.find(l => !!l.imageUrl)
     },
+    linkWatchKey() {
+      return JSON.stringify(this.links || [])
+    },
   },
   watch: {
-    // Watch for changes in files
-    links: {
+    linkWatchKey: {
       handler() {
         this.$nextTick(() => {
-          // console.log('Change in Links detected:', this.links)
           this.checkForOverflow()
         })
       },
-      deep: true,
       immediate: true,
     },
   },

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

@@ -17,8 +17,8 @@
       >
         <asd20-notification
           v-for="(notification, notificationIndex) of notificationsFromIndex"
-          :key="notification.key || notification.title"
           v-bind="notificationBindings(notification, notificationIndex)"
+          :key="notification.key || notification.title"
         />
       </transition-group>
     </transition>
@@ -37,6 +37,7 @@
     >
       <span
         v-if="totalDismissedNotifications > 0"
+        class="bell__count"
         aria-hidden="true"
       >{{
         totalDismissedNotifications
@@ -137,11 +138,14 @@ export default {
         this.index - 1 < 0 ? this.notificationsFromIndex.length : this.index
       } of ${this.notificationsFromIndex.length}`
     },
+    notificationWatchKey() {
+      return JSON.stringify(this.notifications || [])
+    },
   },
 
   watch: {
-    notifications: function (value) {
-      this.initNotifications(value)
+    notificationWatchKey() {
+      this.initNotifications(this.notifications)
     },
   },
   created() {
@@ -315,7 +319,7 @@ export default {
       fill: var(--website-menu__icon-fill-color) !important;
     }
 
-    span {
+    .bell__count {
       position: absolute;
       top: -0.25em;
       right: -0.25em;

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

@@ -21,8 +21,8 @@
     >
       <asd20-messaging
         v-for="(messaging, index) in formattedPrimaryMessages"
-        :key="index"
         v-bind="messaging"
+        :key="index"
         :fullscreen="fullscreen"
       ></asd20-messaging>
     </section>
@@ -33,8 +33,8 @@
     >
       <asd20-messaging
         v-for="(messaging, index) in formattedSecondaryMessages"
-        :key="index"
         v-bind="messaging"
+        :key="index"
         :fullscreen="fullscreen"
       ></asd20-messaging>
     </section>

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

@@ -12,8 +12,8 @@
     >
       <asd20-list-item
         v-for="(person, index) in mappedPeople"
-        :key="index"
         v-bind="person"
+        :key="index"
         @click="onPersonClick(person)"
       />
     </asd20-list>

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

@@ -13,8 +13,8 @@
         >Hi, {{ userGivenName }}.</span>
       </client-only>
       <asd20-messaging
-        id="main"
         v-bind="firstMessage"
+        id="main"
         heading-tag-name="h1"
       ></asd20-messaging>
       <div class="image-container">

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

@@ -44,10 +44,9 @@
             ((mq === 'lg' || mq === 'xl') && isLoaded)
         "
         :items="actionItems"
-        :active="menuOpen"
+        :open="menuOpen"
         :zoomed="zoomed"
         :empty-nav="emptyNav"
-        @update:active="$emit('update:menuOpen', $event)"
       />
     </transition>
 

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

@@ -286,8 +286,8 @@
           <asd20-list @click="dismiss">
             <asd20-list-item
               v-for="item in pageListItems"
-              :key="item.page.id"
               v-bind="item"
+              :key="item.page.id"
             />
           </asd20-list>
 

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

@@ -14,8 +14,8 @@
     >
       <asd20-tab
         v-for="(tab, index) in tabs"
-        :key="index"
         v-bind="tab"
+        :key="index"
         @click="$emit('tabClick', tab)"
       />
       <slot />

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

@@ -9,8 +9,8 @@
 
         <section class="header-messaging-section">
           <asd20-messaging
-            id="main"
             v-bind="messages[0]"
+            id="main"
             heading-tag-name="h1"
           ></asd20-messaging>
         </section>

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

@@ -11,29 +11,29 @@
 
       <asd20-link-list
         v-if="relatedPages"
+        v-bind="relatedPagesProps"
         class="relatedPages"
         :links="relatedPages"
         icon="website"
-        v-bind="relatedPagesProps"
         :multi-column="full"
         max-height="400px"
       />
 
       <asd20-link-list
         v-if="relatedLinks"
+        v-bind="relatedLinksProps"
         class="relatedLinks"
         :links="relatedLinks"
         icon="link"
-        v-bind="relatedLinksProps"
         :multi-column="full"
         :max-height="relatedLinks.length > 20 ? '800px' : '400px'"
       />
 
       <asd20-people-list
         v-if="peopleFeedProps && people.length > 0 && !noPeople"
+        v-bind="peopleFeedProps"
         class="relatedPeople"
         :people="people"
-        v-bind="peopleFeedProps"
         :multi-column="full"
         max-height="400px"
       />

package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -150,8 +150,8 @@
           <div class="feed-items">
             <asd20-card
               v-for="(card, index) in cards.slice(counter - 1, counter2)"
-              :key="index"
               v-bind="card"
+              :key="index"
               zoom
             ></asd20-card>
           </div>

package/src/components/templates/Asd20ArticleDigestTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -150,8 +150,8 @@
           <div class="feed-items">
             <asd20-card
               v-for="(card, index) in cards.slice(counter - 1, counter2)"
-              :key="index"
               v-bind="card"
+              :key="index"
               zoom
               separate-image
             ></asd20-card>

package/src/components/templates/Asd20ArticleListTemplate/index.vue

@@ -26,8 +26,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -162,8 +162,8 @@
             <div class="feed-items">
               <asd20-card
                 v-for="(card, index) in cards.slice(counter - 1, counter2 - 1)"
-                :key="index"
                 v-bind="card"
+                :key="index"
                 expanded-description
               ></asd20-card>
             </div>

package/src/components/templates/Asd20ArticleTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20BasePageTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
@@ -104,14 +104,12 @@
     </asd20-widgets-section>
 
     <!-- Inline-Notifications -->
-    <template>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </template>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <slot name="before-footer" />
 

package/src/components/templates/Asd20CampusDetailTemplate/index.vue

@@ -13,8 +13,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20CampusTemplate/index.vue

@@ -14,8 +14,8 @@
     <!-- Page Header -->
     <asd20-campus-header
       v-show="pageHeaderContent"
-      id="campus-header"
       v-bind="pageHeaderContent"
+      id="campus-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -93,14 +93,12 @@
       grid
     >
       <!-- Inline-Notifications -->
-      <template>
-        <asd20-notification-group
-          :notifications="activeNotificationsByType.inline"
-          group-type="inline"
-          @dismiss="$emit('dismiss-notification', $event)"
-          @toggle-all="$emit('toggle-all')"
-        ></asd20-notification-group>
-      </template>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
 
       <slot></slot>
     </asd20-page-content>

package/src/components/templates/Asd20ClubsTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -164,8 +164,8 @@
           <div class="feed-items">
             <asd20-card
               v-for="(card, index) in cards.slice(counter - 1, counter2)"
-              :key="index"
               v-bind="card"
+              :key="index"
               zoom
             ></asd20-card>
           </div>

package/src/components/templates/Asd20DetailAlternateTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20DetailImageFullTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-image-header
       v-if="pageHeaderContent"
-      id="image-header"
       v-bind="pageHeaderContent"
+      id="image-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20DetailImageTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-image-header
       v-if="pageHeaderContent"
-      id="image-header"
       v-bind="pageHeaderContent"
+      id="image-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20DetailTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20DistrictVideoTemplate/index.vue

@@ -28,8 +28,8 @@
 
     <asd20-video-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
     >
       <template #top>
         <asd20-organization-picker

package/src/components/templates/Asd20FileListPageTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       omit-detail-link
@@ -75,9 +75,9 @@
 
     <!-- File List -->
     <asd20-file-list
+      v-bind="filesFeedProps"
       class="fileList"
       :files="files"
-      v-bind="filesFeedProps"
       :multi-column="true"
       searchable
       paginate

package/src/components/templates/Asd20GroupFeatureTemplate/index.vue

@@ -26,8 +26,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContentWithGroup"
-      id="page-header"
       v-bind="pageHeaderContentWithGroup"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20LoginsTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"

package/src/components/templates/Asd20PeopleFeatureTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-show="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"
@@ -76,9 +76,9 @@
 
     <!-- People List -->
     <asd20-people-list
+      v-bind="peopleFeedProps"
       :people="people"
       icon="group"
-      v-bind="peopleFeedProps"
       @people-in-view="$emit('people-in-view')"
     />
 

package/src/components/templates/Asd20ProfileTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="profile-header"
       v-bind="pageHeaderContent"
+      id="profile-header"
       :heading="
         pageHeaderContent.heading
           ? pageHeaderContent.heading

package/src/components/templates/Asd20SalaryCalculatorTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20SchoolHomeTemplate/index.vue

@@ -26,8 +26,8 @@
     <!-- Page Header -->
     <asd20-school-homepage-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       fullscreen
     >
       <template #top>

package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue

@@ -26,8 +26,8 @@
     <!-- Page Header -->
     <asd20-school-homepage-video-header
       v-if="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       fullscreen
     >
       <template #top>

package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-show="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-show="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-image-header
       v-show="pageHeaderContent"
-      id="image-header"
       v-bind="pageHeaderContent"
+      id="image-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/templates/Asd20WayfindingTemplate/index.vue

@@ -27,8 +27,8 @@
     <!-- Page Header -->
     <asd20-page-header
       v-show="pageHeaderContent"
-      id="page-header"
       v-bind="pageHeaderContent"
+      id="page-header"
       :organization="organization"
       :organization-options="organizationOptions"
       :language-code="languageCode"

package/src/components/utils/Multiselect.vue

@@ -34,13 +34,13 @@
 
       <input
         v-show="showSearchInput"
+        v-bind="mergedInputAttrs"
         :id="id"
         ref="searchInput"
         :value="search"
         :disabled="disabled"
         :placeholder="inputPlaceholder"
         class="multiselect__input"
-        v-bind="mergedInputAttrs"
         @click="open"
         @focus="open"
         @input="handleInput"

package/src/mixins/pageTemplateMixin.js

@@ -49,6 +49,7 @@ export default {
 
     // Authentication
     isAuthenticated: { type: Boolean, default: true },
+    isInLeadershipGroup: { type: Boolean, default: false },
 
     // Lanugage
     languageCode: { type: String, default: '' },