@asd20/ui-next 2.0.25 → 2.0.27

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.0.27](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.26...ui-next-v2.0.27) (2026-04-03)
+
+## [2.0.26](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.25...ui-next-v2.0.26) (2026-04-03)
+
 ## [2.0.25](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.24...ui-next-v2.0.25) (2026-04-03)
 
 

package/package.json

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

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

@@ -291,6 +291,7 @@ $input-reversed-text-color: var(--color__accent-t100);
   & :deep(.multiselect__input:focus),
   & :deep(.multiselect__single:focus) {
     border-color: var(--color__accent);
+    border-radius: 0.2rem;
     @include asd20-focus;
   }
   & :deep(.multiselect__tags) {
@@ -308,7 +309,8 @@ $input-reversed-text-color: var(--color__accent-t100);
     color: var(--website-page__background-color);
     font-weight: normal;
     background: var(--background-color);
-    border-radius: 0;
+    border-radius: 0.25rem;
+    padding-left: 0.25rem;
   }
   & :deep(.multiselect__tag-icon) {
     font-weight: bold;
@@ -368,6 +370,15 @@ $input-reversed-text-color: var(--color__accent-t100);
     background: var(--color__accent);
     color: var(--website-page__background-color);
   }
+  & :deep(.multiselect__option--highlight:after),
+  & :deep(.multiselect__option--selected:after),
+  & :deep(.multiselect__option--selected.multiselect__option--highlight:after) {
+    display: block;
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.2;
+  }
   & :deep(.multiselect__option),
   & :deep(.option__title) {
     color: var(--website-page__title-color);

package/src/components/utils/Multiselect.vue

@@ -33,6 +33,7 @@
       </div>
 
       <input
+        v-show="showSearchInput"
         :id="id"
         ref="searchInput"
         :value="search"
@@ -203,6 +204,9 @@ export default {
     showPlaceholder() {
       return !this.search && !this.selectedOptions.length && !this.isOpen
     },
+    showSearchInput() {
+      return this.isOpen || !!this.search
+    },
     placeholderText() {
       return this.placeholder || 'Select options'
     },
@@ -444,6 +448,7 @@ export default {
   flex-wrap: wrap;
   align-items: center;
   gap: 0.375rem;
+  min-height: 1.25rem;
   padding: 0.5rem 2.5rem 0.5rem 0.75rem;
   cursor: text;
 }
@@ -479,7 +484,7 @@ export default {
   width: auto;
   min-height: 1.25rem;
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 0.25rem;
   border: 0;
   outline: 0;
   background: transparent;