20:Te800,

<script lang="ts">
  import { onDestroy, onMount } from "svelte";
  import { cubicOut } from "svelte/easing";
  import { scale } from "svelte/transition";

  let {
    count = 3,
    accent = "#FF4D4D",
    size = 46,
    ring = true,
  }: { count?: number; accent?: string; size?: number; ring?: boolean } = $props();

  let hovered = $state(false);
  let focused = $state(false);
  let cleared = $state(false);
  let reduced = $state(false);
  let bellEl: SVGSVGElement | undefined = $state();
  let mql: MediaQueryList | undefined;

  const syncReduced = () => {
    reduced = mql?.matches ?? false;
  };

  onMount(() => {
    mql = window.matchMedia("(prefers-reduced-motion: reduce)");
    syncReduced();
    mql.addEventListener("change", syncReduced);
  });
  onDestroy(() => {
    mql?.removeEventListener("change", syncReduced);
  });

  const shown = $derived(Math.max(0, Math.min(99, Math.round(count))));
  const unread = $derived(!cleared && shown > 0);
  const engaged = $derived(hovered || focused);
  const label = $derived(unread ? `Notifications, ${shown} unread` : "Notifications, no unread");

  function swingOnce() {
    if (!ring || !bellEl) return;
    bellEl.classList.remove("swing", "nudge");
    // Force a reflow so the animation can restart even on rapid re-entry.
    void bellEl.getBoundingClientRect();
    bellEl.classList.add(reduced ? "nudge" : "swing");
  }

  function onEnter() {
    hovered = true;
    swingOnce();
  }
  function onLeave() {
    hovered = false;
  }
  function onFocus() {
    focused = true;
    swingOnce();
  }
  function onBlur() {
    focused = false;
  }
  function onClick() {
    cleared = !cleared;
  }
</script>

<button
  type="button"
  class="rbb"
  aria-label={label}
  style="width: {size}px; height: {size}px; background: {engaged ? 'rgba(127,127,137,0.06)' : 'transparent'}; --rbb-ring: {accent};"
  onpointerenter={onEnter}
  onpointerleave={onLeave}
  onfocus={onFocus}
  onblur={onBlur}
  onclick={onClick}
>
  <svg bind:this={bellEl} class="rbb__bell" width={size * 0.6} height={size * 0.6} viewBox="0 0 46 46" aria-hidden="true">
    <path d="M15.5 26 C15.5 15.7 17.6 9 23 9 C28.4 9 30.5 15.7 30.5 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    <line x1="13" y1="28" x2="33" y2="28" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    <line x1="23" y1="31" x2="23" y2="35" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
    {#if unread}
      <g
        class="rbb__badge"
        style="transform-box: fill-box; transform-origin: center;"
        transition:scale={{ duration: 200, easing: cubicOut, start: 0 }}
      >
        <circle cx="35" cy="11" r="6" fill={accent} />
        <text x="35" y="11.5" font-size="10" font-weight="700" fill="#fff" text-anchor="middle" dominant-baseline="middle" font-family="system-ui, sans-serif">{shown}</text>
      </g>
    {/if}
  </svg>
</button>

<style>
  .rbb {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    padding: 0;
    color: currentColor;
    cursor: pointer;
    outline: none;
    transition: background-color 200ms ease-out;
  }
  .rbb:focus-visible {
    box-shadow: 0 0 0 2px transparent, 0 0 0 4px var(--rbb-ring);
    outline-offset: 2px;
  }
  .rbb__bell {
    transform-origin: 50% 20%;
  }
  .rbb__bell.swing {
    animation: rbb-swing 0.65s ease-in-out;
  }
  .rbb__bell.nudge {
    animation: rbb-nudge 0.22s ease-in-out;
  }
  @keyframes rbb-swing {
    0% {
      transform: rotate(0deg) scale(1);
    }
    16% {
      transform: rotate(-12deg) scale(1);
    }
    38% {
      transform: rotate(16deg) scale(1.05);
    }
    58% {
      transform: rotate(-6deg) scale(1);
    }
    78% {
      transform: rotate(3deg) scale(1);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }
  @keyframes rbb-nudge {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
</style>

21:T11fb,--- interface Props { count?: number; accent?: string; size?: number; ring?: boolean; } const { count = 3, accent = "#FF4D4D", size = 46, ring = true } = Astro.props; const shown = Math.max(0, Math.min(99, Math.round(count))); const initialUnread = shown > 0; const label = initialUnread ? `Notifications, ${shown} unread` : "Notifications, no unread"; --- 22:Tec0c,

---
interface Props {
  count?: number;
  accent?: string;
  size?: number;
  ring?: boolean;
}
const { count = 3, accent = "#FF4D4D", size = 46, ring = true } = Astro.props;
const shown = Math.max(0, Math.min(99, Math.round(count)));
const initialUnread = shown > 0;
const label = initialUnread ? `Notifications, ${shown} unread` : "Notifications, no unread";
---

<button
  type="button"
  class="rbb"
  aria-label={label}
  style={`width:${size}px;height:${size}px;--rbb-ring:${accent};`}
  data-ringing-bell-badge
  data-ring={ring ? "true" : "false"}
  data-count={shown}
>
  <svg class="rbb__bell" width={size * 0.6} height={size * 0.6} viewBox="0 0 46 46" aria-hidden="true">
    <path d="M15.5 26 C15.5 15.7 17.6 9 23 9 C28.4 9 30.5 15.7 30.5 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
    <line x1="13" y1="28" x2="33" y2="28" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
    <line x1="23" y1="31" x2="23" y2="35" stroke="currentColor" stroke-width="2" stroke-linecap="round"></line>
    <g class:list={["rbb__badge", { "rbb__badge--hidden": !initialUnread }]}>
      <circle cx="35" cy="11" r="6" fill={accent}></circle>
      <text x="35" y="11.5" font-size="10" font-weight="700" fill="#fff" text-anchor="middle" dominant-baseline="middle" font-family="system-ui, sans-serif">{shown}</text>
    </g>
  </svg>
</button>

<style>
  .rbb {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    padding: 0;
    color: currentColor;
    cursor: pointer;
    outline: none;
    background: transparent;
    transition: background-color 200ms ease-out;
  }
  .rbb.is-engaged {
    background: rgba(127, 127, 137, 0.06);
  }
  .rbb:focus-visible {
    box-shadow:
      0 0 0 2px transparent,
      0 0 0 4px var(--rbb-ring);
    outline-offset: 2px;
  }
  .rbb :global(.rbb__bell) {
    transform-origin: 50% 20%;
  }
  .rbb :global(.rbb__bell.swing) {
    animation: rbb-swing 0.65s ease-in-out;
  }
  .rbb :global(.rbb__bell.nudge) {
    animation: rbb-nudge 0.22s ease-in-out;
  }
  @keyframes rbb-swing {
    0% {
      transform: rotate(0deg) scale(1);
    }
    16% {
      transform: rotate(-12deg) scale(1);
    }
    38% {
      transform: rotate(16deg) scale(1.05);
    }
    58% {
      transform: rotate(-6deg) scale(1);
    }
    78% {
      transform: rotate(3deg) scale(1);
    }
    100% {
      transform: rotate(0deg) scale(1);
    }
  }
  @keyframes rbb-nudge {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(-5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  .rbb :global(.rbb__badge) {
    opacity: 1;
    transition: opacity 200ms ease-out;
  }
  .rbb :global(.rbb__badge circle) {
    transition: r 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .rbb :global(.rbb__badge--hidden) {
    opacity: 0;
  }
  .rbb :global(.rbb__badge--hidden circle) {
    r: 0;
  }
</style>

<script>
  function setup(button: HTMLButtonElement) {
    const bell = button.querySelector<SVGSVGElement>(".rbb__bell");
    const badge = button.querySelector<SVGGElement>(".rbb__badge");
    const ringEnabled = button.dataset.ring === "true";
    const count = Number(button.dataset.count ?? "0");
    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
    let cleared = false;

    function swingOnce() {
      if (!ringEnabled || !bell) return;
      bell.classList.remove("swing", "nudge");
      // Force a reflow so the animation can restart even on rapid re-entry.
      void bell.getBoundingClientRect();
      bell.classList.add(mql.matches ? "nudge" : "swing");
    }

    function updateBadge() {
      const unread = !cleared && count > 0;
      button.setAttribute("aria-label", unread ? `Notifications, ${count} unread` : "Notifications, no unread");
      badge?.classList.toggle("rbb__badge--hidden", !unread);
    }

    button.addEventListener("pointerenter", () => {
      button.classList.add("is-engaged");
      swingOnce();
    });
    button.addEventListener("pointerleave", () => button.classList.remove("is-engaged"));
    button.addEventListener("focus", () => {
      button.classList.add("is-engaged");
      swingOnce();
    });
    button.addEventListener("blur", () => button.classList.remove("is-engaged"));
    button.addEventListener("click", () => {
      cleared = !cleared;
      updateBadge();
    });
  }

  document.querySelectorAll<HTMLButtonElement>("[data-ringing-bell-badge]").forEach(setup);
</script>

Nearby