@guardian/interactive-component-library 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/style.css

@@ -2064,7 +2064,46 @@ 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;
   }
-}body {
+}._transitionContainer_wws3j_1 {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+  transition: all 300ms ease-in-out;
+  z-index: 9999;
+}
+
+._modalBox_wws3j_13 {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transition: all 300ms ease-in-out;
+}
+
+._enter_wws3j_21,
+._exitDone_wws3j_22 {
+  background-color: transparent;
+  backdrop-filter: none;
+
+  ._modalBox_wws3j_13 {
+    transform: translateY(100%);
+  }
+}
+
+._enterActive_wws3j_31,
+._exit_wws3j_22 {
+  background-color: rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+
+  ._modalBox_wws3j_13 {
+    transform: translateY(0);
+  }
+}
+body {
   --top-inset: 0;
 }
 
@@ -2169,46 +2208,51 @@ body.android {
   --top-inset: 58px;
 }
 
-._ticker_1tpek_9 {
+._ticker_fyd8z_9 {
   position: relative;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._ticker_1tpek_9 {
+  ._ticker_fyd8z_9 {
     --ticker-item-width: 200px;
   }
 }
 
-._tickerItems_1tpek_19 {
+._tickerItems_fyd8z_19 {
+  width: 100%;
+  overflow: clip;
+}
+
+._tickerScroll_fyd8z_24 {
   display: flex;
   flex-direction: column;
   row-gap: var(--space-2);
   align-items: stretch;
   max-height: 300px;
-  overflow: hidden;
+  overflow: visible;
 }
 @media (min-width: 30em) {
-  ._tickerItems_1tpek_19 {
+  ._tickerScroll_fyd8z_24 {
     flex-direction: row;
     column-gap: var(--space-2);
+    transform: translateX(var(--ticker-offset));
+    transition: transform 0.5s ease-in-out;
   }
 }
 
-._tickerItem_1tpek_19 {
+._tickerItem_fyd8z_19 {
   width: var(--ticker-item-width);
   flex-shrink: 0;
-  transform: translateX(calc(-1 * var(--ticker-offset) * var(--ticker-item-width)));
-  transition: transform 0.3s ease-in-out;
 }
 
-._controls_1tpek_41 {
+._controls_fyd8z_46 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._controls_1tpek_41 {
+  ._controls_fyd8z_46 {
     top: 0;
     right: 0;
     width: 86px;
@@ -2216,25 +2260,25 @@ body.android {
   }
 }
 
-._gradient_1tpek_56 {
+._gradient_fyd8z_61 {
   position: absolute;
   width: 100%;
   bottom: 0;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_1tpek_56 {
+  ._gradient_fyd8z_61 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._buttons_1tpek_70 {
+._buttons_fyd8z_75 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_1tpek_70 {
+  ._buttons_fyd8z_75 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -2245,39 +2289,39 @@ body.android {
   }
 }
 
-._button_1tpek_70 {
+._button_fyd8z_75 {
   position: absolute;
   bottom: -20px;
   left: 0;
 }
 @media (min-width: 30em) {
-  ._button_1tpek_70 {
+  ._button_fyd8z_75 {
     display: none;
   }
 }
 
-._buttonInner_1tpek_96 {
+._buttonInner_fyd8z_101 {
   background-color: var(--tertiary-bg-color);
 }
 
-._ticker_1tpek_9[data-expanded=true] ._tickerItems_1tpek_19 {
+._ticker_fyd8z_9[data-expanded=true] ._tickerItems_fyd8z_19 {
   max-height: calc(100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0) - var(--top-inset));
 }
 @supports (height: 100dvh) {
-  ._ticker_1tpek_9[data-expanded=true] ._tickerItems_1tpek_19 {
+  ._ticker_fyd8z_9[data-expanded=true] ._tickerItems_fyd8z_19 {
     max-height: calc(100dvh - var(--top-inset));
   }
 }
 @supports (-webkit-touch-callout: none) {
-  ._ticker_1tpek_9[data-expanded=true] ._tickerItems_1tpek_19 {
+  ._ticker_fyd8z_9[data-expanded=true] ._tickerItems_fyd8z_19 {
     max-height: -webkit-fill-available;
   }
 }
 
-._ticker_1tpek_9[data-expanded=true] ._controls_1tpek_41 {
+._ticker_fyd8z_9[data-expanded=true] ._controls_fyd8z_46 {
   position: sticky;
   margin-top: -40px;
 }
-._ticker_1tpek_9[data-expanded=true] ._controls_1tpek_41 ._button_1tpek_70 {
+._ticker_fyd8z_9[data-expanded=true] ._controls_fyd8z_46 ._button_fyd8z_75 {
   bottom: 0;
 }

package/package.json

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