Show the docs map examples with no padding

docs/components/Example.astro

@@ -27,9 +27,11 @@ interface Props {
   columnFullWidth?: boolean
   hideCode?: boolean
   codeOnly?: boolean
+  /** no padding around the demo, for content that fills the whole area, such as a map */
+  flush?: boolean
 }
 
-const { html: htmlProp, code, raw, overflow = 'auto', background = 'surface-secondary', class: className, height, column, centered, vertical, columnFullWidth, hideCode, codeOnly } = Astro.props
+const { html: htmlProp, code, raw, overflow = 'auto', background = 'surface-secondary', class: className, height, column, centered, vertical, columnFullWidth, hideCode, codeOnly, flush } = Astro.props
 
 const backgroundClasses: Record<ExampleBackground, string> = {
   'surface-secondary': 'bg-surface-secondary',
@@ -52,7 +54,7 @@ const hasDemo = !codeOnly
 const hasCode = !hideCode
 const exampleClasses = ['example fs-base border', hasCode ? 'rounded-top' : 'rounded', !raw && 'd-flex flex-wrap justify-content-center', `overflow-${overflow}`, 'position-relative', backgroundClasses[background], className]
 
-const innerClasses = ['p-6 w-full', column && 'd-flex gap-3 flex-column', !column && centered && `d-flex flex-fill flex-wrap gap-2 justify-content-center${vertical ? ' align-items-center flex-column' : ' justify-content-center'}`, columnFullWidth && 'd-flex flex-fill flex-column gap-2']
+const innerClasses = [flush ? 'p-0' : 'p-6', 'w-full', column && 'd-flex gap-3 flex-column', !column && centered && `d-flex flex-fill flex-wrap gap-2 justify-content-center${vertical ? ' align-items-center flex-column' : ' justify-content-center'}`, columnFullWidth && 'd-flex flex-fill flex-column gap-2']
 
 const highlighted = hideCode ? '' : await highlightCode(beautifyHtml(code ?? html), 'html')
 ---

docs/content/ui/components/map.mdx

@@ -98,8 +98,8 @@ document.addEventListener('DOMContentLoaded', function () {
 })
 ```
 
-<Example>
-<Map mapId="simple" />
+<Example flush>
+<Map rounded={false} mapId="simple" />
 </Example>
 
 `center` takes the longitude first and the latitude second. This is the opposite of what most map services show.
@@ -116,8 +116,8 @@ Set `style` to the URL of any MapLibre style. OpenFreeMap has five of them:
 | `https://tiles.openfreemap.org/styles/bright` | Street map with stronger colors. |
 | `https://tiles.openfreemap.org/styles/fiord` | Dark blue map. |
 
-<Example>
-<Map mapId="light" />
+<Example flush>
+<Map rounded={false} mapId="light" />
 </Example>
 
 ### Map colors
@@ -155,8 +155,8 @@ cities.forEach(function (coords) {
 })
 ```
 
-<Example>
-<Map mapId="markers" />
+<Example flush>
+<Map rounded={false} mapId="markers" />
 </Example>
 
 Without `element`, MapLibre draws its own pin. Its `color` option accepts a CSS variable, for example `var(--tblr-primary)`.
@@ -184,8 +184,8 @@ pin.className = 'map-marker map-marker-pin map-marker-red'
 new maplibregl.Marker({ element: pin, anchor: 'bottom' }).setLngLat([13.47, 52.518]).addTo(map)
 ```
 
-<Example>
-<Map mapId="marker-styles" title="Marker styles" center={[52.522, 13.405]} zoom={11}>
+<Example flush>
+<Map rounded={false} mapId="marker-styles" title="Marker styles" center={[52.522, 13.405]} zoom={11}>
   <div data-lng="13.345" data-lat="52.54"><span class="map-marker map-marker-dot"></span></div>
   <div data-lng="13.39" data-lat="52.545"><span class="map-marker map-marker-dot map-marker-red"></span></div>
   <div data-lng="13.445" data-lat="52.538"><span class="map-marker"><Icon name="building-store" /><span class="map-marker-label">Store</span></span></div>
@@ -278,8 +278,8 @@ const popup = new maplibregl.Popup({ offset: 40, className: 'map-popup-card', ma
 new maplibregl.Marker({ element: pin, anchor: 'bottom' }).setLngLat([13.4019, 52.5169]).setPopup(popup).addTo(map)
 ```
 
-<Example>
-<Map mapId="popup-card" title="Popup card" center={[52.546, 13.4]} zoom={11} ratio="4x3">
+<Example flush>
+<Map rounded={false} mapId="popup-card" title="Popup card" center={[52.546, 13.4]} zoom={11} ratio="4x3">
   <div data-lng="13.4019" data-lat="52.5169" data-anchor="bottom" data-open>
     <span class="map-marker map-marker-pin"><Icon name="map-pin" /></span>
     <template class="map-popup-card">

shared/components/demo/Map.astro

@@ -20,9 +20,11 @@ interface Props {
 	controls?: boolean;
 	/** draws the map as a 3D globe instead of a flat map */
 	globe?: boolean;
+	/** rounded corners; turn off when the map fills a box that has its own corners */
+	rounded?: boolean;
 }
 
-const { mapId, ratio, center: centerProp, zoom: zoomProp, title, style: styleProp, controls: controlsProp, globe = false } = Astro.props;
+const { mapId, ratio, center: centerProp, zoom: zoomProp, title, style: styleProp, controls: controlsProp, globe = false, rounded = true } = Astro.props;
 
 type MapData = {
 	title?: string | undefined;
@@ -60,7 +62,7 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 	data && (
 		<div class={`ratio ratio-${ratioClass}`}>
 			<div>
-				<div id={mapContainerId} class="w-100 h-100 rounded" role="img" aria-label={data.title ?? 'Map'} />
+				<div id={mapContainerId} class:list={['w-100 h-100', rounded && 'rounded']} role="img" aria-label={data.title ?? 'Map'} />
 				<slot name="overlay" />
 			</div>
 		</div>