feat: until-found on collapsible, collapsible attrs, fix test flakiness, fix not selector for styles (#318)

* feat: updated collapsible attrs

* test: browser tests

* feat: hidden until found behavior

* feat: collapsible data attrs

* fix: types

* feat: until found behavior of collapsible

* fix: tree example

* changesert

Author: thejackshelton-kunaico

.changeset/empty-feet-fly.md

@@ -0,0 +1,18 @@
+---
+"@qds.dev/ui": patch
+---
+
+### Collapsible Component Enhancements
+
+- Added "hidden until found" behavior support for improved content discovery and browser search functionality
+- Updated data attributes for better state management and styling hooks
+- Enhanced collapsible attributes API
+
+### Bug Fixes
+
+- Fixed Tree component example
+- Fixed TypeScript type definitions
+
+### Testing
+
+- Added browser tests for improved component coverage

docs/src/routes/components/collapsible/examples/animation.tsx

@@ -1,22 +1,19 @@
 import { Collapsible } from "@qds.dev/ui";
-import { component$, useStyles$ } from "@qwik.dev/core";
-import { LuChevronDown } from "@qwikest/icons/lucide";
+import { component$ } from "@qwik.dev/core";
 
 export default component$(() => {
-  useStyles$(styles);
-
   return (
-    <Collapsible.Root class="collapsible">
-      <Collapsible.Trigger class="collapsible-trigger">
-        <span>Trigger</span>
-        <LuChevronDown />
-      </Collapsible.Trigger>
-      <Collapsible.Content class="collapsible-content collapsible-content-outline ">
-        Content
-      </Collapsible.Content>
-    </Collapsible.Root>
+    <div>
+      <p>Some visible text before</p>
+      <Collapsible.Root>
+        <Collapsible.Trigger class="not-ui-open:bg-red-500">
+          Click to toggle
+        </Collapsible.Trigger>
+        <Collapsible.Content>
+          <p>This is hidden searchable content that contains the word FINDME</p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+      <p>Some visible text after</p>
+    </div>
   );
 });
-
-// internal
-import styles from "../snippets/collapsible.css?inline";