@guardian/interactive-component-library 0.1.0-alpha.11 → 0.1.0-alpha.13

package/dist/style.css

@@ -957,7 +957,8 @@
   --undeclared: #848484;
 }
 	@media (prefers-color-scheme: dark) {
-  body {
+  body.ios,
+  body.android {
     --border-divider-color: #606060;
     --primary-text-color: #DCDCDC;
     --secondary-text-color: #C8C8C8;
@@ -1065,17 +1066,22 @@
 ._backgroundRect_wmb0k_11 {
   fill: var(--news-grey-05);
 }
-._svg_un4gp_1 {
+#gv-gradient-defs {
+  visibility: hidden;
+  height: 0;
+}
+
+._svg_1cajk_6 {
   display: 'inline-block';
   transform: 'translateY(-1px)';
   fill: none;
 }
 
-._previous_un4gp_7 {
+._previous_1cajk_12 {
   stop-color: var(--con);
 }
 
-._next_un4gp_11 {
+._next_1cajk_16 {
   stop-color: var(--lab);
 }
 ._button_kpmyt_1 {
@@ -1101,14 +1107,30 @@
 ._svg_kpmyt_14 > path {
   fill: var(--primary-text-color);
 }
-._circleicon_1ge2m_1 {
-    display: 'inline-block';
-    margin-right: 4; 
-    transform: 'translateY(-1px)';
+._svg_1v49v_1 {
+  display: inline-block;
+}
+
+._circle_1v49v_5 {
+  fill: var(--secondary-text-color);
+}
+
+._pulse_1v49v_9 {
+  animation: 1.5s linear 0s _pulse_1v49v_9 infinite;
 }
 
-._rect_1ge2m_7 {
-}._text_1okyv_1 {
+@keyframes _pulse_1v49v_9 {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+._text_1okyv_1 {
   font-family: var(--text-sans);
   font-size: var(--sans-xsmall);
   line-height: var(--sans-line-height);
@@ -1501,23 +1523,43 @@ body.android {
   --top-inset: 58px;
 }
 
-._toplineResult_lvw57_9 {
+._toplineResult_w8o28_9 {
   width: fit-content;
 }
-._toplineResult_lvw57_9 ._name_lvw57_12 {
+._toplineResult_w8o28_9 ._primaryname_w8o28_12 {
+  color: var(--primary-text-color);
+  font-family: var(--text-headline);
+  font-size: var(--headline-xxxsmall);
+  font-weight: 500;
+  font-style: italic;
+}
+._toplineResult_w8o28_9 ._primaryname_w8o28_12:before {
+  content: "";
+  height: 4px;
+  width: 2.2em;
+  border-radius: 50px;
+  display: block;
+}
+._toplineResult_w8o28_9 ._secondaryname_w8o28_26 {
+  color: var(--primary-text-color);
+  font-family: var(--text-headline);
+  font-size: var(--headline-xxxsmall);
+  font-weight: 500;
+}
+._toplineResult_w8o28_9 ._name_w8o28_32 {
   color: var(--primary-text-color);
   font-family: var(--text-headline);
   font-size: var(--headline-xxxsmall);
   font-weight: 500;
 }
-._toplineResult_lvw57_9 ._name_lvw57_12:before {
+._toplineResult_w8o28_9 ._name_w8o28_32:before {
   content: "";
   height: 4px;
   width: 2.2em;
   border-radius: 50px;
   display: block;
 }
-._toplineResult_lvw57_9 ._displayNumbers_lvw57_25 {
+._toplineResult_w8o28_9 ._displayNumbers_w8o28_45 {
   display: flex;
   align-items: baseline;
   font-family: var(--text-titlepiece);
@@ -1526,28 +1568,28 @@ body.android {
   -webkit-font-feature-settings: "lnum";
   font-feature-settings: "lnum";
 }
-._toplineResult_lvw57_9 ._displayNumbers_lvw57_25 ._mainNumber_lvw57_34 {
+._toplineResult_w8o28_9 ._displayNumbers_w8o28_45 ._mainNumber_w8o28_54 {
   color: var(--primary-text-color);
   font-size: var(--titlepiece-xsmall);
 }
-._toplineResult_lvw57_9 ._displayNumbers_lvw57_25 ._secondaryNumber_lvw57_38 {
+._toplineResult_w8o28_9 ._displayNumbers_w8o28_45 ._secondaryNumber_w8o28_58 {
   color: var(--secondary-text-color-alt);
   font-size: var(--titlepiece-xxsmall);
 }
-._toplineResult_lvw57_9 ._displayNumbers_lvw57_25 > div {
+._toplineResult_w8o28_9 ._displayNumbers_w8o28_45 > div {
   flex-shrink: 0;
 }
-._toplineResult_lvw57_9 ._displayRow_lvw57_45 {
+._toplineResult_w8o28_9 ._displayRow_w8o28_65 {
   flex-direction: row;
 }
-._toplineResult_lvw57_9 ._displayRow_lvw57_45 ._mainNumber_lvw57_34 {
+._toplineResult_w8o28_9 ._displayRow_w8o28_65 ._mainNumber_w8o28_54 {
   margin-right: var(--space-0);
 }
-._toplineResult_lvw57_9 ._displayColumn_lvw57_51 {
+._toplineResult_w8o28_9 ._displayColumn_w8o28_71 {
   flex-direction: column;
 }
 
-._topRow_lvw57_55 {
+._topRow_w8o28_75 {
   width: fit-content;
   padding-bottom: 1px;
   display: flex;
@@ -1556,7 +1598,7 @@ body.android {
   align-items: flex-end;
 }
 @media (min-width: 61.25em) {
-  ._topRow_lvw57_55 {
+  ._topRow_w8o28_75 {
     border-bottom: none;
   }
 }body {
@@ -1567,49 +1609,60 @@ body.android {
   --top-inset: 58px;
 }
 
-._section_te61d_9 {
+._section_12aiu_9 {
+  position: relative;
+  z-index: 0;
   margin-bottom: var(--space-8);
 }
 
-._borderTop_te61d_13::before {
+._section_12aiu_9::before {
   display: block;
   content: "";
-  border-top: 1px solid var(--border-divider-color);
-  transform: translate(-12px);
-  width: calc(100% + 24px);
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(-10px);
+  width: calc(100% + 20px);
+  height: calc(100% + var(--space-8));
+  background-color: var(--background-color);
+  z-index: -1;
 }
 @media (min-width: 30em) {
-  ._borderTop_te61d_13::before {
+  ._section_12aiu_9::before {
     transform: translate(-20px);
     width: calc(100% + 40px);
   }
 }
-@media (min-width: 41.25em) {
-  ._borderTop_te61d_13::before {
-    transform: none;
-    width: 100%;
+@media (min-width: 46.25em) {
+  ._section_12aiu_9::before {
+    width: calc(100% + 60px);
   }
 }
 @media (min-width: 71.25em) {
-  ._borderTop_te61d_13::before {
+  ._section_12aiu_9::before {
     transform: translate(-180px);
     width: calc(100% + 200px);
+    background-color: transparent;
   }
 }
 @media (min-width: 81.25em) {
-  ._borderTop_te61d_13::before {
+  ._section_12aiu_9::before {
     transform: translate(-260px);
     width: calc(100% + 280px);
   }
 }
 
-._header_te61d_45 {
+._borderTop_12aiu_52::before {
+  border-top: 1px solid var(--border-divider-color);
+}
+
+._header_12aiu_56 {
   color: var(--primary-text-color);
   padding-top: var(--space-2);
   margin-bottom: var(--space-5);
 }
 @media (min-width: 71.25em) {
-  ._header_te61d_45 {
+  ._header_12aiu_56 {
     position: absolute;
     max-width: 160px;
     transform: translateX(-170px);
@@ -1617,20 +1670,32 @@ body.android {
   }
 }
 @media (min-width: 81.25em) {
-  ._header_te61d_45 {
+  ._header_12aiu_56 {
     max-width: 220px;
     transform: translateX(-250px);
   }
 }
 
-._content_te61d_65 {
+._content_12aiu_76 {
+  position: relative;
   padding-top: 0;
   color: var(--primary-text-color);
 }
 @media (min-width: 71.25em) {
-  ._content_te61d_65 {
+  ._content_12aiu_76 {
     padding-top: var(--space-2);
   }
+  ._content_12aiu_76::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translateX(-9px);
+    width: calc(100% + 29px);
+    height: calc(100% + var(--space-8));
+    background-color: var(--background-color);
+    z-index: -2;
+  }
 }._text_lo5h3_1 {
     font-family: var(--text-sans);
     fill: var(--primary-text-color);
@@ -1835,6 +1900,28 @@ body.android {
   color: var(--highlighted-text-color);
   background-color: var(--highlight-color);
 }
+._refreshIndicator_u6lji_1 {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--space-0);
+  align-items: center;
+}
+
+._liveText_u6lji_8,
+._refreshText_u6lji_9 {
+  font-family: var(--text-sans);
+  color: var(--secondary-text-color);
+  line-height: var(--sans-line-height);
+  font-size: var(--sans-small);
+}
+
+._liveText_u6lji_8 {
+  font-weight: 700;
+}
+
+._refreshText_u6lji_9 {
+  margin-left: var(--space-0);
+}
 body {
   --top-inset: 0;
 }

package/package.json

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