@defra/interactive-map 0.0.12-alpha → 0.0.15-alpha

package/src/App/components/Panel/Panel.jsx

@@ -10,17 +10,17 @@ const computePanelState = (bpConfig, triggeringElement) => {
   const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
   const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
-  const isDismissable = bpConfig.dismissible !== false
+  const isDismissible = bpConfig.dismissible !== false
   const shouldFocus = Boolean(isModal || triggeringElement)
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
-  return { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl }
+  return { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl }
 }
 
-const getPanelRole = (isDialog, isDismissable) => {
+const getPanelRole = (isDialog, isDismissible) => {
   if (isDialog) {
     return 'dialog'
   }
-  if (isDismissable) {
+  if (isDismissible) {
     return 'complementary'
   }
   return 'region'
@@ -32,19 +32,20 @@ const buildPanelClassNames = (slot, showLabel) => [
   !showLabel && 'im-c-panel--no-heading'
 ].filter(Boolean).join(' ')
 
-const buildPanelBodyClassNames = (showLabel, isDismissable) => [
+const buildPanelBodyClassNames = (showLabel, isDismissible) => [
   'im-c-panel__body',
-  !showLabel && isDismissable && 'im-c-panel__body--offset'
+  !showLabel && isDismissible && 'im-c-panel__body--offset'
 ].filter(Boolean).join(' ')
 
-const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissable, isModal, width, panelClass }) => ({
+const buildPanelProps = ({ elementId, shouldFocus, isDialog, isDismissible, isModal, width, panelClass, slot }) => ({
   id: elementId,
   'aria-labelledby': `${elementId}-label`,
   tabIndex: shouldFocus ? -1 : undefined, // nosonar
-  role: getPanelRole(isDialog, isDismissable),
+  role: getPanelRole(isDialog, isDismissible),
   'aria-modal': isDialog && isModal ? 'true' : undefined,
   style: width ? { width } : undefined,
-  className: panelClass
+  className: panelClass,
+  'data-slot': slot
 })
 
 const buildBodyProps = ({ bodyRef, panelBodyClass, isBodyScrollable, elementId }) => ({
@@ -65,7 +66,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   const bpConfig = panelConfig[breakpoint]
   const elementId = `${id}-panel-${stringToKebab(panelId)}`
 
-  const { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
+  const { isAside, isDialog, isModal, isDismissible, shouldFocus, buttonContainerEl } = computePanelState(bpConfig, props?.triggeringElement)
 
   // For persistent panels, gate modal behaviour on open state
   const isModalActive = isModal && isOpen
@@ -97,10 +98,10 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
   }, [isOpen])
 
   const panelClass = buildPanelClassNames(bpConfig.slot, bpConfig.showLabel ?? true)
-  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissable)
+  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissible)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
-  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissable, isModal, width: bpConfig.width, panelClass })
+  const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissible, isModal, width: bpConfig.width, panelClass, slot: bpConfig.slot })
   const bodyProps = buildBodyProps({ bodyRef, panelBodyClass, isBodyScrollable, elementId })
 
   return (
@@ -115,7 +116,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
         {label}
       </h2>
 
-      {isDismissable && (
+      {isDismissible && (
         <button
           aria-label={`Close ${label}`}
           className='im-c-panel__close'

package/src/App/components/Panel/Panel.module.scss

@@ -14,6 +14,7 @@
     display: flex;
     flex-direction: column;
     max-height: 100vh;
+    min-height: 0;
     min-width: var(--min-panel-width);
     pointer-events: auto;
     background-color: var(--background-color);

package/src/App/hooks/useLayoutMeasurements.js

@@ -4,6 +4,14 @@ import { useApp } from '../store/appContext.js'
 import { useMap } from '../store/mapContext.js'
 import { getSafeZoneInset } from '../../utils/getSafeZoneInset.js'
 
+const buttonHeight = (ref) => ref?.current?.offsetHeight ?? 0
+
+const topColWidth = (left, right) =>
+  left || right ? Math.max(left, right) : 0
+
+const subSlotMaxHeight = (columnHeight, siblingButtons, gap) =>
+  columnHeight - (siblingButtons ? siblingButtons + gap : 0)
+
 export function useLayoutMeasurements () {
   const { dispatch, breakpoint, layoutRefs } = useApp()
   const { mapSize, isMapReady } = useMap()
@@ -15,9 +23,12 @@ export function useLayoutMeasurements () {
     topRef,
     topLeftColRef,
     topRightColRef,
-    insetRef,
     footerRef,
-    actionsRef
+    actionsRef,
+    leftTopRef,
+    leftBottomRef,
+    rightTopRef,
+    rightBottomRef
   } = layoutRefs
 
   // -----------------------------
@@ -29,40 +40,37 @@ export function useLayoutMeasurements () {
     const top = topRef.current
     const topLeftCol = topLeftColRef.current
     const topRightCol = topRightColRef.current
-    const inset = insetRef.current
     const bottom = footerRef.current
-    const actions = actionsRef.current
 
-    if (!main || !top || !inset || !bottom) {
+    if ([main, top, bottom].some(r => !r)) {
       return
     }
 
     const root = document.documentElement
     const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
 
-    // === Inset offsets ===
-    const insetOffsetTop = topLeftCol.offsetHeight + top.offsetTop
-    const insetMaxHeight = main.offsetHeight - insetOffsetTop - top.offsetTop
-    appContainer.style.setProperty('--inset-offset-top', `${insetOffsetTop}px`)
-    appContainer.style.setProperty('--inset-max-height', `${insetMaxHeight}px`)
+    // === Top column width ===
+    appContainer.style.setProperty('--top-col-width', `${topColWidth(topLeftCol.offsetWidth, topRightCol.offsetWidth)}px`)
 
-    // === Bottom left offset ===
-    const insetBottom = inset.offsetHeight + insetOffsetTop
-    const bottomOffsetTop = Math.min(bottom.offsetTop, actions.offsetTop)
-    const bottomOffsetLeft = bottomOffsetTop - dividerGap > insetBottom ? 0 : inset.offsetLeft + inset.offsetWidth
-    appContainer.style.setProperty('--offset-left', `${bottomOffsetLeft}px`)
+    // === Left container offsets ===
+    const leftOffsetTop = topLeftCol.offsetHeight + top.offsetTop
+    const leftColumnHeight = bottom.offsetTop - leftOffsetTop - dividerGap
+    appContainer.style.setProperty('--left-offset-top', `${leftOffsetTop}px`)
+    appContainer.style.setProperty('--left-offset-bottom', `${main.offsetHeight - bottom.offsetTop + dividerGap}px`)
+    appContainer.style.setProperty('--left-top-max-height', `${leftColumnHeight}px`)
 
     // === Right container offsets ===
     const rightOffsetTop = topRightCol.offsetHeight + top.offsetTop
-    const rightOffsetBottom = main.offsetHeight - bottom.offsetTop + dividerGap
+    const rightColumnHeight = bottom.offsetTop - rightOffsetTop - dividerGap
     appContainer.style.setProperty('--right-offset-top', `${rightOffsetTop}px`)
-    appContainer.style.setProperty('--right-offset-bottom', `${rightOffsetBottom}px`)
+    appContainer.style.setProperty('--right-offset-bottom', `${main.offsetHeight - bottom.offsetTop + dividerGap}px`)
+    appContainer.style.setProperty('--right-top-max-height', `${rightColumnHeight}px`)
 
-    // === Top column width ===
-    const leftWidth = topLeftCol.offsetWidth || 0
-    const rightWidth = topRightCol.offsetWidth || 0
-    const finalWidth = leftWidth || rightWidth ? Math.max(leftWidth, rightWidth) : 0
-    appContainer.style.setProperty('--top-col-width', `${finalWidth}px`)
+    // === Sub-slot panel max-heights ===
+    appContainer.style.setProperty('--left-top-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftBottomRef), dividerGap)}px`)
+    appContainer.style.setProperty('--left-bottom-panel-max-height', `${subSlotMaxHeight(leftColumnHeight, buttonHeight(leftTopRef), dividerGap)}px`)
+    appContainer.style.setProperty('--right-top-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightBottomRef), dividerGap)}px`)
+    appContainer.style.setProperty('--right-bottom-panel-max-height', `${subSlotMaxHeight(rightColumnHeight, buttonHeight(rightTopRef), dividerGap)}px`)
   }
 
   // --------------------------------
@@ -81,7 +89,7 @@ export function useLayoutMeasurements () {
   // --------------------------------
   // 3. Recaluclate CSS vars when elements resize
   // --------------------------------
-  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef], () => {
+  useResizeObserver([bannerRef, mainRef, topRef, topLeftColRef, topRightColRef, actionsRef, footerRef, leftTopRef, leftBottomRef, rightTopRef, rightBottomRef], () => {
     requestAnimationFrame(() => {
       calculateLayout()
     })

package/src/App/hooks/useLayoutMeasurements.test.js

@@ -24,9 +24,12 @@ const refs = (o = {}) => ({
   topRef: { current: o.top === null ? null : el({ offsetTop: 10, ...o.top }) },
   topLeftColRef: { current: el({ offsetHeight: 50, offsetWidth: 200, ...o.topLeftCol }) },
   topRightColRef: { current: el({ offsetHeight: 40, offsetWidth: 180, ...o.topRightCol }) },
-  insetRef: { current: o.inset === null ? null : el({ offsetHeight: 100, offsetLeft: 20, offsetWidth: 300, ...o.inset }) },
   footerRef: { current: o.footer === null ? null : el({ offsetTop: 400, ...o.footer }) },
-  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) }
+  actionsRef: { current: el({ offsetTop: 450, ...o.actions }) },
+  leftTopRef: { current: el({ offsetHeight: 0, ...o.leftTop }) },
+  leftBottomRef: { current: el({ offsetHeight: 0, ...o.leftBottom }) },
+  rightTopRef: { current: el({ offsetHeight: 0, ...o.rightTop }) },
+  rightBottomRef: { current: el({ offsetHeight: 0, ...o.rightBottom }) }
 })
 
 const setup = (o = {}) => {
@@ -53,7 +56,7 @@ describe('useLayoutMeasurements', () => {
   })
 
   test('early return when required refs are null', () => {
-    const { layoutRefs } = setup({ refs: { main: null, top: null, inset: null, footer: null } })
+    const { layoutRefs } = setup({ refs: { main: null, top: null, footer: null } })
     renderHook(() => useLayoutMeasurements())
     expect(layoutRefs.appContainerRef.current.style.setProperty).not.toHaveBeenCalled()
   })
@@ -62,17 +65,16 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     const spy = layoutRefs.appContainerRef.current.style.setProperty
-    ;['--inset-offset-top', '--inset-max-height', '--offset-left', '--right-offset-top', '--right-offset-bottom', '--top-col-width']
+    ;['--right-offset-top', '--right-offset-bottom', '--top-col-width']
       .forEach(prop => expect(spy).toHaveBeenCalledWith(prop, expect.any(String)))
   })
 
   test.each([
-    ['inset-offset-top', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '70px'],
-    ['inset-max-height', { main: { offsetHeight: 500 }, top: { offsetTop: 20 }, topLeftCol: { offsetHeight: 50 } }, '410px'],
-    ['offset-left with overlap', { inset: { offsetHeight: 200, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 100 }, actions: { offsetTop: 120 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '180px'],
-    ['offset-left without overlap', { inset: { offsetHeight: 50, offsetLeft: 30, offsetWidth: 150 }, footer: { offsetTop: 200 }, actions: { offsetTop: 220 }, topLeftCol: { offsetHeight: 50 }, top: { offsetTop: 10 } }, '0px'],
     ['right-offset-top', { topRightCol: { offsetHeight: 80 }, top: { offsetTop: 15 } }, '95px'],
-    ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px']
+    ['right-offset-bottom', { main: { offsetHeight: 600 }, footer: { offsetTop: 500 } }, '108px'],
+    // leftColumnHeight = 400 - (50+10) - 8 = 332; rightColumnHeight = 400 - (40+10) - 8 = 342
+    ['left-top-max-height', {}, '332px'],
+    ['right-top-max-height', {}, '342px']
   ])('calculates %s correctly', (name, refOverrides, expected) => {
     const { layoutRefs } = setup({ refs: refOverrides })
     renderHook(() => useLayoutMeasurements())
@@ -80,6 +82,21 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
   })
 
+  test.each([
+    ['--left-top-panel-max-height', {}, '332px'],
+    ['--left-top-panel-max-height', { leftBottom: { offsetHeight: 50 } }, '274px'], // 332 - 50 - 8
+    ['--left-bottom-panel-max-height', {}, '332px'],
+    ['--left-bottom-panel-max-height', { leftTop: { offsetHeight: 40 } }, '284px'], // 332 - 40 - 8
+    ['--right-top-panel-max-height', {}, '342px'],
+    ['--right-top-panel-max-height', { rightBottom: { offsetHeight: 60 } }, '274px'], // 342 - 60 - 8
+    ['--right-bottom-panel-max-height', {}, '342px'],
+    ['--right-bottom-panel-max-height', { rightTop: { offsetHeight: 30 } }, '304px'] // 342 - 30 - 8
+  ])('calculates %s with sibling buttons=%o correctly', (varName, refOverrides, expected) => {
+    const { layoutRefs } = setup({ refs: refOverrides })
+    renderHook(() => useLayoutMeasurements())
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith(varName, expected)
+  })
+
   test.each([
     [{ offsetWidth: 250 }, { offsetWidth: 200 }, '250px'],
     [{ offsetWidth: 0 }, { offsetWidth: 200 }, '200px'],
@@ -90,6 +107,18 @@ describe('useLayoutMeasurements', () => {
     expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--top-col-width', expected)
   })
 
+  test('uses 0 when sub-slot refs have null current', () => {
+    const { layoutRefs } = setup()
+    layoutRefs.leftTopRef.current = null
+    layoutRefs.leftBottomRef.current = null
+    layoutRefs.rightTopRef.current = null
+    layoutRefs.rightBottomRef.current = null
+    renderHook(() => useLayoutMeasurements())
+    // With all sub-slot refs null, buttons = 0 ?? 0 = 0, so max-heights equal full column height
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--left-top-panel-max-height', '332px')
+    expect(layoutRefs.appContainerRef.current.style.setProperty).toHaveBeenCalledWith('--right-bottom-panel-max-height', '342px')
+  })
+
   test('dispatches safe zone inset', () => {
     const { dispatch, layoutRefs } = setup()
     getSafeZoneInset.mockReturnValue({ top: 10, right: 5, bottom: 15, left: 5 })
@@ -114,7 +143,7 @@ describe('useLayoutMeasurements', () => {
     const { layoutRefs } = setup()
     renderHook(() => useLayoutMeasurements())
     expect(useResizeObserver).toHaveBeenCalledWith(
-      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef],
+      [layoutRefs.bannerRef, layoutRefs.mainRef, layoutRefs.topRef, layoutRefs.topLeftColRef, layoutRefs.topRightColRef, layoutRefs.actionsRef, layoutRefs.footerRef, layoutRefs.leftTopRef, layoutRefs.leftBottomRef, layoutRefs.rightTopRef, layoutRefs.rightBottomRef],
       expect.any(Function)
     )
     layoutRefs.appContainerRef.current.style.setProperty.mockClear()

package/src/App/hooks/useModalPanelBehaviour.js

@@ -2,6 +2,65 @@ import { useEffect } from 'react'
 import { useResizeObserver } from './useResizeObserver.js'
 import { constrainKeyboardFocus } from '../../utils/constrainKeyboardFocus.js'
 import { toggleInertElements } from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
+
+// Left/right slots reuse the layout CSS vars set by useLayoutMeasurements — no DOM measurement needed.
+// CSS var references resolve correctly at the panel element (inside .im-o-app) even though
+// --modal-inset is set on :root.
+const SLOT_MODAL_VARS = {
+  'left-top': { inset: 'var(--left-offset-top) auto auto var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'left-bottom': { inset: 'auto auto var(--left-offset-bottom) var(--primary-gap)', maxHeight: 'var(--left-top-max-height)' },
+  'right-top': { inset: 'var(--right-offset-top) var(--primary-gap) auto auto', maxHeight: 'var(--right-top-max-height)' },
+  'right-bottom': { inset: 'auto var(--primary-gap) var(--right-offset-bottom) auto', maxHeight: 'var(--right-top-max-height)' }
+}
+
+const MODAL_INSET = '--modal-inset'
+const MODAL_MAX_HEIGHT = '--modal-max-height'
+
+const setButtonCSSVar = (effectiveContainer, mainRef, dividerGap) => {
+  const root = document.documentElement
+  const mainRect = mainRef.current.getBoundingClientRect()
+  const buttonRect = effectiveContainer.getBoundingClientRect()
+  const isBottomSlot = !!effectiveContainer.closest('.im-o-app__left-bottom, .im-o-app__right-bottom')
+  const isLeftSlot = !!effectiveContainer.closest('.im-o-app__left-top, .im-o-app__left-bottom')
+
+  const insetTop = isBottomSlot ? 'auto' : `${Math.round(buttonRect.top - mainRect.top)}px`
+  const insetBottom = isBottomSlot ? `${Math.round(mainRect.bottom - buttonRect.bottom)}px` : 'auto'
+  const insetRight = isLeftSlot ? 'auto' : `${Math.round(mainRect.right - buttonRect.left + dividerGap)}px`
+  const insetLeft = isLeftSlot ? `${Math.round(buttonRect.right - mainRect.left + dividerGap)}px` : 'auto'
+  const anchor = isBottomSlot ? Math.round(mainRect.bottom - buttonRect.bottom) : Math.round(buttonRect.top - mainRect.top)
+
+  root.style.setProperty(MODAL_INSET, `${insetTop} ${insetRight} ${insetBottom} ${insetLeft}`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - anchor - dividerGap}px`)
+}
+
+const setSlotCSSVar = (slot, layoutRefs, primaryMargin) => {
+  const root = document.documentElement
+
+  // Left/right slots: delegate entirely to existing layout CSS vars
+  const mapped = SLOT_MODAL_VARS[slot]
+  if (mapped) {
+    root.style.setProperty(MODAL_INSET, mapped.inset)
+    root.style.setProperty(MODAL_MAX_HEIGHT, mapped.maxHeight)
+    return
+  }
+
+  // Other slots (e.g. inset): measure position from DOM
+  const refKey = `${slot[0].toLowerCase() + slot.slice(1)}Ref` // single-part slots only
+  const slotRef = layoutRefs[refKey]?.current
+  const mainContainer = layoutRefs.mainRef?.current
+  if (!slotRef || !mainContainer) {
+    return
+  }
+
+  const slotRect = slotRef.getBoundingClientRect()
+  const mainRect = mainContainer.getBoundingClientRect()
+  const relLeft = slotRect.left - mainRect.left
+  const relTop = slotRect.top - mainRect.top
+
+  root.style.setProperty(MODAL_INSET, `${relTop}px auto auto ${relLeft}px`)
+  root.style.setProperty(MODAL_MAX_HEIGHT, `${mainRect.height - relTop - primaryMargin}px`)
+}
 
 const useModalKeyHandler = (panelRef, isModal, handleClose) => {
   useEffect(() => {
@@ -68,38 +127,43 @@ export function useModalPanelBehaviour ({
   buttonContainerEl,
   handleClose
 }) {
-  useModalKeyHandler(panelRef, isModal, handleClose)
+  const { layoutRefs } = useApp()
 
-  // === Set absolute offset positions and recalculate on mainRef resize === //
-  const root = document.documentElement
-  const dividerGap = Number.parseInt(getComputedStyle(root).getPropertyValue('--divider-gap'), 10)
+  useModalKeyHandler(panelRef, isModal, handleClose)
 
+  // === Set --modal-inset and --modal-max-height, recalculate on mainRef resize === //
   useResizeObserver([mainRef], () => {
     if (!isModal || !mainRef.current) {
       return
     }
 
-    // buttonContainerEl is only defined for button-slot panels (bpConfig.slot ends with '-button').
-    // Skip positioning for all other modal types.
-    if (buttonContainerEl === undefined) {
-      return
-    }
-
-    // Dynamically query the current controlling button via aria-controls to handle the case
-    // where the button has remounted after a breakpoint change (stale triggeringElement).
-    const panelElId = panelRef.current?.id
-    const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
-    const effectiveContainer = currentButtonEl?.parentElement ?? (buttonContainerEl?.isConnected ? buttonContainerEl : null)
+    const root = document.documentElement
+    const styles = getComputedStyle(root)
+    const dividerGap = Number.parseInt(styles.getPropertyValue('--divider-gap'), 10)
+    const primaryMargin = Number.parseInt(styles.getPropertyValue('--primary-gap'), 10)
+    const slot = panelRef.current.dataset.slot
+
+    // Button-adjacent panels: position next to the controlling button.
+    // Use slot name (not buttonContainerEl) as the gate — buttonContainerEl may be undefined
+    // when there is no triggeringElement (e.g. panel opened programmatically).
+    // Dynamically query via aria-controls to handle stale triggeringElement after breakpoint changes.
+    if (slot?.endsWith('-button')) {
+      const panelElId = panelRef.current?.id
+      const currentButtonEl = panelElId ? document.querySelector(`[aria-controls="${panelElId}"]`) : null
+      const effectiveContainer = currentButtonEl?.parentElement ??
+        (buttonContainerEl?.isConnected ? buttonContainerEl : null) ??
+        document.querySelector(`[data-button-slot="${slot}"]`)
+
+      if (!effectiveContainer) {
+        return
+      }
 
-    if (!effectiveContainer) {
+      setButtonCSSVar(effectiveContainer, mainRef, dividerGap)
       return
     }
 
-    const mainRect = mainRef.current.getBoundingClientRect()
-    const buttonRect = effectiveContainer.getBoundingClientRect()
-    const offsetTop = buttonRect.top - mainRect.top
-    const offsetRight = Math.round(mainRect.right - buttonRect.right + buttonRect.width + dividerGap)
-    root.style.setProperty('--modal-inset', `${offsetTop}px ${offsetRight}px auto auto`)
+    // Slot-based panels: derive position from the slot container element
+    setSlotCSSVar(slot, layoutRefs, primaryMargin)
   })
 
   // === Click on modal backdrop to close === //

package/src/App/hooks/useModalPanelBehaviour.test.js

@@ -4,10 +4,17 @@ import { useModalPanelBehaviour } from './useModalPanelBehaviour.js'
 import * as useResizeObserverModule from './useResizeObserver.js'
 import * as constrainFocusModule from '../../utils/constrainKeyboardFocus.js'
 import * as toggleInertModule from '../../utils/toggleInertElements.js'
+import { useApp } from '../store/appContext.js'
 
 jest.mock('./useResizeObserver.js')
 jest.mock('../../utils/constrainKeyboardFocus.js')
 jest.mock('../../utils/toggleInertElements.js')
+jest.mock('../store/appContext.js')
+
+const MODAL_INSET = '--modal-inset'
+const MODAL_MAX_HEIGHT = '--modal-max-height'
+const PANEL_ID = 'modal-panel-id'
+const ARIA_CONTROLS = 'aria-controls'
 
 describe('useModalPanelBehaviour', () => {
   let refs, elements, handleClose
@@ -17,8 +24,9 @@ describe('useModalPanelBehaviour', () => {
       main: { current: document.createElement('div') },
       panel: { current: document.createElement('div') }
     }
-    // Give panel an ID for aria-controls tests
-    refs.panel.current.id = 'modal-panel-id'
+    // Give panel an ID for aria-controls tests and a slot for setSlotCSSVar
+    refs.panel.current.id = PANEL_ID
+    refs.panel.current.dataset.slot = 'inset'
 
     elements = {
       buttonContainer: document.createElement('div'),
@@ -30,7 +38,9 @@ describe('useModalPanelBehaviour', () => {
 
     handleClose = jest.fn()
     jest.clearAllMocks()
-    document.documentElement.style.setProperty('--modal-inset', '')
+    document.documentElement.style.setProperty(MODAL_INSET, '')
+    document.documentElement.style.setProperty(MODAL_MAX_HEIGHT, '')
+    useApp.mockReturnValue({ layoutRefs: {} })
   })
 
   afterEach(() => {
@@ -72,10 +82,13 @@ describe('useModalPanelBehaviour', () => {
     )
   })
 
-  describe('positioning (--modal-inset)', () => {
+  describe('positioning (--modal-inset, --modal-max-height)', () => {
+    const buttonSlot = 'map-styles-button'
+
     beforeEach(() => {
       // Force ResizeObserver to run the callback immediately
       useResizeObserverModule.useResizeObserver.mockImplementation((_, cb) => cb())
+      jest.spyOn(globalThis, 'getComputedStyle').mockReturnValue({ getPropertyValue: () => '8' })
 
       Object.defineProperty(refs.main.current, 'getBoundingClientRect', {
         value: () => ({ top: 0, right: 100, bottom: 50, left: 0, width: 100, height: 50 }),
@@ -87,36 +100,121 @@ describe('useModalPanelBehaviour', () => {
       })
     })
 
-    it('hits the buttonContainerEl === undefined branch', () => {
-      refs.main.current = document.createElement('div') // mainRef must exist
+    afterEach(() => {
+      jest.restoreAllMocks()
+    })
+
+    it('sets --modal-inset via SLOT_MODAL_VARS for top slot', () => {
+      refs.panel.current.dataset.slot = 'left-top'
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET))
+        .toBe('var(--left-offset-top) auto auto var(--primary-gap)')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT))
+        .toBe('var(--left-top-max-height)')
+    })
+
+    it('sets --modal-inset via SLOT_MODAL_VARS for bottom slot', () => {
+      refs.panel.current.dataset.slot = 'left-bottom'
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET))
+        .toBe('auto auto var(--left-offset-bottom) var(--primary-gap)')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT))
+        .toBe('var(--left-top-max-height)')
+    })
+
+    it('sets --modal-inset and --modal-max-height from slot container when no buttonContainerEl', () => {
+      const insetEl = document.createElement('div')
+      Object.defineProperty(insetEl, 'getBoundingClientRect', {
+        value: () => ({ top: 60, left: 8, right: 200, bottom: 200 }),
+        configurable: true
+      })
+      Object.defineProperty(insetEl, 'offsetWidth', { value: 192, configurable: true })
+      useApp.mockReturnValue({ layoutRefs: { insetRef: { current: insetEl }, mainRef: refs.main } })
+
       render(<TestComponent />)
 
-      // Manually trigger ResizeObserver callback (if mocked)
-      const callback = useResizeObserverModule.useResizeObserver.mock.calls[0][1]
-      callback()
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('60px auto auto 8px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
+    })
 
-      // Expect CSS variable not set, just to assert callback ran
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toBe('')
+    it('leaves --modal-inset unset when slot ref cannot be resolved', () => {
+      render(<TestComponent />)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
     })
 
-    it('updates --modal-inset via aria-controls when buttonContainerEl is stale', () => {
+    it('updates --modal-inset and --modal-max-height via aria-controls when buttonContainerEl is stale', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+
       const button = document.createElement('button')
-      button.setAttribute('aria-controls', 'modal-panel-id')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
       elements.buttonContainer.appendChild(button)
       document.body.appendChild(elements.buttonContainer)
 
       const staleEl = document.createElement('div') // detached
       render(<TestComponent buttonContainerEl={staleEl} />)
 
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
+    })
+
+    it('uses data-button-slot fallback when no aria-controls button and no buttonContainerEl', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      elements.buttonContainer.dataset.buttonSlot = buttonSlot
+      document.body.appendChild(elements.buttonContainer)
+
+      render(<TestComponent buttonContainerEl={undefined} />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+      expect(document.documentElement.style.getPropertyValue(MODAL_MAX_HEIGHT)).toContain('px')
+    })
+
+    it('uses connected buttonContainerEl when panel has no ID', () => {
+      refs.panel.current.id = '' // falsy panelElId → currentButtonEl = null (line 152 false branch)
+      refs.panel.current.dataset.slot = buttonSlot
+      document.body.appendChild(elements.buttonContainer) // isConnected = true (line 154 true branch)
+
+      render(<TestComponent buttonContainerEl={elements.buttonContainer} />)
+
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
     })
 
     it('skips update when effectiveContainer cannot be resolved', () => {
+      refs.panel.current.dataset.slot = buttonSlot
       render(<TestComponent buttonContainerEl={null} />)
-      const inset = document.documentElement.style.getPropertyValue('--modal-inset')
-      expect(inset).toBe('')
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('')
+    })
+
+    it('anchors to bottom when button is in a bottom sub-slot', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      const bottomSlot = document.createElement('div')
+      bottomSlot.className = 'im-o-app__right-bottom'
+      bottomSlot.appendChild(elements.buttonContainer)
+      document.body.appendChild(bottomSlot)
+
+      render(<TestComponent />)
+
+      // Bottom slot: insetTop='auto', insetBottom = mainRect.bottom - buttonRect.bottom = 50 - 40 = 10px
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toMatch(/^auto/)
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toContain('10px')
+    })
+
+    it('uses left inset when button is in a left sub-slot', () => {
+      refs.panel.current.dataset.slot = buttonSlot
+      const button = document.createElement('button')
+      button.setAttribute(ARIA_CONTROLS, PANEL_ID)
+      elements.buttonContainer.appendChild(button)
+      const leftSlot = document.createElement('div')
+      leftSlot.className = 'im-o-app__left-top'
+      leftSlot.appendChild(elements.buttonContainer)
+      document.body.appendChild(leftSlot)
+
+      render(<TestComponent />)
+
+      // Left slot: insetTop = buttonRect.top - mainRect.top = 10, insetLeft = buttonRect.right - mainRect.left + dividerGap = 80 + 8 = 88
+      expect(document.documentElement.style.getPropertyValue(MODAL_INSET)).toBe('10px auto auto 88px')
     })
   })
 
@@ -175,6 +273,16 @@ describe('useModalPanelBehaviour', () => {
       expect(handleClose).toHaveBeenCalled()
     })
 
+    it('does not close when backdrop is outside rootEl', () => {
+      const externalBackdrop = document.createElement('div')
+      externalBackdrop.className = 'im-o-app__modal-backdrop'
+      document.body.appendChild(externalBackdrop)
+
+      render(<TestComponent />)
+      fireEvent.click(externalBackdrop)
+      expect(handleClose).not.toHaveBeenCalled()
+    })
+
     it('toggles inert elements on mount and cleanup', () => {
       const { unmount } = render(<TestComponent />)
       expect(toggleInertModule.toggleInertElements).toHaveBeenCalledWith(