@asd20/ui-next 2.12.8 → 2.13.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.13.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.0...ui-next-v2.13.1) (2026-07-27)
+
+
+### Bug Fixes
+
+* correct formatting on logins template ([8a351ea](https://github.com/academydistrict20/asd20-ui-next/commit/8a351ea3c4113b7101c15abb5000937f8299074c))
+
+# [2.13.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.12.8...ui-next-v2.13.0) (2026-07-22)
+
+
+### Features
+
+* migrate shared carousel to Swiper 12 ([9ba6f7b](https://github.com/academydistrict20/asd20-ui-next/commit/9ba6f7b2a6ec7f1ad72944a7279fefafcf273995))
+
 ## [2.12.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.12.7...ui-next-v2.12.8) (2026-06-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.12.8",
+  "version": "2.13.1",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",
@@ -39,10 +39,9 @@
     "date-fns": "^2.30.0",
     "date-fns-tz": "^1.1.7",
     "focus-trap": "^6.9.4",
-    "js-cookie": "^2.2.1",
+    "js-cookie": "3.0.8",
     "lodash": "^4.17.23",
-    "swiper": "^5.4.5",
-    "uuid": "^3.3.2"
+    "swiper": "12.2.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

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

@@ -5,6 +5,7 @@
   >
     <button
       ref="prev"
+      type="button"
       tabindex="-1"
       title="Previous"
       class="asd20-swiper__arrows__button-prev"
@@ -13,7 +14,7 @@
     </button>
     <div
       ref="swiper"
-      class="swiper-container"
+      class="swiper swiper-container"
     >
       <div class="swiper-wrapper">
         <slot name="before-wrapper" />
@@ -28,6 +29,7 @@
     </div>
     <button
       ref="next"
+      type="button"
       tabindex="-1"
       title="Next"
       class="asd20-swiper__arrows__button-next"
@@ -38,19 +40,27 @@
 </template>
 
 <script>
+import Swiper from 'swiper'
 import {
-  Swiper,
   A11y,
+  Controller,
   Keyboard,
   Pagination,
   Navigation,
   Mousewheel,
-} from 'swiper/js/swiper.esm'
+} from 'swiper/modules'
 import merge from 'lodash/merge'
-import 'swiper/css/swiper.css'
+import 'swiper/css'
+import 'swiper/css/pagination'
 
-// see http://idangero.us/swiper/api/#custom-build
-Swiper.use([A11y, Keyboard, Pagination, Navigation, Mousewheel])
+const swiperModules = [
+  A11y,
+  Controller,
+  Keyboard,
+  Pagination,
+  Navigation,
+  Mousewheel,
+]
 
 export default {
   name: 'Asd20Swiper',
@@ -109,41 +119,40 @@ export default {
     recreateSwiper() {
       this.destroySwiper()
 
-      this.swiper = new Swiper(
-        this.$refs.swiper,
-        merge(
-          {
-            preloadImages: false,
-            keyboard: {
-              enabled: false,
-              onlyInViewport: true,
-            },
-            a11y: true,
+      const swiperOptions = merge(
+        {
+          modules: swiperModules,
+          preloadImages: false,
+          keyboard: {
+            enabled: false,
+            onlyInViewport: true,
           },
-          this.options,
-          {
-            mousewheel: {
-              releaseOnEdges: true,
-              sensitivity: 0.5,
-              forceToAxis: true,
-            },
-            controller: {
-              control: this.controlled,
-            },
-            pagination: {
-              el: this.$refs.pagination,
-              clickable: false,
-            },
-            navigation: {
-              prevEl: this.$refs.prev,
-              nextEl: this.$refs.next,
-            },
-          }
-        )
+          a11y: true,
+        },
+        this.options,
+        {
+          mousewheel: {
+            releaseOnEdges: true,
+            sensitivity: 0.5,
+            forceToAxis: true,
+          },
+          controller: {},
+          pagination: {
+            el: this.$refs.pagination,
+            clickable: false,
+          },
+          navigation: {
+            prevEl: this.$refs.prev,
+            nextEl: this.$refs.next,
+          },
+        }
       )
+      swiperOptions.controller.control = this.controlled
+
+      this.swiper = new Swiper(this.$refs.swiper, swiperOptions)
 
       // Delay horizontal scrolling and prioritize vertical scrolling
-      this.swiper.on('touchMove', event => {
+      this.swiper.on('touchMove', (swiper, event) => {
         const { deltaX, deltaY } = event // Track horizontal and vertical scroll movements
         if (Math.abs(deltaY) > Math.abs(deltaX)) {
           // If the vertical scroll is stronger, prevent horizontal scrolling
@@ -331,7 +340,7 @@ export default {
     }
   }
 
-  .swiper-container {
+  .swiper {
     overflow: visible;
     --swiper-theme-color: var(--color__accent);
   }

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

@@ -60,6 +60,12 @@
               onclick="window.print()"
             ></asd20-button>
           </div>
+          <div
+            v-if="$slots['notification-tools']"
+            class="asd20-page-header__notification-tools"
+          >
+            <slot name="notification-tools" />
+          </div>
         </div>
         <div
           id="main"
@@ -389,6 +395,13 @@ export default {
         }
       }
     }
+    .asd20-page-header__notification-tools {
+      display: flex;
+      justify-content: flex-end;
+      order: 1;
+      width: 100%;
+      margin-top: space(0.5);
+    }
 
     .asd20-language-loader {
       order: 1;
@@ -639,6 +652,9 @@ export default {
       .language-and-tools {
         order: 2;
       }
+      .asd20-page-header__notification-tools {
+        order: 3;
+      }
       .asd20-language-loader {
         order: 2;
       }
@@ -779,6 +795,14 @@ export default {
       .language-and-tools {
         order: 2;
       }
+      .asd20-page-header__notification-tools {
+        position: absolute;
+        top: space(1);
+        right: space(0.5);
+        order: 3;
+        width: auto;
+        margin-top: 0;
+      }
       .asd20-language-loader {
         order: 2;
       }

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

@@ -190,13 +190,13 @@ export default {
     & :deep(.notification-group--floating) {
       width: max-content;
       float: right;
-      .bell {
-        z-index: 1000;
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-        svg {
-          fill: var(--color__accent) !important;
-        }
-      }
+      // .bell {
+      //   z-index: 1000;
+      //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
+      //   svg {
+      //     fill: var(--color__accent) !important;
+      //   }
+      // }
     }
   }
 

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="video-header-wrapper">
+  <header
+    v-scroll-track.window
+    class="asd20-video-header"
+    :class="classes"
+    role="banner"
+  >
     <!-- SVG Mask Definitions -->
     <svg
       width="0"
@@ -91,65 +96,63 @@
       </defs>
     </svg>
 
-    <div class="white-accent-band">
-      <header
-        v-scroll-track.window
-        class="asd20-video-header"
-        :class="classes"
-        role="banner"
-      >
-        <div
-          v-if="$slots.top"
-          class="asd20-video-header__top"
-        >
-          <slot name="top" />
-        </div>
+    <div
+      v-if="$slots.top"
+      class="asd20-video-header__top"
+    >
+      <slot name="top" />
+    </div>
 
-        <video
-          v-if="loadVideo"
-          ref="backgroundVideo"
-          class="background-video"
-          role="presentation"
-          aria-hidden="true"
-          autoplay
-          loop
-          muted
-          playsinline
-          preload="none"
-          :poster="imageUrl"
-        >
-          <source
+    <div class="video-header-wrapper">
+      <div class="white-accent-band">
+        <div class="asd20-video-header__masked-content">
+          <video
+            v-if="loadVideo"
+            ref="backgroundVideo"
+            class="background-video"
+            role="presentation"
             aria-hidden="true"
-            :src="loadVideo"
-            type="video/mp4"
+            autoplay
+            loop
+            muted
+            playsinline
+            preload="none"
+            :poster="imageUrl"
+          >
+            <source
+              aria-hidden="true"
+              :src="loadVideo"
+              type="video/mp4"
+            />
+          </video>
+          <img
+            v-else
+            class="background-image"
+            :src="imageUrl"
+            :alt="imageCaption"
+            decoding="async"
+            fetchpriority="high"
           />
-        </video>
-        <img
-          v-else
-          class="background-image"
-          :src="imageUrl"
-          :alt="imageCaption"
-          decoding="async"
-          fetchpriority="high"
-        />
-        <button
-          v-if="videoUrl && !isMobile"
-          class="video-toggle-btn"
-          :aria-label="
-            isPaused ? 'Play background video' : 'Pause background video'
-          "
-          @click="toggleVideo"
-        >
-          <!-- Play icon (▶) -->
-          <span v-if="isPaused">&#9658;</span>
-          <!-- Pause icon (⏸) -->
-          <span v-else>&#10073;&#10073;</span>
-        </button>
-        <!-- <div class="scroll-down-indicator"></div> -->
-        <slot />
-      </header>
+          <!-- <div class="scroll-down-indicator"></div> -->
+          <slot />
+        </div>
+      </div>
     </div>
-  </div>
+
+    <button
+      v-if="videoUrl && !isMobile"
+      class="video-toggle-btn"
+      :aria-label="
+        isPaused ? 'Play background video' : 'Pause background video'
+      "
+      @click="toggleVideo"
+    >
+      <!-- Play icon (▶) -->
+      <span v-if="isPaused">&#9658;</span>
+      <!-- Pause icon (⏸) -->
+      <span v-else>&#10073;&#10073;</span>
+    </button>
+  </header>
 </template>
 
 <script>
@@ -237,6 +240,7 @@ export default {
 
 .video-header-wrapper {
   position: relative;
+  width: 100%;
   padding-bottom: 20px;
   background: var(--website-homepage-header__accent);
   mask: url(#video-wrapper-mask-mobile);
@@ -261,10 +265,19 @@ export default {
   flex-direction: column;
   color: asd20-swatch('primary');
   box-sizing: border-box;
-  mask: url(#video-header-mask-mobile);
-  -webkit-mask: url(#video-header-mask-mobile);
-  mask-size: 100% 100%;
-  -webkit-mask-size: 100% 100%;
+
+  &__masked-content {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: column;
+    box-sizing: border-box;
+    mask: url(#video-header-mask-mobile);
+    -webkit-mask: url(#video-header-mask-mobile);
+    mask-size: 100% 100%;
+    -webkit-mask-size: 100% 100%;
+  }
+
   .background-video {
     display: none;
   }
@@ -395,45 +408,51 @@ export default {
   }
 
   .asd20-video-header {
-    mask: url(#video-header-mask-desktop);
-    -webkit-mask: url(#video-header-mask-desktop);
+    &__masked-content {
+      mask: url(#video-header-mask-desktop);
+      -webkit-mask: url(#video-header-mask-desktop);
 
-    &::after {
-      content: '';
-      height: auto;
-      display: block;
-      position: absolute;
-      z-index: 0;
-      top: 0;
-      bottom: auto;
-      left: 0;
-      width: 100%;
-      height: 50%;
-      background: linear-gradient(
-        170deg,
-        rgba(6, 11, 31, 0.8) 10%,
-        rgba(6, 11, 31, 0) 50%,
-        transparent 100%
-      );
-    }
+      &::after {
+        content: '';
+        height: auto;
+        display: block;
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        bottom: auto;
+        left: 0;
+        width: 100%;
+        height: 50%;
+        background: linear-gradient(
+          170deg,
+          rgba(6, 11, 31, 0.8) 10%,
+          rgba(6, 11, 31, 0) 50%,
+          transparent 100%
+        );
+      }
 
-    .background-video {
-      display: block;
-      pointer-events: none;
-    }
-    .background-image {
-      display: block;
-      z-index: -1;
-      width: 100%;
-      height: 100vh;
-      object-fit: cover;
-    }
+      .background-video {
+        display: block;
+        pointer-events: none;
+      }
+      .background-image {
+        display: block;
+        z-index: -1;
+        width: 100%;
+        height: 100vh;
+        object-fit: cover;
+      }
 
-    video {
-      z-index: -1;
-      width: 100%;
-      height: 100vh;
-      object-fit: cover;
+      video {
+        z-index: -1;
+        width: 100%;
+        height: 100vh;
+        object-fit: cover;
+      }
+
+      .scroll-down-indicator {
+        display: block;
+      }
     }
 
     & :deep(.asd20-district-logo) {
@@ -451,34 +470,32 @@ export default {
       width: 95%;
       display: flex;
     }
-    .scroll-down-indicator {
-      display: block;
-    }
+
     .video-toggle-btn {
-      display: block;
       position: absolute;
-      bottom: 4rem;
       right: 0.5rem;
-      background-color: rgba(0, 0, 0, 0.5);
-      color: lightgray;
-      border: none;
+      bottom: calc(4rem + 23px);
+      z-index: 101;
+      display: flex;
       width: 45px;
       height: 45px;
+      border: none;
       border-radius: 50%;
-      display: flex;
       align-items: center;
       justify-content: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      color: lightgray;
       font-size: 18px;
       cursor: pointer;
       transition: background-color 0.3s ease-in-out;
-    }
 
-    .video-toggle-btn:hover {
-      background-color: rgba(0, 0, 0, 0.7);
-    }
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.7);
+      }
 
-    .video-toggle-btn span {
-      line-height: 1;
+      span {
+        line-height: 1;
+      }
     }
   }
 }

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

@@ -196,11 +196,21 @@ export default {
   margin-top: space(2.25);
   .asd20-notification-group--floating {
     position: absolute;
-    top: space(2);
+    top: 3rem;
     right: space(0.5);
   }
 }
 
+@media (min-width: 768px) {
+  .asd20-template-detail {
+  .asd20-notification-group--floating {
+    position: absolute;
+    top: 2.5rem;
+    right: space(0.5);
+  }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-template-detail {
     @include template-desktop;

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

@@ -67,11 +67,7 @@
             @dismiss="$emit('dismiss-notification', $event)"
             @toggle-all="$emit('toggle-all')"
           />
-          <asd20-list
-            class="logins-list"
-            multi-column
-            :column-width="480"
-          >
+          <asd20-list class="logins-list" multi-column :column-width="480">
             <asd20-list-item
               v-for="(login, index) in selectedTabLogins.logins"
               :key="index"
@@ -100,7 +96,9 @@
                   v-if="login.bodyHtml"
                   href="#"
                   @click.prevent="selectedLogin = login"
-                >{{ login.title }} details.</a>
+                >
+                  {{ login.title }} details.
+                </a>
               </div>
             </asd20-list-item>
           </asd20-list>
@@ -117,11 +115,7 @@
       class="asd20-login-details-modal"
       @dismiss="selectedLogin = null"
     >
-      <asd20-viewport
-        v-if="selectedLogin"
-        padded
-        scrollable
-      >
+      <asd20-viewport v-if="selectedLogin" padded scrollable>
         <asd20-messaging-group
           :messages="[selectedLogin]"
         ></asd20-messaging-group>
@@ -132,9 +126,7 @@
     <slot name="before-footer" />
 
     <!-- Quick Links -->
-    <asd20-quicklinks-menu
-      :quick-links="quickLinks"
-    >
+    <asd20-quicklinks-menu :quick-links="quickLinks">
       <slot name="quicklinks-menu" />
     </asd20-quicklinks-menu>
 
@@ -193,17 +185,12 @@ export default {
     Asd20MessagingGroup,
   },
   mixins: [pageTemplateMixin],
-  props: {
-    // tabs: { type: Array, default: () => [] },
-    // logins: { type: Array, default: () => [] },
-  },
+  props: {},
   data() {
     return {
       tab: '',
       selectedLogin: null,
     }
-
-    // this.tabs ? this.tabsList[0].hash : 'one',
   },
 
   computed: {
@@ -250,21 +237,6 @@ export default {
         }
       })
     },
-    // loginsByTab() {
-    //   if (!this.tabsList.length || !this.logins.length) return []
-    //   let logins = []
-    //   for (let t of this.tabsList) {
-    //     let loginsByTab = this.logins.filter(l =>
-    //       l.categoryTitles.includes(t.label)
-    //     )
-    //     logins.push({
-    //       tab: t.label,
-    //       hash: t.hash,
-    //       logins: loginsByTab,
-    //     })
-    //   }
-    //   return logins
-    // },
 
     loginsByTab() {
       if (!this.tabsList.length || !this.logins.length) return []
@@ -351,8 +323,8 @@ export default {
 
   .notification-group--floating {
     position: absolute;
-    right: space(0.5);
-    top: space(1);
+    right: 0.75rem;
+    top: 1.5rem;
     z-index: 101;
   }
   .notification-group--inline {
@@ -392,14 +364,25 @@ export default {
   }
 }
 
+@media (min-width: 768px) {
+  .asd20-template-logins {
+    .notification-group--floating {
+      position: absolute;
+      right: 1rem;
+      top: 4rem;
+      z-index: 101;
+    }
+  }
+}
+
 @media (min-width: 1024px) {
   .asd20-template-logins {
     margin-left: space(3);
     margin-top: 0;
     .notification-group--floating {
       position: absolute;
-      right: space(1.85);
-      top: 1rem;
+      right: 3rem;
+      top: 3rem;
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);