@viasat/beam-styles 2.73.0 → 2.74.0

package/components/calendar.module.scss

@@ -0,0 +1,91 @@
+@use '../utils/constants.scss';
+@use '../utils/mixins.scss' as mixins;
+@use '../utils/tokens.scss' as tokens;
+
+$calendarBaseClass: '#{constants.$prefix}calendar';
+
+.#{$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;
+  }
+
+  &__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;
+  }
+
+  &__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;
+  }
+}

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.74.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",

package/styles.css

@@ -4939,6 +4939,56 @@
 .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__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__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);
+}
+
 :root,
 :host,
 .bm-light,