WRNexusJS/packages/ui/components/Marquee.wrn

component Marquee {
  outputs {
    // Fired when the reader pauses the scroll, by hover, focus or the button.
    pause(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
    resume(payload: { sourceEvent?: Event; [key: string]: string | number | boolean | null | object })
  }

  props {
    size: string = "default"
    color: string = "primary"
    title: string = "Marquee"
    description: string = ""
    items: unknown[] = []
    variant: string = "default"
    class: string = ""
  }

  state paused: boolean = false

  view {
    <section
      data-ui-component="Marquee"
      aria-label='{title}'
      class='wrn-marquee {class}'
    >
      <div class="wrn-marquee__layout">
        {#if title}
          <div class="wrn-marquee__title">
            <span class="icon-[lucide--megaphone] wrn-marquee__icon" aria-hidden="true"></span>
            <span>{title}</span>
          </div>
        {/if}

        <div
          class="wrn-marquee__window"
          @mouseenter='paused = true; output.pause({})'
          @mouseleave='paused = false; output.resume({})'
          @focusin='paused = true'
          @focusout='paused = false'
        >
          <div
            class="wrn-marquee__track"
            class:wrn-marquee-paused='paused'
          >
            {#each items as item}
              <a
                href='{item.href || "#"}'
                class="wrn-marquee__item"
              >
                <span
                  class="wrn-marquee__dot"
                  data-color='{item.color || "primary"}'
                  aria-hidden="true"
                ></span>
                <span>{item.label || item.title}</span>
                {#if item.meta}
                  <span class="wrn-marquee__meta">{item.meta}</span>
                {/if}
              </a>
            {:empty}
              <p class="wrn-marquee__empty">{description || "No announcements available."}</p>
            {/each}

            {#if items.length > 0}
              {#each items as item}
                <a
                  href='{item.href || "#"}'
                  aria-hidden="true"
                  tabindex="-1"
                  class="wrn-marquee__item"
                >
                  <span class="wrn-marquee__dot" aria-hidden="true"></span>
                  <span>{item.label || item.title}</span>
                </a>
              {/each}
            {/if}
          </div>
        </div>

        <button
          type="button"
          aria-label='{paused ? "Resume announcements" : "Pause announcements"}'
          class="wrn-marquee__toggle"
          @click='paused = !paused; paused ? output.pause({}) : output.resume({})'
        >
          <span class="icon-[lucide--pause] wrn-marquee__icon" data-show='!paused' aria-hidden="true"></span>
          <span class="icon-[lucide--play] wrn-marquee__icon" data-show='paused' aria-hidden="true"></span>
        </button>
      </div>

      <slot></slot>
    </section>
  }

  style {
    .wrn-marquee { overflow: hidden; border-block: 1px solid var(--wrn-color-border); background: var(--wrn-color-surface-raised); }
    .wrn-marquee__layout { display: flex; align-items: stretch; }
    .wrn-marquee__title { position: relative; z-index: 1; display: flex; flex: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-right: 1px solid var(--wrn-color-border); color: var(--wrn-color-on-primary); background: var(--wrn-color-primary); font-size: 0.875rem; font-weight: 700; }
    .wrn-marquee__window { position: relative; min-width: 0; flex: 1; overflow: hidden; }
    .wrn-marquee__track {
      display: flex; width: max-content; min-width: 100%; align-items: center;
      animation: wrn-marquee 32s linear infinite;
    }
    .wrn-marquee-paused { animation-play-state: paused; }
    .wrn-marquee__item { display: flex; flex: none; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 500; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
    .wrn-marquee__item:hover { color: var(--wrn-color-primary); background: var(--wrn-color-primary-soft); }
    .wrn-marquee__item:focus-visible, .wrn-marquee__toggle:focus-visible { outline: 2px solid var(--wrn-color-focus); outline-offset: -2px; }
    .wrn-marquee__dot { width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: var(--wrn-color-primary); }
    .wrn-marquee__dot[data-color="danger"] { background: var(--wrn-color-danger); }
    .wrn-marquee__dot[data-color="warning"] { background: var(--wrn-color-warning); }
    .wrn-marquee__dot[data-color="success"] { background: var(--wrn-color-success); }
    .wrn-marquee__meta { color: var(--wrn-color-text-muted); font-size: 0.75rem; }
    .wrn-marquee__empty { padding: 0.75rem 1.25rem; color: var(--wrn-color-text-muted); font-size: 0.875rem; }
    .wrn-marquee__toggle { display: flex; flex: none; align-items: center; justify-content: center; padding-inline: 1rem; border: 0; border-left: 1px solid var(--wrn-color-border); color: var(--wrn-color-text-muted); background: transparent; transition: color var(--wrn-motion-base), background var(--wrn-motion-base); }
    .wrn-marquee__toggle:hover { color: var(--wrn-color-text); background: var(--wrn-color-surface-soft); }
    .wrn-marquee__icon { width: 1rem; height: 1rem; }
    @media (min-width: 40rem) { .wrn-marquee__title { padding-inline: 1.25rem; } }

    .wrn-marquee-paused {
      animation-play-state: paused;
    }

    @keyframes wrn-marquee {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-marquee__track {
        animation: none;
      }
    }
  }
}