@viasat/beam-styles 2.72.1 → 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/dataTable.module.scss

@@ -84,19 +84,17 @@ $dataTableDensity: (
     background: tokens.$bm-comp-data-table-color-bg;
   }
 
-  // Scope zebra striping to body rows only. A plain `&__row:nth-of-type(even)`
-  // also shades the second row of grouped headers (masked today by the column
-  // header background), which would surface if that token ever changes.
-  &__body &__row:nth-of-type(even) {
-    background: tokens.$bm-comp-data-table-color-zebra;
+  // Body scoping keeps grouped header rows plain while rows opt into striping.
+  &__body &__row--striped {
+    background-color: tokens.$bm-comp-data-table-color-zebra;
   }
 
-  // Phase 1 display-only hover: a plain token background via `:hover`, no
-  // StateLayer (interactive rows adopt StateLayer in Phase 3). Placed after the
-  // zebra rule so it wins on equal specificity; full stripe-vs-hover precedence
-  // is owned by EPTOOLS-2195.
-  &__body &__row:hover {
-    background: tokens.$bm-sem-color-state-layer-hover;
+  // Opt-in hover layers over the base or zebra fill, scoped to this table's rows.
+  &--row-hover > &__body > &__row:hover {
+    background-image: linear-gradient(
+      tokens.$bm-sem-color-state-layer-hover,
+      tokens.$bm-sem-color-state-layer-hover
+    );
   }
 
   &__cell {

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.72.1",
+  "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,
@@ -7730,11 +7780,11 @@ textarea:focus-visible,
 .bm-data-table__body {
   background: var(--bm-comp-data-table-color-bg);
 }
-.bm-data-table__body .bm-data-table__row:nth-of-type(even) {
-  background: var(--bm-comp-data-table-color-zebra);
+.bm-data-table__body .bm-data-table__row--striped {
+  background-color: var(--bm-comp-data-table-color-zebra);
 }
-.bm-data-table__body .bm-data-table__row:hover {
-  background: var(--bm-sem-color-state-layer-hover);
+.bm-data-table--row-hover > .bm-data-table__body > .bm-data-table__row:hover {
+  background-image: linear-gradient(var(--bm-sem-color-state-layer-hover), var(--bm-sem-color-state-layer-hover));
 }
 .bm-data-table__cell {
   font: var(--bm-comp-data-table-typo-cell);