negodesign 0.0.26 → 0.0.28

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

@@ -1,56 +1,56 @@
-<!-- shared/TruncatableText.svelte -->
-<script lang="ts">
-    /**
-     * Clamps text to N lines; if it overflows, shows an indicator
-     * ("Ler texto completo") positioned absolutely at the end of the
-     * text, that opens the full text in a Popover.
-     * @component
-     */
-    import * as Popover from "../../../ui/popover";
-    import { t } from "../../../../i18n";
-
-    type Props = { text: string; class?: string; lines?: 2 | 3 | 4 };
-    let { text, class: className = "", lines = 2 }: Props = $props();
-
-    // Tailwind precisa de classes literais no código-fonte para as gerar —
-    // "line-clamp-{lines}" interpolado nunca é detectado pelo scanner.
-    const clampClasses = {
-        2: "line-clamp-2",
-        3: "line-clamp-3",
-        4: "line-clamp-4",
-    } as const;
-
-    let textEl: HTMLParagraphElement | undefined = $state();
-    let isTruncated = $state(false);
-
-    $effect(() => {
-        if (!textEl) return;
-        const check = () =>
-            (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 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);
-        const ro = new ResizeObserver(check);
-        ro.observe(textEl);
-        return () => ro.disconnect();
-    });
-</script>
-
-<div class="relative">
-    <p bind:this={textEl} class="{clampClasses[lines]} {className}">
-        {text}
-    </p>
-
-    {#if isTruncated}
-        <Popover.Root>
-            <Popover.Trigger
-                class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
-            >
-                {$t("label.view.full")}
-            </Popover.Trigger>
-            <Popover.Content>
-                <p class="max-w-xs text-justify text-[12px]">{text}</p>
-            </Popover.Content>
-        </Popover.Root>
-    {/if}
+<!-- shared/TruncatableText.svelte -->
+<script lang="ts">
+    /**
+     * Clamps text to N lines; if it overflows, shows an indicator
+     * ("Ler texto completo") positioned absolutely at the end of the
+     * text, that opens the full text in a Popover.
+     * @component
+     */
+    import * as Popover from "../../../ui/popover";
+    import { t } from "../../../../i18n";
+
+    type Props = { text: string; class?: string; lines?: 2 | 3 | 4 };
+    let { text, class: className = "", lines = 2 }: Props = $props();
+
+    // Tailwind precisa de classes literais no código-fonte para as gerar —
+    // "line-clamp-{lines}" interpolado nunca é detectado pelo scanner.
+    const clampClasses = {
+        2: "line-clamp-2",
+        3: "line-clamp-3",
+        4: "line-clamp-4",
+    } as const;
+
+    let textEl: HTMLParagraphElement | undefined = $state();
+    let isTruncated = $state(false);
+
+    $effect(() => {
+        if (!textEl) return;
+        const check = () =>
+            (isTruncated = textEl!.scrollHeight > textEl!.clientHeight + 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);
+        const ro = new ResizeObserver(check);
+        ro.observe(textEl);
+        return () => ro.disconnect();
+    });
+</script>
+
+<div class="relative">
+    <p bind:this={textEl} class="{clampClasses[lines]} {className}">
+        {text}
+    </p>
+
+    {#if isTruncated}
+        <Popover.Root>
+            <Popover.Trigger
+                class="absolute bottom-0 right-0 bg-background pl-1 text-[11px] font-medium text-primary underline underline-offset-2 cursor-pointer"
+            >
+                {$t("label.view.full")}
+            </Popover.Trigger>
+            <Popover.Content>
+                <p class="max-w-xs text-justify text-[12px]">{text}</p>
+            </Popover.Content>
+        </Popover.Root>
+    {/if}
 </div>

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

@@ -1,83 +1,82 @@
-<script lang="ts">
-  import * as Carousel from "../../../../ui/carousel/index.js";
-  import type { CarouselBadgeProps } from "../../types.js";
-  import { HugeiconsIcon } from "@hugeicons/svelte";
-  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
-  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
-  import { useDevice } from "../../../../../hooks/responsive.svelte";
-
-  const {
-    items,
-    imageClass,
-    iconClass,
-    labelClass,
-    activeClass,
-    valueActive,
-    isLoading = false,
-    itemCarouselClass,
-    orientation = "horizontal",
-    isBorderItem = false,
-    isBorderBottom = false,
-    isButtonPreviousAndNext = true,
-    buttonPreviousAndNextClass = "",
-  }: CarouselBadgeProps = $props();
-
-  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
-  const responsive = useDevice();
-</script>
-
-<CarouselSlot
-  {isBorderBottom}
-  {isButtonPreviousAndNext}
-  {buttonPreviousAndNextClass}
->
-  {#if isLoading}
-    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
-      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as it, i (i)}
-        <Skeleton class="h-4 w-25 bg-black/20" />
-        <div class="src-only">{it}</div>
-      {/each}
-    </div>
-  {:else}
-    {#each items as item, i (i)}
-      <Carousel.Item
-        onclick={() => item.onClick?.(item.value)}
-        class={`
-          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
-          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
-          ${item.value === valueActive ? activeClass : ""}
-          ${itemCarouselClass}`}
-      >
-        <div
-          class={`
-              flex gap-1 mx-2 p-0.5 justify-center items-center
-               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
-          `}
-        >
-          {#if item.image}
-            <img
-              src={item.image}
-              alt={item.label}
-              class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
-            />
-          {:else if item.icon}
-            {#if typeof item.icon === "string"}
-              <div>
-                <i
-                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
-                >
-                </i>
-              </div>
-            {:else}
-              <HugeiconsIcon
-                icon={item.icon}
-                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
-              />
-            {/if}
-          {/if}
-          <div class={`${labelClass}`}>{item.label}</div>
-        </div>
-      </Carousel.Item>
-    {/each}
-  {/if}
-</CarouselSlot>
+<script lang="ts">
+  import * as Carousel from "../../../../ui/carousel/index.js";
+  import type { CarouselBadgeProps } from "../../types.js";
+  import { HugeiconsIcon } from "@hugeicons/svelte";
+  import CarouselSlot from "../../../panel/CarouselSlot.svelte";
+  import Skeleton from "../../../../ui/skeleton/skeleton.svelte";
+  import { useDevice } from "../../../../../hooks/responsive.svelte";
+
+  const {
+    items = [],
+    imageClass,
+    iconClass,
+    labelClass,
+    activeClass,
+    valueActive,
+    isLoading = false,
+    itemCarouselClass,
+    orientation = "horizontal",
+    isBorderItem = false,
+    isBorderBottom = false,
+    isButtonPreviousAndNext = true,
+    buttonPreviousAndNextClass = "",
+  }: CarouselBadgeProps = $props();
+
+  const DEFAULT_IMG_OR_ICON_CLASS = "size-3";
+  const responsive = useDevice();
+</script>
+
+<CarouselSlot
+  {isBorderBottom}
+  {isButtonPreviousAndNext}
+  {buttonPreviousAndNextClass}
+>
+  {#if isLoading}
+    <div class="flex items-center justify-between w-full gap-1 md:gap-2">
+      {#each Array.from({ length: responsive.isMobile ? 2 : 10 }) as _, i (`skeleton-${i}`)}
+        <Skeleton class="h-4 w-25 bg-black/20" />
+      {/each}
+    </div>
+  {:else}
+    {#each (items ?? []) as item, i (`badge-${i}-${item.value ?? item.label ?? i}`)}
+      <Carousel.Item
+        onclick={() => item.onClick?.(item.value)}
+        class={`
+          flex cursor-pointer items-center justify-center gap-1 basis-auto mx-3 pl-0
+          ${isBorderItem ? "border border-solid border-gray-300 rounded-lg" : ""} 
+          ${item.value === valueActive ? activeClass : ""}
+          ${itemCarouselClass}`}
+      >
+        <div
+          class={`
+              flex gap-1 mx-2 p-0.5 justify-center items-center
+               ${orientation === "horizontal" ? "flex-row" : "flex-col"}
+          `}
+        >
+          {#if item.image}
+            <img
+              src={item.image}
+              alt={item.label}
+              class={imageClass || DEFAULT_IMG_OR_ICON_CLASS}
+            />
+          {:else if item.icon}
+            {#if typeof item.icon === "string"}
+              <div>
+                <i
+                  class={`${item.icon} ${iconClass || DEFAULT_IMG_OR_ICON_CLASS}`}
+                >
+                </i>
+              </div>
+            {:else}
+              <HugeiconsIcon
+                icon={item.icon}
+                class={iconClass || DEFAULT_IMG_OR_ICON_CLASS}
+              />
+            {/if}
+          {/if}
+          <div class={`${labelClass}`}>{item.label}</div>
+        </div>
+      </Carousel.Item>
+    {/each}
+  {/if}
+</CarouselSlot>

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

@@ -1,158 +1,158 @@
-<script lang="ts">
-  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
-  import NavMenu from "../../nav/ui/nav-menu.svelte";
-  import type { Snippet } from "svelte";
-
-  let {
-    items,
-    navMenu,
-    children,
-    className,
-    titleClass,
-    descriptionClass,
-    intervalMs = 5000,
-    transitionMs = 1200,
-  }: CarouselHeroProps & {
-    children?: Snippet;
-    intervalMs?: number;
-    transitionMs?: number;
-  } = $props();
-
-  // Buffer duplo: duas camadas fixas, nunca desmontadas — só a opacidade muda.
-  let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
-  let active = $state<0 | 1>(0);
-  let index = $state(0);
-  let switching = false; // evita trocas sobrepostas se o intervalo disparar antes do preload acabar
-
-  // eslint-disable-next-line svelte/prefer-svelte-reactivity
-  const preloadCache = new Map<string, Promise<void>>();
-
-  function preload(src: string): Promise<void> {
-    if (!src) return Promise.resolve();
-    const cached = preloadCache.get(src);
-    if (cached) return cached;
-
-    const promise = new Promise<void>((resolve) => {
-      const img = new Image();
-      img.onload = () => resolve();
-      img.onerror = () => resolve(); // não bloqueia o carousel por uma imagem partida
-      img.src = src;
-    });
-
-    preloadCache.set(src, promise);
-    return promise;
-  }
-
-  // Pré-carrega todas as imagens uma vez, assim que os items ficam disponíveis.
-  $effect(() => {
-    items?.forEach((item) => void preload(item.image));
-  });
-
-  async function goTo(nextIndex: number) {
-    if (!items || nextIndex === index || switching) return;
-    switching = true;
-
-    const nextSrc = items[nextIndex].image;
-    await preload(nextSrc); // garante decode/cache antes de trocar a camada -> sem flash
-
-    const nextLayer = active === 0 ? 1 : 0;
-    layers[nextLayer] = nextSrc;
-    active = nextLayer;
-    index = nextIndex;
-    switching = false;
-  }
-
-  $effect(() => {
-    if (!items || items.length <= 1) return;
-
-    const timer = setInterval(() => {
-      goTo((index + 1) % items.length);
-    }, intervalMs);
-
-    return () => clearInterval(timer);
-  });
-
-  function fadeIn(node: HTMLElement) {
-    requestAnimationFrame(() => {
-      node.style.opacity = "1";
-    });
-    return {};
-  }
-
-  let selected = $derived<CarouselHeroItem | undefined>(items?.[index]);
-</script>
-
-{#if selected}
-  <header
-    class="w-full relative flex flex-col justify-center items-center h-75 md:h-100 overflow-hidden {className}"
-  >
-    {#each layers as bg, i (i)}
-      <div
-        style="
-    position: absolute;
-    inset: 0;
-    will-change: opacity;
-    background-image: {bg ? `url(${bg})` : 'none'};
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    opacity: {i === active ? 1 : 0};
-    transition: opacity {transitionMs}ms ease-in-out;
-  "
-      ></div>
-    {/each}
-
-    <div
-      style="position: absolute; inset: 0; height: 100%; background-color: rgba(0,0,0,0.4);"
-    ></div>
-
-    <div class="relative z-10 w-full flex flex-col items-center flex-1">
-      <NavMenu {...navMenu} />
-
-      <section
-        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4"
-      >
-        {#key selected.title}
-          <div
-            style="transition: opacity {transitionMs * 0.6}ms ease-in-out;"
-            class="opacity-0 flex flex-col justify-center items-center text-center"
-            use:fadeIn
-          >
-            <div>
-              <h1
-                class="text-white text-2xl md:text-4xl font-bold {titleClass}"
-              >
-                {selected.title}
-              </h1>
-            </div>
-            <div class="flex flex-col justify-center items-center">
-              <p class="text-white/90 mt-2 max-w-2xl {descriptionClass}">
-                {selected.description}
-              </p>
-            </div>
-          </div>
-        {/key}
-
-        {#if children}
-          {@render children()}
-        {/if}
-      </section>
-    </div>
-
-    {#if items && items.length > 1}
-      <div
-        style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
-      >
-        {#each items as item, i (i)}
-          <button
-            aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
-            class="w-2 h-2 rounded-full transition-colors {i === index
-              ? 'bg-white'
-              : 'bg-white/40'}"
-            onclick={() => goTo(i)}
-          ></button>
-        {/each}
-      </div>
-    {/if}
-  </header>
-{/if}
+<script lang="ts">
+  import type { CarouselHeroItem, CarouselHeroProps } from "../types";
+  import NavMenu from "../../nav/ui/nav-menu.svelte";
+  import type { Snippet } from "svelte";
+
+  let {
+    items,
+    navMenu,
+    children,
+    className,
+    titleClass,
+    descriptionClass,
+    intervalMs = 5000,
+    transitionMs = 1200,
+  }: CarouselHeroProps & {
+    children?: Snippet;
+    intervalMs?: number;
+    transitionMs?: number;
+  } = $props();
+
+  // Buffer duplo: duas camadas fixas, nunca desmontadas — só a opacidade muda.
+  let layers = $state<[string, string]>([items?.[0]?.image ?? "", ""]);
+  let active = $state<0 | 1>(0);
+  let index = $state(0);
+  let switching = false; // evita trocas sobrepostas se o intervalo disparar antes do preload acabar
+
+  // eslint-disable-next-line svelte/prefer-svelte-reactivity
+  const preloadCache = new Map<string, Promise<void>>();
+
+  function preload(src: string): Promise<void> {
+    if (!src) return Promise.resolve();
+    const cached = preloadCache.get(src);
+    if (cached) return cached;
+
+    const promise = new Promise<void>((resolve) => {
+      const img = new Image();
+      img.onload = () => resolve();
+      img.onerror = () => resolve(); // não bloqueia o carousel por uma imagem partida
+      img.src = src;
+    });
+
+    preloadCache.set(src, promise);
+    return promise;
+  }
+
+  // Pré-carrega todas as imagens uma vez, assim que os items ficam disponíveis.
+  $effect(() => {
+    items?.forEach((item) => void preload(item.image));
+  });
+
+  async function goTo(nextIndex: number) {
+    if (!items || nextIndex === index || switching) return;
+    switching = true;
+
+    const nextSrc = items[nextIndex].image;
+    await preload(nextSrc); // garante decode/cache antes de trocar a camada -> sem flash
+
+    const nextLayer = active === 0 ? 1 : 0;
+    layers[nextLayer] = nextSrc;
+    active = nextLayer;
+    index = nextIndex;
+    switching = false;
+  }
+
+  $effect(() => {
+    if (!items || items.length <= 1) return;
+
+    const timer = setInterval(() => {
+      goTo((index + 1) % items.length);
+    }, intervalMs);
+
+    return () => clearInterval(timer);
+  });
+
+  function fadeIn(node: HTMLElement) {
+    requestAnimationFrame(() => {
+      node.style.opacity = "1";
+    });
+    return {};
+  }
+
+  let selected = $derived<CarouselHeroItem | undefined>(items?.[index]);
+</script>
+
+{#if selected}
+  <header
+    class="w-full relative flex flex-col justify-center items-center h-75 md:h-100 overflow-hidden {className}"
+  >
+    {#each layers as bg, i (`layer-${i}`)}
+      <div
+        style="
+    position: absolute;
+    inset: 0;
+    will-change: opacity;
+    background-image: {bg ? `url(${bg})` : 'none'};
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: {i === active ? 1 : 0};
+    transition: opacity {transitionMs}ms ease-in-out;
+  "
+      ></div>
+    {/each}
+
+    <div
+      style="position: absolute; inset: 0; height: 100%; background-color: rgba(0,0,0,0.4);"
+    ></div>
+
+    <div class="relative z-10 w-full flex flex-col items-center flex-1">
+      <NavMenu {...navMenu} />
+
+      <section
+        class="flex flex-col justify-center items-center flex-1 w-full h-auto text-center px-4"
+      >
+        {#key selected.title}
+          <div
+            style="transition: opacity {transitionMs * 0.6}ms ease-in-out;"
+            class="opacity-0 flex flex-col justify-center items-center text-center"
+            use:fadeIn
+          >
+            <div>
+              <h1
+                class="text-white text-2xl md:text-4xl font-bold {titleClass}"
+              >
+                {selected.title}
+              </h1>
+            </div>
+            <div class="flex flex-col justify-center items-center">
+              <p class="text-white/90 mt-2 max-w-2xl {descriptionClass}">
+                {selected.description}
+              </p>
+            </div>
+          </div>
+        {/key}
+
+        {#if children}
+          {@render children()}
+        {/if}
+      </section>
+    </div>
+
+    {#if items && items.length > 1}
+      <div
+        style="position: absolute; bottom: 0.75rem; z-index: 10; display: flex; gap: 0.5rem;"
+      >
+        {#each items as item, i (`hero-dot-${i}`)}
+          <button
+            aria-label={`Ir para o slide ${i + 1}: ${item.title}`}
+            class="w-2 h-2 rounded-full transition-colors {i === index
+              ? 'bg-white'
+              : 'bg-white/40'}"
+            onclick={() => goTo(i)}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  </header>
+{/if}