@asd20/ui-next 2.10.11 → 2.11.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.11.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.11...ui-next-v2.11.0) (2026-05-26)
+
+
+### Features
+
+* allow ai search pill to pass search parameters to nav search; remove secondary ai search modal ([4bd6620](https://github.com/academydistrict20/asd20-ui-next/commit/4bd6620a72c75b26fdd6d9256152e35065e5c7d2))
+
 ## [2.10.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.10...ui-next-v2.10.11) (2026-05-20)
 
 

package/package.json

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

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

@@ -1,22 +1,12 @@
 <template>
-  <div
-    ref="container"
-    class="asd20-ai-search"
-    :class="{ 'asd20-ai-search--expanded': expanded }"
-    :style="rootStyle"
-  >
-    <div
-      class="asd20-ai-search__pill"
-      :class="{ 'asd20-ai-search__pill--hidden': expanded || isClosing }"
-    >
+  <div class="asd20-ai-search">
+    <div class="asd20-ai-search__pill">
       <div class="asd20-ai-search__question-row">
         <div class="asd20-ai-search__query">
           <asd20-search-field
             v-model="draftQuery"
             id-tag="-ai-home"
             :placeholder="placeholder"
-            @click="onPillInputInteraction"
-            @focusin="onPillInputInteraction"
             @keyup.enter.stop.prevent="onSubmit"
           />
           <button
@@ -39,81 +29,23 @@
           size="md"
           bordered
           reversed
-          :disabled="!canSubmitOrResume"
+          :disabled="!hasDraftQuery"
           @click.stop="onSubmit"
         />
       </div>
     </div>
-
-    <transition
-      name="ai-search-panel"
-      @before-leave="onBeforePanelLeave"
-      @after-leave="onAfterPanelLeave"
-    >
-      <div
-        v-show="expanded"
-        class="asd20-ai-search__panel"
-      >
-        <button
-          type="button"
-          class="asd20-ai-search__backdrop"
-          aria-label="Close AI search"
-          @click.stop="collapse"
-        />
-
-        <button
-          type="button"
-          class="asd20-ai-search__close"
-          aria-label="Close AI search"
-          @click.stop="collapse"
-        >
-          <asd20-icon
-            name="close"
-            size="sm"
-          />
-        </button>
-
-        <asd20-site-search
-          ref="siteSearch"
-          class="asd20-ai-search__site-search"
-          :active="expanded"
-          :inline="true"
-          :show-contacts="showContacts"
-          :pages="pages"
-          :files="files"
-          :groups="groups"
-          :include-district-results="includeDistrictResults"
-          :search-language-code="searchLanguageCode"
-          :query-pages-handler="queryPagesHandler"
-          :query-files-handler="queryFilesHandler"
-          :query-groups-handler="queryGroupsHandler"
-          :query-ai-site-handler="queryAiSiteHandler"
-          :organization="organization"
-          :organization-options="organizationOptions"
-          :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
-          @update:active="onSearchActiveUpdate"
-        />
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
 import Asd20SearchField from '../../molecules/Asd20SearchField'
-import Asd20SiteSearch from '../Asd20SiteSearch'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
 
-const SEARCH_SESSION_STORAGE_KEY = 'asd20-site-search-state-v1'
-const SEARCH_STATE_SYNC_EVENT = 'asd20-site-search:state-sync'
-const PHONE_MAX_WIDTH = 767
-const PANEL_WIDTH_RATIO = 0.8
-
 export default {
   name: 'Asd20AiSearch',
   components: {
     Asd20SearchField,
-    Asd20SiteSearch,
     Asd20Icon,
     Asd20Button,
   },
@@ -136,335 +68,26 @@ export default {
       default: 'What can we help you find?',
     },
   },
+  emits: ['submit-search'],
   data: () => ({
-    expanded: false,
     draftQuery: '',
-    screenRightOffset: 0,
-    navLeftOffset: 0,
-    panelWidth: 0,
-    panelRightFromContainer: 0,
-    panelOriginX: 0,
-    panelOriginY: 0,
-    isClosing: false,
-    resumeStateAvailable: false,
   }),
   computed: {
-    rootStyle() {
-      return {
-        '--asd20-ai-search-screen-right-offset': `${this.screenRightOffset}px`,
-        '--asd20-ai-search-nav-left-offset': `${this.navLeftOffset}px`,
-        '--asd20-ai-search-panel-width': `${this.panelWidth}px`,
-        '--asd20-ai-search-panel-right-from-container': `${this.panelRightFromContainer}px`,
-        '--asd20-ai-search-origin-x': `${this.panelOriginX}px`,
-        '--asd20-ai-search-origin-y': `${this.panelOriginY}px`,
-      }
-    },
-
     hasDraftQuery() {
       return !!(this.draftQuery || '').trim()
     },
-
-    canSubmitOrResume() {
-      return this.hasDraftQuery || this.resumeStateAvailable
-    },
-  },
-  mounted() {
-    this.updatePanelLayout()
-    this.updatePanelOrigin()
-    this.updateResumeStateAvailability()
-    if (typeof document !== 'undefined') {
-      document.addEventListener('mousedown', this.onDocumentPointerDown)
-      document.addEventListener('touchstart', this.onDocumentPointerDown, {
-        passive: true,
-      })
-    }
-    if (typeof window !== 'undefined') {
-      window.addEventListener('resize', this.onWindowResize, { passive: true })
-      window.addEventListener('orientationchange', this.onWindowResize, {
-        passive: true,
-      })
-      window.addEventListener(SEARCH_STATE_SYNC_EVENT, this.onSearchStateSync)
-      window.addEventListener('focus', this.onWindowFocus, { passive: true })
-    }
-  },
-  beforeUnmount() {
-    this.teardownWindowBindings()
   },
   methods: {
-    teardownWindowBindings() {
-      if (typeof document !== 'undefined') {
-        document.removeEventListener('mousedown', this.onDocumentPointerDown)
-        document.removeEventListener('touchstart', this.onDocumentPointerDown)
-      }
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', this.onWindowResize)
-        window.removeEventListener('orientationchange', this.onWindowResize)
-        window.removeEventListener(
-          SEARCH_STATE_SYNC_EVENT,
-          this.onSearchStateSync
-        )
-        window.removeEventListener('focus', this.onWindowFocus)
-      }
-    },
-    onWindowResize() {
-      if (typeof window !== 'undefined' && window.innerWidth < 1024) {
-        this.collapse()
-      }
-      this.updatePanelLayout()
-      if (!this.expanded) {
-        this.updatePanelOrigin()
-      }
-    },
-
-    updateScreenRightOffset() {
-      if (typeof window === 'undefined') return
-      if (!this.$refs.container || !this.$refs.container.getBoundingClientRect)
-        return
-      const rect = this.$refs.container.getBoundingClientRect()
-      this.screenRightOffset = Math.max(0, window.innerWidth - rect.right)
-    },
-
-    updateNavLeftOffset() {
-      if (typeof window === 'undefined' || typeof document === 'undefined') {
-        return
-      }
-
-      if (window.innerWidth < 1024) {
-        this.navLeftOffset = 0
-        return
-      }
-
-      const nav = document.getElementById('site-navigation')
-      if (!nav || !nav.getBoundingClientRect) {
-        this.navLeftOffset = 0
-        return
-      }
-
-      const rect = nav.getBoundingClientRect()
-      const rightEdge = Math.max(0, rect.right || 0)
-      this.navLeftOffset =
-        rightEdge > 0 && rightEdge < window.innerWidth * 0.5 ? rightEdge : 0
-    },
-
-    panelLayoutForViewport(containerRect) {
-      if (!containerRect || typeof window === 'undefined') {
-        return { width: 0, rightFromContainer: 0 }
-      }
-
-      const viewportWidth = window.innerWidth
-      const rightOffset = Math.max(0, window.innerWidth - containerRect.right)
-
-      if (viewportWidth <= PHONE_MAX_WIDTH) {
-        return {
-          width: viewportWidth,
-          rightFromContainer: -rightOffset,
-        }
-      }
-
-      const navRightEdge =
-        viewportWidth >= 1024 ? Math.max(0, this.navLeftOffset) : 0
-      const maxAvailableWidth = Math.max(0, viewportWidth - navRightEdge)
-      const targetWidth = viewportWidth * PANEL_WIDTH_RATIO
-      const width = Math.max(0, Math.min(targetWidth, maxAvailableWidth))
-      const desiredViewportRightGap = Math.max(
-        0,
-        (viewportWidth - navRightEdge - width) / 2
-      )
-
-      return {
-        width,
-        rightFromContainer: desiredViewportRightGap - rightOffset,
-      }
-    },
-
-    updatePanelLayout() {
-      this.updateScreenRightOffset()
-      this.updateNavLeftOffset()
-      if (!this.$refs.container || !this.$refs.container.getBoundingClientRect) {
-        return
-      }
-
-      const rect = this.$refs.container.getBoundingClientRect()
-      const { width, rightFromContainer } = this.panelLayoutForViewport(rect)
-      this.panelWidth = width
-      this.panelRightFromContainer = rightFromContainer
-    },
-
-    updatePanelOrigin() {
-      if (typeof window === 'undefined') return
-      if (!this.$refs.container || !this.$refs.container.getBoundingClientRect) {
-        return
-      }
-
-      const goButton = this.$el.querySelector('.asd20-ai-search__go-button')
-      if (!goButton || !goButton.getBoundingClientRect) return
-
-      const containerRect = this.$refs.container.getBoundingClientRect()
-      const goRect = goButton.getBoundingClientRect()
-      const { width, rightFromContainer } =
-        this.panelLayoutForViewport(containerRect)
-      const panelWidth = width
-      const panelLeft =
-        containerRect.right - rightFromContainer - panelWidth
-
-      const originX = goRect.left + goRect.width / 2 - panelLeft
-      const originY = goRect.top + goRect.height / 2 - containerRect.top
-
-      this.panelOriginX = Math.max(0, Math.min(panelWidth, originX))
-      this.panelOriginY = Math.max(0, originY)
-    },
-
-    onDocumentPointerDown(event) {
-      if (!this.expanded) return
-      if (!this.$refs.container) return
-      if (!this.$refs.container.contains(event.target)) {
-        this.collapse()
-      }
-    },
-
     onSubmit() {
       const text = (this.draftQuery || '').trim()
-      this.expand({ submit: !!text })
-    },
-
-    onWindowFocus() {
-      this.updateResumeStateAvailability()
-    },
-
-    onSearchStateSync() {
-      this.updateResumeStateAvailability()
-    },
-
-    getSearchSessionStorage() {
-      if (typeof window === 'undefined' || !window.sessionStorage) return null
-      try {
-        return window.sessionStorage
-      } catch (error) {
-        return null
-      }
-    },
-
-    hasPersistedSearchState() {
-      const storage = this.getSearchSessionStorage()
-      if (!storage) return false
-
-      try {
-        const raw = storage.getItem(SEARCH_SESSION_STORAGE_KEY)
-        if (!raw) return false
-        const parsed = JSON.parse(raw)
-        if (!parsed || typeof parsed !== 'object') return false
-        const state = parsed.state && typeof parsed.state === 'object'
-          ? parsed.state
-          : parsed
-        const text = typeof state.text === 'string' ? state.text.trim() : ''
-        return !!text
-      } catch (error) {
-        return false
-      }
-    },
-
-    hasExistingConversation() {
-      const siteSearch = this.$refs.siteSearch
-      if (!siteSearch) return false
-      if (Array.isArray(siteSearch.aiTranscript) && siteSearch.aiTranscript.length) {
-        return true
-      }
-      return !!siteSearch.hasAssistantTurns
-    },
-
-    hasExistingResults() {
-      const siteSearch = this.$refs.siteSearch
-      if (!siteSearch) return false
-      const pages = Array.isArray(siteSearch.currentPages)
-        ? siteSearch.currentPages
-        : siteSearch.resolvedPages
-      const files = Array.isArray(siteSearch.currentFiles)
-        ? siteSearch.currentFiles
-        : siteSearch.resolvedFiles
-      const groups = Array.isArray(siteSearch.currentGroups)
-        ? siteSearch.currentGroups
-        : siteSearch.resolvedGroups
-      if (
-        Array.isArray(pages) &&
-        pages.length
-      ) {
-        return true
-      }
-      if (
-        Array.isArray(files) &&
-        files.length
-      ) {
-        return true
-      }
-      if (
-        Array.isArray(groups) &&
-        groups.length
-      ) {
-        return true
-      }
-      return false
-    },
-
-    hasResumeState() {
-      return (
-        this.hasExistingConversation() ||
-        this.hasExistingResults() ||
-        this.hasPersistedSearchState()
-      )
-    },
-
-    updateResumeStateAvailability() {
-      this.resumeStateAvailable = this.hasResumeState()
-    },
-
-    onPillInputInteraction() {
-      if (this.expanded || this.isClosing) return
-      this.updateResumeStateAvailability()
-      if (!this.hasResumeState()) return
-      this.expand({ submit: false })
-    },
-
-    onSearchActiveUpdate(val) {
-      if (!val) this.collapse()
-    },
-
-    collapse() {
-      if (!this.expanded) return
-      this.expanded = false
-      this.draftQuery = ''
-      this.updateResumeStateAvailability()
-    },
-
-    onBeforePanelLeave() {
-      this.isClosing = true
-    },
-
-    onAfterPanelLeave() {
-      this.isClosing = false
-    },
-
-    expand(options = {}) {
-      const shouldSubmit = !!options.submit
-      this.isClosing = false
-      this.updatePanelLayout()
-      this.updatePanelOrigin()
-      this.expanded = true
+      if (!text) return
 
-      this.$nextTick(() => {
-        const siteSearch = this.$refs.siteSearch
-        if (!siteSearch) return
-
-        const text = this.draftQuery
-        if (typeof siteSearch.applyInputText === 'function') {
-          siteSearch.applyInputText(text, { submit: shouldSubmit })
-        }
-
-        if (shouldSubmit) {
-          this.draftQuery = ''
-        }
-
-        this.updateResumeStateAvailability()
+      this.$emit('submit-search', {
+        text,
+        submit: true,
+        requestedAt: Date.now(),
       })
+      this.draftQuery = ''
     },
   },
 }
@@ -526,16 +149,23 @@ export default {
     }
   }
 
-  &__pill--hidden {
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
   &__pill:focus-within {
     box-shadow: 0 0 0 2px var(--color__accent-t70);
   }
 
+  &__question-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__query {
+    position: relative;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding-left: 0.5rem;
+  }
+
   &__icon-button {
     position: absolute;
     top: 50%;
@@ -552,19 +182,6 @@ export default {
     color: var(--color__primary-t50);
   }
 
-  &__question-row {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  &__query {
-    position: relative;
-    flex: 1 1 auto;
-    min-width: 0;
-    padding-left: 0.5rem;
-  }
-
   &__go-button {
     flex: 0 0 auto;
     border-radius: 3rem;
@@ -584,133 +201,22 @@ export default {
     line-height: 1;
   }
 
-  &__icon-button:focus,
-  &__close:focus {
+  &__icon-button:focus {
     outline: none;
     box-shadow: 0 0 0 2px var(--color__accent-t70);
     border-radius: 999px;
   }
-
-  &__panel {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 8;
-    min-height: 75vh;
-    height: 75vh;
-  }
-
-  &__backdrop {
-    position: fixed;
-    inset: 0;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    background: var(--color__primary);
-    opacity: 0.45;
-    z-index: 7;
-    cursor: pointer;
-  }
-
-  &__site-search {
-    position: relative;
-    z-index: 8;
-    height: 100%;
-
-    :deep(.asd20-site-search__ai-disclaimer-text) {
-      padding-right: 3rem;
-    }
-  }
-
-  &__close {
-    position: absolute;
-    top: space(0.625);
-    right: space(0.625);
-    z-index: 9;
-    width: 1.75rem;
-    height: 1.75rem;
-    border-radius: 999px;
-    border: 1px solid var(--color__tertiary);
-    background: transparent;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-.ai-search-panel-enter-active {
-  transition: opacity 380ms ease;
-}
-
-.ai-search-panel-leave-active {
-  transition: opacity 440ms ease;
 }
 
-.ai-search-panel-enter,
-.ai-search-panel-enter-from,
-.ai-search-panel-leave-to {
-  opacity: 0;
-}
-
-.ai-search-panel-enter-active .asd20-ai-search__site-search,
-.ai-search-panel-enter-active .asd20-ai-search__close {
-  transition:
-    transform 520ms cubic-bezier(0.22, 0.8, 0.22, 1),
-    opacity 380ms ease;
-  transform-origin: var(--asd20-ai-search-origin-x, calc(100% - 2.5rem))
-    var(--asd20-ai-search-origin-y, 1.375rem);
-  will-change: transform, opacity;
-}
-
-.ai-search-panel-leave-active .asd20-ai-search__site-search,
-.ai-search-panel-leave-active .asd20-ai-search__close {
-  transition:
-    transform 460ms cubic-bezier(0.4, 0, 1, 1),
-    opacity 440ms ease;
-  transform-origin: var(--asd20-ai-search-origin-x, calc(100% - 2.5rem))
-    var(--asd20-ai-search-origin-y, 1.375rem);
-  will-change: transform, opacity;
-}
-
-.ai-search-panel-enter .asd20-ai-search__site-search,
-.ai-search-panel-enter-from .asd20-ai-search__site-search,
-.ai-search-panel-leave-to .asd20-ai-search__site-search,
-.ai-search-panel-enter .asd20-ai-search__close,
-.ai-search-panel-enter-from .asd20-ai-search__close,
-.ai-search-panel-leave-to .asd20-ai-search__close {
-  transform: scale3d(0.16, 0.1, 1);
-  opacity: 0;
-}
-
-.ai-search-panel-enter-active .asd20-ai-search__backdrop,
-.ai-search-panel-leave-active .asd20-ai-search__backdrop {
-  transition: opacity 440ms ease;
-}
-
-.ai-search-panel-enter .asd20-ai-search__backdrop,
-.ai-search-panel-enter-from .asd20-ai-search__backdrop,
-.ai-search-panel-leave-to .asd20-ai-search__backdrop {
-  opacity: 0;
-}
-
-@media (max-width: 1023px) {
+@media (max-width: 479px) {
   .asd20-ai-search {
-    display: none;
+    min-width: 0;
   }
 }
 
-@media (min-width: 667px) {
+@media (max-width: 1023px) {
   .asd20-ai-search {
-    &__panel {
-      width: var(
-        --asd20-ai-search-panel-width,
-        calc(100vw - (2 * var(--asd20-ai-search-screen-right-offset, 0px)))
-      );
-      left: auto;
-      right: var(--asd20-ai-search-panel-right-from-container, 0px);
-    }
+    display: none;
   }
 }
 </style>

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

@@ -65,9 +65,21 @@
     <transition name="slide">
       <asd20-site-search
         v-show="searchOpen"
+        ref="siteSearch"
         :active="searchOpen"
+        :show-contacts="showContacts"
+        :pages="pages"
+        :files="files"
+        :groups="groups"
+        :include-district-results="includeDistrictResults"
+        :search-language-code="searchLanguageCode"
+        :query-pages-handler="queryPagesHandler"
+        :query-files-handler="queryFilesHandler"
+        :query-groups-handler="queryGroupsHandler"
+        :query-ai-site-handler="queryAiSiteHandler"
         :organization="organization"
         :organization-options="organizationOptions"
+        :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
         @update:active="$emit('update:searchOpen', $event)"
       >
       </asd20-site-search>
@@ -102,14 +114,27 @@ export default {
     condensed: { type: Boolean, default: false },
     menuOpen: { type: Boolean, default: false },
     searchOpen: { type: Boolean, default: false },
+    searchRequest: { type: Object, default: null },
+    pages: { type: Array, default: () => [] },
+    files: { type: Array, default: () => [] },
+    groups: { type: Array, default: () => [] },
+    showContacts: { type: Boolean, default: true },
+    includeDistrictResults: { type: Boolean, default: true },
+    searchLanguageCode: { type: String, default: null },
+    queryPagesHandler: { type: Function, default: null },
+    queryFilesHandler: { type: Function, default: null },
+    queryGroupsHandler: { type: Function, default: null },
+    queryAiSiteHandler: { type: Function, default: null },
     organization: { type: Object, default: null },
     organizationOptions: { type: Array, default: () => [] },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   data: () => ({
     keyboardTriggeredLastAction: false,
     desktop: false,
     isLoaded: false,
     zoomed: false,
+    pendingSearchRequest: null,
   }),
   computed: {
     emptyNav() {
@@ -124,6 +149,14 @@ export default {
         }
       })
     },
+    searchOpen: function (val) {
+      if (val) {
+        this.$nextTick(() => this.applyPendingSearchRequest())
+      }
+    },
+    searchRequest: function (request) {
+      this.queueSearchRequest(request)
+    },
   },
   mounted() {
     this.desktop = window.innerWidth >= 1024
@@ -153,6 +186,45 @@ export default {
       this.desktop = window.innerWidth >= 1024
       this.zoomed = window.innerHeight <= 650
     },
+    normalizeSearchRequest(request) {
+      if (!request || typeof request !== 'object') return null
+      const text = typeof request.text === 'string' ? request.text.trim() : ''
+      if (!text) return null
+
+      return {
+        text,
+        submit: request.submit !== false,
+      }
+    },
+    queueSearchRequest(request) {
+      const nextRequest = this.normalizeSearchRequest(request)
+      if (!nextRequest) return
+
+      this.pendingSearchRequest = nextRequest
+      const siteSearch = this.$refs.siteSearch
+      if (typeof siteSearch?.prepareProgrammaticInput === 'function') {
+        siteSearch.prepareProgrammaticInput()
+      }
+
+      if (this.menuOpen) {
+        this.$emit('update:menuOpen', false)
+      }
+      if (!this.searchOpen) {
+        this.$emit('update:searchOpen', true)
+      }
+
+      this.$nextTick(() => this.applyPendingSearchRequest())
+    },
+    applyPendingSearchRequest() {
+      if (!this.searchOpen || !this.pendingSearchRequest) return
+
+      const siteSearch = this.$refs.siteSearch
+      if (typeof siteSearch?.applyInputText !== 'function') return
+
+      const request = this.pendingSearchRequest
+      this.pendingSearchRequest = null
+      siteSearch.applyInputText(request.text, { submit: request.submit })
+    },
     toggleSearch() {
       this.$emit('update:searchOpen', !this.searchOpen)
     },

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

@@ -1934,9 +1934,14 @@ export default {
       }
     },
 
+    prepareProgrammaticInput() {
+      this.suppressAutoRestore = true
+    },
+
     applyInputText(text, options = {}) {
       const submit = !!options.submit
       const nextText = typeof text === 'string' ? text : ''
+      this.prepareProgrammaticInput()
       this.suppressInputClearReset = true
       this.inputText = nextText
 
@@ -1946,6 +1951,9 @@ export default {
         if (submit && nextText.trim()) {
           await this.onSubmitInput()
         }
+        this.$nextTick(() => {
+          this.suppressAutoRestore = false
+        })
       })
     },
 

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

@@ -9,8 +9,19 @@
       :action-items="actionItems"
       :menu-open="menuOpen"
       :search-open="searchOpen"
+      :search-request="homeSearchRequest"
+      :pages="searchPages"
+      :files="searchFiles"
+      :groups="searchGroups"
+      :include-district-results="includeDistrictResults"
+      :search-language-code="searchLanguageCode"
+      :query-pages-handler="queryPagesHandler"
+      :query-files-handler="queryFilesHandler"
+      :query-groups-handler="queryGroupsHandler"
+      :query-ai-site-handler="queryAiSiteHandler"
       :organization="organization"
       :organization-options="organizationOptions"
+      :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
       @update:menuOpen="$emit('update:menuOpen', $event)"
       @update:searchOpen="$emit('update:searchOpen', $event)"
     >
@@ -63,6 +74,7 @@
                 :organization="organization"
                 :organization-options="organizationOptions"
                 :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
+                @submit-search="onHomeSearchSubmit"
               />
             </client-only>
 
@@ -218,6 +230,7 @@ export default {
     aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   data: () => ({
+    homeSearchRequest: null,
     factoids: [
       {
         start: 0,
@@ -249,6 +262,14 @@ export default {
       },
     ],
   }),
+  methods: {
+    onHomeSearchSubmit(request) {
+      this.homeSearchRequest = {
+        ...request,
+        requestedAt: Date.now(),
+      }
+    },
+  },
 }
 </script>
 

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

@@ -9,8 +9,19 @@
       :action-items="actionItems"
       :menu-open="menuOpen"
       :search-open="searchOpen"
+      :search-request="homeSearchRequest"
+      :pages="searchPages"
+      :files="searchFiles"
+      :groups="searchGroups"
+      :include-district-results="includeDistrictResults"
+      :search-language-code="searchLanguageCode"
+      :query-pages-handler="queryPagesHandler"
+      :query-files-handler="queryFilesHandler"
+      :query-groups-handler="queryGroupsHandler"
+      :query-ai-site-handler="queryAiSiteHandler"
       :organization-options="organizationOptions"
       :organization="organization"
+      :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
       @update:menuOpen="$emit('update:menuOpen', $event)"
       @update:searchOpen="$emit('update:searchOpen', $event)"
     />
@@ -107,6 +118,7 @@
                 :organization="organization"
                 :organization-options="organizationOptions"
                 :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
+                @submit-search="onHomeSearchSubmit"
               />
             </client-only>
             <Asd20BlockSchedule
@@ -233,6 +245,7 @@ export default {
 
   data: () => ({
     showLogo: true,
+    homeSearchRequest: null,
   }),
 
   computed: {
@@ -316,6 +329,12 @@ export default {
         download: event.currentTarget?.hasAttribute?.('download'),
       })
     },
+    onHomeSearchSubmit(request) {
+      this.homeSearchRequest = {
+        ...request,
+        requestedAt: Date.now(),
+      }
+    },
   },
 }
 </script>

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

@@ -9,8 +9,19 @@
       :action-items="actionItems"
       :menu-open="menuOpen"
       :search-open="searchOpen"
+      :search-request="homeSearchRequest"
+      :pages="searchPages"
+      :files="searchFiles"
+      :groups="searchGroups"
+      :include-district-results="includeDistrictResults"
+      :search-language-code="searchLanguageCode"
+      :query-pages-handler="queryPagesHandler"
+      :query-files-handler="queryFilesHandler"
+      :query-groups-handler="queryGroupsHandler"
+      :query-ai-site-handler="queryAiSiteHandler"
       :organization="organization"
       :organization-options="organizationOptions"
+      :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
       @update:menuOpen="$emit('update:menuOpen', $event)"
       @update:searchOpen="$emit('update:searchOpen', $event)"
     />
@@ -108,6 +119,7 @@
                 :organization="organization"
                 :organization-options="organizationOptions"
                 :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
+                @submit-search="onHomeSearchSubmit"
               />
             </client-only>
 
@@ -235,6 +247,9 @@ export default {
     queryAiSiteHandler: { type: Function, default: null },
     aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
+  data: () => ({
+    homeSearchRequest: null,
+  }),
   computed: {
     blockEvent() {
       if (!this.events || this.events.length === 0) return null
@@ -269,6 +284,12 @@ export default {
     }
   },
   methods: {
+    onHomeSearchSubmit(request) {
+      this.homeSearchRequest = {
+        ...request,
+        requestedAt: Date.now(),
+      }
+    },
     onLogoClick(event, link) {
       navigateInternalHref(this, event, link, {
         target: event.currentTarget?.getAttribute?.('target'),