@asd20/ui-next 1.0.9 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.0.11](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.10...ui-next-v1.0.11) (2026-03-26)
+
+## [1.0.10](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.9...ui-next-v1.0.10) (2026-03-26)
+
 ## [1.0.9](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.8...ui-next-v1.0.9) (2026-03-23)
 
 ## [1.0.8](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.7...ui-next-v1.0.8) (2026-03-23)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "private": false,
   "description": "ASD20 UI component library migration workspace.",
   "license": "MIT",

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

@@ -29,7 +29,6 @@ import { shouldOpenInNewWindow } from '../../../helpers/linkPolicy'
 
 export default {
   name: 'Asd20Button',
-  emits: ['click', 'mouseup', 'keyup', 'focusin'],
   components: { Asd20Badge, Asd20Icon },
   props: {
     label: { type: String, default: '' },
@@ -54,6 +53,7 @@ export default {
     disabled: { type: Boolean, default: false },
     iconAngle: { type: Number, default: 0 },
   },
+  emits: ['click', 'mouseup', 'keyup', 'focusin'],
   computed: {
     classes() {
       return {

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

@@ -49,11 +49,11 @@ import { format } from 'date-fns'
 
 export default {
   name: 'Asd20CalendarEventButton',
-  emits: ['click'],
   props: {
     event: { type: Object, default: null },
     large: { type: Boolean, default: false },
   },
+  emits: ['click'],
   computed: {
     classes() {
       const event = this.event || {}

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

@@ -18,7 +18,6 @@
 import Asd20Button from '../../atoms/Asd20Button'
 export default {
   name: 'Asd20ActionMenuItem',
-  emits: ['click', 'mouseup', 'keyup'],
   components: {
     Asd20Button,
   },
@@ -38,6 +37,7 @@ export default {
     active: { type: Boolean, default: false },
     // target: { type: [Boolean, String], default: false },
   },
+  emits: ['click', 'mouseup', 'keyup'],
   computed: {
     classes() {
       return [

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

@@ -260,7 +260,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20Card',
-  emits: ['click', 'keydown'],
 
   components: { Asd20Icon, Asd20Tag },
 
@@ -306,6 +305,7 @@ export default {
     dateLeft: { type: Boolean, default: false },
     cardType: { type: String, default: '' },
   },
+  emits: ['click', 'keydown'],
   computed: {
     truncatedDescription() {
       const strippedDescription = this.description

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

@@ -120,7 +120,6 @@ import {
 
 export default {
   name: 'Asd20ListItem',
-  emits: ['click'],
 
   components: {
     Asd20Icon,
@@ -152,6 +151,7 @@ export default {
     logoUrl: { type: String, default: '' },
     attribution: { type: Boolean, default: false },
   },
+  emits: ['click'],
 
   computed: {
     classes() {

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

@@ -41,7 +41,6 @@ import Asd20Icon from '../../atoms/Asd20Icon'
 
 export default {
   name: 'Asd20SearchField',
-  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
   components: { Asd20Icon },
   props: {
     value: { type: String, default: '' },
@@ -51,6 +50,7 @@ export default {
     large: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Search' },
   },
+  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
   computed: {
     classes() {
       return {

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

@@ -24,7 +24,6 @@
 <script>
 export default {
   name: 'Asd20SliderInput',
-  emits: ['input', 'update:modelValue'],
 
   props: {
     label: { type: String, default: '' },
@@ -35,6 +34,7 @@ export default {
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
   },
+  emits: ['input', 'update:modelValue'],
 
   computed: {
     resolvedValue() {

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

@@ -69,7 +69,6 @@ import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Swipe',
-  emits: ['change', 'click', 'keyup'],
   props: {
     loop: {
       type: Boolean,
@@ -104,6 +103,7 @@ export default {
       default: () => [],
     },
   },
+  emits: ['change', 'click', 'keyup'],
   data() {
     return {
       width: 0,

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

@@ -34,7 +34,6 @@ import Asd20Badge from '../../../components/atoms/Asd20Badge'
 
 export default {
   name: 'Asd20Tab',
-  emits: ['click'],
 
   components: {
     Asd20Badge,
@@ -49,6 +48,7 @@ export default {
     active: { type: Boolean, default: false },
     to: { type: [String, Object], default: '' },
   },
+  emits: ['click'],
 
   computed: {
     component() {

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

@@ -71,12 +71,12 @@
         />
         <asd20-button
           label="Submit Issue"
-        :disabled="!isValid || sending"
-        horizontal
-        centered
-        bordered
-        @click="sendAccessibilityIssue"
-      />
+          :disabled="!isValid || sending"
+          horizontal
+          centered
+          bordered
+          @click="sendAccessibilityIssue"
+        />
         <asd20-spinner
           v-if="sending"
           size="sm"

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

@@ -23,18 +23,6 @@ export default {
     zoomed: { type: Boolean, default: false },
     emptyNav: { type: Boolean, default: false },
   },
-
-  computed: {
-    hidden() {
-      return (this.$store && this.$store.state && this.$store.state.scrolling) || false
-    },
-    classes() {
-      return {
-        'action-menu__fab--hidden': this.hidden,
-        'action-menu__fab--open': this.open,
-      }
-    },
-  },
 }
 </script>
 

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

@@ -79,6 +79,15 @@
           :active="expanded"
           :inline="true"
           :show-contacts="false"
+          :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"
@@ -110,6 +119,15 @@ export default {
     Asd20Button,
   },
   props: {
+    pages: { type: Array, default: () => [] },
+    files: { type: Array, default: () => [] },
+    groups: { type: Array, default: () => [] },
+    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: () => ({}) },
     organizationOptions: { type: Array, default: () => [] },
     aiSearchFeedbackFormUrl: { type: String, default: '' },

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

@@ -90,13 +90,13 @@ import organizationSubtitle from '../../../helpers/organizationSubtitle'
 
 export default {
   name: 'Asd20CampusHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     Asd20DistrictLogo,
     Asd20OrganizationPicker,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     organization: { type: Object, default: null },
     organizationOptions: { type: Array, default: () => [] },

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

@@ -221,9 +221,9 @@ export default {
       padding: space(1);
       font-size: 1rem;
 
-      * {
-        align-items: center;
-      }
+      // * {
+      //   align-items: center;
+      // }
     }
 
     .description {

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

@@ -48,7 +48,7 @@
               v-if="languageCode"
               reversed
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
             <Asd20Share></Asd20Share>
             <asd20-button
@@ -199,7 +199,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20ImageHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     // Asd20DistrictLogo,
@@ -211,6 +210,7 @@ export default {
     Asd20FormattedDate,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     heading: { type: String, default: '' },
     lead: { type: String, default: '' },

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

@@ -199,28 +199,6 @@ export default {
     websiteLogoProps2: { type: Object, default: null },
   },
   computed: {
-    collapsed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return (
-        storeState.scrollPosition > window.innerHeight &&
-        storeState.scrollVerticalDirection !== -1
-      )
-    },
-    condensed() {
-      if (typeof window === 'undefined') return false
-      const storeState = this.$store && this.$store.state
-      if (!storeState) return false
-      return storeState.scrollPosition > window.innerHeight / 4
-    },
-    classes() {
-      return {
-        'page-header--fullscreen': this.fullscreen,
-        'page-header--collapsed': this.collapsed,
-        'page-header--condensed': this.condensed,
-      }
-    },
     administrator() {
       if (
         !this.organization ||

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

@@ -47,7 +47,7 @@
               v-if="languageCode"
               reversed
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
             <Asd20Share></Asd20Share>
             <asd20-button
@@ -191,7 +191,6 @@ import truncate from 'lodash/truncate'
 
 export default {
   name: 'Asd20PageHeader',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Button,
     // Asd20DistrictLogo,
@@ -203,6 +202,7 @@ export default {
     Asd20FormattedDate,
   },
   directives: { scrollTrack },
+  mixins: [responsiveBreakpointMixin],
   props: {
     heading: { type: String, default: '' },
     lead: { type: String, default: '' },

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

@@ -677,6 +677,11 @@ export default {
     inline: { type: Boolean, default: false },
     showTabBar: { type: Boolean, default: true },
     showContacts: { 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: () => ({ title: 'Academy District 20' }),
@@ -1218,7 +1223,61 @@ export default {
         : null
     },
 
+    getSearchLanguageCode() {
+      if (
+        typeof this.searchLanguageCode === 'string' &&
+        this.searchLanguageCode.trim()
+      ) {
+        return this.searchLanguageCode.trim()
+      }
+
+      const searchStore = this.getSearchStore()
+      const storeLanguageCode =
+        searchStore &&
+        searchStore.state &&
+        searchStore.state.search &&
+        searchStore.state.search.languageCode
+
+      return typeof storeLanguageCode === 'string' && storeLanguageCode.trim()
+        ? storeLanguageCode.trim()
+        : 'en'
+    },
+
+    setSearchResults({ pages, files, groups } = {}) {
+      if (pages !== undefined) this.resolvedPages = pages
+      if (files !== undefined) this.resolvedFiles = files
+      if (groups !== undefined) this.resolvedGroups = groups
+    },
+
+    async querySearchCollectionWithFallback({
+      handler,
+      storeAction,
+      payload,
+      target,
+    }) {
+      if (typeof handler === 'function') {
+        const result = await handler(payload)
+        if (Array.isArray(result)) {
+          this[target] = result
+          return result
+        }
+        return Array.isArray(this[target]) ? this[target] : []
+      }
+
+      const searchStore = this.getSearchStore()
+      if (searchStore) {
+        await searchStore.dispatch(storeAction, payload)
+        return Array.isArray(this[target]) ? this[target] : []
+      }
+
+      return Array.isArray(this[target]) ? this[target] : []
+    },
+
     async queryAiSiteWithFallback(payload) {
+      if (typeof this.queryAiSiteHandler === 'function') {
+        return this.queryAiSiteHandler(payload)
+      }
+
       const searchStore = this.getSearchStore()
       if (searchStore) {
         return searchStore.dispatch('search/queryAiSite', payload)
@@ -1565,15 +1624,7 @@ export default {
       const pages = Array.isArray(snapshot.pages) ? snapshot.pages : []
       const files = Array.isArray(snapshot.files) ? snapshot.files : []
       const groups = Array.isArray(snapshot.groups) ? snapshot.groups : []
-
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        await Promise.all([
-          searchStore.dispatch('search/setPages', pages),
-          searchStore.dispatch('search/setFiles', files),
-          searchStore.dispatch('search/setGroups', groups),
-        ])
-      }
+      this.setSearchResults({ pages, files, groups })
 
       if (!skipTabUpdate) {
         const preferredTab = SEARCH_ROUTE_TABS.has(targetState.tab)
@@ -2362,15 +2413,7 @@ export default {
         this.aiTranscript = []
         this.anchoredUserTurnId = null
       }
-
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        await Promise.all([
-          searchStore.dispatch('search/setPages', []),
-          searchStore.dispatch('search/setFiles', []),
-          searchStore.dispatch('search/setGroups', []),
-        ])
-      }
+      this.setSearchResults({ pages: [], files: [], groups: [] })
     },
 
     async clearInput() {
@@ -2399,55 +2442,58 @@ export default {
     },
 
     async searchPages(options = {}) {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-
-        this.searchingPages = true
-        await searchStore.dispatch('search/queryPages', searchInput)
-        this.searchingPages = false
-
-        if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
-          this.currentTab = 'Pages'
-          this.scrollResultsToTop()
-        }
+      const keepAnswersTab = options.keepAnswersTab || this.keywordsFromAi
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+
+      this.searchingPages = true
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryPagesHandler,
+        storeAction: 'search/queryPages',
+        payload: searchInput,
+        target: 'resolvedPages',
+      })
+      this.searchingPages = false
 
-        this.keywordsFromAi = false
+      if (this.keywords && this.keywords.trim() && !keepAnswersTab) {
+        this.currentTab = 'Pages'
+        this.scrollResultsToTop()
+      }
 
-        if (!keepAnswersTab) {
-          this.aiAnswer = null
-          this.aiSources = []
-          this.aiKeywordsDisplayAnswer = ''
-          this.aiKeywordsDisplayPages = ''
-        }
+      this.keywordsFromAi = false
 
-        this.persistSearchCacheSnapshot()
+      if (!keepAnswersTab) {
+        this.aiAnswer = null
+        this.aiSources = []
+        this.aiKeywordsDisplayAnswer = ''
+        this.aiKeywordsDisplayPages = ''
       }
+
+      this.persistSearchCacheSnapshot()
     },
 
     async searchFiles(options = {}) {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-        const owners = Array.isArray(options.owners) ? options.owners : []
-        if (owners.length > 0) searchInput.owners = owners
-
-        this.searchingFiles = true
-        await searchStore.dispatch('search/queryFiles', searchInput)
-        this.searchingFiles = false
-        this.persistSearchCacheSnapshot()
-      }
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+      const owners = Array.isArray(options.owners) ? options.owners : []
+      if (owners.length > 0) searchInput.owners = owners
+
+      this.searchingFiles = true
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryFilesHandler,
+        storeAction: 'search/queryFiles',
+        payload: searchInput,
+        target: 'resolvedFiles',
+      })
+      this.searchingFiles = false
+      this.persistSearchCacheSnapshot()
     },
 
     async searchFilesWithGroupOwners() {
-      if (!this.getSearchStore()) return
       const groupsPromise = this.searchGroups()
       await this.searchFiles()
       const ownerFilters = await groupsPromise
@@ -2457,28 +2503,28 @@ export default {
     },
 
     async searchGroups() {
-      const searchStore = this.getSearchStore()
-      if (searchStore) {
-        const searchInput = {
-          keywords: this.keywords,
-          question: this.searchQuestion || this.inputText,
-        }
-        await searchStore.dispatch('search/queryGroups', searchInput)
-        this.persistSearchCacheSnapshot()
-        return Array.from(
-          new Set(
-            (this.resolvedGroups || [])
-              .map(group => (group && group.title ? group.title.trim() : ''))
-              .filter(Boolean)
-          )
+      const searchInput = {
+        keywords: this.keywords,
+        question: this.searchQuestion || this.inputText,
+      }
+      await this.querySearchCollectionWithFallback({
+        handler: this.queryGroupsHandler,
+        storeAction: 'search/queryGroups',
+        payload: searchInput,
+        target: 'resolvedGroups',
+      })
+      this.persistSearchCacheSnapshot()
+      return Array.from(
+        new Set(
+          (this.resolvedGroups || [])
+            .map(group => (group && group.title ? group.title.trim() : ''))
+            .filter(Boolean)
         )
-      }
-      return []
+      )
     },
 
     async onSubmitInput() {
       if (this.searchingAi) return
-      const searchStore = this.getSearchStore()
       const text = (this.inputText || '').trim()
       if (!text) {
         this.suppressAutoRestore = true
@@ -2533,7 +2579,7 @@ export default {
             this.organization && this.organization.title
               ? this.organization.title
               : null,
-          languageCode: searchStore ? searchStore.state.search.languageCode : 'en',
+          languageCode: this.getSearchLanguageCode(),
           isFollowup: false,
           functionsEndpoint:
             this.$config && this.$config.functionsEndpoint
@@ -2590,7 +2636,6 @@ export default {
         typeof question === 'string' ? question.trim() : ''
       if (!normalizedQuestion) return
       if (this.searchingAi) return
-      const searchStore = this.getSearchStore()
       if (
         this.activeAiQuestionKey &&
         this.activeAiQuestionKey === normalizedQuestion
@@ -2788,7 +2833,7 @@ export default {
             this.organization && this.organization.title
               ? this.organization.title
               : null,
-          languageCode: searchStore ? searchStore.state.search.languageCode : 'en',
+          languageCode: this.getSearchLanguageCode(),
           isFollowup: isFollowUpQuestion,
           functionsEndpoint:
             this.$config && this.$config.functionsEndpoint

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

@@ -172,7 +172,6 @@ import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20AppTemplate',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20AppHeader,
     Asd20Button,
@@ -184,6 +183,7 @@ export default {
     Asd20NotificationGroup,
     MqLayout,
   },
+  mixins: [responsiveBreakpointMixin],
 
   props: {
     title: { type: String, default: '' },

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -34,7 +34,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -37,7 +37,7 @@
       :publish-date-time="publishDateTime"
       :categories="messageCategories"
       :language-code="languageCode"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -23,7 +23,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -23,7 +23,7 @@
       :language-code="languageCode"
       :images="firstMessage.images"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <template #top>
         <client-only>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -38,7 +38,7 @@
       :publish-date-time="parentPage ? '' : publishDateTime"
       :modified-date-time="parentPage ? '' : modifiedDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -72,7 +72,7 @@
               reversed
               no-label
               :language-code="languageCode"
-              v-on="$listeners"
+              @update:languageCode="$emit('update:languageCode', $event)"
             />
           </client-only>
 

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

@@ -55,8 +55,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :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"
               />
             </client-only>
 
@@ -88,7 +98,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
 
@@ -206,6 +216,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    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 },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   data: () => ({
     factoids: [

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

@@ -36,7 +36,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
       :language-code="languageCode"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <client-only>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -52,7 +52,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -37,7 +37,7 @@
       :breadcrumb-links="breadcrumbLinks"
       :publish-date-time="parentPage ? '' : publishDateTime"
       :categories="parentPage ? [] : messageCategories"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -97,8 +97,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :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"
               />
             </client-only>
             <client-only>
@@ -114,7 +124,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
             <!-- Floating Notifications -->
@@ -218,6 +228,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    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 },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
 
   data: () => ({

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

@@ -96,8 +96,18 @@
             <client-only>
               <Asd20AiSearch
                 class="ai-search"
+                :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"
               />
             </client-only>
 
@@ -115,7 +125,7 @@
                 reversed
                 no-label
                 :language-code="languageCode"
-                v-on="$listeners"
+                @update:languageCode="$emit('update:languageCode', $event)"
               />
             </client-only>
 
@@ -221,6 +231,16 @@ export default {
   mixins: [pageTemplateMixin],
   props: {
     languageCode: { type: String, default: 'en' },
+    searchPages: { type: Array, default: () => [] },
+    searchFiles: { type: Array, default: () => [] },
+    searchGroups: { type: Array, default: () => [] },
+    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 },
+    aiSearchFeedbackFormUrl: { type: String, default: '' },
   },
   computed: {
     blockEvent() {

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

@@ -112,7 +112,6 @@ import MqLayout from '../../utils/MqLayout'
 
 export default {
   name: 'Asd20SearchAppTemplate',
-  mixins: [responsiveBreakpointMixin],
   components: {
     Asd20Viewport,
     Asd20Modal,
@@ -122,6 +121,7 @@ export default {
     Asd20Button,
     MqLayout,
   },
+  mixins: [responsiveBreakpointMixin],
 
   props: {
     resultCount: { type: Number, default: 0 },

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

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

@@ -35,7 +35,7 @@
       :organization-options="organizationOptions"
       :language-code="languageCode"
       :breadcrumb-links="breadcrumbLinks"
-      v-on="$listeners"
+      @update:languageCode="$emit('update:languageCode', $event)"
     >
       <!-- Floating Notifications -->
       <template #top>

package/src/mixins/globalPropMixinFactory.js

@@ -1,37 +1,80 @@
 // pass a variable, the prop options as it would be defined in vue, and optionally the store module, which will become a module named for convenience in the store.
 
+function hyphenate(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+function resolvePropDefault(propOptions = {}) {
+  const defaultValue = propOptions.default
+  if (typeof defaultValue === 'function' && propOptions.type !== Function) {
+    return defaultValue()
+  }
+  return defaultValue
+}
+
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, hyphenate(propName))
+  )
+}
+
 export default function(variableName, propOptions, storeModuleName) {
   const pascalCaseName = variableName[0].toUpperCase() + variableName.slice(1)
   const resolvedName = `resolved${pascalCaseName}`
+  const localStateName = `local${pascalCaseName}`
   let mixin = { props: {}, computed: {}, methods: {} }
   mixin.props[variableName] = propOptions
+  mixin.data = function() {
+    return {
+      [localStateName]: resolvePropDefault(propOptions),
+    }
+  }
   // Returns a computed alias that resolves from the store when available,
   // otherwise falling back to the local prop value.
   mixin.computed[resolvedName] = {
     get() {
+      if (hasIncomingProp(this, variableName)) {
+        return this[variableName]
+      }
+
       try {
-        return storeModuleName
+        const storeValue = storeModuleName
           ? this.$store['state'][storeModuleName][variableName]
           : this.$store.state[variableName]
+        return storeValue !== undefined ? storeValue : this[localStateName]
       } catch {
-        return this[variableName]
+        return this[localStateName]
       }
     },
     // emit an update event and value and call method to set value in store.
     set(value) {
       this.$emit(`update:${variableName}`, value)
+
+      if (hasIncomingProp(this, variableName)) {
+        return
+      }
+
       try {
-        this[`set${pascalCaseName}`](value)
+        if (this[`set${pascalCaseName}`](value)) return
       } catch {
         // throw away
       }
+
+      this[localStateName] = value
     },
   }
   mixin.methods[`set${pascalCaseName}`] = function(value) {
+    if (!this.$store || typeof this.$store.dispatch !== 'function') return false
+
     this.$store.dispatch(
       `${storeModuleName ? storeModuleName + '/' : ''}set${pascalCaseName}`,
       value
     )
+    return true
   }
   return mixin
 }

package/src/mixins/hasLoaderMixin.js

@@ -1,7 +1,21 @@
+function hasIncomingProp(vm, propName) {
+  const rawProps = vm && vm.$ && vm.$.vnode && vm.$.vnode.props
+  if (!rawProps) return false
+
+  return (
+    Object.prototype.hasOwnProperty.call(rawProps, propName) ||
+    Object.prototype.hasOwnProperty.call(rawProps, 'is-loading')
+  )
+}
+
 export default function(variableName, storeModuleName) {
   let mixin = { props: {}, computed: {} }
   mixin.props.isLoading = { type: Boolean, default: false }
   mixin.computed[`_${variableName}`] = function() {
+    if (hasIncomingProp(this, 'isLoading')) {
+      return this.isLoading
+    }
+
     if (
       storeModuleName &&
       this.$store &&