@guardian/interactive-component-library 0.1.0-alpha.37 → 0.1.0-alpha.39

package/dist/style.css

@@ -1670,7 +1670,7 @@ body.android {
   --top-inset: 58px;
 }
 
-._table_1dg64_9 {
+._table_fhbur_9 {
   table-layout: fixed;
   width: 100%;
   font-family: var(--text-sans);
@@ -1678,30 +1678,39 @@ body.android {
   line-height: var(--sans-line-height);
   text-align: left;
   border: none;
+  border-collapse: separate;
 }
 
-._hideHeader_1dg64_19 {
+._hideHeader_fhbur_20 {
   visibility: hidden;
 }
-._hideHeader_1dg64_19 th {
+._hideHeader_fhbur_20 th {
   padding-top: 0;
   padding-bottom: 0;
   line-height: 0;
 }
 
-._hideHeaderNoBorder_1dg64_28 tr:first-of-type {
+._hideHeaderNoBorder_fhbur_29 tr:first-of-type {
   border-top: none;
 }
 
-._headerCell_1dg64_32 {
+._headerCell_fhbur_33 {
   font-weight: 700;
   white-space: nowrap;
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
   color: var(--primary-text-color);
+  border-bottom: 1px solid var(--border-divider-color);
 }
 
-._headerCellButton_1dg64_40 {
+._stickyHeader_fhbur_42 {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--primary-bg-color);
+}
+
+._headerCellButton_fhbur_49 {
   width: 100%;
   display: flex;
   justify-content: flex-start;
@@ -1710,15 +1719,19 @@ body.android {
   cursor: pointer;
 }
 
-._bodyRow_1dg64_49 {
-  border-top: 1px solid var(--border-divider-color);
+._bodyRow_fhbur_58 {
   color: var(--primary-text-color);
 }
 
-._bodyCell_1dg64_54 {
+._bodyCell_fhbur_62 {
   font-weight: normal;
   padding-top: var(--space-2);
   padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--border-divider-color);
+}
+
+._bodyRow_fhbur_58:last-child > ._bodyCell_fhbur_62 {
+  border-bottom: 0;
 }._slopeChartContainer_nmjjj_1 {
   max-width: 300px;
 }
@@ -1908,101 +1921,100 @@ body.android {
   --top-inset: 58px;
 }
 
-._borderTop_1yz7f_9::before {
+._borderTop_gph7y_9::before {
   border-top: 1px solid var(--border-divider-color);
-  z-index: 1;
 }
 
-._section_1yz7f_14 {
+._section_gph7y_13 {
   position: relative;
   z-index: 0;
   margin-bottom: var(--space-8);
 }
 
-._section_1yz7f_14::before {
-  display: block;
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
+._section_gph7y_13._fullWidth_gph7y_19 {
   transform: translate(-10px);
   width: calc(100% + 20px);
-  height: calc(100% + var(--space-8));
+  margin: 0;
+  padding: 0;
   background-color: var(--background-color);
-  z-index: -1;
 }
 @media (min-width: 30em) {
-  ._section_1yz7f_14::before {
+  ._section_gph7y_13._fullWidth_gph7y_19 {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1yz7f_14::before {
+  ._section_gph7y_13._fullWidth_gph7y_19 {
+    transform: translate(-20px);
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1yz7f_14::before {
+  ._section_gph7y_13._fullWidth_gph7y_19 {
     transform: translate(-180px);
     width: calc(100% + 200px);
-    background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1yz7f_14::before {
+  ._section_gph7y_13._fullWidth_gph7y_19 {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_1yz7f_14._fullWidth_1yz7f_57 {
+._section_gph7y_13::before {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
   transform: translate(-10px);
   width: calc(100% + 20px);
-  margin: 0;
-  padding: 0;
+  height: calc(100% + var(--space-8));
   background-color: var(--background-color);
+  z-index: -1;
 }
 @media (min-width: 30em) {
-  ._section_1yz7f_14._fullWidth_1yz7f_57 {
+  ._section_gph7y_13::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
 @media (min-width: 46.25em) {
-  ._section_1yz7f_14._fullWidth_1yz7f_57 {
-    transform: translate(-20px);
+  ._section_gph7y_13::before {
     width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._section_1yz7f_14._fullWidth_1yz7f_57 {
+  ._section_gph7y_13::before {
     transform: translate(-180px);
     width: calc(100% + 200px);
+    background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._section_1yz7f_14._fullWidth_1yz7f_57 {
+  ._section_gph7y_13::before {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._section_1yz7f_14._fullWidth_1yz7f_57::before {
+._section_gph7y_13._fullWidth_gph7y_19::before {
   transform: none;
   width: 100%;
-  height: 100%;
+  height: 1px;
   background-color: transparent;
 }
 
-._header_1yz7f_96 {
+._header_gph7y_95 {
   color: var(--primary-text-color);
   padding-top: var(--space-2);
   margin-bottom: var(--space-5);
 }
 
 @media (min-width: 71.25em) {
-  body:not(.ios, .android) ._header_1yz7f_96 {
+  body:not(.ios, .android) ._header_gph7y_95 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -2010,13 +2022,13 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  body:not(.ios, .android) ._header_1yz7f_96 {
+  body:not(.ios, .android) ._header_gph7y_95 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-body ._header_1yz7f_96._fullWidth_1yz7f_57 {
+body ._header_gph7y_95._fullWidth_gph7y_19 {
   position: absolute;
   top: 0;
   left: 0;
@@ -2027,27 +2039,27 @@ body ._header_1yz7f_96._fullWidth_1yz7f_57 {
   max-width: 100%;
 }
 @media (min-width: 71.25em) {
-  body ._header_1yz7f_96._fullWidth_1yz7f_57 {
+  body ._header_gph7y_95._fullWidth_gph7y_19 {
     margin-bottom: 0;
   }
 }
 
-._content_1yz7f_133 {
+._content_gph7y_132 {
   position: relative;
   padding-top: 0;
   z-index: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_1yz7f_133 {
+  ._content_gph7y_132 {
     padding-top: var(--space-2);
   }
-  ._content_1yz7f_133::before {
+  ._content_gph7y_132::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
-    transform: translateX(-9px);
+    transform: translate(-9px, 1px);
     width: calc(100% + 29px);
     height: calc(100% + var(--space-8));
     background-color: var(--background-color);
@@ -2055,11 +2067,11 @@ body ._header_1yz7f_96._fullWidth_1yz7f_57 {
   }
 }
 
-._content_1yz7f_133._fullWidth_1yz7f_57 {
+._content_gph7y_132._fullWidth_gph7y_19 {
   padding-top: 0;
 }
 
-._content_1yz7f_133._fullWidth_1yz7f_57::before {
+._content_gph7y_132._fullWidth_gph7y_19::before {
   display: none;
 }._text_lo5h3_1 {
     font-family: var(--text-sans);
@@ -2425,7 +2437,7 @@ body.android {
   ._grid_xps7m_9[data-grid-type=large] > *:nth-child(2n+1):nth-last-child(-n+2), ._grid_xps7m_9[data-grid-type=large] > *:nth-child(2n+1):nth-last-child(-n+2) ~ * {
     border-bottom: 0;
   }
-}._transitionContainer_1syip_1 {
+}._transitionContainer_48fp9_1 {
   position: fixed;
   left: 0;
   right: 0;
@@ -2433,15 +2445,14 @@ body.android {
   bottom: 0;
   transition: all 300ms ease-in-out;
   z-index: 9999;
-  pointer-events: none;
 }
 
-._blur_1syip_12 {
+._blur_48fp9_11 {
   background-color: rgba(0, 0, 0, 0.1);
   backdrop-filter: blur(4px);
 }
 
-._modalBox_1syip_17 {
+._modalBox_48fp9_16 {
   position: absolute;
   left: 0;
   right: 0;
@@ -2450,35 +2461,35 @@ body.android {
   pointer-events: all;
 }
 
-._enter_1syip_26,
-._exitDone_1syip_27 {
-  ._blur_1syip_12 {
+._enter_48fp9_25,
+._exitDone_48fp9_26 {
+  ._blur_48fp9_11 {
     background-color: transparent;
     backdrop-filter: none;
   }
 
-  ._modalBox_1syip_17 {
+  ._modalBox_48fp9_16 {
     transform: translateY(100%);
   }
 }
 
-._enterActive_1syip_38 {
-  ._blur_1syip_12 {
+._enterActive_48fp9_37 {
+  ._blur_48fp9_11 {
     background-color: rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(4px);
   }
 
-  ._modalBox_1syip_17 {
+  ._modalBox_48fp9_16 {
     transform: translateY(0);
   }
 }
 
-._exitActive_1syip_49 {
-  ._blur_1syip_12 {
+._exitActive_48fp9_48 {
+  ._blur_48fp9_11 {
     background-color: transparent;
     backdrop-filter: none;
   }
-  ._modalBox_1syip_17 {
+  ._modalBox_48fp9_16 {
     transform: translateY(100%);
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@guardian/interactive-component-library",
   "private": false,
-  "version": "v0.1.0-alpha.37",
+  "version": "v0.1.0-alpha.39",
   "packageManager": "pnpm@8.4.0",
   "repository": {
     "type": "git",