Morpheus: Web Components UI Kit

Boundary#

Component <neo-boundary> is a logical scoping region for overlays. An overlay inside it (Popover, Menu, Select, Combobox, or Text input suggestions) treats the boundary as its local document and viewport. Its scope attribute is a space-separated token list that defaults to "dismiss positioning". By default, outside clicks and focus do not dismiss the overlay, and its panel clamps to the region instead of the viewport. Setting scope replaces that default. Add a token to opt into a scope or drop one to turn it off. The scroll token lets independent scrollers outside the region move without closing the overlay; stacking layers the region's overlays inside it rather than the document root. Both are off by default. The element is layout-neutral (display: contents) until stacking gives it a box, and never clips a panel. Escape and trigger toggles always close an overlay.

Reference#

Attributes #

Name	Type	Default	Description
`scope`	`"dismiss" \| "positioning" \| "scroll" \| "stacking" (space-separated)`	`"dismiss positioning"`	Space-separated list of the scopes this region applies. Setting it replaces the default (`dismiss positioning`) entirely. List every scope you want; omit a token to fall back to the document / viewport default for it, and `scope=""` scopes nothing. With `dismiss`, a pointer or focus event outside the boundary does not close an overlay inside it (only events inside the boundary but outside the overlay do). With `positioning`, overlay panels clamp and flip against this region's box (the union of the boundary's laid-out descendant rects) instead of the viewport. With `scroll`, an independent scroll container outside this region can move without closing an embedded overlay; a scroll inside the region, or on an ancestor scroller that carries the region, still dismisses. With `stacking`, the region establishes a local stacking context (`isolation: isolate`) so its overlays layer inside it, not the document root; this is the one scope that drops `display: contents` for a box.

Slots #

Name Description

default The content the boundary scopes. Each overlay inside reads its nearest <neo-boundary> ancestor (via closest("neo-boundary")) and obeys that boundary's scopes only. Rules are not inherited. A closer boundary that turns a scope off falls back to the document or viewport default for that scope, not to an outer boundary. Scoping is purely logical (composed-path containment) and non-visual. A fixed or top-layer panel still counts as inside through its host even though it paints outside the boundary's box.

Name	Description
default	The content the boundary scopes. Each overlay inside reads its nearest `<neo-boundary>` ancestor (via `closest("neo-boundary")`) and obeys that boundary's scopes only. Rules are not inherited. A closer boundary that turns a scope off falls back to the document or viewport default for that scope, not to an outer boundary. Scoping is purely logical (composed-path containment) and non-visual. A fixed or top-layer panel still counts as inside through its host even though it paints outside the boundary's box.

Examples#

Scoped dismiss#

2 regions, each a <neo-boundary>. Open an overlay in one, then click or open something in the other. The first stays open because each boundary scopes dismiss to itself. Without boundaries, the second interaction would close the first.

Project A

Actions

Rename, archive, or delete.

Project B

Actions

Rename, archive, or delete.

Hide

HTML

Templ

CSS

<neo-layout row wrap align-items="stretch" gap="lg">
  <neo-boundary>
    <div
      neo-flex-grow="1"
      neo-flex-basis="0"
      class="boundary-scoped-dismiss-panel"
    >
      <strong>Project A</strong>
      <neo-popover
        placement="bottom-start"
        follow-scroll="until-trigger-invisible"
      >
        <neo-button data-neo-popover-trigger>Actions</neo-button>
        <div data-neo-popover-content>
          <h3 class="boundary-scoped-dismiss-heading">Actions</h3>
          <p class="boundary-scoped-dismiss-note">Rename, archive, or delete.</p>
        </div>
      </neo-popover>
      <neo-select
        placeholder="Pick a status"
        aria-label="Status (Project A)"
        follow-scroll="until-trigger-invisible"
        class="boundary-scoped-dismiss-field"
      >
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="todo"
          data-neo-value="todo"
        >To do</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="doing"
          data-neo-value="doing"
        >In progress</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="done"
          data-neo-value="done"
        >Done</neo-option>
      </neo-select>
      <neo-combobox
        placeholder="Pick an assignee"
        search-placeholder="Search…"
        aria-label="Assignee (Project A)"
        follow-scroll="until-trigger-invisible"
        class="boundary-scoped-dismiss-field"
      >
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="alice"
          data-neo-value="alice"
        >Alice Larsson</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="diego"
          data-neo-value="diego"
        >Diego Vega</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="evelyn"
          data-neo-value="evelyn"
        >Evelyn Kone</neo-option>
      </neo-combobox>
    </div>
  </neo-boundary>
  <neo-boundary>
    <div
      neo-flex-grow="1"
      neo-flex-basis="0"
      class="boundary-scoped-dismiss-panel"
    >
      <strong>Project B</strong>
      <neo-popover
        placement="bottom-start"
        follow-scroll="until-trigger-invisible"
      >
        <neo-button data-neo-popover-trigger>Actions</neo-button>
        <div data-neo-popover-content>
          <h3 class="boundary-scoped-dismiss-heading">Actions</h3>
          <p class="boundary-scoped-dismiss-note">Rename, archive, or delete.</p>
        </div>
      </neo-popover>
      <neo-select
        placeholder="Pick a status"
        aria-label="Status (Project B)"
        follow-scroll="until-trigger-invisible"
        class="boundary-scoped-dismiss-field"
      >
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="backlog"
          data-neo-value="backlog"
        >Backlog</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="active"
          data-neo-value="active"
        >Active</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="shipped"
          data-neo-value="shipped"
        >Shipped</neo-option>
      </neo-select>
      <neo-combobox
        placeholder="Pick an assignee"
        search-placeholder="Search…"
        aria-label="Assignee (Project B)"
        follow-scroll="until-trigger-invisible"
        class="boundary-scoped-dismiss-field"
      >
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="samira"
          data-neo-value="samira"
        >Samira Khalil</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="theo"
          data-neo-value="theo"
        >Theo Becker</neo-option>
        <neo-option
          role="option"
          tabindex="-1"
          aria-selected="false"
          value="jan"
          data-neo-value="jan"
        >Jan O'Sullivan</neo-option>
      </neo-combobox>
    </div>
  </neo-boundary>
</neo-layout>

package examples

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

templ BoundaryScopedDismiss() {
	@neo.Layout(neo.LayoutOpts{
		Direction:  neo.Set(neo.Row),
		Wrap:       neo.Set(neo.Wrap),
		Gap:        neo.Set(neo.GapLg),
		AlignItems: neo.Set(neo.AlignItemsStretch),
	}) {
		@neo.Boundary(neo.BoundaryOpts{}) {
			<div neo-flex-grow="1" neo-flex-basis="0" class="boundary-scoped-dismiss-panel">
				<strong>Project A</strong>
				@neo.Popover(neo.PopoverOpts{
					Placement:    neo.Set(neo.PlacementBottomStart),
					FollowScroll: neo.Set(neo.PopoverFollowScrollUntilTriggerInvisible),
				}) {
					<neo-button { neo.PopoverTrigger()... }>Actions</neo-button>
					<div { neo.PopoverContent()... }>
						<h3 class="boundary-scoped-dismiss-heading">Actions</h3>
						<p class="boundary-scoped-dismiss-note">Rename, archive, or delete.</p>
					</div>
				}
				@neo.SelectAttrs(neo.SelectOpts{
					AriaLabel:   neo.Set("Status (Project A)"),
					Placeholder: neo.Set("Pick a status"),
				}, templ.Attributes{"class": "boundary-scoped-dismiss-field"}) {
					@neo.Option(neo.OptionOpts{Value: neo.Set("todo")}) {
						To do
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("doing")}) {
						In progress
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("done")}) {
						Done
					}
				}
				@neo.ComboboxAttrs(neo.ComboboxOpts{
					AriaLabel:         neo.Set("Assignee (Project A)"),
					Placeholder:       neo.Set("Pick an assignee"),
					SearchPlaceholder: neo.Set("Search…"),
				}, templ.Attributes{"class": "boundary-scoped-dismiss-field"}) {
					@neo.Option(neo.OptionOpts{Value: neo.Set("alice")}) {
						Alice Larsson
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("diego")}) {
						Diego Vega
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("evelyn")}) {
						Evelyn Kone
					}
				}
			</div>
		}
		@neo.Boundary(neo.BoundaryOpts{}) {
			<div neo-flex-grow="1" neo-flex-basis="0" class="boundary-scoped-dismiss-panel">
				<strong>Project B</strong>
				@neo.Popover(neo.PopoverOpts{
					Placement:    neo.Set(neo.PlacementBottomStart),
					FollowScroll: neo.Set(neo.PopoverFollowScrollUntilTriggerInvisible),
				}) {
					<neo-button { neo.PopoverTrigger()... }>Actions</neo-button>
					<div { neo.PopoverContent()... }>
						<h3 class="boundary-scoped-dismiss-heading">Actions</h3>
						<p class="boundary-scoped-dismiss-note">Rename, archive, or delete.</p>
					</div>
				}
				@neo.SelectAttrs(neo.SelectOpts{
					AriaLabel:   neo.Set("Status (Project B)"),
					Placeholder: neo.Set("Pick a status"),
				}, templ.Attributes{"class": "boundary-scoped-dismiss-field"}) {
					@neo.Option(neo.OptionOpts{Value: neo.Set("backlog")}) {
						Backlog
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("active")}) {
						Active
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("shipped")}) {
						Shipped
					}
				}
				@neo.ComboboxAttrs(neo.ComboboxOpts{
					AriaLabel:         neo.Set("Assignee (Project B)"),
					Placeholder:       neo.Set("Pick an assignee"),
					SearchPlaceholder: neo.Set("Search…"),
				}, templ.Attributes{"class": "boundary-scoped-dismiss-field"}) {
					@neo.Option(neo.OptionOpts{Value: neo.Set("samira")}) {
						Samira Khalil
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("theo")}) {
						Theo Becker
					}
					@neo.Option(neo.OptionOpts{Value: neo.Set("jan")}) {
						Jan O'Sullivan
					}
				}
			</div>
		}
	}
}

Positioning containment#

Open the popover. The panel clamps and flips against the dashed region instead of the viewport. The trigger sits at the region's bottom edge, and the panel flips above it to stay inside. Set scope="dismiss" to clamp to the viewport instead.

Filters

The panel is clamped to the dashed region instead of the viewport. It flips above the trigger to stay inside. Drop the positioning token from scope to clamp to the viewport instead.

Hide

HTML

Templ

CSS

Scroll scope#

The Account menu is an embedded widget inside a scrollable panel; its boundary adds the scroll token (scope="dismiss positioning scroll"). Open the menu, then scroll the panel around it. Because that scroller carries the boundary itself, the popover closes instead of floating through the container. Independent scrollers outside the boundary can move without dismissing it.

Diego Vega commented on Onboarding flow.

Evelyn Kone merged Release 2.4.

Samira Khalil opened Billing audit.

Theo Becker closed Flaky e2e test.

Jan O'Sullivan updated Design tokens.

Alice Larsson archived Q3 planning.

Maya Lindqvist pinned the Roadmap.

Hide

HTML

Templ

CSS

Stacking scope#

Stacking scope is opt-in. The right widget adds the stacking token to establish a local stacking context, which layers its overlays inside the region instead of the document root. Both widgets open the same popover (global z-index: 1000) across a host overlay at z-index: 100.

Left (default): no stacking context. The panel outranks the host overlay and paints over it.
Right (stacking): the panel is confined to the region's context, and the host overlay paints over it instead.

Open both popovers to compare. Enabling stacking gives the region a box (isolation: isolate), the one scope that drops display: contents.

Host app overlay · z-index 100

Default

Account

Signed in as Alice Larsson.

Plan: Team · 4 seats

No stacking context. The panel's z-index 1000 paints over the host overlay.

stacking

Account

Signed in as Alice Larsson.

Plan: Team · 4 seats

The host overlay paints over the panel because a local stacking context confines it.

Hide

HTML

Templ

CSS

Nested boundaries#

The closest boundary defines the rules; they are not inherited. The inner boundary uses scope="positioning" (no dismiss). Its popover closes on any outside click (document scope), even though the outer boundary enables dismiss scoping. A closer boundary that turns a scope off falls back to the document or viewport default, never to the outer boundary. Open the popover, then click outside it to see it close.

Outer boundary: default scope.

The closest boundary defines the rules. Dismiss is off here. A click anywhere outside this popover closes it, even though the outer boundary enables dismiss scoping. Rules are not inherited.

Inner boundary: scope="positioning" (no dismiss).

Hide

HTML

Templ

CSS

A wider screen, please

Boundary#

Reference#

Attributes #

Slots #

Examples#

Scoped dismiss#

Actions

Actions

Positioning containment#

Filters

Scroll scope#

Account

Stacking scope#

Account

Account

Nested boundaries#

Settings

Theme

Accessibility

Playgrounds

Server Simulator