chore: release v0.9.0

Fix Carousel horizontal overflow in width-constrained containers (Issue #17)

- Replace negative margin gap implementation with CSS gap property
- Carousel now self-contained without requiring parent overflow-x: hidden
- Add test story in Edge Cases section demonstrating fix
- Simplify CSS by removing negative margin compensation logic

Closes #17

Author: JakeLin

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.9.0] - 2025-11-10
+
+### Fixed
+
+- **Carousel**: Fixed horizontal page overflow in width-constrained containers (Issue #17)
+  - Replaced negative margin gap implementation with CSS `gap` property
+  - Carousel now properly contains itself without requiring parent containers to use `overflow-x: hidden`
+  - Self-contained component handles its own overflow correctly
+
 ## [0.8.0] - 2025-11-09
 
 ### Fixed

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainativekit/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "AI Native Kit - Component library for AI-powered applications",
   "type": "module",
   "main": "./dist/index.cjs",

packages/ui/src/components/Carousel/Carousel.module.css

@@ -50,26 +50,18 @@
 .emblaContainer {
   display: flex;
   align-items: stretch;
-  margin-left: calc(var(--carousel-gap, 0) / -2);
-  margin-right: calc(var(--carousel-gap, 0) / -2);
+  gap: var(--carousel-gap, 0);
   padding-left: var(--carousel-start-inset, 0);
 }
 
 .emblaContainerFlushStart {
-  margin-left: 0;
   --carousel-start-inset: 0;
 }
 
 /* Embla Slide */
 .emblaSlide {
   flex: 0 0 auto;
   min-width: 0;
-  padding-left: calc(var(--carousel-gap, 0) / 2);
-  padding-right: calc(var(--carousel-gap, 0) / 2);
-}
-
-.emblaSlideFlushStart:first-child {
-  padding-left: 0;
 }
 
 /* Edge Gradients */

packages/ui/src/components/Carousel/Carousel.stories.tsx

@@ -1031,7 +1031,7 @@ Current: {currentSlide + 1} of {total}`}</code>
           </div>
 
           {/* Two Slides */}
-          <div>
+          <div style={{ marginBottom: '32px' }}>
             <h3 style={{ fontSize: '16px', marginBottom: '12px' }}>Two Slides</h3>
             <p
               style={{
@@ -1050,6 +1050,68 @@ Current: {currentSlide + 1} of {total}`}</code>
               ))}
             </Carousel>
           </div>
+
+          {/* Constrained Container - Issue #17 Fix */}
+          <div>
+            <h3 style={{ fontSize: '16px', marginBottom: '12px' }}>
+              Carousel in Width-Constrained Container
+            </h3>
+            <p
+              style={{
+                fontSize: '14px',
+                color: 'var(--ai-color-text-secondary)',
+                marginBottom: '12px',
+              }}
+            >
+              Tests fix for Issue #17: Carousel should not cause horizontal page overflow when
+              placed in width-constrained containers (e.g., ChatGPT widgets with constrained iframe
+              widths)
+            </p>
+            <div
+              style={{
+                maxWidth: '768px',
+                margin: '0 auto',
+                border: '2px solid var(--ai-color-border-light)',
+                borderRadius: '8px',
+                padding: '16px',
+                backgroundColor: 'var(--ai-color-bg-secondary)',
+              }}
+            >
+              <div
+                style={{
+                  marginBottom: '12px',
+                  fontSize: '14px',
+                  fontWeight: 600,
+                  color: 'var(--ai-color-text-secondary)',
+                }}
+              >
+                Container: max-width: 768px
+              </div>
+              <Carousel gap="16px" align="start">
+                {sampleImages.slice(0, 5).map((image, index) => (
+                  <div key={index} style={{ width: '240px', flexShrink: 0 }}>
+                    <ImageCard
+                      image={image}
+                      title={`Image ${index + 1}`}
+                      subtitle="No overflow!"
+                      size="compact"
+                    />
+                  </div>
+                ))}
+              </Carousel>
+            </div>
+            <div
+              style={{
+                marginTop: '12px',
+                fontSize: '13px',
+                color: 'var(--ai-color-text-secondary)',
+                fontStyle: 'italic',
+              }}
+            >
+              ✅ Expected: No horizontal scrollbar at page level. Carousel fully contained within
+              bordered container.
+            </div>
+          </div>
         </div>
       </section>