Merge branch 'next' into vue3/update-behaviour-of-GeoLocation

Author: dopenguin

package-lock.json

@@ -5,12 +5,17 @@
 		:lang="language"
 		:data-kern-theme="mainStore.colorScheme"
 	>
-		<PolarMap />
-		<PolarUI />
-		<MoveHandle
-			v-if="isActive && hasWindowSize && hasSmallWidth"
-			:key="moveHandleKey"
-		/>
+		<div class="polar-map-layer">
+			<PolarMap />
+		</div>
+		<div class="polar-ui-layer">
+			<div v-if="!hasWindowSize" class="polar-shadow" aria-hidden="true" />
+			<PolarUI />
+			<MoveHandle
+				v-if="isActive && hasWindowSize && hasSmallWidth"
+				:key="moveHandleKey"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -165,7 +170,6 @@ onBeforeUnmount(() => {
 		width: 100%;
 		height: 30em;
 		border-radius: var(--kern-metric-border-radius-large);
-		overflow: hidden;
 		box-sizing: border-box;
 	}
 }
@@ -176,5 +180,33 @@ onBeforeUnmount(() => {
 	position: relative;
 	height: 100%;
 	width: 100%;
+	border-radius: var(--kern-metric-border-radius-large);
+}
+
+.polar-map-layer {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	clip-path: inset(0 round var(--kern-metric-border-radius-large));
+}
+
+.polar-shadow {
+	position: absolute;
+	inset: 0;
+	border-radius: var(--kern-metric-border-radius-large);
+	box-shadow:
+		inset 0 1px 1px 0 rgba(53, 57, 86, 0.5),
+		inset 0 1px 2px 0 rgba(53, 57, 86, 0.5),
+		inset 0 1px 6px 0 rgba(110, 117, 151, 0.5);
+	pointer-events: none;
+	z-index: -1;
+}
+
+.polar-ui-layer {
+	position: absolute;
+	inset: 0;
+	z-index: 2;
+	isolation: isolate;
+	pointer-events: none;
 }
 </style>

src/core/components/PolarContainer.ce.vue

@@ -1,19 +1,17 @@
 <template>
-	<div class="polar-ui" :class="{ 'polar-shadow': !hasWindowSize }">
+	<div class="polar-ui">
 		<component :is="layout" />
 	</div>
 </template>
 
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 
 import { useMainStore } from '../stores/main'
 import NineLayout from './layouts/NineLayout.ce.vue'
 import StandardLayout from './layouts/StandardLayout.ce.vue'
 
 const mainStore = useMainStore()
-const { hasWindowSize } = storeToRefs(mainStore)
 
 const layout = computed(() => {
 	if (mainStore.layout === 'standard') {
@@ -38,22 +36,4 @@ const layout = computed(() => {
 	width: 100%;
 	height: 100%;
 }
-
-.polar-shadow {
-	&::before {
-		content: '';
-		position: absolute;
-		box-shadow:
-			inset 0 1px 1px 0 rgba(53, 57, 86, 0.5),
-			inset 0 1px 2px 0 rgba(53, 57, 86, 0.5),
-			inset 0 1px 6px 0 rgba(110, 117, 151, 0.5);
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		z-index: 1;
-		border-radius: var(--kern-metric-border-radius-large);
-		pointer-events: none;
-	}
-}
 </style>

src/core/components/PolarUI.ce.vue

@@ -5,8 +5,9 @@
 		tabindex="-1"
 	>
 		<template v-for="(result, i) in results" :key="result.categoryId">
-			<h2
+			<span
 				v-if="results.length > 1"
+				:id="`polar-plugin-address-search-category-label-${result.categoryId}`"
 				class="polar-plugin-address-search-category-label"
 			>
 				{{ result.categoryLabel }}
@@ -16,8 +17,9 @@
 						ns: PluginId,
 					})
 				}}
-			</h2>
+			</span>
 			<ul
+				:aria-labelledby="`polar-plugin-address-search-category-label-${result.categoryId}`"
 				:class="{
 					'polar-plugin-address-search-list-without-label':
 						results.length === 1,

src/plugins/addressSearch/components/SearchResults.ce.vue

@@ -34,12 +34,13 @@ const { leftEntries, rightEntries } = storeToRefs(useFooterStore())
 	justify-content: space-between;
 	align-items: center;
 	flex-shrink: 0;
+	z-index: -2;
 
 	background: var(--kern-color-layout-background-hued);
 	box-shadow:
-		0 1px 1px 0 rgba(53, 57, 86, 0.16),
-		0 1px 2px 0 rgba(53, 57, 86, 0.25),
-		0 1px 6px 0 rgba(110, 117, 151, 0.25);
+		0 -1px 1px 0 rgba(53, 57, 86, 0.16),
+		0 -1px 2px 0 rgba(53, 57, 86, 0.25),
+		0 -1px 6px 0 rgba(110, 117, 151, 0.25);
 	border-radius: 0 0 var(--kern-metric-border-radius-large)
 		var(--kern-metric-border-radius-large);