@asd20/ui-next 2.7.5 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.8.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.6...ui-next-v2.8.0) (2026-05-12)
+
+
+### Features
+
+* optimize video loading for mobile devices ([bf57b66](https://github.com/academydistrict20/asd20-ui-next/commit/bf57b66611bbf4652e801c246d7b6c483e64bb71))
+
+## [2.7.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.5...ui-next-v2.7.6) (2026-05-07)
+
+
+### Bug Fixes
+
+* correct aria labels for logos ([6e44309](https://github.com/academydistrict20/asd20-ui-next/commit/6e44309c101a93620c3abf2b905867d742efdfad))
+
 ## [2.7.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.7.4...ui-next-v2.7.5) (2026-05-07)
 
 

package/package.json

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

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

@@ -2,8 +2,7 @@
   <a
     :href="link"
     class="asd20-district-logo"
-    aria-label="Academy District 20 Home - We educate and inspire students to thrive."
-    alt="The Academy District 20 logo."
+    :aria-label="accessibleLabel"
     @click="onClick"
   >
     <svg viewBox="0 0 460.94 62.52">
@@ -39,6 +38,13 @@ export default {
     link: { type: String, default: '/' },
     tagline: { type: Boolean, default: false },
   },
+  computed: {
+    accessibleLabel() {
+      return this.tagline
+        ? 'Educate. Inspire. Thrive. Academy District 20 Home'
+        : 'Academy District 20 Home'
+    },
+  },
   methods: {
     onClick(event) {
       navigateInternalHref(this, event, this.link, {

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

@@ -3,11 +3,7 @@
     class="asd20-logo"
     :class="classes"
     :href="link"
-    :aria-label="
-      tagline
-        ? `${abbreviatedTitle} ${subtitle}, An Academy District 20 School`
-        : `${abbreviatedTitle} ${subtitle}`
-    "
+    :aria-label="accessibleLabel"
     @click="onClick"
   >
     <figure class="asd20-logo__image">
@@ -83,7 +79,7 @@ export default {
       if (this.title === 'Academy District 20 Insider') {
         return (newTitle = 'D20 Insider')
       }
-      const words = this.title.trim().split(' ')
+      const words = this.title.trim().split(/\s+/).filter(Boolean)
       if (this.abbreviated && words.length >= 3) {
         for (let i = 0; i < words.length; i++) {
           newTitle += `${words[i][0]}<em>${words[i].substr(1)} </em>`
@@ -92,6 +88,25 @@ export default {
       }
       return this.title.trim()
     },
+    visibleTitle() {
+      if (this.title === 'Academy District 20 Insider') {
+        return 'D20 Insider'
+      }
+      const words = this.title.trim().split(/\s+/).filter(Boolean)
+      if (this.abbreviated && words.length >= 3) {
+        return words.map(word => word[0]).join('')
+      }
+      return this.title.trim()
+    },
+    accessibleLabel() {
+      return [
+        this.visibleTitle,
+        this.subtitle,
+        this.tagline ? 'An Academy District 20 School' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')
+    },
   },
   methods: {
     onClick(event) {

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

@@ -26,6 +26,7 @@
         loop
         muted
         playsinline
+        preload="none"
         :poster="imageUrl"
       >
         <source
@@ -39,6 +40,8 @@
         class="background-image"
         :src="imageUrl"
         :alt="imageCaption"
+        decoding="async"
+        fetchpriority="high"
       />
       <button
         v-if="videoUrl && !isMobile"
@@ -129,6 +132,7 @@ export default {
   },
   data() {
     return {
+      hasMounted: false,
       isPaused: false,
       isMobile: false,
     }
@@ -151,13 +155,14 @@ export default {
       )
     },
     loadVideo() {
-      if (this.isMobile) {
+      if (!this.hasMounted || this.isMobile) {
         return null
       }
       return this.videoUrl
     },
   },
   mounted() {
+    this.hasMounted = true
     this.checkIsMobile()
     window.addEventListener('resize', this.checkIsMobile)
   },

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

@@ -115,6 +115,7 @@
           loop
           muted
           playsinline
+          preload="none"
           :poster="imageUrl"
         >
           <source
@@ -128,6 +129,8 @@
           class="background-image"
           :src="imageUrl"
           :alt="imageCaption"
+          decoding="async"
+          fetchpriority="high"
         />
         <button
           v-if="videoUrl && !isMobile"
@@ -172,6 +175,7 @@ export default {
   },
   data() {
     return {
+      hasMounted: false,
       isPaused: false,
       isMobile: false,
     }
@@ -191,13 +195,14 @@ export default {
       )
     },
     loadVideo() {
-      if (this.isMobile) {
+      if (!this.hasMounted || this.isMobile) {
         return null
       }
       return this.videoUrl
     },
   },
   mounted() {
+    this.hasMounted = true
     this.checkIsMobile()
     window.addEventListener('resize', this.checkIsMobile)
   },