@asd20/ui-next 2.13.2 → 2.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+# [2.14.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.3...ui-next-v2.14.0) (2026-07-28)
+
+
+### Features
+
+* remove vue cli; add vite ([3100424](https://github.com/academydistrict20/asd20-ui-next/commit/3100424afa8f8ada04567105869849ead94419d4))
+
+## [2.13.3](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.2...ui-next-v2.13.3) (2026-07-27)
+
 ## [2.13.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.13.1...ui-next-v2.13.2) (2026-07-27)
 
 

package/README.md

@@ -2,7 +2,7 @@
 
 Shared Vue 3 UI package for Academy District 20 websites and web apps.
 
-Current local version: `2.10.4`
+Current local version: `2.13.3`
 
 This package is the active shared presentation layer for the ASD20 web platform.
 It provides reusable components, public website templates, app-shell templates,
@@ -31,9 +31,9 @@ multi-repo contract, not as an app-local component folder.
 - Node `>=20`
 - npm `>=10`
 - Vue peer dependency `^3.0.0`
-- Package build system: Vue CLI / webpack
+- Demo and packed-consumer build system: Vite
 - Unit test runner: Vitest
-- Component development: Storybook
+- Component development: Storybook 8 with its retained webpack 5 builder
 
 ## Public Entry Points
 
@@ -118,9 +118,11 @@ Verify the packed consumer install path:
 npm run verify:release
 ```
 
-That command packs the staged package, installs it into a temporary Vue 3 smoke
-app, imports the public components/templates/icons/helpers/directives/styles,
-and confirms the consumer build succeeds.
+That command packs the staged package, installs it into a temporary Vue 3 Vite
+smoke app, imports the public
+components/templates/icons/helpers/directives/styles, verifies the package's
+complete Vite development optimizer input set from a clean cache, and confirms
+the production consumer build succeeds with Vite's default CSS minifier.
 
 ## Release
 

package/package.json

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

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

@@ -119,7 +119,7 @@ export default {
 @media (min-width: 1024px) {
   .asd20-organization-picker {
     .asd20-district-logo {
-      margin: space(1) auto space(1) 0;
+      margin: 0 auto 0 0;
       /* display: flex;*/
       --fill-one: var(--color__primary);
       --fill-two: var(--color__secondary-t30);

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

@@ -480,7 +480,7 @@ export default {
     }
     .asd20-multiselect-input {
       line-height: 1;
-      & :deep(.multiselect__tags) {
+      & .multiselect__tags {
         min-height: space(1.5);
         border-radius: var(--website-shape__radius-s);
       }

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

@@ -497,7 +497,7 @@ export default {
     }
     .asd20-multiselect-input {
       line-height: 1;
-      & :deep(.multiselect__tags) {
+      & .multiselect__tags {
         min-height: space(1.5);
         border-radius: var(--website-shape__radius-s);
       }

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

@@ -251,13 +251,13 @@ export default {
     .asd20-language-loader {
       order: 1;
     }
-    & :deep(.notification-group--status .notifications) {
+    & .notification-group--status .notifications {
       padding: 0.375rem;
       border-radius: 3rem;
       background: rgba(255, 255, 255, 0.95);
     }
 
-    & :deep(.notification-group--status) {
+    & .notification-group--status {
       margin-left: -0.5rem;
       background: rgba(255, 255, 255, 0.95);
       border-radius: 3rem;

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

@@ -212,7 +212,7 @@ export default {
     margin: 0 calc(var(--gutter) * -1);
     height: min-content;
 
-    & > :deep(*) {
+    & > * {
       flex: 1 1 var(--minimum-column-width);
       margin: var(--gutter);
       /* max-width: space(25);*/
@@ -259,7 +259,7 @@ export default {
       flex-direction: column;
       --minimum-column-width: 450px;
       --gutter: #{space(1)};
-      & :deep(.asd20-person-list) {
+      & .asd20-person-list {
         max-width: 50vw;
       }
     }

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

@@ -382,7 +382,7 @@ export default {
     .notification-group--floating {
       position: absolute;
       right: 3rem;
-      top: 3rem;
+      top: 1.5rem;
     }
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);

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

@@ -401,11 +401,11 @@ export default {
       .asd20-language-translation {
         order: 3;
         border-radius: 3rem;
-        & :deep(.asd20-select-input) {
+        & .asd20-select-input {
           color: currentColor;
           font-family: Ariel, Arial, Helvetica, sans-serif;
         }
-        & :deep(.asd20-select-input__field-wrapper) {
+        & .asd20-select-input__field-wrapper {
           padding: 0 0.5rem;
         }
       }
@@ -426,7 +426,7 @@ export default {
     display: none;
   }
 
-  & :deep(.widgets-section) {
+  & .widgets-section {
     background: var(--website-page__alternate-background-t70);
     background-image: var(--website-texture__default);
     background-position-y: top;

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

@@ -370,7 +370,7 @@ export default {
         border-radius: 3rem;
         margin: 0 0.05rem;
         height: 2.75rem;
-        & :deep(.asd20-select-input) {
+        & .asd20-select-input {
           padding: 0.375rem 0.375rem;
           color: currentColor;
           font-family: Arial, Helvetica, sans-serif;
@@ -389,7 +389,7 @@ export default {
     display: none;
   }
 
-  & :deep(.widgets-section) {
+  & .widgets-section {
     background: var(--website-page__alternate-background-t70);
     background-image: var(--website-texture__default);
     background-position-y: top;

package/src/design/_print.scss

@@ -136,7 +136,7 @@
       page-break-inside: avoid;
     }
 
-    a:after > img {
+    a:has(> img)::after {
       content: '';
     }