lightnet 4.4.1 → 4.4.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # lightnet
 
+## 4.4.3
+
+### Patch Changes
+
+- [#415](https://github.com/LightNetDev/LightNet/pull/415) [`af6b338`](https://github.com/LightNetDev/LightNet/commit/af6b338bb84a45f6a45dc72c9f7be5a6d315c76b) - Update dependencies
+
+- [#415](https://github.com/LightNetDev/LightNet/pull/415) [`af6b338`](https://github.com/LightNetDev/LightNet/commit/af6b338bb84a45f6a45dc72c9f7be5a6d315c76b) - Respect prefers reduced motion from main menu, toast and view transistion.
+
+## 4.4.2
+
+### Patch Changes
+
+- [#413](https://github.com/LightNetDev/LightNet/pull/413) [`3bdac34`](https://github.com/LightNetDev/LightNet/commit/3bdac343f7a0d18c63e5fb25c306b4eb2a3af9be) - Update dependencies after setting pnpm minReleaseAge to one day.
+
 ## 4.4.1
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "4.4.1",
+  "version": "4.4.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -52,28 +52,28 @@
   },
   "dependencies": {
     "@astrojs/react": "^5.0.7",
-    "@iconify-json/lucide": "^1.2.111",
+    "@iconify-json/lucide": "^1.2.113",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-virtual": "^3.14.2",
+    "@tanstack/react-virtual": "^3.14.3",
     "autoprefixer": "^10.5.0",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.4.2",
     "i18next": "^26.3.1",
-    "lucide-react": "^1.17.0",
+    "lucide-react": "^1.18.0",
     "marked": "^18.0.5",
     "postcss": "^8.5.15",
     "postcss-load-config": "^6.0.1",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.60.0",
+    "@playwright/test": "^1.61.0",
     "@types/react": "^19.2.17",
-    "astro": "^6.4.6",
+    "astro": "^6.4.7",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.8",
+    "vitest": "^4.1.9",
     "@internal/e2e-test-utils": "^0.0.1"
   },
   "engines": {

package/src/components/showToast.ts

@@ -3,6 +3,7 @@ const TIMEOUT_DATA_KEY = "toastHideTimeoutId"
 const DEFAULT_HIDDEN_TRANSFORM = "translateY(1.5rem)"
 const DEFAULT_VISIBLE_TRANSFORM = "translateY(0)"
 const DEFAULT_OVERSHOOT_TRANSFORM = "translateY(-0.25rem)"
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)"
 
 type ShowToastOptions = {
   duration?: number
@@ -17,6 +18,7 @@ export function showToast(
   options: ShowToastOptions = {},
 ) {
   const duration = options.duration ?? DEFAULT_DURATION_MS
+  const prefersReducedMotion = window.matchMedia(REDUCED_MOTION_QUERY).matches
   const existingTimeoutId = element.dataset[TIMEOUT_DATA_KEY]
   const hiddenTransform =
     element.dataset.toastHiddenTransform ?? DEFAULT_HIDDEN_TRANSFORM
@@ -31,20 +33,29 @@ export function showToast(
 
   element.style.display = "flex"
   element.style.opacity = "100%"
-  element.style.transform = overshootTransform
+  element.style.transitionDuration = prefersReducedMotion ? "0s" : ""
+  element.style.transform = prefersReducedMotion
+    ? visibleTransform
+    : overshootTransform
   element.dataset.toastVisible = "true"
 
   const settleIntoPlace = () => {
     element.style.transform = visibleTransform
   }
 
-  window.requestAnimationFrame(() => {
-    window.requestAnimationFrame(settleIntoPlace)
-  })
+  if (prefersReducedMotion) {
+    settleIntoPlace()
+  } else {
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(settleIntoPlace)
+    })
+  }
 
   const timeoutId = window.setTimeout(() => {
     element.style.opacity = "0%"
-    element.style.transform = hiddenTransform
+    element.style.transform = prefersReducedMotion
+      ? visibleTransform
+      : hiddenTransform
     element.dataset.toastVisible = "false"
     element.style.display = "hidden"
     delete element.dataset[TIMEOUT_DATA_KEY]

package/src/layouts/components/header/Menu.astro

@@ -21,7 +21,7 @@ const { label, disabled } = Astro.props
     data-menu-panel
     aria-hidden="true"
     inert
-    class="pointer-events-none absolute end-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out"
+    class="pointer-events-none absolute end-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out motion-reduce:transform-none motion-reduce:transition-none"
   >
     <slot />
   </ul>
@@ -30,6 +30,7 @@ const { label, disabled } = Astro.props
   class Menu extends HTMLElement {
     menuPanel = this.querySelector<HTMLElement>("[data-menu-panel]")!
     isMenuOpened = false
+    reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
     handleOutsideClick = (event: MouseEvent) => {
       if (!this.isMenuOpened) {
         return
@@ -55,7 +56,9 @@ const { label, disabled } = Astro.props
       }
       this.menuPanel.style.opacity = "1"
       this.menuPanel.style.pointerEvents = "auto"
-      this.menuPanel.style.transform = "scaleY(1)"
+      this.menuPanel.style.transform = this.reducedMotionQuery.matches
+        ? ""
+        : "scaleY(1)"
 
       this.menuPanel.setAttribute("aria-hidden", "false")
       this.menuPanel.removeAttribute("inert")
@@ -69,7 +72,9 @@ const { label, disabled } = Astro.props
       }
       this.menuPanel.style.opacity = "0"
       this.menuPanel.style.pointerEvents = "none"
-      this.menuPanel.style.transform = "scaleY(0.9)"
+      this.menuPanel.style.transform = this.reducedMotionQuery.matches
+        ? ""
+        : "scaleY(0.9)"
 
       this.menuPanel.setAttribute("aria-hidden", "true")
       this.menuPanel.setAttribute("inert", "")

package/src/layouts/components/meta/ViewTransition.astro

@@ -6,4 +6,10 @@
   @view-transition {
     navigation: auto;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    @view-transition {
+      navigation: none;
+    }
+  }
 </style>