@asd20/ui-next 2.28.0 → 2.28.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.28.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.28.0...ui-next-v2.28.1) (2026-10-02)
+
+
+### Bug Fixes
+
+* allow an intro message on the handbook page; fix unnecessary focus outlines ([e8c8e09](https://github.com/academydistrict20/asd20-ui-next/commit/e8c8e0965f1f4cef4eb2b8ffa9aacb9b82c0ccc0))
+
 # [2.28.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.27.2...ui-next-v2.28.0) (2026-10-02)
 
 

package/package.json

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

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

@@ -23,7 +23,7 @@
 
     <asd20-page-header
       :heading="title"
-      :lead="metaDescription"
+      :lead="handbookLead"
       :organization="organization"
       :organization-options="organizationOptions"
       :breadcrumb-links="breadcrumbLinks"
@@ -75,7 +75,7 @@
           :class="{ 'is-open': topicsOpen }"
         >
           <li
-            v-for="message in messages"
+            v-for="message in topicMessages"
             :key="message.id"
           >
             <button
@@ -90,23 +90,31 @@
       </nav>
 
       <article
-        v-for="message in messages"
+        v-for="message in topicMessages"
         :key="message.id"
         class="asd20-template-handbook__topic"
         :class="{ 'is-active': activeMessage && activeMessage.id === message.id }"
       >
-        <h2
-          tabindex="-1"
-        >
+        <h2>
           {{ message.heading || message.title }}
         </h2>
+        <div
+          v-if="topicSummary(message)"
+          class="asd20-template-handbook__summary"
+          v-html="topicSummary(message)"
+        />
+        <hr
+          v-if="topicSummary(message)"
+          class="asd20-template-handbook__summary-divider"
+        />
         <asd20-messaging
           v-bind="message"
           heading=""
+          short-description=""
           detail-link=""
         />
       </article>
-      <p v-if="!messages.length">
+      <p v-if="!topicMessages.length">
         No handbook topics are available yet.
       </p>
     </main>
@@ -123,7 +131,6 @@
 </template>
 
 <script>
-import { nextTick } from 'vue'
 import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
 import Asd20Messaging from '../../../components/atoms/Asd20Messaging'
 import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
@@ -150,18 +157,25 @@ export default {
     topicsOpen: false,
   }),
   computed: {
+    handbookLead() {
+      return this.firstMessage?.shortDescription || this.firstMessage?.summary || this.metaDescription
+    },
+    topicMessages() {
+      return this.messages.slice(1)
+    },
     activeMessage() {
-      return this.messages.find(message => message.id === this.selectedMessageId)
-        || this.messages[0]
+      return this.topicMessages.find(message => message.id === this.selectedMessageId)
+        || this.topicMessages[0]
         || null
     },
   },
   methods: {
-    async selectTopic(messageId) {
+    topicSummary(message) {
+      return message.shortDescription || message.summary || ''
+    },
+    selectTopic(messageId) {
       this.selectedMessageId = messageId
       this.topicsOpen = false
-      await nextTick()
-      this.$el.querySelector('.asd20-template-handbook__topic.is-active h2')?.focus()
     },
   },
 }
@@ -189,6 +203,23 @@ export default {
     padding: space(2) space(1);
   }
 
+  &__layout:focus:not(.asd20-tab):not([role='tab']):not(.asd20-focus-trap) {
+    outline: none;
+    box-shadow: none !important;
+  }
+
+  &__summary {
+    @include asd20-font(0.75, var(--website-typography__font-family-body), 1.5);
+    margin-bottom: space(0.5);
+  }
+
+  &__summary-divider {
+    margin: 0 0 space(1);
+    border: 0;
+    border-top: 1px solid currentColor;
+    opacity: 0.25;
+  }
+
   &__index ol {
     display: none;
     list-style: none;