@asd20/ui-next 2.10.4 → 2.10.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [2.10.6](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.5...ui-next-v2.10.6) (2026-05-15)
+
+## [2.10.5](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.4...ui-next-v2.10.5) (2026-05-15)
+
 ## [2.10.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.10.3...ui-next-v2.10.4) (2026-05-14)
 
 

package/README.md

@@ -1,53 +1,145 @@
 # @asd20/ui-next
 
-Vue 3 component library for ASD20 shared UI surfaces.
+Shared Vue 3 UI package for Academy District 20 websites and web apps.
 
-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.
+Current local version: `2.10.4`
+
+This package is the active shared presentation layer for the ASD20 web platform.
+It provides reusable components, public website templates, app-shell templates,
+icons, design tokens, Sass helpers, assets, directives, and helper functions
+used by the Nuxt website, standalone apps, and selected CommCenter preview
+surfaces.
+
+## Platform Role
+
+This repo owns the packaged UI contract for:
+
+- public website templates consumed by `asd20-website`
+- app templates and components consumed by calendar, directory, school
+  directory, and file directory apps
+- selected CommCenter preview components and icon/template imports
+- global design tokens and Sass helpers shared across consumers
+- icon metadata and SVG component exports
+- helper functions for event/message/page/file/people mapping, search calls,
+  organization labels, link handling, cookies, email, and analytics feedback
+
+The package is published to npm as `@asd20/ui-next`. It should be treated as a
+multi-repo contract, not as an app-local component folder.
+
+## Runtime Contract
+
+- Node `>=20`
+- npm `>=10`
+- Vue peer dependency `^3.0.0`
+- Package build system: Vue CLI / webpack
+- Unit test runner: Vitest
+- Component development: Storybook
 
 ## Public Entry Points
 
+Supported import paths are defined in `package.json` and guarded by
+`scripts/public-api-contract.js`:
+
 - `@asd20/ui-next`
 - `@asd20/ui-next/components`
 - `@asd20/ui-next/templates`
+- `@asd20/ui-next/templates/*`
 - `@asd20/ui-next/icons`
 - `@asd20/ui-next/helpers`
 - `@asd20/ui-next/directives`
+- `@asd20/ui-next/install`
 - `@asd20/ui-next/styles.css`
 - `@asd20/ui-next/design/*`
 - `@asd20/ui-next/assets/*`
-
-## Development
-
-```bash
+- `@asd20/ui-next/package.json`
+
+Downstream repos should import through those paths. Private source imports are
+not part of the supported contract unless they are explicitly covered by the
+package `exports` map.
+
+## Source Layout
+
+| Path | Purpose |
+| --- | --- |
+| `components.js` | Public component exports. |
+| `templates.js` | Public template exports. |
+| `icons.js` | Generated icon component exports. |
+| `helpers.js` | Public helper exports. |
+| `directives.js` | Public directive exports. |
+| `install.js` | Vue plugin install helpers. |
+| `src/components/atoms/` | Base UI components. |
+| `src/components/molecules/` | Combined controls and display units. |
+| `src/components/organisms/` | Larger site/app sections. |
+| `src/components/templates/` | Website and app templates. |
+| `src/design/` | CSS tokens, Sass helpers, typography, template stack, images. |
+| `src/assets/icons/` | Raw SVG icon assets. |
+| `src/helpers/` | Shared helper implementation. |
+| `src/directives/` | Directive implementation. |
+| `scripts/` | Build, package, release, and verification scripts. |
+| `docs/migration/` | Historical migration and release notes. |
+
+## Local Development
+
+```sh
 npm install
 npm run storybook
+npm test
 npm run build
 ```
 
-## Release Validation
+Regenerate icon metadata after adding, removing, or renaming SVG icon assets:
 
-Build the staged publish artifact with:
+```sh
+npm run generate:icons
+npm run verify:icon-metadata
+```
+
+## Package Verification
+
+Build the staged publish artifact:
 
-```bash
+```sh
 npm run build:package
 ```
 
-Validate the publish shape end to end with:
+Verify the source and staged package contract:
 
-```bash
+```sh
 npm run verify:publish
 ```
 
-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.
+That command rebuilds `dist/package`, verifies public exports, verifies Vue 3
+input/lifecycle/instance-id contracts, verifies the staged package, and runs
+`npm pack --dry-run`.
 
-Validate the packed consumer install path with:
+Verify the packed consumer install path:
 
-```bash
+```sh
 npm run verify:release
 ```
 
-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.
+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.
+
+## Release
+
+```sh
+npm run release
+```
+
+The release flow publishes from `dist/package`, tags as `ui-next-v${version}`,
+and runs `npm run verify:release` before publishing.
+
+## Change Guidance
+
+Before changing this package, identify which public entry point is affected and
+which downstream repos consume it. Template, style/token, icon, input model, and
+helper changes are especially likely to require downstream website or app
+verification.
 
-## Migration Record
+For broader architecture context, see
+`../asd20-website/docs/platform/shared-ui-contract.md`.
 
-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.
+The migration record under `docs/migration/` is retained for audit history,
+release decisions, and future cleanup planning.

package/package.json

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

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

@@ -137,17 +137,6 @@
       v-if="callsToAction.length > 0"
       class="asd20-page-header__call-to-action"
     >
-      <!-- <asd20-button
-        v-for="(cta, index) in callsToAction"
-        :key="index"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
-        :label="cta.label"
-        :icon="cta.icon"
-        :link="cta.url"
-        reversed
-        horizontal
-        centered
-      /> -->
       <asd20-button
         v-if="callsToAction.length >= 1"
         :size="mq === 'sm' ? 'sm' : 'lg'"
@@ -183,7 +172,6 @@
 import scrollTrack from '../../../directives/scroll-track'
 import responsiveBreakpointMixin from '../../../mixins/responsiveBreakpointMixin'
 import Asd20Button from '../../atoms/Asd20Button'
-// import Asd20DistrictLogo from '../../../components/atoms/Asd20DistrictLogo'
 import Asd20OrganizationPicker from '../../../components/organisms/Asd20OrganizationPicker'
 import Asd20Breadcrumb from '../../../components/atoms/Asd20Breadcrumb'
 import Asd20LanguageTranslation from '../../molecules/Asd20LanguageTranslation'
@@ -196,7 +184,6 @@ export default {
   name: 'Asd20PageHeader',
   components: {
     Asd20Button,
-    // Asd20DistrictLogo,
     Asd20OrganizationPicker,
     Asd20Breadcrumb,
     Asd20LanguageTranslation,
@@ -455,26 +442,6 @@ export default {
     background: var(--website-header__background-color) var(--imageBackground)
       left center / cover no-repeat;
   }
-  /* .add-fade {*/
-  /*   &::before {*/
-  /*     content: '';*/
-  /*     // height: auto;*/
-  /*     display: block;*/
-  /*     position: absolute;*/
-  /*     z-index: -1;*/
-  /*     top: 0;*/
-  /*     bottom: auto;*/
-  /*     left: 0;*/
-  /*     width: 100%;*/
-  /*     height: 100%;*/
-  /*     background: linear-gradient(*/
-  /*       30deg,*/
-  /*       rgba(6, 11, 31, 0.7) 10%,*/
-  /*       rgba(6, 11, 31, 0.5) 55%,*/
-  /*       transparent 70%*/
-  /*     );*/
-  /*   }*/
-  /* }*/
 
   h1 {
     position: relative;
@@ -680,7 +647,6 @@ export default {
       flex-grow: 1;
       padding: 1rem 1rem 1rem 2rem;
       min-height: clamp(240px, 40vh, 300px);
-      /* margin-right: space(3);*/
       background: transparent;
     }
 
@@ -701,7 +667,6 @@ export default {
         max-height: inherit;
         object-fit: cover;
         border-top: none;
-        /* opacity: 0;*/
       }
     }
 
@@ -712,9 +677,6 @@ export default {
     &__title-content {
       position: relative;
       max-width: space(35);
-      /* .asd20-page-header__lead {*/
-      /*   margin-right: 25%;*/
-      /* }*/
     }
 
     & :deep(.asd20-organization-picker) {
@@ -759,7 +721,6 @@ export default {
       flex-grow: 1;
       padding: space(0) space(2) space(1) space(3);
       min-height: clamp(240px, 40vh, 300px);
-      /* margin-right: space(3);*/
       background: transparent;
     }
     &__image {
@@ -780,7 +741,6 @@ export default {
         max-height: inherit;
         object-fit: cover;
         border-top: none;
-        /* opacity: 0;*/
       }
     }
     h1 {
@@ -794,9 +754,6 @@ export default {
     &__title-content {
       position: relative;
       max-width: space(35);
-      /* .asd20-page-header__lead {*/
-      /*   margin-right: 25%;*/
-      /* }*/
     }
 
     & :deep(.asd20-organization-picker) {

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

@@ -293,20 +293,6 @@ export default {
       return this.loginsByTab.find(t => this.tab === t.hash)
     },
   },
-  // created() {
-  //   if (typeof window !== 'undefined' && this.tabsList.length) {
-  //     window.location.hash = this.tabsList[0].hash
-  //     console.log(this.tabsList[0].hash)
-  //     if (
-  //       typeof window !== 'undefined' &&
-  //       window.location.hash.indexOf('#tab-') > -1
-  //     ) {
-  //       this.tab = window.location.hash
-  //       console.log(window.location.hash)
-  //     }
-  //     window.focus(this.tab)
-  //   }
-  // },
 
   created() {
     if (typeof window === 'undefined' || !this.tabsList.length) return
@@ -359,13 +345,9 @@ export default {
   overflow: hidden;
   margin-top: space(2.25);
   .asd20-page-header::after {
-    left: 0 !important;
-  }
-  .asd20-page-header {
-    margin-bottom: space(0) !important;
-    .asd20-page-header__tools {
-    }
+    display: none;
   }
+
   .notification-group--floating {
     position: absolute;
     right: space(0.5);
@@ -381,9 +363,9 @@ export default {
     background-position-y: top;
     padding: space(1) 0;
   }
-  // .logins-tab-bar {
-  //   padding: space(2) 0 0 0;
-  // }
+  .logins-tab-bar {
+    border-bottom: none;
+  }
   .logins-list {
     display: flex;
     flex-direction: column;
@@ -421,9 +403,6 @@ export default {
     .notification-group--inline {
       margin: space(2) space(3) space(1) space(3);
     }
-    .asd20-page-header::after {
-      border-bottom-left-radius: 0;
-    }
     .asd20-page-content {
       margin-top: space(1);
     }