Merge branch 'main' into pkg.pr.new-compact

Author: maiieul

.changeset/fast-actors-report.md

@@ -2,6 +2,10 @@
 '@qwik-ui/headless': minor
 ---
 
+## 100% Lazy execution
+
+The entire Qwik UI library does not execute code until interaction. Your components are HTML, until the user decides to interact with them.
+
 ## Bundling improvements
 
 We have reduced the bundle size significantly of the headless library. If you are a Qwik library author, please refer to [this issue](https://github.com/QwikDev/qwik/issues/5473) as it may impact your bundle size as well.
@@ -101,6 +105,10 @@ export default component$(() => {
 
 - Programmatically toggling the popover is still possible, make sure to put the same id on the `<Popover.Root />` that is passed to the `usePopover` hook. Refer to the docs for more info.
 
+- popover-showing and popover-closing classes have been deprecated. Please use the `data-open` and ``data-closing` attributes instead.
+
+- The `data-open`, `data-closing`, and `data-closed` data attributes have been added to the popover.
+
 #### <Popover.Root />
 
 There is a new root compomnent. Configurable props have been moved to the root component.

.changeset/two-glasses-fix.md

@@ -2,6 +2,48 @@
 '@qwik-ui/headless': minor
 ---
 
+### Tooltip
+
+The Tooltip component has been refactored from the ground up to be more accessible and performant.
+
+It is now built on top of the popover primitive, and has a similar API.
+
+It remains in `draft` status, and is not yet ready for production use. We will be working on it more deeply in the near future.
+
+### Accordion
+
+The Accordion has been refactored from the ground up to be more accessible and performant.
+
+#### Accordion.Root
+
+- The `behavior="multi"` prop has been deprecated with `multiple` on the `<Accordion.Root />` component.
+
+- The default behavior is a single item open at a time.
+
+- `onSelectIndexChange$` has been deprecated and removed in favor of `onChange$`.
+
+- `onFocusIndexChange$` has been deprecated and removed. Let us know if you have a use case for this.
+
+- Reactively control the accordion with the `bind:value` prop.
+
+- Control the initial value with the `value` prop.
+
+- Disable the entire accordion by using the `disabled` prop.
+
+#### Accordion.Item
+
+- Pass distinct values to the `<Accordion.Item />` component with the `value` prop.
+
+- Disable Accordion items by setting the `disabled` prop to true on the `<Accordion.Item />` component.
+
+For more information, please refer to the updated Accordion documentation.
+
+### Collapsible
+
+- The `onOpenChange$` prop has been deprecated. Use the `onChange$` prop instead.
+
+For more information, please refer to the updated Collapsible documentation.
+
 ### Deprecated Components
 
 In 0.4, we have deprecated the following headless components:
@@ -11,7 +53,6 @@ In 0.4, we have deprecated the following headless components:
 - Action Button
 - Button Group
 - Toast
-- Tooltip
 - Card
 - Badge
 - Spinner

.github/workflows/test.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node_version: [20, 22]
+        node_version: [18, 20, 22]
 
     steps:
       - name: Cancel Previous Runs

apps/website/public/images/test-image.png

@@ -46,5 +46,6 @@ export const statusByComponent: ComponentKitsStatuses = {
     Select: ComponentStatus.Beta,
     Separator: ComponentStatus.Beta,
     Tabs: ComponentStatus.Beta,
+    Tooltip: ComponentStatus.Draft,
   },
 };

apps/website/public/images/top-layer.webp

@@ -1,29 +1,25 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Accordion } from '@qwik-ui/headless';
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
 export default component$(() => {
-  useStyles$(styles);
   const items = [1, 2, 3];
 
   return (
     <Accordion.Root animated>
       {items.map((item) => (
-        <Accordion.Item key={item}>
+        <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>
-            <Accordion.Trigger>
+            <Accordion.Trigger class="collapsible-trigger">
               <span>Trigger {item}</span>
-              <LuChevronDown />
+              <LuChevronDown class="collapsible-transition" />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Content class="accordion-animation">
-            Inside Content {item}
+          <Accordion.Content class="collapsible-animation collapsible-content">
+            <p class="collapsible-content-outline">Inside Content {item}</p>
           </Accordion.Content>
         </Accordion.Item>
       ))}
     </Accordion.Root>
   );
 });
-
-// interal
-import styles from '../snippets/accordion.css?inline';

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

@@ -1,26 +1,29 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Accordion } from '@qwik-ui/headless';
 import { LuChevronDown } from '@qwikest/icons/lucide';
 
-// non-collapsible
 export default component$(() => {
+  useStyles$(styles);
   const items = [1, 2, 3];
 
   return (
     <Accordion.Root collapsible={false}>
       {items.map((item) => (
-        <Accordion.Item class="accordion-item" key={item}>
+        <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>
-            <Accordion.Trigger class="accordion-trigger">
+            <Accordion.Trigger class="collapsible-trigger">
               <span>Trigger {item}</span>
               <LuChevronDown />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Content class="accordion-content">
+          <Accordion.Content class="collapsible-content collapsible-content-outline">
             Inside Content {item}
           </Accordion.Content>
         </Accordion.Item>
       ))}
     </Accordion.Root>
   );
 });
+
+// interal
+import styles from '../snippets/accordion.css?inline';

apps/website/src/routes/docs/headless/accordion/examples/animation.tsx

@@ -0,0 +1,37 @@
+import { component$, useStyles$, useSignal } from '@builder.io/qwik';
+import { Accordion } from '@qwik-ui/headless';
+import { LuChevronDown } from '@qwikest/icons/lucide';
+
+export default component$(() => {
+  useStyles$(styles);
+  const items = [1, 2, 3];
+  const isRendered = useSignal(false);
+
+  return (
+    <>
+      <button style={{ marginBottom: '1rem' }} onClick$={() => (isRendered.value = true)}>
+        Render Accordion
+      </button>
+      {isRendered.value && (
+        <Accordion.Root>
+          {items.map((item) => (
+            <Accordion.Item class="collapsible" key={item}>
+              <Accordion.Header>
+                <Accordion.Trigger class="collapsible-trigger">
+                  <span>Trigger {item}</span>
+                  <LuChevronDown />
+                </Accordion.Trigger>
+              </Accordion.Header>
+              <Accordion.Content class="collapsible-content collapsible-content-outline">
+                Inside Content {item}
+              </Accordion.Content>
+            </Accordion.Item>
+          ))}
+        </Accordion.Root>
+      )}
+    </>
+  );
+});
+
+// interal
+import styles from '../snippets/accordion.css?inline';

apps/website/src/routes/docs/headless/accordion/examples/non-collapsible.tsx renamed to apps/website/src/routes/docs/headless/accordion/examples/collapsible.tsx

@@ -1,29 +1,29 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Accordion } from '@qwik-ui/headless';
-import { LuChevronDown } from '@qwikest/icons/lucide';
 
 export default component$(() => {
-  const items = [1, 2, 3];
+  useStyles$(styles);
+  const items = [1, 2, 3, 4];
 
   return (
-    <Accordion.Root>
-      {items.map((item, index) => (
-        <Accordion.Item
-          defaultValue={index === 1 ? true : false}
-          class="accordion-item"
-          key={item}
-        >
+    <Accordion.Root disabled={true}>
+      {items.map((item) => (
+        <Accordion.Item class="collapsible" key={item}>
           <Accordion.Header>
-            <Accordion.Trigger class="accordion-trigger">
+            <Accordion.Trigger class="collapsible-trigger">
               <span>Trigger {item}</span>
               <LuChevronDown />
             </Accordion.Trigger>
           </Accordion.Header>
-          <Accordion.Content class="accordion-content">
+          <Accordion.Content class="collapsible-content collapsible-content-outline">
             Inside Content {item}
           </Accordion.Content>
         </Accordion.Item>
       ))}
     </Accordion.Root>
   );
 });
+
+// interal
+import styles from '../snippets/accordion.css?inline';
+import { LuChevronDown } from '@qwikest/icons/lucide';