@asd20/ui-next 2.0.19 → 2.0.21

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [2.0.21](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.20...ui-next-v2.0.21) (2026-04-02)
+
+## [2.0.20](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.19...ui-next-v2.0.20) (2026-04-02)
+
+
+### Bug Fixes
+
+* remove focus-trap styles that may be interfering with moble styles ([ad2be6c](https://github.com/academydistrict20/asd20-ui-next/commit/ad2be6cfd68277861a88d8ce143f53336bda4392))
+
 ## [2.0.19](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.18...ui-next-v2.0.19) (2026-04-02)
 
 ## [2.0.18](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.0.17...ui-next-v2.0.18) (2026-04-02)

package/package.json

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

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

@@ -13,8 +13,6 @@
     >
       <focus-trap
         :open="resolvedOpen"
-        class="asd20-modal-focus-trap"
-        :class="{ 'asd20-modal-focus-trap--windowed': windowed }"
       >
         <div class="asd20-modal">
           <div
@@ -141,20 +139,6 @@ export default {
   align-items: stretch;
 }
 
-.asd20-modal-focus-trap {
-  display: flex;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  justify-content: center;
-  align-items: stretch;
-}
-
-.asd20-modal-focus-trap--windowed {
-  align-items: center;
-}
-
 .asd20-modal {
   position: relative;
   flex-grow: 1;

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

@@ -7,7 +7,7 @@
     <slot name="before" />
 
     <asd20-image-gallery
-      v-if="images.length > 1"
+      v-if="allowSingleImageGallery ? images.length > 0 : images.length > 1"
       title="Images"
       :images="images"
     >
@@ -37,6 +37,7 @@ export default {
     ),
   },
   props: {
+    allowSingleImageGallery: { type: Boolean, default: false },
     images: { type: Array, default: () => [] },
     videos: { type: Array, default: () => [] },
   },

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

@@ -15,7 +15,10 @@
       ></asd20-organization-picker>
       <slot name="top" />
     </div>
-    <div class="asd20-page-header__main">
+    <div
+      class="asd20-page-header__main"
+      :class="{ 'asd20-page-header__main--has-image': imageUrl && !$slots.aside }"
+    >
       <div
         class="asd20-page-header__content"
         :class="headerImageUrl ? 'new-header add-fade' : ''"
@@ -144,7 +147,7 @@
       /> -->
       <asd20-button
         v-if="callsToAction.length >= 1"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :size="mq === 'sm' ? 'sm' : 'lg'"
         :label="callsToAction[0].label"
         :icon="callsToAction[0].icon"
         :link="callsToAction[0].url"
@@ -155,7 +158,7 @@
       />
       <asd20-button
         v-if="callsToAction.length >= 2"
-        :size="['sm', 'md'].indexOf(mq) > -1 ? 'sm' : 'lg'"
+        :size="mq === 'sm' ? 'sm' : 'lg'"
         :label="callsToAction[1].label"
         :icon="callsToAction[1].icon"
         :link="callsToAction[1].url"
@@ -584,6 +587,15 @@ export default {
     }
   }
 }
+
+@media (max-width: 767px) {
+  .asd20-page-header:not(.asd20-page-header--has-cta) {
+    &::after {
+      display: none;
+    }
+  }
+}
+
 @media (min-width: 667px) {
   .asd20-page-header {
     &__image {
@@ -602,7 +614,7 @@ export default {
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 768px) and (max-width: 1023px) {
   .asd20-page-header {
     .back {
       padding: 0;
@@ -614,9 +626,113 @@ export default {
       right: space(0);
       left: space(4);
       border-bottom-left-radius: 5rem;
+    }
+    &__main--has-image {
+      min-height: 400px;
+    }
+
+    &__main {
+      display: flex;
+      justify-content: space-between;
+      border-bottom-left-radius: 5rem;
+      background: var(--website-header__background-color)
+        var(--website-header__background-style);
+    }
 
+    &__top {
+      display: none;
+    }
+
+    &__tools {
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-top: 0;
+      .asd20-breadcrumb,
+      .back {
+        margin: 0 !important;
+        order: 1;
+      }
+      .language-and-tools {
+        order: 2;
+      }
+      .asd20-language-loader {
+        order: 2;
+      }
+    }
+    &__content {
+      width: 100%;
+      flex-basis: 50%;
+      flex-grow: 1;
+      padding: 1rem 1rem 1rem 2rem;
+      min-height: clamp(240px, 40vh, 300px);
+      /* margin-right: space(3);*/
+      background: transparent;
+    }
+
+    &__image {
+      display: flex;
+      max-height: 350px;
+      max-width: 45vw;
+      margin-top: 0;
+      margin-bottom: space(-1);
+      border-radius: 0;
+      border-bottom-left-radius: 2rem;
+      overflow: hidden;
+      flex-grow: 1;
+      min-width: 30vw;
+      img {
+        width: 100%;
+        height: 100%;
+        max-height: inherit;
+        object-fit: cover;
+        border-top: none;
+        /* opacity: 0;*/
+      }
+    }
+
+    h1 {
+      font-size: 2rem !important;
+    }
+
+    &__title-content {
+      position: relative;
+      max-width: space(35);
+      /* .asd20-page-header__lead {*/
+      /*   margin-right: 25%;*/
+      /* }*/
+    }
+
+    & :deep(.asd20-organization-picker) {
+      display: flex;
+      margin: space(0) auto space(0) space(0);
+    }
+
+    &__call-to-action {
+      margin: space(-1) 60vw space(-1) space(3);
+      .asd20-button {
+        font-size: 1rem !important;
+        flex-shrink: 0;
+        padding: 0.25rem 2rem;
+      }
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-page-header {
+    .back {
+      padding: 0;
+      margin: 0;
+    }
+    &::after {
+      top: space(6);
+      bottom: space(-2);
+      right: space(0);
+      left: space(4);
+      border-bottom-left-radius: 5rem;
     }
     &__main {
+      display: flex;
       justify-content: space-between;
       border-bottom-left-radius: 5rem;
       background: var(--website-header__background-color)
@@ -637,7 +753,7 @@ export default {
       max-height: 600px;
       margin-top: space(-1);
       margin-bottom: space(-1);
-      border-radius: var(--website-shape__radius-m);
+      border-radius: var(--website-shape__radius-l);
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       overflow: hidden;
@@ -694,10 +810,6 @@ export default {
       }
     }
 
-    &__main {
-      display: flex;
-    }
-
     &__call-to-action {
       margin: space(-1) 60vw space(-1) space(3);
       .asd20-button {

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

@@ -95,6 +95,7 @@
 
     <asd20-media-section
       v-if="shouldShowArticleMediaSection"
+      allow-single-image-gallery
       :images="articleGalleryImages || []"
       :videos="combinedMessageVideos || []"
     >

package/src/components/utils/FocusTrap.vue

@@ -1,13 +1,3 @@
-<template>
-  <div
-    ref="trapRoot"
-    class="asd20-focus-trap"
-    tabindex="-1"
-  >
-    <slot />
-  </div>
-</template>
-
 <script>
 import { createFocusTrap } from 'focus-trap'
 
@@ -21,6 +11,7 @@ export default {
   },
   data: () => ({
     trap: null,
+    addedFallbackTabindex: false,
   }),
   computed: {
     enabled() {
@@ -32,7 +23,7 @@ export default {
       const options = {
         clickOutsideDeactivates: false,
         escapeDeactivates: false,
-        fallbackFocus: () => this.$refs.trapRoot,
+        fallbackFocus: () => this.ensureFallbackFocusTarget(),
       }
 
       if (this.initialFocus !== undefined) {
@@ -53,7 +44,7 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.trap = createFocusTrap(this.$refs.trapRoot, this.focusTrapOptions)
+      this.trap = createFocusTrap(this.$el, this.focusTrapOptions)
       this.syncTrapState()
     })
   },
@@ -61,6 +52,20 @@ export default {
     this.disposeTrap()
   },
   methods: {
+    ensureFallbackFocusTarget() {
+      const root = this.$el
+
+      if (!root || typeof root.hasAttribute !== 'function') {
+        return root
+      }
+
+      if (!root.hasAttribute('tabindex')) {
+        root.setAttribute('tabindex', '-1')
+        this.addedFallbackTabindex = true
+      }
+
+      return root
+    },
     syncTrapState() {
       if (!this.trap) return
 
@@ -76,22 +81,21 @@ export default {
 
       this.trap.deactivate()
       this.trap = null
+
+      if (this.addedFallbackTabindex && this.$el?.removeAttribute) {
+        this.$el.removeAttribute('tabindex')
+        this.addedFallbackTabindex = false
+      }
     },
   },
-}
-</script>
+  render() {
+    const content = this.$slots.default ? this.$slots.default() : []
 
-<style scoped>
-.asd20-focus-trap {
-  display: flex;
-  flex: 1 1 auto;
-  align-items: stretch;
-  min-width: 0;
-  max-width: 100%;
-  max-height: 100%;
+    if (content.length !== 1) {
+      throw new Error('FocusTrap requires exactly one child')
+    }
 
-  &:focus {
-    outline: none;
-  }
+    return content[0]
+  },
 }
-</style>
+</script>

package/src/mixins/pageTemplateMixin.js

@@ -251,7 +251,7 @@ export default {
 
     shouldShowArticleMediaSection() {
       return (
-        this.articleGalleryImages.length >= 3 ||
+        this.articleGalleryImages.length > 0 ||
         this.combinedMessageVideos.length > 0
       )
     },