srcdev-nuxt-components 9.1.55 → 9.1.56

package/app/components/01.atoms/toast/tests/DisplayToast.spec.ts

@@ -0,0 +1,266 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+
+const { useAppConfigMock } = vi.hoisted(() => ({
+  // icon: {} is required — @nuxt/icon reads useAppConfig().icon.collections internally.
+  useAppConfigMock: vi.fn(() => ({ srcdev: undefined as Record<string, unknown> | undefined, icon: {} as object })),
+}));
+
+mockNuxtImport("useAppConfig", () => useAppConfigMock);
+import DisplayToast from "../DisplayToast.vue";
+
+// Helper: mount the toast and activate it so the teleported element is in the DOM.
+async function mountAndShow(props: Record<string, unknown> = {}, slots: Record<string, string> = {}) {
+  const { config, styleClassPassthrough, ...rest } = props;
+  const wrapper = await mountSuspended(DisplayToast, {
+    props: { config, styleClassPassthrough } as Record<string, unknown>,
+    slots,
+  });
+  await wrapper.setProps({ ...rest, modelValue: true });
+  await nextTick();
+  return wrapper;
+}
+
+function toast() {
+  return document.querySelector(".display-toast");
+}
+
+describe("DisplayToast", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayToast);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Visibility ───────────────────────────────────────────────────────────
+
+  it("does not render the toast element when modelValue is false", async () => {
+    await mountSuspended(DisplayToast);
+    expect(toast()).toBeNull();
+  });
+
+  it("renders the toast element when modelValue becomes true", async () => {
+    await mountAndShow();
+    expect(toast()).not.toBeNull();
+  });
+
+  it("has the show class when activated", async () => {
+    await mountAndShow();
+    expect(toast()!.classList).toContain("show");
+  });
+
+  // ─── data-theme ───────────────────────────────────────────────────────────
+
+  it.each(["info", "success", "warning", "error"] as const)(
+    "sets data-theme='%s' from config",
+    async (theme) => {
+      await mountAndShow({ config: { appearance: { theme } } });
+      expect(toast()!.getAttribute("data-theme")).toBe(theme);
+    }
+  );
+
+  it("defaults to data-theme='info' when no theme is configured", async () => {
+    await mountAndShow();
+    expect(toast()!.getAttribute("data-theme")).toBe("info");
+  });
+
+  // ─── ARIA ─────────────────────────────────────────────────────────────────
+
+  it.each([
+    { theme: "info" as const, role: "status", live: "polite" },
+    { theme: "success" as const, role: "status", live: "polite" },
+    { theme: "warning" as const, role: "alert", live: "assertive" },
+    { theme: "error" as const, role: "alert", live: "assertive" },
+  ])("sets role=$role and aria-live=$live for theme='$theme'", async ({ theme, role, live }) => {
+    await mountAndShow({ config: { appearance: { theme } } });
+    expect(toast()!.getAttribute("role")).toBe(role);
+    expect(toast()!.getAttribute("aria-live")).toBe(live);
+  });
+
+  // ─── Position classes ─────────────────────────────────────────────────────
+
+  it.each(["top", "bottom"] as const)("applies %s position class", async (position) => {
+    await mountAndShow({ config: { appearance: { position } } });
+    expect(toast()!.classList).toContain(position);
+  });
+
+  it.each(["left", "center", "right"] as const)("applies %s alignment class", async (alignment) => {
+    await mountAndShow({ config: { appearance: { alignment } } });
+    expect(toast()!.classList).toContain(alignment);
+  });
+
+  it("applies full-width class when fullWidth is true", async () => {
+    await mountAndShow({ config: { appearance: { fullWidth: true } } });
+    expect(toast()!.classList).toContain("full-width");
+  });
+
+  it("does not apply alignment class when fullWidth is true", async () => {
+    await mountAndShow({ config: { appearance: { fullWidth: true, alignment: "left" } } });
+    expect(toast()!.classList).not.toContain("left");
+  });
+
+  // ─── tabindex / aria-describedby ──────────────────────────────────────────
+
+  it("sets tabindex='0' when no default slot is used", async () => {
+    await mountAndShow();
+    expect(toast()!.getAttribute("tabindex")).toBe("0");
+  });
+
+  it("omits tabindex when a default slot is used", async () => {
+    await mountAndShow({}, { default: "<div>Custom</div>" });
+    expect(toast()!.getAttribute("tabindex")).toBeNull();
+  });
+
+  it("sets aria-describedby when no default slot is used", async () => {
+    await mountAndShow();
+    expect(toast()!.getAttribute("aria-describedby")).not.toBeNull();
+  });
+
+  it("omits aria-describedby when a default slot is used", async () => {
+    await mountAndShow({}, { default: "<div>Custom</div>" });
+    expect(toast()!.getAttribute("aria-describedby")).toBeNull();
+  });
+
+  // ─── Content ──────────────────────────────────────────────────────────────
+
+  it("renders text content from config", async () => {
+    await mountAndShow({ config: { content: { text: "Hello toast" } } });
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Hello toast");
+  });
+
+  it("renders title from config", async () => {
+    await mountAndShow({ config: { content: { title: "Toast Title" } } });
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("Toast Title");
+  });
+
+  it("renders description from config", async () => {
+    await mountAndShow({ config: { content: { description: "Toast description" } } });
+    expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain(
+      "Toast description"
+    );
+  });
+
+  it("renders title and description together", async () => {
+    await mountAndShow({
+      config: { content: { title: "Title", description: "Desc" } },
+    });
+    expect(document.querySelector("[data-test-id='alert-title']")).not.toBeNull();
+    expect(document.querySelector("[data-test-id='alert-content']")).not.toBeNull();
+  });
+
+  // ─── Default slot ─────────────────────────────────────────────────────────
+
+  it("renders default slot content instead of AlertContent", async () => {
+    await mountAndShow({}, { default: '<p class="custom-content">Custom</p>' });
+    expect(document.querySelector(".custom-content")).not.toBeNull();
+    expect(document.querySelector(".alert-content")).toBeNull();
+  });
+
+  // ─── Progress bar ─────────────────────────────────────────────────────────
+
+  it("renders the progress bar when autoDismiss is true", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: true } } });
+    expect(document.querySelector(".display-toast-progress")).not.toBeNull();
+  });
+
+  it("does not render the progress bar when autoDismiss is false", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    expect(document.querySelector(".display-toast-progress")).toBeNull();
+  });
+
+  // ─── Close button ─────────────────────────────────────────────────────────
+
+  it("renders the close button in the toast content when autoDismiss is false", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    expect(document.querySelector("[data-test-id='alert-dismiss']")).not.toBeNull();
+  });
+
+  it("does not render the close button when autoDismiss is true", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: true } } });
+    expect(document.querySelector("[data-test-id='alert-dismiss']")).toBeNull();
+  });
+
+  // ─── Dismiss via Escape key ────────────────────────────────────────────────
+
+  it("transitions to hide class when Escape is pressed", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    vi.advanceTimersByTime(100); // fire the focus setTimeout
+    await nextTick();
+    toast()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(toast()!.classList).toContain("hide");
+  });
+
+  // ─── Dismiss via close button ─────────────────────────────────────────────
+
+  it("transitions to hide class when the close button is clicked", async () => {
+    await mountAndShow({ config: { behavior: { autoDismiss: false } } });
+    vi.advanceTimersByTime(100);
+    await nextTick();
+    (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
+    await nextTick();
+    expect(toast()!.classList).toContain("hide");
+  });
+
+  // ─── styleClassPassthrough ────────────────────────────────────────────────
+
+  it("applies a styleClassPassthrough string class to the toast element", async () => {
+    await mountAndShow({ styleClassPassthrough: "my-custom" });
+    expect(toast()!.classList).toContain("my-custom");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    await mountAndShow({ styleClassPassthrough: ["class-a", "class-b"] });
+    expect(toast()!.classList).toContain("class-a");
+    expect(toast()!.classList).toContain("class-b");
+  });
+
+  // ─── app.config resolution ────────────────────────────────────────────────
+  // Combines mockNuxtImport (#imports path) + vi.stubGlobal (global path) to
+  // cover both routes Nuxt may use to resolve useAppConfig in this test env.
+
+  describe("app.config resolution", () => {
+    beforeEach(() => {
+      // Stub the global so the component's useAppConfig() call is intercepted
+      // regardless of whether Nuxt resolves it via #imports or the global scope.
+      vi.stubGlobal("useAppConfig", useAppConfigMock);
+      useAppConfigMock.mockImplementation(() => ({ srcdev: undefined, icon: {} }));
+    });
+
+    it("uses hardcoded fallbacks when app.config has no displayToast key", async () => {
+      await mountAndShow();
+      expect(toast()!.getAttribute("data-theme")).toBe("info");
+      expect(toast()!.classList).toContain("top");
+      expect(toast()!.classList).toContain("right");
+      expect(document.querySelector(".display-toast-progress")).not.toBeNull();
+    });
+
+    it("uses app.config autoDismiss:false when no config prop is supplied", async () => {
+      // autoDismiss defaults to true (both hardcoded and real app.config), so false
+      // is the only value that proves the mock is being read.
+      useAppConfigMock.mockImplementation(() => ({
+        icon: {},
+        srcdev: { displayToast: { behavior: { autoDismiss: false } } },
+      }));
+      await mountAndShow();
+      expect(document.querySelector(".display-toast-progress")).toBeNull();
+      expect(document.querySelector("[data-test-id='alert-dismiss']")).not.toBeNull();
+    });
+
+    it("config prop takes precedence over app.config", async () => {
+      useAppConfigMock.mockImplementation(() => ({
+        icon: {},
+        srcdev: { displayToast: { appearance: { theme: "success", position: "bottom" } } },
+      }));
+      await mountAndShow({ config: { appearance: { theme: "warning", position: "top" } } });
+      expect(toast()!.getAttribute("data-theme")).toBe("warning");
+      expect(toast()!.classList).toContain("top");
+    });
+  });
+});

package/app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts

@@ -0,0 +1,256 @@
+import { describe, it, expect, vi } from "vitest";
+import { nextTick } from "vue";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import DisplayToastProvider from "../DisplayToastProvider.vue";
+import { useToastQueue } from "~/composables/useToastQueue";
+
+function item() {
+  return document.querySelector(".display-toast-provider-item");
+}
+
+function items() {
+  return document.querySelectorAll(".display-toast-provider-item");
+}
+
+function provider() {
+  return document.querySelector(".display-toast-provider");
+}
+
+describe("DisplayToastProvider", () => {
+  const { show, clear } = useToastQueue();
+
+  beforeEach(() => {
+    clear();
+  });
+
+  afterEach(() => {
+    clear();
+    document.body.innerHTML = "";
+  });
+
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(DisplayToastProvider);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders the provider container", async () => {
+    await mountSuspended(DisplayToastProvider);
+    expect(provider()).not.toBeNull();
+  });
+
+  // ─── Empty state ──────────────────────────────────────────────────────────
+
+  it("renders no items when queue is empty", async () => {
+    await mountSuspended(DisplayToastProvider);
+    expect(items().length).toBe(0);
+  });
+
+  // ─── Show / queue ─────────────────────────────────────────────────────────
+
+  it("promotes a pending entry to visible on show()", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ content: { text: "Hello" } });
+    await nextTick();
+    expect(items().length).toBe(1);
+  });
+
+  it("renders the toast message text", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ content: { text: "Toast message" } });
+    await nextTick();
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Toast message");
+  });
+
+  it("renders the toast title", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ content: { title: "My Title" } });
+    await nextTick();
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("My Title");
+  });
+
+  it("renders the toast description", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ content: { description: "My description" } });
+    await nextTick();
+    expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain("My description");
+  });
+
+  // ─── data-theme ───────────────────────────────────────────────────────────
+
+  it.each(["info", "success", "warning", "error"] as const)(
+    "sets data-theme='%s' from config",
+    async (theme) => {
+      await mountSuspended(DisplayToastProvider);
+      show({ appearance: { theme } });
+      await nextTick();
+      expect(item()!.getAttribute("data-theme")).toBe(theme);
+    }
+  );
+
+  it("defaults to data-theme='info'", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({});
+    await nextTick();
+    expect(item()!.getAttribute("data-theme")).toBe("info");
+  });
+
+  // ─── ARIA ─────────────────────────────────────────────────────────────────
+
+  it.each([
+    { theme: "info" as const, role: "status", live: "polite" },
+    { theme: "success" as const, role: "status", live: "polite" },
+    { theme: "warning" as const, role: "alert", live: "assertive" },
+    { theme: "error" as const, role: "alert", live: "assertive" },
+  ])("sets role=$role and aria-live=$live for theme='$theme'", async ({ theme, role, live }) => {
+    await mountSuspended(DisplayToastProvider);
+    show({ appearance: { theme } });
+    await nextTick();
+    expect(item()!.getAttribute("role")).toBe(role);
+    expect(item()!.getAttribute("aria-live")).toBe(live);
+  });
+
+  it("sets aria-describedby on each item", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({});
+    await nextTick();
+    expect(item()!.getAttribute("aria-describedby")).not.toBeNull();
+  });
+
+  it("sets tabindex='0' on each item", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({});
+    await nextTick();
+    expect(item()!.getAttribute("tabindex")).toBe("0");
+  });
+
+  // ─── Position / alignment classes ────────────────────────────────────────
+
+  it.each(["top", "bottom"] as const)("applies %s class to provider", async (position) => {
+    await mountSuspended(DisplayToastProvider, { props: { position } });
+    expect(provider()!.classList).toContain(position);
+  });
+
+  it.each(["left", "center", "right"] as const)(
+    "applies %s alignment class to provider",
+    async (alignment) => {
+      await mountSuspended(DisplayToastProvider, { props: { alignment } });
+      expect(provider()!.classList).toContain(alignment);
+    }
+  );
+
+  it("applies full-width class when fullWidth is true", async () => {
+    await mountSuspended(DisplayToastProvider, { props: { fullWidth: true } });
+    expect(provider()!.classList).toContain("full-width");
+  });
+
+  it("does not apply alignment class when fullWidth is true", async () => {
+    await mountSuspended(DisplayToastProvider, { props: { fullWidth: true, alignment: "left" } });
+    expect(provider()!.classList).not.toContain("left");
+  });
+
+  // ─── maxVisible ───────────────────────────────────────────────────────────
+
+  it("shows only one item at a time when maxVisible=1", async () => {
+    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 1 } });
+    show({ content: { text: "First" } });
+    show({ content: { text: "Second" } });
+    await nextTick();
+    expect(items().length).toBe(1);
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("First");
+  });
+
+  it("shows up to maxVisible items simultaneously", async () => {
+    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 2 } });
+    show({ content: { text: "First" } });
+    show({ content: { text: "Second" } });
+    show({ content: { text: "Third" } });
+    await nextTick();
+    expect(items().length).toBe(2);
+  });
+
+  // ─── Dismiss ──────────────────────────────────────────────────────────────
+
+  it("removes item when close button is clicked", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+
+  it("removes item when Escape is pressed", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    item()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+
+  // ─── Auto-dismiss timer ───────────────────────────────────────────────────
+
+  it("auto-dismisses after duration", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: true, duration: 3000 } });
+    await nextTick();
+    expect(items().length).toBe(1);
+    vi.advanceTimersByTime(3000);
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+
+  it("does not auto-dismiss when autoDismiss is false", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    vi.advanceTimersByTime(10000);
+    await nextTick();
+    expect(items().length).toBe(1);
+  });
+
+  // ─── Queue progression ────────────────────────────────────────────────────
+
+  it("promotes next pending entry after current is dismissed", async () => {
+    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 1 } });
+    show({ content: { text: "First" }, behavior: { autoDismiss: false } });
+    show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
+    await nextTick();
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("First");
+
+    item()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
+    await nextTick();
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Second");
+  });
+
+  // ─── Progress bar ─────────────────────────────────────────────────────────
+
+  it("renders progress bar when autoDismiss is true", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: true } });
+    await nextTick();
+    expect(document.querySelector(".display-toast-provider-progress")).not.toBeNull();
+  });
+
+  it("does not render progress bar when autoDismiss is false", async () => {
+    await mountSuspended(DisplayToastProvider);
+    show({ behavior: { autoDismiss: false } });
+    await nextTick();
+    expect(document.querySelector(".display-toast-provider-progress")).toBeNull();
+  });
+
+  // ─── clear() ─────────────────────────────────────────────────────────────
+
+  it("removes all items on clear()", async () => {
+    const { clear: clearQueue } = useToastQueue();
+    await mountSuspended(DisplayToastProvider, { props: { maxVisible: 3 } });
+    show({});
+    show({});
+    await nextTick();
+    clearQueue();
+    await nextTick();
+    expect(items().length).toBe(0);
+  });
+});

package/app/components/02.molecules/action-menu/ActionMenu.vue

@@ -155,7 +155,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       }
 
       &:focus-visible {
-        outline: var(--button-outline-width, 0.2rem) solid var(--theme-button-primary-outline, currentcolor);
+        outline: var(--button-outline-width, 0.2rem) solid var(--theme-ring, currentcolor);
         outline-offset: 0.2rem;
       }
 
@@ -202,11 +202,18 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
       }
 
       .action-menu-list {
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+
         list-style: none;
         padding: 0;
         margin: 0;
 
         .action-menu-list-item {
+          grid-column: 1 / -1;
+          display: grid;
+          grid-template-columns: subgrid;
+
           &:not(:last-child) {
             border-bottom: var(--_item-divider);
           }

package/app/components/02.molecules/action-menu/ActionMenuItemCore.vue

@@ -57,6 +57,7 @@ watch(
 <style lang="css">
 @layer components {
   .action-menu-item-core {
+    --_gap: var(--action-menu-item-gap, 1.2rem);
     --_surface-hover: var(--action-menu-item-surface-hover, light-dark(var(--slate-01), var(--slate-09)));
     --_text-color: var(--action-menu-item-text-color, light-dark(var(--slate-09), var(--slate-01)));
     --_icon-size: var(--action-menu-item-icon-size, 2rem);
@@ -67,9 +68,9 @@ watch(
     box-sizing: border-box;
     cursor: pointer;
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: subgrid;
     align-items: center;
-    gap: 1.2rem;
+
     width: 100%;
     padding-inline: var(--_padding-inline);
     padding-block: var(--_padding-block);
@@ -87,11 +88,14 @@ watch(
     }
 
     &:focus-visible {
-      outline: var(--button-outline-width, 0.2rem) solid var(--theme-button-primary-outline, currentcolor);
+      outline: var(--button-outline-width, 0.2rem) solid var(--theme-ring, currentcolor);
       outline-offset: -0.2rem;
     }
 
     .action-menu-item-icon {
+      grid-column: 1;
+      margin-inline-end: var(--_gap);
+
       display: flex;
       align-items: center;
       justify-content: center;
@@ -101,12 +105,16 @@ watch(
     }
 
     .action-menu-item-label {
+      grid-column: 2;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
 
     .action-menu-item-arrow {
+      grid-column: 3;
+      margin-inline-start: var(--_gap);
+
       display: flex;
       align-items: center;
       flex-shrink: 0;

package/app/components/02.molecules/alert-content/AlertContent.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="alert-content" :data-theme="theme">
+    <AlertContentInner
+      :theme="theme"
+      :custom-icon="customIcon"
+      :dismissible="dismissible"
+      :content-id="contentId"
+      :aria-live="ariaLive"
+      @dismiss="emit('dismiss')"
+    >
+      <template v-if="slots.icon" #icon>
+        <slot name="icon"></slot>
+      </template>
+      <template v-if="slots.title" #title>
+        <slot name="title"></slot>
+      </template>
+      <template v-if="slots.content" #content>
+        <slot name="content"></slot>
+      </template>
+      <template v-if="slots.dismissIcon" #dismissIcon>
+        <slot name="dismissIcon"></slot>
+      </template>
+      <template v-if="slots.dismissLabel" #dismissLabel>
+        <slot name="dismissLabel"></slot>
+      </template>
+    </AlertContentInner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+}
+
+withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-content {
+    background-color: var(--theme-accent);
+    border: 0.1rem solid var(--theme-border);
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+    padding-inline-start: 6px;
+    overflow: hidden;
+
+  }
+}
+</style>