@vaadin/map 24.7.0-alpha4 → 24.7.0-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/map",
-  "version": "24.7.0-alpha4",
+  "version": "24.7.0-alpha5",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,18 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha4",
-    "@vaadin/component-base": "24.7.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha4",
+    "@vaadin/a11y-base": "24.7.0-alpha5",
+    "@vaadin/component-base": "24.7.0-alpha5",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha5",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha5",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha5",
+    "lit": "^3.0.0",
     "ol": "6.13.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha4",
+    "@vaadin/chai-plugins": "24.7.0-alpha5",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -53,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
+  "gitHead": "f9fa2bd652780a344d5e0329b8aafbcbd72ebd14"
 }

package/src/vaadin-lit-map.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-map.js';

package/src/vaadin-lit-map.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { MapMixin } from './vaadin-map-mixin.js';
+import { mapStyles } from './vaadin-map-styles.js';
+
+/**
+ * LitElement based version of `<vaadin-map>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class Map extends MapMixin(ThemableMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-map';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-map';
+  }
+
+  static get styles() {
+    return mapStyles;
+  }
+
+  /** @protected */
+  render() {
+    return html``;
+  }
+}
+
+defineCustomElement(Map);
+
+export { Map };

package/src/vaadin-map-mixin.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type OpenLayersMap from 'ol/Map.js';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
+
+export declare function MapMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<MapMixinClass> & Constructor<ResizeMixinClass> & Constructor<FocusMixinClass> & T;
+
+export declare class MapMixinClass {
+  /**
+   * 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;
+}

package/src/vaadin-map-mixin.js

@@ -0,0 +1,103 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { defaults as defaultControls } from 'ol/control';
+import { defaults as defaultInteractions } from 'ol/interaction';
+import OpenLayersMap from 'ol/Map.js';
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes ResizeMixin
+ * @mixes FocusMixin
+ */
+export const MapMixin = (superClass) =>
+  class extends FocusMixin(ResizeMixin(superClass)) {
+    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);
+    }
+
+    /**
+     * 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() {
+      return this._configuration;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      // Add map container to shadow root, trigger OL resize calculation
+      this.shadowRoot.appendChild(this._mapTarget);
+      this.__addMapFocusListeners();
+    }
+
+    /**
+     * Implements resize callback from ResizeMixin to update size of OL map instance
+     * @override
+     * @protected
+     */
+    _onResize(_contentRect) {
+      this._configuration.updateSize();
+    }
+
+    /**
+     * 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/src/vaadin-map-styles.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import type { CSSResult } from 'lit';
+
+export const mapStyles: CSSResult;

package/src/vaadin-map-styles.js

@@ -0,0 +1,314 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+export const mapStyles = css`
+  :host {
+    display: block;
+    height: 400px;
+    flex: 1 1 auto;
+    align-self: stretch;
+    overflow: hidden;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  #map {
+    width: 100%;
+    height: 100%;
+    outline: none;
+  }
+
+  #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;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .ol-viewport canvas {
+    all: unset;
+  }
+
+  .ol-selectable {
+    -webkit-touch-callout: default;
+    -webkit-user-select: text;
+    user-select: text;
+  }
+
+  .ol-grabbing {
+    cursor: grabbing;
+  }
+
+  .ol-grab {
+    cursor: move;
+    cursor: grab;
+  }
+
+  /* Control positioning and styling */
+
+  .ol-overlaycontainer-stopevent {
+    /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+    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, '\\2013');
+  }
+
+  .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, '\\25B8');
+  }
+
+  .ol-attribution.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-attribution-expand, '\\2139');
+  }
+
+  .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, '\\2191');
+  }
+
+  .ol-full-screen {
+    grid-area: fullscreen;
+  }
+
+  .ol-full-screen button:empty::before {
+    content: var(--vaadin-map-icon-fullscreen, '\\2922');
+  }
+
+  .ol-full-screen .ol-full-screen-true:empty::before {
+    content: var(--vaadin-map-icon-close, '\\00D7');
+  }
+
+  .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, '\\25BE');
+  }
+
+  .ol-overviewmap.ol-collapsed button span:empty::before {
+    content: var(--vaadin-map-icon-overview-map-expand, '\\25B4');
+  }
+
+  .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;
+  }
+`;

package/src/vaadin-map.d.ts

@@ -8,11 +8,9 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import type OpenLayersMap from 'ol/Map.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
+import { MapMixin } from './vaadin-map-mixin.js';
 
 /**
  * `vaadin-map` is a web component for displaying web maps.
@@ -50,18 +48,9 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes FocusMixin
- * @mixes ResizeMixin
+ * @mixes MapMixin
  */
-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;
-}
+declare class Map extends MapMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/vaadin-map.js

@@ -9,14 +9,13 @@
  * license.
  */
 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 { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MapMixin } from './vaadin-map-mixin.js';
+import { mapStyles } from './vaadin-map-styles.js';
+
+registerStyles('vaadin-map', mapStyles, { moduleId: 'vaadin-map-styles' });
 
 /**
  * `vaadin-map` is a web component for displaying web maps.
@@ -54,322 +53,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
+ * @mixes MapMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes FocusMixin
- * @mixes ResizeMixin
  */
-class Map extends ResizeMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          height: 400px;
-          flex: 1 1 auto;
-          align-self: stretch;
-          overflow: hidden;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        #map {
-          width: 100%;
-          height: 100%;
-          outline: none;
-        }
-
-        #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;
-          user-select: none;
-          -webkit-tap-highlight-color: transparent;
-        }
-
-        .ol-viewport canvas {
-          all: unset;
-        }
-
-        .ol-selectable {
-          -webkit-touch-callout: default;
-          -webkit-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, '\\2013');
-        }
-
-        .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, '\\25B8');
-        }
-
-        .ol-attribution.ol-collapsed button span:empty::before {
-          content: var(--vaadin-map-icon-attribution-expand, '\\2139');
-        }
-
-        .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, '\\2191');
-        }
-
-        .ol-full-screen {
-          grid-area: fullscreen;
-        }
-
-        .ol-full-screen button:empty::before {
-          content: var(--vaadin-map-icon-fullscreen, '\\2922');
-        }
-
-        .ol-full-screen .ol-full-screen-true:empty::before {
-          content: var(--vaadin-map-icon-close, '\\00D7');
-        }
-
-        .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, '\\25BE');
-        }
-
-        .ol-overviewmap.ol-collapsed button span:empty::before {
-          content: var(--vaadin-map-icon-overview-map-expand, '\\25B4');
-        }
-
-        .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>
-    `;
-  }
-
+class Map extends MapMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-map';
   }
@@ -378,84 +66,8 @@ class Map extends ResizeMixin(FocusMixin(ElementMixin(ThemableMixin(PolymerEleme
     return 'vaadin-map';
   }
 
-  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);
-  }
-
-  /**
-   * 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() {
-    return this._configuration;
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-    // Add map container to shadow root, trigger OL resize calculation
-    this.shadowRoot.appendChild(this._mapTarget);
-    this.__addMapFocusListeners();
-  }
-
-  /**
-   * Implements resize callback from ResizeMixin to update size of OL map instance
-   * @override
-   * @protected
-   */
-  _onResize(_contentRect) {
-    this._configuration.updateSize();
-  }
-
-  /**
-   * 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;
+  static get template() {
+    return html``;
   }
 }
 

package/theme/lumo/vaadin-lit-map.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-lit-map.js';

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-lit-map.js';

package/theme/material/vaadin-lit-map.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-lit-map.js';

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

@@ -0,0 +1,12 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-map-styles.js';
+import '../../src/vaadin-lit-map.js';

package/vaadin-lit-map.d.ts

@@ -0,0 +1 @@
+export * from './vaadin-map.js';

package/vaadin-lit-map.js

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

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/map",
-  "version": "24.7.0-alpha4",
+  "version": "24.7.0-alpha5",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/map",
-  "version": "24.7.0-alpha4",
+  "version": "24.7.0-alpha5",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {