Merge pull request #645 from thejackshelton/feat/collapsible

Fix: package types

Author: thejackshelton

.changeset/great-pigs-divide.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: proper type exports in package.json

packages/kit-headless/package.json

@@ -8,10 +8,11 @@
   "main": "./index.qwik.cjs",
   "qwik": "./index.qwik.mjs",
   "module": "./index.qwik.mjs",
-  "types": "./index.qwik.d.ts",
+  "types": "./index.d.ts",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./index.d.ts",
       "import": "./index.qwik.mjs",
       "require": "./index.qwik.cjs"
     }
@@ -20,8 +21,8 @@
     "node": ">=16.0.0"
   },
   "private": false,
-  "scripts": {},
   "peerDependencies": {
     "@builder.io/qwik": "^1.4.0"
-  }
+  },
+  "scripts": {}
 }

packages/kit-headless/src/components/collapsible/notes.md

@@ -0,0 +1,52 @@
+# Disclosure Component Research
+
+## Inspiration:
+
+- ARIA Authoring Practices Guide (APG)
+
+## Key Points:
+
+A disclosure widget allows content to be shown or hidden, enhancing accessibility and user experience by managing content visibility.
+
+## Anatomy:
+
+    <Collapsible>
+        <CollapsibleTrigger />
+        <CollapsibleContent />
+    </Collapsible>
+
+## Features:
+
+    - [ ] Show/Hide Content
+    - [ ] Accessible to keyboard users
+    - [ ] ARIA roles and properties for enhanced screen reader support
+    - [ ] Optionally, support for dynamically loading the disclosed content
+
+## Keyboard Interactions:
+
+    key: Enter
+    description: Toggles the visibility of the disclosure content.
+
+    key: Space
+    description: Toggles the visibility of the disclosure content.
+
+## WAI-ARIA Roles, States, and Properties:
+
+    - The button controlling the disclosure has `role="button"` and `aria-expanded` attribute which indicates the visibility state of the content.
+    - Optionally, `aria-controls` can be used on the button to reference the id of the content container.
+
+## Use Cases:
+
+- FAQ sections
+- Navigation menus with collapsible sections
+- Hiding and revealing more detailed content
+
+## Accessibility Considerations:
+
+- Ensure that the state (expanded or collapsed) is clearly communicated to assistive technologies.
+- Provide visual indicators (like arrows) that hint at the action of the button.
+- Consider dynamically loading content as an enhancement, not a requirement, for the functionality to work.
+
+## Downsides:
+
+- Dynamic content loading can introduce complexity in maintaining state and accessibility.