ts-maps 0.3.1 → 0.3.3

package/src/core-map/ts-maps.css

@@ -116,6 +116,10 @@
   z-index: 200;
 }
 
+.tsmap-symbol-pane {
+  z-index: 350;
+}
+
 .tsmap-overlay-pane {
   z-index: 400;
 }
@@ -293,28 +297,91 @@ svg.tsmap-image-layer.tsmap-interactive path {
 
 /* visual tweaks */
 
+/*
+ * Theme tokens.
+ *
+ * Every colour the chrome draws with resolves through one of these, so a dark
+ * map is a single class flip rather than a parallel stylesheet. They live on
+ * the container and not on :root deliberately: two maps on one page can then
+ * carry different themes, and a host page's own custom properties can't
+ * collide with them.
+ *
+ * The switch is `.tsmap-dark`, set by the map's `theme` option (see
+ * Map.setTheme). It is a class and not a bare `prefers-color-scheme` query
+ * because the map's theme should follow the basemap being displayed, which is
+ * an application decision — a dark style on a machine set to light mode still
+ * needs dark chrome. `theme: 'auto'` is what re-attaches it to the OS setting.
+ */
 .tsmap-container {
-  background: #ddd;
+  --tsmap-accent: #1a73e8;
+  --tsmap-surface: #fff;
+  --tsmap-surface-hover: #f1f3f4;
+  --tsmap-fg: #3c4043;
+  --tsmap-fg-muted: #5f6368;
+  --tsmap-fg-disabled: #bdc1c6;
+  --tsmap-divider: rgb(0 0 0 / 12%);
+  --tsmap-scrim: rgb(255 255 255 / 80%);
+  --tsmap-hairline: #ddd;
+  --tsmap-scale-line: #777;
+  --tsmap-shadow:
+    0 1px 2px rgb(60 64 67 / 30%),
+    0 2px 6px 2px rgb(60 64 67 / 15%);
+  --tsmap-shadow-lg:
+    0 2px 6px rgb(60 64 67 / 28%),
+    0 6px 18px 4px rgb(60 64 67 / 15%);
+
+  /* Matched to the land colour of a light basemap, so tiles fade in against
+    their own background instead of flashing a dark band on every pan. */
+  --tsmap-tile-bg: #e8eaed;
+
+  background: var(--tsmap-tile-bg);
   outline-offset: 1px;
 
   a {
-    color: #0078a8;
+    color: var(--tsmap-accent);
   }
 }
 
+.tsmap-container.tsmap-dark {
+  --tsmap-accent: #8ab4f8;
+  --tsmap-surface: #292a2d;
+  --tsmap-surface-hover: #35363a;
+  --tsmap-fg: #e8eaed;
+  --tsmap-fg-muted: #9aa0a6;
+  --tsmap-fg-disabled: #5f6368;
+  --tsmap-divider: rgb(255 255 255 / 14%);
+  --tsmap-scrim: rgb(32 33 36 / 80%);
+  --tsmap-hairline: #3c4043;
+  --tsmap-scale-line: #9aa0a6;
+  --tsmap-shadow:
+    0 1px 2px rgb(0 0 0 / 50%),
+    0 2px 6px 2px rgb(0 0 0 / 30%);
+  --tsmap-shadow-lg:
+    0 2px 6px rgb(0 0 0 / 45%),
+    0 6px 18px 4px rgb(0 0 0 / 30%);
+  --tsmap-tile-bg: #16171a;
+}
+
 /* prevent showing outline-box on Chromium when clicking on a vector with a tooltip */
 path.tsmap-interactive:focus:not(:focus-visible) {
   outline: 0;
 }
 
 .tsmap-zoom-box {
-  border: 2px dotted #38f;
-  background: rgba(255, 255, 255, 0.5);
+  border: 2px dotted var(--tsmap-accent);
+  background: var(--tsmap-scrim);
 }
 
 /* general typography */
 .tsmap-container {
-  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
   font-size: 12px;
   font-size: 0.75rem;
   line-height: 1.5;
@@ -322,43 +389,85 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 /* general toolbar styles */
 
+/*
+ * Map chrome, styled the way a modern map is expected to look.
+ *
+ * What this replaces was inherited from Leaflet's 2011 defaults: 26px targets
+ * (well under the 44px every touch guideline asks for), a 4px radius, and
+ * `0 1px 5px rgba(0,0,0,0.65)` — a shadow at 65% black, which over a light
+ * basemap reads as a smudge rather than elevation.
+ *
+ * The values here follow the conventions every major map now shares: a white
+ * card, an 8px radius, a soft two-part shadow (a tight contact edge plus a
+ * wide ambient falloff), hairline dividers instead of solid #ccc borders, and
+ * the system UI font rather than Lucida Console. Controls also gain a real
+ * focus ring, which the old chrome suppressed entirely.
+ */
 .tsmap-bar {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
-  border-radius: 4px;
+  box-shadow: var(--tsmap-shadow);
+  border-radius: 8px;
+  overflow: hidden;
 
   a {
-    background-color: #fff;
-    border-bottom: 1px solid #ccc;
-    width: 26px;
-    height: 26px;
-    line-height: 26px;
+    position: relative;
+    background-color: var(--tsmap-surface);
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
     display: block;
     text-align: center;
     text-decoration: none;
-    color: black;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     display: block;
-    &:hover,
-    &:focus {
-      background-color: #f4f4f4;
+    color: var(--tsmap-fg);
+    transition: background-color 120ms ease;
+
+    &:hover {
+      background-color: var(--tsmap-surface-hover);
+    }
+
+    /* Visible only for keyboard users: a ring on every mouse click is noise,
+      and no ring at all makes the control unusable without a pointer. */
+    &:focus-visible {
+      outline: 2px solid var(--tsmap-accent);
+      outline-offset: -2px;
+      background-color: var(--tsmap-surface-hover);
+    }
+
+    /*
+     * Inset seam between stacked buttons.
+     *
+     * A full-width `border-bottom` runs edge to edge and visually cuts the
+     * card in two, so a zoom control reads as two stacked cards rather than
+     * one control with a divider. Every modern map insets this line; drawing
+     * it as a pseudo-element is also what lets the last child simply not have
+     * one, without a border reset.
+     */
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 8px;
+      bottom: 0;
+      left: 8px;
+      height: 1px;
+      background: var(--tsmap-divider);
     }
 
     &:first-child {
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
     }
 
     &:last-child {
-      border-bottom-left-radius: 4px;
-      border-bottom-right-radius: 4px;
-      border-bottom: none;
+      border-bottom-left-radius: 8px;
+      border-bottom-right-radius: 8px;
     }
 
     &.tsmap-disabled {
       cursor: default;
-      background-color: #f4f4f4;
-      color: #bbb;
+      background-color: var(--tsmap-surface);
+      color: var(--tsmap-fg-disabled);
     }
   }
 }
@@ -369,39 +478,42 @@ path.tsmap-interactive:focus:not(:focus-visible) {
   display: block;
 }
 
+/*
+ * Touch used to shrink these to 30px with a 2px radius, which is smaller than
+ * the pointer size and the wrong way round — a finger needs a bigger target
+ * than a cursor, not a smaller one. 40px already clears the 44px guideline
+ * once the control's own padding is counted, so both inputs share it.
+ */
 .tsmap-touch .tsmap-bar a {
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
-
-  &:first-child {
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
-  }
-
-  &:last-child {
-    border-bottom-left-radius: 2px;
-    border-bottom-right-radius: 2px;
-  }
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
 }
 
 /* zoom control */
 
-.tsmap-control-zoom-in,
-.tsmap-control-zoom-out {
-  font: bold 18px 'Lucida Console', Monaco, monospace;
-  text-indent: 1px;
-  .tsmap-touch & {
-    font-size: 22px;
-  }
+/* Scoped under .tsmap-bar so it outranks the `.tsmap-bar a` colour above —
+  the zoom glyphs sit a shade lighter than label ink, as they do on every
+  map that draws them as characters rather than icons. */
+.tsmap-bar a.tsmap-control-zoom-in,
+.tsmap-bar a.tsmap-control-zoom-out {
+  color: var(--tsmap-fg-muted);
+
+  font:
+    400 21px / 40px -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+  text-indent: 0;
 }
 
 /* layers control */
 
 .tsmap-control-layers {
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
-  background: #fff;
-  border-radius: 5px;
+  box-shadow: var(--tsmap-shadow);
+  background: var(--tsmap-surface);
+  border-radius: 8px;
 
   .tsmap-control-layers-list {
     display: none;
@@ -419,6 +531,12 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     width: 44px;
     height: 44px;
   }
+
+  /* The stacked-sheets glyph is drawn with light fills, which disappear into a
+    dark card. Same shape, inverted ink. */
+  .tsmap-dark & {
+    background-image: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2736%27 height=%2736%27 viewBox=%270 0 36 36%27%3E%3Crect x=%274%27 y=%274%27 width=%2714%27 height=%2714%27 fill=%27%23202124%27 stroke=%27%23bdc1c6%27 stroke-width=%271.5%27/%3E%3Crect x=%2710%27 y=%2710%27 width=%2714%27 height=%2714%27 fill=%27%232f3134%27 stroke=%27%23bdc1c6%27 stroke-width=%271.5%27/%3E%3Crect x=%2716%27 y=%2716%27 width=%2714%27 height=%2714%27 fill=%27%233f4144%27 stroke=%27%23bdc1c6%27 stroke-width=%271.5%27/%3E%3C/svg%3E');
+  }
 }
 
 .tsmap-control-layers-expanded {
@@ -440,8 +558,8 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 .tsmap-control-layers-expanded {
   padding: 6px 10px 6px 6px;
-  color: #333;
-  background: #fff;
+  color: var(--tsmap-fg);
+  background: var(--tsmap-surface);
 }
 
 .tsmap-control-layers-scrollbar {
@@ -464,7 +582,7 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 .tsmap-control-layers-separator {
   height: 0;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--tsmap-hairline);
   margin: 5px -10px 5px -6px;
 }
 
@@ -476,15 +594,14 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 /* attribution and scale controls */
 
 .tsmap-container .tsmap-control-attribution {
-  background: #fff;
-  background: rgba(255, 255, 255, 0.8);
+  background: var(--tsmap-scrim);
   margin: 0;
 }
 
 .tsmap-control-attribution,
 .tsmap-control-scale-line {
   padding: 0 5px;
-  color: #333;
+  color: var(--tsmap-fg);
   line-height: 1.4;
 }
 
@@ -514,36 +631,40 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 }
 
 .tsmap-control-scale-line {
-  border: 2px solid #777;
+  border: 2px solid var(--tsmap-scale-line);
   border-top: none;
   line-height: 1.1;
   padding: 2px 5px 1px;
   white-space: nowrap;
   box-sizing: border-box;
-  background: rgba(255, 255, 255, 0.8);
-  text-shadow: 1px 1px #fff;
+  background: var(--tsmap-scrim);
 
   &:not(:first-child) {
-    border-top: 2px solid #777;
+    border-top: 2px solid var(--tsmap-scale-line);
     border-bottom: none;
     margin-top: -2px;
 
     &:not(:last-child) {
-      border-bottom: 2px solid #777;
+      border-bottom: 2px solid var(--tsmap-scale-line);
     }
   }
 }
 
+/*
+ * Touch controls are the same controls.
+ *
+ * This block used to swap the elevated card for a flat one with a hard
+ * `2px solid rgba(0,0,0,0.2)` border — the Leaflet touch treatment, and the
+ * reason the chrome looked a decade old on exactly the devices most people
+ * open a map on. A shadow is not a pointer affordance; it is how a floating
+ * control reads as floating, on any input. Phones render it fine.
+ *
+ * The touch class still exists and still drives hit-target sizing above; it
+ * just no longer restyles the surface.
+ */
 .tsmap-touch {
-  .tsmap-control-attribution,
   .tsmap-control-layers,
   .tsmap-bar {
-    box-shadow: none;
-  }
-
-  .tsmap-control-layers,
-  .tsmap-bar {
-    border: 2px solid rgba(0, 0, 0, 0.2);
     background-clip: padding-box;
   }
 }
@@ -597,9 +718,9 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 
 .tsmap-popup-content-wrapper,
 .tsmap-popup-tip {
-  background: white;
-  color: #333;
-  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+  background: var(--tsmap-surface);
+  color: var(--tsmap-fg);
+  box-shadow: var(--tsmap-shadow-lg);
 }
 
 .tsmap-container a.tsmap-popup-close-button {
@@ -611,13 +732,13 @@ path.tsmap-interactive:focus:not(:focus-visible) {
   width: 24px;
   height: 24px;
   font: 16px/24px Tahoma, Verdana, sans-serif;
-  color: #757575;
+  color: var(--tsmap-fg-muted);
   text-decoration: none;
   background: transparent;
 
   &:hover,
   &:focus {
-    color: #585858;
+    color: var(--tsmap-fg);
   }
 }
 
@@ -628,8 +749,8 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 /* div icon */
 
 .tsmap-div-icon {
-  background: #fff;
-  border: 1px solid #666;
+  background: var(--tsmap-surface);
+  border: 1px solid var(--tsmap-fg-muted);
 }
 
 /* Tooltip */
@@ -637,14 +758,14 @@ path.tsmap-interactive:focus:not(:focus-visible) {
 .tsmap-tooltip {
   position: absolute;
   padding: 6px;
-  background-color: #fff;
-  border: 1px solid #fff;
+  background-color: var(--tsmap-surface);
+  border: 1px solid var(--tsmap-surface);
   border-radius: 3px;
-  color: #222;
+  color: var(--tsmap-fg);
   white-space: nowrap;
   user-select: none;
   pointer-events: none;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
 
   &.tsmap-interactive {
     cursor: pointer;
@@ -674,7 +795,7 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     top: 0;
     margin-top: -12px;
     margin-left: -6px;
-    border-bottom-color: #fff;
+    border-bottom-color: var(--tsmap-surface);
   }
 }
 
@@ -686,7 +807,7 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     margin-left: -6px;
     bottom: 0;
     margin-bottom: -12px;
-    border-top-color: #fff;
+    border-top-color: var(--tsmap-surface);
   }
 }
 
@@ -698,7 +819,7 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     margin-top: -6px;
     right: 0;
     margin-right: -12px;
-    border-left-color: #fff;
+    border-left-color: var(--tsmap-surface);
   }
 }
 
@@ -710,7 +831,7 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     margin-top: -6px;
     left: 0;
     margin-left: -12px;
-    border-right-color: #fff;
+    border-right-color: var(--tsmap-surface);
   }
 }
 
@@ -723,3 +844,379 @@ path.tsmap-interactive:focus:not(:focus-visible) {
     print-color-adjust: exact;
   }
 }
+
+/* locate control
+  ==========================================================================
+  The crosshair button. Drawn in CSS rather than shipped as an icon file so it
+  inherits colour from the button's state and stays crisp at any pixel ratio —
+  the control has four states and a bitmap would need four assets.
+  ========================================================================== */
+
+.tsmap-control-locate a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.tsmap-locate-icon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  color: var(--tsmap-fg-muted);
+
+  /* The ring. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 3px;
+    border: 2px solid currentcolor;
+    border-radius: 50%;
+  }
+
+  /* The centre dot, and the four ticks via a cross gradient. */
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      linear-gradient(currentcolor, currentcolor) 50% 0 / 2px 4px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 50% 100% / 2px 4px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 0 50% / 4px 2px no-repeat,
+      linear-gradient(currentcolor, currentcolor) 100% 50% / 4px 2px no-repeat,
+      radial-gradient(circle at 50% 50%, currentcolor 0 2px, transparent 2px);
+  }
+}
+
+/* Following the device: the crosshair fills in, the way a "you are here"
+  control does everywhere else. */
+a.tsmap-control-locate-active .tsmap-locate-icon {
+  color: var(--tsmap-accent);
+}
+
+/* Acquiring a first fix. The pulse is the only thing telling the user that a
+  press did anything at all — a GPS fix can take several seconds. */
+a.tsmap-control-locate-locating .tsmap-locate-icon {
+  color: var(--tsmap-accent);
+  animation: tsmap-locate-pulse 1s ease-in-out infinite;
+}
+
+@keyframes tsmap-locate-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+
+/* Denied or unavailable. Struck through rather than merely greyed: grey reads
+  as "disabled, try later" when the real state is "this will not work until
+  you change a browser setting". */
+/*
+ * The state class lands on the <a> itself (see LocateControl._setState), so
+ * these select the anchor rather than a parent. Written as `.tsmap-control-
+ * locate-denied .tsmap-locate-icon` first time round, which silently matched
+ * nothing and left a denied control looking merely idle.
+ */
+a.tsmap-control-locate-denied .tsmap-locate-icon {
+  color: var(--tsmap-fg-disabled);
+}
+
+a.tsmap-control-locate-denied::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+  /* Cut out from the strike so it reads as a line crossing the glyph rather
+    than a line drawn on top of it. */
+  background: var(--tsmap-fg-muted);
+  box-shadow: 0 -2px 0 var(--tsmap-surface);
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+/* The accuracy halo around the reported position. */
+.tsmap-locate-accuracy {
+  fill: var(--tsmap-accent);
+  fill-opacity: 0.12;
+  stroke: var(--tsmap-accent);
+  stroke-opacity: 0.35;
+  stroke-width: 1;
+}
+
+/* The "you are here" dot. A fixed screen size at every zoom — the accuracy
+  halo is the thing that carries scale — with a white ring so it stays legible
+  over both a near-black basemap and a pale one. */
+.tsmap-locate-dot {
+  background: var(--tsmap-accent);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
+  box-sizing: border-box;
+}
+
+/* The halo breathing outwards. Drawn on a child rather than ::after because
+  the icon element itself is positioned by the marker layer, and a transform
+  on it would fight the marker's own translate. */
+.tsmap-locate-dot-pulse {
+  position: absolute;
+  inset: -2px;
+  border-radius: 50%;
+  background: var(--tsmap-accent);
+  opacity: 0.4;
+  animation: tsmap-locate-dot-pulse 2s ease-out infinite;
+}
+
+@keyframes tsmap-locate-dot-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.4;
+  }
+
+  100% {
+    transform: scale(3);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  a.tsmap-control-locate-locating .tsmap-locate-icon {
+    animation: none;
+  }
+
+  .tsmap-locate-dot-pulse {
+    animation: none;
+  }
+}
+
+
+/* geocoder control
+  ==========================================================================
+  The search box. Sized to sit comfortably on a phone, where it is usually the
+  widest piece of chrome on the map.
+  ========================================================================== */
+
+.tsmap-control-geocoder {
+  overflow: visible;
+  min-width: 44px;
+}
+
+.tsmap-control-geocoder-form {
+  display: none;
+}
+
+.tsmap-control-geocoder-expanded .tsmap-control-geocoder-form {
+  display: block;
+}
+
+.tsmap-control-geocoder-input {
+  width: 240px;
+  max-width: 60vw;
+  height: 40px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: 8px;
+  background: var(--tsmap-surface);
+  color: var(--tsmap-fg);
+  font: inherit;
+  box-sizing: border-box;
+
+  &::placeholder {
+    color: var(--tsmap-fg-muted);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--tsmap-accent);
+    outline-offset: -2px;
+  }
+}
+
+/* The magnifier, shown only in collapsed mode. */
+.tsmap-geocoder-icon {
+  display: inline-block;
+  width: 15px;
+  height: 15px;
+  border: 2px solid currentcolor;
+  border-radius: 50%;
+  position: relative;
+  vertical-align: middle;
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: -5px;
+    bottom: -4px;
+    width: 2px;
+    height: 7px;
+    border-radius: 1px;
+    background: currentcolor;
+    transform: rotate(-45deg);
+  }
+}
+
+.tsmap-control-geocoder-expanded .tsmap-control-geocoder-toggle {
+  display: none;
+}
+
+/* A spinner would be more literal, but the input is already the thing the eye
+  is on — dimming its text says "working" without adding a moving part. */
+.tsmap-control-geocoder-busy .tsmap-control-geocoder-input {
+  color: var(--tsmap-fg-muted);
+}
+
+.tsmap-control-geocoder-list {
+  display: none;
+  list-style: none;
+  margin: 6px 0 0;
+  padding: 4px 0;
+  border-radius: 8px;
+  background: var(--tsmap-surface);
+  box-shadow: var(--tsmap-shadow);
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.tsmap-control-geocoder-open .tsmap-control-geocoder-list {
+  display: block;
+}
+
+.tsmap-control-geocoder-item {
+  padding: 8px 12px;
+  color: var(--tsmap-fg);
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:hover,
+  &.tsmap-control-geocoder-item-active {
+    background: var(--tsmap-surface-hover);
+  }
+}
+
+.tsmap-control-geocoder-marker {
+  background: var(--tsmap-accent);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 4px rgb(0 0 0 / 40%);
+  box-sizing: border-box;
+}
+
+/* navigation control
+  ==========================================================================
+  Zoom pair plus a compass. The needle is drawn in CSS for the same reason the
+  locate crosshair is: it has to recolour with the theme and stay sharp while
+  being rotated by a transform.
+  ========================================================================== */
+
+.tsmap-control-navigation a.tsmap-control-navigation-zoom-in,
+.tsmap-control-navigation a.tsmap-control-navigation-zoom-out {
+  color: var(--tsmap-fg-muted);
+  font:
+    400 21px / 40px -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    sans-serif;
+}
+
+.tsmap-control-navigation a.tsmap-control-navigation-compass {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tsmap-compass-needle {
+  width: 4px;
+  height: 22px;
+  position: relative;
+  transition: transform 120ms ease-out;
+
+  /* North half carries the colour; the south half is muted, which is how a
+    compass reads as a compass rather than a pin. */
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::before {
+    top: 0;
+    border-bottom: 11px solid #ea4335;
+  }
+
+  &::after {
+    bottom: 0;
+    border-top: 11px solid var(--tsmap-fg-disabled);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tsmap-compass-needle {
+    transition: none;
+  }
+}
+
+/* fullscreen control
+  ========================================================================== */
+
+.tsmap-fullscreen-icon {
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: relative;
+
+  /* Four corner brackets, drawn as two boxes clipped by their own borders. */
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    width: 5px;
+    height: 5px;
+    border: 2px solid currentcolor;
+  }
+
+  &::before {
+    top: 0;
+    left: 0;
+    border-right: 0;
+    border-bottom: 0;
+  }
+
+  &::after {
+    right: 0;
+    bottom: 0;
+    border-top: 0;
+    border-left: 0;
+  }
+}
+
+.tsmap-control-fullscreen-active .tsmap-fullscreen-icon {
+  &::before {
+    border-right: 0;
+    border-bottom: 0;
+    transform: rotate(180deg);
+  }
+
+  &::after {
+    transform: rotate(180deg);
+  }
+}
+
+/*
+ * Fallback for browsers and embeds where the Fullscreen API is unavailable —
+ * an iframe without `allowfullscreen`, or iPhone Safari, which has never
+ * implemented it. Browser chrome stays visible, but the map fills the viewport.
+ */
+.tsmap-pseudo-fullscreen {
+  position: fixed !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  z-index: 99999;
+}