Merge branch 'main' into feat-headless-label

Author: thejackshelton

.changeset/eleven-bulldogs-hug.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+refactor: strip browser user agent styles relating to max-width

.changeset/lazy-eels-peel.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: collapsible renders correctly on CSR

.changeset/lucky-carrots-pay.md

@@ -82,13 +82,13 @@ pnpm preview
 - Build the Cloudfare version of the qwik-ui documentation
 
 ```shell
-pnpm build.clouflare
+pnpm build.cloudflare
 ```
 
 - Preview the Cloudfare build of the qwik-ui documentation (no HMR)
 
 ```shell
-pnpm preview.clouflare
+pnpm preview.cloudflare
 ```
 
 ### 5. Make sure you add / modify tests

.changeset/sixty-moles-exercise.md

@@ -35,7 +35,7 @@ export const statusByComponent: ComponentKitsStatuses = {
   headless: {
     Accordion: ComponentStatus.Beta,
     Carousel: ComponentStatus.Draft,
-    Collapsible: ComponentStatus.Draft,
+    Collapsible: ComponentStatus.Beta,
     Combobox: ComponentStatus.Beta,
     Label: ComponentStatus.Draft,
     Modal: ComponentStatus.Beta,

CONTRIBUTING.md

@@ -30,7 +30,7 @@ export default component$(() => {
       </Button>
       <Modal
         bind:show={showSig}
-        class="my-animation bg-background text-foreground rounded-base max-w-2xl overflow-x-hidden p-8 shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
+        class="my-animation bg-background text-foreground rounded-base h-full max-w-2xl overflow-x-hidden p-8 shadow-md backdrop:backdrop-blur backdrop:backdrop-brightness-50 dark:backdrop:backdrop-brightness-100"
       >
         <ModalHeader>
           <h2 class="text-lg font-bold">Copy config</h2>

apps/website/src/_state/component-statuses.ts

@@ -1,26 +1,32 @@
 import { component$ } from '@builder.io/qwik';
 import { CheckIcon } from '../icons/Check';
 import { Roadmap } from '../icons/Roadmap';
+import { IssueIcon } from '../icons/Issues';
 
 type FeatureListProps = {
   features: string[];
   roadmap?: string[];
+  issues?: string[];
 };
 
 export const FeatureList = component$((props: FeatureListProps) => {
   return (
     <ul class="mb-12 mt-[-16px] !px-0">
-      {props.features.map((descriptor) => {
-        return (
-          <li
-            key={descriptor}
-            class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
-          >
-            <CheckIcon class="min-w-[21px]" />
-            {descriptor}
-          </li>
-        );
-      })}
+      {props.features && (
+        <>
+          {props.features.map((descriptor) => {
+            return (
+              <li
+                key={descriptor}
+                class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
+              >
+                <CheckIcon class="min-w-[21px]" />
+                {descriptor}
+              </li>
+            );
+          })}
+        </>
+      )}
       {props.roadmap && (
         <>
           <h3 class="mb-6 mt-8 scroll-mt-20 text-xl font-semibold">Roadmap</h3>
@@ -39,6 +45,23 @@ export const FeatureList = component$((props: FeatureListProps) => {
           })}
         </>
       )}
+      {props.issues && (
+        <>
+          {props.issues.map((descriptor) => {
+            return (
+              <>
+                <li
+                  key={descriptor}
+                  class="flex w-full list-none items-center gap-x-2 gap-y-4 border-b-[1px] border-slate-200 py-2 dark:border-slate-800"
+                >
+                  <IssueIcon class="min-w-[21px]" />
+                  {descriptor}
+                </li>
+              </>
+            );
+          })}
+        </>
+      )}
     </ul>
   );
 });

apps/website/src/components/copy-css-config/copy-css-config.tsx

@@ -1,7 +1,16 @@
-import { ClassList, PropsOf, component$, useSignal, useTask$ } from '@builder.io/qwik';
+import {
+  ClassList,
+  PropsOf,
+  component$,
+  useSignal,
+  useTask$,
+  useVisibleTask$,
+  $,
+} from '@builder.io/qwik';
 import { CodeCopy } from '../code-copy/code-copy';
+import { getHighlighterCore } from 'shiki';
 import { cn } from '@qwik-ui/utils';
-import { highlighter } from './highlighter';
+import { isDev } from '@builder.io/qwik/build';
 
 export type HighlightProps = PropsOf<'div'> & {
   code: string;
@@ -22,7 +31,7 @@ export const Highlight = component$(
   }: HighlightProps) => {
     const codeSig = useSignal('');
 
-    useTask$(async function createHighlightedCode() {
+    const addShiki$ = $(async () => {
       let modifiedCode: string = code;
 
       let partsOfCode = modifiedCode.split(splitCommentStart);
@@ -35,6 +44,19 @@ export const Highlight = component$(
         modifiedCode = partsOfCode[0];
       }
 
+      const highlighter = await getHighlighterCore({
+        themes: [
+          // or a dynamic import if you want to do chunk splitting
+          import('shiki/themes/poimandres.mjs'),
+        ],
+        langs: [
+          import('shiki/langs/html.mjs'),
+          import('shiki/langs/tsx.mjs'),
+          import('shiki/langs/css.mjs'),
+        ],
+        loadWasm: import('shiki/wasm'),
+      });
+
       const str = highlighter.codeToHtml(modifiedCode, {
         lang: language,
         themes: {
@@ -45,6 +67,22 @@ export const Highlight = component$(
       codeSig.value = str.toString();
     });
 
+    useTask$(async function createHighlightedCode() {
+      if (!isDev) {
+        await addShiki$();
+      }
+    });
+
+    // eslint-disable-next-line qwik/no-use-visible-task
+    useVisibleTask$(
+      async () => {
+        if (isDev) {
+          await addShiki$();
+        }
+      },
+      { strategy: 'document-ready' },
+    );
+
     return (
       <div class="code-example relative max-h-[31.25rem]">
         <CodeCopy