@asd20/ui-next 2.21.9 → 2.21.11

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.21.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.10...ui-next-v2.21.11) (2026-08-27)
+
+## [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)

package/package.json

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

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

@@ -355,7 +355,7 @@ $max: 4rem;
       [top-end hero-start] space(3)
       [content-start] minmax(0, 1fr) [content-end]
       space(3)
-      [actions-start] auto [media-end]
+      [actions-start] space(1) [media-end]
       space(2) [full-end];
     margin-bottom: 0;
     &::before {

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

@@ -582,14 +582,14 @@ $max: 4rem;
     h1 {
       margin: 0 0 space(1);
       font-size: 40px !important;
-      color: var(--color__on-accent);
+      color: var(--website-header__title-color);
       border-bottom: none;
     }
 
     &__lead {
       margin: space(-0.5) 0 0;
       font-size: 20px !important;
-      color: var(--color__on-accent);
+      color: var(--website-header__foreground-color);
     }
 
     &__call-to-action {

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%);
@@ -451,7 +460,7 @@ export default {
       position: absolute;
       top: space(5.25);
       right: 3.5rem;
-      width: min(34rem, calc(100vw - 8rem));
+      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;