@asd20/ui 3.2.382 → 3.2.385

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui",
-  "version": "3.2.300",
+  "version": "3.2.383",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6838,6 +6838,11 @@
         }
       }
     },
+    "body-scroll-lock": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-2.7.1.tgz",
+      "integrity": "sha512-hS53SQ8RhM0e4DsQ3PKz6Gr2O7Kpdh59TWU98GHjaQznL7y4dFycEPk7pFQAikqBaUSCArkc5E3pe7CWIt2fZA=="
+    },
     "bonjour": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
@@ -29466,6 +29471,14 @@
       "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.5.tgz",
       "integrity": "sha512-VPNCOTZK6WZy73lcWc+R7IW1uaBFEO3/Csrs5CzWVOdvE30V8Y1+BE/BtTlcEmeDGx0eqdE7bSCg55Jj37PMJg=="
     },
+    "v-scroll-lock": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/v-scroll-lock/-/v-scroll-lock-1.3.1.tgz",
+      "integrity": "sha512-t41gdxloJ0+5VzHPTi9+PjqjXMeXsM81nP1QUszMQCaLp4pfF0vcJ8aNh3UKK49Pc+RJdCbw3Kj/Z1HCSPQEyA==",
+      "requires": {
+        "body-scroll-lock": "^2.6.4"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package/package.json

@@ -5,7 +5,7 @@
     "*.scss",
     "*.vue"
   ],
-  "version": "3.2.382",
+  "version": "3.2.385",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -35,8 +35,9 @@
     "date-fns": "^1.30.1",
     "js-cookie": "^2.2.1",
     "lodash-es": "^4.17.15",
-    "swiper": "^5.3.6",
+    "swiper": "^5.4.5",
     "uuid": "^3.3.2",
+    "v-scroll-lock": "^1.3.1",
     "vue-ctk-date-time-picker": "^2.1.1",
     "vue-intersect": "^1.1.6",
     "vue-lazyload": "^1.2.6",

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

@@ -23,40 +23,40 @@ export default {
     },
   },
 
-  mounted() {
-    this.init()
-  },
+  // mounted() {
+  //   this.init()
+  // },
 
-  methods: {
-    init() {
-      window.addEventListener(
-        'hashchange',
-        () => {
-          this.focusElement(location.hash.substring(1))
-        },
-        false
-      )
+  // methods: {
+  //   init() {
+  //     window.addEventListener(
+  //       'hashchange',
+  //       () => {
+  //         this.focusElement(location.hash.substring(1))
+  //       },
+  //       false
+  //     )
 
-      if (location.hash && location.hash.substring(1)) {
-        this.focusElement(location.hash.substring(1))
-      }
-    },
+  //     if (location.hash && location.hash.substring(1)) {
+  //       this.focusElement(location.hash.substring(1))
+  //     }
+  //   },
 
-    focusElement(id) {
-      if (!id) return
-      let element = window.document.getElementById(id)
-      if (element) {
-        if (
-          !/^(a|select|input|button|textarea)/i.test(
-            element.tagName.toLowerCase()
-          )
-        ) {
-          element.setAttribute('tabindex', -1)
-        }
-        element.focus()
-      }
-    },
-  },
+  //   focusElement(id) {
+  //     if (!id) return
+  //     let element = window.document.getElementById(id)
+  //     if (element) {
+  //       if (
+  //         !/^(a|select|input|button|textarea)/i.test(
+  //           element.tagName.toLowerCase()
+  //         )
+  //       ) {
+  //         element.setAttribute('tabindex', -1)
+  //       }
+  //       element.focus()
+  //     }
+  //   },
+  // },
 }
 </script>
 

package/src/components/molecules/Asd20Card/index.vue

@@ -44,7 +44,7 @@
         <a
           class="asd20-card__link"
           v-if="link"
-          :href="link"
+          :href="link ? link : ''"
           :title="title"
           v-html="linkLabel"
           :tabindex="disableFocus ? -1 : 0"
@@ -254,8 +254,8 @@ export default {
       border-radius: var(--website-shape__radius-m);
     }
     &:focus::after {
-      box-shadow: 0 0 0 5px var(--website-page__link-color) inset,
-        0 0 0 10px white inset;
+      box-shadow: 0 0 0 2px var(--color__accent-s30) inset,
+        0 0 0 4px white inset;
       // @include asd20-focus;
     }
     &:active::after {

package/src/components/molecules/Asd20SearchField/index.vue

@@ -5,7 +5,7 @@
 
     <label for="asd20-search">Search</label>
     <input
-      id="asd20-search"
+      :id="`asd20-search${idTag}`"
       :value="value"
       type="search"
       :placeholder="placeholder"
@@ -28,6 +28,7 @@ export default {
   props: {
     value: { type: String, default: '' },
     extra: { type: String, default: '' },
+    idTag: { type: String, default: '' },
     large: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Search' },
   },
@@ -84,7 +85,7 @@ export default {
     // font-size: space(0.75);
     font-size: space(0.625);
     line-height: 1;
-    height: space(2);
+    height: space(1.5);
     background: white;
     transition: background asd20-speed(1) ease;
 

package/src/components/molecules/Asd20Swiper/index.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="asd20-swiper" :style="styles">
+    <!-- <button
+      tabindex="-1"
+      ref="prev"
+      title="Previous"
+      class="asd20-swiper__prev"
+    >
+      <span>Previous</span>
+    </button> -->
     <div ref="swiper" class="swiper-container">
       <slot name="before-wrapper" />
       <div class="swiper-wrapper">
@@ -8,17 +16,10 @@
       <div ref="pagination" class="swiper-pagination" />
       <slot name="after-wrapper" />
     </div>
-    <button
-      tabindex="-1"
-      ref="prev"
-      title="Previous"
-      class="asd20-swiper__prev"
-    >
-      <span>Previous</span>
-    </button>
-    <button tabindex="-1" ref="next" title="Next" class="asd20-swiper__next">
+
+    <!-- <button tabindex="-1" ref="next" title="Next" class="asd20-swiper__next">
       <span>Next</span>
-    </button>
+    </button> -->
   </div>
 </template>
 
@@ -92,7 +93,7 @@ export default {
               enabled: false,
               onlyInViewport: true,
             },
-            a11y: false,
+            a11y: true,
           },
           this.options,
           {
@@ -104,7 +105,7 @@ export default {
             },
             pagination: {
               el: this.$refs.pagination,
-              clickable: true,
+              clickable: false,
             },
             navigation: {
               prevEl: this.$refs.prev,

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

@@ -172,7 +172,7 @@ export default {
     background: rgba(50, 50, 50, 0.5);
     bottom: 0;
     padding: space(0.25);
-    font-size: 12px !important;
+    font-size: 0.8rem !important;
     width: 100%;
   }
 }
@@ -217,7 +217,7 @@ export default {
   .asd20-image-gallery {
     .image-grid {
       .grid-overlay {
-        font-size: 14px !important;
+        font-size: 1rem !important;
       }
     }
   }

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

@@ -9,7 +9,7 @@
       <slot name="top" />
     </div>
 
-    <div class="asd20-school-homepage-header__content">
+    <div id="main" class="asd20-school-homepage-header__content">
       <h1 v-if="heading" v-html="heading" />
       <div v-if="lead" class="asd20-school-homepage-header__lead">
         <span v-html="lead"></span>

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

@@ -25,7 +25,7 @@
         <source :src="videoUrl" type="video/mp4" />
       </video>
       <img class="background-image" :src="imageUrl" :alt="imageCaption" />
-      <div class="asd20-school-homepage-video-header__content">
+      <div id="main" class="asd20-school-homepage-video-header__content">
         <h1 v-if="heading" v-html="heading" />
         <div v-if="lead" class="asd20-school-homepage-video-header__lead">
           <span v-html="lead"></span>
@@ -58,7 +58,7 @@
     >
       <slot name="aside" />
     </aside>
-    <div class="scroll-down-indicator"></div>
+    <!-- <div class="scroll-down-indicator"></div> -->
     <slot />
   </header>
 </template>

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

@@ -46,10 +46,17 @@
         :active="menuOpen"
         @update:active="$emit('update:menuOpen', $event)"
         :sections="navigation"
+        v-scroll-lock="menuOpen"
       />
     </transition>
     <transition name="slide">
       <asd20-action-menu
+        v-show="(mq === 'lg' || mq === 'xl') && isLoaded"
+        :items="actionItems"
+        :active="menuOpen"
+        @update:active="$emit('update:menuOpen', $event)"
+      />
+      <!-- <asd20-action-menu
         v-show="
           (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded) ||
             ((mq === 'lg' || mq === 'xl') && isLoaded)
@@ -57,7 +64,7 @@
         :items="actionItems"
         :active="menuOpen"
         @update:active="$emit('update:menuOpen', $event)"
-      />
+      /> -->
     </transition>
     <transition name="slide">
       <asd20-site-search
@@ -71,6 +78,8 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 import Asd20ActionMenu from '../../../components/organisms/Asd20ActionMenu'
 import Asd20SiteMenu from '../../../components/organisms/Asd20SiteMenu'
 import Asd20SiteSearch from '../../../components/organisms/Asd20SiteSearch'
@@ -78,6 +87,9 @@ import Asd20Navbar from '../../../components/organisms/Asd20Navbar'
 import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 
+import VScrollLock from 'v-scroll-lock'
+Vue.use(VScrollLock)
+
 export default {
   name: 'Asd20SiteNavigation',
   components: {

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

@@ -8,7 +8,7 @@
   >
     <div class="asd20-site-search__viewport">
       <div class="asd20-site-search__options">
-        <asd20-search-field ref="search" v-model="keywords" />
+        <asd20-search-field idTag="-sitewide" ref="search" v-model="keywords" />
         <asd20-checkbox
           v-show="hasParentOrg"
           v-model="_includeDistrictSearchResults"

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

@@ -72,7 +72,7 @@ export default {
       return {
         slidesPerView: 1,
         slidesPerGroup: 1,
-        grabCursor: true,
+        grabCursor: false,
         pagination: {
           type: 'bullets',
         },

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

@@ -22,7 +22,7 @@
     </video>
 
     <img class="background-image" :src="imageUrl" alt="" />
-    <div class="scroll-down-indicator"></div>
+    <!-- <div class="scroll-down-indicator"></div> -->
     <slot />
   </header>
 </template>

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

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" id="main" class="asd20-video-header-content">
+  <component :is="tag" class="asd20-video-header-content">
     <slot name="before"></slot>
 
     <section class="header-messaging-section">
@@ -8,7 +8,7 @@
         :key="index"
         v-bind="messaging"
       ></asd20-messaging> -->
-      <asd20-messaging v-bind="messages[0]"></asd20-messaging>
+      <asd20-messaging id="main" v-bind="messages[0]"></asd20-messaging>
     </section>
 
     <slot name="default"></slot>

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

@@ -12,6 +12,20 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -39,18 +53,6 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -41,19 +54,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -52,6 +52,7 @@
       :organization-options="organizationOptions"
     >
     </asd20-site-navigation> -->
+    
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -12,6 +12,20 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -40,18 +54,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -13,6 +13,19 @@
       />
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -41,19 +54,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-district-home-template">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <asd20-skip-to />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
 
     <!-- <asd20-choice-header
@@ -142,19 +155,6 @@
       </template>
     </asd20-return-to-school-header> -->
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- <asd20-page-content
       :primary-messages="primaryMessages"
       :secondary-messages="secondaryMessages"

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

@@ -1,7 +1,7 @@
 <template>
   <div class="asd20-district-video-template">
     <!-- Skip Nav -->
-    <asd20-skip-to></asd20-skip-to>
+    <asd20-skip-to />
 
     <!-- Banner Notifications -->
     <client-only>
@@ -13,7 +13,18 @@
       ></asd20-notification-group>
     </client-only>
 
-    <!-- Page Header -->
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
 
     <!-- Video Header -->
 
@@ -51,19 +62,6 @@
     </asd20-video-header>
     <asd20-secondary-header v-if="messages.length > 1" :messages="messages" />
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <asd20-feeds-section
       :announcements="announcements"
       :announcements-feed-props="announcementsFeedProps"
@@ -88,6 +86,10 @@
       :disclosureLinks="disclosureLinks"
     >
       <slot name="page-footer" />
+
+      <!-- analytics requested by Kyle Blakely -->
+      <!-- <img src="https://jelly.mdhv.io/v1/star.gif?pid=ipUavA655F50RvTSoYZIJU2vFFFB&src=mh&evt=hi"> -->
+
     </asd20-page-footer>
   </div>
 </template>

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -39,19 +52,6 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="primaryMessages"

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

@@ -12,6 +12,19 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -40,18 +53,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -37,19 +50,6 @@
       </client-only>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
 
     <slot></slot>

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -40,19 +53,6 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="primaryMessages"

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

@@ -12,6 +12,19 @@
         @toggle-all="$emit('toggle-all')"
       />
     </client-only>
+
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
     <!-- Page Header -->
     <asd20-page-header
       id="profile-header"
@@ -55,18 +68,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -13,6 +13,19 @@
       />
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -41,19 +54,6 @@
       </template>
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Inline-Notifications -->
     <client-only>
       <asd20-notification-group

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-school-homepage-header
       id="page-header"
@@ -76,19 +89,6 @@
       <slot name="quicklinks-menu" />
     </asd20-quicklinks-menu>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
     <asd20-page-content> </asd20-page-content>
 

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-school-homepage-video-header
       id="page-header"
@@ -77,19 +90,6 @@
       <slot name="quicklinks-menu" />
     </asd20-quicklinks-menu>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
     <asd20-page-content> </asd20-page-content>
 

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

@@ -13,6 +13,19 @@
       ></asd20-notification-group>
     </client-only>
 
+    <!-- Site Navigation -->
+    <asd20-site-navigation
+      :navigation="navigation"
+      :action-items="actionItems"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      :menu-open="menuOpen"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+    >
+    </asd20-site-navigation>
+
     <!-- Page Header -->
     <asd20-page-header
       id="page-header"
@@ -40,19 +53,6 @@
       <!-- <asd20-breadcrumb slot="top" :links="breadcrumbLinks"></asd20-breadcrumb> -->
     </asd20-page-header>
 
-    <!-- Site Navigation -->
-    <asd20-site-navigation
-      :navigation="navigation"
-      :action-items="actionItems"
-      @update:menuOpen="$emit('update:menuOpen', $event)"
-      :menu-open="menuOpen"
-      @update:searchOpen="$emit('update:searchOpen', $event)"
-      :search-open="searchOpen"
-      :organization="organization"
-      :organization-options="organizationOptions"
-    >
-    </asd20-site-navigation>
-
     <!-- Page Content -->
     <asd20-page-content
       :primary-messages="wayFindingPrimaryMessages"

package/src/design/_mixins.scss

@@ -30,7 +30,7 @@
 }
 
 @mixin asd20-focus() {
-  box-shadow: 0 0 0 3px white, 0 0 10px 0 var(--color__accent-s20);
+  box-shadow: inset 0 0 0 3px white, 0 0 10px 0 var(--color__accent-s20);
   outline: 3px solid var(--color__accent-s20);
-  outline-offset: 3px;
+  outline-offset: -2px;
 }

package/src/design/tokens.css

@@ -1,24 +1,24 @@
 :root {
   --color__accent-s100: #000000;
-  --color__accent-s90: #0b1213;
-  --color__accent-s80: #162427;
-  --color__accent-s70: #22363a;
-  --color__accent-s60: #2d484e;
-  --color__accent-s50: #385a61;
-  --color__accent-s40: #436c74;
-  --color__accent-s30: #4e7e88;
-  --color__accent-s20: #5a909b;
-  --color__accent-s10: #65a2af;
-  --color__accent: #70b4c2;
-  --color__accent-t10: #7ebcc8;
-  --color__accent-t20: #8dc3ce;
-  --color__accent-t30: #9bcbd4;
-  --color__accent-t40: #a9d2da;
-  --color__accent-t50: #b8dae1;
-  --color__accent-t60: #c6e1e7;
-  --color__accent-t70: #d4e9ed;
-  --color__accent-t80: #e2f0f3;
-  --color__accent-t90: #f1f8f9;
+  --color__accent-s90: #01040b;
+  --color__accent-s80: #030916;
+  --color__accent-s70: #0f1c50;
+  --color__accent-s60: #12205c;
+  --color__accent-s50: #142469;
+  --color__accent-s40: #182a7a;
+  --color__accent-s30: #1b2f87;
+  --color__accent-s20: #1e3493;
+  --color__accent-s10: #1e3493;
+  --color__accent: #225da5;
+  --color__accent-t10: #326aaf;
+  --color__accent-t20: #4479b9;
+  --color__accent-t30: #5b8bc4;
+  --color__accent-t40: #749dce;
+  --color__accent-t50: #8badd6;
+  --color__accent-t60: #a0bbdd;
+  --color__accent-t70: #b7cbe5;
+  --color__accent-t80: #cad9ec;
+  --color__accent-t90: #dce5f1;
   --color__accent-t100: #ffffff;
   --color__on-accent: #ffffff;
   --color__on-primary: #ffffff;
@@ -46,25 +46,25 @@
   --color__primary-t90: #e7eaf0;
   --color__primary-t100: #ffffff;
   --color__secondary-s100: #000000;
-  --color__secondary-s90: #010306;
-  --color__secondary-s80: #01070b;
-  --color__secondary-s70: #020a11;
-  --color__secondary-s60: #020d16;
-  --color__secondary-s50: #03111c;
-  --color__secondary-s40: #041421;
-  --color__secondary-s30: #041727;
-  --color__secondary-s20: #051a2c;
-  --color__secondary-s10: #051e32;
-  --color__secondary: #062137;
-  --color__secondary-t10: #1f374b;
-  --color__secondary-t20: #384d5f;
-  --color__secondary-t30: #516473;
-  --color__secondary-t40: #6a7a87;
-  --color__secondary-t50: #83909b;
-  --color__secondary-t60: #9ba6af;
-  --color__secondary-t70: #b4bcc3;
-  --color__secondary-t80: #cdd3d7;
-  --color__secondary-t90: #e6e9eb;
+  --color__secondary-s90: #07090e;
+  --color__secondary-s80: #0e111b;
+  --color__secondary-s70: #151a29;
+  --color__secondary-s60: #1b2236;
+  --color__secondary-s50: #202840;
+  --color__secondary-s40: #252f4a;
+  --color__secondary-s30: #2b3655;
+  --color__secondary-s20: #313e61;
+  --color__secondary-s10: #38476e;
+  --color__secondary: #3f507b;
+  --color__secondary-t10: #465989;
+  --color__secondary-t20: #4c6196;
+  --color__secondary-t30: #5268a0;
+  --color__secondary-t40: #586fab;
+  --color__secondary-t50: #5e77b7;
+  --color__secondary-t60: #647fc3;
+  --color__secondary-t70: #839ad4;
+  --color__secondary-t80: #a0b2df;
+  --color__secondary-t90: #c5d1ee;
   --color__secondary-t100: #ffffff;
   --color__tertiary-s100: #000000;
   --color__tertiary-s90: #171717;

package/src/design/tokens.json

@@ -1,12 +1,12 @@
 {
   "color": {
-    "accent": "#70b4c2",
+    "accent": "#225da5",
     "onAccent": "#ffffff",
     "onPrimary": "#ffffff",
     "onSecondary": "#ffffff",
     "onTertiary": "#062137",
     "primary": "#0e2c6c",
-    "secondary": "#062137",
+    "secondary": "#8a8b8c",
     "tertiary": "#e3e6e8"
   },
   "websiteButton": {