[pull] main from chakra-ui:main

.claude/agents/component-example-creator.md

@@ -22,6 +22,8 @@ creating clear, comprehensive examples that demonstrate component capabilities.
 
 ## Implementation Workflow
 
+**CRITICAL: Every example MUST include ALL steps below. An example is incomplete if any step is skipped.**
+
 When creating examples for a component:
 
 1. **Analyze Component API**: First, examine the component's TypeScript types, props interface, and existing
@@ -41,13 +43,18 @@ When creating examples for a component:
 4. **Implement Across Frameworks**: Create examples for ALL supported frameworks (React, Solid, Svelte, Vue),
    maintaining API parity and following framework-specific patterns documented in @.claude/docs/framework_patterns.md.
 
-5. **Update Stories File**: Add or modify stories in the component's `.stories.tsx` file:
-   - Use clear, descriptive story names
-   - Organize stories logically (Basic → Variants → Advanced)
-   - Include controls for interactive props when appropriate
-   - Add accessibility annotations
+5. **Update Stories Files** (MANDATORY - examples won't appear in Storybook without this):
+   - **React**: `packages/react/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order
+   - **Solid**: `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order
+   - **Vue**: `packages/vue/src/components/{component}/{component}.stories.vue` - Add import AND `<Variant>` in alphabetical order
+   - **Svelte**: `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import AND export in alphabetical order
+
+   Each framework has a different pattern:
+   - React/Solid: Add a single line export (e.g., `export { Disabled } from './examples/disabled'`)
+   - Vue: Add import in `<script setup>` AND add `<Variant>` in `<template>` section
+   - Svelte: Add import statement AND export const with Component wrapper
 
-6. **Update Documentation**: Ensure the component's documentation includes:
+6. **Update Documentation** (if applicable): Ensure the component's documentation includes:
    - Code snippets matching the new examples
    - Clear descriptions of when to use each variant
    - Accessibility notes

.claude/docs/component_patterns.md

@@ -28,23 +28,27 @@ packages/{framework}/src/components/{component-name}/
 
 ## Creating New Examples
 
-When creating a new example for a component, you must update the following files:
+**IMPORTANT: When adding examples, ALL steps below must be completed. Missing any step means the example is incomplete.**
+
+When creating a new example for a component, you **MUST** update the following files:
 
 1. **Create example files for all frameworks**:
    - `packages/react/src/components/{component}/examples/{example-name}.tsx`
    - `packages/solid/src/components/{component}/examples/{example-name}.tsx`
    - `packages/vue/src/components/{component}/examples/{example-name}.vue`
    - `packages/svelte/src/lib/components/{component}/examples/{example-name}.svelte`
 
-2. **Update Storybook stories for all frameworks**:
-   - `packages/react/src/components/{component}/{component}.stories.tsx` - Add export
-   - `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export
-   - `packages/vue/src/components/{component}/{component}.stories.vue` - Add import and variant
-   - `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import and export
+2. **Update Storybook stories for all frameworks** (REQUIRED - examples won't appear without this):
+   - `packages/react/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order
+   - `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order
+   - `packages/vue/src/components/{component}/{component}.stories.vue` - Add import and `<Variant>` in alphabetical order
+   - `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import and export in alphabetical order
 
-3. **Update component documentation**:
+3. **Update component documentation** (if applicable):
    - `website/src/content/pages/components/{component}.mdx` - Add `<Example id="{example-name}" />` with description
 
+**Note**: Steps 1 and 2 are MANDATORY. Without updating the stories files, the examples will not be visible in Storybook.
+
 ### Example Workflow
 
 For a new "links" example on the Menu component:

.storybook/styles/collapsible.css

@@ -1,22 +1,36 @@
-@keyframes slideDown {
+@keyframes fadeIn {
   from {
-    opacity: 0.01;
-    height: 0;
+    opacity: 0;
   }
   to {
     opacity: 1;
-    height: var(--height);
   }
 }
 
-@keyframes slideUp {
+@keyframes fadeOut {
   from {
     opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes expandHeight {
+  from {
+    height: var(--collapsed-height, 0);
+  }
+  to {
+    height: var(--height);
+  }
+}
+
+@keyframes collapseHeight {
+  from {
     height: var(--height);
   }
   to {
-    opacity: 0.01;
-    height: 0;
+    height: var(--collapsed-height, 0);
   }
 }
 
@@ -25,12 +39,45 @@
   max-width: 400px;
   background-color: cadetblue;
   color: white;
+
+  &[data-state='open'] {
+    animation-name: fadeIn, expandHeight;
+    animation-duration: 200ms;
+    animation-timing-function: ease;
+
+    &[data-has-collapsed-size] {
+      animation-name: expandHeight;
+    }
+  }
+
+  &[data-state='closed'] {
+    animation-name: fadeOut, collapseHeight;
+    animation-duration: 200ms;
+    animation-timing-function: ease;
+
+    &[data-has-collapsed-size] {
+      animation-name: collapseHeight;
+    }
+  }
+
+  > * {
+    margin: 12px;
+  }
 }
 
-[data-scope='collapsible'][data-part='content'][data-state='open'] {
-  animation: slideDown 250ms cubic-bezier(0, 0, 0.38, 0.9);
+[data-scope='collapsible'][data-part='indicator'] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 200ms;
+
+  &[data-state='open'] {
+    transform: rotate(90deg);
+  }
 }
 
-[data-scope='collapsible'][data-part='content'][data-state='closed'] {
-  animation: slideUp 200ms cubic-bezier(0, 0, 0.38, 0.9);
+[data-scope='collapsible'][data-part='trigger'] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
 }