docs: add Map component style variants and properties

articles/components/map/index.adoc

@@ -521,26 +521,4 @@ Custom projections must be defined before using them as either user projection o
 ====
 
 
-== Theme Variants
-
-=== Borderless
-
-By default, Map has a visible, rounded border.
-The border can be removed by using the `borderless` theme variant.
-
-[.example]
---
-[source,typescript]
-----
-include::{root}/frontend/demo/component/map/map-theme-borderless.ts[preimport,hidden]
-----
-
-ifdef::flow[]
-[source,java]
-----
-include::{root}/src/main/java/com/vaadin/demo/component/map/MapThemeBorderless.java[render,tags=snippet,indent=0,group=Flow]
-----
-endif::[]
---
-
 [discussion-id]`04C74C61-682E-40A8-B152-BEBF1C38C49C`

articles/components/map/styling.adoc

@@ -0,0 +1,95 @@
+---
+title: Styling
+page-title: How to style the Map component | Vaadin components
+description: Styling API reference for the Map component.
+meta-description: Customize the appearance of the Vaadin Map component to align with your application's theme.
+order: 50
+---
+= Map Styling
+
+== Style Variants
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`no-border`
+|Removes border around the Map component
+|Aura, Lumo
+
+|===
+
+[.example]
+--
+[source,typescript]
+----
+include::{root}/frontend/demo/component/map/map-no-border.ts[preimport,hidden]
+----
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/map/MapNoBorder.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+--
+
+
+include::../_styling-section-theming-props.adoc[tag=style-properties]
+
+[cols="2,1"]
+|===
+| Property | Supported by
+
+|`--vaadin-map-border-color`
+|Aura, Lumo
+
+|`--vaadin-map-border-radius`
+|Aura, Lumo
+
+|`--vaadin-map-control-size`
+|Aura, Lumo
+
+|`--vaadin-map-controls-inset`
+|Aura, Lumo
+
+|`--vaadin-map-icon-attribution-collapse`
+|Aura, Lumo
+
+|`--vaadin-map-icon-attribution-expand`
+|Aura, Lumo
+
+|`--vaadin-map-icon-close`
+|Aura, Lumo
+
+|`--vaadin-map-icon-compass`
+|Aura, Lumo
+
+|`--vaadin-map-icon-fullscreen`
+|Aura, Lumo
+
+|`--vaadin-map-icon-overview-map-collapse`
+|Aura, Lumo
+
+|`--vaadin-map-icon-overview-map-expand`
+|Aura, Lumo
+
+|`--vaadin-map-icon-zoom-in`
+|Aura, Lumo
+
+|`--vaadin-map-icon-zoom-out`
+|Aura, Lumo
+
+|===
+
+
+include::../_styling-section-intros.adoc[tag=selectors]
+
+
+Root element:: `vaadin-map`
+
+=== States
+
+Focused:: `vaadin-map+++<wbr>+++**[focused]**`
+Keyboard Focused:: `vaadin-map+++<wbr>+++**[focus-ring]**`

src/main/java/com/vaadin/demo/component/map/MapThemeBorderless.java → src/main/java/com/vaadin/demo/component/map/MapNoBorder.java

@@ -6,17 +6,17 @@
 import com.vaadin.flow.component.map.Map;
 import com.vaadin.flow.component.map.MapVariant;
 
-@Route("map-theme-borderless")
-public class MapThemeBorderless extends Div {
+@Route("map-no-border")
+public class MapNoBorder extends Div {
 
-    public MapThemeBorderless() {
+    public MapNoBorder() {
         Map map = new Map();
         add(map);
         // tag::snippet[]
-        map.addThemeVariants(MapVariant.BORDERLESS);
+        map.addThemeVariants(MapVariant.LUMO_NO_BORDER);
         // end::snippet[]
     }
 
-    public static class Exporter extends DemoExporter<MapThemeBorderless> { // hidden-source-line
+    public static class Exporter extends DemoExporter<MapNoBorder> { // hidden-source-line
     } // hidden-source-line
 }