@vaadin/map 23.0.0-beta1 → 23.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/map",
-  "version": "23.0.0-beta1",
+  "version": "23.0.0-beta5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,14 +35,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "23.0.0-beta1",
+    "@vaadin/component-base": "23.0.0-beta5",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "ol": "6.11.0"
+    "@vaadin/vaadin-themable-mixin": "23.0.0-beta5",
+    "ol": "6.12.1-dev.1645111187932"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^9.2.4"
   },
-  "gitHead": "467244b76021176c109df675799b07029b293e58"
+  "gitHead": "4c388aeec6623869c70896c909799804fc95d0f9"
 }

package/src/vaadin-map.d.ts

@@ -4,7 +4,7 @@
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
 import OpenLayersMap from 'ol/Map.js';
-import { ElementMixin } from '@vaadin/component-base';
+import { ElementMixin, FocusMixin, ResizeMixin } from '@vaadin/component-base';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
 
 /**
@@ -44,15 +44,17 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes FocusMixin
+ * @mixes ResizeMixin
  */
-declare class Map extends ThemableMixin(ElementMixin(HTMLElement)) {
+declare class Map extends ResizeMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
    * The internal OpenLayers map instance used to configure the map.
    * See the OpenLayers [API](https://openlayers.org/en/latest/apidoc/) and
    * [examples](https://openlayers.org/en/latest/examples/) for further information.
    * @returns {*}
    */
-  get configuration(): OpenLayersMap | undefined;
+  get configuration(): OpenLayersMap;
 }
 
 declare global {

package/src/vaadin-map.js

@@ -3,9 +3,14 @@
  * Copyright (c) 2022 - 2022 Vaadin Ltd.
  * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
  */
+import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { defaults as defaultControls } from 'ol/control';
+import { defaults as defaultInteractions } from 'ol/interaction';
 import OpenLayersMap from 'ol/Map.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 function isEnabled() {
@@ -49,27 +54,321 @@ function isEnabled() {
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
+ * @mixes FocusMixin
+ * @mixes ResizeMixin
  */
-class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
+class Map extends ResizeMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
         :host {
           display: block;
-          width: 100%;
+          height: 400px;
+          flex: 1 1 auto;
+          align-self: stretch;
           overflow: hidden;
         }
 
+        :host([hidden]) {
+          display: none !important;
+        }
+
         #map {
           width: 100%;
           height: 100%;
+          outline: none;
         }
 
-        :host([hidden]) {
-          display: none !important;
+        #map,
+        .ol-viewport,
+        .ol-layers {
+          border-radius: inherit;
+          overflow: hidden;
+        }
+
+        #map:fullscreen {
+          border-radius: 0;
+        }
+
+        #map:-webkit-full-screen {
+          border-radius: 0;
+        }
+
+        /* Functional styles, copied from 'ol/ol.css' */
+
+        .ol-box {
+          box-sizing: border-box;
+          border-radius: 2px;
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          background-color: rgba(255, 255, 255, 0.2);
+          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+        }
+
+        .ol-unsupported {
+          display: none;
+        }
+
+        .ol-viewport,
+        .ol-unselectable {
+          -webkit-touch-callout: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+          user-select: none;
+          -webkit-tap-highlight-color: transparent;
+        }
+
+        .ol-viewport canvas {
+          all: unset;
+        }
+
+        .ol-selectable {
+          -webkit-touch-callout: default;
+          -webkit-user-select: text;
+          -moz-user-select: text;
+          -ms-user-select: text;
+          user-select: text;
+        }
+
+        .ol-grabbing {
+          cursor: -webkit-grabbing;
+          cursor: -moz-grabbing;
+          cursor: grabbing;
+        }
+
+        .ol-grab {
+          cursor: move;
+          cursor: -webkit-grab;
+          cursor: -moz-grab;
+          cursor: grab;
+        }
+
+        /* Control positioning and styling */
+
+        .ol-overlaycontainer-stopevent {
+          display: grid;
+          grid-template-columns: min-content 1fr min-content;
+          grid-template-rows: min-content 1fr min-content min-content min-content min-content;
+          padding: var(--vaadin-map-controls-inset, 0.25em);
+          box-sizing: border-box;
+          grid-template-areas:
+            'scale mouse-position fullscreen'
+            'overview-map . zoom-extent'
+            'overview-map . compass'
+            'overview-map . zoom-slider'
+            'overview-map . zoom'
+            'overview-map attribution attribution';
+        }
+
+        .ol-mouse-position {
+          grid-area: mouse-position;
+          align-self: start;
+          text-align: center;
+          font-size: 0.625em;
+          color: #000;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-line,
+        .ol-scale-bar {
+          grid-area: scale;
+          position: relative;
+          pointer-events: none !important;
+          color: #000;
+        }
+
+        .ol-scale-line-inner {
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          border-top: none;
+          font-size: 0.625em;
+          text-align: center;
+          will-change: contents, width, filter;
+          transition: all 0.25s;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-bar-inner {
+          border: 1px solid rgba(0, 0, 0, 0.5);
+          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
+          overflow: hidden;
+        }
+
+        .ol-scale-step-marker {
+          display: none;
+        }
+
+        .ol-scale-step-text {
+          position: absolute;
+          top: 0.75em;
+          font-size: 0.625em;
+          color: #000;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+          white-space: nowrap;
+          overflow: hidden;
+        }
+
+        .ol-scale-text {
+          position: absolute;
+          font-size: 0.625em;
+          top: 2em;
+          color: #000;
+          white-space: nowrap;
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+        }
+
+        .ol-scale-singlebar {
+          height: 0.25em;
+          opacity: 0.5;
+        }
+
+        .ol-control {
+          margin: 0.25em;
+        }
+
+        .ol-control button {
+          -webkit-appearance: none;
+          border: 0;
+          margin: 0;
+          padding: 0;
+          background: #fff;
+          font: inherit;
+          color: inherit;
+          width: 1.5em;
+          height: 1.5em;
+        }
+
+        .ol-control button::-moz-focus-inner {
+          border: none;
+          padding: 0;
+        }
+
+        .ol-compass {
+          grid-area: compass;
+          display: block;
+          will-change: transform;
+        }
+
+        .ol-zoom {
+          grid-area: zoom;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .ol-zoom-in:empty::before {
+          content: var(--vaadin-map-icon-zoom-in, '+');
+        }
+
+        .ol-zoom-out:empty::before {
+          content: var(--vaadin-map-icon-zoom-out, '–');
+        }
+
+        .ol-attribution {
+          grid-area: attribution;
+          margin-inline-start: auto !important;
+          display: flex;
+          flex-flow: row-reverse;
+        }
+
+        .ol-attribution.ol-uncollapsible {
+          margin-inline-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+          margin-block-end: calc(var(--vaadin-map-controls-inset, 0.25em) * -1);
+        }
+
+        .ol-attribution button span:empty::before {
+          content: var(--vaadin-map-icon-attribution-collapse, '▸');
+        }
+
+        .ol-attribution.ol-collapsed button span:empty::before {
+          content: var(--vaadin-map-icon-attribution-expand, 'ℹ');
+        }
+
+        .ol-attribution ul {
+          display: flex;
+          align-items: center;
+          gap: 1em;
+          list-style: none;
+          margin: 0;
+          padding: 0.25em 0.5em;
+          font-size: 0.8em;
+        }
+
+        .ol-attribution.ol-collapsed ul {
+          display: none;
+        }
+
+        .ol-attribution.ol-uncollapsible button {
+          display: none;
+        }
+
+        .ol-rotate {
+          grid-area: compass;
+        }
+
+        .ol-compass:empty::before {
+          content: var(--vaadin-map-icon-compass, '↑');
+        }
+
+        .ol-full-screen {
+          grid-area: fullscreen;
+        }
+
+        .ol-full-screen button:empty::before {
+          content: var(--vaadin-map-icon-fullscreen, '⤢');
+        }
+
+        .ol-full-screen .ol-full-screen-true:empty::before {
+          content: var(--vaadin-map-icon-close, '×');
+        }
+
+        .ol-overviewmap {
+          grid-area: overview-map;
+          align-self: end;
+          width: max-content;
+        }
+
+        .ol-overviewmap button span:empty::before {
+          content: var(--vaadin-map-icon-overview-map-collapse, '▾');
+        }
+
+        .ol-overviewmap.ol-collapsed button span:empty::before {
+          content: var(--vaadin-map-icon-overview-map-expand, '▴');
+        }
+
+        .ol-overviewmap-map {
+          height: 10em;
+          width: 10em;
+          border: 1px solid rgba(0, 0, 0, 0.5);
+        }
+
+        .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+        .ol-overviewmap.ol-uncollapsible button {
+          display: none;
+        }
+
+        .ol-overviewmap-box {
+          border: 1px dashed rgba(0, 0, 0, 0.5);
+          filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff);
+          will-change: filter;
+          cursor: move;
+        }
+
+        .ol-zoomslider {
+          grid-area: zoom-slider;
+          height: 8em;
+        }
+
+        .ol-zoomslider button {
+          position: relative;
+          height: 0.5em;
+          display: block;
+          border-radius: inherit;
+        }
+
+        .ol-zoom-extent {
+          grid-area: zoom-extent;
+          align-self: end;
         }
       </style>
-      <div id="map"></div>
     `;
   }
 
@@ -77,6 +376,17 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
     return 'vaadin-map';
   }
 
+  /** @protected */
+  static _finalizeClass() {
+    super._finalizeClass();
+
+    const devModeCallback = window.Vaadin.developmentModeCallback;
+    const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
+    if (typeof licenseChecker === 'function') {
+      licenseChecker(Map);
+    }
+  }
+
   /**
    * The internal OpenLayers map instance used to configure the map.
    * See the OpenLayers [API](https://openlayers.org/en/latest/apidoc/) and
@@ -87,18 +397,74 @@ class Map extends ElementMixin(ThemableMixin(PolymerElement)) {
     return this._configuration;
   }
 
+  constructor() {
+    super();
+    // Create map container element and initialize OL map instance
+    this._mapTarget = document.createElement('div');
+    this._mapTarget.id = 'map';
+    // Ensure accessible keyboard controls are enabled
+    this._mapTarget.setAttribute('tabindex', '0');
+    const options = {
+      // Override default controls to remove default labels, which is required to
+      // correctly display icons through pseudo-element
+      controls: defaultControls({
+        rotate: false,
+        zoomOptions: { zoomInLabel: '', zoomOutLabel: '' }
+      }),
+      // Override default interactions to allow mouse-wheel zoom + drag-pan when not focused
+      interactions: defaultInteractions({ onFocusOnly: false }),
+      target: this._mapTarget
+    };
+    this._configuration = new OpenLayersMap(options);
+  }
+
   /** @protected */
   ready() {
     super.ready();
+    // Add map container to shadow root, trigger OL resize calculation
+    this.shadowRoot.appendChild(this._mapTarget);
+    this.__addMapFocusListeners();
+  }
 
-    this.__initMap();
+  /**
+   * Implements resize callback from ResizeMixin to update size of OL map instance
+   * @override
+   * @protected
+   */
+  _onResize(_contentRect) {
+    this._configuration.updateSize();
   }
 
-  /** @private */
-  __initMap() {
-    this._configuration = new OpenLayersMap({
-      target: this.$.map
+  /**
+   * Registers focus listeners on the map container to manually manage focus in
+   * FocusMixin. FocusMixin currently assumes that the focusable element will
+   * be in the light DOM and is available as event target.
+   * The map container however is in the shadow DOM and thus focus events will
+   * always have the host element as target.
+   * @private
+   */
+  __addMapFocusListeners() {
+    this._mapTarget.addEventListener('focusin', (e) => {
+      if (e.target === this._mapTarget) {
+        this._setFocused(true);
+      }
     });
+    this._mapTarget.addEventListener('focusout', () => {
+      this._setFocused(false);
+    });
+  }
+
+  /**
+   * Overrides method from `FocusMixin` to disable automatic focus management.
+   * See custom logic in __addMapFocusListeners
+   *
+   * @param {FocusEvent} _event
+   * @return {boolean}
+   * @override
+   * @protected
+   */
+  _shouldSetFocus(_event) {
+    return false;
   }
 }
 

package/theme/lumo/vaadin-map-styles.js

@@ -0,0 +1,186 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
+import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/style.js';
+import '@vaadin/vaadin-lumo-styles/font-icons.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-map',
+  css`
+    :host {
+      font-family: var(--lumo-font-family);
+      font-size: var(--lumo-font-size-m);
+      --vaadin-map-controls-inset: var(--lumo-space-xs);
+      --vaadin-map-icon-zoom-in: var(--lumo-icons-plus);
+      --vaadin-map-icon-zoom-out: var(--lumo-icons-minus);
+      --vaadin-map-icon-compass: var(--lumo-icons-arrow-up);
+      --vaadin-map-icon-overview-map-collapse: var(--lumo-icons-angle-down);
+      --vaadin-map-icon-overview-map-expand: var(--lumo-icons-angle-up);
+      --vaadin-map-icon-close: var(--lumo-icons-cross);
+      --vaadin-map-icon-attribution-collapse: var(--lumo-icons-angle-right);
+    }
+
+    :host(:not([theme~='borderless'])) {
+      border-radius: var(--lumo-border-radius-l);
+      position: relative;
+    }
+
+    :host(:not([theme~='borderless']))::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: 1px solid var(--lumo-contrast-10pct);
+      border-radius: inherit;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    :host([focus-ring]) {
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
+    .ol-control,
+    .ol-scale-bar,
+    .ol-scale-line {
+      margin: var(--lumo-space-xs);
+    }
+
+    .ol-control {
+      border-radius: var(--lumo-border-radius-m);
+      transition: 0.15s box-shadow, 0.15s background-color;
+      -webkit-backdrop-filter: blur(8px);
+    }
+
+    .ol-control:hover {
+      background-color: var(--lumo-base-color);
+    }
+
+    .ol-control:not(.ol-uncollapsible):hover {
+      box-shadow: var(--lumo-box-shadow-s);
+      background-color: var(--lumo-shade-20pct);
+    }
+
+    .ol-control button {
+      width: var(--lumo-size-s);
+      height: var(--lumo-size-s);
+      border-radius: inherit;
+      font-family: 'lumo-icons';
+      font-size: var(--lumo-icon-size-s);
+      font-weight: 400;
+    }
+
+    .ol-control button,
+    .ol-attribution:not(.ol-uncollapsible) ul {
+      transition: 0.15s opacity;
+      background-color: var(--lumo-base-color);
+      color: var(--lumo-body-text-color);
+      opacity: 0.65;
+    }
+
+    .ol-control:hover button,
+    .ol-control button:focus,
+    .ol-attribution:hover ul {
+      opacity: 1;
+    }
+
+    .ol-control button:hover {
+      color: var(--lumo-primary-text-color);
+    }
+
+    .ol-control button:active {
+      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    }
+
+    @supports not selector(:focus-visible) {
+      .ol-control button:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+      }
+    }
+
+    .ol-control button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+
+    .ol-zoom {
+      gap: 2px;
+    }
+
+    button.ol-zoom-in {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    button.ol-zoom-out {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .ol-attribution.ol-uncollapsible {
+      border-radius: var(--lumo-border-radius-m) 0 0 0;
+    }
+
+    .ol-attribution ul {
+      font-size: var(--lumo-font-size-xxs);
+      color: var(--lumo-secondary-text-color);
+      padding: var(--lumo-space-xs) var(--lumo-space-s);
+      cursor: default;
+    }
+
+    .ol-attribution:not(.ol-uncollapsible) ul {
+      background-color: var(--lumo-base-color);
+    }
+
+    .ol-attribution a {
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .ol-scale-bar-inner {
+      border-radius: var(--lumo-border-radius-s);
+    }
+
+    .ol-full-screen {
+      height: var(--lumo-size-s);
+    }
+
+    .ol-overviewmap:not(.ol-collapsed),
+    .ol-overviewmap:not(.ol-collapsed):hover {
+      background-color: var(--lumo-base-color);
+      box-shadow: var(--lumo-box-shadow-s);
+      transition: 0.15s box-shadow;
+    }
+
+    .ol-overviewmap-map {
+      margin: var(--lumo-space-xs);
+      border: 0;
+      border-radius: var(--lumo-border-radius-s);
+    }
+
+    .ol-overviewmap:not(.ol-uncollapsible) .ol-overviewmap-map {
+      margin-bottom: 0;
+    }
+
+    .ol-zoomslider:not(.ol-uncollapsible):hover {
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    .ol-zoomslider button {
+      height: var(--lumo-space-m);
+    }
+
+    .ol-zoomslider:hover button {
+      box-shadow: var(--lumo-box-shadow-s);
+    }
+  `,
+  { moduleId: 'lumo-map' }
+);

package/theme/lumo/vaadin-map.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-map.js';

package/theme/material/vaadin-map-styles.js

@@ -0,0 +1,147 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import '@vaadin/vaadin-material-styles/color.js';
+import '@vaadin/vaadin-material-styles/shadow.js';
+import '@vaadin/vaadin-material-styles/typography.js';
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-map',
+  css`
+    :host {
+      font-family: var(--material-font-family);
+      font-size: var(--material-body-font-size);
+    }
+
+    :host(:not([theme~='borderless'])) {
+      border-radius: 4px;
+      border: 1px solid var(--material-divider-color);
+    }
+
+    :host([focus-ring]) {
+      box-shadow: 0 0 0 2px var(--material-primary-color);
+    }
+
+    .ol-control {
+      border-radius: 4px;
+      transition: 0.1s box-shadow;
+      box-shadow: var(--material-shadow-elevation-2dp);
+    }
+
+    .ol-control:hover {
+      background-color: var(--material-background-color);
+    }
+
+    .ol-control:not(.ol-uncollapsible):hover {
+      box-shadow: var(--material-shadow-elevation-4dp);
+      background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .ol-control button {
+      width: 2em;
+      height: 2em;
+      background-color: var(--material-background-color);
+      border-radius: inherit;
+    }
+
+    .ol-control button,
+    .ol-attribution:not(.ol-uncollapsible) ul {
+      color: var(--material-secondary-text-color);
+    }
+
+    .ol-control:hover button,
+    .ol-attribution:hover ul {
+      color: var(--material-body-text-color);
+    }
+
+    .ol-control button:hover {
+      color: var(--material-primary-text-color);
+    }
+
+    .ol-control button:active {
+      background-color: var(--material-secondary-background-color);
+    }
+
+    @supports not selector(:focus-visible) {
+      .ol-control button:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px var(--material-primary-color);
+      }
+    }
+
+    .ol-control button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--material-primary-color);
+    }
+
+    .ol-zoom {
+      gap: 1px;
+    }
+
+    button.ol-zoom-in {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    button.ol-zoom-out {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    .ol-attribution.ol-uncollapsible {
+      border-radius: 4px 0 0;
+    }
+
+    .ol-attribution ul {
+      font-size: var(--material-caption-font-size);
+      cursor: default;
+    }
+
+    .ol-attribution:not(.ol-uncollapsible) ul {
+      background-color: var(--material-background-color);
+    }
+
+    .ol-attribution a {
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .ol-scale-bar-inner {
+      border-radius: 4px;
+    }
+
+    .ol-full-screen {
+      height: 2em;
+    }
+
+    .ol-overviewmap:not(.ol-collapsed),
+    .ol-overviewmap:not(.ol-collapsed):hover {
+      background-color: var(--material-background-color);
+    }
+
+    .ol-overviewmap-map {
+      margin: 2px;
+      border: 0;
+      border-radius: 2px;
+    }
+
+    .ol-zoomslider,
+    .ol-zoomslider:not(.ol-uncollapsible):hover {
+      box-shadow: none;
+      overflow: visible;
+    }
+
+    .ol-zoomslider button {
+      height: 16px;
+      box-shadow: var(--material-shadow-elevation-2dp);
+    }
+
+    .ol-zoomslider:hover button {
+      box-shadow: var(--material-shadow-elevation-4dp);
+    }
+  `,
+  { moduleId: 'material-map' }
+);

package/theme/material/vaadin-map.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2022 Vaadin Ltd.
+ * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-map.js';

package/vaadin-map.js

@@ -1,2 +1,2 @@
-import './theme/vaadin-map-base-theme.js';
+import './theme/lumo/vaadin-map.js';
 export * from './src/vaadin-map.js';

package/theme/vaadin-map-base-theme.js

@@ -1,305 +0,0 @@
-/**
- * @license
- * Copyright (c) 2022 - 2022 Vaadin Ltd.
- * This program is available under Commercial Vaadin Developer License 4.0, available at https://vaadin.com/license/cvdl-4.0.
- */
-
-/**
- * @licence OpenLayers
- *
- * BSD 2-Clause License, https://github.com/openlayers/openlayers/blob/main/LICENSE.md
- */
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-// Adopted from `ol/ol.css`
-const mapBaseTheme = css`
-  .ol-box {
-    box-sizing: border-box;
-    border-radius: 2px;
-    border: 1.5px solid rgb(179, 197, 219);
-    background-color: rgba(255, 255, 255, 0.4);
-  }
-
-  .ol-mouse-position {
-    top: 8px;
-    right: 8px;
-    position: absolute;
-  }
-
-  .ol-scale-line {
-    background: rgba(0, 60, 136, 0.3);
-    border-radius: 4px;
-    bottom: 8px;
-    left: 8px;
-    padding: 2px;
-    position: absolute;
-  }
-  .ol-scale-line-inner {
-    border: 1px solid #eee;
-    border-top: none;
-    color: #eee;
-    font-size: 10px;
-    text-align: center;
-    margin: 1px;
-    will-change: contents, width;
-    transition: all 0.25s;
-  }
-  .ol-scale-bar {
-    position: absolute;
-    bottom: 8px;
-    left: 8px;
-  }
-  .ol-scale-step-marker {
-    width: 1px;
-    height: 15px;
-    background-color: #000000;
-    float: right;
-    z-index: 10;
-  }
-  .ol-scale-step-text {
-    position: absolute;
-    bottom: -5px;
-    font-size: 12px;
-    z-index: 11;
-    color: #000000;
-    text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;
-  }
-  .ol-scale-text {
-    position: absolute;
-    font-size: 14px;
-    text-align: center;
-    bottom: 25px;
-    color: #000000;
-    text-shadow: -2px 0 #ffffff, 0 2px #ffffff, 2px 0 #ffffff, 0 -2px #ffffff;
-  }
-  .ol-scale-singlebar {
-    position: relative;
-    height: 10px;
-    z-index: 9;
-    box-sizing: border-box;
-    border: 1px solid black;
-  }
-
-  .ol-unsupported {
-    display: none;
-  }
-  .ol-viewport,
-  .ol-unselectable {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  }
-  .ol-viewport canvas {
-    all: unset;
-  }
-  .ol-selectable {
-    -webkit-touch-callout: default;
-    -webkit-user-select: text;
-    -moz-user-select: text;
-    -ms-user-select: text;
-    user-select: text;
-  }
-  .ol-grabbing {
-    cursor: -webkit-grabbing;
-    cursor: -moz-grabbing;
-    cursor: grabbing;
-  }
-  .ol-grab {
-    cursor: move;
-    cursor: -webkit-grab;
-    cursor: -moz-grab;
-    cursor: grab;
-  }
-  .ol-control {
-    position: absolute;
-    background-color: rgba(255, 255, 255, 0.4);
-    border-radius: 4px;
-    padding: 2px;
-  }
-  .ol-control:hover {
-    background-color: rgba(255, 255, 255, 0.6);
-  }
-  .ol-zoom {
-    top: 0.5em;
-    left: 0.5em;
-  }
-  .ol-rotate {
-    top: 0.5em;
-    right: 0.5em;
-    transition: opacity 0.25s linear, visibility 0s linear;
-  }
-  .ol-rotate.ol-hidden {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.25s linear, visibility 0s linear 0.25s;
-  }
-  .ol-zoom-extent {
-    top: 4.643em;
-    left: 0.5em;
-  }
-  .ol-full-screen {
-    right: 0.5em;
-    top: 0.5em;
-  }
-
-  .ol-control button {
-    display: block;
-    margin: 1px;
-    padding: 0;
-    color: white;
-    font-weight: bold;
-    text-decoration: none;
-    font-size: inherit;
-    text-align: center;
-    height: 1.375em;
-    width: 1.375em;
-    line-height: 0.4em;
-    background-color: rgba(0, 60, 136, 0.5);
-    border: none;
-    border-radius: 2px;
-  }
-  .ol-control button::-moz-focus-inner {
-    border: none;
-    padding: 0;
-  }
-  .ol-zoom-extent button {
-    line-height: 1.4em;
-  }
-  .ol-compass {
-    display: block;
-    font-weight: normal;
-    font-size: 1.2em;
-    will-change: transform;
-  }
-  .ol-touch .ol-control button {
-    font-size: 1.5em;
-  }
-  .ol-touch .ol-zoom-extent {
-    top: 5.5em;
-  }
-  .ol-control button:hover,
-  .ol-control button:focus {
-    text-decoration: none;
-    background-color: rgba(0, 60, 136, 0.7);
-  }
-  .ol-zoom .ol-zoom-in {
-    border-radius: 2px 2px 0 0;
-  }
-  .ol-zoom .ol-zoom-out {
-    border-radius: 0 0 2px 2px;
-  }
-
-  .ol-attribution {
-    text-align: right;
-    bottom: 0.5em;
-    right: 0.5em;
-    max-width: calc(100% - 1.3em);
-    display: flex;
-    flex-flow: row-reverse;
-    align-items: center;
-  }
-  .ol-attribution a {
-    color: rgba(0, 60, 136, 0.7);
-    text-decoration: none;
-  }
-  .ol-attribution ul {
-    margin: 0;
-    padding: 1px 0.5em;
-    color: #000;
-    text-shadow: 0 0 2px #fff;
-    font-size: 12px;
-  }
-  .ol-attribution li {
-    display: inline;
-    list-style: none;
-  }
-  .ol-attribution li:not(:last-child):after {
-    content: ' ';
-  }
-  .ol-attribution img {
-    max-height: 2em;
-    max-width: inherit;
-    vertical-align: middle;
-  }
-  .ol-attribution button {
-    flex-shrink: 0;
-  }
-  .ol-attribution.ol-collapsed ul {
-    display: none;
-  }
-  .ol-attribution:not(.ol-collapsed) {
-    background: rgba(255, 255, 255, 0.8);
-  }
-  .ol-attribution.ol-uncollapsible {
-    bottom: 0;
-    right: 0;
-    border-radius: 4px 0 0;
-  }
-  .ol-attribution.ol-uncollapsible img {
-    margin-top: -0.2em;
-    max-height: 1.6em;
-  }
-  .ol-attribution.ol-uncollapsible button {
-    display: none;
-  }
-
-  .ol-zoomslider {
-    top: 4.5em;
-    left: 0.5em;
-    height: 200px;
-  }
-  .ol-zoomslider button {
-    position: relative;
-    height: 10px;
-  }
-
-  .ol-touch .ol-zoomslider {
-    top: 5.5em;
-  }
-
-  .ol-overviewmap {
-    left: 0.5em;
-    bottom: 0.5em;
-  }
-  .ol-overviewmap.ol-uncollapsible {
-    bottom: 0;
-    left: 0;
-    border-radius: 0 4px 0 0;
-  }
-  .ol-overviewmap .ol-overviewmap-map,
-  .ol-overviewmap button {
-    display: block;
-  }
-  .ol-overviewmap .ol-overviewmap-map {
-    border: 1px solid #7b98bc;
-    height: 150px;
-    margin: 2px;
-    width: 150px;
-  }
-  .ol-overviewmap:not(.ol-collapsed) button {
-    bottom: 2px;
-    left: 2px;
-    position: absolute;
-  }
-  .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
-  .ol-overviewmap.ol-uncollapsible button {
-    display: none;
-  }
-  .ol-overviewmap:not(.ol-collapsed) {
-    background: rgba(255, 255, 255, 0.8);
-  }
-  .ol-overviewmap-box {
-    border: 2px dotted rgba(0, 60, 136, 0.7);
-  }
-
-  .ol-overviewmap .ol-overviewmap-box:hover {
-    cursor: move;
-  }
-`;
-
-registerStyles('vaadin-map', mapBaseTheme, { moduleId: 'vaadin-map-base-theme' });
-
-export { mapBaseTheme };