Merge branch 'main' into pr/JerryWu1234/832-1

.changeset/two-jeans-share.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': minor
+---
+
+We are removing the existing popover animations shimming and instead wil now only support native popover animations. This is considered a breaking change but will be more reliable overall.

.eslintignore

@@ -2,4 +2,5 @@ node_modules
 dist
 coverage
 .eslintrc.*
-vite.config.ts
+vite.config.ts 
+packages/kit-headless/browsers/**

.github/actions/test/action.yml

@@ -28,11 +28,6 @@ runs:
       env:
         NODE_OPTIONS: --experimental-vm-modules
 
-    - name: Test Headless
-      uses: cypress-io/github-action@v5
-      with:
-        command: 'pnpm test.headless.ci'
-
     # - name: Build
     #   shell: bash
     #   run: npx nx affected:build --base=last-release --exclude=website

.github/workflows/test.yml

@@ -7,6 +7,7 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+    name: Test NodeJS ${{ matrix.node_version }}
 
     strategy:
       matrix:

.vscode/settings.json

@@ -6,5 +6,6 @@
   ],
   "editor.codeActionsOnSave": {
     "source.removeUnusedImports": "explicit"
-  }
+  },
+  "vitest.disableWorkspaceWarning": true
 }

apps/component-tests/src/global.css

@@ -1240,11 +1240,19 @@
 
   *::-webkit-scrollbar-thumb {
     /* Thumb color */
-    background-color: var(--qwikui-slate-500);
+    background-color: hsla(var(--foreground) / 0.25);
     border-radius: 0.5rem;
     background-clip: padding-box;
-    border-left: 0.3rem solid transparent;
-    border-right: 0.3rem solid transparent;
+    border-left: 0.15rem solid transparent;
+    border-right: 0.15rem solid transparent;
+  }
+
+  .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.1);
+  }
+
+  .dark .navigation-docs::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.2);
   }
 
   *::-webkit-scrollbar-corner {
@@ -1256,8 +1264,17 @@
     border-left: 1px solid var(--qwikui-slate-300);
   }
 
-  .dark *::-webkit-scrollbar-thumb {
-    background-color: var(--qwikui-slate-500);
+  .toc-scrollbar::-webkit-scrollbar-track,
+  .dark .toc-scrollbar::-webkit-scrollbar-track {
+    border-color: transparent;
+  }
+
+  .toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  .toc-scrollbar:hover.toc-scrollbar::-webkit-scrollbar-thumb {
+    background-color: hsla(var(--foreground) / 0.15);
   }
 
   .dark *::-webkit-scrollbar-track {
@@ -1272,7 +1289,7 @@
   }
 
   .code-example *::-webkit-scrollbar-thumb {
-    background: var(--qwikui-slate-500);
+    background-color: var(--qwikui-slate-600);
     border-radius: 0.5rem;
     background-clip: padding-box;
   }
@@ -1290,6 +1307,10 @@
   .dark .note-link a {
     border-bottom: 1px solid white !important;
   }
+
+  .gif-container {
+    border-radius: var(--border-radius);
+  }
 }
 
 :root {
@@ -1342,7 +1363,7 @@ body {
   min-height: 100%;
 }
 
-/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term. 
+/* Utilities layer for animations. The current arbitrary & docs tailwind animation guidelines are not maintainable long term.
   It would make more sense to supply the user with the animation declaration in the docs.
 */
 @layer utilities {

apps/component-tests/src/root.tsx

@@ -1,13 +1,25 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
 import {
-  QwikCityProvider,
-  RouterOutlet,
-  ServiceWorkerRegister,
-} from '@builder.io/qwik-city';
-import { RouterHead } from './components/router-head/router-head';
+  component$, useStyles$,
+  PrefetchGraph,
+  PrefetchServiceWorker
+} from '@builder.io/qwik';
+import { QwikCityProvider, RouterOutlet } from '@builder.io/qwik-city';
 
+import { RouterHead } from './components/router-head/router-head';
 import globalStyles from './global.css?inline';
 
+import { ThemeProvider } from '@qwik-ui/themes';
+
+import '@fontsource-variable/inter';
+import {
+  ThemeBaseColors,
+  ThemeBorderRadiuses,
+  ThemeFonts,
+  ThemeModes,
+  ThemePrimaryColors,
+  ThemeStyles,
+} from '@qwik-ui/utils';
+
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
@@ -17,16 +29,31 @@ export default component$(() => {
    */
   useStyles$(globalStyles);
 
+
   return (
     <QwikCityProvider>
       <head>
-        <meta charSet="utf-8" />
+        <meta charset="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
       </head>
       <body lang="en">
-        <RouterOutlet />
-        <ServiceWorkerRegister />
+        <PrefetchGraph />
+        <PrefetchServiceWorker />
+        <ThemeProvider
+          attribute="class"
+          enableSystem={false}
+          themes={[
+            ...Object.values(ThemeFonts),
+            ...Object.values(ThemeModes),
+            ...Object.values(ThemeStyles),
+            ...Object.values(ThemeBaseColors),
+            ...Object.values(ThemePrimaryColors),
+            ...Object.values(ThemeBorderRadiuses),
+          ]}
+        >
+          <RouterOutlet />
+        </ThemeProvider>
       </body>
     </QwikCityProvider>
   );

apps/component-tests/vite.config.ts

@@ -2,12 +2,10 @@ import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
-import { qwikNxVite } from 'qwik-nx/plugins';
 
 export default defineConfig({
   cacheDir: '../../node_modules/.vite/apps/component-tests',
   plugins: [
-    qwikNxVite(),
     qwikCity(),
     qwikVite({
       client: {