<neo-drawer side="left">
  <neo-button data-neo-drawer-trigger>Left</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Left drawer</h2>
      <p data-neo-drawer-description>Slides in from the left edge.</p>
    </header>
    <div data-neo-drawer-body>
      <p>Common pattern for navigation sidebars on small screens.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
    </footer>
  </dialog>
</neo-drawer>
<neo-drawer side="right">
  <neo-button data-neo-drawer-trigger>Right</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Right drawer</h2>
      <p data-neo-drawer-description>The default side.</p>
    </header>
    <div data-neo-drawer-body>
      <p>Common pattern for settings, filters, and detail panels.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
    </footer>
  </dialog>
</neo-drawer>
<neo-drawer side="top">
  <neo-button data-neo-drawer-trigger>Top</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Top drawer</h2>
    </header>
    <div data-neo-drawer-body>
      <p>Slides down from the top, useful for global announcements.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
    </footer>
  </dialog>
</neo-drawer>
<neo-drawer side="bottom">
  <neo-button data-neo-drawer-trigger>Bottom</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Bottom drawer</h2>
      <p data-neo-drawer-description>Mobile-style sheet.</p>
    </header>
    <div data-neo-drawer-body>
      <p>The bottom-sheet idiom from mobile UIs. Actions sit at thumb reach.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

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

templ DrawerSides() {
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideLeft)}) {
		<neo-button { neo.DrawerTrigger()... }>Left</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Left drawer
				}
				@neo.DrawerDescription() {
					Slides in from the left edge.
				}
			}
			@neo.DrawerBody() {
				<p>Common pattern for navigation sidebars on small screens.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
			}
		</dialog>
	}
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideRight)}) {
		<neo-button { neo.DrawerTrigger()... }>Right</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Right drawer
				}
				@neo.DrawerDescription() {
					The default side.
				}
			}
			@neo.DrawerBody() {
				<p>Common pattern for settings, filters, and detail panels.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
			}
		</dialog>
	}
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideTop)}) {
		<neo-button { neo.DrawerTrigger()... }>Top</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Top drawer
				}
			}
			@neo.DrawerBody() {
				<p>Slides down from the top, useful for global announcements.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
			}
		</dialog>
	}
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideBottom)}) {
		<neo-button { neo.DrawerTrigger()... }>Bottom</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Bottom drawer
				}
				@neo.DrawerDescription() {
					Mobile-style sheet.
				}
			}
			@neo.DrawerBody() {
				<p>The bottom-sheet idiom from mobile UIs. Actions sit at thumb reach.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
			}
		</dialog>
	}
}

<neo-drawer side="right" class="drawer-frost-glass-host">
  <neo-button data-neo-drawer-trigger>Open frost glass</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Frost glass surface</h2>
      <p data-neo-drawer-description>Two stacked blurs: the ::backdrop frosts the page behind the drawer at 6px (with a soft 18% black tint), and the drawer surface adds another 22px on top of its own 42% dark wash.</p>
    </header>
    <div data-neo-drawer-body>
      <p>Holds up in both light and dark modes. The panel stays dark and the blurred page reads through the glass either way.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
      <neo-button variant="primary" data-neo-drawer-close>OK</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

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

templ DrawerFrostGlass() {
	@neo.DrawerAttrs(neo.DrawerOpts{Side: neo.Set(neo.SideRight)}, templ.Attributes{
		"class": "drawer-frost-glass-host",
	}) {
		<neo-button { neo.DrawerTrigger()... }>Open frost glass</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Frost glass surface
				}
				@neo.DrawerDescription() {
					Two stacked blurs: the ::backdrop frosts the page
					behind the drawer at 6px (with a soft 18% black tint),
					and the drawer surface adds another 22px on top of
					its own 42% dark wash.
				}
			}
			@neo.DrawerBody() {
				<p>Holds up in both light and dark modes. The panel stays dark and the blurred page reads through the glass either way.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
				<neo-button variant="primary" { neo.DrawerClose()... }>OK</neo-button>
			}
		</dialog>
	}
}

.drawer-frost-glass-host {
	--neo-dialog-bg: rgba(15, 16, 22, 0.42);
	--neo-dialog-color: #f4f4f5;
	--neo-dialog-border-color: rgba(255, 255, 255, 0.12);
	--neo-dialog-blur: 22px;
	--neo-dialog-overlay-bg: rgba(0, 0, 0, 0.18);
	--neo-dialog-overlay-blur: 6px;
	--muted: rgba(244, 244, 245, 0.65);
}

<neo-drawer side="right" dismissible="false">
  <neo-button data-neo-drawer-trigger>Confirm subscription</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Subscribe to updates?</h2>
      <p data-neo-drawer-description>Pick one. The dialog can't be dismissed.</p>
    </header>
    <div data-neo-drawer-body>
      <p>We'll send a weekly digest of feature releases and changelog entries to your account email.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>No thanks</neo-button>
      <neo-button variant="primary" data-neo-drawer-close>Subscribe</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

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

templ DrawerNonDismissible() {
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideRight), Dismissible: neo.Set(neo.DismissibleOff)}) {
		<neo-button { neo.DrawerTrigger()... }>Confirm subscription</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Subscribe to updates?
				}
				@neo.DrawerDescription() {
					Pick one. The dialog can't be dismissed.
				}
			}
			@neo.DrawerBody() {
				<p>We'll send a weekly digest of feature releases and changelog entries to your account email.</p>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>No thanks</neo-button>
				<neo-button variant="primary" { neo.DrawerClose()... }>Subscribe</neo-button>
			}
		</dialog>
	}
}

<neo-drawer side="right">
  <neo-button data-neo-drawer-trigger>Open settings</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Settings</h2>
      <p data-neo-drawer-description>Header stays put while the body scrolls.</p>
    </header>
    <div data-neo-drawer-body>
      <p>Setting row 1: placeholder copy to make the body overflow.</p>
      <p>Setting row 2: placeholder copy to make the body overflow.</p>
      <p>Setting row 3: placeholder copy to make the body overflow.</p>
      <p>Setting row 4: placeholder copy to make the body overflow.</p>
      <p>Setting row 5: placeholder copy to make the body overflow.</p>
      <p>Setting row 6: placeholder copy to make the body overflow.</p>
      <p>Setting row 7: placeholder copy to make the body overflow.</p>
      <p>Setting row 8: placeholder copy to make the body overflow.</p>
      <p>Setting row 9: placeholder copy to make the body overflow.</p>
      <p>Setting row 10: placeholder copy to make the body overflow.</p>
      <p>Setting row 11: placeholder copy to make the body overflow.</p>
      <p>Setting row 12: placeholder copy to make the body overflow.</p>
      <p>Setting row 13: placeholder copy to make the body overflow.</p>
      <p>Setting row 14: placeholder copy to make the body overflow.</p>
      <p>Setting row 15: placeholder copy to make the body overflow.</p>
      <p>Setting row 16: placeholder copy to make the body overflow.</p>
      <p>Setting row 17: placeholder copy to make the body overflow.</p>
      <p>Setting row 18: placeholder copy to make the body overflow.</p>
      <p>Setting row 19: placeholder copy to make the body overflow.</p>
      <p>Setting row 20: placeholder copy to make the body overflow.</p>
      <p>Setting row 21: placeholder copy to make the body overflow.</p>
      <p>Setting row 22: placeholder copy to make the body overflow.</p>
      <p>Setting row 23: placeholder copy to make the body overflow.</p>
      <p>Setting row 24: placeholder copy to make the body overflow.</p>
      <p>Setting row 25: placeholder copy to make the body overflow.</p>
      <p>Setting row 26: placeholder copy to make the body overflow.</p>
      <p>Setting row 27: placeholder copy to make the body overflow.</p>
      <p>Setting row 28: placeholder copy to make the body overflow.</p>
      <p>Setting row 29: placeholder copy to make the body overflow.</p>
      <p>Setting row 30: placeholder copy to make the body overflow.</p>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Cancel</neo-button>
      <neo-button variant="primary" data-neo-drawer-close>Save</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

import (
	"github.com/romshark/morpheus/neo"
	"strconv"
)

templ DrawerScrollingBody() {
	@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideRight)}) {
		<neo-button { neo.DrawerTrigger()... }>Open settings</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Settings
				}
				@neo.DrawerDescription() {
					Header stays put while the body scrolls.
				}
			}
			@neo.DrawerBody() {
				for i := 1; i <= 30; i++ {
					<p>Setting row { strconv.Itoa(i) }: placeholder copy to make the body overflow.</p>
				}
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Cancel</neo-button>
				<neo-button variant="primary" { neo.DrawerClose()... }>Save</neo-button>
			}
		</dialog>
	}
}

<neo-drawer side="right" touch-dismiss="120px">
  <neo-button data-neo-drawer-trigger>Open drawer</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Filters</h2>
      <p data-neo-drawer-description>Swipe right past 120px to dismiss.</p>
    </header>
    <div data-neo-drawer-body>
      <neo-alert variant="info" class="drawer-touch-dismiss-alert">
        <div data-neo-alert-icon aria-hidden="true">
          <neo-icon name="info"></neo-icon>
        </div>
        <div data-neo-alert-content>
          <p data-neo-alert-description>This example only works on touch devices. Use a touchscreen or your browser's device-toolbar touch emulation.</p>
        </div>
      </neo-alert>
      <p>Try swiping the panel toward its anchored edge. Release past the 120px threshold to close, or short of it to snap back. A fast flick closes regardless of distance.</p>
      <neo-slider
        min="0"
        max="100"
        value="40"
        label="Volume"
        class="drawer-touch-dismiss-slider"
      ></neo-slider>
    </div>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Cancel</neo-button>
      <neo-button variant="primary" data-neo-drawer-close>Apply</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

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

templ DrawerTouchDismiss() {
	@neo.Drawer(neo.DrawerOpts{
		Side:                  neo.Set(neo.SideRight),
		TouchDismissThreshold: neo.Set("120px"),
	}) {
		<neo-button { neo.DrawerTrigger()... }>Open drawer</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Filters
				}
				@neo.DrawerDescription() {
					Swipe right past 120px to dismiss.
				}
			}
			@neo.DrawerBody() {
				@neo.AlertAttrs(neo.AlertOpts{Variant: neo.Set(neo.AlertVariantInfo)}, templ.Attributes{"class": "drawer-touch-dismiss-alert"}) {
					@neo.AlertIcon() {
						@neo.Icon("info")
					}
					@neo.AlertContent() {
						@neo.AlertDescription() {
							This example only works on touch
							devices. Use a touchscreen or your
							browser's device-toolbar touch
							emulation.
						}
					}
				}
				<p>
					Try swiping the panel toward
					its anchored edge. Release
					past the 120px threshold to
					close, or short of it to snap
					back. A fast flick closes
					regardless of distance.
				</p>
				<neo-slider
					min="0"
					max="100"
					value="40"
					label="Volume"
					class="drawer-touch-dismiss-slider"
				></neo-slider>
			}
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Cancel</neo-button>
				<neo-button variant="primary" { neo.DrawerClose()... }>Apply</neo-button>
			}
		</dialog>
	}
}

.drawer-touch-dismiss-alert {
	margin-bottom: 1rem;
}

.drawer-touch-dismiss-slider {
	margin-top: 1rem;
}

<neo-dialog>
  <neo-button data-neo-dialog-trigger>Account settings</neo-button>
  <dialog>
    <header data-neo-dialog-header>
      <h2 data-neo-dialog-title>Account settings</h2>
      <p data-neo-dialog-description>Open the advanced panel to manage connected devices without leaving this dialog.</p>
    </header>
    <footer data-neo-dialog-footer>
      <neo-drawer side="right">
        <neo-button variant="primary" data-neo-drawer-trigger>Connected devices…</neo-button>
        <dialog>
          <header data-neo-drawer-header>
            <h2 data-neo-drawer-title>Connected devices</h2>
            <p data-neo-drawer-description>Opened on top of the dialog; both overlays are open together.</p>
          </header>
          <div data-neo-drawer-body>
            <ul>
              <li>MacBook Pro: this device</li>
              <li>iPhone 15: last active 2h ago</li>
              <li>iPad Air: last active yesterday</li>
            </ul>
          </div>
          <footer data-neo-drawer-footer>
            <neo-button data-neo-drawer-close>Close</neo-button>
          </footer>
        </dialog>
      </neo-drawer>
      <neo-button data-neo-dialog-close>Done</neo-button>
    </footer>
  </dialog>
</neo-dialog>

package examples

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

templ DrawerFromDialog() {
	@neo.Dialog(neo.DialogOpts{}) {
		<neo-button { neo.DialogTrigger()... }>Account settings</neo-button>
		<dialog>
			@neo.DialogHeader() {
				@neo.DialogTitle() {
					Account settings
				}
				@neo.DialogDescription() {
					Open the advanced panel to manage connected devices
					without leaving this dialog.
				}
			}
			@neo.DialogFooter() {
				@neo.Drawer(neo.DrawerOpts{Side: neo.Set(neo.SideRight)}) {
					<neo-button variant="primary" { neo.DrawerTrigger()... }>
						Connected devices…
					</neo-button>
					<dialog>
						@neo.DrawerHeader() {
							@neo.DrawerTitle() {
								Connected devices
							}
							@neo.DrawerDescription() {
								Opened on top of the dialog; both overlays
								are open together.
							}
						}
						@neo.DrawerBody() {
							<ul>
								<li>MacBook Pro: this device</li>
								<li>iPhone 15: last active 2h ago</li>
								<li>iPad Air: last active yesterday</li>
							</ul>
						}
						@neo.DrawerFooter() {
							<neo-button { neo.DrawerClose()... }>Close</neo-button>
						}
					</dialog>
				}
				<neo-button { neo.DialogClose()... }>Done</neo-button>
			}
		</dialog>
	}
}

<neo-drawer
  side="right"
  data-on:neo-drawer-close="$drawer_async_ctrl.abort(); $drawer_async_ctrl = new AbortController()"
  data-on:neo-drawer-open="@post(&#39;/drawer/async-load&#39;, { requestCancellation: $drawer_async_ctrl })"
  data-signals="{drawer_async_ctrl: new AbortController(), drawer_async_html: &#39;&lt;h3&gt;Roman Scharkov&lt;/h3&gt;&lt;p class=&#34;drawer-async-meta&#34;&gt;Creator of Morpheus · &lt;code&gt;roman.scharkov@example.com&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Builds Morpheus, the server-driven web component kit this site is built with.&lt;/p&gt;&lt;h3&gt;Daniel Scharkov&lt;/h3&gt;&lt;p class=&#34;drawer-async-meta&#34;&gt;Co-maker of Morpheus · &lt;code&gt;daniel.scharkov@example.com&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Works on Morpheus with his brother Roman; the two ship it together.&lt;/p&gt;&#39;}"
>
  <neo-button data-neo-drawer-trigger>Load profile</neo-button>
  <dialog>
    <header data-neo-drawer-header>
      <h2 data-neo-drawer-title>Team members</h2>
      <p data-neo-drawer-description>Loaded fresh from the server each time you open this drawer.</p>
    </header>
    <neo-layout id="drawer-async-body" class="drawer-async-slot" column>
      <neo-layout
        class="drawer-async-skeleton"
        column
        data-neo-async-placeholder
      >
        <neo-skeleton class="drawer-async-loading-line-title"></neo-skeleton>
        <neo-skeleton class="drawer-async-loading-line-sub"></neo-skeleton>
        <neo-skeleton class="drawer-async-loading-line-90"></neo-skeleton>
        <neo-skeleton class="drawer-async-loading-line-75"></neo-skeleton>
        <neo-skeleton class="drawer-async-loading-line-80"></neo-skeleton>
        <neo-skeleton class="drawer-async-loading-line-70"></neo-skeleton>
      </neo-layout>
    </neo-layout>
    <footer data-neo-drawer-footer>
      <neo-button data-neo-drawer-close>Close</neo-button>
    </footer>
  </dialog>
</neo-drawer>

package examples

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

// drawer_async_html seeds the demo simulator's response; a real app drops
// it and lets the server return the body for /drawer/async-load.
templ DrawerAsyncLoading() {
	@neo.DrawerAttrs(neo.DrawerOpts{Side: neo.Set(neo.SideRight)}, templ.Attributes{
		"data-signals":             `{drawer_async_ctrl: new AbortController(), drawer_async_html: '<h3>Roman Scharkov</h3><p class="drawer-async-meta">Creator of Morpheus · <code>roman.scharkov@example.com</code></p><p>Builds Morpheus, the server-driven web component kit this site is built with.</p><h3>Daniel Scharkov</h3><p class="drawer-async-meta">Co-maker of Morpheus · <code>daniel.scharkov@example.com</code></p><p>Works on Morpheus with his brother Roman; the two ship it together.</p>'}`,
		"data-on:neo-drawer-open":  "@post('/drawer/async-load', { requestCancellation: $drawer_async_ctrl })",
		"data-on:neo-drawer-close": "$drawer_async_ctrl.abort(); $drawer_async_ctrl = new AbortController()",
	}) {
		<neo-button { neo.DrawerTrigger()... }>Load profile</neo-button>
		<dialog>
			@neo.DrawerHeader() {
				@neo.DrawerTitle() {
					Team members
				}
				@neo.DrawerDescription() {
					Loaded fresh from the server each time you open this drawer.
				}
			}
			<neo-layout id="drawer-async-body" class="drawer-async-slot" column>
				<neo-layout class="drawer-async-skeleton" column { neo.AsyncPlaceholder()... }>
					<neo-skeleton class="drawer-async-loading-line-title"></neo-skeleton>
					<neo-skeleton class="drawer-async-loading-line-sub"></neo-skeleton>
					<neo-skeleton class="drawer-async-loading-line-90"></neo-skeleton>
					<neo-skeleton class="drawer-async-loading-line-75"></neo-skeleton>
					<neo-skeleton class="drawer-async-loading-line-80"></neo-skeleton>
					<neo-skeleton class="drawer-async-loading-line-70"></neo-skeleton>
				</neo-layout>
			</neo-layout>
			@neo.DrawerFooter() {
				<neo-button { neo.DrawerClose()... }>Close</neo-button>
			}
		</dialog>
	}
}

.drawer-async-loading-line-title {
	width: 50%;
	height: 1.4rem;
}

.drawer-async-loading-line-sub {
	width: 30%;
	height: 1rem;
}

.drawer-async-loading-line-90 {
	width: 90%;
	height: 0.85rem;
}

.drawer-async-loading-line-75 {
	width: 75%;
	height: 0.85rem;
}

.drawer-async-loading-line-80 {
	width: 80%;
	height: 0.85rem;
}

.drawer-async-loading-line-70 {
	width: 70%;
	height: 0.85rem;
}

package examples

import (
	"github.com/romshark/morpheus/datastar"
	"github.com/romshark/morpheus/neo"
)

templ DrawerAsyncFailure() {
	@datastar.DrawerAsync(datastar.DrawerAsyncOpts{
		DrawerOpts:    neo.DrawerOpts{Side: neo.Set(neo.SideRight)},
		ID:            "drawerAsyncDemo",
		URL:           "/drawer/asyncload/",
		Title:         "Team member",
		Description:   "Loaded fresh from the server each time you open this drawer.",
		CloseLabel:    "Close",
		ExtraPostOpts: "retry: 'auto', retryInterval: 1000, retryScaler: 2, retryMaxWait: 30000, retryMaxCount: 2",
		Loading:       drawerAsyncFailureLoading(),
		Failed:        drawerAsyncFailureFailed(),
	}) {
		Load profile
	}
}

// Wrapped in [data-neo-async-placeholder] by DrawerAsync so the
// drawer restores it after close and before retry/reopen.
templ drawerAsyncFailureLoading() {
	<neo-skeleton class="drawer-async-failure-line-title"></neo-skeleton>
	<neo-skeleton class="drawer-async-failure-line-sub"></neo-skeleton>
	<neo-skeleton class="drawer-async-failure-line-90"></neo-skeleton>
	<neo-skeleton class="drawer-async-failure-line-75"></neo-skeleton>
	<neo-skeleton class="drawer-async-failure-line-80"></neo-skeleton>
	<neo-skeleton class="drawer-async-failure-line-70"></neo-skeleton>
}

// Swapped into <div id="<ID>-body"> once Datastar fires
// retries-failed. The retry button carries
// [data-neo-popover-async-retry] so DrawerAsync re-fires the
// @post action when clicked.
templ drawerAsyncFailureFailed() {
	<div class="popover-async-loading popover-async-failed" role="alert">
		@neo.Icon("triangle-alert")
		<strong>Couldn't load content.</strong>
		<neo-button { neo.PopoverAsyncRetry()... }>
			Retry
		</neo-button>
	</div>
}

.drawer-async-failure-line-title {
	width: 50%;
	height: 1.4rem;
}

.drawer-async-failure-line-sub {
	width: 30%;
	height: 1rem;
}

.drawer-async-failure-line-90 {
	width: 90%;
	height: 0.85rem;
}

.drawer-async-failure-line-75 {
	width: 75%;
	height: 0.85rem;
}

.drawer-async-failure-line-80 {
	width: 80%;
	height: 0.85rem;
}

.drawer-async-failure-line-70 {
	width: 70%;
	height: 0.85rem;
}