@asd20/ui-next 2.33.1 → 2.33.2

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+## [2.33.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.1...ui-next-v2.33.2) (2026-10-26)
+
 ## [2.33.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.33.0...ui-next-v2.33.1) (2026-10-26)
 
 

package/package.json

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

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

@@ -97,26 +97,11 @@
     <div class="white-accent-band">
       <section
         ref="header"
-        :class="headerClasses"
+        class="asd20-secondary-header"
         aria-label="Secondary message"
-        :style="secondaryHeaderStyle"
       >
-        <!-- Parallax background (masked by .asd20-secondary-header mask) -->
-        <div
-          class="secondary-parallax"
-          aria-hidden="true"
-        >
-          <div class="secondary-parallax__layer secondary-parallax__base"></div>
-          <div
-            class="secondary-parallax__layer secondary-parallax__field"
-          ></div>
-          <div
-            class="secondary-parallax__layer secondary-parallax__ribbons"
-          ></div>
-        </div>
-
         <asd20-messaging
-          v-bind="secondaryMessageForDisplay"
+          v-bind="secondaryMessage"
           fullscreen
         ></asd20-messaging>
       </section>
@@ -141,181 +126,10 @@ export default {
     grid: { type: Boolean, default: false },
     forceDisplay: { type: Boolean, default: false },
   },
-  data() {
-    return {
-      isTouchCapableDevice: false,
-      parallaxEnabled: false,
-      intersectionObserver: null,
-      parallaxRaf: null,
-      handleScroll: null,
-      handleResize: null,
-    }
-  },
   computed: {
-    shouldUseParallax() {
-      return !this.isTouchCapableDevice
-    },
-    headerClasses() {
-      return {
-        'asd20-secondary-header': true,
-        'asd20-secondary-header--desktop-background':
-          this.hasSecondaryHeaderImage,
-        'asd20-secondary-header--parallax-enabled-background':
-          this.hasSecondaryHeaderImage && this.shouldUseParallax,
-        'asd20-secondary-header--hide-desktop-image':
-          !this.shouldShowDesktopInlineImage,
-      }
-    },
     secondaryMessage() {
       return Array.isArray(this.messages) ? this.messages[1] || {} : {}
     },
-    secondaryMessageImages() {
-      return Array.isArray(this.secondaryMessage.images)
-        ? this.secondaryMessage.images
-        : []
-    },
-    secondaryHeaderImageObject() {
-      return (
-        this.secondaryMessageImages.find(image => image && image.isCover) ||
-        this.secondaryMessageImages[0] ||
-        null
-      )
-    },
-    secondaryHeaderImage() {
-      return this.resolveMessageImageUrl(this.secondaryHeaderImageObject)
-    },
-    hasSecondaryHeaderImage() {
-      return Boolean(this.secondaryHeaderImage)
-    },
-    shouldShowDesktopInlineImage() {
-      return Boolean(
-        this.secondaryHeaderImageObject && this.secondaryHeaderImageObject.isCover
-      )
-    },
-    secondaryMessageForDisplay() {
-      if (!this.secondaryHeaderImageObject) return this.secondaryMessage
-
-      return {
-        ...this.secondaryMessage,
-        images: [
-          {
-            ...this.secondaryHeaderImageObject,
-            isCover: true,
-          },
-        ],
-      }
-    },
-    secondaryHeaderStyle() {
-      if (!this.hasSecondaryHeaderImage) return {}
-
-      return {
-        '--secondary-header-image': `url("${this.secondaryHeaderImage}")`,
-      }
-    },
-  },
-  mounted() {
-    if (typeof window !== 'undefined') {
-      this.isTouchCapableDevice = Boolean(
-        window.matchMedia?.('(pointer: coarse)').matches ||
-          window.navigator?.maxTouchPoints > 0
-      )
-    }
-
-    // Respect reduced motion
-    const prefersReduced =
-      typeof window !== 'undefined' &&
-      window.matchMedia &&
-      window.matchMedia('(prefers-reduced-motion: reduce)').matches
-
-    if (prefersReduced || !this.shouldUseParallax) return
-
-    this.handleScroll = () => this.scheduleParallaxUpdate()
-    this.handleResize = () => this.scheduleParallaxUpdate()
-
-    // Only animate when the header is in view
-    if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
-      this.intersectionObserver = new IntersectionObserver(
-        entries => {
-          const entry = entries && entries[0]
-          if (!entry) return
-          if (entry.isIntersecting) this.enableParallax()
-          else this.disableParallax()
-        },
-        { root: null, threshold: 0.01 }
-      )
-
-      if (this.$refs.header) this.intersectionObserver.observe(this.$refs.header)
-    } else {
-      // Fallback: just enable
-      this.enableParallax()
-    }
-
-    // Initial set
-    this.scheduleParallaxUpdate()
-  },
-  beforeUnmount() {
-    this.teardownParallax()
-  },
-  methods: {
-    resolveMessageImageUrl(image) {
-      if (!image) return ''
-
-      const imageFiles = Array.isArray(image.files) ? image.files : []
-      const fullImage = imageFiles.find(file => file.name === 'full')
-      return fullImage ? fullImage.url : image.url || ''
-    },
-    teardownParallax() {
-      this.disableParallax()
-      if (this.intersectionObserver) this.intersectionObserver.disconnect()
-      this.intersectionObserver = null
-    },
-    enableParallax() {
-      if (this.parallaxEnabled) return
-      this.parallaxEnabled = true
-      window.addEventListener('scroll', this.handleScroll, { passive: true })
-      window.addEventListener('resize', this.handleResize, { passive: true })
-      this.scheduleParallaxUpdate()
-    },
-    disableParallax() {
-      if (!this.parallaxEnabled) return
-      this.parallaxEnabled = false
-      window.removeEventListener('scroll', this.handleScroll)
-      window.removeEventListener('resize', this.handleResize)
-      if (this.parallaxRaf) cancelAnimationFrame(this.parallaxRaf)
-      this.parallaxRaf = null
-    },
-    scheduleParallaxUpdate() {
-      if (!this.parallaxEnabled) return
-      if (this.parallaxRaf) return
-      this.parallaxRaf = requestAnimationFrame(() => {
-        this.parallaxRaf = null
-        this.updateParallax()
-      })
-    },
-    updateParallax() {
-      const el = this.$refs.header
-      if (!el) return
-
-      const rect = el.getBoundingClientRect()
-      const vh = window.innerHeight || 1
-
-      // Progress through viewport: 0 (below) -> 1 (above)
-      // We keep it gentle and clamp
-      const mid = rect.top + rect.height * 0.25
-      const tRaw = 1 - mid / vh
-      const t = Math.max(0, Math.min(1, tRaw * 1.25))
-      const t2 = Math.max(0, Math.min(1, tRaw * 1.25)) // field
-      const t3 = Math.max(0, Math.min(1, tRaw * 1.6)) // ribbons
-
-      // Subtle movement only (px)
-      const y1 = (t - 0.5) * 22 // base
-      const y2 = (t2 - 0.5) * 60 // field
-      const y3 = (t3 - 0.5) * 40 // ribbons
-
-      el.style.setProperty('--secondary-parallax-y1', `${y1}px`)
-      el.style.setProperty('--secondary-parallax-y2', `${y2}px`)
-      el.style.setProperty('--secondary-parallax-y3', `${y3}px`)
-    },
   },
 }
 </script>
@@ -344,13 +158,14 @@ export default {
 }
 
 .asd20-secondary-header {
-  --secondary-header-image: none;
   position: relative;
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
   color: var(--website-homepage-header__secondary-foreground-color);
-  background: var(--website-homepage-header__secondary-background-color);
+  // CommCenter supplies a full background shorthand (image, position, size, repeat).
+  background: var(--website-homepage-header__secondary-background-style, none);
+  background-color: var(--website-homepage-header__secondary-background-color);
   padding: space(1) 0 0 0;
 
   mask: url(#secondary-header-mask-mobile);
@@ -358,7 +173,6 @@ export default {
   mask-size: 100% 100%;
   -webkit-mask-size: 100% 100%;
 
-  /* Ensure content stays above the parallax layers */
   .asd20-messaging {
     position: relative;
     z-index: 2;
@@ -367,94 +181,6 @@ export default {
     flex-direction: column;
   }
 
-  /* Parallax background container */
-  .secondary-parallax {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    pointer-events: none;
-    overflow: hidden; /* mask will clip, but this avoids any edge artifacts */
-  }
-
-  .secondary-parallax__layer {
-    position: absolute;
-    inset: -10% -10% -10% -10%;
-    transform: translate3d(0, 0, 0);
-    will-change: transform;
-  }
-
-  /* Layer 1: base gradient glow */
-  .secondary-parallax__base {
-    transform: translate3d(0, var(--secondary-parallax-y1, 0px), 0);
-    background: radial-gradient(
-        800px 520px at 90% 90%,
-        rgba(255, 255, 255, 0.55) 0%,
-        rgba(255, 255, 255, 0.22) 0%,
-        rgba(255, 255, 255, 0) 0%
-      ),
-      linear-gradient(
-        90deg,
-        rgba(12, 36, 86, 0.95) 0%,
-        rgba(12, 36, 86, 0.85) 35%,
-        rgba(12, 36, 86, 0.25) 100%
-      );
-      /* linear-gradient(*/
-      /*   90deg,*/
-      /*   rgba(12, 36, 86, 0.95) 0%,*/
-      /*   rgba(24, 74, 160, 0.6) 85%,*/
-      /*   rgba(112, 160, 230, 0.85) 100%*/
-      /* );*/
-  }
-
-  /* Layer 2: soft wave fields (broad arcs) */
-  .secondary-parallax__field {
-    transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
-      rotate(-5deg);
-    background: radial-gradient(
-      280% 155% at 20% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 62%,
-      rgba(188, 220, 250, 0.95) 70%,
-      rgba(255, 255, 255, 0) 72%
-    );
-    filter: none;
-    opacity: 0.9;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.85) 0%,
-      rgba(0, 0, 0, 1) 85%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
-  }
-
-  /* Layer 3: highlight ribbons (brighter curves) */
-  .secondary-parallax__ribbons {
-    transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
-      rotate(-3deg);
-    background: radial-gradient(
-      260% 160% at 50% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 60%,
-      rgba(255, 255, 255, 0.9) 64%,
-      rgba(255, 255, 255, 0) 70%
-    );
-    opacity: 0.9;
-    filter: none;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.3) 0%,
-      rgba(0, 0, 0, 1) 70%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
-  }
-
-  /* Reduced motion: lock the layers */
-  @media (prefers-reduced-motion: reduce) {
-    .secondary-parallax__layer {
-      transform: none !important;
-    }
-  }
-
   & :deep(.message-image) {
     order: 2;
     border-top: none !important;
@@ -484,6 +210,15 @@ export default {
     padding: space(1) space(1) space(1) space(1);
   }
 
+  & :deep(.asd20-messaging__button-group) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: space(0.5);
+    width: 70vw;
+    max-width: 100%;
+    margin: space(0.5) auto;
+  }
+
   & :deep(.asd20-button) {
     @include asd20-font(
       0.75,
@@ -492,8 +227,10 @@ export default {
       700
     );
     flex-direction: column;
-    width: 70vw;
-    margin: space(0.5) auto !important;
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+    margin: 0 !important;
     color: var(--website-homepage-header__secondary-button-foreground-color);
     background: var(
       --website-homepage-header__secondary-button-background-color
@@ -505,6 +242,9 @@ export default {
     z-index: 2;
     overflow: hidden;
   }
+  & :deep(.asd20-button__label) {
+    overflow-wrap: anywhere;
+  }
   & :deep(.asd20-button)::before {
     content: '';
     position: absolute;
@@ -542,9 +282,9 @@ export default {
     & :deep(.lead) {
       width: 100%;
     }
-    & :deep(.asd20-button) {
+    & :deep(.asd20-messaging__button-group) {
       width: 50vw;
-      margin: space(0.5) space(0.5) 0 0 !important;
+      margin-inline: 0;
     }
   }
 }
@@ -575,14 +315,8 @@ export default {
 }
 
 @media (min-width: 1024px) {
-  .asd20-secondary-header--desktop-background {
+  .asd20-secondary-header {
     padding: space(3) space(3) space(2) space(3);
-    background-color: var(--website-homepage-header__secondary-background-color);
-    background-image: var(--secondary-header-image);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-    background-attachment: scroll;
     padding-top: 70px;
 
     mask: url(#secondary-header-mask-desktop);
@@ -607,6 +341,11 @@ export default {
       border-bottom: none;
     }
 
+    & :deep(.asd20-messaging__button-group) {
+      grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
+      width: 100%;
+    }
+
     & :deep(.asd20-button) {
       @include asd20-font(
         0.75,
@@ -615,8 +354,6 @@ export default {
         700
       );
       flex-direction: row;
-      width: inherit;
-      margin: space(0.5) space(0.5) 0 0 !important;
       padding: space(0.5) space(1.5);
     }
 
@@ -634,64 +371,17 @@ export default {
     }
   }
 
-  .asd20-secondary-header--desktop-background .secondary-parallax {
-    display: block;
-  }
-
-  .asd20-secondary-header--desktop-background .secondary-parallax__field,
-  .asd20-secondary-header--desktop-background .secondary-parallax__ribbons {
-    display: none;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background {
-    background-attachment: fixed;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field,
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
-    display: block;
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__field {
-    transform: translate3d(0px, var(--secondary-parallax-y2, 0px), 0)
-      rotate(-5deg);
-    filter: none;
-    opacity: 0.9;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.85) 0%,
-      rgba(0, 0, 0, 1) 85%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 85%);
-  }
-
-  .asd20-secondary-header--parallax-enabled-background .secondary-parallax__ribbons {
-    transform: translate3d(0, var(--secondary-parallax-y3, 0px), 0)
-      rotate(-3deg);
-    background: radial-gradient(
-      180% 160% at 40% 110%,
-      rgba(255, 255, 255, 0) 0%,
-      rgba(255, 255, 255, 0) 60%,
-      rgba(255, 255, 255, 0.9) 64%,
-      rgba(255, 255, 255, 0) 70%
-    );
-    opacity: 0.9;
-    filter: none;
-    mask-image: linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.3) 0%,
-      rgba(0, 0, 0, 1) 70%
-    );
-    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 70%);
-  }
-
-  .asd20-secondary-header--desktop-background.asd20-secondary-header--hide-desktop-image {
-    & :deep(.asd20-messaging--fullscreen > .message-image) {
-      display: none;
+}
+@media (min-width: 1025px) {
+  .asd20-secondary-header {
+    & :deep(.asd20-messaging__button-group) {
+      display: flex;
+      flex-wrap: wrap;
     }
 
-    & :deep(.asd20-messaging--fullscreen > .asd20-messaging__content) {
-      max-width: 60%;
+    & :deep(.asd20-button) {
+      width: fit-content;
+      max-width: 100%;
     }
   }
 }