barbican-reset 3.44.0 → 3.45.0

package/components/BrConfirmDone.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-done">
-    <br-done-icon />
+    <br-done-icon class="margin-left-right-auto" />
     <br-card-title class="title">Done</br-card-title>
     <br-card-text v-if="$slots.default" class="margin-top-1">
       <slot />

package/components/BrConfirmEmail.vue

@@ -1,6 +1,6 @@
 <template>
   <br-card class="confirm-email">
-    <br-email-icon />
+    <br-email-icon class="margin-left-right-auto" />
     <br-card-title v-if="$slots.title" class="title">
       <slot name="title" />
     </br-card-title>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "barbican-reset",
-  "version": "3.44.0",
+  "version": "3.45.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/scss/_br-form-select.scss

@@ -47,6 +47,7 @@
 .br-form-select-link:hover {
   background-color: var(--background-color-form-select-link-focus);
   outline-offset: var(--outline-inset-lg);
+  outline-width: var(--border-width-sm);
   outline-color: inherit;
   outline-style: dashed;
 }

package/scss/atomic/_margins.scss

@@ -32,4 +32,9 @@ $iterations: (
     margin-right: #{$value}rem;
     margin-left: #{$value}rem;
   }
+}
+
+.margin-left-right-auto {
+  margin-right: auto;
+  margin-left: auto;
 }

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

@@ -103,12 +103,6 @@
 @mixin br-form-radio {
   display: inline-flex;
 
-  /// @TODO: block variant
-
-  // &:not(:last-child) {
-  //   margin-bottom: var(--margin-sm);
-  // } 
-
   .br-form-label {
     @include br-form-radio--label;
   }

package/scss/mixins/card/_membership.scss

@@ -12,7 +12,6 @@
     color: var(--color-card-membership);
     border-radius: 0.75rem;
     border-style: solid;
-    margin-top: 1rem;
     width: 100%;
   }
 

package/scss/mixins/input/_text.scss

@@ -27,12 +27,13 @@
   background-color: var(--color-black-5-lighten);
   border-color: var(--color-black-25-lighten);
   border-radius: var(--border-radius-md);
+  border-width: var(--border-width-sm);
   color: var(--color-black-60-lighten);
   padding: var(--padding-lg);
-  border-width: var(--border-width-sm);
   font-family: inherit;
   border-style: solid;
   font-size: inherit;
+  min-width: 0;
 
   &:not(:disabled) {
     @include input-focus {

package/utils/datetimes.js

@@ -4,6 +4,7 @@ let stringFormats = {
   date: {
     sm: 'yyyy-LL-dd',
     md: 'ccc d LLL',
+    md_inc_year: 'ccc d LLL yyyy',
   },
   time: {
     sm: 'ha',
@@ -58,6 +59,12 @@ let formatSmReverseDate = (value, separator) => DateTime.fromISO(value).toFormat
  */
 let formatMdDate = (value) => DateTime.fromISO(value).toFormat(stringFormats.date.md)
 
+/**
+ * @param {string} value - ISO date string
+ * @returns {string} e.g. "Tue 24 Mar 2026"
+ */
+let formatMdIncYearDate = (value) => DateTime.fromISO(value).toFormat(stringFormats.date.md_inc_year)
+
 /**
  * @param {any} n - Day of month
  * @returns {string} e.g. "1st", "2nd", "3rd", "4th"
@@ -138,6 +145,7 @@ let formatDate = {
     }
   },
   md: (value) => formatMdDate(value),
+  md_inc_year: (value) => formatMdIncYearDate(value),
   lg: (value) => formatLgDate(value),
 }
 

package/scss/card/_membership-new.scss

@@ -1,32 +0,0 @@
-@use "../mixins/breakpoints" as *;
-
-$colors: (
-  "member": var(--color-brand-membership),
-  "member-plus": var(--color-donor-member-plus),
-  "patron": var(--color-donor-patron),
-  "premier-patron": var(--color-donor-patron),
-  "principal-patron": var(--color-donor-principal-patron),
-  "directors-circle": var(--color-donor-principal-patron),
-  "young-barbican": var(--color-brand-young-barbican),
-);
-
-$gradients: (
-  "member-plus": linear-gradient(var(--gradient-angle-membership), var(--gradient-member-plus)),
-  "patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-patron)),
-  "premier-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-premier-patron)),
-  "principal-patron": linear-gradient(var(--gradient-angle-membership), var(--gradient-principal-patron)),
-  "directors-circle": linear-gradient(var(--gradient-angle-membership), var(--gradient-directors-circle)),
-  "young-barbican": linear-gradient(var(--gradient-angle-membership), var(--gradient-young-barbican)),
-);
-
-@each $name, $value in $colors {
-  .br-card.membership-new.#{$name} {
-    background-color: #{$value};
-  }
-}
-
-@each $name, $value in $gradients {
-  .br-card.membership-new.#{$name} {
-    background-image: #{$value};
-  }
-}