@asd20/ui-next 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.0.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.0...ui-next-v2.0.1) (2026-03-27)
+
+
+### Bug Fixes
+
+* harden vue 3 navigation focus refs ([ba0bf4f](https://github.com/academydistrict20/asd20-ui-next/commit/ba0bf4f3b67661b2a837a6257ded847d8a0aabe8))
+
 # [2.0.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v1.0.11...ui-next-v2.0.0) (2026-03-27)
 
 

package/README.md

@@ -1,6 +1,8 @@
 # @asd20/ui-next
 
-Vue component library migration workspace for ASD20.
+Vue 3 component library for ASD20 shared UI surfaces.
+
+The current published baseline is `@asd20/ui-next@2.0.0`. This release is Vue 3-only and ships the model-only shared input contract.
 
 ## Public Entry Points
 
@@ -22,7 +24,7 @@ npm run storybook
 npm run build
 ```
 
-## Package Artifact
+## Release Validation
 
 Build the staged publish artifact with:
 
@@ -30,28 +32,22 @@ Build the staged publish artifact with:
 npm run build:package
 ```
 
-This writes a curated source-based package to `dist/package` so release and pack validation do not publish Storybook files, snapshot tests, or the local app shell.
-
-The staged package also trims undocumented heavyweight `public/` media. Only explicit runtime public assets still referenced by package source are copied into `dist/package/public`.
-
-The staged package also trims `src/data` down to the small runtime subset still used by exported source. Story/demo payloads remain in the repo but are not staged for publish.
-
-Verify the publish path end to end with:
+Validate the publish shape end to end with:
 
 ```bash
 npm run verify:publish
 ```
 
-That command rebuilds `dist/package`, verifies the root and staged export contract, and runs `npm pack --dry-run` against the staged package with a temporary writable npm cache.
-
-It also validates the checked public API contract for package subpaths and public entrypoint named exports, so export-surface drift fails before release.
+That flow rebuilds `dist/package`, verifies the root and staged export contract, checks the public API surface, and runs `npm pack --dry-run` against the staged package.
 
-Verify the release path against a throwaway packed consumer app with:
+Validate the packed consumer install path with:
 
 ```bash
 npm run verify:release
 ```
 
-That command runs the publish verifier, packs the staged package into a tarball, installs that tarball into a temporary Vue 3 smoke app, and confirms the consumer build succeeds against the installed package shape.
+That flow packs the staged package into a tarball, installs it into a temporary Vue 3 smoke app, and confirms the consumer build succeeds against the installed package shape.
+
+## Migration Record
 
-The smoke app also compiles `v-model` usage against the exported input primitives, so Vue 3 two-way-binding regressions are part of the release check.
+The package is now release-ready and published, but the migration record is still kept under `docs/migration/` for downstream audit history, release decisions, and future cleanup planning.

package/package.json

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

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

@@ -108,11 +108,16 @@ export default {
       this.$emit('update:open', value)
       this.$emit('update:modelValue', value)
     },
+    focusRef(refName) {
+      const ref = this.$refs[refName]
+      const focusTarget = ref?.$el || ref
+      if (typeof focusTarget?.focus === 'function') {
+        focusTarget.focus()
+      }
+    },
     setFocus() {
       this.$nextTick(() => {
-        if (this.$refs.closeButton && this.$refs.closeButton.$el) {
-          this.$refs.closeButton.$el.focus()
-        }
+        this.focusRef('closeButton')
       })
     },
   },

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

@@ -67,19 +67,26 @@ export default {
     menuActive: function(val) {
       if (!val) {
         this.$nextTick(() => {
-          this.$refs.menuButton.$el.focus()
+          this.focusRef('menuButton')
         })
       }
     },
     searchActive: function(val) {
       if (!val) {
         this.$nextTick(() => {
-          this.$refs.searchButton.$el.focus()
+          this.focusRef('searchButton')
         })
       }
     },
   },
   methods: {
+    focusRef(refName) {
+      const ref = this.$refs[refName]
+      const focusTarget = ref?.$el || ref
+      if (typeof focusTarget?.focus === 'function') {
+        focusTarget.focus()
+      }
+    },
     toggleMenu(event) {
       this.$emit('update:menuActive', !this.menuActive)
       this.$emit('keyboardTriggeredLastAction', event.type === 'keyup')

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

@@ -123,7 +123,7 @@ export default {
     menuOpen: function (val) {
       this.$nextTick(() => {
         if (val) {
-          this.$refs.siteMenu.$el.focus()
+          this.focusSiteMenu()
         }
       })
     },
@@ -139,6 +139,16 @@ export default {
     window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    focusSiteMenu() {
+      const focusTarget =
+        this.$refs.siteMenu?.$refs?.menuContainer ||
+        this.$refs.siteMenu?.$el ||
+        this.$refs.siteMenu
+
+      if (typeof focusTarget?.focus === 'function') {
+        focusTarget.focus()
+      }
+    },
     onKeyboardToggleEvent(event) {
       this.keyboardToggleEvent = event
     },

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

@@ -1962,17 +1962,19 @@ export default {
     },
 
     focusQuery() {
-      if (this.$refs.query && this.$refs.query.$el) {
-        const input = this.$refs.query.$el.querySelector('input')
-        if (input) input.focus()
-      }
+      const input = this.getQueryInput()
+      if (input) input.focus()
     },
 
     blurQuery() {
-      if (this.$refs.query && this.$refs.query.$el) {
-        const input = this.$refs.query.$el.querySelector('input')
-        if (input) input.blur()
-      }
+      const input = this.getQueryInput()
+      if (input) input.blur()
+    },
+
+    getQueryInput() {
+      const queryRef = this.$refs.query?.$el || this.$refs.query
+      if (typeof queryRef?.querySelector !== 'function') return null
+      return queryRef.querySelector('input')
     },
 
     getResultsViewportRef(tabLabel = this.currentTab) {