@asd20/ui-next 2.0.2 → 2.0.4

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.0.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.3...ui-next-v2.0.4) (2026-03-27)
+
+## [2.0.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.2...ui-next-v2.0.3) (2026-03-27)
+
 ## [2.0.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.1...ui-next-v2.0.2) (2026-03-27)
 
 

package/package.json

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

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

@@ -104,6 +104,7 @@ export default {
   transition: all asd20-speed(1) ease-out;
 }
 .asd20-badge-enter,
+.asd20-badge-enter-from,
 .asd20-badge-leave-to {
   transform: scale3d(0, 0, 0);
   opacity: 0;

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

@@ -360,6 +360,7 @@ export default {
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
 .share-toast-fade-enter,
+.share-toast-fade-enter-from,
 .share-toast-fade-leave-to {
   opacity: 0;
   transform: translateY(-4px);

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

@@ -634,6 +634,7 @@ export default {
 }
 
 .ai-search-panel-enter,
+.ai-search-panel-enter-from,
 .ai-search-panel-leave-to {
   opacity: 0;
 }
@@ -659,8 +660,10 @@ export default {
 }
 
 .ai-search-panel-enter .asd20-ai-search__site-search,
+.ai-search-panel-enter-from .asd20-ai-search__site-search,
 .ai-search-panel-leave-to .asd20-ai-search__site-search,
 .ai-search-panel-enter .asd20-ai-search__close,
+.ai-search-panel-enter-from .asd20-ai-search__close,
 .ai-search-panel-leave-to .asd20-ai-search__close {
   transform: scale3d(0.16, 0.1, 1);
   opacity: 0;
@@ -672,6 +675,7 @@ export default {
 }
 
 .ai-search-panel-enter .asd20-ai-search__backdrop,
+.ai-search-panel-enter-from .asd20-ai-search__backdrop,
 .ai-search-panel-leave-to .asd20-ai-search__backdrop {
   opacity: 0;
 }

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

@@ -14,13 +14,11 @@
             mq !== 'md'
         "
       ></asd20-district-logo>
-      <client-only>
-        <asd20-organization-picker
-          v-show="organization.title !== 'Academy District 20'"
-          :organization-options="organizationOptions"
-          :organization="organization"
-        ></asd20-organization-picker>
-      </client-only>
+      <asd20-organization-picker
+        v-show="organization.title !== 'Academy District 20'"
+        :organization-options="organizationOptions"
+        :organization="organization"
+      ></asd20-organization-picker>
       <slot name="top" />
     </div>
 

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

@@ -211,6 +211,7 @@ export default {
   transition: opacity 0.2s ease-in-out, transform 0.2s ease-in;
 }
 .zoom-enter,
+.zoom-enter-from,
 .zoom-leave-to {
   opacity: 0;
   transform: scale(0);

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

@@ -9,12 +9,10 @@
       v-if="organizationOptions.length > 0"
       class="asd20-page-header__top"
     >
-      <client-only>
-        <asd20-organization-picker
-          :organization-options="organizationOptions"
-          :organization="organization"
-        ></asd20-organization-picker>
-      </client-only>
+      <asd20-organization-picker
+        :organization-options="organizationOptions"
+        :organization="organization"
+      ></asd20-organization-picker>
       <slot name="top" />
     </div>
     <div class="asd20-page-header__main">

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

@@ -9,12 +9,10 @@
       v-if="organizationOptions.length > 0"
       class="asd20-page-header__top"
     >
-      <client-only>
-        <asd20-organization-picker
-          :organization-options="organizationOptions"
-          :organization="organization"
-        ></asd20-organization-picker>
-      </client-only>
+      <asd20-organization-picker
+        :organization-options="organizationOptions"
+        :organization="organization"
+      ></asd20-organization-picker>
       <slot name="top" />
     </div>
     <div class="asd20-page-header__main">

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

@@ -340,6 +340,7 @@ export default {
   transition: all asd20-speed(1) $anim-easing;
 }
 .slide-right-enter,
+.slide-right-enter-from,
 .slide-right-leave-to {
   transform: translate3d(-100%, 0, 0);
 }
@@ -348,6 +349,7 @@ export default {
   transition: all asd20-speed(1) $anim-easing;
 }
 .slide-left-enter,
+.slide-left-enter-from,
 .slide-left-leave-to {
   transform: translate3d(100%, 0, 0);
 }

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

@@ -15,14 +15,12 @@
       @update:searchActive="$emit('update:searchOpen', $event)"
       @keyboardTriggeredLastAction="keyboardTriggeredLastAction = $event"
     >
-      <client-only>
-        <asd20-organization-picker
-          :organization-options="organizationOptions"
-          :organization="organization"
-          logo-size="xs"
-          abbreviated
-        ></asd20-organization-picker>
-      </client-only>
+      <asd20-organization-picker
+        :organization-options="organizationOptions"
+        :organization="organization"
+        logo-size="xs"
+        abbreviated
+      ></asd20-organization-picker>
       <slot name="nav" />
     </asd20-navbar>
 
@@ -177,6 +175,7 @@ export default {
   transition: all asd20-speed(1) $anim-easing;
 }
 .asd20-site-menu.slide-enter,
+.asd20-site-menu.slide-enter-from,
 .asd20-site-menu.slide-leave-to {
   :deep(.asd20-site-menu__viewport) {
     transform: translate3d(-100%, 0, 0);
@@ -184,12 +183,14 @@ export default {
   }
 }
 .asd20-action-menu.slide-enter,
+.asd20-action-menu.slide-enter-from,
 .asd20-action-menu.slide-leave-to {
   transform: translate3d(-100%, 0, 0);
   opacity: 0;
 }
 
 .asd20-site-search.slide-enter,
+.asd20-site-search.slide-enter-from,
 .asd20-site-search.slide-leave-to {
   transform: translate3d(100%, 0, 0);
   opacity: 0;
@@ -255,6 +256,7 @@ export default {
       left: space(3);
     }
     .asd20-site-search.slide-enter,
+    .asd20-site-search.slide-enter-from,
     .asd20-site-search.slide-leave-to {
       transform: translate3d(-100%, 0, 0);
       opacity: 0;

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

@@ -3821,6 +3821,7 @@ export default {
 }
 
 .search-tabs-slide-enter,
+.search-tabs-slide-enter-from,
 .search-tabs-slide-leave-to {
   opacity: 0;
   transform: translate3d(0, -0.75rem, 0);

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

@@ -1,13 +1,11 @@
 <template>
   <div class="asd20-app-template">
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
     <asd20-app-header
       v-if="title || $slots.header"
       :title="title"
@@ -107,14 +105,12 @@
       </div>
 
       <div class="asd20-app-template__main">
-        <client-only>
-          <asd20-notification-group
-            :notifications="activeNotificationsByType.inline"
-            group-type="inline"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          />
-        </client-only>
+        <asd20-notification-group
+          :notifications="activeNotificationsByType.inline"
+          group-type="inline"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        />
         <slot />
       </div>
     </div>
@@ -147,14 +143,12 @@
         <slot />
       </div>
     </div>
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.floating"
-        group-type="floating"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.floating"
+      group-type="floating"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
   </div>
 </template>
 

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

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
 
     <!-- Page Header -->
     <asd20-page-header
@@ -39,29 +37,25 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
       <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-page-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Content -->
     <asd20-page-content

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

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
 
     <!-- Page Header -->
     <asd20-page-header
@@ -39,29 +37,25 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
       <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-page-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Content -->
     <asd20-page-content

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

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
     <!-- Page Header -->
     <asd20-page-header
       v-if="pageHeaderContent"
@@ -38,29 +36,25 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
       <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-page-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Feeds -->
     <asd20-feeds-section

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

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      />
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
 
     <!-- Page Header -->
     <asd20-page-header
@@ -42,16 +40,14 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
     </asd20-page-header>
 

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

@@ -4,14 +4,12 @@
     <asd20-skip-to />
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Site Navigation -->
     <asd20-site-navigation
@@ -41,28 +39,24 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
     </asd20-page-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Content -->
     <asd20-page-content
@@ -111,14 +105,12 @@
 
     <!-- Inline-Notifications -->
     <template>
-      <client-only>
-        <asd20-notification-group
-          :notifications="activeNotificationsByType.inline"
-          group-type="inline"
-          @dismiss="$emit('dismiss-notification', $event)"
-          @toggle-all="$emit('toggle-all')"
-        ></asd20-notification-group>
-      </client-only>
+      <asd20-notification-group
+        :notifications="activeNotificationsByType.inline"
+        group-type="inline"
+        @dismiss="$emit('dismiss-notification', $event)"
+        @toggle-all="$emit('toggle-all')"
+      ></asd20-notification-group>
     </template>
 
     <slot name="before-footer" />