negodesign 0.0.40 → 0.0.42

package/dist/components/core/card/profile/01/CardProfile01.svelte

@@ -109,7 +109,7 @@
       {isImageButtonMaximized}
       {isVideoButtonMaximized}
       {isLoading}
-      class="md:h-32.5 lg:h-44"
+      class="h-32.5 md:h-36 lg:h-44"
     />
 
     {#if onButtonProfile}

package/dist/components/core/card/profile/02/CardProfile02.svelte

@@ -108,7 +108,7 @@
       {isImageButtonMaximized}
       {isVideoButtonMaximized}
       {isLoading}
-      class="md:h-32.5 lg:h-44"
+      class="h-32.5 md:h-36 lg:h-44"
     />
 
     {#if onButtonProfile}

package/dist/components/core/card/shared/TruncatableText.svelte

@@ -18,7 +18,8 @@
   $effect(() => {
     if (!textEl) return;
     const check = () =>
-      (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 1);
+      (isTruncated =
+        (textEl?.scrollHeight ?? 0) > (textEl?.clientHeight ?? 0) + 1);
     // requestAnimationFrame garante que o layout com o clamp já foi aplicado
     // antes de medirmos — medir no mesmo tick pode dar valores desatualizados.
     requestAnimationFrame(check);

package/dist/components/core/carousel/badge/ui/CarouselBadge.svelte

@@ -13,6 +13,7 @@
     activeClass = "bg-gradient text-white rounded-sm px-3",
     isLoading = false,
     orientation = "horizontal",
+    itemClass,
     onClick,
   }: CarouselBadgeProps = $props();
 
@@ -67,7 +68,9 @@
           <div
             class="flex gap-1 mx-2 p-0.5 justify-center items-center cursor-pointer
             {orientation === 'horizontal' ? 'flex-row' : 'flex-col'}
-            {isSelected(item) ? activeClass : ''}"
+            {isSelected(item) ? activeClass : ''} 
+            {itemClass} 
+          "
           >
             {@render itemVisual(item)}
             <div class={labelClass}>{item.label}</div>

package/dist/components/core/carousel/grid/product/ui/CarouselGridProduct.svelte

@@ -34,7 +34,7 @@
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardProduct id={i} {variant} isLoading />
             </Carousel.Item>
           {:else}
@@ -46,7 +46,7 @@
       {:else}
         {#each items as item, i (`product-${item.id ?? i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardProduct
                 {...item}
                 {variant}

package/dist/components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte

@@ -38,7 +38,7 @@
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardProfile id={i} {variant} isLoading />
             </Carousel.Item>
           {:else}
@@ -50,7 +50,7 @@
       {:else}
         {#each items as item, i (`profile-${item.id ?? i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardProfile
                 {...item}
                 {variant}

package/dist/components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte

@@ -33,7 +33,7 @@
       {#if isLoading}
         {#each Array.from( { length: responsive.isMobile ? 3 : 6 }, ) as _, i (`loading-${i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardPromotion id={i} isLoading />
             </Carousel.Item>
           {:else}
@@ -45,7 +45,7 @@
       {:else}
         {#each items as item, i (`promotion-${item.id ?? i}`)}
           {#if responsive.isMobile}
-            <Carousel.Item class="pl-2 basis-auto">
+            <Carousel.Item class="pl-2 basis-auto w-[300px]">
               <CardPromotion
                 {...item}
                 {isDescriptionIcon}

package/dist/components/core/carousel/hero/CarouselHero.svelte

@@ -13,6 +13,7 @@
     intervalMs = 5000,
     transitionMs = 1200,
     indicatorShow = false,
+    sectionClass,
   }: CarouselHeroProps & {
     children?: Snippet;
     intervalMs?: number;
@@ -110,7 +111,7 @@
       <NavMenu {...navMenu} />
 
       <section
-        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4"
+        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4 {sectionClass}"
       >
         {#key selected.title}
           <div

package/dist/components/core/carousel/types.d.ts

@@ -61,6 +61,7 @@ export interface CarouselBadgeProps {
     activeClass?: string;
     /** Estado de carregamento (skeleton) */
     isLoading?: boolean;
+    itemClass?: string;
     onClick?: (value: string | number) => void;
 }
 /**
@@ -90,4 +91,5 @@ export interface CarouselHeroProps {
     titleClass?: string;
     /** Classe CSS personalizada para a descrição */
     descriptionClass?: string;
+    sectionClass?: string;
 }

package/dist/components/core/panel/CarouselSlot.svelte

@@ -42,7 +42,7 @@
     {#if positionButtonPreviousAndNext == "top_right" || responsive.isMobile}
       {#if isButtonPreviousAndNext}
         <div
-          class="absolute -top-16 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
+          class="absolute -top-5 md:-top-10 right-8 md:right-10 lg:right-12 z-20"
         >
           <Carousel.Previous
             class={`${styleTopCenter} ${buttonPreviousAndNextClass}`}

package/dist/globals.css

@@ -296,12 +296,12 @@
   .end-2 {
     inset-inline-end: calc(var(--spacing) * 2);
   }
+  .-top-5 {
+    top: calc(var(--spacing) * -5);
+  }
   .-top-12 {
     top: calc(var(--spacing) * -12);
   }
-  .-top-16 {
-    top: calc(var(--spacing) * -16);
-  }
   .top-0 {
     top: 0px;
   }
@@ -801,6 +801,9 @@
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
+  .h-32\.5 {
+    height: calc(var(--spacing) * 32.5);
+  }
   .h-36 {
     height: calc(var(--spacing) * 36);
   }
@@ -4017,8 +4020,8 @@
     .md\:h-25 {
       height: calc(var(--spacing) * 25);
     }
-    .md\:h-32\.5 {
-      height: calc(var(--spacing) * 32.5);
+    .md\:h-36 {
+      height: calc(var(--spacing) * 36);
     }
     .md\:h-44 {
       height: calc(var(--spacing) * 44);

package/dist/index.d.ts

@@ -19,6 +19,8 @@ import PageOtpVerification from "./components/pages/security/otp-verification/Pa
 import PageForgetPassword from "./components/pages/security/forget-password/PageForgetPassword.svelte";
 import PageResetPassword from "./components/pages/security/reset-password/PageResetPassword.svelte";
 import TabUnderline from "./components/core/tabs/ui/tab-underline.svelte";
+import CarouselGridPromotion from "./components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte";
+import CarouselGridProduct from "./components/core/carousel/grid/product/ui/CarouselGridProduct.svelte";
 import CarouselGridProfile from "./components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte";
 import CarouselHighlights from "./components/core/carousel/highlights/ui/CarouselHighlights.svelte";
 import CarouselGridMedia from "./components/core/carousel/grid/media/ui/CarouselGridMedia.svelte";
@@ -120,6 +122,18 @@ CarouselGridMedia,
  * @see CarouselProfileProps
  */
 CarouselGridProfile, 
+/**
+ * Layout em grid responsivo de cards de produto (imagens ou vídeos).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselProductProps
+ */
+CarouselGridProduct, 
+/**
+* Layout em grid responsivo de cards de produto in promotion (imagens ou vídeos).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselGridPromotion
+ */
+CarouselGridPromotion, 
 /**
  * Componente de abas com estilo underline. Troca o conteúdo (Snippet)
  * conforme a aba selecionada.

package/dist/index.js

@@ -19,6 +19,8 @@ import PageOtpVerification from "./components/pages/security/otp-verification/Pa
 import PageForgetPassword from "./components/pages/security/forget-password/PageForgetPassword.svelte";
 import PageResetPassword from "./components/pages/security/reset-password/PageResetPassword.svelte";
 import TabUnderline from "./components/core/tabs/ui/tab-underline.svelte";
+import CarouselGridPromotion from "./components/core/carousel/grid/promotion/ui/CarouselGridPromotion.svelte";
+import CarouselGridProduct from "./components/core/carousel/grid/product/ui/CarouselGridProduct.svelte";
 import CarouselGridProfile from "./components/core/carousel/grid/profile/ui/CarouselGridProfile.svelte";
 import CarouselHighlights from "./components/core/carousel/highlights/ui/CarouselHighlights.svelte";
 import CarouselGridMedia from "./components/core/carousel/grid/media/ui/CarouselGridMedia.svelte";
@@ -120,6 +122,18 @@ CarouselGridMedia,
  * @see CarouselProfileProps
  */
 CarouselGridProfile, 
+/**
+ * Layout em grid responsivo de cards de produto (imagens ou vídeos).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselProductProps
+ */
+CarouselGridProduct, 
+/**
+* Layout em grid responsivo de cards de produto in promotion (imagens ou vídeos).
+ * Em telas mobile transforma-se num carousel com swipe.
+ * @see CarouselGridPromotion
+ */
+CarouselGridPromotion, 
 /**
  * Componente de abas com estilo underline. Troca o conteúdo (Snippet)
  * conforme a aba selecionada.

package/dist/types/index.d.ts

@@ -5,7 +5,7 @@ import type { OtpVerificationRequestDto, PageOtpVerificationProps } from "../com
 import type { NavMenuLinksProps, NavMenuLogoProps, NavMenuActionsProps, NavMenuProps } from "../components/core/nav/data/nav-menu";
 import type { NavMenuSidebarProps, NavMenuAndSubmenuSidebarProps, GroupMenuSidebarProps, SubMenuSidebarProps, NavMenuItem } from "../components/core/nav/data/nav-menu-sidebar";
 import type { NavUserSidebarProps } from "../components/core/nav/data/nav-user-sidebar";
-import type { CardMediaProps, CardProfileProps, CardPromotionProps, CardHighlightProps, CardTagsProps } from "../components/core/card/types";
+import type { CardMediaProps, CardProfileProps, CardPromotionProps, CardHighlightProps, CardTagsProps, CardProductProps } from "../components/core/card/types";
 import type { CarouselGridMediaProps } from "../components/core/carousel/grid/media/types";
 import type { CarouselGridProfileProps } from "../components/core/carousel/grid/profile/types";
 import type { CarouselHighlightsProps } from "../components/core/carousel/highlights/types";
@@ -25,6 +25,8 @@ import type { ProductDetailsProps, ProductDetailsData, ProductDetailsBreadcrumbI
 import type { PrivacyPolicyOrTermsOfUseProps, DocPageData, DocSection, ContentBlock, BreadcrumbItem, TocItem } from "../components/pages/privacy-policy-or-terms-of-use/types";
 import type { InputLabelProps } from "../components/core/form/data/InputLabel.svelte";
 import type { NegoDesignProps } from "../components/types";
+import type { CarouselGridPromotionProps } from "../components/core/carousel/grid/promotion/types";
+import type { CarouselGridProductProps } from "../components/core/carousel/grid/product/types";
 export type { 
 /** Props de um link individual no menu de navegação. @see NavMenuLinksProps */
 NavMenuLinksProps, 
@@ -56,6 +58,8 @@ CardProfileProps,
 CardPromotionProps, 
 /** Props do CardHighlight — card de destaque/organização com botão de ação. @see CardHighlightProps */
 CardHighlightProps, 
+/** Props do CardProduct — card de produto com preço antigo/novo e botão comprar. @see CardProductProps */
+CardProductProps, 
 /** Props do cabeçalho de carousel (título, descrição, botão "Ver tudo"). @see CarouselHeaderProps */
 CarouselHeaderProps, 
 /** Props do slot/container de carousel (botões navegação, plugins, bordas). @see CarouselSlotProps */
@@ -76,6 +80,10 @@ CarouselGridProfileProps,
 CarouselHighlightsProps, 
 /** Props do CarouselPromotion — carousel de cards de promoção com preços. @see CarouselPromotionProps */
 CarouselPromotionProps, 
+/** Props do CarouselGridPromotion — grid de cards de produto em promoção. @see CarouselGridPromotionProps */
+CarouselGridPromotionProps, 
+/** Props do CarouselGridProduct — grid de cards de produto @see CarouselGridProductProps */
+CarouselGridProductProps, 
 /** Props base do banner de anúncio (AdCardBanner). @see BannerProps */
 BannerProps, 
 /** Alias para BannerProps — props do componente AdCardBanner. @see AdCardBannerProps */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "negodesign",
-	"version": "0.0.40",
+	"version": "0.0.42",
 	"type": "module",
 	"license": "MIT",
 	"sideEffects": [