@fieldia/map 0.26.0 → 0.26.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/package.json +4 -4
- package/src/lib/styles.d.mts +7 -1
- package/src/lib/styles.d.ts +7 -1
- package/src/lib/styles.js +9 -3
- package/src/lib/styles.js.map +1 -1
- package/src/lib/styles.mjs +9 -3
- package/src/lib/styles.mjs.map +1 -1
package/README.md
CHANGED
|
@@ -261,7 +261,9 @@ pin, or the bubble, that holds the place they were on.
|
|
|
261
261
|
|
|
262
262
|
Keys never live in Fieldia: pass one restricted to your sites, or a function
|
|
263
263
|
fetching a short-lived token from your server. Each provider's credits are shown
|
|
264
|
-
in the map's corner, and its mark where its terms ask
|
|
264
|
+
in the map's corner, and its mark where its terms ask: in small type, each link
|
|
265
|
+
and the mark 24px tall, a target a finger can press (WCAG 2.2) though a pin
|
|
266
|
+
comes near it. Read your provider's
|
|
265
267
|
terms on keeping search results: a place field keeps what it finds (Mapbox's
|
|
266
268
|
permanent geocoding is asked for by default). OpenStreetMap's public map images,
|
|
267
269
|
Photon's public server and Nominatim are for trying things out: their policies
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fieldia/map",
|
|
3
|
-
"version": "0.26.
|
|
3
|
+
"version": "0.26.1",
|
|
4
4
|
"description": "Fieldia's maps: a place and an area as fields, and a list's records on a map, on any map provider. Leaflet, loaded only where a map is shown.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://fieldia.dev",
|
|
@@ -21,9 +21,9 @@
|
|
|
21
21
|
"./package.json": "./package.json"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@fieldia/core": "0.26.
|
|
25
|
-
"@fieldia/viewer": "0.26.
|
|
26
|
-
"@fieldia/widgets": "0.26.
|
|
24
|
+
"@fieldia/core": "0.26.1",
|
|
25
|
+
"@fieldia/viewer": "0.26.1",
|
|
26
|
+
"@fieldia/widgets": "0.26.1",
|
|
27
27
|
"leaflet": "^1.9.4",
|
|
28
28
|
"tslib": "^2.8.1"
|
|
29
29
|
},
|
package/src/lib/styles.d.mts
CHANGED
|
@@ -3,8 +3,14 @@
|
|
|
3
3
|
* tokens and the dark scheme reach the map's buttons, search, shapes and
|
|
4
4
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
5
5
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
6
|
+
*
|
|
7
|
+
* The credits keep their small type, each link a target a finger can press:
|
|
8
|
+
* 24px tall at the least (WCAG 2.2's 24 by 24 CSS px; a pin can come too near
|
|
9
|
+
* for room round a smaller one to do), its words at its middle and on the
|
|
10
|
+
* line of the words beside it, the strip as tall as its links; the provider's
|
|
11
|
+
* mark too where it is a link, its picture where it was.
|
|
6
12
|
*/
|
|
7
|
-
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding:
|
|
13
|
+
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 0 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 1px; z-index: 1000; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n/* The tools under the zoom: drawn as its buttons are, pressed while on. */\n.fd-map-zoom .fd-map-tool { margin-top: 4px; }\n.fd-map-zoom .fd-map-tool svg { width: 18px; height: 18px; }\n.fd-map-zoom .fd-map-tool[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-map-zoom .fd-map-tool[hidden] { display: none; }\n.fd-map-box.fd-map-fixed { position: fixed; inset: 0; z-index: 2147483000; height: auto; border-radius: 0; }\n.fd-map-box[data-full] { border-radius: 0; }\n.fd-map-box[data-measuring] .fd-map-mark { pointer-events: none; }\n";
|
|
8
14
|
/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
|
|
9
15
|
export declare function installMapStyles(doc: Document): void;
|
|
10
16
|
/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
|
package/src/lib/styles.d.ts
CHANGED
|
@@ -3,8 +3,14 @@
|
|
|
3
3
|
* tokens and the dark scheme reach the map's buttons, search, shapes and
|
|
4
4
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
5
5
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
6
|
+
*
|
|
7
|
+
* The credits keep their small type, each link a target a finger can press:
|
|
8
|
+
* 24px tall at the least (WCAG 2.2's 24 by 24 CSS px; a pin can come too near
|
|
9
|
+
* for room round a smaller one to do), its words at its middle and on the
|
|
10
|
+
* line of the words beside it, the strip as tall as its links; the provider's
|
|
11
|
+
* mark too where it is a link, its picture where it was.
|
|
6
12
|
*/
|
|
7
|
-
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding:
|
|
13
|
+
export declare const MAP_CSS = "\n.fd-map-field { display: grid; gap: 8px; min-width: 0; }\n.fd-map-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }\n.fd-map-tools .fd-button { min-height: 32px; padding-inline: 10px; }\n.fd-map-tools .fd-button[aria-pressed=\"true\"] { background: var(--fd-accent-soft); border-color: var(--fd-accent); color: var(--fd-accent); }\n.fd-map-tools .fd-button svg { width: 16px; height: 16px; flex: none; }\n.fd-map-search { position: relative; flex: 1 1 220px; min-width: 0; }\n.fd-map-results {\n position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 1100; margin: 0; padding: 4px; list-style: none;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); max-height: 240px; overflow: auto;\n}\n.fd-map-results [role=\"option\"] { padding: 6px 8px; border-radius: 4px; cursor: pointer; line-height: 1.35; display: grid; gap: 1px; }\n.fd-map-result-name { color: var(--fd-text); font-weight: 600; overflow-wrap: anywhere; }\n.fd-map-result-detail { color: var(--fd-muted); font-size: 12.5px; overflow-wrap: anywhere; }\n.fd-map-results [role=\"option\"][aria-selected=\"true\"], .fd-map-results [role=\"option\"]:hover { background: var(--fd-accent-soft); }\n.fd-map-results .fd-map-results-note { padding: 6px 8px; color: var(--fd-muted); cursor: default; }\n.fd-map-box {\n position: relative; height: var(--fd-map-height, 280px); min-height: 160px; overflow: hidden; isolation: isolate;\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); background: var(--fd-fill);\n}\n.fd-map-box.leaflet-container:focus { outline: none; }\n.fd-map-box.leaflet-container[data-keys]:focus { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-box.leaflet-container { font: inherit; background: var(--fd-fill); }\n.fd-map-zoom { position: absolute; top: 8px; z-index: 1000; display: grid; gap: 4px; }\n.fd-map-zoom[data-side=\"right\"] { right: 8px; }\n.fd-map-zoom[data-side=\"left\"] { left: 8px; }\n.fd-map-zoom button {\n width: 32px; height: 32px; display: grid; place-items: center; padding: 0; cursor: pointer; font: 600 18px/1 system-ui, sans-serif;\n background: var(--fd-surface); color: var(--fd-text); border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);\n}\n.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }\n.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }\n.fd-map-credits {\n position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 0 6px; font-size: 11px; line-height: 1.5;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;\n}\n.fd-map-credits a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; }\n.fd-map-logo { position: absolute; left: 6px; bottom: 1px; z-index: 1000; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; text-decoration: none; }\n.fd-map-logo img { height: 18px; width: auto; display: block; }\n.fd-map-logo span {\n font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;\n background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text);\n}\n.fd-map-veil {\n position: absolute; inset: 0; z-index: 1001; display: grid; place-items: center; padding: 16px; text-align: center;\n background: rgba(0, 0, 0, 0.5); color: #fff; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.2s;\n}\n.fd-map-veil[data-show] { opacity: 1; }\n.fd-map-crosshair { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; z-index: 900; pointer-events: none; display: none; }\n.fd-map-crosshair::before, .fd-map-crosshair::after { content: \"\"; position: absolute; background: var(--fd-accent); box-shadow: 0 0 0 1px var(--fd-surface); }\n.fd-map-crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }\n.fd-map-crosshair::after { top: 10px; left: 0; height: 2px; width: 22px; }\n.fd-map-box[data-keys]:focus .fd-map-crosshair { display: block; }\n.fd-map-hint {\n position: absolute; top: 8px; left: 8px; right: 52px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center;\n padding: 6px 10px; font-size: 13px; line-height: 1.4; background: var(--fd-surface); color: var(--fd-text);\n border: 1px solid var(--fd-border); border-radius: var(--fd-control-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);\n}\n.fd-map-box[data-side=\"left\"] .fd-map-hint { left: 52px; right: 8px; }\n.fd-map-hint p { margin: 0; flex: 1 1 180px; min-width: 0; }\n.fd-map-hint .fd-button { min-height: 28px; padding: 2px 10px; }\n.fd-map-coords { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }\n.fd-map-coords label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fd-muted); }\n.fd-map-coords .fd-input { width: 12ch; font-variant-numeric: tabular-nums; }\n.fd-map-coords .fd-input[aria-invalid=\"true\"] { border-color: var(--fd-error); }\n.fd-map-note { margin: 0; font-size: 12.5px; color: var(--fd-muted); }\n.fd-map-note[data-tone=\"error\"] { color: var(--fd-error); }\n.fd-map-pin { width: 28px; height: 40px; }\n.fd-map-pin svg { display: block; width: 28px; height: 40px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.3)); }\n.fd-map-pin .fd-map-pin-body { fill: var(--fd-accent); stroke: var(--fd-surface); stroke-width: 1.5; }\n.fd-map-pin .fd-map-pin-dot { fill: var(--fd-surface); }\n.fd-map-pin:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; border-radius: 4px; }\npath.fd-map-shape { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.16; }\npath.fd-map-shape.fd-map-movable { cursor: move; }\npath.fd-map-accuracy { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 1; fill-opacity: 0.08; stroke-dasharray: 4 4; pointer-events: none; }\npath.fd-map-trace { stroke: var(--fd-accent); fill: var(--fd-accent); stroke-width: 2; fill-opacity: 0.08; stroke-dasharray: 6 5; pointer-events: none; }\n.fd-map-grip { width: 24px; height: 24px; display: grid; place-items: center; cursor: grab; }\n.fd-map-grip::after {\n content: \"\"; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box;\n background: var(--fd-surface); border: 2px solid var(--fd-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n}\n.fd-map-grip[data-closes]::after { width: 18px; height: 18px; background: var(--fd-accent); border-color: var(--fd-surface); }\n.fd-map-grip:focus-visible { outline: none; }\n.fd-map-grip:focus-visible::after { box-shadow: 0 0 0 3px var(--fd-focus); }\n.fd-map-field select.fd-input { width: auto; max-width: 100%; }\n/* One finger scrolls the page past a map, as on any page; two move it. While a shape is drawn, the map takes every touch. */\n.fd-map-box.leaflet-container, .fd-map-box.leaflet-touch-drag.leaflet-touch-zoom { touch-action: pan-x pan-y; }\n.fd-map-box.leaflet-container[data-drawing] { touch-action: none; }\n.fd-map-box .leaflet-marker-draggable { touch-action: none; }\n.fd-map-grip-add::after { width: 10px; height: 10px; opacity: 0.7; }\n/* Each image overlaps the next by a pixel (leaflet.ts): drawn plainly over it, not added to it as Leaflet's own seam fix adds light. */\n.fd-map-box.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }\n/* The tools under the zoom: drawn as its buttons are, pressed while on. */\n.fd-map-zoom .fd-map-tool { margin-top: 4px; }\n.fd-map-zoom .fd-map-tool svg { width: 18px; height: 18px; }\n.fd-map-zoom .fd-map-tool[aria-pressed=\"true\"] { color: var(--fd-accent); border-color: var(--fd-accent); background: var(--fd-accent-soft); }\n.fd-map-zoom .fd-map-tool[hidden] { display: none; }\n.fd-map-box.fd-map-fixed { position: fixed; inset: 0; z-index: 2147483000; height: auto; border-radius: 0; }\n.fd-map-box[data-full] { border-radius: 0; }\n.fd-map-box[data-measuring] .fd-map-mark { pointer-events: none; }\n";
|
|
8
14
|
/** The maps' own stylesheet, once per document: the tools, the search and the box are drawn before Leaflet has loaded. */
|
|
9
15
|
export declare function installMapStyles(doc: Document): void;
|
|
10
16
|
/** Leaflet's stylesheet, once per document, before the maps' own (which add to it): it comes with Leaflet. */
|
package/src/lib/styles.js
CHANGED
|
@@ -11,6 +11,12 @@ exports.installFormMapStyles = installFormMapStyles;
|
|
|
11
11
|
* tokens and the dark scheme reach the map's buttons, search, shapes and
|
|
12
12
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
13
13
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
14
|
+
*
|
|
15
|
+
* The credits keep their small type, each link a target a finger can press:
|
|
16
|
+
* 24px tall at the least (WCAG 2.2's 24 by 24 CSS px; a pin can come too near
|
|
17
|
+
* for room round a smaller one to do), its words at its middle and on the
|
|
18
|
+
* line of the words beside it, the strip as tall as its links; the provider's
|
|
19
|
+
* mark too where it is a link, its picture where it was.
|
|
14
20
|
*/
|
|
15
21
|
exports.MAP_CSS = `
|
|
16
22
|
.fd-map-field { display: grid; gap: 8px; min-width: 0; }
|
|
@@ -47,11 +53,11 @@ exports.MAP_CSS = `
|
|
|
47
53
|
.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
48
54
|
.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
49
55
|
.fd-map-credits {
|
|
50
|
-
position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding:
|
|
56
|
+
position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 0 6px; font-size: 11px; line-height: 1.5;
|
|
51
57
|
background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;
|
|
52
58
|
}
|
|
53
|
-
.fd-map-credits a { color: inherit; }
|
|
54
|
-
.fd-map-logo { position: absolute; left: 6px; bottom:
|
|
59
|
+
.fd-map-credits a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; }
|
|
60
|
+
.fd-map-logo { position: absolute; left: 6px; bottom: 1px; z-index: 1000; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; text-decoration: none; }
|
|
55
61
|
.fd-map-logo img { height: 18px; width: auto; display: block; }
|
|
56
62
|
.fd-map-logo span {
|
|
57
63
|
font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;
|
package/src/lib/styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}
|
package/src/lib/styles.mjs
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
* tokens and the dark scheme reach the map's buttons, search, shapes and
|
|
4
4
|
* grips. Fixed on purpose: the veil over the map that asks for two fingers
|
|
5
5
|
* or Ctrl (white words on a dark veil, as an image's caption has them).
|
|
6
|
+
*
|
|
7
|
+
* The credits keep their small type, each link a target a finger can press:
|
|
8
|
+
* 24px tall at the least (WCAG 2.2's 24 by 24 CSS px; a pin can come too near
|
|
9
|
+
* for room round a smaller one to do), its words at its middle and on the
|
|
10
|
+
* line of the words beside it, the strip as tall as its links; the provider's
|
|
11
|
+
* mark too where it is a link, its picture where it was.
|
|
6
12
|
*/
|
|
7
13
|
export const MAP_CSS = `
|
|
8
14
|
.fd-map-field { display: grid; gap: 8px; min-width: 0; }
|
|
@@ -39,11 +45,11 @@ export const MAP_CSS = `
|
|
|
39
45
|
.fd-map-zoom button:hover { color: var(--fd-accent); border-color: var(--fd-accent); }
|
|
40
46
|
.fd-map-zoom button:focus-visible, .fd-map-hint button:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 1px; }
|
|
41
47
|
.fd-map-credits {
|
|
42
|
-
position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding:
|
|
48
|
+
position: absolute; right: 0; bottom: 0; z-index: 1000; max-width: 72%; padding: 0 6px; font-size: 11px; line-height: 1.5;
|
|
43
49
|
background: color-mix(in srgb, var(--fd-surface) 88%, transparent); color: var(--fd-text); border-top-left-radius: 4px;
|
|
44
50
|
}
|
|
45
|
-
.fd-map-credits a { color: inherit; }
|
|
46
|
-
.fd-map-logo { position: absolute; left: 6px; bottom:
|
|
51
|
+
.fd-map-credits a { color: inherit; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; }
|
|
52
|
+
.fd-map-logo { position: absolute; left: 6px; bottom: 1px; z-index: 1000; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; text-decoration: none; }
|
|
47
53
|
.fd-map-logo img { height: 18px; width: auto; display: block; }
|
|
48
54
|
.fd-map-logo span {
|
|
49
55
|
font: 700 12px/1.4 system-ui, sans-serif; padding: 0 5px; border-radius: 3px;
|
package/src/lib/styles.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"styles.mjs","sourceRoot":"","sources":["../../../../../libs/map/src/lib/styles.ts"],"names":[],"mappings":"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"}
|