<neo-lightbox>
  <button data-neo-lightbox-trigger class="lightbox-default-trigger">
    <img src="/static/cheshire_cat.webp" alt="The Cheshire cat" width="220">
  </button>
  <div data-neo-lightbox-content>
    <img src="/static/cheshire_cat.webp" alt="The Cheshire cat">
    <button data-neo-lightbox-close aria-label="Close">&times;</button>
  </div>
</neo-lightbox>

package examples

import "github.com/romshark/morpheus/neo"

templ LightboxDefault() {
	@neo.Lightbox(neo.LightboxOpts{}) {
		<button { neo.LightboxTrigger()... } class="lightbox-default-trigger">
			<img src="/static/cheshire_cat.webp" alt="The Cheshire cat" width="220"/>
		</button>
		<div { neo.LightboxContent()... }>
			<img src="/static/cheshire_cat.webp" alt="The Cheshire cat"/>
			<button { neo.LightboxClose()... } aria-label="Close">&times;</button>
		</div>
	}
}

.lightbox-default-trigger {
	cursor: zoom-in;
}

<neo-lightbox transition="fade" aria-label="Keyboard shortcuts">
  <neo-button role="button" tabindex="0" data-neo-lightbox-trigger>Keyboard shortcuts</neo-button>
  <div class="lightbox-content-panel" data-neo-lightbox-content>
    <header class="lightbox-content-header">
      <h2 data-neo-lightbox-title class="lightbox-content-title">Keyboard shortcuts</h2>
      <button
        data-neo-lightbox-close
        aria-label="Close"
        class="lightbox-content-close"
      >&times;</button>
    </header>
    <dl class="lightbox-content-list">
      <dt><neo-kbd>/</neo-kbd></dt>
      <dd class="lightbox-content-dd">Focus search</dd>
      <dt><neo-kbd>g</neo-kbd><neo-kbd>h</neo-kbd></dt>
      <dd class="lightbox-content-dd">Go home</dd>
      <dt><neo-kbd key="esc"></neo-kbd></dt>
      <dd class="lightbox-content-dd">Close this dialog</dd>
    </dl>
  </div>
</neo-lightbox>

package examples

import "github.com/romshark/morpheus/neo"

templ LightboxContent() {
	@neo.LightboxAttrs(neo.LightboxOpts{Transition: neo.Set(neo.LightboxTransitionFade)}, templ.Attributes{
		"aria-label": "Keyboard shortcuts",
	}) {
		@neo.ButtonAttrs(neo.ButtonOpts{}, neo.LightboxTrigger()) {
			Keyboard shortcuts
		}
		<div
			class="lightbox-content-panel"
			{ neo.LightboxContent()... }
		>
			<header class="lightbox-content-header">
				<h2 { neo.LightboxTitle()... } class="lightbox-content-title">Keyboard shortcuts</h2>
				<button
					{ neo.LightboxClose()... }
					aria-label="Close"
					class="lightbox-content-close"
				>&times;</button>
			</header>
			<dl class="lightbox-content-list">
				<dt>
					@neo.Kbd(neo.KbdOpts{}) {
						/
					}
				</dt>
				<dd class="lightbox-content-dd">Focus search</dd>
				<dt>
					@neo.Kbd(neo.KbdOpts{}) {
						g
					}
					{ " " }
					@neo.Kbd(neo.KbdOpts{}) {
						h
					}
				</dt>
				<dd class="lightbox-content-dd">Go home</dd>
				<dt>
					@neo.Kbd(neo.KbdOpts{Key: neo.Set("esc")})
				</dt>
				<dd class="lightbox-content-dd">Close this dialog</dd>
			</dl>
		</div>
	}
}

.lightbox-content-panel {
	box-sizing: border-box;
	width: min(90vw, 28rem);
	background: var(--page-bg, #fff);
	color: var(--page-fg, #111);
	border-radius: 0.75rem;
	padding: 1.5rem;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.lightbox-content-header {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.lightbox-content-title {
	margin: 0;
	font-size: 1.125rem;
}

.lightbox-content-close {
	border: 0;
	background: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.lightbox-content-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
}

.lightbox-content-dd {
	margin: 0;
}

<neo-lightbox contained>
  <article>
    <h3>Morpheus Release Notes</h3>
    <p>Released June 2026.</p>
    <neo-button data-neo-lightbox-trigger variant="primary">View release notes</neo-button>
  </article>
  <div data-neo-lightbox-content>
    <header>
      <h3 data-neo-lightbox-title>Release notes</h3>
      <button data-neo-lightbox-close aria-label="Close">&times;</button>
    </header>
    <ul>
      <li>New <code>&lt;neo-lightbox&gt;</code> overlay component.</li>
      <li>Carousel deep-linking from gallery thumbnails.</li>
      <li>Reduced-motion and forced-colors passes across the kit.</li>
    </ul>
  </div>
</neo-lightbox>

package examples

import "github.com/romshark/morpheus/neo"

templ LightboxContainer() {
	@neo.Lightbox(neo.LightboxOpts{Contained: neo.Set(true)}) {
		<article>
			<h3>Morpheus Release Notes</h3>
			<p>Released June 2026.</p>
			<neo-button { neo.LightboxTrigger()... } variant="primary">
				View release notes
			</neo-button>
		</article>
		<div { neo.LightboxContent()... }>
			<header>
				<h3 { neo.LightboxTitle()... }>Release notes</h3>
				<button { neo.LightboxClose()... } aria-label="Close">&times;</button>
			</header>
			<ul>
				<li>New <code>{ "<neo-lightbox>" }</code> overlay component.</li>
				<li>Carousel deep-linking from gallery thumbnails.</li>
				<li>Reduced-motion and forced-colors passes across the kit.</li>
			</ul>
		</div>
	}
}

<neo-lightbox
  contained
  hover
  hover-open-delay="120"
  hover-close-delay="200"
  transition="fade"
  aria-label="Photo preview"
  class="lb-hover-preview"
>
  <div class="lb-hover-frame">
    <neo-button role="button" tabindex="0" data-neo-lightbox-trigger>Hover to preview</neo-button>
  </div>
  <div class="lb-hover-content" data-neo-lightbox-content>
    <img src="/static/jar_5.webp" alt="A glass jar" class="lb-hover-img">
  </div>
</neo-lightbox>

package examples

import "github.com/romshark/morpheus/neo"

templ LightboxHover() {
	@neo.LightboxAttrs(neo.LightboxOpts{
		Contained:       neo.Set(true),
		Transition:      neo.Set(neo.LightboxTransitionFade),
		Hover:           neo.Set(true),
		HoverOpenDelay:  neo.Set(120),
		HoverCloseDelay: neo.Set(200),
	}, templ.Attributes{
		"class":      "lb-hover-preview",
		"aria-label": "Photo preview",
	}) {
		<div class="lb-hover-frame">
			@neo.ButtonAttrs(neo.ButtonOpts{}, neo.LightboxTrigger()) {
				Hover to preview
			}
		</div>
		<div
			class="lb-hover-content"
			{ neo.LightboxContent()... }
		>
			<img
				src="/static/jar_5.webp"
				alt="A glass jar"
				class="lb-hover-img"
			/>
		</div>
	}
}

.lb-hover-preview {
	width: 100%;
	height: 100%;
	min-height: 18rem;
	--neo-lightbox-screen-offset: 0;
	--neo-lightbox-overlay-bg: rgba(0, 0, 0, 0.35);
}

/* The surface centers and shrink-wraps its content by default; give it
   a definite size so the image's height:100% resolves and object-fit
   has a box to letterbox into. */
.lb-hover-preview::part(surface) {
	width: 100%;
	height: 100%;
}

.lb-hover-frame {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	border: 1px dashed var(--btn-border, rgba(0, 0, 0, 0.2));
	border-radius: 0.5rem;
}

.lb-hover-content {
	width: 100%;
	height: 100%;
	line-height: 0;
}

.lb-hover-img {
	width: 100%;
	height: 100%;
	border-radius: 0.5rem;
	object-fit: contain;
}

<div data-signals="{gallery_active: '1'}">
  <neo-lightbox transition="fade" aria-label="Jar gallery">
    <ul class="lightbox-gallery-grid">
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;1&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_1.webp"
            alt="Jar 1"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;2&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_2.webp"
            alt="Jar 2"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;3&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_3.webp"
            alt="Jar 3"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;4&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_4.webp"
            alt="Jar 4"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;5&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_5.webp"
            alt="Jar 5"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
      <li>
        <button
          data-neo-lightbox-trigger
          data-on:click="$gallery_active = &#39;6&#39;"
          class="lightbox-gallery-thumb"
        >
          <img
            src="/static/jar_6.webp"
            alt="Jar 6"
            class="lightbox-gallery-thumb-img"
          >
        </button>
      </li>
    </ul>
    <div data-neo-lightbox-content class="lightbox-gallery-content">
      <neo-carousel
        loop
        dots
        class="lightbox-gallery-carousel"
        data-attr:value="$gallery_active"
        data-on:neo-carousel-change="$gallery_active = evt.detail.value"
      >
        <neo-carousel-track>
          <neo-carousel-slide value="1" class="lightbox-gallery-slide">
            <img
              src="/static/jar_1.webp"
              alt="Jar 1"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
          <neo-carousel-slide value="2" class="lightbox-gallery-slide">
            <img
              src="/static/jar_2.webp"
              alt="Jar 2"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
          <neo-carousel-slide value="3" class="lightbox-gallery-slide">
            <img
              src="/static/jar_3.webp"
              alt="Jar 3"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
          <neo-carousel-slide value="4" class="lightbox-gallery-slide">
            <img
              src="/static/jar_4.webp"
              alt="Jar 4"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
          <neo-carousel-slide value="5" class="lightbox-gallery-slide">
            <img
              src="/static/jar_5.webp"
              alt="Jar 5"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
          <neo-carousel-slide value="6" class="lightbox-gallery-slide">
            <img
              src="/static/jar_6.webp"
              alt="Jar 6"
              class="lightbox-gallery-slide-img"
            >
          </neo-carousel-slide>
        </neo-carousel-track>
        <button
          aria-label="Previous image"
          class="lightbox-gallery-nav lightbox-gallery-nav-prev"
          data-neo-carousel-prev
        >&lsaquo;</button>
        <button
          aria-label="Next image"
          class="lightbox-gallery-nav lightbox-gallery-nav-next"
          data-neo-carousel-next
        >&rsaquo;</button>
      </neo-carousel>
      <button
        data-neo-lightbox-close
        aria-label="Close gallery"
        class="lightbox-gallery-close"
      >&times;</button>
    </div>
  </neo-lightbox>
</div>

package examples

import "github.com/romshark/morpheus/neo"

templ LightboxGallery() {
	<div data-signals="{gallery_active: '1'}">
		@neo.LightboxAttrs(neo.LightboxOpts{Transition: neo.Set(neo.LightboxTransitionFade)}, templ.Attributes{
			"aria-label": "Jar gallery",
		}) {
			<ul class="lightbox-gallery-grid">
				for _, n := range []string{"1", "2", "3", "4", "5", "6"} {
					<li>
						<button
							{ neo.LightboxTrigger()... }
							data-on:click={ "$gallery_active = '" + n + "'" }
							class="lightbox-gallery-thumb"
						>
							<img src={ "/static/jar_" + n + ".webp" } alt={ "Jar " + n } class="lightbox-gallery-thumb-img"/>
						</button>
					</li>
				}
			</ul>
			<div { neo.LightboxContent()... } class="lightbox-gallery-content">
				@neo.CarouselAttrs(neo.CarouselOpts{Loop: neo.Set(true), Dots: neo.Set(true)}, templ.Attributes{
					"data-attr:value":             "$gallery_active",
					"data-on:neo-carousel-change": "$gallery_active = evt.detail.value",
					"class":                       "lightbox-gallery-carousel",
				}) {
					@neo.CarouselTrack() {
						for _, n := range []string{"1", "2", "3", "4", "5", "6"} {
							@neo.CarouselSlideAttrs(n, templ.Attributes{
								"class": "lightbox-gallery-slide",
							}) {
								<img src={ "/static/jar_" + n + ".webp" } alt={ "Jar " + n } class="lightbox-gallery-slide-img"/>
							}
						}
					}
					<button aria-label="Previous image" class="lightbox-gallery-nav lightbox-gallery-nav-prev" { neo.CarouselPrev()... }>&lsaquo;</button>
					<button aria-label="Next image" class="lightbox-gallery-nav lightbox-gallery-nav-next" { neo.CarouselNext()... }>&rsaquo;</button>
				}
				<button
					{ neo.LightboxClose()... }
					aria-label="Close gallery"
					class="lightbox-gallery-close"
				>&times;</button>
			</div>
		}
	</div>
}

.lightbox-gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 0.5rem;
}

.lightbox-gallery-thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0.4rem;
	overflow: hidden;
	line-height: 0;
	cursor: zoom-in;
}

.lightbox-gallery-thumb-img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.lightbox-gallery-content {
	position: relative;
	width: min(92vw, 52rem);
}

.lightbox-gallery-carousel {
	display: block;
	position: relative;
	width: 100%;
	height: min(80vh, 32rem);
	background: #000;
	border-radius: 0.5rem;
	overflow: hidden;
}

.lightbox-gallery-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.lightbox-gallery-slide-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.lightbox-gallery-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.lightbox-gallery-nav-prev {
	left: 0.6rem;
}

.lightbox-gallery-nav-next {
	right: 0.6rem;
}

.lightbox-gallery-close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}