@viasat/beam-styles 2.74.0 → 2.75.0

package/components/calendar.module.scss

@@ -4,6 +4,22 @@
 
 $calendarBaseClass: '#{constants.$prefix}calendar';
 
+// No motion tokens exist in the token set, so the duration is local — the same
+// approach dialog.module.scss takes with $dialog-motion-duration. The distance
+// is a spacing token (0.5rem), so the slide scales with the root font size the
+// way every other dimension in this lib does.
+$monthMotionDuration: 0.25s;
+$monthMotionOffset: tokens.$bm-sem-space-50;
+
+// Tokens resolve to `var(--…)`, and `-var(…)` isn't valid CSS, so the reverse
+// direction needs `calc` — the lib's precedent for negating one (button, card,
+// combobox).
+$monthMotionOffsetReverse: calc(0px - #{tokens.$bm-sem-space-50});
+
+// Signed horizontal offset the entering month slides in from. Set per
+// direction, and flipped again in RTL.
+$monthEnterOffset: '--#{constants.$prefix}calendar-month-enter-offset';
+
 .#{$calendarBaseClass} {
   // The grid is a fixed 7 × 40px wide per Figma; without this the root block
   // would stretch to its container and leave the table floating inside it.
@@ -18,6 +34,27 @@ $calendarBaseClass: '#{constants.$prefix}calendar';
     @include mixins.visually-hidden;
   }
 
+  &__header {
+    display: flex;
+    align-items: center;
+    // The 40px arrow buttons on both sides are equal width, so space-between
+    // centres the label without any further rules.
+    justify-content: space-between;
+    block-size: tokens.$bm-sem-size-height-md;
+  }
+
+  // Flex reverses the arrows' positions under `dir="rtl"`, but the chevron
+  // artwork is direction-agnostic, so without this both arrows end up pointing
+  // inward at the label. Rotating the glyph is the breadcrumbs precedent.
+  [dir='rtl'] &__header .#{constants.$prefix}icon {
+    transform: rotate(180deg);
+  }
+
+  &__header-label {
+    font: tokens.$bm-sem-typo-label-md;
+    color: tokens.$bm-sem-color-text-primary;
+  }
+
   &__grid {
     // Suppresses the UA's default cell borders and 2px spacing. Row rhythm is
     // handled by cell padding below instead of `border-spacing`, which would
@@ -37,6 +74,44 @@ $calendarBaseClass: '#{constants.$prefix}calendar';
     text-align: center;
   }
 
+  // Month transition. Only the date rows animate — the weekday header doesn't
+  // change between months, so animating it would be noise. `data-nav-direction`
+  // is absent until the user navigates, so the first paint never animates.
+  //
+  // The direction is carried as a custom property rather than a second keyframe
+  // so there is exactly one `animation` declaration. That matters for RTL:
+  // `translateX` has no logical equivalent, so the sign has to be flipped by
+  // selector, and a `[dir='rtl'] &` override (0,3,0) would outrank the
+  // reduced-motion rule below and defeat it. Flipping a value instead of an
+  // animation-name keeps the two concerns from colliding.
+  &__dates[data-nav-direction] {
+    animation: #{$calendarBaseClass}-month-enter $monthMotionDuration ease-out;
+
+    // WCAG 2.3.3 — the month swaps instantly when the user asks for less
+    // motion. Nested here so it shares the rule's specificity and wins on order.
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+    }
+  }
+
+  &__dates[data-nav-direction='next'] {
+    #{$monthEnterOffset}: #{$monthMotionOffset};
+  }
+
+  &__dates[data-nav-direction='previous'] {
+    #{$monthEnterOffset}: #{$monthMotionOffsetReverse};
+  }
+
+  // `[dir='rtl'] &` is this lib's dominant RTL precedent (breadcrumbs, slider,
+  // header).
+  [dir='rtl'] &__dates[data-nav-direction='next'] {
+    #{$monthEnterOffset}: #{$monthMotionOffsetReverse};
+  }
+
+  [dir='rtl'] &__dates[data-nav-direction='previous'] {
+    #{$monthEnterOffset}: #{$monthMotionOffset};
+  }
+
   &__date {
     padding: 0;
   }
@@ -89,3 +164,18 @@ $calendarBaseClass: '#{constants.$prefix}calendar';
     color: tokens.$bm-sem-color-text-secondary;
   }
 }
+
+// The new month slides in from the side it came from: paging forward brings it
+// in from the trailing edge, paging back from the leading edge. The offset
+// falls back to 0 so a missing custom property degrades to a plain fade.
+@keyframes #{$calendarBaseClass}-month-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(#{$monthEnterOffset}, 0));
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-styles",
-  "version": "2.74.0",
+  "version": "2.75.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",

package/styles.css

@@ -4952,6 +4952,19 @@
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+.bm-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  block-size: var(--bm-sem-size-height-md);
+}
+[dir=rtl] .bm-calendar__header .bm-icon {
+  transform: rotate(180deg);
+}
+.bm-calendar__header-label {
+  font: var(--bm-sem-typo-label-md);
+  color: var(--bm-sem-color-text-primary);
+}
 .bm-calendar__grid {
   border-collapse: collapse;
 }
@@ -4963,6 +4976,26 @@
   color: var(--bm-sem-color-text-secondary);
   text-align: center;
 }
+.bm-calendar__dates[data-nav-direction] {
+  animation: bm-calendar-month-enter 0.25s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bm-calendar__dates[data-nav-direction] {
+    animation: none;
+  }
+}
+.bm-calendar__dates[data-nav-direction=next] {
+  --bm-calendar-month-enter-offset: var(--bm-sem-space-50);
+}
+.bm-calendar__dates[data-nav-direction=previous] {
+  --bm-calendar-month-enter-offset: calc(0px - var(--bm-sem-space-50));
+}
+[dir=rtl] .bm-calendar__dates[data-nav-direction=next] {
+  --bm-calendar-month-enter-offset: calc(0px - var(--bm-sem-space-50));
+}
+[dir=rtl] .bm-calendar__dates[data-nav-direction=previous] {
+  --bm-calendar-month-enter-offset: var(--bm-sem-space-50);
+}
 .bm-calendar__date {
   padding: 0;
 }
@@ -4989,6 +5022,16 @@
   color: var(--bm-sem-color-text-secondary);
 }
 
+@keyframes bm-calendar-month-enter {
+  from {
+    opacity: 0;
+    transform: translateX(var(--bm-calendar-month-enter-offset, 0));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
 :root,
 :host,
 .bm-light,