@vaadin/map 25.0.0-alpha9 → 25.0.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/map",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,23 +34,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0",
     "ol": "10.6.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "cvdlName": "vaadin-map",
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

package/src/styles/vaadin-map-base-styles.js

@@ -8,7 +8,7 @@
  * See https://vaadin.com/commercial-license-and-service-terms for the full
  * license.
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const mapStyles = css`
@@ -37,7 +37,7 @@ export const mapStyles = css`
     content: '';
     position: absolute;
     inset: 0;
-    border: 1px solid var(--vaadin-map-border-color, var(--vaadin-border-color));
+    border: 1px solid var(--vaadin-map-border-color, var(--vaadin-border-color-secondary));
     border-radius: inherit;
     z-index: 1;
     pointer-events: none;
@@ -247,7 +247,7 @@ export const mapStyles = css`
     gap: 1em;
     list-style: none;
     margin: 0;
-    color: var(--vaadin-map-attribution-color, var(--vaadin-color-subtle));
+    color: var(--vaadin-map-attribution-text-color, var(--vaadin-text-color-secondary));
     padding: var(--vaadin-padding-container);
     font-size: 0.8em;
   }
@@ -265,7 +265,7 @@ export const mapStyles = css`
   }
 
   .ol-compass:empty::before {
-    mask-image: var(--_vaadin-icon-arrow-up);
+    mask: var(--_vaadin-icon-arrow-up) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen {
@@ -273,11 +273,11 @@ export const mapStyles = css`
   }
 
   .ol-full-screen button:empty::before {
-    mask-image: var(--_vaadin-icon-fullscreen);
+    mask: var(--_vaadin-icon-fullscreen) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-full-screen .ol-full-screen-true:empty::before {
-    mask-image: var(--_vaadin-icon-cross);
+    mask: var(--_vaadin-icon-cross) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap {
@@ -333,7 +333,8 @@ export const mapStyles = css`
   }
 
   .ol-overviewmap button span:empty::before {
-    mask-image: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down));
+    mask: var(--vaadin-map-icon-overview-map-collapse, var(--_vaadin-icon-chevron-down)) 50% /
+      var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-overviewmap.ol-collapsed button {
@@ -355,11 +356,12 @@ export const mapStyles = css`
   }
 
   .ol-zoom-in:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus));
+    mask: var(--vaadin-map-icon-zoom-in, var(--_vaadin-icon-plus)) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
   }
 
   .ol-zoom-out:empty::before {
-    mask-image: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus));
+    mask: var(--vaadin-map-icon-zoom-out, var(--_vaadin-icon-minus)) 50% / var(--vaadin-icon-visual-size, 100%)
+      no-repeat;
   }
 
   .ol-zoom button.ol-zoom-in {
@@ -376,7 +378,7 @@ export const mapStyles = css`
   .ol-attribution:not(.ol-uncollapsible) ul {
     transition: 0.15s opacity;
     background: var(--vaadin-map-control-background, var(--vaadin-background-color));
-    color: var(--vaadin-map-control-color, var(--vaadin-subtle));
+    color: var(--vaadin-map-control-text-color, var(--vaadin-text-color-secondary));
     opacity: 0.65;
     display: flex;
     align-items: center;
@@ -399,7 +401,7 @@ export const mapStyles = css`
   }
 
   .ol-control button:hover {
-    color: var(--vaadin-map-control-color-hover, var(--vaadin-color));
+    color: var(--vaadin-map-control-text-color-hover, var(--vaadin-text-color));
   }
 
   .ol-control button:focus-visible {

package/src/vaadin-map.js

@@ -14,7 +14,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { mapStyles } from './styles/vaadin-map-core-styles.js';
+import { mapStyles } from './styles/vaadin-map-base-styles.js';
 import { MapMixin } from './vaadin-map-mixin.js';
 
 /**

package/vaadin-map.js

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

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/map",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "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": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {

package/src/styles/vaadin-map-core-styles.d.ts

@@ -1,13 +0,0 @@
-/**
- * @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/styles/vaadin-map-core-styles.js

@@ -1,314 +0,0 @@
-/**
- * @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 'lit';
-
-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 {
-    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/theme/lumo/vaadin-map-styles.d.ts

@@ -1,16 +0,0 @@
-/**
- * @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/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';

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

@@ -1,188 +0,0 @@
-/**
- * @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/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);
-      --_focus-ring-color: var(--vaadin-focus-ring-color, var(--lumo-primary-color-50pct));
-      --_focus-ring-width: var(--vaadin-focus-ring-width, 2px);
-    }
-
-    :host(:not([theme~='no-border'])) {
-      border-radius: var(--lumo-border-radius-l);
-      position: relative;
-    }
-
-    :host(:not([theme~='no-border']))::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 var(--_focus-ring-width) var(--_focus-ring-color);
-    }
-
-    .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));
-    }
-
-    .ol-control button:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 var(--_focus-ring-width) var(--_focus-ring-color);
-    }
-
-    .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.d.ts

@@ -1,12 +0,0 @@
-/**
- * @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-map.js';

package/theme/lumo/vaadin-map.js

@@ -1,12 +0,0 @@
-/**
- * @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-map.js';