@guardian/interactive-component-library 0.1.0-alpha.16 → 0.1.0-alpha.18

package/dist/style.css

@@ -2208,46 +2208,51 @@ body.android {
   --top-inset: 58px;
 }
 
-._ticker_1tpek_9 {
+._ticker_2eemh_9 {
   position: relative;
   --ticker-item-width: 100%;
 }
 @media (min-width: 30em) {
-  ._ticker_1tpek_9 {
+  ._ticker_2eemh_9 {
     --ticker-item-width: 200px;
   }
 }
 
-._tickerItems_1tpek_19 {
+._tickerItems_2eemh_19 {
+  width: 100%;
+  overflow: clip;
+}
+
+._tickerScroll_2eemh_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_2eemh_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_2eemh_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_2eemh_46 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._controls_1tpek_41 {
+  ._controls_2eemh_46 {
     top: 0;
     right: 0;
     width: 86px;
@@ -2255,25 +2260,25 @@ body.android {
   }
 }
 
-._gradient_1tpek_56 {
+._gradient_2eemh_61 {
   position: absolute;
   width: 100%;
   bottom: 0;
   height: 86px;
 }
 @media (min-width: 30em) {
-  ._gradient_1tpek_56 {
+  ._gradient_2eemh_61 {
     width: auto;
     height: 100%;
     right: 0;
   }
 }
 
-._buttons_1tpek_70 {
+._buttons_2eemh_75 {
   display: none;
 }
 @media (min-width: 30em) {
-  ._buttons_1tpek_70 {
+  ._buttons_2eemh_75 {
     position: absolute;
     top: 0;
     right: var(--space-5);
@@ -2284,39 +2289,29 @@ body.android {
   }
 }
 
-._button_1tpek_70 {
+._button_2eemh_75 {
   position: absolute;
   bottom: -20px;
   left: 0;
 }
 @media (min-width: 30em) {
-  ._button_1tpek_70 {
+  ._button_2eemh_75 {
     display: none;
   }
 }
 
-._buttonInner_1tpek_96 {
+._buttonInner_2eemh_101 {
   background-color: var(--tertiary-bg-color);
 }
 
-._ticker_1tpek_9[data-expanded=true] ._tickerItems_1tpek_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 {
-    max-height: calc(100dvh - var(--top-inset));
-  }
-}
-@supports (-webkit-touch-callout: none) {
-  ._ticker_1tpek_9[data-expanded=true] ._tickerItems_1tpek_19 {
-    max-height: -webkit-fill-available;
-  }
+._ticker_2eemh_9[data-expanded=true] ._tickerScroll_2eemh_24 {
+  max-height: fit-content;
 }
 
-._ticker_1tpek_9[data-expanded=true] ._controls_1tpek_41 {
+._ticker_2eemh_9[data-expanded=true] ._controls_2eemh_46 {
   position: sticky;
   margin-top: -40px;
 }
-._ticker_1tpek_9[data-expanded=true] ._controls_1tpek_41 ._button_1tpek_70 {
+._ticker_2eemh_9[data-expanded=true] ._controls_2eemh_46 ._button_2eemh_75 {
   bottom: 0;
 }

package/package.json

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