@asd20/ui-next 1.0.11 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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)
+
+
+* feat!: finalize Vue 3-only shared input contract ([8a4652e](https://github.com/academydistrict20/asd20-ui-next/commit/8a4652eaa09378b86a574951fa3996c000b12bb8))
+
+
+### BREAKING CHANGES
+
+* @asd20/ui-next now publishes a Vue 3-only peer baseline and the shared input primitives no longer support the legacy value/input API. Asd20CheckboxList is now modelValue-only and no longer emits update:checkedValues.
+
 ## [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)

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,8 +1,8 @@
 {
   "name": "@asd20/ui-next",
-  "version": "1.0.11",
+  "version": "2.0.1",
   "private": false,
-  "description": "ASD20 UI component library migration workspace.",
+  "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -45,6 +45,6 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "vue": "^2.6.14 || ^3.0.0"
+    "vue": "^3.0.0"
   }
 }

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

@@ -40,8 +40,7 @@ export default {
   name: 'Asd20CheckboxIcon',
   components: { Asd20Badge },
   props: {
-    value: { type: Boolean, default: false },
-    modelValue: { type: Boolean, default: undefined },
+    modelValue: { type: Boolean, default: false },
     label: { type: String, default: '' },
     description: { type: String, default: '' },
     count: { type: Number, default: 0 },
@@ -57,7 +56,7 @@ export default {
   },
   computed: {
     resolvedValue() {
-      return typeof this.modelValue === 'boolean' ? this.modelValue : this.value
+      return this.modelValue
     },
     checkboxAttrs() {
       return {
@@ -83,7 +82,6 @@ export default {
   methods: {
     toggle() {
       const nextValue = !this.resolvedValue
-      this.$emit('input', nextValue)
       this.$emit('update:modelValue', nextValue)
       this.toggleIcon = nextValue
     },

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

@@ -5,7 +5,6 @@
 <script>
 import _isFunction from 'lodash/isFunction'
 import { CountUp } from 'countup.js'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   __countup__: CountUp,
@@ -35,9 +34,9 @@ export default {
   mounted() {
     this.init()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.uninit()
-  }),
+  },
   methods: {
     init() {
       if (this.instance) {

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

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+import { defineAsyncComponent, markRaw } from 'vue'
 import camelCase from 'lodash/camelCase'
 import iconLoaders from '../icons/registry'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
@@ -40,64 +41,11 @@ function normalizeIconName(name) {
     .toLowerCase()
 }
 
-function resolveDefineAsyncComponent() {
-  let vueRuntime = {}
-
-  try {
-    vueRuntime = require('vue')
-  } catch {
-    return null
-  }
-
-  if (typeof vueRuntime.defineAsyncComponent === 'function') {
-    return vueRuntime.defineAsyncComponent
-  }
-
-  if (
-    vueRuntime.default &&
-    typeof vueRuntime.default.defineAsyncComponent === 'function'
-  ) {
-    return vueRuntime.default.defineAsyncComponent
-  }
-
-  return null
-}
-
-function resolveMarkRaw() {
-  let vueRuntime = {}
-
-  try {
-    vueRuntime = require('vue')
-  } catch {
-    return null
-  }
-
-  if (typeof vueRuntime.markRaw === 'function') {
-    return vueRuntime.markRaw
-  }
-
-  if (
-    vueRuntime.default &&
-    typeof vueRuntime.default.markRaw === 'function'
-  ) {
-    return vueRuntime.default.markRaw
-  }
-
-  return null
-}
-
 function createAsyncComponent(loader) {
-  const defineAsyncComponent = resolveDefineAsyncComponent()
-
-  if (typeof defineAsyncComponent === 'function') {
-    return defineAsyncComponent({
-      loader,
-      suspensible: false,
-    })
-  }
-
-  // Vue 2 accepts the loader function directly for async components.
-  return loader
+  return defineAsyncComponent({
+    loader,
+    suspensible: false,
+  })
 }
 
 export default {
@@ -174,11 +122,7 @@ export default {
         return
       }
 
-      const asyncComponent = createAsyncComponent(this.loader)
-      const markRaw = resolveMarkRaw()
-
-      this.iconTemplate =
-        typeof markRaw === 'function' ? markRaw(asyncComponent) : asyncComponent
+      this.iconTemplate = markRaw(createAsyncComponent(this.loader))
     },
   },
 }

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

@@ -89,6 +89,12 @@ export default {
   name: 'Asd20MultiselectInput',
   components: { Asd20Icon, Multiselect },
   mixins: [inputComponentMixin],
+  props: {
+    modelValue: {
+      type: [Array, Object, String, Number, Boolean],
+      default: () => [],
+    },
+  },
   data: () => ({
     taggedItems: [],
   }),
@@ -148,7 +154,6 @@ export default {
   },
   methods: {
     emitValue(value) {
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
     getItemKey(item) {

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

@@ -14,7 +14,6 @@
       <div class="asd20-select-input__select-wrapper">
         <select
           v-bind="mergedInputAttrs"
-          v-on="legacyListeners"
           @input="input"
         >
           <option
@@ -59,6 +58,9 @@ export default {
   name: 'Asd20SelectInput',
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
+  props: {
+    modelValue: { default: '' },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({

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

@@ -37,7 +37,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Viewport',
@@ -83,9 +82,9 @@ export default {
     this.checkForOverflow()
     window.addEventListener('resize', this.checkForOverflow)
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     window.removeEventListener('resize', this.checkForOverflow)
-  }),
+  },
   methods: {
     checkForOverflow() {
       const viewport = this.$refs.viewport

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

@@ -71,7 +71,6 @@ import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const FOCUSABLE_SELECTOR = [
   'a[href]',
@@ -125,9 +124,9 @@ export default {
   updated() {
     this.syncCollapsedContentInteractivity()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.restoreCollapsedContentInteractivity()
-  }),
+  },
   methods: {
     toggleOpen: function() {
       this.open = !this.open

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

@@ -292,6 +292,7 @@ export default {
     reversed: { type: Boolean, default: false },
     pinned: { type: Boolean, default: false },
     zoom: { type: Boolean, default: false },
+    separateImage: { type: Boolean, default: false },
     seperateImage: { type: Boolean, default: false },
     expandedHeader: { type: Boolean, default: false },
     expandedDescription: { type: Boolean, default: false },
@@ -316,6 +317,8 @@ export default {
       return truncate(strippedDescription, { length: 150, separator: /,? +/ })
     },
     classes() {
+      const hasSeparateImage = this.separateImage || this.seperateImage
+
       return {
         'asd20-card': true,
         'asd20-card--without-image': !this.image || this.noCoverImage,
@@ -323,7 +326,8 @@ export default {
         'asd20-card--selected': this.selected,
         'asd20-card--reversed': this.reversed,
         'asd20-card--zoom': this.zoom,
-        'asd20-card--seperate-image': this.seperateImage,
+        'asd20-card--separate-image': hasSeparateImage,
+        'asd20-card--seperate-image': hasSeparateImage,
         'asd20-card--pinned': this.pinned,
         'asd20-card--emphasized-date': this.emphasizedDate,
         'asd20-card--expanded-header': this.expandedHeader,
@@ -801,7 +805,8 @@ export default {
     }
   }
 
-  &--seperate-image:not(.asd20-card--without-image) {
+  &--seperate-image:not(.asd20-card--without-image),
+  &--separate-image:not(.asd20-card--without-image) {
     transform: rotate(0deg);
     justify-content: flex-start;
     background: var(--website-card__background-color);
@@ -835,14 +840,14 @@ export default {
     }
   }
 
-  &--with-image:not(.asd20-card--seperate-image),
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image),
   &--without-image.asd20-card--reversed {
     .asd20-card__title {
       color: var(--website-card__reverse-foreground-color);
     }
   }
 
-  &--with-image:not(.asd20-card--seperate-image) {
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image) {
     min-height: 30vh;
     .asd20-card__content {
       background: linear-gradient(
@@ -854,7 +859,7 @@ export default {
   }
 
   &--reversed,
-  &--with-image:not(.asd20-card--seperate-image) {
+  &--with-image:not(.asd20-card--seperate-image):not(.asd20-card--separate-image) {
     color: var(--website-card__reverse-foreground-color);
   }
   &--reversed {

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

@@ -10,9 +10,9 @@
         :label="option.text"
         :count="option.count"
         :description="option.description"
-        :value="resolvedCheckedValues.indexOf(option.value) > -1"
+        :model-value="resolvedCheckedValues.indexOf(option.value) > -1"
         :radio="radio"
-        @input="onInput($event, option)"
+        @update:modelValue="onInput($event, option)"
       />
       <slot
         name="item"
@@ -29,20 +29,14 @@ import Asd20Checkbox from '../../atoms/Asd20Checkbox'
 export default {
   name: 'Asd20CheckboxList',
   components: { Asd20Checkbox },
-  model: {
-    prop: 'checkedValues',
-  },
   props: {
-    checkedValues: { type: Array, default: () => [] },
-    modelValue: { type: Array, default: undefined },
+    modelValue: { type: Array, default: () => [] },
     options: { type: Array, default: () => [] },
     radio: { type: Boolean, default: false },
   },
   computed: {
     resolvedCheckedValues() {
-      return Array.isArray(this.modelValue)
-        ? this.modelValue
-        : this.checkedValues
+      return this.modelValue
     },
   },
   methods: {
@@ -57,9 +51,6 @@ export default {
         )
       }
       this.$emit('change', { option, checked })
-
-      this.$emit('input', modifiedCheckedValues, option, checked)
-      this.$emit('update:checkedValues', modifiedCheckedValues)
       this.$emit('update:modelValue', modifiedCheckedValues)
     },
   },

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

@@ -14,7 +14,6 @@
 
       <input
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -43,6 +42,9 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  props: {
+    modelValue: { default: null },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({
@@ -56,7 +58,6 @@ export default {
     input(event) {
       this.isDirty = true
       this.validate(event.target.value)
-      this.$emit('input', event.target.files)
       this.$emit('update:modelValue', event.target.files)
     },
   },

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/molecules/Asd20SearchField/index.vue

@@ -43,14 +43,13 @@ export default {
   name: 'Asd20SearchField',
   components: { Asd20Icon },
   props: {
-    value: { type: String, default: '' },
-    modelValue: { type: String, default: undefined },
+    modelValue: { type: String, default: '' },
     extra: { type: String, default: '' },
     idTag: { type: String, default: '' },
     large: { type: Boolean, default: false },
     placeholder: { type: String, default: 'Search' },
   },
-  emits: ['input', 'update:modelValue', 'click', 'focusin', 'keyup'],
+  emits: ['update:modelValue', 'click', 'focusin', 'keyup'],
   computed: {
     classes() {
       return {
@@ -58,13 +57,12 @@ export default {
       }
     },
     resolvedValue() {
-      return this.modelValue !== undefined ? this.modelValue : this.value
+      return this.modelValue
     },
   },
   methods: {
     input(event) {
       const value = event.target.value
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
   },

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

@@ -60,7 +60,6 @@
 
 <script>
 import Asd20Button from '../../atoms/Asd20Button'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 export default {
   name: 'Asd20Share',
 
@@ -79,14 +78,14 @@ export default {
       document.addEventListener('click', this.onDocumentClick)
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     if (typeof document !== 'undefined') {
       document.removeEventListener('click', this.onDocumentClick)
     }
     if (this.toastTimeoutId) {
       clearTimeout(this.toastTimeoutId)
     }
-  }),
+  },
 
   methods: {
     share() {

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

@@ -27,18 +27,17 @@ export default {
 
   props: {
     label: { type: String, default: '' },
-    value: { type: Number, default: 50 },
-    modelValue: { type: Number, default: undefined },
+    modelValue: { type: Number, default: 50 },
     progressColor: { type: String, default: '' },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
   },
-  emits: ['input', 'update:modelValue'],
+  emits: ['update:modelValue'],
 
   computed: {
     resolvedValue() {
-      return typeof this.modelValue === 'number' ? this.modelValue : this.value
+      return this.modelValue
     },
     percentage() {
       if (this.max === 0) return '0%'
@@ -48,7 +47,6 @@ export default {
   methods: {
     input(event) {
       const value = Number(event.target.value)
-      this.$emit('input', value)
       this.$emit('update:modelValue', value)
     },
   },

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

@@ -65,7 +65,6 @@
 </template>
 
 <script>
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 export default {
   name: 'Asd20Swipe',
@@ -140,9 +139,9 @@ export default {
   mounted() {
     this.init()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.clearAutoplayTimer()
-  }),
+  },
 
   methods: {
     clearAutoplayTimer() {

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

@@ -48,7 +48,6 @@ import {
 } from 'swiper/js/swiper.esm'
 import merge from 'lodash/merge'
 import 'swiper/css/swiper.css'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 // see http://idangero.us/swiper/api/#custom-build
 Swiper.use([A11y, Keyboard, Pagination, Navigation, Mousewheel])
@@ -85,9 +84,9 @@ export default {
   updated() {
     this.swiper.update()
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.destroySwiper()
-  }),
+  },
 
   methods: {
     destroySwiper() {

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

@@ -18,7 +18,6 @@
 
       <textarea
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -48,8 +47,7 @@ export default {
   mixins: [inputComponentMixin],
   inheritAttrs: false,
   props: {
-    value: { type: String, default: '' },
-    label: { type: String, default: '' },
+    modelValue: { type: String, default: '' },
   },
   computed: {
     mergedInputAttrs() {

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

@@ -14,7 +14,6 @@
 
       <input
         v-bind="mergedInputAttrs"
-        v-on="legacyListeners"
         @input="input"
       />
 
@@ -43,6 +42,9 @@ export default {
   components: { Asd20Icon },
   mixins: [inputComponentMixin],
   inheritAttrs: false,
+  props: {
+    modelValue: { type: String, default: '' },
+  },
   computed: {
     mergedInputAttrs() {
       return this.mergeInputAttrs({

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

@@ -103,7 +103,6 @@ import Asd20SearchField from '../../molecules/Asd20SearchField'
 import Asd20SiteSearch from '../Asd20SiteSearch'
 import Asd20Icon from '../../atoms/Asd20Icon'
 import Asd20Button from '../../atoms/Asd20Button'
-import createLegacyDestroyHooks from '../../../utils/createLegacyDestroyHooks'
 
 const SEARCH_SESSION_STORAGE_KEY = 'asd20-site-search-state-v1'
 const SEARCH_STATE_SYNC_EVENT = 'asd20-site-search:state-sync'
@@ -187,9 +186,9 @@ export default {
       window.addEventListener('focus', this.onWindowFocus, { passive: true })
     }
   },
-  ...createLegacyDestroyHooks(function() {
+  beforeUnmount() {
     this.teardownWindowBindings()
-  }),
+  },
   methods: {
     teardownWindowBindings() {
       if (typeof document !== 'undefined') {