@asd20/ui-next 2.21.8 → 2.21.10

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.21.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.9...ui-next-v2.21.10) (2026-08-27)
+
+## [2.21.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.8...ui-next-v2.21.9) (2026-08-27)
+
 ## [2.21.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.7...ui-next-v2.21.8) (2026-08-26)
 
 ## [2.21.7](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.6...ui-next-v2.21.7) (2026-08-26)

package/package.json

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

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

@@ -10,14 +10,19 @@
   >
     <header class="asd20-person-modal__header">
       <div class="asd20-person-modal__photo">
-        <div class="photo">
+        <div
+          v-if="person.thumbnailUrl"
+          class="photo"
+        >
           <img
-            v-if="person.thumbnailUrl"
             :src="person.thumbnailUrl"
             :alt="person.displayName"
           />
         </div>
-        <div class="initials">
+        <div
+          v-else
+          class="initials"
+        >
           {{ initials }}
         </div>
       </div>
@@ -61,12 +66,10 @@
           icon="email"
           icon-size="lg"
           label="Email"
-          :description="
-            `<a href='mailto:${person.email.replace(
-              'mailto:',
-              ''
-            )}'>${person.email.replace('mailto:', '')}</a>`
-          "
+          :description="`<a href='mailto:${person.email.replace(
+            'mailto:',
+            ''
+          )}'>${person.email.replace('mailto:', '')}</a>`"
         />
 
         <Asd20ListItem
@@ -74,9 +77,7 @@
           icon="phone-alt"
           icon-size="lg"
           label="Phone"
-          :description="
-            `<a href='tel:${person.workPhone}'>${person.workPhone}</a>`
-          "
+          :description="`<a href='tel:${person.workPhone}'>${person.workPhone}</a>`"
         />
         <div
           v-show="person.biography"
@@ -125,9 +126,12 @@ export default {
     initials() {
       if (!this.person.displayName) return ''
       return this.person.displayName
-        .split(' ')
+        .trim()
+        .split(/\s+/)
+        .filter(Boolean)
         .map(n => n[0])
         .join('')
+        .slice(0, 3)
     },
     useEmailForm() {
       return (

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

@@ -343,8 +343,20 @@ $max: 4rem;
 @media (min-width: 1024px) {
   .asd20-school-homepage-header {
     display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
+    grid-template-columns:
+      [full-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [media-start] minmax(0, 1.15fr) [media-end]
+      space(3) [full-end];
+    grid-template-rows:
+      [top-start] space(5)
+      [media-start] space(1)
+      [top-end hero-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [actions-start] auto [media-end]
+      space(2) [full-end];
     margin-bottom: 0;
     &::before {
       content: '';
@@ -354,8 +366,8 @@ $max: 4rem;
       bottom: auto;
       left: auto;
       right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / actions-start;
       z-index: 1;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
@@ -372,8 +384,8 @@ $max: 4rem;
       left: auto;
       right: auto;
       margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / full-end;
       background: var(--website-quick-links__background-color);
     }
 
@@ -385,8 +397,8 @@ $max: 4rem;
       position: relative;
       margin: 0;
       padding: space(1) space(1) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
+      grid-column: full-start / full-end;
+      grid-row: top-start / top-end;
       background: transparent;
       justify-content: space-between;
       width: inherit;
@@ -406,8 +418,8 @@ $max: 4rem;
       margin-top: 0;
       position: relative;
       width: auto;
-      grid-column: 2 / 6;
-      grid-row: 8 / 9;
+      grid-column: content-start / content-end;
+      grid-row: content-start / content-end;
     }
 
     h1 {
@@ -421,8 +433,8 @@ $max: 4rem;
     }
 
     &__call-to-action {
-      grid-column: 2 / 6;
-      grid-row-start: 10;
+      grid-column: content-start / content-end;
+      grid-row: actions-start / media-end;
       z-index: 2;
       margin: 0;
       height: min-content;
@@ -444,8 +456,8 @@ $max: 4rem;
       left: auto;
       right: auto;
       top: auto;
-      grid-column: 7 / -2;
-      grid-row: 6 / -3;
+      grid-column: media-start / media-end;
+      grid-row: media-start / media-end;
       z-index: 1;
       height: auto;
       margin: 0;

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

@@ -473,186 +473,33 @@ $max: 4rem;
   }
 }
 
-@media (min-width: 1024px) and (max-height: 700px) {
+@media (min-width: 1024px) {
   .asd20-school-homepage-video-header {
     display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(
-        3,
-        space(1)
-      );
+    grid-template-columns:
+      [full-start] space(3)
+      [media-start] minmax(0, 1fr) [media-end]
+      space(3) [full-end];
+    grid-template-rows:
+      [top-start] space(5)
+      [media-start] space(1)
+      [top-end hero-start] space(3)
+      [content-start] minmax(0, 1fr) [content-end]
+      space(3)
+      [actions-start] space(1) [media-end]
+      space(2) [full-end];
     margin-bottom: 0;
-    .background-video {
-      display: block;
-      pointer-events: none;
-    }
-    .background-image {
-      display: block;
-    }
-    .hide-background-image {
-      display: none;
-    }
-
-    video {
-      z-index: -1;
-      width: 100%;
-      height: 80vh;
-      object-fit: cover;
-    }
-
-    & :deep(.notification-group--status .notifications) {
-      border-radius: 3rem;
-      padding: 0.37rem;
-    }
-    &::before {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
-      z-index: 1;
-      /* transform: translate3d(0, calc(5% * var(--scroll-progress)), 0);*/
-      border-radius: var(--website-shape__radius-l);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
-      background: var(--website-quick-links__background-color);
-    }
-
-    & :deep(.asd20-logo + .asd20-breadcrumb) {
-      margin-top: space(2);
-    }
-
-    &__top {
-      position: relative;
-      width: inherit;
-      margin: 0;
-      padding: space(0.5) space(3) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
-      background: transparent;
-      justify-content: space-between;
-      & :deep(.asd20-picker) {
-        display: flex;
-      }
-    }
-
-    &__text {
-      display: block;
-      position: absolute;
-      top: space(1);
-      left: space(1);
-      z-index: 100;
-      width: 60%;
-      min-width: space(15);
-      height: min-content;
-      background: rgba(0, 0, 0, 0.6);
-      padding: space(1);
-      border-left: space(1.5) solid var(--color__accent-t20);
-      animation: slide_left 1s ease-in-out 0.5s both;
-      border-top-left-radius: 2rem;
-      border-bottom-left-radius: 2rem;
-    }
-
-    &__content {
-      width: auto;
-      background: transparent;
-    }
 
-    h1 {
-      margin: 0 0 space(1) 0;
-      font-size: 40px !important;
-      color: var(--color__on-accent);
-      border-bottom: none;
-    }
-
-    &__lead {
-      margin: space(-0.5) 0 0 0;
-      font-size: 20px !important;
-      color: var(--color__on-accent);
-    }
-
-    &__lead + &__call-to-action {
-      margin-top: 0;
-    }
-    &__call-to-action {
-      flex-direction: column;
-      margin: 0;
-      height: min-content;
-      align-self: end;
-      .asd20-button {
-        flex-grow: 1;
-        width: auto;
-        margin: space(0.5) 0 0;
-        min-width: 60%;
-        max-width: 60%;
-        border-radius: var(--website-shape__radius-m);
-        padding: space(0.5) space(0.75);
-      }
-    }
-
-    &__image {
-      display: block;
-      position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 2 / 13;
-      grid-row: 6 / -3;
-      z-index: 1;
-      height: auto;
-      margin: 0;
-      padding: 0;
-      background: transparent;
-      transform: translate3d(0, calc(-20% * var(--scroll-progress)), 0);
-      border-radius: var(--website-shape__radius-l);
-      overflow: hidden;
-
-      img {
-        display: block;
-        width: 100%;
-        height: 80vh;
-        object-fit: cover;
-        object-position: center;
-        border-radius: var(--website-shape__radius-l);
-      }
-    }
-    .scroll-down-indicator {
+    .background-video,
+    .background-image {
       display: block;
     }
-  }
-}
 
-@media (min-width: 1024px) and (min-height: 700px) {
-  .asd20-school-homepage-video-header {
-    display: grid;
-    grid-template-columns: space(3) repeat(5, 1fr space(3)) 1fr space(3);
-    grid-template-rows: repeat(6, space(1)) space(3) 1fr space(3) repeat(3, space(1));
-    margin-bottom: 0;
     .background-video {
-      display: block;
       border-radius: var(--website-shape__radius-l);
       pointer-events: none;
     }
+
     .hide-background-image {
       display: none;
     }
@@ -664,39 +511,25 @@ $max: 4rem;
       object-fit: cover;
     }
 
-    & :deep(.notification-group--status .notifications) {
-      border-radius: 3rem;
-      padding: 0.375rem;
-    }
     &::before {
       content: '';
       display: block;
       position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      grid-column: 1 / -1;
-      grid-row: 7 / -4;
+      inset: auto;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / actions-start;
       z-index: 1;
-      border-radius: var(--website-shape__radius-l);
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      border-radius: 0;
     }
 
     &::after {
       content: '';
       display: block;
       position: relative;
-      top: auto;
-      bottom: auto;
-      left: auto;
-      right: auto;
+      inset: auto;
       margin-left: 0;
-      grid-column: 1 / -1;
-      grid-row: 7 / -1;
+      grid-column: full-start / full-end;
+      grid-row: hero-start / full-end;
       background: var(--website-quick-links__background-color);
     }
 
@@ -708,11 +541,12 @@ $max: 4rem;
       position: relative;
       width: inherit;
       margin: 0;
-      padding: space(0.5) space(3) space(1) space(3);
-      grid-column: 1/-1;
-      grid-row: 1/7;
+      padding: space(0.5) space(3) space(1);
+      grid-column: full-start / full-end;
+      grid-row: top-start / top-end;
       background: transparent;
       justify-content: space-between;
+
       & :deep(.asd20-picker) {
         display: flex;
       }
@@ -725,12 +559,17 @@ $max: 4rem;
       left: -1rem;
       z-index: 100;
       width: 25rem;
-      height: min-content;
-      background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 60%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
+      height: 80%;
+      background: linear-gradient(
+        to right,
+        rgba(0, 0, 0, 1) 0%,
+        rgba(0, 0, 0, 0.7) 60%,
+        rgba(0, 0, 0, 0.5) 80%,
+        rgba(0, 0, 0, 0) 100%
+      );
       padding: space(1);
       border-left: space(1.5) solid var(--color__accent-t20);
       animation: slide_left 1s ease-in-out 0.5s both;
-      height: 80%;
       border-top-left-radius: 2rem;
       border-bottom-left-radius: 2rem;
     }
@@ -741,26 +580,24 @@ $max: 4rem;
     }
 
     h1 {
-      margin: 0 0 space(1) 0;
+      margin: 0 0 space(1);
       font-size: 40px !important;
       color: var(--color__on-accent);
       border-bottom: none;
     }
 
     &__lead {
-      margin: space(-0.5) 0 0 0;
+      margin: space(-0.5) 0 0;
       font-size: 20px !important;
       color: var(--color__on-accent);
     }
 
-    &__lead + &__call-to-action {
-      margin-top: 0;
-    }
     &__call-to-action {
       flex-direction: column;
       margin: 0;
       height: min-content;
       align-self: end;
+
       .asd20-button {
         flex-grow: 1;
         width: auto;
@@ -775,12 +612,9 @@ $max: 4rem;
     &__image {
       display: block;
       position: relative;
-      bottom: auto;
-      left: auto;
-      right: auto;
-      top: auto;
-      grid-column: 2 / 13;
-      grid-row: 6 / -3;
+      inset: auto;
+      grid-column: media-start / media-end;
+      grid-row: media-start / media-end;
       z-index: 1;
       height: auto;
       margin: 0;
@@ -799,14 +633,16 @@ $max: 4rem;
         border-radius: var(--website-shape__radius-l);
       }
     }
+
     .scroll-down-indicator {
       display: block;
     }
   }
+
   .video-toggle-btn {
     position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
+    bottom: space(0.5);
+    right: space(0.5);
     background-color: rgba(0, 0, 0, 0.5);
     color: lightgray;
     border: none;
@@ -819,14 +655,35 @@ $max: 4rem;
     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);
+    }
+
+    span {
+      line-height: 1;
+    }
   }
+}
+
+@media (min-width: 1024px) and (max-height: 699px) {
+  .asd20-school-homepage-video-header {
+    & :deep(.notification-group--status .notifications) {
+      padding: 0.37rem;
+    }
+
+    &__text {
+      top: space(1);
+      left: space(1);
+      width: 60%;
+      min-width: space(15);
+      height: min-content;
+      background: rgba(0, 0, 0, 0.6);
+    }
 
-  .video-toggle-btn span {
-    line-height: 1;
+    &__image {
+      overflow: hidden;
+    }
   }
 }
 </style>

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

@@ -442,11 +442,15 @@ export default {
     .asd20-video-header {
       .language-and-translation-container {
         display: flex;
+        position: relative;
         flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
         margin: space(0.25) 0;
         justify-content: flex-end;
+        .asd20-notification-group--floating {
+          position: unset;
+        }
       }
       .weather-link {
         margin-bottom: 0;
@@ -485,6 +489,11 @@ export default {
     display: block;
     margin-left: space(3);
     margin-top: 0;
+    .asd20-video-header {
+      .language-and-translation-container {
+        width: min(34rem, calc(50vw - #{space(1)}));
+      }
+    }
   }
   .asd20-video-header {
     .double-notification-wrapper {
@@ -527,6 +536,7 @@ export default {
     .asd20-video-header {
       .language-and-translation-container {
         flex-wrap: nowrap;
+        width: min(44rem, calc(50vw - #{space(1)}));
       }
       .language-and-translation-container .ai-search {
         width: auto;

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

@@ -478,10 +478,11 @@ export default {
     margin-top: 0;
     .notification-translation-container {
       display: flex;
+      position: relative;
       flex-direction: column;
       align-items: flex-end;
       width: 100%;
-      max-width: min(34rem, calc(100vw - 6rem));
+      max-width: min(34rem, calc(50vw - #{space(1)}));
       margin-right: 0;
       justify-content: flex-end;
       .language-wrapper {
@@ -494,6 +495,9 @@ export default {
       .asd20-language-translation {
         flex-grow: 0;
       }
+      .asd20-notification-group--floating {
+        position: unset;
+      }
     }
     .asd20-notification--status {
       .asd20-notification__content {
@@ -534,7 +538,7 @@ export default {
 @media (min-width: 1500px) {
   .asd20-school-home-template {
     .notification-translation-container {
-      max-width: min(44rem, calc(100vw - 8rem));
+      max-width: min(44rem, calc(50vw - #{space(1)}));
     }
     .language-wrapper {
       flex-wrap: nowrap;

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

@@ -409,16 +409,25 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .notification-translation-container {
-      margin: 0 space(1);
+      position: relative;
+      margin: 0 space(1) 0 auto;
       justify-content: flex-end;
       flex-wrap: nowrap;
+      width: auto;
       .language-wrapper {
         justify-content: flex-end;
+        flex-wrap: nowrap;
+        .ai-search {
+          order: 0;
+        }
       }
       .no-block-widget {
         position: relative;
         top: unset;
       }
+      .asd20-notification-group--floating {
+        position: unset;
+      }
     }
     .asd20-quicklinks-menu {
       clip-path: ellipse(100% 100% at 50% 0%);
@@ -450,8 +459,8 @@ export default {
     .notification-translation-container {
       position: absolute;
       top: space(5.25);
-      right: space(3.5);
-      width: min(34rem, calc(100vw - 8rem));
+      right: 3.5rem;
+      width: min(34rem, calc(50vw - #{space(1)}));
     }
 
     .asd20-quicklinks-menu {
@@ -472,7 +481,7 @@ export default {
 @media (min-width: 1500px) {
   .asd20-school-home-video-template {
     .notification-translation-container {
-      width: min(44rem, calc(100vw - 8rem));
+      width: min(44rem, calc(50vw - #{space(1)}));
     }
     .language-wrapper {
       flex-wrap: nowrap;