@playpilot/tpi 8.34.2 → 8.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@playpilot/tpi",
-	"version": "8.34.2",
+	"version": "8.34.3",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

package/src/lib/scss/_mixins.scss

@@ -79,3 +79,9 @@
     @content;
   }
 }
+
+@mixin reduced-motion() {
+  @media (prefers-reduced-motion: "reduce") {
+    @content;
+  }
+}

package/src/routes/components/Explore/Filter/Dropdown.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { scale } from 'svelte/transition'
   import { tick, type Snippet } from 'svelte'
+  import { prefersReducedMotion } from 'svelte/motion'
 
   interface Props {
     button: Snippet<[{ toggle: (event: MouseEvent) => void }]>,
@@ -72,7 +73,7 @@
       style:--max-height={maxHeight ? `${maxHeight}px` : null}
       style:--offset={offset ? `${offset}px` : null}
       bind:this={contentElement}
-      transition:scale={{ start: 0.85, duration: 100 }}>
+      transition:scale={{ start: prefersReducedMotion.current ? 1 : 0.85, duration: 100 }}>
       {@render content()}
     </div>
   {/if}

package/src/routes/components/Modals/RailModal.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   import { onMount, type Snippet } from 'svelte'
-  import TinySlider from 'svelte-tiny-slider'
+  import { prefersReducedMotion } from 'svelte/motion'
   import { fade } from 'svelte/transition'
   import { t } from '$lib/localization'
   import { getFirstAdOfType } from '$lib/api/ads'
+  import TinySlider from 'svelte-tiny-slider'
   import Modal from './Modal.svelte'
   import IconArrow from '../Icons/IconArrow.svelte'
   import ModalCloseOverlay from './ModalCloseOverlay.svelte'
@@ -19,10 +20,10 @@
 
   const { items, initialIndex = 0, onchange = () => null, onclose = () => null, each, ...restProps }: Props = $props()
 
-  const transitionDuration = 300
 
   let slider: TinySlider
   let initialized = $state(false)
+  let transitionDuration = $state(prefersReducedMotion.current ? 0 : 300)
   let availableHeight: number | null = $state(null)
   let element: HTMLElement | null = $state(null)
   let displayAd = $state(getFirstAdOfType('card'))
@@ -140,6 +141,10 @@
     width: $size;
     transition: opacity var(--transition-duration), transform var(--transition-duration);
 
+    @include reduced-motion {
+      transition: opacity 500ms;
+    }
+
     &.active {
       transform: none;
       opacity: 1;

package/src/routes/components/Rails/Rail.svelte

@@ -3,6 +3,7 @@
   import TinySlider from 'svelte-tiny-slider'
   import IconArrow from '../Icons/IconArrow.svelte'
   import { heading as _heading } from '$lib/actions/heading'
+  import { prefersReducedMotion } from 'svelte/motion'
 
   interface Props {
     heading?: string
@@ -28,7 +29,7 @@
 {/if}
 
 <div class="rail">
-  <TinySlider bind:this={slider} {onchange} {onresize} bind:shown allowWheel>
+  <TinySlider bind:this={slider} {onchange} {onresize} transitionDuration={prefersReducedMotion.current ? 0 : 300} bind:shown allowWheel>
     {@render children()}
 
     {#snippet controls({ setIndex, currentIndex, reachedEnd })}

package/src/routes/components/RoundButton.svelte

@@ -35,7 +35,7 @@
     &:hover {
       filter: brightness(1.2);
       transform: scale(1.05);
-      outline: 1px solid theme(button-hover-border-color, text-color-alt);
+      outline: 2px solid theme(button-hover-border-color, text-color-alt);
     }
   }
 </style>

package/src/routes/components/YouTubeEmbedOverlay.svelte

@@ -2,6 +2,7 @@
   import { fade } from 'svelte/transition'
   import IconClose from './Icons/IconClose.svelte'
   import YouTubeEmbed from './YouTubeEmbed.svelte'
+  import RoundButton from './RoundButton.svelte'
 
   interface Props {
     embeddable_url: string,
@@ -24,9 +25,11 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div class="backdrop" onclick={onclose} data-testid="backdrop"></div>
 
-  <button class="close" onclick={onclose} aria-label="Close">
-    <IconClose size={24} />
-  </button>
+  <div class="close">
+    <RoundButton size="42px" onclick={onclose} aria-label="Close">
+      <IconClose size={24} />
+    </RoundButton>
+  </div>
 </div>
 
 <style lang="scss">
@@ -71,24 +74,11 @@
   }
 
   .close {
-    appearance: none;
+    --playpilot-button-background: transparent;
+    --playpilot-button-text-color: white;
     z-index: 1;
     position: fixed;
-    top: margin(2);
-    right: margin(2);
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: white;
-    cursor: pointer;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-
-    &:active {
-      transform: scale(1);
-    }
+    top: margin(1);
+    right: margin(1);
   }
 </style>