feat(core): add default style to polar-map

examples/iceberg/components/IcebergMap.vue

@@ -1,15 +1,25 @@
 <template>
-	<div :class="$style['language-chooser']">
+	<div :class="$style['action-bar']">
 		<button class="kern-btn kern-btn--secondary" @click="switchLanguage">
 			<span class="kern-icon kern-icon--flag" />
 			<span class="kern-label">{{
 				language === 'de' ? 'Switch to English' : 'Zu Deutsch wechseln'
 			}}</span>
 		</button>
+		<button
+			class="kern-btn kern-btn--secondary"
+			@click="splitScreen = !splitScreen"
+		>
+			<span class="kern-icon kern-icon--splitscreen-left" />
+			<span class="kern-label">{{
+				splitScreen ? 'Exit split screen' : 'Enter split screen'
+			}}</span>
+		</button>
 	</div>
 	<polar-map
 		v-if="store.serviceRegister.length"
 		ref="map"
+		:class="{ [$style['split-screen']]: splitScreen }"
 		:map-configuration="store.mapConfiguration"
 		:service-register="store.serviceRegister"
 	/>
@@ -29,6 +39,7 @@ import { useIcebergStore } from '../stores/iceberg'
 const store = useIcebergStore()
 
 const language = ref('de')
+const splitScreen = ref(false)
 
 const map = useTemplateRef<typeof PolarContainer>('map')
 watch(map, (map) => {
@@ -70,16 +81,16 @@ function switchLanguage() {
 
 <style scoped>
 @import url('@polar/polar/polar.css');
-
-polar-map {
-	display: block;
-	width: 100%;
-	height: 20em;
-}
 </style>
 
 <style module>
-.language-chooser {
+.action-bar {
+	display: flex;
+	gap: 1em;
 	margin-bottom: 1em;
 }
+
+.split-screen {
+	width: 50%;
+}
 </style>

examples/snowbox/index.html

@@ -41,11 +41,11 @@
 				margin: 0.2em 0;
 			}
 
-			/* directly related to POLAR - something like this must be
-			 * available for map client to render in (see core docs for
-			 * more details on requirements) */
+			#language-switcher {
+				outline: solid black;
+			}
+
 			.snowbox {
-				display: block;
 				width: 100vw;
 				max-width: calc(100% + 64px);
 				height: var(--map-height);
@@ -55,10 +55,6 @@
 				left: -32px;
 				outline: solid var(--eigengrau);
 			}
-
-			#language-switcher {
-				outline: solid black;
-			}
 		</style>
 	</head>
 

src/core/components/PolarContainer.ce.vue

@@ -107,7 +107,7 @@
 	resizeObserver.observe(polarWrapper.value as Element)
 	updateClientDimensions()
 
 	// FIXME: Improve types for lightElement
 	// This is necessary for making `getStore` work
 	;(mainStore.lightElement as { store?: unknown }).store = useCoreStore()
 })
@@ -129,12 +129,20 @@
 	--brand-color-c: v-bind('mainStore.configuration.theme?.brandColor?.c');
 	--brand-color-h: v-bind('mainStore.configuration.theme?.brandColor?.h');
 }
+
+@layer polar-map {
+	:host {
+		display: block;
+		width: 100%;
+		height: 30em;
+	}
+}
 </style>
 
 <style scoped>
 .polar-wrapper {
-	position: absolute;
-	height: inherit;
-	width: inherit;
+	position: relative;
+	height: 100%;
+	width: 100%;
 }
 </style>