Capsule

---
import Capsule from "../Capsule.astro";
import Avatar from "@pindoba/astro-avatar";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import Progress from "@pindoba/astro-progress";
import { css } from "@pindoba/styled-system/css";
import { stack } from "@pindoba/styled-system/patterns";
import { Pause, X } from "@lucide/astro";

// Numbers match the PS5-inspired reference: shown "downloaded so far" GB
// and total package GB, with an independently-tracked percent.
const downloaded = 12.5;
const total = 85.0;
const percent = 45;
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!--
    Download widget — PS5-inspired. Percent and "downloaded/total GB" ride
    on Banner's own `heading.trailing` / `subheading.trailing` slots so
    they sit in the same rail as the text without a separate column. The
    progress bar lives in the body below; pause/cancel sit in trailing.
  -->
  <Capsule
    size="lg"
    background="surface.ground"
    border="muted"
    leadingPanel={{ padding: "sm" }}
    bodyPanel={{ padding: "none" }}
    trailingPanel={{ padding: "sm" }}
  >
    <Avatar
      slot="leading"
      name="Cyberpunk 2077"
      src="https://picsum.photos/seed/cyberpunk/96/96"
      alt="Cyberpunk 2077"
      size="xl"
      shape="circle"
    />

    <div class={stack({ gap: "xs", direction: "column", width: "100%" })}>
      <Banner
        heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
        subheading={{
          content: "Calculating time remaining...",
          trailing: `${downloaded} GB / ${total} GB`,
        }}
        passThrough={{
          headingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "sm",
              fontWeight: "semibold",
            }),
          },
          subheadingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "xs",
            }),
          },
        }}
      />
      <Progress value={percent} max={100} feedback="primary" />
    </div>

    <Fragment slot="trailing">
      <Button
        size="xl"
        emphasis="secondary"
        shape="circle"
        aria-label="Pause download"
      >
        <Pause />
      </Button>
      <Button
        size="xl"
        emphasis="ghost"
        shape="circle"
        aria-label="Cancel download"
      >
        <X />
      </Button>
    </Fragment>
  </Capsule>
</div>

import { Capsule } from "../Capsule";
import Avatar from "@pindoba/react-avatar";
import Banner from "@pindoba/react-banner";
import Button from "@pindoba/react-button";
import Progress from "@pindoba/react-progress";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const iconClass = css({ w: "1em", h: "1em" });

const PauseIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <rect x="14" y="4" width="4" height="16" rx="1" />
    <rect x="6" y="4" width="4" height="16" rx="1" />
  </svg>
);

const XIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M18 6 6 18" />
    <path d="m6 6 12 12" />
  </svg>
);

// Numbers match the PS5-inspired reference: shown "downloaded so far" GB
// and total package GB, with an independently-tracked percent.
const downloaded = 12.5;
const total = 85.0;
const percent = 45;

export default function DownloadProgressDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      {/*
        Download widget — PS5-inspired. Percent and "downloaded/total GB" ride
        on Banner's own `heading.trailing` / `subheading.trailing` slots so
        they sit in the same rail as the text without a separate column. The
        progress bar lives in the body below; pause/cancel sit in trailing.
      */}
      <Capsule
        size="lg"
        background="surface.ground"
        border="muted"
        leadingPanel={{ padding: "none" }}
        bodyPanel={{ padding: "sm" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Cyberpunk 2077"
            src="https://picsum.photos/seed/cyberpunk/96/96"
            alt="Cyberpunk 2077"
            size="xl"
            shape="circle"
          />
        }
        trailing={
          <>
            <Button
              size="xl"
              emphasis="secondary"
              shape="circle"
              aria-label="Pause download"
            >
              <PauseIcon />
            </Button>
            <Button
              size="xl"
              emphasis="ghost"
              shape="circle"
              aria-label="Cancel download"
            >
              <XIcon />
            </Button>
          </>
        }
      >
        <div
          className={stack({ gap: "xs", direction: "column", width: "100%" })}
        >
          <Banner
            heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
            subheading={{
              content: "Calculating time remaining...",
              trailing: `${downloaded} GB / ${total} GB`,
            }}
            passThrough={{
              headingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "sm",
                  fontWeight: "semibold",
                }),
              },
              subheadingTrailing: {
                style: css.raw({
                  whiteSpace: "nowrap",
                  fontVariantNumeric: "tabular-nums",
                  fontSize: "xs",
                }),
              },
            }}
          />
          <Progress value={percent} max={100} feedback="primary" />
        </div>
      </Capsule>
    </div>
  );
}

<script lang="ts">
  import Capsule from "../capsule.svelte";
  import Avatar from "@pindoba/svelte-avatar";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import Progress from "@pindoba/svelte-progress";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucidePause from "@lucide/svelte/icons/pause";
  import LucideX from "@lucide/svelte/icons/x";
  import { css } from "@pindoba/styled-system/css";

  // Numbers match the PS5-inspired reference: shown "downloaded so far" GB
  // and total package GB, with an independently-tracked percent.
  const downloaded = 12.5;
  const total = 85.0;
  const percent = 45;
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!--
    Download widget — PS5-inspired. Percent and "downloaded/total GB" ride
    on Banner's own `heading.trailing` / `subheading.trailing` slots so
    they sit in the same rail as the text without a separate column. The
    progress bar lives in the body below; pause/cancel sit in trailing.
  -->
  <Capsule
    size="lg"
    background="surface.ground"
    border="muted"
    leadingPanel={{ padding: "none" }}
    bodyPanel={{ padding: "sm" }}
    trailingPanel={{ padding: "sm" }}
  >
    {#snippet leading()}
      <Avatar
        name="Cyberpunk 2077"
        src="https://picsum.photos/seed/cyberpunk/96/96"
        alt="Cyberpunk 2077"
        size="xl"
        shape="circle"
      />
    {/snippet}

    <div class={stack({ gap: "xs", direction: "column", width: "100%" })}>
      <Banner
        heading={{ content: "Cyberpunk 2077", trailing: `${percent}%` }}
        subheading={{
          content: "Calculating time remaining...",
          trailing: `${downloaded} GB / ${total} GB`,
        }}
        passThrough={{
          headingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "sm",
              fontWeight: "semibold",
            }),
          },
          subheadingTrailing: {
            style: css.raw({
              whiteSpace: "nowrap",
              fontVariantNumeric: "tabular-nums",
              fontSize: "xs",
            }),
          },
        }}
      />
      <Progress value={percent} max={100} feedback="primary" />
    </div>

    {#snippet trailing()}
      <Button
        size="xl"
        emphasis="secondary"
        shape="circle"
        aria-label="Pause download"
      >
        <LucidePause />
      </Button>
      <Button
        size="xl"
        emphasis="ghost"
        shape="circle"
        aria-label="Cancel download"
      >
        <LucideX />
      </Button>
    {/snippet}
  </Capsule>
</div>

<script setup lang="ts">
import { Capsule } from "@pindoba/vue-capsule";
import { Avatar } from "@pindoba/vue-avatar";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { Progress } from "@pindoba/vue-progress";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";
import { Pause, X } from "./_icons";

const col = stack({ gap: "md", direction: "column", width: "100%" });
const inner = stack({ gap: "xs", direction: "column", width: "100%" });

// Numbers match the PS5-inspired reference: shown "downloaded so far" GB
// and total package GB, with an independently-tracked percent.
const downloaded = 12.5;
const total = 85.0;
const percent = 45;

const bannerPassThrough = {
  headingTrailing: {
    style: css.raw({
      whiteSpace: "nowrap",
      fontVariantNumeric: "tabular-nums",
      fontSize: "sm",
      fontWeight: "semibold",
    }),
  },
  subheadingTrailing: {
    style: css.raw({
      whiteSpace: "nowrap",
      fontVariantNumeric: "tabular-nums",
      fontSize: "xs",
    }),
  },
};
</script>

<template>
  <div :class="col">
    <!--
      Download widget — PS5-inspired. Percent and "downloaded/total GB" ride
      on Banner's own `heading.trailing` / `subheading.trailing` slots so
      they sit in the same rail as the text without a separate column. The
      progress bar lives in the body below; pause/cancel sit in trailing.
    -->
    <Capsule
      size="lg"
      background="surface.ground"
      border="muted"
      :leadingPanel="{ padding: 'none' }"
      :bodyPanel="{ padding: 'sm' }"
      :trailingPanel="{ padding: 'sm' }"
    >
      <template #leading>
        <Avatar
          name="Cyberpunk 2077"
          src="https://picsum.photos/seed/cyberpunk/96/96"
          alt="Cyberpunk 2077"
          size="xl"
          shape="circle"
        />
      </template>

      <div :class="inner">
        <Banner
          heading="Cyberpunk 2077"
          subheading="Calculating time remaining..."
          :passThrough="bannerPassThrough"
        >
          <template #headingTrailing>{{ percent }}%</template>
          <template #subheadingTrailing
            >{{ downloaded }} GB / {{ total }} GB</template
          >
        </Banner>
        <Progress :value="percent" :max="100" feedback="primary" />
      </div>

      <template #trailing>
        <Button
          size="xl"
          emphasis="secondary"
          shape="circle"
          aria-label="Pause download"
        >
          <Pause />
        </Button>
        <Button
          size="xl"
          emphasis="ghost"
          shape="circle"
          aria-label="Cancel download"
        >
          <X />
        </Button>
      </template>
    </Capsule>
  </div>
</template>

---
import Capsule from "../Capsule.astro";
import Avatar from "@pindoba/astro-avatar";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    <Avatar
      slot="leading"
      name="Elena Rostova"
      src="https://i.pravatar.cc/96?u=elena"
      alt="Elena Rostova"
      size="lg"
    />
    <Banner
      size="sm"
      heading="Elena Rostova"
      subheading="Currently playing Elden Ring"
    />
    <Button
      slot="trailing"
      size="md"
      emphasis="primary"
      feedback="primary"
      shape="pill"
    >
      Join Session
    </Button>
  </Capsule>
</div>

import { Capsule } from "../Capsule";
import Avatar from "@pindoba/react-avatar";
import Banner from "@pindoba/react-banner";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";

export default function SocialActivityDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "sm" }}
        leading={
          <Avatar
            name="Elena Rostova"
            src="https://i.pravatar.cc/96?u=elena"
            alt="Elena Rostova"
            size="lg"
          />
        }
        trailing={
          <Button size="md" emphasis="primary" feedback="primary" shape="pill">
            Join Session
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Elena Rostova"
          subheading="Currently playing Elden Ring"
        />
      </Capsule>
    </div>
  );
}

<script lang="ts">
  import Capsule from "../capsule.svelte";
  import Avatar from "@pindoba/svelte-avatar";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "sm" }}
  >
    {#snippet leading()}
      <Avatar
        name="Elena Rostova"
        src="https://i.pravatar.cc/96?u=elena"
        alt="Elena Rostova"
        size="lg"
      />
    {/snippet}
    <Banner
      size="sm"
      heading="Elena Rostova"
      subheading="Currently playing Elden Ring"
    />
    {#snippet trailing()}
      <Button size="md" emphasis="primary" feedback="primary" shape="pill"
        >Join Session</Button
      >
    {/snippet}
  </Capsule>
</div>

<script setup lang="ts">
import { Capsule } from "@pindoba/vue-capsule";
import { Avatar } from "@pindoba/vue-avatar";
import { Banner } from "@pindoba/vue-banner";
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">
    <Capsule
      border="muted"
      :bodyPanel="{ padding: '4xs' }"
      :leadingPanel="{ padding: 'xs' }"
      :trailingPanel="{ padding: 'sm' }"
    >
      <template #leading>
        <Avatar
          name="Elena Rostova"
          src="https://i.pravatar.cc/96?u=elena"
          alt="Elena Rostova"
          size="lg"
        />
      </template>
      <Banner
        size="sm"
        heading="Elena Rostova"
        subheading="Currently playing Elden Ring"
      />
      <template #trailing>
        <Button size="md" emphasis="primary" feedback="primary" shape="pill"
          >Join Session</Button
        >
      </template>
    </Capsule>
  </div>
</template>

---
import Capsule from "../Capsule.astro";
import Stamp from "@pindoba/astro-stamp";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
import { TriangleAlert } from "@lucide/astro";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    trailingPanel={{ padding: "sm" }}
    leadingPanel={{ padding: "xs" }}
  >
    <Stamp
      slot="leading"
      feedback="warning"
      emphasis="primary"
      shape="circle"
      size="lg"
      border="none"
    >
      <TriangleAlert />
    </Stamp>
    <Banner size="sm" heading="Build failed" subheading="main · 12 min ago" />
    <Button
      slot="trailing"
      size="md"
      emphasis="secondary"
      feedback="warning"
      shape="pill"
    >
      View logs
    </Button>
  </Capsule>
</div>

import { Capsule } from "../Capsule";
import Stamp from "@pindoba/react-stamp";
import Banner from "@pindoba/react-banner";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const iconClass = css({ w: "1em", h: "1em" });

const AlertTriangleIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
    <path d="M12 9v4" />
    <path d="M12 17h.01" />
  </svg>
);

export default function SystemAlertDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      <Capsule
        border="muted"
        bodyPanel={{ padding: "4xs" }}
        trailingPanel={{ padding: "sm" }}
        leadingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            feedback="warning"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            <AlertTriangleIcon />
          </Stamp>
        }
        trailing={
          <Button
            size="md"
            emphasis="secondary"
            feedback="warning"
            shape="pill"
          >
            View logs
          </Button>
        }
      >
        <Banner
          size="sm"
          heading="Build failed"
          subheading="main · 12 min ago"
        />
      </Capsule>
    </div>
  );
}

<script lang="ts">
  import Capsule from "../capsule.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideAlertTriangle from "@lucide/svelte/icons/triangle-alert";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <Capsule
    border="muted"
    bodyPanel={{ padding: "4xs" }}
    trailingPanel={{ padding: "sm" }}
    leadingPanel={{ padding: "xs" }}
  >
    {#snippet leading()}
      <Stamp
        feedback="warning"
        emphasis="primary"
        shape="circle"
        size="lg"
        border="none"
      >
        <LucideAlertTriangle />
      </Stamp>
    {/snippet}
    <Banner size="sm" heading="Build failed" subheading="main · 12 min ago" />
    {#snippet trailing()}
      <Button size="md" emphasis="secondary" feedback="warning" shape="pill"
        >View logs</Button
      >
    {/snippet}
  </Capsule>
</div>

<script setup lang="ts">
import { Capsule } from "@pindoba/vue-capsule";
import { Stamp } from "@pindoba/vue-stamp";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { TriangleAlert } from "./_icons";

const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <Capsule
      border="muted"
      :bodyPanel="{ padding: '4xs' }"
      :trailingPanel="{ padding: 'sm' }"
      :leadingPanel="{ padding: 'xs' }"
    >
      <template #leading>
        <Stamp
          feedback="warning"
          emphasis="primary"
          shape="circle"
          size="lg"
          border="none"
        >
          <TriangleAlert />
        </Stamp>
      </template>
      <Banner size="sm" heading="Build failed" subheading="main · 12 min ago" />
      <template #trailing>
        <Button size="md" emphasis="secondary" feedback="warning" shape="pill"
          >View logs</Button
        >
      </template>
    </Capsule>
  </div>
</template>

---
import Capsule from "../Capsule.astro";
import Stamp from "@pindoba/astro-stamp";
import Banner from "@pindoba/astro-banner";
import Button from "@pindoba/astro-button";
import { stack } from "@pindoba/styled-system/patterns";
import { Archive, FolderInput, Trash2 } from "@lucide/astro";
---

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!--
    Floating batch actions card. Leading shows the selection count via a
    Stamp; trailing groups bulk-action buttons in a padded rail. The
    capsule itself is non-interactive — each action button is the real
    click target.
  -->
  <Capsule
    border="muted"
    shadow="lg"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "xs" }}
  >
    <Stamp
      slot="leading"
      feedback="primary"
      emphasis="primary"
      shape="circle"
      size="lg"
      border="none"
    >
      3
    </Stamp>
    <Banner size="sm" heading="3 items selected" subheading="Bulk actions" />
    <Fragment slot="trailing">
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Archive selection"
      >
        <Archive />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Move selection"
      >
        <FolderInput />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        feedback="danger"
        shape="circle"
        aria-label="Delete selection"
      >
        <Trash2 />
      </Button>
    </Fragment>
  </Capsule>
</div>

import { Capsule } from "../Capsule";
import Stamp from "@pindoba/react-stamp";
import Banner from "@pindoba/react-banner";
import Button from "@pindoba/react-button";
import { stack } from "@pindoba/styled-system/patterns";
import { css } from "@pindoba/styled-system/css";

const iconClass = css({ w: "1em", h: "1em" });

const ArchiveIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <rect width="20" height="5" x="2" y="3" rx="1" />
    <path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" />
    <path d="M10 12h4" />
  </svg>
);

const FolderInputIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-2.4" />
    <path d="M2 13h10" />
    <path d="m9 16 3-3-3-3" />
  </svg>
);

const TrashIcon = () => (
  <svg
    className={iconClass}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path d="M3 6h18" />
    <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
    <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
    <line x1="10" x2="10" y1="11" y2="17" />
    <line x1="14" x2="14" y1="11" y2="17" />
  </svg>
);

export default function FloatingActionDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "100%" })}>
      {/*
        Floating batch actions card. Leading shows the selection count via a
        Stamp; trailing groups bulk-action buttons in a padded rail. The
        capsule itself is non-interactive — each action button is the real
        click target.
      */}
      <Capsule
        border="muted"
        shadow="lg"
        bodyPanel={{ padding: "4xs" }}
        leadingPanel={{ padding: "xs" }}
        trailingPanel={{ padding: "xs" }}
        leading={
          <Stamp
            feedback="primary"
            emphasis="primary"
            shape="circle"
            size="lg"
            border="none"
          >
            3
          </Stamp>
        }
        trailing={
          <>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Archive selection"
            >
              <ArchiveIcon />
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              shape="circle"
              aria-label="Move selection"
            >
              <FolderInputIcon />
            </Button>
            <Button
              size="md"
              emphasis="ghost"
              feedback="danger"
              shape="circle"
              aria-label="Delete selection"
            >
              <TrashIcon />
            </Button>
          </>
        }
      >
        <Banner
          size="sm"
          heading="3 items selected"
          subheading="Bulk actions"
        />
      </Capsule>
    </div>
  );
}

<script lang="ts">
  import Capsule from "../capsule.svelte";
  import Stamp from "@pindoba/svelte-stamp";
  import Banner from "@pindoba/svelte-banner";
  import Button from "@pindoba/svelte-button";
  import { stack } from "@pindoba/styled-system/patterns";
  import LucideArchive from "@lucide/svelte/icons/archive";
  import LucideFolderInput from "@lucide/svelte/icons/folder-input";
  import LucideTrash from "@lucide/svelte/icons/trash-2";
</script>

<div class={stack({ gap: "md", direction: "column", width: "100%" })}>
  <!--
    Floating batch actions card. Leading shows the selection count via a
    Stamp; trailing groups bulk-action buttons in a padded rail. The
    capsule itself is non-interactive — each action button is the real
    click target.
  -->
  <Capsule
    border="muted"
    shadow="lg"
    bodyPanel={{ padding: "4xs" }}
    leadingPanel={{ padding: "xs" }}
    trailingPanel={{ padding: "xs" }}
  >
    {#snippet leading()}
      <Stamp
        feedback="primary"
        emphasis="primary"
        shape="circle"
        size="lg"
        border="none"
      >
        3
      </Stamp>
    {/snippet}
    <Banner size="sm" heading="3 items selected" subheading="Bulk actions" />
    {#snippet trailing()}
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Archive selection"
      >
        <LucideArchive />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        shape="circle"
        aria-label="Move selection"
      >
        <LucideFolderInput />
      </Button>
      <Button
        size="md"
        emphasis="ghost"
        feedback="danger"
        shape="circle"
        aria-label="Delete selection"
      >
        <LucideTrash />
      </Button>
    {/snippet}
  </Capsule>
</div>

<script setup lang="ts">
import { Capsule } from "@pindoba/vue-capsule";
import { Stamp } from "@pindoba/vue-stamp";
import { Banner } from "@pindoba/vue-banner";
import { Button } from "@pindoba/vue-button";
import { stack } from "@pindoba/styled-system/patterns";
import { Archive, FolderInput, Trash2 } from "./_icons";

const col = stack({ gap: "md", direction: "column", width: "100%" });
</script>

<template>
  <div :class="col">
    <!--
      Floating batch actions card. Leading shows the selection count via a
      Stamp; trailing groups bulk-action buttons in a padded rail. The
      capsule itself is non-interactive — each action button is the real
      click target.
    -->
    <Capsule
      border="muted"
      shadow="lg"
      :bodyPanel="{ padding: '4xs' }"
      :leadingPanel="{ padding: 'xs' }"
      :trailingPanel="{ padding: 'xs' }"
    >
      <template #leading>
        <Stamp
          feedback="primary"
          emphasis="primary"
          shape="circle"
          size="lg"
          border="none"
        >
          3
        </Stamp>
      </template>
      <Banner size="sm" heading="3 items selected" subheading="Bulk actions" />
      <template #trailing>
        <Button
          size="md"
          emphasis="ghost"
          shape="circle"
          aria-label="Archive selection"
        >
          <Archive />
        </Button>
        <Button
          size="md"
          emphasis="ghost"
          shape="circle"
          aria-label="Move selection"
        >
          <FolderInput />
        </Button>
        <Button
          size="md"
          emphasis="ghost"
          feedback="danger"
          shape="circle"
          aria-label="Delete selection"
        >
          <Trash2 />
        </Button>
      </template>
    </Capsule>
  </div>
</template>