@asd20/ui-next 2.27.1 → 2.28.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+# [2.28.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.27.2...ui-next-v2.28.0) (2026-10-02)
+
+
+### Features
+
+* add handbook template ([ceef718](https://github.com/academydistrict20/asd20-ui-next/commit/ceef718735afda7dac57b80f4bf9f2e7e868c604))
+
+## [2.27.2](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.27.1...ui-next-v2.27.2) (2026-10-01)
+
+
+### Bug Fixes
+
+* neutralize public form focus outlines ([ec90f2d](https://github.com/academydistrict20/asd20-ui-next/commit/ec90f2defd18effaf09fb0e8edf954565ce37612))
+
 ## [2.27.1](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.27.0...ui-next-v2.27.1) (2026-10-01)
 
 

package/package.json

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

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

@@ -217,7 +217,9 @@ export default {
   // Public intake controls must stay legible on every school theme. Limit the
   // neutral overrides to this wrapper so other site components keep their colors.
   --color__accent: #3d3d3d;
+  --color__accent-s10: #262626;
   --color__accent-t50: #9e9e9e;
+  --color__accent-t90: #efefef;
   --color__primary-t50: #666;
   --color__secondary-t50: #666;
   --website-card__reverse-background-color: #333;

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

@@ -0,0 +1,309 @@
+<template>
+  <div class="asd20-template-handbook">
+    <asd20-skip-to to="#handbook-content" />
+
+    <asd20-site-navigation
+      v-bind="siteNavigationSearchProps"
+      :navigation="navigation"
+      :action-items="actionItems"
+      :menu-open="menuOpen"
+      :search-open="searchOpen"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      @update:menuOpen="$emit('update:menuOpen', $event)"
+      @update:searchOpen="$emit('update:searchOpen', $event)"
+    />
+
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
+
+    <asd20-page-header
+      :heading="title"
+      :lead="metaDescription"
+      :organization="organization"
+      :organization-options="organizationOptions"
+      :breadcrumb-links="breadcrumbLinks"
+      :language-code="languageCode"
+      @update:languageCode="$emit('update:languageCode', $event)"
+    >
+      <template #top>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        />
+      </template>
+    </asd20-page-header>
+
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    />
+
+    <main
+      id="handbook-content"
+      class="asd20-template-handbook__layout"
+      tabindex="-1"
+    >
+      <nav
+        class="asd20-template-handbook__index"
+        aria-label="Handbook topics"
+      >
+        <button
+          class="asd20-template-handbook__index-toggle"
+          type="button"
+          :aria-expanded="topicsOpen"
+          aria-controls="handbook-topics"
+          @click="topicsOpen = !topicsOpen"
+        >
+          Topics
+        </button>
+        <h2 class="asd20-template-handbook__index-heading">
+          Topics
+        </h2>
+        <ol
+          id="handbook-topics"
+          :class="{ 'is-open': topicsOpen }"
+        >
+          <li
+            v-for="message in messages"
+            :key="message.id"
+          >
+            <button
+              type="button"
+              :aria-current="activeMessage && activeMessage.id === message.id ? 'true' : null"
+              @click="selectTopic(message.id)"
+            >
+              {{ message.heading || message.title }}
+            </button>
+          </li>
+        </ol>
+      </nav>
+
+      <article
+        v-for="message in messages"
+        :key="message.id"
+        class="asd20-template-handbook__topic"
+        :class="{ 'is-active': activeMessage && activeMessage.id === message.id }"
+      >
+        <h2
+          tabindex="-1"
+        >
+          {{ message.heading || message.title }}
+        </h2>
+        <asd20-messaging
+          v-bind="message"
+          heading=""
+          detail-link=""
+        />
+      </article>
+      <p v-if="!messages.length">
+        No handbook topics are available yet.
+      </p>
+    </main>
+
+    <asd20-quicklinks-menu :quick-links="quickLinks" />
+    <asd20-page-footer
+      :organization="organization"
+      :social-links="socialLinks"
+      :disclosure-links="disclosureLinks"
+      :website-logo-props="websiteLogoProps"
+      :website-logo-props2="websiteLogoProps2"
+    />
+  </div>
+</template>
+
+<script>
+import { nextTick } from 'vue'
+import Asd20SkipTo from '../../../components/atoms/Asd20SkipTo'
+import Asd20Messaging from '../../../components/atoms/Asd20Messaging'
+import Asd20PageHeader from '../../../components/organisms/Asd20PageHeader'
+import Asd20SiteNavigation from '../../../components/organisms/Asd20SiteNavigation'
+import Asd20NotificationGroup from '../../../components/organisms/Asd20NotificationGroup'
+import Asd20QuicklinksMenu from '../../../components/organisms/Asd20QuicklinksMenu'
+import Asd20PageFooter from '../../../components/organisms/Asd20PageFooter'
+import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
+
+export default {
+  name: 'Asd20HandbookTemplate',
+  components: {
+    Asd20SkipTo,
+    Asd20Messaging,
+    Asd20PageHeader,
+    Asd20SiteNavigation,
+    Asd20NotificationGroup,
+    Asd20QuicklinksMenu,
+    Asd20PageFooter,
+  },
+  mixins: [pageTemplateMixin],
+  data: () => ({
+    selectedMessageId: null,
+    topicsOpen: false,
+  }),
+  computed: {
+    activeMessage() {
+      return this.messages.find(message => message.id === this.selectedMessageId)
+        || this.messages[0]
+        || null
+    },
+  },
+  methods: {
+    async selectTopic(messageId) {
+      this.selectedMessageId = messageId
+      this.topicsOpen = false
+      await nextTick()
+      this.$el.querySelector('.asd20-template-handbook__topic.is-active h2')?.focus()
+    },
+  },
+}
+</script>
+
+<style src="../../../design/tokens.css"></style>
+
+<style lang="scss">
+@use '../../../design/template-stack' as *;
+
+.asd20-template-handbook {
+  @include typography;
+  @include template;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 0;
+  margin-top: space(2.25);
+
+  &__layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: space(2);
+    min-width: 0;
+    padding: space(2) space(1);
+  }
+
+  &__index ol {
+    display: none;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__index ol.is-open {
+    display: block;
+  }
+
+  &__index-heading {
+    display: none;
+  }
+
+  &__index button {
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+  }
+
+  &__index li button {
+    display: block;
+    width: 100%;
+    min-height: 44px;
+    padding: space(0.5);
+    border: 0;
+    border-left: 3px solid transparent;
+    background: transparent;
+    color: inherit;
+  }
+
+  &__index li button:hover,
+  &__index li button:focus-visible {
+    background: var(--color__tertiary-t50);
+  }
+
+  &__index li button[aria-current='true'] {
+    border-left-color: var(--color__primary);
+    background: var(--color__tertiary-t50);
+    font-weight: bold;
+  }
+
+  &__index-toggle {
+    width: 100%;
+    min-height: 44px;
+    padding: space(0.5);
+    border: 1px solid var(--color__primary);
+    border-radius: 0.25rem;
+    background: var(--color__tertiary-t50);
+    color: var(--color__primary);
+    font-weight: bold;
+  }
+
+  &__topic {
+    min-width: 0;
+  }
+
+  &__topic:not(.is-active) {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .asd20-template-handbook {
+    &__layout {
+      grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr);
+      gap: space(3);
+      padding: space(3);
+    }
+
+    &__index {
+      position: sticky;
+      top: space(2);
+      align-self: start;
+      max-height: calc(100vh - 4rem);
+      overflow-y: auto;
+    }
+
+    &__index-heading,
+    &__index ol {
+      display: block;
+    }
+
+    &__index-toggle {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: 1024px) {
+  .asd20-template-handbook {
+    margin-left: space(3);
+    margin-top: 0;
+  }
+}
+
+@media print {
+  .asd20-template-handbook {
+    &__index {
+      display: none;
+    }
+
+    &__layout {
+      display: block;
+    }
+
+    &__topic,
+    &__topic:not(.is-active) {
+      display: block;
+    }
+
+    &__topic {
+      break-inside: avoid-page;
+    }
+  }
+}
+</style>

package/templates.js

@@ -16,6 +16,7 @@ export { default as Asd20DistrictHomeTemplate } from './src/components/templates
 export { default as Asd20DistrictVideoTemplate } from './src/components/templates/Asd20DistrictVideoTemplate/index.vue'
 export { default as Asd20FileListPageTemplate } from './src/components/templates/Asd20FileListPageTemplate/index.vue'
 export { default as Asd20GroupFeatureTemplate } from './src/components/templates/Asd20GroupFeatureTemplate/index.vue'
+export { default as Asd20HandbookTemplate } from './src/components/templates/Asd20HandbookTemplate/index.vue'
 export { default as Asd20LoginsTemplate } from './src/components/templates/Asd20LoginsTemplate/index.vue'
 export { default as Asd20PeopleFeatureTemplate } from './src/components/templates/Asd20PeopleFeatureTemplate/index.vue'
 export { default as Asd20ProfileTemplate } from './src/components/templates/Asd20ProfileTemplate/index.vue'