@asd20/ui-next 2.21.7 → 2.21.8

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [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.7",
+  "version": "2.21.8",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

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

@@ -141,7 +141,7 @@ export default {
     top: 0;
     bottom: space(0.5);
     left: 0;
-    right: 3rem;
+    right: 2rem;
     z-index: -1;
     background: var(--website-header__background-style);
     background-color: var(--website-header__background-color);
@@ -208,7 +208,8 @@ export default {
 
   &__content {
     margin-top: space(3);
-    background: var(--website-header__background-color);
+    width: 90%;
+    // background: var(--website-header__background-color);
   }
 
   &__lead {
@@ -310,7 +311,7 @@ $max: 4rem;
 @media (min-width: 667px) {
   .asd20-school-homepage-header {
     &::before {
-      right: space(3);
+      right: 2rem;
       bottom: space(2);
     }
     &__top {
@@ -404,6 +405,7 @@ $max: 4rem;
     &__content {
       margin-top: 0;
       position: relative;
+      width: auto;
       grid-column: 2 / 6;
       grid-row: 8 / 9;
     }

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

@@ -54,43 +54,45 @@
         <!-- Pause icon (⏸) -->
         <span v-else>&#10073;&#10073;</span>
       </button>
-      <div
-        id="main"
-        class="asd20-school-homepage-video-header__content"
-      >
-        <h1
-          v-if="heading"
-          v-html="heading"
-        />
+      <div class="asd20-school-homepage-video-header__text">
         <div
-          v-if="lead"
-          class="asd20-school-homepage-video-header__lead"
+          id="main"
+          class="asd20-school-homepage-video-header__content"
         >
-          <span v-html="lead"></span>
-          <a
-            v-if="detailLink && !isDetailPage"
-            :href="detailLink"
-            @click="onDetailLinkClick"
-          >
-            {{ detailLinkLabel }}
-          </a>
+          <h1
+            v-if="heading"
+            v-html="heading"
+          />
           <div
-            v-if="callsToAction.length > 0"
-            class="asd20-school-homepage-video-header__call-to-action"
+            v-if="lead"
+            class="asd20-school-homepage-video-header__lead"
           >
-            <asd20-button
-              v-for="(cta, index) in callsToAction"
-              :key="index"
-              :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
-              :label="cta.label"
-              :icon="cta.icon"
-              :link="cta.url"
-              reversed
-              horizontal
-              centered
-            />
+            <span v-html="lead"></span>
+            <a
+              v-if="detailLink && !isDetailPage"
+              :href="detailLink"
+              @click="onDetailLinkClick"
+            >
+              {{ detailLinkLabel }}
+            </a>
           </div>
         </div>
+        <div
+          v-if="callsToAction.length > 0"
+          class="asd20-school-homepage-video-header__call-to-action"
+        >
+          <asd20-button
+            v-for="(cta, index) in callsToAction"
+            :key="index"
+            :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+            :label="cta.label"
+            :icon="cta.icon"
+            :link="cta.url"
+            reversed
+            horizontal
+            centered
+          />
+        </div>
       </div>
     </div>
 
@@ -220,16 +222,16 @@ export default {
     display: block;
     position: absolute;
     top: 0;
-    bottom: space(0);
+    bottom: space(0.5);
     left: 0;
-    right: space(1);
+    right: 2rem;
     z-index: -1;
-    background: var(--website-header__background-color)
-      var(--website-header__background-style);
-    border-radius: var(--website-shape__radius-l);
+    background: var(--website-header__background-style);
+    background-color: var(--website-header__background-color);
     border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    border-top-right-radius: 3rem;
     border-bottom-left-radius: 0;
+    border-bottom-right-radius: 3rem;
   }
   &::after {
     content: '';
@@ -249,14 +251,13 @@ export default {
     --fill-one: rgba(255, 255, 255, 1);
     --fill-two: rgba(255, 255, 255, 0.625);
 
-    position: relative;
+    width: 100%;
+    position: absolute;
     z-index: 101;
-    background: white;
     display: flex;
-    justify-content: space-between;
+    margin-top: space(0.5);
     align-items: center;
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
     & :deep(.asd20-picker) {
       display: none;
     }
@@ -265,38 +266,44 @@ export default {
       margin-left: 1rem;
     }
   }
+  &__text {
+    display: contents;
+  }
   &__content {
-    position: absolute;
-    top: 0;
-    background: rgba(0, 0, 0, 0.4);
-    height: 100%;
-    padding-top: space(3);
+    order: 1;
+    width: 90%;
+    // background: var(--website-header__background-color);
   }
   &__image {
+    display: flex;
+    flex-direction: column;
+    padding-top: space(3);
+
     img {
+      order: 2;
       display: block;
       width: 100%;
-      height: 600px;
-      min-height: 600px;
-      object-fit: cover;
       object-position: center;
     }
   }
 
   h1 {
     position: relative;
-    font-size: 32px !important;
-    color: #ffffff !important;
-    margin: space(2) space(1) space(1) space(1);
+    color: var(--website-header__title-color);
+    @include asd20-font(
+      2,
+      var(--website-typography__font-family-headlines),
+      1.2,
+      700
+    );
+    margin: space(1);
     z-index: 1;
-    border-bottom: 5px solid var(--color__accent);
-    padding-bottom: space(0.5);
   }
 
   &__lead {
     position: relative;
     z-index: 1;
-    color: #f6f6f6 !important;
+    color: var(--website-header__foreground-color);
     @include asd20-font(1, var(--website-typography__font-family-body));
     margin: space(-0.5) space(2) space(1) space(1);
     a {
@@ -305,19 +312,15 @@ export default {
   }
 
   &__call-to-action {
+    order: 3;
+    margin: space(1);
+    z-index: 1;
     display: flex;
     flex-direction: column;
-    left: space(1);
-    z-index: 2;
-    margin: 0;
-    height: min-content;
-    align-self: end;
     .asd20-button {
-      min-width: 95%;
-      border-radius: var(--website-shape__radius-m);
-      margin: space(0.5) 0 0;
       flex-grow: 1;
-      max-width: 100%;
+      width: calc(100% - space(3));
+      margin-bottom: space(0.5);
       font-size: 1rem !important;
       background-color: var(
         --website-header__button-background-color,
@@ -328,7 +331,7 @@ export default {
         var(--color__accent-t100)
       );
       position: relative;
-      padding: space(0.5) space(0.75);
+      padding: space(0.5) space(1.5);
       transition: background-color 0.3s ease;
       z-index: 2;
       overflow: hidden;
@@ -360,6 +363,10 @@ export default {
           background-color: var(--color__accent-t60);
         }
       }
+
+      &:not(:last-child) {
+        margin-bottom: space(0.5);
+      }
     }
   }
   .scroll-down-indicator {
@@ -442,30 +449,27 @@ $max: 4rem;
 }
 @media (min-width: 667px) {
   .asd20-school-homepage-video-header {
+    &::before {
+      right: 2rem;
+      bottom: space(2);
+    }
     &__call-to-action {
+      flex-direction: row;
+      margin: space(1);
       .asd20-button {
-        min-width: 50%;
-        max-width: 50%;
+        flex-grow: 0;
+        width: max-content;
+        min-width: 4rem;
+        margin-bottom: 0 !important;
+        &:not(:last-child) {
+          margin-right: space(0.5);
+        }
       }
     }
     &__top {
       flex-direction: row;
-      justify-content: flex-start;
-      padding: 0 space(1);
       align-items: center !important;
     }
-    &__image {
-      img {
-        display: block;
-        width: 100%;
-        height: 80vh;
-        object-fit: cover;
-        object-position: center;
-      }
-    }
-    h1 {
-      font-size: 40px !important;
-    }
   }
 }
 
@@ -538,6 +542,8 @@ $max: 4rem;
     }
 
     &__top {
+      position: relative;
+      width: inherit;
       margin: 0;
       padding: space(0.5) space(3) space(1) space(3);
       grid-column: 1/-1;
@@ -549,7 +555,9 @@ $max: 4rem;
       }
     }
 
-    &__content {
+    &__text {
+      display: block;
+      position: absolute;
       top: space(1);
       left: space(1);
       z-index: 100;
@@ -564,6 +572,11 @@ $max: 4rem;
       border-bottom-left-radius: 2rem;
     }
 
+    &__content {
+      width: auto;
+      background: transparent;
+    }
+
     h1 {
       margin: 0 0 space(1) 0;
       font-size: 40px !important;
@@ -581,9 +594,18 @@ $max: 4rem;
       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);
       }
     }
 
@@ -600,6 +622,7 @@ $max: 4rem;
       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;
@@ -682,6 +705,8 @@ $max: 4rem;
     }
 
     &__top {
+      position: relative;
+      width: inherit;
       margin: 0;
       padding: space(0.5) space(3) space(1) space(3);
       grid-column: 1/-1;
@@ -693,7 +718,9 @@ $max: 4rem;
       }
     }
 
-    &__content {
+    &__text {
+      display: block;
+      position: absolute;
       top: 2.6875rem;
       left: -1rem;
       z-index: 100;
@@ -708,6 +735,11 @@ $max: 4rem;
       border-bottom-left-radius: 2rem;
     }
 
+    &__content {
+      width: auto;
+      background: transparent;
+    }
+
     h1 {
       margin: 0 0 space(1) 0;
       font-size: 40px !important;
@@ -725,9 +757,18 @@ $max: 4rem;
       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);
       }
     }
 
@@ -744,6 +785,7 @@ $max: 4rem;
       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: visible;

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

@@ -325,11 +325,9 @@ export default {
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
-    margin: space(0.25);
     justify-content: flex-end;
-    width: calc(100% - 1rem);
-    position: absolute;
-    top: space(0.25);
+    width: 100%;
+    margin: 0 space(0.5);
     .language-wrapper {
       display: flex;
       flex-direction: row;
@@ -338,7 +336,6 @@ export default {
       flex-wrap: wrap;
       gap: space(0.25);
       width: 100%;
-      margin-bottom: space(0.25);
 
       .ai-search {
         order: 1;
@@ -352,6 +349,11 @@ export default {
 
       .asd20-language-translation {
         order: 3;
+        border-radius: 3rem;
+        & .asd20-select-input {
+          color: currentColor;
+          font-family: Arial, Helvetica, sans-serif;
+        }
       }
       .asd20-notification-group--floating {
         /* position: absolute;*/
@@ -365,20 +367,10 @@ export default {
         background: white;
         border-radius: 3rem;
       }
-      .asd20-language-translation {
-        z-index: 2;
-        border-radius: 3rem;
-        margin: 0 0.05rem;
-        height: 2.75rem;
-        & .asd20-select-input {
-          padding: 0.375rem 0.375rem;
-          color: currentColor;
-          font-family: Arial, Helvetica, sans-serif;
-        }
-      }
     }
     .no-block-widget {
-      top: 0;
+      position: relative;
+      top: unset;
     }
     .asd20-language-loader {
       order: 1;
@@ -417,25 +409,15 @@ export default {
 @media (min-width: 667px) {
   .asd20-school-home-video-template {
     .notification-translation-container {
-      margin: 0;
+      margin: 0 space(1);
       justify-content: flex-end;
-      position: absolute;
-      right: space(0.5);
-      top: space(0.5);
-      width: auto;
       flex-wrap: nowrap;
       .language-wrapper {
         justify-content: flex-end;
-        margin-bottom: 0;
-        flex-wrap: nowrap;
       }
-      .language-wrapper .ai-search {
-        width: 100%;
-        flex: 1 1 100%;
-        order: 0;
-      }
-      .asd20-notification-group--floating {
-        position: unset;
+      .no-block-widget {
+        position: relative;
+        top: unset;
       }
     }
     .asd20-quicklinks-menu {
@@ -466,6 +448,7 @@ export default {
       }
     }
     .notification-translation-container {
+      position: absolute;
       top: space(5.25);
       right: space(3.5);
       width: min(34rem, calc(100vw - 8rem));