fix: carousel start slide width

maiieul · maiieul · commit 9aeb6e49dfbd · 2025-09-27T12:15:08.000+02:00
diff --git a/apps/component-tests/src/global.css b/apps/component-tests/src/global.css
diff --git a/apps/website/src/global.css b/apps/website/src/global.css
@@ -1,4 +1,4 @@
-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
diff --git a/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts b/apps/website/src/routes/docs/headless/carousel/auto-api/api.ts
@@ -1,143 +1,141 @@
 export const api = {
-  carousel: [
+  "carousel": [
     {
-      bullet: [],
+      "bullet": []
     },
     {
-      inline: [],
+      "inline": []
     },
     {
-      next: [],
+      "next": []
     },
     {
-      pagination: [],
+      "pagination": []
     },
     {
-      player: [],
+      "player": []
     },
     {
-      previous: [],
+      "previous": []
     },
     {
-      root: [
+      "root": [
         {
-          PublicCarouselRootProps: [
+          "PublicCarouselRootProps": [
             {
-              comment: 'The gap between slides',
-              prop: 'gap',
-              type: 'number',
+              "comment": "The gap between slides",
+              "prop": "gap",
+              "type": "number"
             },
             {
-              comment: 'Number of slides to show at once',
-              prop: 'slidesPerView',
-              type: 'number',
+              "comment": "Number of slides to show at once",
+              "prop": "slidesPerView",
+              "type": "number"
             },
             {
-              comment: 'Whether the carousel is draggable',
-              prop: 'draggable',
-              type: 'boolean',
+              "comment": "Whether the carousel is draggable",
+              "prop": "draggable",
+              "type": "boolean"
             },
             {
-              comment: 'Alignment of slides within the viewport',
-              prop: 'align',
-              type: "'start' | 'center' | 'end'",
+              "comment": "Alignment of slides within the viewport",
+              "prop": "align",
+              "type": "'start' | 'center' | 'end'"
             },
             {
-              comment: 'Whether the carousel should rewind',
-              prop: 'rewind',
-              type: 'boolean',
+              "comment": "Whether the carousel should rewind",
+              "prop": "rewind",
+              "type": "boolean"
             },
             {
-              comment: 'Bind the selected index to a signal',
-              prop: "'bind:selectedIndex'",
-              type: 'Signal<number>',
+              "comment": "Bind the selected index to a signal",
+              "prop": "'bind:selectedIndex'",
+              "type": "Signal<number>"
             },
             {
-              comment: 'change the initial index of the carousel on render',
-              prop: 'startIndex',
-              type: 'number',
+              "comment": "change the initial index of the carousel on render",
+              "prop": "startIndex",
+              "type": "number"
             },
             {
-              comment:
-                '@deprecated Use bind:selectedIndex instead\n    Bind the current slide index to a signal',
-              prop: "'bind:currSlideIndex'",
-              type: 'Signal<number>',
+              "comment": "@deprecated Use bind:selectedIndex instead\n    Bind the current slide index to a signal",
+              "prop": "'bind:currSlideIndex'",
+              "type": "Signal<number>"
             },
             {
-              comment: 'Whether the carousel should autoplay',
-              prop: "'bind:autoplay'",
-              type: 'Signal<boolean>',
+              "comment": "Whether the carousel should autoplay",
+              "prop": "'bind:autoplay'",
+              "type": "Signal<boolean>"
             },
             {
-              comment: 'the current progress of the carousel',
-              prop: "'bind:progress'",
-              type: 'Signal<number>',
+              "comment": "the current progress of the carousel",
+              "prop": "'bind:progress'",
+              "type": "Signal<number>"
             },
             {
-              comment: 'Time in milliseconds before the next slide plays during autoplay',
-              prop: 'autoPlayIntervalMs',
-              type: 'number',
+              "comment": "Time in milliseconds before the next slide plays during autoplay",
+              "prop": "autoPlayIntervalMs",
+              "type": "number"
             },
             {
-              comment: '@internal Total number of slides',
-              prop: '_numSlides',
-              type: 'number',
+              "comment": "@internal Total number of slides",
+              "prop": "_numSlides",
+              "type": "number"
             },
             {
-              comment: '@internal Whether this carousel has a title',
-              prop: '_isTitle',
-              type: 'boolean',
+              "comment": "@internal Whether this carousel has a title",
+              "prop": "_isTitle",
+              "type": "boolean"
             },
             {
-              comment: 'The sensitivity of the carousel dragging',
-              prop: 'sensitivity',
-              type: '{\n    mouse?: number;\n    touch?: number;\n  }',
+              "comment": "The sensitivity of the carousel dragging",
+              "prop": "sensitivity",
+              "type": "{\n    mouse?: number;\n    touch?: number;\n  }"
             },
             {
-              comment:
-                'The amount of slides to move when hitting the next or previous button',
-              prop: 'move',
-              type: 'number',
+              "comment": "The amount of slides to move when hitting the next or previous button",
+              "prop": "move",
+              "type": "number"
             },
             {
-              comment: "The carousel's direction",
-              prop: 'orientation',
-              type: "'horizontal' | 'vertical'",
+              "comment": "The carousel's direction",
+              "prop": "orientation",
+              "type": "'horizontal' | 'vertical'"
             },
             {
-              comment: 'The maximum height of the slides. Needed in vertical carousels',
-              prop: 'maxSlideHeight',
-              type: 'number',
+              "comment": "The maximum height of the slides. Needed in vertical carousels",
+              "prop": "maxSlideHeight",
+              "type": "number"
             },
             {
-              comment: 'Whether the carousel should support mousewheel navigation',
-              prop: 'mousewheel',
-              type: 'boolean',
-            },
-          ],
-        },
-      ],
+              "comment": "Whether the carousel should support mousewheel navigation",
+              "prop": "mousewheel",
+              "type": "boolean"
+            }
+          ]
+        }
+      ]
     },
     {
-      scroller: [],
+      "scroller": []
     },
     {
-      slide: [],
+      "slide": []
     },
     {
-      step: [],
+      "step": []
     },
     {
-      stepper: [],
+      "stepper": []
     },
     {
-      title: [],
+      "title": []
     },
     {
-      'use-carousel': [],
+      "use-carousel": []
     },
     {
-      'use-scroller': [],
-    },
-  ],
-};
+      "use-scroller": []
+    }
+  ]
+};
diff --git a/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx b/apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx
@@ -45,7 +45,7 @@ Click on "make it yours" -> choose your favorite color theme and style -> copy/p
 Here's an example:
 
 ```css
-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
diff --git a/apps/website/src/routes/docs/styled/(guides)/tailwind-3-migration/index.mdx b/apps/website/src/routes/docs/styled/(guides)/tailwind-3-migration/index.mdx
@@ -36,7 +36,7 @@ If you are using custom colors, you might need to use @theme inline instead of @
 Here is an example of the css config:
 
 ```css
-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
diff --git a/apps/website/src/routes/docs/styled/menu.md b/apps/website/src/routes/docs/styled/menu.md
@@ -15,7 +15,6 @@
 
 ## Components
 
-- [Missing a component?](/docs/styled/missing)
 - [Accordion](/docs/styled/accordion)
 - [Alert](/docs/styled/alert)
 - [Avatar](/docs/styled/avatar)
diff --git a/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts b/packages/cli/src/generators/setup-tailwind/setup-tailwind-generator.spec.ts
@@ -28,7 +28,7 @@ describe('Setup Tailwind generator', () => {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -219,7 +219,7 @@ describe('Setup Tailwind generator', () => {
     const updatedGlobalCssContent = tree.read('src/global.css', 'utf-8');
 
     expect(updatedGlobalCssContent).toMatchInlineSnapshot(`
-      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
diff --git a/packages/kit-headless/src/components/carousel/root.tsx b/packages/kit-headless/src/components/carousel/root.tsx
@@ -198,6 +198,7 @@ export const CarouselBase = component$((props: PublicCarouselRootProps) => {
         '--scroll-snap-align': alignSig.value,
         '--orientation': orientationSig.value === 'vertical' ? 'column' : 'row',
         '--max-slide-height': `${maxSlideHeightSig.value}px`,
+        // '--remove-flex-gap': `-${gapSig.value - 1}px`,
       }}
     >
       <Slot />
diff --git a/packages/kit-styled/src/templates/global.css b/packages/kit-styled/src/templates/global.css
@@ -1,4 +1,4 @@
-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
diff --git a/packages/utils/src/theme/extract-theme-css.spec.ts b/packages/utils/src/theme/extract-theme-css.spec.ts
@@ -32,7 +32,7 @@ describe('Extract theme from css', () => {
     const theme = extractThemeCSS(inputThemeString, exampleRootCssContent);
 
     expect(theme).toMatchInlineSnapshot(`
-      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -208,7 +208,7 @@ describe('Extract theme from css', () => {
     themeStringInEveryOrder.forEach((themeString) => {
       const theme = extractThemeCSS(themeString, exampleRootCssContent);
       expect(theme).toMatchInlineSnapshot(`
-        "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+        "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
         @import 'tailwindcss';
         @import 'tw-animate-css';
 
@@ -380,7 +380,7 @@ test(`GIVEN theme string is 'brutalist base-stone primary-pink-700 border-radius
   const theme = extractThemeCSS(inputThemeString, exampleRootCssContent);
 
   expect(theme).toMatchInlineSnapshot(`
-    "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+    "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
     @import 'tailwindcss';
     @import 'tw-animate-css';
 
@@ -556,7 +556,7 @@ test(`GIVEN primary color is "pink-700",
   themeStringInEveryOrder.forEach((themeString) => {
     const theme = extractThemeCSS(themeString, exampleRootCssContent);
     expect(theme).toMatchInlineSnapshot(`
-      "@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+      "@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
       @import 'tailwindcss';
       @import 'tw-animate-css';
 
@@ -721,7 +721,7 @@ test(`GIVEN primary color is "pink-700",
 });
 
 const exampleRootCssContent = `
-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
diff --git a/packages/utils/src/theme/extract-theme-css.ts b/packages/utils/src/theme/extract-theme-css.ts
@@ -251,7 +251,7 @@ function reorderThemeObject(themeObject: ThemeMap) {
 }
 
 function objThemeToCSSThemeOutput(themeObject: ThemeMap) {
-  let cssOutput = `@layer qwik-ui, popover-polyfill, theme, base, components, utilities;
+  let cssOutput = `@layer base, qwik-ui, popover-polyfill, theme, components, utilities;
 @import 'tailwindcss';
 @import 'tw-animate-css';
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@layer qwik-ui, popover-polyfill, theme, base, components, utilities;`
	`1`	`+@layer base, qwik-ui, popover-polyfill, theme, components, utilities;`
`2`	`2`	`@import 'tailwindcss';`
`3`	`3`	`@import 'tw-animate-css';`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -198,6 +198,7 @@ export const CarouselBase = component$((props: PublicCarouselRootProps) => {`
`198`	`198`	`'--scroll-snap-align': alignSig.value,`
`199`	`199`	`'--orientation': orientationSig.value === 'vertical' ? 'column' : 'row',`
`200`	`200`	'--max-slide-height': `${maxSlideHeightSig.value}px`,
	`201`	+ // '--remove-flex-gap': `-${gapSig.value - 1}px`,
`201`	`202`	`}}`
`202`	`203`	`>`
`203`	`204`	`<Slot />`