barbican-reset 3.16.0 → 3.18.0

package/README.md

@@ -51,7 +51,7 @@ You can reference any of the following components:
 | -------------------- | ------------------- | -------------------- | ---------------- | ------------- |
 | `<br-alert>`         | BrAlert.vue         | .br-alert            | br-alert--setup  | -             |
 | `<br-anchor>`        | BrAnchor.vue        | .btn                 | setup-button     | -             |
-| `<br-button>`        | BrButton.vue        | .br-checkbox         | br-checkbox      | -             |
+| `<br-button>`        | BrButton.vue        | .br-form-checkbox         | br-form-checkbox      | -             |
 | `<br-confirm-done>`  | BrConfirmDone.vue   | -                    | -                | -             |
 | `<br-confirm-email>` | BrConfirmEmail.vue  | -                    | -                | -             |
 | `<br-container>`     | BrContainer.vue     | .br-container--outer | -                | -             |

package/components/BrAlert.vue

@@ -19,7 +19,7 @@
 
 `
 <script>
-import CloseIcon from "#icons/stream/close.vue";
+import CloseIcon from "#icons/close.vue";
 import BrButton from "#components/BrButton.vue";
 
 export default {

package/components/BrButton.vue

@@ -1,6 +1,6 @@
-<template>
-  <!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
+<!-- https://dockyard.com/blog/2020/03/02/accessible-loading-indicatorswith-no-extra-elements -->
 
+<template>
   <button
     :class="printClassNames"
     @click="$emit('click')"

package/components/BrCardTitle.vue

@@ -1,3 +1,3 @@
 <template>
-  <h4 class="card-title"><slot /></h4>
+  <div class="card-title"><slot /></div>
 </template>

package/components/BrFormCheckbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-checkbox">
+  <div class="br-form-checkbox">
     <BrFormInput v-bind="$attrs" type="checkbox">
       <slot />
     </BrFormInput>

package/components/BrFormLabel.vue

@@ -1,8 +1,6 @@
 <template>
   <component :is="!disabled ? 'label' : 'div'" :for="!disabled ? id : null" class="br-form-label">
-    <strong>
-      <slot />
-    </strong>
+    <slot />
     <span v-if="required"> (required)</span>
     <span v-if="optional"> (optional)</span>
   </component>

package/components/BrFormToggle.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="generateClasses">
+    <BrFormLabel>
+      <span>
+        <slot />
+      </span>
+      <BrFormInput v-bind="$attrs" type="checkbox" />
+    </BrFormLabel>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import BrFormLabel from '#components/BrFormLabel.vue'
+import BrFormInput from '#components/BrFormInput.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps({
+  class: String
+})
+
+const generateClasses = computed(() => {
+  let result = ['br-form-toggle']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+</script>

package/components/BrNavCard.vue

@@ -0,0 +1,56 @@
+<template>
+  <a v-if="to.startsWith('http')" :href="to" :class="generateClasses">
+    <br-card class="navcard">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
+          <slot name="icon" />
+        </div>
+        <div>
+          <br-card-title v-if="$slots.title">
+            <slot name="title" />
+          </br-card-title>
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
+          </br-card-text>
+        </div>
+      </div>
+    </br-card>
+  </a>
+    <router-link v-else class="link-navcard" :to="{ name: to }">
+    <br-card class="navcard">
+      <div :class="['wrap-navcard-content', { 'has-icon' : $slots.icon }]">
+        <div v-if="$slots.icon" class="wrap-navcard-icon">
+          <slot name="icon" />
+        </div>
+        <div>
+          <br-card-title v-if="$slots.title">
+            <slot name="title" />
+          </br-card-title>
+          <br-card-text v-if="$slots.text">
+            <slot name="text" />
+          </br-card-text>
+        </div>
+      </div>
+    </br-card>
+  </router-link>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const generateClasses = computed(() => {
+  let result = ['link-navcard']
+
+  if (props.class) result.push(props.class)
+
+  return result
+})
+
+const props = defineProps({
+  to: {
+    type: String,
+    required: true,
+  },
+  class: String
+})
+</script>

package/components/BrNavCardWrap.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="br-nav-card-wrap">
+    <slot />
+  </div>
+</template>

package/components/BrNavLink.vue

@@ -0,0 +1,21 @@
+<template>
+  <div v-if="$route.matched.some(({ name }) => name === to)" class="br-navlink">
+    {{ title }}
+  </div>
+  <a v-else-if="to.slice(0, 4) == 'http'" :href="to" class="br-navlink">
+    {{ title }}
+  </a>
+  <router-link v-else :to="{ name: to }" class="br-navlink">
+    {{ title }}
+  </router-link>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  to: {
+    type: String,
+    required: true
+  },
+})
+</script>

package/components/BrOverlay.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="br-overlay-wrap">
+    <div class="br-overlay-content">
+      <slot />
+    </div>
+    <br-button variant="exit-overlay" @click="emit('closeOverlay')">
+      <close-icon class="close-icon" />
+    </br-button>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, onUnmounted } from 'vue';
+import BrButton from "#components/BrButton.vue";
+import CloseIcon from "#icons/close.vue";
+
+const emit = defineEmits(["closeOverlay"]);
+
+function listenForKeys({ key }) {
+  if (key == 'Escape') {
+    emit('closeOverlay')    
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', listenForKeys)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', listenForKeys)
+})
+</script>
+

package/components/EventSummary.vue

@@ -111,7 +111,7 @@ export default {
     grid-template-columns: 20rem auto;
     grid-template-rows: auto auto auto;
 
-    column-gap: var(--gap-lg);
+    column-gap: var(--gap-xl);
   }
   &.in_basket {
     grid-template-columns: 16rem auto;
@@ -125,7 +125,7 @@ export default {
   border-radius: var(--border-radius-lg);
   max-width: 100%;
   width: 100%;
-  margin-bottom: var(--gap-lg);
+  margin-bottom: var(--gap-xl);
 
   @include medium-up {
     margin-bottom: 0;

package/components/SeeInside.vue

@@ -44,7 +44,7 @@
 
 <script>
 import BrButton from '#components/BrButton.vue'
-import CloseIcon from '#icons/stream/close.vue'
+import CloseIcon from '#icons/close.vue'
 
 export default {
   components: {

package/icons/account/contact.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 20 20"><path d="M4,12h8v-2H4v2ZM4,9h12v-2H4v2ZM4,6h12v-2H4v2ZM0,20V2C0,1.45.2.98.59.59s.86-.59,1.41-.59h16c.55,0,1.02.2,1.41.59s.59.86.59,1.41v12c0,.55-.2,1.02-.59,1.41-.39.39-.86.59-1.41.59H4L0,20ZM3.15,14h14.85V2H2v13.13l1.15-1.13ZM2,14V2v12Z" fill="currentColor"/></svg>
+</template>

package/icons/account/index.js

@@ -1,17 +1,20 @@
-import PersonalIcon from "#icons/account/personal.vue";
+import ContactIcon from "#icons/account/contact.vue";
+import DetailsIcon from "#icons/person.vue";
+import EditIcon from "#icons/account/edit.vue";
 import MembershipIcon from "#icons/account/membership.vue";
-import VideoIcon from "#icons/account/video.vue";
-import PaymentIcon from "#icons/account/payment.vue";
 import OrdersIcon from "#icons/account/orders.vue";
-import SupportIcon from "#icons/account/support.vue";
-import EditIcon from "#icons/account/edit.vue";
+import PaymentIcon from "#icons/account/payment.vue";
+import TicketIcon from "#icons/account/ticket.vue";
+
+import PersonalIcon from "#icons/account/personal.vue";
 
 export {
-  PersonalIcon,
+  ContactIcon,
+  DetailsIcon,
+  EditIcon,
   MembershipIcon,
-  VideoIcon,
-  PaymentIcon,
   OrdersIcon,
-  SupportIcon,
-  EditIcon,
+  PaymentIcon,
+  TicketIcon,
+  PersonalIcon,
 };

package/icons/account/membership.vue

@@ -1,12 +1,3 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="72"
-    viewBox="0 0 24 24"
-    width="72"
-  >
-    <path
-      d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" version="1.1" viewBox="0 0 20 20"><path d="M2,20c-.55,0-1.02-.2-1.41-.59s-.59-.86-.59-1.41V7c0-.55.2-1.02.59-1.41s.86-.59,1.41-.59h5v-3c0-.55.2-1.02.59-1.41s.86-.59,1.41-.59h2c.55,0,1.02.2,1.41.59s.59.86.59,1.41v3h5c.55,0,1.02.2,1.41.59s.59.86.59,1.41v11c0,.55-.2,1.02-.59,1.41s-.86.59-1.41.59H2ZM2,18h16V7h-5c0,.55-.2,1.02-.59,1.41s-.86.59-1.41.59h-2c-.55,0-1.02-.2-1.41-.59s-.59-.86-.59-1.41H2v11ZM4,16h6v-.45c0-.28-.08-.55-.24-.79s-.38-.43-.66-.56c-.33-.15-.67-.26-1.01-.34s-.7-.11-1.09-.11-.75.04-1.09.11-.68.19-1.01.34c-.28.13-.5.32-.66.56s-.24.5-.24.79v.45ZM12,14.5h4v-1.5h-4v1.5ZM7,13c.42,0,.77-.15,1.06-.44s.44-.65.44-1.06-.15-.77-.44-1.06-.65-.44-1.06-.44-.77.15-1.06.44-.44.65-.44,1.06.15.77.44,1.06.65.44,1.06.44ZM12,11.5h4v-1.5h-4v1.5ZM9,7h2V2h-2v5Z" fill="currentColor"/></svg>
 </template>

package/icons/account/orders.vue

@@ -1,17 +1,3 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    enable-background="new 0 0 24 24"
-    viewBox="0 0 24 24"
-    height="72"
-    width="72"
-  >
-    <path
-      d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z"
-    />
-    <rect height="2" width="6" x="9" y="7" />
-    <rect height="2" width="2" x="16" y="7" />
-    <rect height="2" width="6" x="9" y="10" />
-    <rect height="2" width="2" x="16" y="10" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="31.5" height="35" viewBox="0 0 18 20"><path d="M3,20c-.83,0-1.54-.29-2.13-.88-.58-.58-.88-1.29-.88-2.13v-3h3V0l1.5,1.5,1.5-1.5,1.5,1.5,1.5-1.5,1.5,1.5,1.5-1.5,1.5,1.5,1.5-1.5,1.5,1.5,1.5-1.5v17c0,.83-.29,1.54-.88,2.13-.58.58-1.29.88-2.13.88H3ZM15,18c.28,0,.52-.1.71-.29s.29-.43.29-.71V3H5v11h9v3c0,.28.1.52.29.71s.43.29.71.29ZM6,7v-2h6v2h-6ZM6,10v-2h6v2h-6ZM14,7c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29ZM14,10c-.28,0-.52-.1-.71-.29s-.29-.43-.29-.71.1-.52.29-.71.43-.29.71-.29.52.1.71.29.29.43.29.71-.1.52-.29.71-.43.29-.71.29ZM3,18h9v-2H2v1c0,.28.1.52.29.71s.43.29.71.29ZM2,18v-2,2Z" fill="currentColor"/></svg>
 </template>

package/icons/account/payment.vue

@@ -1,12 +1,3 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="72"
-    viewBox="0 0 24 24"
-    width="72"
-  >
-    <path
-      d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="28" viewBox="0 0 20 16"><path d="M20,2v12c0,.55-.2,1.02-.59,1.41s-.86.59-1.41.59H2c-.55,0-1.02-.2-1.41-.59s-.59-.86-.59-1.41V2C0,1.45.2.98.59.59s.86-.59,1.41-.59h16c.55,0,1.02.2,1.41.59s.59.86.59,1.41ZM2,4h16v-2H2v2ZM2,8v6h16v-6H2ZM2,14V2v12Z" fill="currentColor"/></svg>
 </template>

package/icons/account/personal.vue

@@ -1,12 +1,3 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    height="72"
-    viewBox="0 0 24 24"
-    width="72"
-  >
-    <path
-      d="M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zm6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8z"
-    />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35"><path d="M12.25,17.06c-1.21,0-2.19.98-2.19,2.19s.98,2.19,2.19,2.19,2.19-.98,2.19-2.19-.98-2.19-2.19-2.19ZM22.75,17.06c-1.21,0-2.19.98-2.19,2.19s.98,2.19,2.19,2.19,2.19-.98,2.19-2.19-.98-2.19-2.19-2.19ZM17.5,0C7.84,0,0,7.84,0,17.5s7.84,17.5,17.5,17.5,17.5-7.84,17.5-17.5S27.16,0,17.5,0ZM17.5,31.5c-7.72,0-14-6.28-14-14,0-.51.03-1.01.09-1.5,4.13-1.84,7.4-5.22,9.12-9.4,3.17,4.48,8.38,7.4,14.28,7.4,1.37,0,2.68-.16,3.94-.46.37,1.24.58,2.57.58,3.96,0,7.72-6.28,14-14,14Z" fill="currentColor" /></svg>
 </template>

package/icons/account/ticket.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="28" viewBox="0 0 20 16"><path d="M7.2,12l2.8-2.1,2.75,2.1-1.05-3.4,2.8-2.2h-3.4l-1.1-3.4-1.1,3.4h-3.4l2.75,2.2-1.05,3.4ZM2,16c-.55,0-1.02-.2-1.41-.59s-.59-.86-.59-1.41v-3.38c0-.18.06-.34.18-.48s.27-.22.45-.25c.4-.13.73-.38.99-.73s.39-.74.39-1.18-.13-.83-.39-1.18-.59-.59-.99-.73c-.18-.03-.33-.12-.45-.25s-.18-.29-.18-.48v-3.38C0,1.45.2.98.59.59s.86-.59,1.41-.59h16c.55,0,1.02.2,1.41.59s.59.86.59,1.41v3.38c0,.18-.06.34-.18.48s-.27.22-.45.25c-.4.13-.73.38-.99.73s-.39.74-.39,1.18.13.83.39,1.18.59.59.99.73c.18.03.33.12.45.25s.18.29.18.48v3.38c0,.55-.2,1.02-.59,1.41s-.86.59-1.41.59H2ZM2,14h16v-2.55c-.62-.37-1.1-.85-1.46-1.46s-.54-1.27-.54-1.99.18-1.38.54-1.99.85-1.1,1.46-1.46v-2.55H2v2.55c.62.37,1.1.85,1.46,1.46s.54,1.27.54,1.99-.18,1.38-.54,1.99-.85,1.1-1.46,1.46v2.55Z" fill="currentColor"/></svg>
+</template>

package/icons/back_arrow.vue

@@ -1,10 +1,3 @@
 <template>
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M16 7H3.83L9.42 1.41L8 0L0 8L8 16L9.41 14.59L3.83 9H16V7Z" />
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 16 16"><path d="M16,7H3.83L9.42,1.41l-1.42-1.41L0,8l8,8,1.41-1.41-5.58-5.59h12.17v-2Z" fill="currentColor" /></svg>
 </template>

package/icons/close.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg width="28" height="28" viewBox="0 0 20 20">
+    <path class="tint" fill="#ffffff" d="M10,1c-4.9,0-9,4.1-9,9s4.1,9,9,9s9-4.1,9-9S14.9,1,10,1z"/>
+    <path class="cross" fill="currentColor" d="M10,0C4.5,0,0,4.5,0,10s4.5,10,10,10s10-4.5,10-10S15.5,0,10,0z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8	s8,3.6,8,8S14.4,18,10,18z M12.6,6L10,8.6L7.4,6L6,7.4L8.6,10L6,12.6L7.4,14l2.6-2.6l2.6,2.6l1.4-1.4L11.4,10L14,7.4L12.6,6z"/>
+  </svg>
+</template>
+

package/icons/index.js

@@ -1,21 +1,19 @@
-import ArrowBack from "#icons/arrow_back.vue";
-import ArrowIcon from "#icons/arrow.vue";
-import ArrowForward from "#icons/arrow_forward.vue";
 import BackArrow from "#icons/back_arrow.vue";
 import BarbicanLogo from "#icons/barbican.vue";
 import CartIcon from "#icons/cart.vue";
 import CityOfLondonLogo from "#icons/city_of_london.vue";
 import CityOfLondonLockup from "#icons/city_of_london_lockup.vue";
+import CloseIcon from "#icons/close.vue";
 import InformationIcon from "#icons/information.vue";
+import QrCode from "#icons/qr_code.vue";
 
 export {
-  ArrowBack,
-  ArrowIcon,
-  ArrowForward,
   BackArrow,
   BarbicanLogo,
   CartIcon,
   CityOfLondonLogo,
   CityOfLondonLockup,
+  CloseIcon,
   InformationIcon,
+  QrCode,
 };

package/icons/person.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" version="1.1" viewBox="0 0 16 16"><path d="M8,8c-1.1,0-2.04-.39-2.83-1.18-.78-.78-1.18-1.73-1.18-2.83s.39-2.04,1.18-2.83,1.73-1.18,2.83-1.18,2.04.39,2.83,1.18,1.18,1.73,1.18,2.83-.39,2.04-1.18,2.83c-.78.78-1.73,1.18-2.83,1.18ZM0,16v-2.8c0-.57.15-1.09.44-1.56s.68-.84,1.16-1.09c1.03-.52,2.08-.9,3.15-1.16s2.15-.39,3.25-.39,2.18.13,3.25.39,2.12.65,3.15,1.16c.48.25.87.61,1.16,1.09s.44,1,.44,1.56v2.8H0Z" fill="currentColor"/></svg>  
+</template>

package/icons/qr_code.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M55.3902 99.7024V88.6243H66.4683V99.7024H55.3902ZM44.3122 88.6243V60.9292H55.3902V88.6243H44.3122ZM88.6243 72.0073V49.8512H99.7024V72.0073H88.6243ZM77.5463 49.8512V38.7731H88.6243V49.8512H77.5463ZM11.078 60.9292V49.8512H22.1561V60.9292H11.078ZM0 49.8512V38.7731H11.078V49.8512H0ZM49.8512 11.078V0H60.9292V11.078H49.8512ZM8.30853 24.9256H24.9256V8.30853H8.30853V24.9256ZM0 33.2341V0H33.2341V33.2341H0ZM8.30853 91.3938H24.9256V74.7768H8.30853V91.3938ZM0 99.7024V66.4683H33.2341V99.7024H0ZM74.7768 24.9256H91.3938V8.30853H74.7768V24.9256ZM66.4683 33.2341V0H99.7024V33.2341H66.4683ZM77.5463 99.7024V83.0853H66.4683V72.0073H88.6243V88.6243H99.7024V99.7024H77.5463ZM55.3902 60.9292V49.8512H77.5463V60.9292H55.3902ZM33.2341 60.9292V49.8512H22.1561V38.7731H55.3902V49.8512H44.3122V60.9292H33.2341ZM38.7731 33.2341V11.078H49.8512V22.1561H60.9292V33.2341H38.7731ZM12.4628 20.7713V12.4628H20.7713V20.7713H12.4628ZM12.4628 87.2396V78.931H20.7713V87.2396H12.4628ZM78.931 20.7713V12.4628H87.2396V20.7713H78.931Z" fill="currentColor" />
+  </svg>
+</template>

package/icons/stream/index.js

@@ -4,11 +4,9 @@ import ChatIcon from "#icons/stream/chat.vue";
 import CogIcon from "#icons/stream/cog.vue";
 import VolumeIcon from "#icons/stream/volume.vue";
 import LiveIcon from "#icons/stream/live.vue";
-import CloseIcon from "#icons/stream/close.vue";
 
 export {
   AirplayIcon,
-  CloseIcon,
   CastIcon,
   ChatIcon,
   CogIcon,

package/index.js

@@ -32,9 +32,15 @@ import BrFormRadioGroup from '#components/BrFormRadioGroup.vue'
 import BrFormRow from '#components/BrFormRow.vue'
 import BrFormTel from '#components/BrFormTel.vue'
 import BrFormTextarea from '#components/BrFormTextarea.vue'
+import BrFormToggle from '#components/BrFormToggle.vue'
 import BrFormUpdate from '#components/BrFormUpdate.vue'
 import BrFormVisible from '#components/BrFormVisible.vue'
 
+import BrNavCard from '#components/BrNavCard.vue'
+import BrNavCardWrap from '#components/BrNavCardWrap.vue'
+import BrNavLink from '#components/BrNavLink.vue'
+import BrOverlay from '#components/BrOverlay.vue'
+
 import BrLoader from '#components/BrLoader.vue'
 import BrSkiplink from '#components/BrSkiplink.vue'
 import BrStatusBars from '#components/BrStatusBars.vue'
@@ -76,9 +82,14 @@ export {
   BrFormRow,
   BrFormTel,
   BrFormTextarea,
+  BrFormToggle,
   BrFormUpdate,
   BrFormVisible,
   BrLoader,
+  BrNavCard,
+  BrNavCardWrap,
+  BrNavLink,
+  BrOverlay,
   BrSkiplink,
   BrStatusBars,
   BrWrap,

package/package.json

@@ -137,5 +137,5 @@
     "style:patterns": "cd patterns && gulp build:css",
     "build:patterns": "cd patterns && rm -rf html && pug views --out html"
   },
-  "version": "3.16.0"
+  "version": "3.18.0"
 }

package/scss/_br-button.scss

@@ -113,8 +113,15 @@
 /// Membership card button.
 /// Used for membership renewals.
 /// @group Buttons
-.btn.btn-membership-card {
-  @include btn-membership-card;
+.btn.btn-renew-membership {
+  @include btn-renew-membership;
+}
+
+/// Overlay exit button.
+/// Used for closing the overlay.
+/// @group Buttons
+.btn.btn-exit-overlay {
+  @include btn-exit-overlay;
 }
 
 .btn {

package/scss/{_br-checkbox.scss → _br-form-checkbox.scss}

@@ -3,11 +3,10 @@
 @use "mixins/input" as *;
 @use "mixins/focus" as *;
 
-// deprecate custom-checkbox class. br-checkbox is more descriptive
+/// @deprecated custom-checkbox class. br-form-checkbox is more descriptive
 
-.br-checkbox,
-.custom-checkbox {
-  @include br-checkbox; // formerly checkbox-input
+.br-form-checkbox {
+  @include br-form-checkbox; // formerly checkbox-input
 
   input[table][type='checkbox'] {
     @include inset;

package/scss/_br-form-toggle.scss

@@ -0,0 +1,71 @@
+@use "mixins/input/generic" as *;
+@use "mixins/breakpoints" as *;
+
+.br-form-toggle label {
+  @include generic-input-label;
+
+  @include small-up {
+    max-width: var(--width-layout-xs);
+  }
+
+  & {
+    grid-template-columns: auto 3.25rem;
+    padding-left: var(--padding-md);
+    display: inline-grid;
+    align-items: center;
+    font-weight: normal;
+    height: initial;
+    cursor: pointer;
+    width: 100%;
+    gap: 0.5em;
+  }
+}
+
+.br-form-toggle input[type=checkbox] {
+  background-color: var(--color-black-50-lighten);
+  transition-property: background-color;
+  transition-duration: 200ms;
+  border-radius: 1.125em;
+  position: relative;
+  appearance: none;
+  height: 1.875rem;
+  cursor: inherit;
+  width: 3.25rem;
+  color: white;
+  padding: 0;
+  margin: 0;
+
+  &:focus {
+    outline-color: var(--color-black-50-lighten);
+    outline-offset: var(--border-width-lg);
+    outline-width: var(--border-width-lg);
+    outline-style: solid;
+  }
+}
+
+.br-form-toggle input[type=checkbox]:before {
+  transition-property: transform;
+  transition-duration: 200ms;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  height: 1.65em;
+  bottom: 0.3em;
+  width: 1.65em;
+  left: 0.3em;
+  content: '';
+}
+
+.br-form-toggle input[type=checkbox]:checked:before {
+  -webkit-transform: translateX(1.65em);
+  -ms-transform: translateX(1.65em);
+  transform: translateX(1.65em);
+}
+
+.br-form-toggle input[type=checkbox]:checked {
+  background-color: var(--color-status-success);
+
+  &:focus {
+    outline-color: var(--color-status-success);
+  }
+}

package/scss/_br-nav-card-wrap.scss

@@ -0,0 +1,11 @@
+@use "mixins/breakpoints" as *;
+
+.br-nav-card-wrap {
+  gap: var(--gap-md);
+  display: grid;
+
+  @include medium-up {
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--gap-lg);
+  }
+}

package/scss/_br-navlink.scss

@@ -0,0 +1,51 @@
+.br-navlink {
+  border-color: var(--color-black-25-lighten);
+  border-bottom-width: var(--border-width-sm);
+  border-right-width: var(--border-width-sm);
+  border-left-width: var(--border-width-sm);
+  padding-bottom: var(--padding-md);
+  padding-right: var(--padding-lg);
+  padding-left: var(--padding-lg);
+  padding-top: var(--padding-md);
+  background-color: white;
+  text-decoration: none;
+  border-top-width: 0;
+  align-items: center;
+  border-style: solid;
+  gap: var(--gap-xs);
+  font-weight: bold;
+  display: flex;
+}
+
+.br-navlink:first-child {
+  border-top-right-radius: var(--border-radius-lg);
+  border-top-left-radius: var(--border-radius-lg);
+  border-top-width: var(--border-width-sm);
+}
+
+.br-navlink:last-child {
+  border-bottom-right-radius: var(--border-radius-lg);
+  border-bottom-left-radius: var(--border-radius-lg);
+}
+
+a.br-navlink:hover,
+a.br-navlink:focus {
+  background-color: var(--color-brand-generic-15-lighten);
+  outline-color: var(--color-brand-generic-90-darken);
+  outline-offset: calc(var(--border-width-sm) * -1);
+  color: var(--color-brand-generic-90-darken);
+  outline-width: var(--border-width-lg);
+  text-decoration: underline;
+  outline-style: solid;
+}
+
+div.br-navlink {
+  background-color: var(--color-brand-generic);
+  border-color: var(--color-brand-generic);
+  outline-offset: calc(var(--border-width-sm) * -1);
+  outline-color: var(--color-brand-generic);
+  outline-width: var(--border-width-lg);
+  outline-style: solid;
+  color: white;
+  cursor: default;
+}