Alert

---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert>
    This is a general information alert. Use it to surface important context or
    status updates to the user.
  </Alert>
  <Alert feedback="success">
    Your changes have been saved successfully. The update is now live.
  </Alert>
  <Alert feedback="warning">
    Your session is about to expire. Save your work to avoid losing any changes.
  </Alert>
  <Alert feedback="danger">
    Unable to complete the request. Please check your connection and try again.
  </Alert>
</div>

import { Alert } from "../Alert";
import { stack } from "@pindoba/styled-system/patterns";

export default function FeedbackDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert>
        This is a general information alert. Use it to surface important context
        or status updates to the user.
      </Alert>
      <Alert feedback="success">
        Your changes have been saved successfully. The update is now live.
      </Alert>
      <Alert feedback="warning">
        Your session is about to expire. Save your work to avoid losing any
        changes.
      </Alert>
      <Alert feedback="danger">
        Unable to complete the request. Please check your connection and try
        again.
      </Alert>
    </div>
  );
}

<script lang="ts">
  import Alert from "../Alert.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert>
    This is a general information alert. Use it to surface important context or
    status updates to the user.
  </Alert>
  <Alert feedback="success">
    Your changes have been saved successfully. The update is now live.
  </Alert>
  <Alert feedback="warning">
    Your session is about to expire. Save your work to avoid losing any changes.
  </Alert>
  <Alert feedback="danger">
    Unable to complete the request. Please check your connection and try again.
  </Alert>
</div>

<script setup lang="ts">
import { Alert } from "@pindoba/vue-alert";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <Alert>
      This is a general information alert. Use it to surface important context
      or status updates to the user.
    </Alert>
    <Alert feedback="success">
      Your changes have been saved successfully. The update is now live.
    </Alert>
    <Alert feedback="warning">
      Your session is about to expire. Save your work to avoid losing any
      changes.
    </Alert>
    <Alert feedback="danger">
      Unable to complete the request. Please check your connection and try
      again.
    </Alert>
  </div>
</template>

---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <div>
    <h3>Primary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="primary">
        Full-color outer container — the feedback color (500) fills the outer
        ring with contrast text. The content area uses a tinted surface.
      </Alert>
      <Alert feedback="warning" emphasis="primary">
        Full-color outer container — warning color fills the outer ring.
      </Alert>
      <Alert feedback="danger" emphasis="primary">
        Full-color outer container — danger color fills the outer ring.
      </Alert>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="secondary">
        Neutral sunken outer container with a colored icon. Provides clear
        feedback without a dominant colored background.
      </Alert>
      <Alert feedback="warning" emphasis="secondary">
        Neutral sunken outer container with a warning-colored icon.
      </Alert>
      <Alert feedback="danger" emphasis="secondary">
        Neutral sunken outer container with a danger-colored icon.
      </Alert>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="tertiary">
        Neutral sunken container with a subtle content area. The icon uses a
        neutral background with the feedback color as the icon tint.
      </Alert>
      <Alert feedback="warning" emphasis="tertiary">
        Neutral sunken container with a warning-tinted icon on a neutral
        background.
      </Alert>
      <Alert feedback="danger" emphasis="tertiary">
        Neutral sunken container with a danger-tinted icon on a neutral
        background.
      </Alert>
    </div>
  </div>
</div>

import { Alert } from "../Alert";
import { stack } from "@pindoba/styled-system/patterns";

export default function EmphasisDemo() {
  return (
    <div className={stack({ gap: "xl", direction: "column", width: "100%" })}>
      <div>
        <h3>Primary</h3>
        <div
          className={stack({ gap: "md", direction: "column", width: "100%" })}
        >
          <Alert feedback="success" emphasis="primary">
            Full-color outer container — the feedback color (500) fills the
            outer ring with contrast text. The content area uses a tinted
            surface.
          </Alert>
          <Alert feedback="warning" emphasis="primary">
            Full-color outer container — warning color fills the outer ring.
          </Alert>
          <Alert feedback="danger" emphasis="primary">
            Full-color outer container — danger color fills the outer ring.
          </Alert>
        </div>
      </div>

      <div>
        <h3>Secondary</h3>
        <div
          className={stack({ gap: "md", direction: "column", width: "100%" })}
        >
          <Alert feedback="success" emphasis="secondary">
            Neutral sunken outer container with a colored icon. Provides clear
            feedback without a dominant colored background.
          </Alert>
          <Alert feedback="warning" emphasis="secondary">
            Neutral sunken outer container with a warning-colored icon.
          </Alert>
          <Alert feedback="danger" emphasis="secondary">
            Neutral sunken outer container with a danger-colored icon.
          </Alert>
        </div>
      </div>

      <div>
        <h3>Tertiary</h3>
        <div
          className={stack({ gap: "md", direction: "column", width: "100%" })}
        >
          <Alert feedback="success" emphasis="tertiary">
            Neutral sunken container with a subtle content area. The icon uses a
            neutral background with the feedback color as the icon tint.
          </Alert>
          <Alert feedback="warning" emphasis="tertiary">
            Neutral sunken container with a warning-tinted icon on a neutral
            background.
          </Alert>
          <Alert feedback="danger" emphasis="tertiary">
            Neutral sunken container with a danger-tinted icon on a neutral
            background.
          </Alert>
        </div>
      </div>
    </div>
  );
}

<script lang="ts">
  import Alert from "../Alert.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "xl", direction: "column", width: "100%" })}>
  <div>
    <h3>Primary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="primary">
        Full-color outer container — the feedback color (500) fills the outer
        ring with contrast text. The content area uses a tinted surface.
      </Alert>
      <Alert feedback="warning" emphasis="primary">
        Full-color outer container — warning color fills the outer ring.
      </Alert>
      <Alert feedback="danger" emphasis="primary">
        Full-color outer container — danger color fills the outer ring.
      </Alert>
    </div>
  </div>

  <div>
    <h3>Secondary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="secondary">
        Neutral sunken outer container with a colored icon. Provides clear
        feedback without a dominant colored background.
      </Alert>
      <Alert feedback="warning" emphasis="secondary">
        Neutral sunken outer container with a warning-colored icon.
      </Alert>
      <Alert feedback="danger" emphasis="secondary">
        Neutral sunken outer container with a danger-colored icon.
      </Alert>
    </div>
  </div>

  <div>
    <h3>Tertiary</h3>
    <div class={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert feedback="success" emphasis="tertiary">
        Neutral sunken container with a subtle content area. The icon uses a
        neutral background with the feedback color as the icon tint.
      </Alert>
      <Alert feedback="warning" emphasis="tertiary">
        Neutral sunken container with a warning-tinted icon on a neutral
        background.
      </Alert>
      <Alert feedback="danger" emphasis="tertiary">
        Neutral sunken container with a danger-tinted icon on a neutral
        background.
      </Alert>
    </div>
  </div>
</div>

<script setup lang="ts">
import { Alert } from "@pindoba/vue-alert";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "xl", direction: "column", width: "100%" });
const group = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <div>
      <h3>Primary</h3>
      <div :class="group">
        <Alert feedback="success" emphasis="primary">
          Full-color outer container — the feedback color (500) fills the outer
          ring with contrast text. The content area uses a tinted surface.
        </Alert>
        <Alert feedback="warning" emphasis="primary">
          Full-color outer container — warning color fills the outer ring.
        </Alert>
        <Alert feedback="danger" emphasis="primary">
          Full-color outer container — danger color fills the outer ring.
        </Alert>
      </div>
    </div>
    <div>
      <h3>Secondary</h3>
      <div :class="group">
        <Alert feedback="success" emphasis="secondary">
          Neutral sunken outer container with a colored icon. Provides clear
          feedback without a dominant colored background.
        </Alert>
        <Alert feedback="warning" emphasis="secondary">
          Neutral sunken outer container with a warning-colored icon.
        </Alert>
        <Alert feedback="danger" emphasis="secondary">
          Neutral sunken outer container with a danger-colored icon.
        </Alert>
      </div>
    </div>
    <div>
      <h3>Tertiary</h3>
      <div :class="group">
        <Alert feedback="success" emphasis="tertiary">
          Neutral sunken container with a subtle content area. The icon uses a
          neutral background with the feedback color as the icon tint.
        </Alert>
        <Alert feedback="warning" emphasis="tertiary">
          Neutral sunken container with a warning-tinted icon on a neutral
          background.
        </Alert>
        <Alert feedback="danger" emphasis="tertiary">
          Neutral sunken container with a danger-tinted icon on a neutral
          background.
        </Alert>
      </div>
    </div>
  </div>
</template>

---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert noIcon>
    An alert without an icon. Useful when the content itself provides enough
    visual context.
  </Alert>
  <Alert feedback="success" noIcon>
    Operation completed. The icon is hidden — the feedback color alone conveys
    the status.
  </Alert>
  <Alert feedback="warning" emphasis="secondary" noIcon>
    Proceeding may have unintended side effects. Review before continuing.
  </Alert>
  <Alert feedback="danger" emphasis="tertiary" noIcon>
    This action cannot be undone. All associated data will be permanently
    deleted.
  </Alert>
</div>

import { Alert } from "../Alert";
import { stack } from "@pindoba/styled-system/patterns";

export default function NoIconDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert noIcon>
        An alert without an icon. Useful when the content itself provides enough
        visual context.
      </Alert>
      <Alert feedback="success" noIcon>
        Operation completed. The icon is hidden — the feedback color alone
        conveys the status.
      </Alert>
      <Alert feedback="warning" emphasis="secondary" noIcon>
        Proceeding may have unintended side effects. Review before continuing.
      </Alert>
      <Alert feedback="danger" emphasis="tertiary" noIcon>
        This action cannot be undone. All associated data will be permanently
        deleted.
      </Alert>
    </div>
  );
}

<script lang="ts">
  import Alert from "../Alert.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert noIcon>
    An alert without an icon. Useful when the content itself provides enough
    visual context.
  </Alert>
  <Alert feedback="success" noIcon>
    Operation completed. The icon is hidden — the feedback color alone conveys
    the status.
  </Alert>
  <Alert feedback="warning" emphasis="secondary" noIcon>
    Proceeding may have unintended side effects. Review before continuing.
  </Alert>
  <Alert feedback="danger" emphasis="tertiary" noIcon>
    This action cannot be undone. All associated data will be permanently
    deleted.
  </Alert>
</div>

<script setup lang="ts">
import { Alert } from "@pindoba/vue-alert";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <Alert noIcon>
      An alert without an icon. Useful when the content itself provides enough
      visual context.
    </Alert>
    <Alert feedback="success" noIcon>
      Operation completed. The icon is hidden — the feedback color alone conveys
      the status.
    </Alert>
    <Alert feedback="warning" emphasis="secondary" noIcon>
      Proceeding may have unintended side effects. Review before continuing.
    </Alert>
    <Alert feedback="danger" emphasis="tertiary" noIcon>
      This action cannot be undone. All associated data will be permanently
      deleted.
    </Alert>
  </div>
</template>

---
import Alert from "../Alert.astro";
import Button from "@pindoba/astro-button";
import { X } from "@lucide/astro";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert title="Heads up">
    Adding a title switches the layout to column mode — the header row contains
    the icon and title, and the content appears below.
  </Alert>

  <Alert feedback="success" title="Changes saved">
    <Button slot="actions" size="xs" shape="square" emphasis="ghost">
      <X width={14} height={14} />
    </Button>
    Your profile has been updated and the changes are now live.
  </Alert>

  <Alert feedback="warning" emphasis="secondary" title="Session expiring">
    <Button slot="actions" size="xs" feedback="warning" emphasis="secondary">
      Extend
    </Button>
    <Button slot="actions" size="xs" shape="square" emphasis="ghost">
      <X width={14} height={14} />
    </Button>
    Your session will expire in 5 minutes. Save your work or extend the session.
  </Alert>

  <Alert feedback="danger" emphasis="tertiary" title="Permission denied">
    <Button slot="actions" size="xs" shape="square" emphasis="ghost">
      <X width={14} height={14} />
    </Button>
    You do not have permission to perform this action. Contact your administrator
    for access.
  </Alert>
</div>

import { Alert } from "../Alert";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const XIcon = ({ className }: { className?: string }) => (
  <svg
    className={className}
    xmlns="http://www.w3.org/2000/svg"
    width={24}
    height={24}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </svg>
);

export default function TitleDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Alert title="Heads up">
        Adding a title switches the layout to column mode — the header row
        contains the icon and title, and the content appears below.
      </Alert>

      <Alert
        feedback="success"
        title="Changes saved"
        actions={
          <Button size="xs" shape="square" emphasis="ghost">
            <XIcon className={css({ w: "14px" })} />
          </Button>
        }
      >
        Your profile has been updated and the changes are now live.
      </Alert>

      <Alert
        feedback="warning"
        emphasis="secondary"
        title="Session expiring"
        actions={
          <>
            <Button size="xs" feedback="warning" emphasis="secondary">
              Extend
            </Button>
            <Button size="xs" shape="square" emphasis="ghost">
              <XIcon className={css({ w: "14px" })} />
            </Button>
          </>
        }
      >
        Your session will expire in 5 minutes. Save your work or extend the
        session.
      </Alert>

      <Alert
        feedback="danger"
        emphasis="tertiary"
        title="Permission denied"
        actions={
          <Button size="xs" shape="square" emphasis="ghost">
            <XIcon className={css({ w: "14px" })} />
          </Button>
        }
      >
        You do not have permission to perform this action. Contact your
        administrator for access.
      </Alert>
    </div>
  );
}

<script lang="ts">
  import Alert from "../Alert.svelte";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
  import LucideX from "@lucide/svelte/icons/x";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Alert title="Heads up">
    Adding a title switches the layout to column mode — the header row contains
    the icon and title, and the content appears below.
  </Alert>

  <Alert feedback="success" title="Changes saved">
    {#snippet actions()}
      <Button size="xs" shape="square" emphasis="ghost">
        <LucideX class={css({ w: "14px" })} />
      </Button>
    {/snippet}
    Your profile has been updated and the changes are now live.
  </Alert>

  <Alert feedback="warning" emphasis="secondary" title="Session expiring">
    {#snippet actions()}
      <Button size="xs" feedback="warning" emphasis="secondary">Extend</Button>
      <Button size="xs" shape="square" emphasis="ghost">
        <LucideX class={css({ w: "14px" })} />
      </Button>
    {/snippet}
    Your session will expire in 5 minutes. Save your work or extend the session.
  </Alert>

  <Alert feedback="danger" emphasis="tertiary" title="Permission denied">
    {#snippet actions()}
      <Button size="xs" shape="square" emphasis="ghost">
        <LucideX class={css({ w: "14px" })} />
      </Button>
    {/snippet}
    You do not have permission to perform this action. Contact your administrator
    for access.
  </Alert>
</div>

<script setup lang="ts">
import { Alert } from "@pindoba/vue-alert";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <Alert>
      <template #title>Heads up</template>
      Adding a title switches the layout to column mode — the header row
      contains the icon and title, and the content appears below.
    </Alert>

    <Alert feedback="success">
      <template #title>Changes saved</template>
      <template #actions>
        <Button size="xs" shape="square" emphasis="ghost" aria-label="Dismiss">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </Button>
      </template>
      Your profile has been updated and the changes are now live.
    </Alert>

    <Alert feedback="warning" emphasis="secondary">
      <template #title>Session expiring</template>
      <template #actions>
        <Button size="xs" feedback="warning" emphasis="secondary"
          >Extend</Button
        >
        <Button size="xs" shape="square" emphasis="ghost" aria-label="Dismiss">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </Button>
      </template>
      Your session will expire in 5 minutes. Save your work or extend the
      session.
    </Alert>

    <Alert feedback="danger" emphasis="tertiary">
      <template #title>Permission denied</template>
      <template #actions>
        <Button size="xs" shape="square" emphasis="ghost" aria-label="Dismiss">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <path d="M18 6 6 18" />
            <path d="m6 6 12 12" />
          </svg>
        </Button>
      </template>
      You do not have permission to perform this action. Contact your
      administrator for access.
    </Alert>
  </div>
</template>

---
import Alert from "../Alert.astro";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!-- Custom border and radius via Panel props -->
  <Alert
    feedback="success"
    border="bold"
    radius="md"
    passThrough={{
      content: {
        style: css.raw({ borderRadius: "sm", borderTopLeftRadius: "2xs" }),
      },
      icon: {
        style: css.raw({ borderRadius: "sm", borderTopRightRadius: "2xs" }),
      },
    }}
  >
    Using <code>border="bold"</code> and <code>radius="md"</code> to override the
    default border and corner rounding.
  </Alert>

  <!-- Custom padding -->
  <Alert feedback="warning" emphasis="secondary" padding="md">
    Using <code>padding="md"</code> for a more compact outer container.
  </Alert>

  <!-- Custom styles via passThrough -->
  <Alert
    feedback="danger"
    emphasis="tertiary"
    passThrough={{
      root: { style: { maxWidth: "480px" } },
      content: { style: { fontStyle: "italic" } },
    }}
  >
    Using <code>passThrough</code> to constrain the width and italicize the content
    text.
  </Alert>

  <!-- ARIA attributes via passThrough props -->
  <Alert
    feedback="success"
    emphasis="secondary"
    passThrough={{
      root: {
        props: {
          role: "status",
          "aria-live": "polite",
          "aria-label": "Status notification",
        },
      },
    }}
  >
    Using <code>passThrough.root.props</code> to add ARIA attributes for accessibility.
  </Alert>
</div>

import { Alert } from "../Alert";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

export default function CustomDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      {/* Custom border and radius via Panel props */}
      <Alert
        feedback="success"
        border="bold"
        radius="md"
        passThrough={{
          content: {
            style: css.raw({ borderRadius: "sm", borderTopLeftRadius: "2xs" }),
          },
          icon: {
            style: css.raw({ borderRadius: "sm", borderTopRightRadius: "2xs" }),
          },
        }}
      >
        Using <code>border="bold"</code> and <code>radius="md"</code> to
        override the default border and corner rounding.
      </Alert>

      {/* Custom padding */}
      <Alert feedback="warning" emphasis="secondary" padding="md">
        Using <code>padding="md"</code> for a more compact outer container.
      </Alert>

      {/* Custom styles via passThrough */}
      <Alert
        feedback="danger"
        emphasis="tertiary"
        passThrough={{
          root: { style: { maxWidth: "480px" } },
          content: { style: { fontStyle: "italic" } },
        }}
      >
        Using <code>passThrough</code> to constrain the width and italicize the
        content text.
      </Alert>

      {/* ARIA attributes via passThrough props */}
      <Alert
        feedback="success"
        emphasis="secondary"
        passThrough={{
          root: {
            props: {
              role: "status",
              "aria-live": "polite",
              "aria-label": "Status notification",
            },
          },
        }}
      >
        Using <code>passThrough.root.props</code> to add ARIA attributes for
        accessibility.
      </Alert>
    </div>
  );
}

<script lang="ts">
  import Alert from "../Alert.svelte";
  import { stack } from "@pindoba/styled-system/patterns";
  import { css } from "@pindoba/styled-system/css";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!-- Custom border and radius via Panel props -->
  <Alert
    feedback="success"
    border="bold"
    radius="md"
    passThrough={{
      content: {
        style: css.raw({ borderRadius: "sm", borderTopLeftRadius: "2xs" }),
      },
      icon: {
        style: css.raw({ borderRadius: "sm", borderTopRightRadius: "2xs" }),
      },
    }}
  >
    Using <code>border="bold"</code> and <code>radius="md"</code> to override the
    default border and corner rounding.
  </Alert>

  <!-- Custom padding -->
  <Alert feedback="warning" emphasis="secondary" padding="md">
    Using <code>padding="md"</code> for a more compact outer container.
  </Alert>

  <!-- Custom styles via passThrough -->
  <Alert
    feedback="danger"
    emphasis="tertiary"
    passThrough={{
      root: { style: { maxWidth: "480px" } },
      content: { style: { fontStyle: "italic" } },
    }}
  >
    Using <code>passThrough</code> to constrain the width and italicize the content
    text.
  </Alert>

  <!-- ARIA attributes via passThrough props -->
  <Alert
    feedback="success"
    emphasis="secondary"
    passThrough={{
      root: {
        props: {
          role: "status",
          "aria-live": "polite",
          "aria-label": "Status notification",
        },
      },
    }}
  >
    Using <code>passThrough.root.props</code> to add ARIA attributes for accessibility.
  </Alert>
</div>

<script setup lang="ts">
import { Alert } from "@pindoba/vue-alert";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <Alert
      feedback="success"
      border="bold"
      radius="md"
      :passThrough="{
        content: {
          style: css.raw({ borderRadius: 'sm', borderTopLeftRadius: '2xs' }),
        },
        icon: {
          style: css.raw({ borderRadius: 'sm', borderTopRightRadius: '2xs' }),
        },
      }"
    >
      Using <code>border="bold"</code> and <code>radius="md"</code> to override
      the default border and corner rounding.
    </Alert>

    <Alert feedback="warning" emphasis="secondary" padding="md">
      Using <code>padding="md"</code> for a more compact outer container.
    </Alert>

    <Alert
      feedback="danger"
      emphasis="tertiary"
      :passThrough="{
        root: { style: { maxWidth: '480px' } },
        content: { style: { fontStyle: 'italic' } },
      }"
    >
      Using <code>passThrough</code> to constrain the width and italicize the
      content text.
    </Alert>

    <Alert
      feedback="success"
      emphasis="secondary"
      :passThrough="{
        root: {
          props: {
            role: 'status',
            'aria-live': 'polite',
            'aria-label': 'Status notification',
          },
        },
      }"
    >
      Using <code>passThrough.root.props</code> to add ARIA attributes for
      accessibility.
    </Alert>
  </div>
</template>