@asd20/ui-next 2.13.0 → 2.13.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.13.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.1...ui-next-v2.13.2) (2026-07-27)
+
+
+### Bug Fixes
+
+* fix notification icon fill color ([d4865f1](https://github.com/academydistrict20/asd20-ui-next/commit/d4865f1bcd7e1bad0b8f16caf0c67b6ed61b2cd0))
+
+## [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)
 
 

package/package.json

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

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

@@ -316,7 +316,7 @@ export default {
       width: 32px;
       height: 32px;
       color: var(--website-icon__line-color) !important;
-      fill: var(--website-menu__icon-fill-color) !important;
+      fill: var(--website-icon__fill-color) !important;
     }
 
     .bell__count {

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,6 @@ 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;
-        }
-      }
     }
   }
 

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);

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

@@ -811,20 +811,6 @@ export default {
   .asd20-notification-group--floating {
     position: absolute;
     top: space(2);
-    // .bell {
-    //   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125) !important;
-    //   svg {
-    //     fill: var(--color__accent) !important;
-    //   }
-    //   span {
-    //     background: var(--color__accent) !important;
-    //     top: inherit !important;
-    //     right: inherit !important;
-    //     width: 1.2rem !important;
-    //     height: 1.2rem !important;
-    //     font-size: 0.75rem !important;
-    //   }
-    // }
   }
   .salary-calculator {
     margin: space(2);
@@ -854,13 +840,6 @@ export default {
     .asd20-notification-group--floating {
       position: absolute;
       top: space(1);
-      // .bell {
-      //   span {
-      //     background: var(--color__accent);
-      //     top: -0.6em !important;
-      //     right: -0.6em !important;
-      //   }
-      // }
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);