@viasat/beam-styles 2.73.0 → 2.75.0

package/components/calendar.module.scss

@@ -0,0 +1,181 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+$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.
+  inline-size: fit-content;
+
+  // Announced but not drawn: the column's full weekday name, and each cell's
+  // full date. Both are cases where the visible text is an abbreviation and the
+  // spoken text needs to be the whole thing. This needs a real rule — an
+  // undeclared class resolves to undefined in the CSS-module build, and the
+  // text would render on screen instead of being hidden.
+  &__visually-hidden {
+    @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
+    // also add space above the first row and below the last.
+    border-collapse: collapse;
+  }
+
+  &__day {
+    box-sizing: border-box;
+    // Figma binds the cell's width to the same `height/md` token it uses for
+    // the 40px date cells, so the columns line up between header and grid.
+    inline-size: tokens.$bm-sem-size-height-md;
+    block-size: tokens.$bm-sem-size-height-sm;
+
+    font: tokens.$bm-sem-typo-label-xs;
+    color: tokens.$bm-sem-color-text-secondary;
+    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;
+  }
+
+  // 4px between week rows, with no leading or trailing gap.
+  //
+  // Structure-dependent: this relies on `<td>` being a direct child of `<tr>`
+  // and on the rows being direct siblings. Audit it before inserting any
+  // wrapper element into the grid (see AGENTS.md).
+  &__week + &__week > &__date {
+    padding-block-start: tokens.$bm-sem-space-25;
+  }
+
+  // The 40px round cell body. A `<span>` in C-1 — nothing is selectable yet, so
+  // the cell is text rather than a control — and a `<button>` again from C-3,
+  // which is why the name and the `position: relative` the state layer needs
+  // both stay put.
+  &__date-button {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: tokens.$bm-sem-size-height-md;
+    block-size: tokens.$bm-sem-size-height-md;
+    padding: 0;
+
+    border: none;
+    border-radius: tokens.$bm-sem-radius-round;
+    background-color: transparent;
+
+    font: tokens.$bm-sem-typo-body-sm;
+    color: tokens.$bm-sem-color-text-primary;
+
+    // Nothing is selectable until C-3; the state layer is muted in the TSX for
+    // the same reason. No `:hover` / `:focus-visible` rules here either — those
+    // belong to the state layer, per .claude/rules/accessibility.md.
+    cursor: default;
+  }
+
+  // Adjacent-month days.
+  //
+  // UNCONFIRMED BY DESIGN: Figma currently renders `outsideMonth` cells blank
+  // (i.e. `showOutsideDays={false}`), while the C-1 acceptance criteria call for
+  // dimmed dates. `text/secondary` is used rather than the disabled treatment
+  // because these days become selectable (C-3) and focusable (C-10), so the
+  // disabled look would signal the wrong affordance.
+  &__date[data-outside-month='true'] &__date-button {
+    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/components/index.scss

@@ -10,6 +10,7 @@
 @use './box.module.scss';
 @use './breadcrumbs.module.scss';
 @use './button.module.scss';
+@use './calendar.module.scss';
 @use './card.module.scss';
 @use './checkbox.module.scss';
 @use './chip.module.scss';

package/package.json

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

package/styles.css

@@ -4939,6 +4939,99 @@
 .bm-button--fluid {
   width: 100%;
 }
+.bm-calendar {
+  inline-size: fit-content;
+}
+.bm-calendar__visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  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;
+}
+.bm-calendar__day {
+  box-sizing: border-box;
+  inline-size: var(--bm-sem-size-height-md);
+  block-size: var(--bm-sem-size-height-sm);
+  font: var(--bm-sem-typo-label-xs);
+  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;
+}
+.bm-calendar__week + .bm-calendar__week > .bm-calendar__date {
+  padding-block-start: var(--bm-sem-space-25);
+}
+.bm-calendar__date-button {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--bm-sem-size-height-md);
+  block-size: var(--bm-sem-size-height-md);
+  padding: 0;
+  border: none;
+  border-radius: var(--bm-sem-radius-round);
+  background-color: transparent;
+  font: var(--bm-sem-typo-body-sm);
+  color: var(--bm-sem-color-text-primary);
+  cursor: default;
+}
+.bm-calendar__date[data-outside-month=true] .bm-calendar__date-button {
+  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,