fix(ui): improve Carousel padding default and SummaryCard.Overlay height calculation

Carousel: Change default viewport padding from var(--ai-spacing-10) to 0, making
padding opt-in instead of opt-out. This prevents layout issues in constrained
spaces like the 640px ChatGPT iframe where consumers were forced to override
the default 20px padding.

SummaryCard.Overlay: Add box-sizing: border-box to ensure height prop includes
padding in calculation. Previously, setting height={40} with padding={8} resulted
in 56px total (40 + 8 + 8) instead of the expected 40px.

Author: JakeLin

packages/ui/docs/components/composed/carousel.md

@@ -32,7 +32,7 @@ Optional when using loading, error, or empty states. |
 | `flushStart` | `boolean \| undefined` | `false` | Remove the leading offset so the first slide is flush with the viewport start. |
 | `startInset` | `string \| undefined` | `'0'` | Custom left inset inside the carousel container.
 Useful for re-introducing padding when using `flushStart`. |
-| `viewportPadding` | `string \| undefined` | `'var(--ai-spacing-10)'` | Custom viewport padding (top and bottom). |
+| `viewportPadding` | `string \| undefined` | `'0'` | Custom viewport padding (top and bottom). |
 | `onApi` | `((api: import("/Users/jakelin/dev/ai/ai-native-kit/ainativekit-ui/node_modules/.pnpm/embla-carousel@8.6.0/node_modules/embla-carousel/esm/components/EmblaCarousel").EmblaCarouselType \| null) => void) \| undefined` | - | Optional callback that receives the Embla API instance once ready. |
 | `loading` | `boolean \| undefined` | `false` | Loading state - renders children with loading prop or skeleton slides |
 | `loadingSlides` | `number \| undefined` | `6` | Number of skeleton slides to show when loading and no children provided |

packages/ui/src/components/Card/SummaryCard.module.css

@@ -423,6 +423,7 @@
   z-index: 1; /* Above image, below loading/error states */
   border-radius: 16px 16px 0 0; /* Match image top corners */
   pointer-events: auto; /* Allow interaction if needed */
+  box-sizing: border-box; /* Include padding in height calculation */
 }
 
 /* Image Section - Make it position relative for absolute overlay positioning */

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

@@ -43,7 +43,7 @@
 .emblaViewport {
   position: relative;
   overflow: hidden;
-  padding: var(--carousel-viewport-padding, var(--ai-spacing-10)) 0;
+  padding: var(--carousel-viewport-padding, 0) 0;
 }
 
 /* Embla Container (flex container for slides) */

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

@@ -75,7 +75,7 @@ export interface CarouselProps {
 
   /**
    * Custom viewport padding (top and bottom).
-   * @default 'var(--ai-spacing-10)'
+   * @default '0'
    */
   viewportPadding?: string;