Overlay

.wr-overlay-container .cdk-overlay-pane {
  font-size: var(--wr-text-sm);
}

A z-index does not reach an overlay: CDK renders overlays in the top layer.
To open your own panel in ngwr's container, inject WR_OVERLAY from ngwr/overlay, not CDK's Overlay.

The element with cdkFocusInitial. A plain attribute, nothing to import.
The first tabbable element.
Nothing: focus stays put, and the trap still holds.

In <wr-drawer> the first tabbable is the ✕; set cdkFocusInitial to choose another.

<h2 wrDialogTitle>Delete project</h2>
<p>This cannot be undone.</p>

<footer>
  <button wr-btn type="button" cdkFocusInitial [wrDialogClose]="false">Cancel</button>
  <button wr-btn type="button" color="danger" [wrDialogClose]="true">Delete</button>
</footer>

Closed by	Turn off with
Escape	`closeOnEscape: false`
The built-in ✕	`closable: false`
Backdrop click	`closeOnBackdropClick: false`
A route change	`closeOnNavigation: false`
`[wrDialogClose]` / `ref.close(result)`	—

A dismissal resolves awaitClose() with undefined, like close(); close with a value to tell them apart.

Angular CDK	`overlay`
Used by	Cascader, Color Picker, Command Palette, Context Menu, Date Picker, Dialog, Drawer, Dropdown, Lightbox, Mention, Popconfirm, Popover, Select, Toast, WrTour, Tree, Window

Scope styles to ngwr overlays

Focus, on the way in

Focus, on the way out

Dependencies

See also