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

package/providers/maplibre/src/index.test.js

@@ -9,10 +9,18 @@ describe('createMapLibreProvider', () => {
 
   beforeEach(() => {
     getWebGL.mockReturnValue({ isEnabled: true, error: null })
+
+    // Ensure modern support by default
+    String.prototype.replaceAll = jest.fn()
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
   })
 
-  test('checkDeviceCapabilities: WebGL enabled, no IE → isSupported true, no error', () => {
+  test('checkDeviceCapabilities: WebGL enabled, modern browser, no IE → isSupported true', () => {
     const result = createMapLibreProvider().checkDeviceCapabilities()
+
     expect(result.isSupported).toBe(true)
     expect(result.error).toBeFalsy()
     expect(getWebGL).toHaveBeenCalledWith(['webgl2', 'webgl1'])
@@ -20,41 +28,52 @@ describe('createMapLibreProvider', () => {
 
   test('checkDeviceCapabilities: WebGL disabled → isSupported false, returns webGL error', () => {
     getWebGL.mockReturnValue({ isEnabled: false, error: 'WebGL not supported' })
+
     const result = createMapLibreProvider().checkDeviceCapabilities()
+
     expect(result.isSupported).toBe(false)
     expect(result.error).toBe('WebGL not supported')
   })
 
   test('checkDeviceCapabilities: IE detected → error is IE message', () => {
-    Object.defineProperty(document, 'documentMode', { get: () => 11, configurable: true })
+    Object.defineProperty(document, 'documentMode', {
+      get: () => 11,
+      configurable: true
+    })
+
     try {
       const result = createMapLibreProvider().checkDeviceCapabilities()
       expect(result.error).toBe('Internet Explorer is not supported')
     } finally {
-      Object.defineProperty(document, 'documentMode', { get: () => undefined, configurable: true })
+      Object.defineProperty(document, 'documentMode', {
+        get: () => undefined,
+        configurable: true
+      })
     }
   })
 
-  test('supportsModernMaplibre returns false when Function constructor throws → isSupported false', () => {
-    const RealFunction = global.Function
-    global.Function = function () { throw new SyntaxError('unsupported') }
-    try {
-      const result = createMapLibreProvider().checkDeviceCapabilities()
-      expect(result.isSupported).toBe(false)
-    } finally {
-      global.Function = RealFunction
-    }
+  test('checkDeviceCapabilities: no replaceAll support → isSupported false', () => {
+    delete String.prototype.replaceAll
+
+    const result = createMapLibreProvider().checkDeviceCapabilities()
+
+    expect(result.isSupported).toBe(false)
   })
 
-  test('load returns MapProvider, mapFramework, and mapProviderConfig with config spread', async () => {
+  test('load returns MapProvider, mapFramework, and merged mapProviderConfig', async () => {
     const result = await createMapLibreProvider({ tileSize: 512 }).load()
+
     expect(result.MapProvider).toBeDefined()
     expect(result.mapFramework).toBeDefined()
-    expect(result.mapProviderConfig).toEqual({ tileSize: 512, crs: 'EPSG:4326' })
+    expect(result.mapProviderConfig).toEqual({
+      tileSize: 512,
+      crs: 'EPSG:4326'
+    })
   })
 
   test('load uses empty default config', async () => {
     const { mapProviderConfig } = await createMapLibreProvider().load()
+
     expect(mapProviderConfig).toEqual({ crs: 'EPSG:4326' })
   })
-})
+})

package/providers/maplibre/src/mapEvents.js

@@ -4,7 +4,15 @@ import { throttle } from '../../../src/utils/throttle.js'
 const DEBOUNCE_IDLE_TIME = 500
 const MOVE_THROTTLE_TIME = 10
 
-export function attachMapEvents ({ map, events, eventBus, getCenter, getZoom, getBounds, getResolution }) {
+export function attachMapEvents ({
+  map,
+  events,
+  eventBus,
+  getCenter,
+  getZoom,
+  getBounds,
+  getResolution
+}) {
   const handlers = []
   const debouncers = []
 

package/providers/maplibre/src/maplibreProvider.js

@@ -7,7 +7,7 @@ import { DEFAULTS, supportedShortcuts } from './defaults.js'
 import { cleanCanvas, applyPreventDefaultFix } from './utils/maplibreFixes.js'
 import { attachMapEvents } from './mapEvents.js'
 import { attachAppEvents } from './appEvents.js'
-import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds } from './utils/spatial.js'
+import { getAreaDimensions, getCardinalMove, getBboxFromGeoJSON, isGeometryObscured, getResolution, getPaddedBounds } from './utils/spatial.js'
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
@@ -44,7 +44,9 @@ export default class MapLibreProvider {
    * @returns {Promise<void>}
    */
   async initMap (config) {
-    const { container, padding, mapStyle, center, zoom, bounds, pixelRatio, ...initConfig } = config
+    const { container, padding, mapStyle, mapSize, center, zoom, bounds, pixelRatio, ...initConfig } = config
+    this.mapStyleId = mapStyle?.id
+    this.mapSize = mapSize
     const { Map: MaplibreMap } = this.maplibreModule
     const { events, eventBus } = this
 
@@ -90,6 +92,7 @@ export default class MapLibreProvider {
     })
 
     attachAppEvents({
+      mapProvider: this,
       map,
       events,
       eventBus
@@ -100,17 +103,12 @@ export default class MapLibreProvider {
       this.labelNavigator = createMapLabelNavigator(map, mapStyle?.mapColorScheme, events, eventBus)
     })
 
-    this.eventBus.emit(events.MAP_READY, this.getMapAPI())
-  }
-
-  /** Returns the public API exposed via the map:ready event. */
-  getMapAPI () {
-    return {
+    this.eventBus.emit(events.MAP_READY, {
       map: this.map,
-      crs: this.crs,
-      fitToBounds: this.fitToBounds.bind(this),
-      setView: this.setView.bind(this)
-    }
+      mapStyleId: this.mapStyleId,
+      mapSize: this.mapSize,
+      crs: this.crs
+    })
   }
 
   /** Destroy the map and clean up resources. */
@@ -177,12 +175,13 @@ export default class MapLibreProvider {
   }
 
   /**
-   * Fit map view to the specified bounds [west, south, east, north].
+   * Fit map view to the specified bounds or GeoJSON geometry.
    *
-   * @param {[number, number, number, number]} bounds - Bounds as [west, south, east, north].
+   * @param {[number, number, number, number] | object} bounds - Bounds as [west, south, east, north], or a GeoJSON Feature, FeatureCollection, or geometry. Bbox is computed from GeoJSON using @turf/bbox.
    */
   fitToBounds (bounds) {
-    this.map.fitBounds(bounds, { duration: DEFAULTS.animationDuration })
+    const bbox = Array.isArray(bounds) ? bounds : getBboxFromGeoJSON(bounds)
+    this.map.fitBounds(bbox, { duration: DEFAULTS.animationDuration })
   }
 
   /**
@@ -338,4 +337,15 @@ export default class MapLibreProvider {
     const { lng, lat } = this.map.unproject([point.x, point.y])
     return [lng, lat]
   }
+
+  /**
+   * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+   *
+   * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry.
+   * @param {DOMRect} panelRect - Bounding rect of the panel element (viewport coordinates).
+   * @returns {boolean}
+   */
+  isGeometryObscured (geojson, panelRect) {
+    return isGeometryObscured(geojson, panelRect, this.map)
+  }
 }

package/providers/maplibre/src/maplibreProvider.test.js

@@ -4,7 +4,7 @@ import { attachAppEvents } from './appEvents.js'
 import { createMapLabelNavigator } from './utils/labels.js'
 import { updateHighlightedFeatures } from './utils/highlightFeatures.js'
 import { queryFeatures } from './utils/queryFeatures.js'
-import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds } from './utils/spatial.js'
+import { getAreaDimensions, getCardinalMove, getResolution, getPaddedBounds, isGeometryObscured } from './utils/spatial.js'
 
 jest.mock('./defaults.js', () => ({
   DEFAULTS: { animationDuration: 400, coordinatePrecision: 7 },
@@ -19,6 +19,8 @@ jest.mock('./appEvents.js', () => ({ attachAppEvents: jest.fn() }))
 jest.mock('./utils/spatial.js', () => ({
   getAreaDimensions: jest.fn(() => '400m by 750m'),
   getCardinalMove: jest.fn(() => 'north'),
+  getBboxFromGeoJSON: jest.fn(() => [-1, 50, 1, 52]),
+  isGeometryObscured: jest.fn(() => true),
   getResolution: jest.fn(() => 10),
   getPaddedBounds: jest.fn(() => [[0, 0], [1, 1]])
 }))
@@ -84,7 +86,7 @@ describe('MapLibreProvider', () => {
     expect(map.setPadding).toHaveBeenCalled()
     expect(attachMapEvents).toHaveBeenCalled()
     expect(attachAppEvents).toHaveBeenCalled()
-    expect(eventBus.emit).toHaveBeenCalledWith('map:ready', expect.any(Object))
+    expect(eventBus.emit).toHaveBeenCalledWith('map:ready', { map, mapStyleId: undefined, mapSize: undefined, crs: undefined })
   })
 
   test('initMap: fitBounds called when bounds provided; skipped when absent; null mapStyle → style undefined', async () => {
@@ -157,6 +159,30 @@ describe('MapLibreProvider', () => {
     expect(map.setPadding).toHaveBeenCalledWith({ top: 5 })
   })
 
+  test('fitToBounds accepts GeoJSON: computes bbox via getBboxFromGeoJSON', async () => {
+    const { getBboxFromGeoJSON } = require('./utils/spatial.js')
+    const p = makeProvider()
+    await doInitMap(p)
+    const feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 52] }, properties: {} }
+
+    p.fitToBounds(feature)
+
+    expect(getBboxFromGeoJSON).toHaveBeenCalledWith(feature)
+    expect(map.fitBounds).toHaveBeenCalledWith([-1, 50, 1, 52], { duration: 400 })
+  })
+
+  test('isGeometryObscured delegates to spatial utility with map instance', async () => {
+    const p = makeProvider()
+    await doInitMap(p)
+    const geojson = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 52] }, properties: {} }
+    const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+    const result = p.isGeometryObscured(geojson, panelRect)
+
+    expect(isGeometryObscured).toHaveBeenCalledWith(geojson, panelRect, map)
+    expect(result).toBe(true)
+  })
+
   test('getCenter, getZoom, getBounds return formatted values', async () => {
     const p = makeProvider()
     await doInitMap(p)

package/providers/maplibre/src/utils/spatial.js

@@ -1,5 +1,6 @@
 // src/utils/spatial.js
 import LatLon from 'geodesy/latlon-spherical.js'
+import turfBbox from '@turf/bbox'
 
 // -----------------------------------------------------------------------------
 // Internal (not exported)
@@ -186,9 +187,59 @@ const getPaddedBounds = (LngLatBounds, map) => {
 }
 
 
+/**
+ * Get a flat bbox [west, south, east, north] from any GeoJSON object
+ * (Feature, FeatureCollection, or geometry).
+ *
+ * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry
+ * @returns {[number, number, number, number]}
+ */
+const getBboxFromGeoJSON = (geojson) => turfBbox(geojson)
+
+/**
+ * Returns true if the geometry's screen bounding box overlaps the given panel rectangle.
+ * Used to decide whether to pan/zoom when a panel opens over a visibleGeometry target.
+ *
+ * @param {object} geojson - GeoJSON Feature, FeatureCollection, or geometry
+ * @param {DOMRect} panelRect - Bounding rect of the panel element (viewport coordinates)
+ * @param {object} map - MapLibre map instance
+ * @returns {boolean}
+ */
+const isGeometryObscured = (geojson, panelRect, map) => {
+  const containerRect = map.getContainer().getBoundingClientRect()
+  const [west, south, east, north] = getBboxFromGeoJSON(geojson)
+
+  const corners = [
+    map.project([west, south]),
+    map.project([west, north]),
+    map.project([east, south]),
+    map.project([east, north])
+  ]
+
+  const screenMinX = Math.min(...corners.map(c => c.x))
+  const screenMaxX = Math.max(...corners.map(c => c.x))
+  const screenMinY = Math.min(...corners.map(c => c.y))
+  const screenMaxY = Math.max(...corners.map(c => c.y))
+
+  // Convert panelRect from viewport coords to map-container-relative coords
+  const panelLeft = panelRect.left - containerRect.left
+  const panelTop = panelRect.top - containerRect.top
+  const panelRight = panelRect.right - containerRect.left
+  const panelBottom = panelRect.bottom - containerRect.top
+
+  return (
+    screenMinX < panelRight &&
+    screenMaxX > panelLeft &&
+    screenMinY < panelBottom &&
+    screenMaxY > panelTop
+  )
+}
+
 export {
   getAreaDimensions,
   getCardinalMove,
+  getBboxFromGeoJSON,
+  isGeometryObscured,
   spatialNavigate,
   getResolution,
   getPaddedBounds,

package/providers/maplibre/src/utils/spatial.test.js

@@ -7,6 +7,8 @@ jest.mock('geodesy/latlon-spherical.js', () =>
   }))
 )
 
+jest.mock('@turf/bbox', () => jest.fn(() => [-1, 50, 1, 52]))
+
 describe('spatial utils', () => {
 
   test('formatDimension hits all branches', () => {
@@ -93,4 +95,49 @@ describe('spatial utils', () => {
     expect(bounds.sw).toBeDefined()
     expect(bounds.ne).toBeDefined()
   })
+
+  test('getBboxFromGeoJSON delegates to @turf/bbox and returns flat bbox array', () => {
+    const turfBbox = require('@turf/bbox')
+    const feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 52] }, properties: {} }
+
+    const result = spatial.getBboxFromGeoJSON(feature)
+
+    expect(turfBbox).toHaveBeenCalledWith(feature)
+    expect(result).toEqual([-1, 50, 1, 52])
+  })
+
+  describe('isGeometryObscured', () => {
+    const geojson = { type: 'Feature', geometry: { type: 'Point', coordinates: [0, 51] }, properties: {} }
+    // getBboxFromGeoJSON is mocked to always return [-1, 50, 1, 52]
+
+    // Container sits at viewport origin so container-relative coords equal viewport coords
+    const makeMap = (projectFn) => ({
+      getContainer: jest.fn(() => ({
+        getBoundingClientRect: jest.fn(() => ({ left: 0, top: 0, right: 1000, bottom: 800 }))
+      })),
+      project: jest.fn(projectFn)
+    })
+
+    // Panel occupies the right 400px of the viewport
+    const panelRect = { left: 600, top: 0, right: 1000, bottom: 800, width: 400, height: 800 }
+
+    test('returns true when geometry screen bbox overlaps the panel rect', () => {
+      // Corners project into the panel (x: 650 is between panelLeft 600 and panelRight 1000)
+      const map = makeMap(() => ({ x: 650, y: 400 }))
+      expect(spatial.isGeometryObscured(geojson, panelRect, map)).toBe(true)
+    })
+
+    test('returns false when geometry screen bbox does not overlap the panel rect', () => {
+      // Corners project to x: 300, entirely left of panelLeft (600)
+      const map = makeMap(() => ({ x: 300, y: 400 }))
+      expect(spatial.isGeometryObscured(geojson, panelRect, map)).toBe(false)
+    })
+
+    test('projects all four bbox corners', () => {
+      const map = makeMap(() => ({ x: 300, y: 400 }))
+      spatial.isGeometryObscured(geojson, panelRect, map)
+      // bbox is [-1, 50, 1, 52]: corners are [-1,50], [-1,52], [1,50], [1,52]
+      expect(map.project).toHaveBeenCalledTimes(4)
+    })
+  })
 })

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

@@ -11,12 +11,17 @@
       padding-top var(--duration) ease, padding-bottom var(--duration) ease;
   }
 
+  &--border-top {
+    border-top: 1px solid var(--app-border-color);
+  }
+
   &--hidden {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     padding-top: 0;
     padding-bottom: 0;
+    border: 0;
   }
 
   .im-c-button-wrapper--wide {
@@ -30,10 +35,6 @@
   }
 }
 
-.im-c-actions--border-top {
-  border-top: 1px solid var(--app-border-color);
-}
-
 .im-o-app--tablet, .im-o-app--desktop {
   .im-c-actions {
     min-width: 0;

package/src/App/components/MapButton/MapButton.jsx

@@ -26,18 +26,12 @@ const buildButtonClassNames = (buttonId, variant, showLabel) => [
  * Builds CSS class names for the wrapper div that contains the button.
  * @param {string} buttonId - Unique identifier for the button
  * @param {boolean} showLabel - Whether the button label is displayed
- * @param {boolean} groupStart - Whether this button is at the start of a button group
- * @param {boolean} groupMiddle - Whether this button is in the middle of a button group
- * @param {boolean} groupEnd - Whether this button is at the end of a button group
  * @returns {string} Space-separated CSS class names for the wrapper
  */
-const buildWrapperClassNames = (buttonId, showLabel, groupStart, groupMiddle, groupEnd) => [
+const buildWrapperClassNames = (buttonId, showLabel) => [
   'im-c-button-wrapper',
   buttonId && `im-c-button-wrapper--${stringToKebab(buttonId)}`,
-  showLabel && 'im-c-button-wrapper--wide',
-  groupStart && 'im-c-button-wrapper--group-start',
-  groupMiddle && 'im-c-button-wrapper--group-middle',
-  groupEnd && 'im-c-button-wrapper--group-end'
+  showLabel && 'im-c-button-wrapper--wide'
 ].filter(Boolean).join(' ')
 
 /**
@@ -159,9 +153,6 @@ const buildButtonProps = ({
  * @param {Array<Object>} [props.menuItems] - Array of items for popup menu
  * @param {string} [props.idPrefix=''] - Prefix for generated panel/popup IDs
  * @param {string} [props.href] - URL for anchor element; if provided, renders as <a> instead of <button>
- * @param {boolean} [props.groupStart=false] - Whether button is at start of button group
- * @param {boolean} [props.groupMiddle=false] - Whether button is in middle of button group
- * @param {boolean} [props.groupEnd=false] - Whether button is at end of button group
  * @returns {JSX.Element} The rendered button component
  */
 export const MapButton = ({
@@ -180,10 +171,7 @@ export const MapButton = ({
   panelId,
   menuItems,
   idPrefix,
-  href,
-  groupMiddle,
-  groupStart,
-  groupEnd
+  href
 }) => {
   const { id: appId } = useConfig()
   const { buttonRefs } = useApp()
@@ -255,7 +243,7 @@ export const MapButton = ({
 
   return (
     <div
-      className={buildWrapperClassNames(buttonId, showLabel, groupStart, groupMiddle, groupEnd)}
+      className={buildWrapperClassNames(buttonId, showLabel)}
       style={isHidden ? { display: 'none' } : undefined}
     >
       {showLabel ? buttonEl : <Tooltip content={label}>{buttonEl}</Tooltip>}

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

@@ -138,16 +138,16 @@
 }
 
 .im-o-app__right {
-    .im-c-button-wrapper--group-start,
-    .im-c-button-wrapper--group-middle {
-        margin-bottom: calc(-1 * var(--divider-gap));
+    .im-c-button-group {
+        display: flex;
+        flex-direction: column;
     }
 
-    .im-c-button-wrapper--group-start .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:first-child .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'top');
     }
 
-    .im-c-button-wrapper--group-middle .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:not(:first-child):not(:last-child) .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'none');
 
         &::before {
@@ -155,23 +155,23 @@
         }
     }
 
-    .im-c-button-wrapper--group-end .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:last-child .im-c-map-button {
         margin-top: 0;
         @include tools.border-focus-corner-override($corners: 'bottom');
     }
 }
 
 .im-o-app__top {
-    .im-c-button-wrapper--group-start,
-    .im-c-button-wrapper--group-middle {
-        margin-right: calc(-1 * var(--divider-gap));
+    .im-c-button-group {
+        display: flex;
+        flex-direction: row;
     }
 
-    .im-c-button-wrapper--group-start .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:first-child .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'left');
     }
 
-    .im-c-button-wrapper--group-middle .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:not(:first-child):not(:last-child) .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'none');
 
         &::before {
@@ -179,7 +179,7 @@
         }
     }
 
-    .im-c-button-wrapper--group-end .im-c-map-button {
+    .im-c-button-group .im-c-button-wrapper:last-child .im-c-map-button {
         @include tools.border-focus-corner-override($corners: 'right');
     }
 }

package/src/App/components/MapButton/MapButton.test.jsx

@@ -66,15 +66,6 @@ describe('MapButton', () => {
     expect(container.firstChild).toHaveStyle('display: none')
   })
 
-  it.each([
-    ['groupStart', 'im-c-button-wrapper--group-start'],
-    ['groupMiddle', 'im-c-button-wrapper--group-middle'],
-    ['groupEnd', 'im-c-button-wrapper--group-end']
-  ])('applies wrapper %s class', (prop, className) => {
-    const { container } = renderButton({ [prop]: true })
-    expect(container.firstChild).toHaveClass(className)
-  })
-
   it('handles panelId aria attributes', () => {
     renderButton({ panelId: 'Settings', idPrefix: 'prefix', isDisabled: true, isPanelOpen: false })
     const button = getButton()

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

@@ -7,10 +7,10 @@ import { useIsScrollable } from '../../hooks/useIsScrollable.js'
 import { Icon } from '../Icon/Icon'
 
 const computePanelState = (bpConfig, triggeringElement) => {
-  const isAside = bpConfig.slot === 'side' && bpConfig.initiallyOpen && !bpConfig.modal
-  const isDialog = !isAside && bpConfig.dismissable
+  const isAside = bpConfig.slot === 'side' && bpConfig.open && !bpConfig.modal
+  const isDialog = !isAside && bpConfig.dismissible
   const isModal = bpConfig.modal === true
-  const isDismissable = bpConfig.dismissable !== false
+  const isDismissable = bpConfig.dismissible !== false
   const shouldFocus = Boolean(isModal || triggeringElement)
   const buttonContainerEl = bpConfig.slot.endsWith('button') ? triggeringElement?.parentNode : undefined
   return { isAside, isDialog, isModal, isDismissable, shouldFocus, buttonContainerEl }
@@ -96,8 +96,8 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
     }
   }, [isOpen])
 
-  const panelClass = buildPanelClassNames(bpConfig.slot, panelConfig.showLabel)
-  const panelBodyClass = buildPanelBodyClassNames(panelConfig.showLabel, isDismissable)
+  const panelClass = buildPanelClassNames(bpConfig.slot, bpConfig.showLabel ?? true)
+  const panelBodyClass = buildPanelBodyClassNames(bpConfig.showLabel ?? true, isDismissable)
   const innerHtmlProp = useMemo(() => html ? { __html: html } : null, [html])
 
   const panelProps = buildPanelProps({ elementId, shouldFocus, isDialog, isDismissable, isModal, width: bpConfig.width, panelClass })
@@ -110,7 +110,7 @@ export const Panel = ({ panelId, panelConfig, props, WrappedChild, label, html,
     >
       <h2
         id={`${elementId}-label`}
-        className={panelConfig.showLabel ? 'im-c-panel__heading im-e-heading-m' : 'im-u-visually-hidden'}
+        className={(bpConfig.showLabel ?? true) ? 'im-c-panel__heading im-e-heading-m' : 'im-u-visually-hidden'}
       >
         {label}
       </h2>

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

@@ -32,8 +32,7 @@ describe('Panel', () => {
 
   const renderPanel = (config = {}, props = {}) => {
     const panelConfig = {
-      showLabel: true,
-      desktop: { slot: 'side', initiallyOpen: true, dismissable: false, modal: false },
+      desktop: { slot: 'side', open: true, dismissible: false, modal: false, showLabel: true },
       ...config
     }
     return render(<Panel panelId='Settings' panelConfig={panelConfig} label='Settings' {...props} />)
@@ -49,17 +48,17 @@ describe('Panel', () => {
     })
 
     it('renders visually hidden label when showLabel=false', () => {
-      renderPanel({ showLabel: false })
+      renderPanel({ desktop: { slot: 'side', open: true, dismissible: false, modal: false, showLabel: false } })
       expect(screen.getByText('Settings')).toHaveClass('im-u-visually-hidden')
     })
 
-    it('applies offset class to body when showLabel=false and dismissable', () => {
-      renderPanel({ showLabel: false, desktop: { slot: 'side', dismissable: true, initiallyOpen: false } })
+    it('applies offset class to body when showLabel=false and dismissible', () => {
+      renderPanel({ desktop: { slot: 'side', dismissible: true, open: false, showLabel: false } })
       expect(screen.getByRole('dialog').querySelector('.im-c-panel__body')).toHaveClass('im-c-panel__body--offset')
     })
 
     it('applies width style if provided', () => {
-      renderPanel({ desktop: { slot: 'side', dismissable: true, initiallyOpen: true, width: '300px' } })
+      renderPanel({ desktop: { slot: 'side', dismissible: true, open: true, width: '300px' } })
       expect(screen.getByRole('complementary')).toHaveStyle({ width: '300px' })
     })
 
@@ -82,23 +81,23 @@ describe('Panel', () => {
   })
 
   describe('role and aria attributes', () => {
-    it('renders region role for non-dismissable panels', () => {
+    it('renders region role for non-dismissible panels', () => {
       renderPanel()
       expect(screen.getByRole('region')).toBeInTheDocument()
     })
 
-    it('renders dialog role for dismissable non-aside panels', () => {
-      renderPanel({ desktop: { slot: 'side', dismissable: true, initiallyOpen: false } })
+    it('renders dialog role for dismissible non-aside panels', () => {
+      renderPanel({ desktop: { slot: 'side', dismissible: true, open: false } })
       expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
 
-    it('renders complementary role for dismissable aside panels', () => {
-      renderPanel({ desktop: { slot: 'side', initiallyOpen: true, dismissable: true } })
+    it('renders complementary role for dismissible aside panels', () => {
+      renderPanel({ desktop: { slot: 'side', open: true, dismissible: true } })
       expect(screen.getByRole('complementary')).toBeInTheDocument()
     })
 
     it('sets aria-modal and tabIndex for modal dialogs', () => {
-      renderPanel({ desktop: { slot: 'overlay', dismissable: true, modal: true } })
+      renderPanel({ desktop: { slot: 'overlay', dismissible: true, modal: true } })
       const dialog = screen.getByRole('dialog')
       expect(dialog).toHaveAttribute('aria-modal', 'true')
       expect(dialog).toHaveAttribute('tabIndex', '-1')
@@ -111,7 +110,7 @@ describe('Panel', () => {
       const triggeringElement = { focus: focusMock, parentNode: document.createElement('div') }
 
       renderPanel(
-        { desktop: { slot: 'top-button', dismissable: true, initiallyOpen: false } },
+        { desktop: { slot: 'top-button', dismissible: true, open: false } },
         { props: { triggeringElement } }
       )
 
@@ -125,7 +124,7 @@ describe('Panel', () => {
       const triggeringElement = { focus: focusMock, parentNode: document.createElement('div') }
 
       renderPanel(
-        { desktop: { slot: 'overlay', dismissable: true, modal: true } },
+        { desktop: { slot: 'overlay', dismissible: true, modal: true } },
         { props: { triggeringElement } }
       )
 
@@ -134,7 +133,7 @@ describe('Panel', () => {
     })
 
     it('falls back to viewportRef focus when no triggeringElement', () => {
-      renderPanel({ desktop: { slot: 'side', dismissable: true, initiallyOpen: false } })
+      renderPanel({ desktop: { slot: 'side', dismissible: true, open: false } })
 
       fireEvent.click(screen.getByRole('button', { name: 'Close Settings' }))
       expect(layoutRefs.viewportRef.current.focus).toHaveBeenCalled()