@latte-macchiat-io/latte-vanilla-components 0.0.322 → 0.0.324

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.322",
+  "version": "0.0.324",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Carousel/styles.css.ts

@@ -7,6 +7,7 @@ import { themeContract } from '../../theme/contract.css';
 
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 import { generateResponsiveMediaCalc } from '../../utils/generateResponsiveMediaCalc';
+import { mergeResponsiveMedias } from '../../utils/mergeResponsiveMedias';
 
 export const carouselRecipe = recipe(
   {
@@ -184,13 +185,12 @@ export const carouselBullets = style({
   position: 'absolute',
   justifyContent: 'center',
 
-  '@media': {
-    ...generateResponsiveMedia({
+  '@media': mergeResponsiveMedias(
+    generateResponsiveMedia({
       gap: themeContract.carousel.bullet.gap,
     }),
-
-    [queries.lg]: {},
-  },
+    generateResponsiveMediaCalc('top', '100%', themeContract.carousel.bullet.positionVerticalOffset, '+')
+  ),
 });
 
 export const carouselBullet = style(

package/src/components/Carousel/theme.ts

@@ -37,6 +37,14 @@ const themeCarouselBase = {
     },
     bullet: {
       borderRadius: '1000px',
+      positionVerticalOffset: {
+        mobile: '15',
+        sm: '15',
+        md: '30',
+        lg: '30',
+        xl: '50',
+        '2xl': '50',
+      },
       bottom: {
         mobile: '15px',
         sm: '15px',

package/src/theme/contract.css.ts

@@ -851,6 +851,14 @@ export const themeContract = createGlobalThemeContract({
       borderRadius: 'latte-carousel-bullet-borderRadius',
       backgroundColor: 'latte-carousel-bullet-backgroundColor',
       activeBackgroundColor: 'latte-carousel-bullet-active-backgroundColor',
+      positionVerticalOffset: {
+        mobile: 'latte-carousel-nav-positionVerticalOffset-mobile',
+        sm: 'latte-carousel-nav-positionVerticalOffset-sm',
+        md: 'latte-carousel-nav-positionVerticalOffset-md',
+        lg: 'latte-carousel-nav-positionVerticalOffset-lg',
+        xl: 'latte-carousel-nav-positionVerticalOffset-xl',
+        '2xl': 'latte-carousel-nav-positionVerticalOffset-2xl',
+      },
 
       gap: {
         mobile: 'latte-carousel-bullet-gap-mobile',

package/src/utils/mergeResponsiveMedias.ts

@@ -0,0 +1,21 @@
+/**
+ * Fusionne plusieurs objets responsive générés pour Vanilla Extract
+ * sans écraser les valeurs existantes des mêmes breakpoints.
+ *
+ * Exemple :
+ * mergeResponsiveMedias(a, b) => combine les clés communes
+ */
+export function mergeResponsiveMedias(...mediaObjects: Record<string, Record<string, string>>[]): Record<string, Record<string, string>> {
+  const merged: Record<string, Record<string, string>> = {};
+
+  for (const obj of mediaObjects) {
+    for (const [query, styles] of Object.entries(obj)) {
+      merged[query] = {
+        ...(merged[query] || {}),
+        ...styles,
+      };
+    }
+  }
+
+  return merged;
+}