Koala logo Design
Koala logo Design
No matches for “”
↑↓ navigate ↵ open Esc close
PrimitivesContain & overlayOverlay — modal & drawer

Overlay — modal & drawer

Centered overlay dialog — scrim, focus-trap, ESC-to-close, click-outside-to-close. Step modal, confirm modal and the drawer dock are siblings on the same overlay/modal layer.

<koala-modal>

Modal

title="Edit branch"

Confirm modal

variant="Danger"
variant="Primary"

Step modal

two-screen flow

Panel dock

koalaPanelDock()
@* Paging chevrons are independent of the bottom footer bar below (that one's icon-jump row + "Close all" is what footerless actually hides — Portal's own right-rail launcher icons make it redundant there). Prev/ next stays gated on hasOverflow() alone: it's the only way to scroll the window over when more panels are open than fit, footerless or not — a footerless dock hiding these too was a bug (Andy: "where did the left/ right arrows go to nav between the drawers?"). *@ @* Dimmed until hovered/focused — at full opacity these solid circles sat on top of whatever panel content happened to be at vertical-centre (Andy: "the left/right icons sometimes cover content... fade them in and out when necessary?"). Recede to a faint hint by default, resolve to solid on hover/focus so they're still easy to find and use. *@

API

koala-modal flag string (Alpine boolean)
koala-modal title string
koala-modal size SmallMediumLargeExtraLargeExtraExtraLarge
koala-modal height AutoFillTall
koala-modal teleport bool
koala-modal dismissable bool
koala-modal show-close bool
koala-modal aria-label string
koala-confirm-modal variant DangerPrimary
koala-confirm-modal form-handler string
koala-confirm-modal confirm-text string
koala-confirm-modal cancel-text string
koala-confirm-modal reason-field-name string
koala-confirm-modal choice-field-name string
koala-step-modal flag string (Alpine boolean)
koala-step-modal aria-label string
koala-step-modal dismissable bool
koala-step-modal teleport bool
koala-drawer flag string (Alpine boolean)
koala-drawer width CSS length
koala-drawer-header close-action Alpine expression
koala-drawer-header show-close bool
koalaPanelDock columnWidth number
koalaPanelDock pageMinWidth number
koalaPanelDock maxAutoColumns number
koalaPanelDock iconRegistryId string
koalaPanelDock iconKinds string[]
koalaPanelDock state object (optional openPanels + activePanelKey)
koalaPanelDock panelbar bool
koalaPanelDock panels object[] (available panel catalogue)
koalaPanelDock togglePanel method (kind, id)
koalaPanelDock focusPanel method (kind, id)
koalaPanelDock isPanelOpen method (kind, id)