negodesign 0.0.67 → 0.0.69

package/dist/components/core/carousel/grid/shared/ui/CarouselGridSlot.svelte

@@ -5,7 +5,7 @@
   import { useDevice } from "../../../../../../hooks/responsive.svelte";
   import Autoplay from "embla-carousel-autoplay";
   import type { GridProps } from "../../../../grid/data/types";
-  import SimpleGrid from "../../../../grid/ui/SimpleGrid.svelte";
+  import SimpleGrid from "../../../../grid/ui/ItemsSimpleGrid.svelte";
 
   type Props = {
     slotProps?: CarouselSlotProps;

package/dist/components/core/carousel/shared/ui/CarouselHeader.svelte

@@ -24,7 +24,7 @@
 
 <div class="w-full flex justify-center">
   <div
-    class="w-[95%] p-2 rounded-xl
+    class="w-full p-2 rounded-xl
     {isBorder ? 'border border-gray-50 dark:border-gray-800' : ''} 
     {containerClass}"
   >
@@ -43,9 +43,8 @@
         {#if onButtonViewAll}
           <div>
             <Button
-              variant="ghost"
-              size="sm"
-              class="flex items-center gap-0.5"
+              variant="outline"
+              class="flex items-center gap-0.5 border"
               onclick={onButtonViewAll}
             >
               {$t("label.view.full")}

package/dist/components/core/grid/data/types.d.ts

@@ -6,14 +6,17 @@ export interface ItemGridProps {
     description?: string;
     iconClass?: string;
     titleClass?: string;
+    itemClassName?: string;
     descriptionClass?: string;
     icon: string | IconSvgElement;
     onClick?: (id: string | number) => void;
 }
 export interface GridProps {
     items?: ItemGridProps[];
+    itemClassName?: string;
     className?: string;
     variant?: 1 | 2;
     isLoading?: boolean;
+    selectedKey?: string | number;
     onClick?: (id: string | number) => void;
 }

package/dist/components/core/grid/ui/01/Grid01.svelte

@@ -12,6 +12,7 @@
         iconClass,
         titleClass,
         description,
+        itemClassName,
         descriptionClass,
         onClick,
     }: ItemGridProps = $props();
@@ -21,7 +22,7 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2 hover:bg-primary/30 rounded-xl"
+    class="flex flex-col justify-center items-center gap-2 rounded-xl {itemClassName}"
 >
     <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />

package/dist/components/core/grid/ui/02/Grid02.svelte

@@ -12,6 +12,7 @@
         description,
         iconClass,
         titleClass,
+        itemClassName,
         descriptionClass,
         onClick,
     }: ItemGridProps = $props();
@@ -21,7 +22,7 @@
     onclick={() => {
         if (id && onClick) onClick(id);
     }}
-    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer hover:bg-primary/30"
+    class="flex flex-col justify-center items-center gap-2 border rounded-lg p-2 cursor-pointer {itemClassName}"
 >
     <IconRenderGrid {icon} {iconClass} {isLoading} />
     <TitleGrid {titleClass} {title} {isLoading} />

package/dist/components/core/grid/ui/ItemsPanel.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { GridProps } from "../data/types";
+  import PanelCarousel from "./ItemsPanelCarousel.svelte";
+  import PanelGrid from "./ItemsPanelGrid.svelte";
+
+  let {
+    style = "grid",
+    onClick,
+    ...restProps
+  }: GridProps & {
+    style?: "inline" | "grid";
+  } = $props();
+
+  let selectedKey = $state<string | number | undefined>("");
+
+  function selectItem(id: string | number) {
+    selectedKey = `${id}`;
+    onClick?.(id);
+  }
+</script>
+
+{#if style == "inline"}
+  <PanelCarousel {...restProps} {selectedKey} onClick={selectItem} />
+{:else}
+  <PanelGrid {...restProps} {selectedKey} onClick={selectItem} />
+{/if}

package/dist/components/core/grid/ui/ItemsPanel.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { GridProps } from "../data/types";
+type $$ComponentProps = GridProps & {
+    style?: "inline" | "grid";
+};
+declare const ItemsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ItemsPanel = ReturnType<typeof ItemsPanel>;
+export default ItemsPanel;

package/dist/components/core/grid/ui/ItemsPanelCarousel.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import * as Carousel from "../../../ui/carousel/index.js";
+  import type { GridProps } from "../data/types";
+  import Grid02 from "./02/Grid02.svelte";
+  import Grid01 from "./01/Grid01.svelte";
+
+  let { variant, isLoading, items, itemClassName, onClick }: GridProps =
+    $props();
+</script>
+
+<Carousel.Root>
+  <Carousel.Content>
+    {#if isLoading}
+      <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+        {#each Array.from({ length: 10 }) as _, i (`skeleton-${i}`)}
+          <Carousel.Item class="basis-auto relative">
+            {#if variant == 2}
+              <Grid02 title={`${i}`} description="" icon="" {isLoading} />
+            {:else}
+              <Grid01 title={`${i}`} description="" icon="" {isLoading} />
+            {/if}
+          </Carousel.Item>
+        {/each}
+      </div>
+    {:else}
+      {#each items as item, i (`panel-${i}`)}
+        <Carousel.Item class="basis-auto relative">
+          {#if variant == 2}
+            <Grid02 {...item} {onClick} {itemClassName} />
+          {:else}
+            <Grid01 {...item} {onClick} {itemClassName} />
+          {/if}
+        </Carousel.Item>
+      {/each}
+    {/if}
+  </Carousel.Content>
+</Carousel.Root>

package/dist/components/core/grid/ui/ItemsPanelCarousel.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GridProps } from "../data/types";
+declare const ItemsPanelCarousel: import("svelte").Component<GridProps, {}, "">;
+type ItemsPanelCarousel = ReturnType<typeof ItemsPanelCarousel>;
+export default ItemsPanelCarousel;

package/dist/components/core/grid/ui/{PanelGrid.svelte → ItemsPanelGrid.svelte}

@@ -4,7 +4,14 @@
   import Grid02 from "./02/Grid02.svelte";
   import Grid01 from "./01/Grid01.svelte";
 
-  let { variant, className, isLoading, items, onClick }: GridProps = $props();
+  let {
+    variant,
+    className,
+    isLoading,
+    items,
+    itemClassName,
+    onClick,
+  }: GridProps = $props();
 
   const styleMobile = "flex justify-between overflow-x-auto no-scrollbar";
 
@@ -14,8 +21,7 @@
 <div
   class="gap-4 my-2 {responsive.isMobile
     ? styleMobile
-    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} 
-    {className}"
+    : 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 max-h-237.5 overflow-y-auto'} {className}"
 >
   {#if isLoading}
     {#each Array.from({ length: responsive.isMobile ? 3 : 10 }) as it, i (i)}
@@ -28,9 +34,9 @@
   {:else}
     {#each items as item, i (i)}
       {#if variant == 2}
-        <Grid02 {...item} {onClick} />
+        <Grid02 {...item} {onClick} {itemClassName} />
       {:else}
-        <Grid01 {...item} {onClick} />
+        <Grid01 {...item} {onClick} {itemClassName} />
       {/if}
     {/each}
   {/if}

package/dist/components/core/grid/ui/ItemsPanelGrid.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GridProps } from "../data/types";
+declare const ItemsPanelGrid: import("svelte").Component<GridProps, {}, "">;
+type ItemsPanelGrid = ReturnType<typeof ItemsPanelGrid>;
+export default ItemsPanelGrid;

package/dist/components/core/grid/ui/ItemsSimpleGrid.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { GridProps } from "../data/types";
+declare const ItemsSimpleGrid: import("svelte").Component<GridProps, {}, "">;
+type ItemsSimpleGrid = ReturnType<typeof ItemsSimpleGrid>;
+export default ItemsSimpleGrid;

package/dist/components/core/nav/data/types.d.ts

@@ -9,9 +9,12 @@ export type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
 export type NavigationMenuItemProps = {
     label: string;
     href?: string;
+    textClass?: string;
 };
 export type NavigationMenuItemCardProps = {
     label?: string;
+    textClass?: string;
+    subTextClass?: string;
     header?: {
         label: string;
         description: string;
@@ -24,14 +27,19 @@ export type NavigationMenuItemCardProps = {
 };
 export type NavigationMenuItemGridProps = {
     label: string;
+    textClass?: string;
+    subTextClass?: string;
     grids?: ListItemProps[];
 };
 export type NavigationMenuItemListProps = {
     label: string;
+    textClass?: string;
+    subTextClass?: string;
     list?: ListItemProps[];
 };
 export type NavigationMenuItemsProps = {
     label: string;
+    textClass?: string;
     items?: {
         title: string;
         href: string;
@@ -40,6 +48,7 @@ export type NavigationMenuItemsProps = {
 export type ComplexMenuProps = IMenuProps & {
     menus: (NavigationMenuItemProps | NavigationMenuItemListProps | NavigationMenuItemCardProps | NavigationMenuItemGridProps | NavigationMenuItemsProps)[];
     textClass?: string;
+    subTextClass?: string;
 };
 export type MenuVarientProps = ComplexMenuProps | SimpleMenuProps;
 export type MenuProps = IMenuProps & {

package/dist/components/core/nav/ui/ComplexMenu.svelte

@@ -13,21 +13,23 @@
   import NavigationMenuItemList from "./shared/navigation/NavigationMenuItemList.svelte";
   import NavigationMenuItems from "./shared/navigation/NavigationMenuItems.svelte";
 
-  let { menus: links, textClass }: ComplexMenuProps = $props();
+  let { menus: links, textClass, subTextClass }: ComplexMenuProps = $props();
 </script>
 
-<ul class="flex list-none flex-1 flex-wrap items-center justify-center {textClass}">
+<ul
+  class="flex list-none flex-1 flex-wrap items-center justify-center {textClass}"
+>
   {#each links as link, i (i)}
     {#if isCard(link)}
-      <NavigationMenuItemCard {...link} />
+      <NavigationMenuItemCard {...link} {textClass} {subTextClass} />
     {:else if isGrid(link)}
-      <NavigationMenuItemGrid {...link} />
+      <NavigationMenuItemGrid {...link} {textClass} {subTextClass} />
     {:else if isList(link)}
-      <NavigationMenuItemList {...link} />
+      <NavigationMenuItemList {...link} {textClass} {subTextClass} />
     {:else if isItems(link)}
-      <NavigationMenuItems {...link} />
+      <NavigationMenuItems {...link} {textClass} />
     {:else if isItem(link)}
-      <NavigationMenuItem {...link} />
+      <NavigationMenuItem {...link} {textClass} />
     {/if}
   {/each}
-</ul>
+</ul>

package/dist/components/core/nav/ui/mobile/ComplexMenuMobile.svelte

@@ -21,9 +21,18 @@
   let { menus: links }: ComplexMenuProps = $props();
 </script>
 
-{#snippet headerSnippet(header: NonNullable<NavigationMenuItemCardProps["header"]>)}
-  <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">{header.label}</div>
-  <p class="text-sm leading-tight {header.descriptionClass || 'text-muted-foreground'}">{header.description}</p>
+{#snippet headerSnippet(
+  header: NonNullable<NavigationMenuItemCardProps["header"]>,
+)}
+  <div class="mt-4 mb-2 text-lg font-medium {header.labelClass}">
+    {header.label}
+  </div>
+  <p
+    class="text-sm leading-tight {header.descriptionClass ||
+      'text-muted-foreground'}"
+  >
+    {header.description}
+  </p>
 {/snippet}
 
 <MenuMobile>
@@ -34,8 +43,19 @@
         <CollapsibleNavMenu label={card.label ?? card.header?.label ?? ""}>
           <ul class="grid gap-2 p-2">
             {#if card.header}
-              <li class="relative row-span-3" style={card.header.imgUrl ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;` : ""}>
-                <a href={card.header.href ?? "#"} class="flex h-full w-full flex-col justify-end p-4 {card.header.imgUrl ? "no-underline outline-hidden select-none" : "bg-linear-to-b from-muted/50 to-muted rounded-md"}">
+              <li
+                class="relative row-span-3"
+                style={card.header.imgUrl
+                  ? `background-image: url(${card.header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
+                  : ""}
+              >
+                <a
+                  href={card.header.href ?? "#"}
+                  class="flex h-full w-full flex-col justify-end p-4 {card
+                    .header.imgUrl
+                    ? 'no-underline outline-hidden select-none'
+                    : 'bg-linear-to-b from-muted/50 to-muted rounded-md'}"
+                >
                   {@render headerSnippet(card.header)}
                 </a>
               </li>
@@ -47,49 +67,56 @@
             {/if}
           </ul>
         </CollapsibleNavMenu>
-
       {:else if isGrid(link)}
         {@const grid = link as NavigationMenuItemGridProps}
         <CollapsibleNavMenu label={grid.label}>
-          <ul class="grid grid-cols-2 gap-2 p-2">
+          <ul class="grid grid-cols-2 gap-2 max-h-37.5 overflow-y-auto p-2">
             {#each grid.grids ?? [] as item, j (j)}
               <NavMenuItem {...item} />
             {/each}
           </ul>
         </CollapsibleNavMenu>
-
       {:else if isList(link)}
         {@const list = link as NavigationMenuItemListProps}
         <CollapsibleNavMenu label={list.label}>
           <ul class="grid gap-4 p-2">
             {#each list.list ?? [] as item, j (j)}
               <li>
-                <a href={item.href} class="block rounded-md p-2 no-underline hover:bg-accent">
+                <a
+                  href={item.href}
+                  class="block rounded-md p-2 no-underline hover:bg-accent"
+                >
                   <div class="font-medium">{item.title ?? ""}</div>
-                  <div class="text-sm text-muted-foreground">{item.content}</div>
+                  <div class="text-sm text-muted-foreground">
+                    {item.content}
+                  </div>
                 </a>
               </li>
             {/each}
           </ul>
         </CollapsibleNavMenu>
-
       {:else if isItems(link)}
         {@const items = link as NavigationMenuItemsProps}
         <CollapsibleNavMenu label={items.label}>
           <ul class="grid min-w-50 gap-4 p-2">
             {#each items.items ?? [] as item, j (j)}
               <li>
-                <a href={item.href} class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent">
+                <a
+                  href={item.href}
+                  class="block rounded-md px-3 py-2 text-sm font-medium no-underline hover:bg-accent"
+                >
                   {item.title}
                 </a>
               </li>
             {/each}
           </ul>
         </CollapsibleNavMenu>
-
       {:else if isItem(link)}
         {@const item = link as NavigationMenuItemProps}
-        <a href={item.href} class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent">
+        <a
+          href={item.href}
+          class="block w-full rounded-xl px-3 py-2 text-sm font-medium no-underline hover:bg-accent focus:bg-accent"
+        >
           {item.label}
         </a>
       {/if}

package/dist/components/core/nav/ui/shared/MenuListItem.svelte

@@ -6,9 +6,14 @@
     content,
     href,
     icon,
+    textClass,
+    subTextClass,
     class: className,
     ...restProps
-  }: ListItemProps = $props();
+  }: ListItemProps & {
+    textClass?: string;
+    subTextClass?: string;
+  } = $props();
 </script>
 
 <li>
@@ -36,4 +41,4 @@
       {content}
     </p>
   </a>
-</li>
+</li>

package/dist/components/core/nav/ui/shared/MenuListItem.svelte.d.ts

@@ -1,4 +1,8 @@
 import type { ListItemProps } from "../../data/types";
-declare const MenuListItem: import("svelte").Component<ListItemProps, {}, "">;
+type $$ComponentProps = ListItemProps & {
+    textClass?: string;
+    subTextClass?: string;
+};
+declare const MenuListItem: import("svelte").Component<$$ComponentProps, {}, "">;
 type MenuListItem = ReturnType<typeof MenuListItem>;
 export default MenuListItem;

package/dist/components/core/nav/ui/shared/dropdown/DropdownNavigationMenuItemGrid.svelte

@@ -20,7 +20,7 @@
   {#if items}
     {@const gridCols = cols()}
     <DropdownMenu.SubContent>
-      <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols}`}>
+      <ul class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125  ${gridCols}`}>
         {#each items as item, i (i)}
           <DropdownMenuListItem {...item} />
         {/each}

package/dist/components/core/nav/ui/shared/navigation/NavDropdown.svelte

@@ -70,9 +70,9 @@
 
 	{#if open}
 		<div
-			class="absolute left-0 top-full z-50 mt-1.5 w-max rounded-2xl bg-popover p-2.5 pr-3 overflow-hidden text-popover-foreground shadow-2xl ring-1 ring-foreground/5"
+			class="absolute left-0 top-full z-50 md:z-100 mt-1.5 w-max rounded-2xl bg-popover p-2.5 pr-3 overflow-hidden text-popover-foreground shadow-2xl ring-1 ring-foreground/5"
 		>
 			{@render children()}
 		</div>
 	{/if}
-</li>
+</li>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItem.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
   import type { NavigationMenuItemProps } from "../../../data/types";
 
-  let { label, href }: NavigationMenuItemProps = $props();
+  let { label, href, textClass }: NavigationMenuItemProps = $props();
 </script>
 
 <li>
   <a
     {href}
-    class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+    class="inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none select-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 {textClass}"
   >
     {label}
   </a>
-</li>
+</li>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemCard.svelte

@@ -3,11 +3,19 @@
   import MenuListItem from "../MenuListItem.svelte";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
+  let {
+    label,
+    header,
+    cards: items,
+    textClass,
+    subTextClass,
+  }: NavigationMenuItemCardProps = $props();
 </script>
 
 {#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
+  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">
+    {label}
+  </div>
   <p
     class="text-sm leading-tight {header?.descriptionClass ||
       'text-muted-foreground'}"
@@ -17,9 +25,7 @@
 {/snippet}
 
 <NavDropdown label={label ?? header?.label ?? ""}>
-  <ul
-    class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]"
-  >
+  <ul class="grid gap-2 p-2 w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
     {#if header}
       <li
         class="row-span-3 relative"
@@ -45,4 +51,4 @@
       {/each}
     {/if}
   </ul>
-</NavDropdown>
+</NavDropdown>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemGrid.svelte

@@ -3,7 +3,12 @@
   import MenuListItem from "../MenuListItem.svelte";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, grids: items }: NavigationMenuItemGridProps = $props();
+  let {
+    label,
+    grids: items,
+    textClass,
+    subTextClass,
+  }: NavigationMenuItemGridProps = $props();
 
   const cols = (): string => {
     const len = items?.length ?? 0;
@@ -20,11 +25,11 @@
 <NavDropdown {label}>
   {#if items}
     <ul
-      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 ${gridCols}`}
+      class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 lg:min-w-150 max-h-75 overflow-y-auto ${gridCols}`}
     >
       {#each items as item, i (i)}
-        <MenuListItem {...item} />
+        <MenuListItem {...item} {textClass} {subTextClass} />
       {/each}
     </ul>
   {/if}
-</NavDropdown>
+</NavDropdown>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItemList.svelte

@@ -9,7 +9,10 @@
   <ul class="grid w-75 gap-4 p-2">
     {#each list as item, i (i)}
       <li>
-        <a href={item.href} class="block rounded-xl p-2 no-underline hover:bg-muted">
+        <a
+          href={item.href}
+          class="block rounded-xl p-2 no-underline hover:bg-muted"
+        >
           <div class="font-medium">{item.title ?? ""}</div>
           <div class="text-muted-foreground">
             {item.content}
@@ -18,4 +21,4 @@
       </li>
     {/each}
   </ul>
-</NavDropdown>
+</NavDropdown>

package/dist/components/core/nav/ui/shared/navigation/NavigationMenuItems.svelte

@@ -2,7 +2,7 @@
   import type { NavigationMenuItemsProps } from "../../../data/types";
   import NavDropdown from "./NavDropdown.svelte";
 
-  let { label, items }: NavigationMenuItemsProps = $props();
+  let { label, items, textClass }: NavigationMenuItemsProps = $props();
 </script>
 
 <NavDropdown {label} className="hidden md:block">
@@ -18,4 +18,4 @@
       </li>
     {/each}
   </ul>
-</NavDropdown>
+</NavDropdown>

package/dist/globals.css

@@ -9,6 +9,7 @@
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-500: oklch(72.3% 0.219 149.579);
     --color-green-600: oklch(62.7% 0.194 149.214);
@@ -876,12 +877,18 @@
   .h-svh {
     height: 100svh;
   }
+  .max-h-37\.5 {
+    max-height: calc(var(--spacing) * 37.5);
+  }
   .max-h-50 {
     max-height: calc(var(--spacing) * 50);
   }
   .max-h-72 {
     max-height: calc(var(--spacing) * 72);
   }
+  .max-h-75 {
+    max-height: calc(var(--spacing) * 75);
+  }
   .max-h-237\.5 {
     max-height: calc(var(--spacing) * 237.5);
   }
@@ -1029,9 +1036,6 @@
   .w-\[60\%\] {
     width: 60%;
   }
-  .w-\[95\%\] {
-    width: 95%;
-  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -1695,6 +1699,9 @@
   .bg-accent {
     background-color: var(--accent);
   }
+  .bg-amber-50 {
+    background-color: var(--color-amber-50);
+  }
   .bg-background {
     background-color: var(--background);
   }
@@ -3361,14 +3368,6 @@
     .hover\:bg-neutral-800:hover {
       background-color: var(--color-neutral-800);
     }
-    .hover\:bg-primary\/30:hover {
-      background-color: var(--primary);
-    }
-    @supports (color: color-mix(in lab, red, red)) {
-      .hover\:bg-primary\/30:hover {
-        background-color: color-mix(in oklab, var(--primary) 30%, transparent);
-      }
-    }
     .hover\:bg-primary\/80:hover {
       background-color: var(--primary);
     }
@@ -4274,6 +4273,9 @@
     .md\:left-6 {
       left: calc(var(--spacing) * 6);
     }
+    .md\:z-100 {
+      z-index: 100;
+    }
     .md\:col-span-2 {
       grid-column: span 2 / span 2;
     }
@@ -4381,9 +4383,6 @@
     .md\:w-52 {
       width: calc(var(--spacing) * 52);
     }
-    .md\:w-100 {
-      width: calc(var(--spacing) * 100);
-    }
     .md\:w-125 {
       width: calc(var(--spacing) * 125);
     }

package/dist/index.d.ts

@@ -34,8 +34,8 @@ import PageLogin from "./components/pages/security/login/PageLogin.svelte";
 import SearchInput from "./components/core/search/SearchInput.svelte";
 import Footer from "./components/core/footer/ui/Footer.svelte";
 import NegoDesign from "./components/NegoDesign.svelte";
-import SimpleGrid from "./components/core/grid/ui/SimpleGrid.svelte";
-import PanelGrid from "./components/core/grid/ui/PanelGrid.svelte";
+import ItemsSimpleGrid from "./components/core/grid/ui/ItemsSimpleGrid.svelte";
+import ItemsPanel from "./components/core/grid/ui/ItemsPanel.svelte";
 /** Store reativa do idioma atual. Altere com `$locale = "pt"`. */
 export { locale } from "./i18n";
 /** Lista de idiomas disponíveis. Atualizado automaticamente. */
@@ -46,7 +46,7 @@ export { t } from "./i18n";
 export { getMergedTranslations } from "./i18n/config";
 /** Retorna a lista de idiomas disponíveis. */
 export { getLocales } from "./i18n/config";
-export { Menu, SimpleGrid, PanelGrid, 
+export { Menu, ItemsSimpleGrid, ItemsPanel, 
 /**
  * Componente raiz do Negodesign.
  * Configura o tema, idioma e traduções da aplicação.

package/dist/index.js

@@ -34,8 +34,8 @@ import PageLogin from "./components/pages/security/login/PageLogin.svelte";
 import SearchInput from "./components/core/search/SearchInput.svelte";
 import Footer from "./components/core/footer/ui/Footer.svelte";
 import NegoDesign from "./components/NegoDesign.svelte";
-import SimpleGrid from "./components/core/grid/ui/SimpleGrid.svelte";
-import PanelGrid from "./components/core/grid/ui/PanelGrid.svelte";
+import ItemsSimpleGrid from "./components/core/grid/ui/ItemsSimpleGrid.svelte";
+import ItemsPanel from "./components/core/grid/ui/ItemsPanel.svelte";
 /** Store reativa do idioma atual. Altere com `$locale = "pt"`. */
 export { locale } from "./i18n";
 /** Lista de idiomas disponíveis. Atualizado automaticamente. */
@@ -46,7 +46,7 @@ export { t } from "./i18n";
 export { getMergedTranslations } from "./i18n/config";
 /** Retorna a lista de idiomas disponíveis. */
 export { getLocales } from "./i18n/config";
-export { Menu, SimpleGrid, PanelGrid, 
+export { Menu, ItemsSimpleGrid, ItemsPanel, 
 /**
  * Componente raiz do Negodesign.
  * Configura o tema, idioma e traduções da aplicação.

package/package.json

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

package/dist/components/core/grid/ui/PanelGrid.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { GridProps } from "../data/types";
-declare const PanelGrid: import("svelte").Component<GridProps, {}, "">;
-type PanelGrid = ReturnType<typeof PanelGrid>;
-export default PanelGrid;

package/dist/components/core/grid/ui/SimpleGrid.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { GridProps } from "../data/types";
-declare const SimpleGrid: import("svelte").Component<GridProps, {}, "">;
-type SimpleGrid = ReturnType<typeof SimpleGrid>;
-export default SimpleGrid;

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItem.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemProps } from "../../../data/types";
-  import { navigationMenuTriggerStyle } from "../../../../../ui/navigation-menu/navigation-menu-trigger.svelte";
-
-  let { label, href }: NavigationMenuItemProps = $props();
-</script>
-
-<NavigationMenu.Item>
-  <NavigationMenu.Link>
-    {#snippet child()}
-      <a {href} class={navigationMenuTriggerStyle()}>{label}</a>
-    {/snippet}
-  </NavigationMenu.Link>
-</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItem.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationMenuItemProps } from "../../../data/types";
-declare const NavigationMenuItem: import("svelte").Component<NavigationMenuItemProps, {}, "">;
-type NavigationMenuItem = ReturnType<typeof NavigationMenuItem>;
-export default NavigationMenuItem;

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemCard.svelte

@@ -1,62 +0,0 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemCardProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-
-  let { label, header, cards: items }: NavigationMenuItemCardProps = $props();
-</script>
-
-{#snippet headerSnippet(label: string, description: string)}
-  <div class="mt-4 mb-2 text-lg font-medium {header?.labelClass}">{label}</div>
-  <p
-    class="text-sm leading-tight {header?.descriptionClass ||
-      'text-muted-foreground'}"
-  >
-    {description}
-  </p>
-{/snippet}
-
-<NavigationMenu.Item>
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid gap-2 p-2 md:w-100 lg:w-125 lg:grid-cols-[.75fr_1fr]">
-      {#if header}
-        <li
-          class="row-span-3 relative"
-          style={header.imgUrl
-            ? `background-image: url(${header.imgUrl}); background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px;`
-            : ``}
-        >
-          <NavigationMenu.Link
-            class={`flex h-full w-full flex-col justify-end p-4 md:p-6 ${
-              header.imgUrl
-                ? `no-underline outline-hidden select-none`
-                : `bg-linear-to-b from-muted/50 to-muted rounded-md focus:shadow-md`
-            }`}
-          >
-            {#snippet child({ props })}
-              {#if header.imgUrl}
-                <a
-                  {...props}
-                  href={header.href ?? "#"}
-                  class="bg-transparent absolute left-2 bottom-2"
-                >
-                  {@render headerSnippet(header.label, header.description)}
-                </a>
-              {:else}
-                <a {...props} href={header.href ?? "#"}>
-                  {@render headerSnippet(header.label, header.description)}
-                </a>
-              {/if}
-            {/snippet}
-          </NavigationMenu.Link>
-        </li>
-      {/if}
-      {#if items && items.length > 0}
-        {#each items as item, i (i)}
-          <MenuListItem {...item} />
-        {/each}
-      {/if}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemCard.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationMenuItemCardProps } from "../../../data/types";
-declare const NavigationMenuItemCard: import("svelte").Component<NavigationMenuItemCardProps, {}, "">;
-type NavigationMenuItemCard = ReturnType<typeof NavigationMenuItemCard>;
-export default NavigationMenuItemCard;

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemGrid.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemGridProps } from "../../../data/types";
-  import MenuListItem from "../MenuListItem.svelte";
-
-  let { label, grids: items }: NavigationMenuItemGridProps = $props();
-
-  const cols = (): string => {
-    const len = items?.length ?? 0;
-    if (len > 10) return "md:grid-cols-3 lg:grid-cols-4";
-    if (len > 5) return "md:grid-cols-3";
-    if (len % 3 == 0) return "md:grid-cols-3";
-    if (len % 2 == 0) return "md:grid-cols-2";
-    return "grid-cols-1";
-  };
-</script>
-
-<NavigationMenu.Item>
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  {#if items}
-    {@const gridCols = cols()}
-    <NavigationMenu.Content>
-      <ul
-        class={`grid w-75 gap-2 p-2 sm:w-100 md:w-125 ${gridCols} lg:min-w-150`}
-      >
-        {#each items as item, i (i)}
-          <MenuListItem {...item} />
-        {/each}
-      </ul>
-    </NavigationMenu.Content>
-  {/if}
-</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemGrid.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationMenuItemGridProps } from "../../../data/types";
-declare const NavigationMenuItemGrid: import("svelte").Component<NavigationMenuItemGridProps, {}, "">;
-type NavigationMenuItemGrid = ReturnType<typeof NavigationMenuItemGrid>;
-export default NavigationMenuItemGrid;

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemList.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemListProps } from "../../../data/types";
-
-  let { label, list }: NavigationMenuItemListProps = $props();
-</script>
-
-<NavigationMenu.Item class="hidden md:block relative">
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid w-75 gap-4 p-2">
-      {#each list as item, i (i)}
-        <li>
-          <NavigationMenu.Link href={item.href}>
-            <div class="font-medium">{item.title ?? ""}</div>
-            <div class="text-muted-foreground">
-              {item.content}
-            </div>
-          </NavigationMenu.Link>
-        </li>
-      {/each}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItemList.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationMenuItemListProps } from "../../../data/types";
-declare const NavigationMenuItemList: import("svelte").Component<NavigationMenuItemListProps, {}, "">;
-type NavigationMenuItemList = ReturnType<typeof NavigationMenuItemList>;
-export default NavigationMenuItemList;

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItems.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import * as NavigationMenu from "../../../../../ui/navigation-menu/index.js";
-  import type { NavigationMenuItemsProps } from "../../../data/types";
-
-  let { label, items }: NavigationMenuItemsProps = $props();
-</script>
-
-<NavigationMenu.Item class="hidden md:block relative">
-  <NavigationMenu.Trigger>{label}</NavigationMenu.Trigger>
-  <NavigationMenu.Content>
-    <ul class="grid min-w-50 gap-4 p-1 md:p-2">
-      {#each items as item, i (i)}
-        <li>
-          <NavigationMenu.Link href={item.href} class="py-1">
-            {item.title}
-          </NavigationMenu.Link>
-        </li>
-      {/each}
-    </ul>
-  </NavigationMenu.Content>
-</NavigationMenu.Item>

package/dist/components/core/nav/ui/shared/navigation-old/NavigationMenuItems.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { NavigationMenuItemsProps } from "../../../data/types";
-declare const NavigationMenuItems: import("svelte").Component<NavigationMenuItemsProps, {}, "">;
-type NavigationMenuItems = ReturnType<typeof NavigationMenuItems>;
-export default NavigationMenuItems;