barbican-reset 3.32.0 → 3.34.0

package/components/BrConfirmDone.vue

@@ -1,26 +1,32 @@
 <template>
-  <br-card confirm done>
+  <br-card class="confirm-done">
     <done-icon />
-    <br-card-title>Done</br-card-title>
-    <br-card-text v-if="$slots.default">
+    <br-card-title class="title">Done</br-card-title>
+    <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />
     </br-card-text>
   </br-card>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
+import { animateDone } from '#scripts/animations/confirm'
+
 import BrCard from '#components/BrCard.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
 import BrCardText from '#components/BrCardText.vue'
-
-import Animations from '#animations/index'
 import DoneIcon from '#icons/confirm/done.vue'
 
-export default {
-  mixins: [Animations],
-  components: { BrCard, BrCardTitle, BrCardText, DoneIcon },
-  mounted() {
-    this.animateDone()
-  },
-}
+onMounted(() => animateDone())
 </script>
+
+<style scoped>
+.confirm-done {
+  max-width: var(--width-title);
+  text-align: center;
+}
+
+.title {
+  text-align: center;
+}
+</style>

package/components/BrConfirmEmail.vue

@@ -1,33 +1,34 @@
 <template>
-  <br-card confirm email>
+  <br-card class="confirm-email">
     <email-icon />
-    <br-card-title v-if="$slots.title">
+    <br-card-title v-if="$slots.title" class="title">
       <slot name="title" />
     </br-card-title>
-    <br-card-text v-if="$slots.default">
+    <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />
     </br-card-text>
   </br-card>
 </template>
 
-<script>
+<script setup>
+import { onMounted } from 'vue'
+import { animateEmail } from '#scripts/animations/confirm'
+
 import BrCard from '#components/BrCard.vue'
 import BrCardTitle from '#components/BrCardTitle.vue'
 import BrCardText from '#components/BrCardText.vue'
-
-import Animations from '#animations/index'
 import EmailIcon from '#icons/confirm/email.vue'
 
-export default {
-  mixins: [Animations],
-  components: {
-    BrCard,
-    BrCardTitle,
-    BrCardText,
-    EmailIcon,
-  },
-  mounted() {
-    this.animateEmail()
-  },
-}
+onMounted(() => animateEmail())
 </script>
+
+<style scoped>
+.confirm-email {
+  max-width: var(--width-title);
+  text-align: center;
+}
+
+.title {
+  text-align: center;
+}
+</style>

package/components/BrDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="br-details">
-    <br-button variant="summary" @click="update">
+    <br-button variant="summary" @click="update" :data-test="'toggle-' + label">
       <div class="wrap-title">
         <slot name="title">Title goes here</slot>
       </div>
@@ -20,6 +20,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  label: {
+    type: String,
+    default: 'details',
+  },
 })
 
 const update = () => emit('update', { open: !props.open })
@@ -50,6 +54,6 @@ const update = () => emit('update', { open: !props.open })
 }
 
 .wrap-content.open {
-  margin-top: var(--margin-xl);
+  margin-top: var(--margin-xxl);
 }
 </style>

package/components/BrFormCheckbox.vue

@@ -1,14 +1,22 @@
+<!--
+  @component BrFormCheckbox
+  @description A checkbox form field that wraps BrFormInput (type="checkbox") inside a BrFormLabel.
+  Supports success/error states, disabled state, block-level layout, and an optional label slot.
+  Non-prop attributes (e.g. name, value) are forwarded directly to the underlying input element.
+  Any classes passed to this component are merged onto the root wrapper div.
+-->
 <template>
-  <div :class="['br-form-checkbox', { block }]">
+  <div :class="['br-form-checkbox', { block }, $attrs.class]">
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
+      :returns="returns"
       :id="generateID">
       <br-form-input
         :class="[{ success }, { error }]"
         :disabled="disabled"
+        v-bind="inputAttrs"
         :id="generateID"
-        v-bind="$attrs"
         type="checkbox"
         :error="error" />
       <span v-if="$slots.default" class="label-text">
@@ -19,21 +27,47 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, useAttrs } from 'vue'
 import formatKebabCase from '#helpers/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
+/** All fallthrough attributes from the parent. */
+const attrs = useAttrs()
+
+/**
+ * Attrs forwarded to the inner input, with `class` removed so it doesn't
+ * double-apply (class is already merged onto the root div via $attrs.class).
+ *
+ * @type {import('vue').ComputedRef<Record<string, unknown>>}
+ */
+const inputAttrs = computed(() => {
+  const { class: _, ...rest } = attrs
+  return rest
+})
+
+/**
+ * Disable automatic attribute inheritance so $attrs can be manually
+ * forwarded to the inner input element rather than the root div.
+ */
 defineOptions({
   inheritAttrs: false,
 })
 
+/**
+ * @prop {string}  [id]       - Explicit id for the input/label pair. Falls back to a random id.
+ * @prop {boolean} [disabled] - Disables the checkbox input and label.
+ * @prop {boolean} [success]  - Applies success styling to the label and input.
+ * @prop {boolean} [error]    - Applies error styling to the label and input.
+ * @prop {boolean} [block]    - Makes the checkbox wrapper display as a block-level element.
+ */
 const props = defineProps({
   id: String,
   disabled: Boolean,
   success: Boolean,
   error: Boolean,
   block: Boolean,
+  returns: Boolean,
 })
 
 // @description Returns a string for the "id" attribute

package/components/BrFormLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :class="['br-form-label', { disabled }]"
+    :class="['br-form-label', { disabled }, { returns }]"
     :is="!disabled ? 'label' : 'div'"
     :for="!disabled ? id : null">
     <slot />
@@ -14,6 +14,7 @@ const props = defineProps({
   disabled: Boolean,
   required: Boolean,
   optional: Boolean,
+  returns: Boolean,
   id: String,
 })
 </script>

package/components/BrFormRadio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="br-form-radio">
+  <div :class="generateClassnames">
     <br-form-label
       :class="[{ success }, { error }]"
       :disabled="disabled"
@@ -11,7 +11,7 @@
         v-bind="$attrs"
         :error="error"
         type="radio" />
-      <span class="label-text">
+      <span v-if="$slots.default" class="label-text">
         <slot />
       </span>
     </br-form-label>
@@ -25,6 +25,20 @@ import formatKebabCase from '#helpers/formatKebabCase'
 import BrFormLabel from '#components/BrFormLabel.vue'
 import BrFormInput from '#components/BrFormInput.vue'
 
+const generateClassnames = computed(() => {
+  let classnames = ['br-form-radio']
+
+  if (props.table) {
+    classnames.push('table')
+  }
+
+  if (!props.table) {
+    classnames.push('default')
+  }
+
+  return classnames
+})
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -45,6 +59,10 @@ const props = defineProps({
     default: false,
     type: Boolean,
   },
+  table: {
+    default: false,
+    type: Boolean,
+  },
 })
 
 // @description Returns a string for the "id" attribute

package/components/BrOverlay.vue

@@ -10,24 +10,31 @@
 </template>
 
 <script setup>
-import { onMounted, onUnmounted } from 'vue';
-import BrButton from "#components/BrButton.vue";
-import CloseIcon from "#icons/close.vue";
+import { onMounted, onUnmounted } from 'vue'
+import { constrainTabbing } from '#scripts/helpers'
+import BrButton from '#components/BrButton.vue'
+import CloseIcon from '#icons/close.vue'
 
-const emit = defineEmits(["closeOverlay"]);
+const emit = defineEmits(['closeOverlay'])
+
+function constrainOverlayPadding() {
+  let $overlay = document.querySelector('.br-overlay-wrap')
+  constrainTabbing($overlay)
+}
 
 function listenForKeys({ key }) {
   if (key == 'Escape') {
-    emit('closeOverlay')    
+    emit('closeOverlay')
   }
 }
 
 onMounted(() => {
   document.addEventListener('keydown', listenForKeys)
+  document.addEventListener('keydown', constrainOverlayPadding)
 })
 
 onUnmounted(() => {
   document.removeEventListener('keydown', listenForKeys)
+  document.removeEventListener('keydown', constrainOverlayPadding)
 })
 </script>
-

package/components/BrTableCell.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="generateClassnames">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const generateClassnames = computed(() => {
+  let classnames = ['br-table-cell']
+
+  if (props.width) {
+    classnames.push('width-' + props.width)
+  }
+
+  if (props.right) {
+    classnames.push('align-right')
+  }
+
+  if (props.center) {
+    classnames.push('align-center')
+  }
+
+  if (props.radio) {
+    classnames.push('radio')
+  }
+
+  if (props.returns) {
+    classnames.push('returns')
+  }
+
+  if (!props.radio && !props.returns) {
+    classnames.push('default')
+  }
+
+  return classnames
+})
+
+const props = defineProps({
+  width: {
+    type: String,
+    default: 'stretch',
+  },
+  returns: Boolean,
+  right: Boolean,
+  center: Boolean,
+  radio: Boolean,
+})
+</script>

package/components/BrTableHeader.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="br-table-header">
-    <div class="br-table-header-title">
-      <slot />
-    </div>
-    <div class="br-table-header-title yes">Yes</div>
-    <div class="br-table-header-title no">No</div>
+    <slot />
   </div>
 </template>

package/components/BrTableRow.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="br-table-row">
+    <slot />
+  </div>
+</template>

package/components/BrWrap.vue

@@ -17,11 +17,13 @@ const generateComponentClasses = computed(() => {
   if (props.cluster) {
     classnames.push('cluster')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.orders) {
     classnames.push('orders')
     classnames.push('align-' + props.align)
+    classnames.push('size-' + props.size)
   }
 
   if (props.preferences) {
@@ -44,5 +46,9 @@ const props = defineProps({
     type: String,
     default: 'middle',
   },
+  size: {
+    type: String,
+    default: 'xs',
+  },
 })
 </script>

package/index.js

@@ -45,7 +45,9 @@ import BrOverlay from '#components/BrOverlay.vue'
 import BrLoader from '#components/BrLoader.vue'
 import BrSkiplink from '#components/BrSkiplink.vue'
 import BrStatusBars from '#components/BrStatusBars.vue'
+import BrTableCell from '#components/BrTableCell.vue'
 import BrTableHeader from '#components/BrTableHeader.vue'
+import BrTableRow from '#components/BrTableRow.vue'
 import BrWrap from '#components/BrWrap.vue'
 
 export {
@@ -89,6 +91,8 @@ export {
   BrOverlay,
   BrSkiplink,
   BrStatusBars,
+  BrTableCell,
   BrTableHeader,
+  BrTableRow,
   BrWrap,
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "3.32.0",
+  "version": "3.34.0",
   "description": "Shared design system for Barbican projects, providing SCSS utilities, animations, icons, Vue components, and JS helpers for consistent styling and behaviour.",
   "main": "index.js",
   "exports": {

package/scripts/animations/confirm.js

@@ -0,0 +1,79 @@
+import gsap from 'gsap'
+
+let defaults = {
+  duration: 0.6,
+  ease: 'power1.in',
+  transformOrigin: 'center',
+}
+
+let fadeIn = {
+  duration: 0.3,
+  opacity: 0,
+  delay: 0.3,
+}
+
+let explode = {
+  ease: 'power1.out',
+  opacity: 0,
+  scale: 1.5,
+}
+
+export function animateDone() {
+  let $card = document.querySelector('.br-card.confirm-done')
+  let $title = $card.querySelector('.br-card-title')
+  let $outline = $card.querySelector('.outline')
+  let $arrow = $card.querySelector('.arrow')
+  let $tick = $card.querySelector('.tick')
+
+  let tl = gsap.timeline({ defaults })
+
+  let $clone = $title.cloneNode(true)
+
+  $clone.classList.add('clone')
+
+  $title.after($clone)
+
+  let cloneHeight = $card.querySelector('.clone').offsetHeight
+
+  $clone.style.marginTop = `-${cloneHeight}px`
+
+  // prettier-ignore
+  tl.set($arrow, { opacity: 0 })
+    .from($title, fadeIn)
+    .set($clone, { opacity: 0.4 })
+    .from($outline, { drawSVG: '0%' }, 'start')
+    .from($tick, { drawSVG: '0%', duration: 0.3 }, 'start')
+    .to($clone, explode, 'start')
+    .set($arrow, { opacity: 1 })
+    .from($arrow, { x: -6, ease: 'power1.out' })
+}
+
+export function animateEmail() {
+  let $card = document.querySelector('.br-card.confirm-email')
+  let $title = $card.querySelector('.br-card-title')
+  let $outline = $card.querySelector('.outline')
+  let $arrow = $card.querySelector('.arrow')
+  let $fold = $card.querySelector('.fold')
+
+  let tl = gsap.timeline({ defaults })
+
+  let $clone = $title.cloneNode(true)
+
+  $clone.classList.add('clone')
+
+  $title.after($clone)
+
+  let cloneHeight = $card.querySelector('.clone').offsetHeight
+
+  $clone.style.marginTop = `-${cloneHeight}px`
+
+  // prettier-ignore
+  tl.set($arrow, { opacity: 0 })
+    .from($title, fadeIn)
+    .set($clone, { opacity: 0.4 })
+    .from($outline, { drawSVG: '0%' }, 'start')
+    .from($fold, { drawSVG: '0%', duration: 0.3 }, 'start')
+    .to($clone, explode, 'start')
+    .set($arrow, { opacity: 1 })
+    .from($arrow, { x: -6, ease: 'power1.out' })
+}

package/scripts/helpers/constrainTabbing.js

@@ -0,0 +1,40 @@
+/**
+ * Constrains keyboard tab focus to within a given DOM element, creating a focus trap.
+ * When the user tabs past the last focusable element, focus wraps to the first,
+ * and vice versa when shift-tabbing past the first.
+ *
+ * Useful for modal dialogs and overlays where focus should not escape to the
+ * rest of the page while the element is active.
+ *
+ * @param {HTMLElement} element - The container element to trap focus within.
+ * @returns {void}
+ *
+ * @example
+ * constrainTabbing(document.getElementById('modal'))
+ */
+export default function (element) {
+  let focusableEls = element.querySelectorAll('a[href]:not([disabled], [rel=noopener]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])')
+  let firstFocusableEl = focusableEls[0]
+  let lastFocusableEl = focusableEls[focusableEls.length - 1]
+  let KEYCODE_TAB = 9
+
+  element.addEventListener('keydown', function (event) {
+    let { key, keyCode, shiftKey } = event
+
+    var isTabPressed = key === 'Tab' || keyCode === KEYCODE_TAB
+
+    if (!isTabPressed) return
+
+    if (shiftKey) {
+      if (document.activeElement === firstFocusableEl) {
+        lastFocusableEl.focus()
+        event.preventDefault()
+      }
+    } else {
+      if (document.activeElement === lastFocusableEl) {
+        firstFocusableEl.focus()
+        event.preventDefault()
+      }
+    }
+  })
+}

package/scripts/helpers/logObject.js

@@ -1,17 +1,10 @@
 /**
- * Logs an entire object to the console, including deeply nested children.
- * Uses `util.inspect` to avoid truncation of complex or deeply nested structures.
+ * Logs a value to the console as pretty-printed JSON.
  *
- * @param {*} target - The value to inspect and log.
+ * @param {*} target - The value to log.
  * @returns {void}
- *
- * @example
- * logObject({ complicated: 'object', with: { child: 'values' } })
  */
 
-import util from 'util'
-
 export default function (target) {
-  let options = { showHidden: false, depth: null, colors: true }
-  console.log(util.inspect(target, options))
+  return console.log(JSON.stringify(target, null, 2))
 }

package/scripts/helpers.js

@@ -1,5 +1,6 @@
 import compareArrays from '#helpers/compareArrays'
+import constrainTabbing from '#helpers/constrainTabbing'
 import formatKebabCase from '#helpers/formatKebabCase'
 import logObject from '#helpers/logObject'
 
-export { compareArrays, formatKebabCase, logObject }
+export { compareArrays, constrainTabbing, formatKebabCase, logObject }

package/scss/_atomic.scss

@@ -9,6 +9,7 @@
 @use "atomic/min-widths";
 @use "atomic/paddings";
 @use "atomic/text-aligns";
+@use "atomic/widths";
 
 .border-radius-lg {
   border-radius: var(--border-radius-lg);
@@ -48,4 +49,8 @@
 
 .display-inline-block {
   display: inline-block;
+}
+
+.word-wrap-break-word {
+  word-wrap: break-word;
 }

package/scss/_br-form-fieldset.scss

@@ -23,14 +23,14 @@ fieldset,
 
 @include small-up {
   .fieldset.table {
-    grid-template-columns: auto calc(var(--width-column) * 2);
     margin-top: var(--margin-sm);
     border-radius: 0;
-    display: grid;
+    display: flex;
     padding: 0;
   }
 
   .fieldset .wrap-legend {
+    width: stretch;
     margin-top: 0;
   }
 

package/scss/_br-form-label.scss

@@ -0,0 +1,3 @@
+.br-form-label {
+  font-weight: bold;
+}

package/scss/_br-form-radio.scss

@@ -1,5 +1,21 @@
 @use "mixins/input" as *;
+@use "mixins/breakpoints" as *;
 
-.br-form-radio {
+.br-form-radio.default {
   @include br-form-radio;
+}
+
+.br-form-radio.table {
+  @include br-form-radio;
+
+  @include medium-up {
+    .br-form-label {
+      padding: var(--padding-sm);
+      border-radius: 50%;
+    }
+
+    .label-text {
+      display: none;
+    }
+  }
 }

package/scss/_br-table-cell.scss

@@ -0,0 +1,75 @@
+@use "mixins/breakpoints" as *;
+@use "mixins/br-wrap" as *;
+
+@mixin br-table-cell--default {
+  @include medium-up {
+    padding: var(--padding-md);
+
+    &:not(:first-child) {
+      border-left-color: var(--color-black-25-lighten);
+      border-left-width: var(--border-width-sm);
+      border-left-style: solid;
+    }
+
+    &.align-right {
+      text-align: right;
+    }
+
+    &.align-center {
+      text-align: center;
+    }
+
+    &:not(.width-stretch) {
+      flex-shrink: 0;
+    }
+
+    >label {
+      display: none;
+    }
+  }
+
+  @include medium-down {
+    margin: var(--margin-sm);
+  }
+}
+
+@mixin br-table-cell--radio {
+  @include br-table-cell--default;
+
+  @include medium-down {
+    &:not(.width-stretch) {
+      display: inline-block;
+      width: initial;
+    }
+  }
+}
+
+@mixin br-table-cell--returns {
+  @include br-table-cell--default;
+
+  @include medium-up {
+    padding: 0;
+  }
+
+  @include medium-down {
+    border-bottom-color: var(--color-black-25-lighten);
+    border-bottom-width: var(--border-width-sm);
+    border-bottom-style: dashed;
+    margin-right: -0.5rem;
+    margin-left: -0.5rem;
+    margin-bottom: 1rem;
+    margin-top: -0.5rem;
+  }
+}
+
+.br-table-cell.default {
+  @include br-table-cell--default;
+}
+
+.br-table-cell.radio {
+  @include br-table-cell--radio;
+}
+
+.br-table-cell.returns {
+  @include br-table-cell--returns;
+}

package/scss/_br-table-header.scss

@@ -3,58 +3,12 @@
 .br-table-header {
   border-color: var(--color-black-25-lighten);
   border-width: var(--border-width-sm);
-  margin-bottom: var(--margin-sm);
+  margin-bottom: var(--margin-md);
   border-style: solid;
   display: none;
 
-  @include small-up {
+  @include medium-up {
     background-color: var(--color-black-5-lighten);
-    grid-template-columns: auto repeat(2, 5rem);
-    display: grid;
+    display: flex;
   }
-}
-
-.br-table-header-title {
-  padding: var(--padding-md);
-  font-weight: bold;
-}
-
-.br-table-header-title+.br-table-header-title {
-  border-left-color: var(--color-black-25-lighten);
-  border-left-width: var(--border-width-sm);
-  border-left-style: solid;
-}
-
-.br-table-header-title.yes,
-.br-table-header-title.no {
-  text-align: center;
-}
-
-.br-table-rows {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.br-table-row {
-  border-color: var(--color-black-25-lighten);
-  border-width: var(--border-width-sm);
-  border-style: solid;
-
-  @include small-up {
-    grid-template-columns: auto repeat(2, 5rem);
-    display: grid;
-  }
-}
-
-.br-table-row div {
-  border-color: var(--color-black-25-lighten);
-  border-width: var(--border-width-sm);
-  padding: var(--padding-md);
-}
-
-.br-table-row div+div {
-  border-left-color: var(--color-black-25-lighten);
-  border-left-width: var(--border-width-sm);
-  border-left-style: solid;
 }

package/scss/_br-table-row.scss

@@ -0,0 +1,24 @@
+@use "mixins/breakpoints" as *;
+
+@mixin br-table-row--default {
+  border-color: var(--color-black-25-lighten);
+  border-width: var(--border-width-sm);
+  border-style: solid;
+
+  &:not(:last-child) {
+    margin-bottom: var(--margin-md);
+  }
+
+  @include medium-up {
+    display: flex;
+  }
+
+  @include medium-down {
+    border-radius: var(--border-radius-lg);
+    padding: var(--padding-sm);
+  }
+}
+
+.br-table-row {
+  @include br-table-row--default;
+}

package/scss/_variables.scss

@@ -344,6 +344,7 @@
   --line-height-xs: 1;
   --line-height-sm: 1.15;
   --line-height-md: 1.35;
+  --line-height-lg: 1.5;
 
   // Fixed line height for button/menu items (`38px`).
   --line-height-button-menu: 2.375rem;
@@ -432,8 +433,8 @@
   --width-icon: 10rem;
   // Title column width (`320px`).
   --width-title: 20rem;
-  // Extra-small layout max-width (`384px`).
-  --width-layout-xs: 24rem;
+  // Extra-small layout max-width (`400px`).
+  --width-layout-xs: 25rem;
   // Small layout max-width (`800px`).
   --width-layout-sm: 50rem;
   // Medium layout max-width (`960px`).

package/scss/atomic/_font-sizes.scss

@@ -1,3 +1,5 @@
+@use "../mixins/font-size" as *;
+
 $iterations: (
   "lg": var(--font-size-lg),
   "h1": var(--font-size-h1),
@@ -12,4 +14,8 @@ $iterations: (
   .font-size-#{$name} {
     font-size: #{$value};
   }
+}
+
+.font-size-subtitle {
+  @include font-size-subtitle;
 }

package/scss/atomic/_margins.scss

@@ -20,4 +20,16 @@ $iterations: (
       #{$margin}: #{$value}rem;
     }
   }
+}
+
+@each $name, $value in $iterations {
+  .margin-top-bottom-#{$name} {
+    margin-bottom: #{$value}rem;
+    margin-top: #{$value}rem;
+  }
+
+  .margin-left-right-#{$name} {
+    margin-right: #{$value}rem;
+    margin-left: #{$value}rem;
+  }
 }

package/scss/atomic/_widths.scss

@@ -0,0 +1,43 @@
+$iterations: (
+  "0": 0,
+  "0-5": 0.5,
+  "1": 1,
+  "1-5": 1.5,
+  "2": 2,
+  "2-5": 2.5,
+  "3": 3,
+  "3-5": 3.5,
+  "4": 4,
+  "4-5": 4.5,
+  "5": 5,
+  "5-5": 5.5,
+  "6": 6,
+  "6-5": 6.5,
+  "7": 7,
+  "7-5": 7.5,
+  "8": 8,
+  "8-5": 8.5,
+  "9": 9,
+  "9-5": 9.5,
+  "10": 10,
+  "10-5": 10.5,
+  "11": 11,
+  "11-5": 11.5,
+  "12": 12,
+  "12-5": 12.5,
+  "13": 13,
+  "13-5": 13.5,
+  "14": 14,
+  "14-5": 14.5,
+  "15": 15,
+);
+
+@each $name, $value in $iterations {
+  .width-#{$name} {
+    width: #{$value}rem;
+  }
+}
+
+.width-stretch {
+  width: stretch;
+}

package/scss/index.scss

@@ -8,6 +8,7 @@
 @use "br-form-checkbox";
 @use "br-form-edit";
 @use "br-form-fieldset";
+@use "br-form-label";
 @use "br-form-radio";
 @use "br-form-row";
 @use "br-form-textarea";
@@ -21,7 +22,9 @@
 @use "br-promo";
 @use "br-select";
 @use "br-skiplink";
+@use "br-table-cell";
 @use "br-table-header";
+@use "br-table-row";
 @use "br-wrap";
 
 @use "city-of-london";

package/scss/mixins/_br-card.scss

@@ -1,4 +1,5 @@
 @use "../mixins/breakpoints" as *;
+@use "../mixins/font-size" as *;
 @use "card/default" as *;
 @use "card/inline" as *;
 @use "card/membership" as *;
@@ -62,11 +63,7 @@
 }
 
 @mixin br-card-subtitle {
-  font-size: var(--font-size-h5);
-
-  @include medium-up {
-    font-size: var(--font-size-h4);
-  }
+  @include font-size-subtitle;
 }
 
 @mixin br-card--body {
@@ -114,6 +111,6 @@
 
 @mixin br-card-text {
   +.br-card-text {
-    margin-top: var(--margin-md);
+    margin-top: var(--margin-sm);
   }
 }

package/scss/mixins/_br-form-radio.scss

@@ -15,14 +15,14 @@
 @mixin br-form-radio--input {
   cursor: pointer;
 
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-25-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-radio--input-colors;
   }
 }
@@ -84,7 +84,7 @@
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-radio-label--disabled;
       @include br-form-radio-label--hover;
     }

package/scss/mixins/_br-wrap.scss

@@ -1,5 +1,7 @@
 @use "../mixins/breakpoints" as *;
 
+$sizes: xs, sm, md, lg;
+
 @mixin br-wrap--default {
   max-width: var(--width-layout-sm);
   margin-right: auto;
@@ -17,10 +19,14 @@
 }
 
 @mixin br-wrap--cluster {
-  margin: var(--margin-wrap-xs);
+  @each $size in $sizes {
+    &.size-#{$size} {
+      margin: var(--margin-wrap-#{$size});
 
-  >* {
-    margin: var(--margin-xs);
+      >* {
+        margin: var(--margin-#{$size});
+      }
+    }
   }
 
   &.align-middle>* {
@@ -34,8 +40,7 @@
 
 @mixin br-wrap--preferences {
   @include small-up {
-    grid-template-columns: var(--width-column) var(--width-column);
-    display: grid;
+    display: flex;
   }
 
   @include small-down {
@@ -46,21 +51,19 @@
 @mixin br-wrap--orders {
   @include br-wrap--cluster;
 
-  $margin: calc(var(--margin-xs) * 2);
+  @each $size in $sizes {
+    $margin: calc(var(--margin-#{$size}) * 2);
 
-  @include medium-down {
-    >* {
-      width: calc(100% - $margin);
-    }
-  }
-
-  @include medium-up {
-    >* {
-      width: calc(50% - $margin);
-    }
+    &.size-#{$size} {
+      >* {
+        @include medium-down {
+          width: calc(100% - $margin);
+        }
 
-    >*.open {
-      width: calc(100% - $margin);
+        @include medium-up {
+          width: calc(50% - $margin);
+        }
+      }
     }
   }
 }

package/scss/mixins/_font-size.scss

@@ -0,0 +1,9 @@
+@use "../mixins/breakpoints" as *;
+
+@mixin font-size-subtitle {
+  font-size: var(--font-size-h5);
+
+  @include medium-up {
+    font-size: var(--font-size-h4);
+  }
+}

package/scss/mixins/buttons/custom/_renew-membership.scss

@@ -1,4 +1,5 @@
 @use "../../../mixins/buttons/outline" as *;
+@use "../../../mixins/buttons/slim" as *;
 
 $iterations: (
   "member": var(--color-brand-membership),
@@ -12,6 +13,7 @@ $iterations: (
 
 @mixin btn-renew-membership {
   @include outline-button($color: white, $background: transparent);
+  @include btn-slim;
 
   &:focus,
   &:hover {

package/scss/mixins/index.scss

@@ -18,6 +18,7 @@
 @forward "core";
 @forward "festival";
 @forward "focus";
+@forward "font-size";
 @forward "headings";
 @forward "input";
 @forward "loading";

package/scss/mixins/input/_checkbox.scss

@@ -1,3 +1,5 @@
+@use "../../mixins/breakpoints" as *;
+
 @mixin br-form-checkbox--input-colors {
   &:not(.error):not(.success) {
     outline-color: var(--color-status-neutral);
@@ -13,14 +15,14 @@
 }
 
 @mixin br-form-checkbox--input {
-  &:focus {
+  &:focus-visible {
     outline-color: var(--color-black-50-lighten);
     outline-offset: var(--outline-offset-lg);
     outline-width: var(--border-width-sm);
     outline-style: dashed;
   }
 
-  &:checked:focus {
+  &:checked:focus-visible {
     @include br-form-checkbox--input-colors;
   }
 }
@@ -79,11 +81,26 @@
     }
   }
 
+  &.returns {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-width: 0;
+
+    @include medium-up {
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+    }
+
+    @include medium-down {
+      padding: var(--padding-lg);
+    }
+  }
+
   &:not(.disabled) {
     cursor: pointer;
 
     &:hover,
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       @include br-form-checkbox-label--disabled;
       @include br-form-checkbox-label--hover;
     }

package/animations/confirm.js

@@ -1,61 +0,0 @@
-import gsap from 'gsap'
-
-/** @type {gsap.TweenVars} Fade-in vars: animates element from transparent with a short delay */
-const fadeIn = {
-  duration: 0.3,
-  opacity: 0,
-  delay: 0.3,
-}
-
-/** @type {gsap.TweenVars} Explode vars: scales element up and fades it out */
-const explode = {
-  ease: 'power1.out',
-  opacity: 0,
-  scale: 1.5,
-}
-
-/** @type {gsap.TimelineVars} Default timeline settings shared across all confirm animations */
-const defaults = {
-  duration: 0.6,
-  ease: 'power1.in',
-  transformOrigin: 'center',
-}
-
-/**
- * Animates the email confirmation card.
- * Fades in the title, draws the envelope outline and fold SVG paths,
- * explodes a cloned title, then slides in the arrow.
- */
-export const animateEmail = () => {
-  const query = (target) => document.querySelector(`.card[email] ${target}`)
-  const title = query('.card-title')
-  const outline = query('.outline')
-  const arrow = query('.arrow')
-  const fold = query('.fold')
-  const tl = gsap.timeline({ defaults })
-
-  const clone = title.cloneNode(true)
-  clone.classList.add('clone')
-  title.after(clone)
-
-  tl.set(arrow, { opacity: 0 }).from(title, fadeIn).set(clone, { opacity: 0.4 }).from(outline, { drawSVG: '0%' }, 'start').from(fold, { drawSVG: '0%', duration: 0.3 }, 'start').to(clone, explode, 'start').set(arrow, { opacity: 1 }).from(arrow, { x: -6, ease: 'power1.out' })
-}
-
-/**
- * Animates the done confirmation card.
- * Fades in the title, draws the circle outline and tick SVG paths,
- * and explodes a cloned title.
- */
-export const animateDone = () => {
-  const query = (target) => document.querySelector(`.card[done] ${target}`)
-  const title = query('.card-title')
-  const outline = query('.outline')
-  const tick = query('.tick')
-  const tl = gsap.timeline({ defaults })
-
-  const clone = title.cloneNode(true)
-  clone.classList.add('clone')
-  title.after(clone)
-
-  tl.from(title, fadeIn).set(clone, { opacity: 0.4 }).from(outline, { drawSVG: '0%' }, 'start').from(tick, { drawSVG: '0%', duration: 0.3 }, 'start+=0.3').to(clone, explode, 'start')
-}

package/animations/index.js

@@ -1,8 +0,0 @@
-import { animateEmail, animateDone } from '#animations/confirm'
-
-export default {
-  methods: {
-    animateEmail,
-    animateDone,
-  },
-}