@asd20/ui-next 2.21.6 → 2.21.8

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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)
+
+
+### Bug Fixes
+
+* mobile scroll fixes; ios input zoom issue ([56ba4a7](https://github.com/academydistrict20/asd20-ui-next/commit/56ba4a75391744db8a4f43ff74e30b1fa0bd5f75))
+
 ## [2.21.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.5...ui-next-v2.21.6) (2026-08-25)
 
 

package/README.md

@@ -87,6 +87,20 @@ npm test
 npm run build
 ```
 
+Optional harnesses are available to facilitate repeatable physical-device
+checks for scrolling, touch, focus, keyboard, and viewport changes:
+
+```sh
+npm run test:mobile:storybook
+npm run test:mobile:package
+```
+
+These commands are manual testing aids. They are not testing, CI, release, or
+package-publishing requirements.
+
+See [Physical Mobile Device Testing](docs/mobile-device-testing.md) for the
+device checklist, packed-consumer workflow, options, and troubleshooting.
+
 Regenerate icon metadata after adding, removing, or renaming SVG icon assets:
 
 ```sh

package/package.json

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

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

@@ -108,8 +108,8 @@ export default {
     border: none;
     border-radius: var(--website-shape__radius-s);
     // outline: 1px solid red;
-    // font-size: space(0.75);
-    font-size: space(0.625);
+    // Keep form text at least 16px so iOS Safari does not zoom the page on focus.
+    font-size: $base-font-size;
     line-height: 1;
     height: space(1.5);
     background: white;

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/organisms/Asd20SiteMenu/index.vue

@@ -153,6 +153,10 @@ import {
   shouldOpenInNewWindow,
   shouldShowExternalIcon,
 } from '../../../helpers/linkPolicy'
+import {
+  acquireDocumentScrollLock,
+  releaseDocumentScrollLock,
+} from '../../../helpers/documentScrollLock'
 
 export default {
   name: 'Asd20SiteMenu',
@@ -168,6 +172,7 @@ export default {
     focusedItemIndex: -1,
     hasFocus: false,
     keyboardTriggeredLastAction: false,
+    bodyScrollLock: null,
   }),
   computed: {
     activeSection() {
@@ -179,12 +184,43 @@ export default {
       return resolveCurrentHostname(this)
     },
   },
+  watch: {
+    active(newVal) {
+      if (newVal && !this.emptyNav) {
+        this.lockBodyScroll()
+      } else {
+        this.unlockBodyScroll()
+      }
+    },
+    emptyNav(newVal) {
+      if (this.active && !newVal) {
+        this.lockBodyScroll()
+      } else {
+        this.unlockBodyScroll()
+      }
+    },
+  },
   mounted() {
+    if (this.active && !this.emptyNav) {
+      this.lockBodyScroll()
+    }
     if (!this.emptyNav) {
       this.setFocus()
     }
   },
+  beforeUnmount() {
+    this.unlockBodyScroll()
+  },
   methods: {
+    lockBodyScroll() {
+      if (this.bodyScrollLock) return
+      this.bodyScrollLock = acquireDocumentScrollLock()
+    },
+    unlockBodyScroll() {
+      if (!this.bodyScrollLock) return
+      releaseDocumentScrollLock(this.bodyScrollLock)
+      this.bodyScrollLock = null
+    },
     onFocus(event) {
       this.hasFocus = true
       this.focusedSectionIndex = 0
@@ -380,6 +416,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overscroll-behavior: none;
   &:focus {
     // outline: none;
   }
@@ -393,6 +430,8 @@ export default {
   bottom: space(7);
   background: var(--website-menu__open-background-color, white);
   overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
   // overflow-y: scroll !important;
 }
 .asd20-table-of-contents {
@@ -493,8 +532,11 @@ export default {
     }
   }
   .asd20-site-menu__items {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-y: scroll; /* has to be scroll, not auto */
-    // -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
   }
   .asd20-site-menu__item {
     display: block;

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

@@ -40,7 +40,7 @@
       /> -->
       <asd20-action-menu
         v-show="
-          (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded && !zoomed) ||
+          (menuOpen && (mq === 'sm' || mq === 'md') && isLoaded) ||
             ((mq === 'lg' || mq === 'xl') && isLoaded)
         "
         :items="actionItems"
@@ -54,7 +54,6 @@
       <asd20-site-menu
         v-show="menuOpen"
         ref="siteMenu"
-        :class="zoomed ? 'zoomed' : ''"
         :active="menuOpen"
         :sections="navigation"
         :empty-nav="emptyNav"
@@ -290,11 +289,6 @@ export default {
   &.active::before {
     opacity: 1;
   }
-  .zoomed {
-    & :deep(.asd20-site-menu__viewport) {
-      bottom: 0 !important;
-    }
-  }
 }
 
 @media (min-width: 1024px) {

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

@@ -563,6 +563,10 @@ import queryAiSite from '../../../helpers/queryAiSite'
 import queryFiles from '../../../helpers/queryFiles'
 import queryPeople from '../../../helpers/queryPeople'
 import queryPages, { NO_PAGE_RESULTS_FALLBACKS } from '../../../helpers/queryPages'
+import {
+  acquireDocumentScrollLock,
+  releaseDocumentScrollLock,
+} from '../../../helpers/documentScrollLock'
 
 // Mixins
 import globalPropMixinFactory from '../../../mixins/globalPropMixinFactory.js'
@@ -2162,18 +2166,13 @@ export default {
     },
 
     lockBodyScroll() {
-      if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return
-      }
       if (this.bodyScrollLock) return
-      this.bodyScrollLock = true
+      this.bodyScrollLock = acquireDocumentScrollLock()
     },
 
     unlockBodyScroll() {
-      if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return
-      }
       if (!this.bodyScrollLock) return
+      releaseDocumentScrollLock(this.bodyScrollLock)
       this.bodyScrollLock = null
     },
 
@@ -3601,6 +3600,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  overscroll-behavior: none;
 
   /* allow descendants to use flex+overflow scrolling properly (Safari/iOS) */
   min-height: 0;
@@ -3852,6 +3852,8 @@ export default {
     border-radius: 0.5rem;
     padding: space(0.5);
     font: inherit;
+    // Match the iOS-safe minimum used by Asd20SearchField.
+    font-size: $base-font-size;
     color: var(--color__primary);
     background: white;
     box-sizing: border-box;
@@ -4188,11 +4190,6 @@ export default {
   transform: translate3d(0, -0.75rem, 0);
 }
 
-:global(html.asd20-site-search--scroll-locked),
-:global(body.asd20-site-search--scroll-locked) {
-  overscroll-behavior: none;
-}
-
 @media (min-width: 768px) {
   .asd20-site-search {
     .asd20-notificaiton {

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

@@ -117,6 +117,7 @@ export default {
   padding: 0 space(0.75);
   width: 100%;
   overflow-x: auto;
+  overflow-y: hidden;
   scrollbar-width: thin;
 }
 

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

package/src/helpers/documentScrollLock.js

@@ -0,0 +1,60 @@
+const SCROLL_LOCK_CLASS = 'asd20-document-scroll-locked'
+
+const activeLocks = new Set()
+let originalDocumentStyles = null
+
+export function acquireDocumentScrollLock() {
+  if (typeof document === 'undefined') return null
+
+  const docEl = document.documentElement
+  const body = document.body
+  if (!docEl || !body) return null
+
+  // A primitive token is preserved when stored in Vue reactive component data.
+  const lock = Symbol(SCROLL_LOCK_CLASS)
+
+  if (activeLocks.size === 0) {
+    originalDocumentStyles = {
+      bodyOverflow: body.style.overflow,
+      bodyOverscrollBehavior: body.style.overscrollBehavior,
+      docOverflow: docEl.style.overflow,
+      docOverscrollBehavior: docEl.style.overscrollBehavior,
+      bodyHadLockClass: body.classList.contains(SCROLL_LOCK_CLASS),
+      docHadLockClass: docEl.classList.contains(SCROLL_LOCK_CLASS),
+    }
+
+    body.classList.add(SCROLL_LOCK_CLASS)
+    docEl.classList.add(SCROLL_LOCK_CLASS)
+    body.style.overflow = 'hidden'
+    body.style.overscrollBehavior = 'none'
+    docEl.style.overflow = 'hidden'
+    docEl.style.overscrollBehavior = 'none'
+  }
+
+  activeLocks.add(lock)
+  return lock
+}
+
+export function releaseDocumentScrollLock(lock) {
+  if (!lock || !activeLocks.delete(lock) || activeLocks.size > 0) return
+  if (typeof document === 'undefined' || !originalDocumentStyles) return
+
+  const docEl = document.documentElement
+  const body = document.body
+  if (!docEl || !body) return
+
+  body.style.overflow = originalDocumentStyles.bodyOverflow
+  body.style.overscrollBehavior =
+    originalDocumentStyles.bodyOverscrollBehavior
+  docEl.style.overflow = originalDocumentStyles.docOverflow
+  docEl.style.overscrollBehavior = originalDocumentStyles.docOverscrollBehavior
+
+  if (!originalDocumentStyles.bodyHadLockClass) {
+    body.classList.remove(SCROLL_LOCK_CLASS)
+  }
+  if (!originalDocumentStyles.docHadLockClass) {
+    docEl.classList.remove(SCROLL_LOCK_CLASS)
+  }
+
+  originalDocumentStyles = null
+}