ui/test/components/__snapshots__/Alert.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Alert > renders with actions correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
        <!--v-if--><span class="truncate">Action</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with as correctly 1`] = `
"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</article>"
`;

exports[`Alert > renders with avatar correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover"></span>
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with class correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg) w-48">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with close correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
</div>"
`;

exports[`Alert > renders with close slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with closeIcon correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <div class="flex flex-wrap gap-1.5 shrink-0 items-center">
    <!--v-if--><button type="button" aria-label="Close" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-(--ui-text-muted) hover:text-(--ui-text) disabled:text-(--ui-text-muted) aria-disabled:text-(--ui-text-muted) focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-(--ui-border-inverted) p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
      <!--v-if-->
      <!--v-if-->
    </button>
  </div>
</div>"
`;

exports[`Alert > renders with description correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <div class="text-sm opacity-90 mt-1">Description</div>
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with description slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <div class="text-sm opacity-90 mt-1">Description slot</div>
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with icon correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with leading slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Leading slot</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with neutral variant outline correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with neutral variant soft correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with neutral variant solid correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-(--ui-bg) bg-(--ui-bg-inverted)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with neutral variant subtle correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-(--ui-text-highlighted) bg-(--ui-bg-elevated)/50 ring ring-inset ring-(--ui-border-accented)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with orientation horizontal correctly 1`] = `
"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-center bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <div class="text-sm opacity-90 mt-1">This is a description</div>
    <!--v-if-->
  </div>
  <div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
      <!--v-if--><span class="truncate">Action</span>
      <!--v-if-->
    </button>
    <!--v-if-->
  </div>
</div>"
`;

exports[`Alert > renders with orientation vertical correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <div class="text-sm opacity-90 mt-1">This is a description</div>
    <div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-(--ui-bg) bg-(--ui-primary) hover:bg-(--ui-primary)/75 disabled:bg-(--ui-primary) aria-disabled:bg-(--ui-primary) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--ui-primary)">
        <!--v-if--><span class="truncate">Action</span>
        <!--v-if-->
      </button></div>
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with primary variant outline correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with primary variant soft correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with primary variant solid correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with primary variant subtle correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary)/10 text-(--ui-primary) ring ring-inset ring-(--ui-primary)/25">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with title correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with title slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-medium">Title slot</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;

exports[`Alert > renders with ui correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-lg p-4 flex gap-2.5 items-start bg-(--ui-primary) text-(--ui-bg)">
  <!--v-if-->
  <div class="min-w-0 flex-1 flex flex-col">
    <div class="text-sm font-bold">Alert</div>
    <!--v-if-->
    <!--v-if-->
  </div>
  <!--v-if-->
</div>"
`;