@asd20/ui-next 2.21.5 → 2.21.7

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [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)
+
+
+### Bug Fixes
+
+* improve relevance of related pages in search results ([ecbcad7](https://github.com/academydistrict20/asd20-ui-next/commit/ecbcad7f5df39273dc6a5b1299b1c94d766d6af3))
+
 ## [2.21.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.21.4...ui-next-v2.21.5) (2026-08-21)
 
 

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.5",
+  "version": "2.21.7",
   "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/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
     },
 
@@ -2441,10 +2440,19 @@ export default {
       return turn.relatedPages
     },
 
-    buildAiRelatedPagesPreview(items = this.pageListItems) {
-      if (!Array.isArray(items) || !items.length) return []
+    buildAiRelatedPagesPreview(items = null) {
+      const previewItems = Array.isArray(items)
+        ? items
+        : Array.isArray(this.currentPages)
+        ? this.currentPages.map(page => ({
+            page,
+            label: page && page.title ? page.title : '',
+            link: page && page.url ? page.url : '',
+          }))
+        : []
+      if (!previewItems.length) return []
 
-      return items
+      return previewItems
         .map((item, index) => {
           const page = item && item.page ? item.page : {}
           if (page.isNoResultsFallback) return null
@@ -2491,12 +2499,13 @@ export default {
     },
 
     completeAiTurnRelatedPages(turnId, runId) {
-      if (!turnId || !this.isCurrentSearchRun(runId)) return false
+      if (!turnId || !this.isCurrentSearchRun(runId)) return []
+      const relatedPages = this.buildAiRelatedPagesPreview()
       this.updateAiTranscriptTurn(turnId, {
-        relatedPages: this.buildAiRelatedPagesPreview(),
+        relatedPages,
         relatedPagesStatus: 'complete',
       })
-      return true
+      return relatedPages
     },
 
     setAiTurnSearchLogId(turnId, searchLogId) {
@@ -2691,6 +2700,7 @@ export default {
         keywords: this.keywords,
         question: this.searchQuestion || this.inputText,
       }
+      if (options.purpose) searchInput.purpose = options.purpose
 
       this.searchingPages = true
       try {
@@ -3116,12 +3126,16 @@ export default {
           this.keywordsFromAi = true
           this.skipKeywordWatcher = true
           this.keywords = keywordsToUse
-          await this.searchPages({ keepAnswersTab: true, runId })
+          await this.searchPages({
+            keepAnswersTab: true,
+            purpose: 'ai-related-pages',
+            runId,
+          })
           if (!this.isCurrentSearchRun(runId)) return
-          this.completeAiTurnRelatedPages(assistantTurnId, runId)
-          relatedPagesForAnalytics = this.getAnalyticsPages()
-            .slice(0, 10)
-            .map(p => ({ title: p.title || '', url: p.url || '' }))
+          relatedPagesForAnalytics = this.completeAiTurnRelatedPages(
+            assistantTurnId,
+            runId
+          ).map(p => ({ title: p.title || '', url: p.url || '' }))
           this.searchFilesWithGroupOwners({ runId })
         }
 
@@ -3169,29 +3183,12 @@ export default {
         }
 
         // Log AI search analytics
-        const logPagesFromPages =
-          relatedPagesForAnalytics.length > 0
-            ? relatedPagesForAnalytics
-            : this.getAnalyticsPages()
-                .slice(0, 10)
-                .map(p => ({ title: p.title || '', url: p.url || '' }))
-        const logPagesFromSources = (
-          Array.isArray(this.aiSources) ? this.aiSources : []
-        )
-          .slice(0, 10)
-          .map(source => ({
-            title: source && source.title ? source.title : '',
-            url: source && source.url ? source.url : '',
-          }))
-          .filter(source => source.url)
-        const logPages =
-          logPagesFromPages.length > 0 ? logPagesFromPages : logPagesFromSources
         const logPromise = logSearchAnalytics({
           question: normalizedQuestion,
           searchType: 'ai_chat',
           keywords: this.keywords || '',
           hadResults: !!this.aiAnswer,
-          relatedPages: logPages,
+          relatedPages: relatedPagesForAnalytics,
           organizationId:
             this.organization && this.organization.id
               ? this.organization.id
@@ -3603,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;
@@ -3854,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;
@@ -4190,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/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
+}