@swr-data-lab/components 2.34.1 → 2.34.3

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.
Files changed (7) hide show
  1. package/dist/DesignTokens/Tokens.js +2 -2
  2. package/dist/maplibre/GeocoderControl/GeocoderControl.svelte +20 -20
  3. package/dist/maplibre/Map/Map.svelte +15 -6
  4. package/dist/maplibre/MapControl/MapControl.svelte +1 -3
  5. package/dist/maplibre/MapStyle/SWRDataLabDark.js +2 -2
  6. package/dist/maplibre/ScaleControl/ScaleControl.svelte +1 -0
  7. package/package.json +1 -1
package/dist/DesignTokens/Tokens.js CHANGED
@@ -169,8 +169,8 @@ const semantics = {
169
169
  light: '#ffffff'
170
170
  },
171
171
  surfaceHover: {
172
- dark: '#0d0d0e',
173
- light: '#ebebeb'
172
+ dark: '#121212',
173
+ light: '#eee'
174
174
  },
175
175
  raisedSurfaceFill: {
176
176
  dark: '#393a3b',
package/dist/maplibre/GeocoderControl/GeocoderControl.svelte CHANGED
@@ -23,15 +23,13 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
23
23
  <MapControl control={geocoder} position="top-left" />
24
24
 
25
25
  <style>:global(.maplibregl-ctrl-geocoder) {
26
- background-color: var(--color-surfaceFill);
26
+ background-color: var(--color-pageFill);
27
27
  position: relative;
28
28
  width: 100%;
29
29
  z-index: 1;
30
30
  font-family: var(--swr-sans);
31
- font-size: var(--fs-small-1);
32
- border-radius: var(--br-small);
31
+ font-size: var(--fs-base);
33
32
  border: 1px solid var(--color-textSecondary);
34
- box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.075);
35
33
  }
36
34
  :global(.maplibregl-ctrl-geocoder) :global(button) {
37
35
  cursor: pointer;
@@ -42,20 +40,21 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
42
40
  padding: 0.4em 0.65em;
43
41
  }
44
42
  :global(.maplibregl-ctrl-geocoder--input) {
45
- width: calc(100% - 3.7em);
46
43
  height: 100%;
47
44
  font-family: inherit;
48
45
  font-size: inherit;
49
46
  background-color: transparent;
50
47
  color: var(--color-textPrimary);
51
48
  border: 0;
52
- height: 1.95em;
53
- padding: 0 1.95em;
54
- padding-top: 0.1em;
49
+ height: 2em;
50
+ padding: 0 1.85em;
55
51
  text-overflow: ellipsis;
56
52
  white-space: nowrap;
57
53
  overflow: hidden;
58
54
  }
55
+ :global(.maplibregl-ctrl-geocoder--input::-webkit-search-cancel-button), :global(.maplibregl-ctrl-geocoder--input::-webkit-search-decoration) {
56
+ appearance: none;
57
+ }
59
58
  :global(.maplibregl-ctrl-geocoder--input::placeholder) {
60
59
  opacity: 1;
61
60
  color: var(--color-textSecondary);
@@ -74,15 +73,13 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
74
73
  border: 0;
75
74
  }
76
75
  :global(.maplibregl-ctrl-geocoder) :global(.suggestions) {
77
- background: var(--color-surfaceFill);
78
- border: 1px solid rgba(0, 0, 0, 0.75);
79
- box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
80
- border-radius: var(--br-small);
81
- left: 0;
76
+ background: var(--color-pageFill);
77
+ border: 1px solid var(--color-textSecondary);
78
+ left: -1px;
82
79
  list-style: none;
83
80
  position: absolute;
84
81
  width: 100%;
85
- top: calc(100% + 0.5em);
82
+ top: 100%;
86
83
  z-index: 1000;
87
84
  overflow: hidden;
88
85
  }
@@ -94,9 +91,9 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
94
91
  :global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li) > :global(a) {
95
92
  cursor: default;
96
93
  display: block;
97
- padding: 0.5em 0.75em;
98
- color: var(--gray-dark-5);
99
- padding-bottom: 0.5em;
94
+ font-size: var(--fs-small-1);
95
+ padding: 0.7em 0.75em;
96
+ padding-bottom: 0.65em;
100
97
  border-bottom: 1px solid var(--color-surfaceBorder);
101
98
  }
102
99
  :global(.maplibregl-ctrl-geocoder) :global(.suggestions) > :global(li:last-child) > :global(a) {
@@ -146,15 +143,18 @@ const geocoder = new MaplibreGeocoder(geocoderAPI, {
146
143
  position: absolute;
147
144
  top: 50%;
148
145
  transform: translateY(-50%);
149
- height: 1em;
150
146
  }
151
147
  :global(.maplibregl-ctrl-geocoder--icon) :global(path) {
152
148
  fill: var(--color-textPrimary);
153
149
  }
154
150
  :global(.maplibregl-ctrl-geocoder--icon-close) {
155
151
  right: 0;
152
+ height: 1.15em;
153
+ opacity: 0.5;
156
154
  }
157
155
  :global(.maplibregl-ctrl-geocoder--icon-search) {
158
- left: 0.5em;
159
- height: 1.5em;
156
+ left: 0.4em;
157
+ height: 1.25em;
158
+ top: 51%;
159
+ width: auto;
160
160
  }</style>
package/dist/maplibre/Map/Map.svelte CHANGED
@@ -131,7 +131,6 @@ const handleDebugCopyLocationClick = (e) => {
131
131
  .debug {
132
132
  position: absolute;
133
133
  top: 0;
134
- right: 0;
135
134
  background: rgba(0, 0, 0, 0.75);
136
135
  color: white;
137
136
  z-index: 1000;
@@ -139,7 +138,14 @@ const handleDebugCopyLocationClick = (e) => {
139
138
  font-size: 10px;
140
139
  font-family: monospace;
141
140
  display: flex;
142
- gap: 1em;
141
+ flex-flow: column;
142
+ }
143
+ @media (min-width: 600px) {
144
+ .debug {
145
+ gap: 1em;
146
+ right: 0;
147
+ flex-flow: row;
148
+ }
143
149
  }
144
150
  .debug li {
145
151
  list-style: none;
@@ -209,8 +215,8 @@ const handleDebugCopyLocationClick = (e) => {
209
215
  top: 0.5em;
210
216
  }
211
217
  :global(.maplibregl-ctrl-top-right) {
212
- right: 0;
213
- top: 0;
218
+ right: 0.5em;
219
+ top: 0.5em;
214
220
  }
215
221
  :global(.maplibregl-ctrl-bottom-left) {
216
222
  bottom: 0.5em;
@@ -219,16 +225,16 @@ const handleDebugCopyLocationClick = (e) => {
219
225
  :global(.maplibregl-ctrl-bottom-right) {
220
226
  bottom: 0.5em;
221
227
  right: 0.5em;
228
+ align-items: flex-end;
222
229
  }
223
230
  :global(.maplibregl-ctrl) {
224
231
  pointer-events: auto;
225
232
  transform: translate(0);
226
233
  }
227
234
  :global(.maplibregl-ctrl-group) {
228
- background: var(--color-surfaceFill);
235
+ background: var(--color-pageFill);
229
236
  border: 1px solid var(--color-textSecondary);
230
237
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
231
- border-radius: var(--br-small);
232
238
  overflow: hidden;
233
239
  }
234
240
  :global(.maplibregl-ctrl-group) :global(button) {
@@ -286,6 +292,9 @@ const handleDebugCopyLocationClick = (e) => {
286
292
  :global(.maplibregl-marker) :global(path) {
287
293
  fill: var(--color-textPrimary);
288
294
  }
295
+ :global(.maplibregl-marker) :global(circle) {
296
+ fill: var(--color-pageFill);
297
+ }
289
298
  :global(.maplibregl-cooperative-gesture-screen) {
290
299
  align-items: center;
291
300
  font-family: var(--swr-sans);
package/dist/maplibre/MapControl/MapControl.svelte CHANGED
@@ -23,7 +23,5 @@ $effect(() => {
23
23
  </script>
24
24
 
25
25
  <div bind:this={el} class={`maplibregl-ctrl ${className}`}>
26
- {#if children}
27
- {@render children()}
28
- {/if}
26
+ {@render children?.()}
29
27
  </div>
package/dist/maplibre/MapStyle/SWRDataLabDark.js CHANGED
@@ -13,13 +13,13 @@ const tokens = {
13
13
  sans_bold: ['SWR Sans Bold'],
14
14
  background: {
15
15
  stops: [
16
- [8, 'hsl(210, 9%, 13%)'],
16
+ [8, 'hsl(210, 3%, 10%)'],
17
17
  [10, '#1e1f22']
18
18
  ]
19
19
  },
20
20
  water: 'hsl(210, 12%, 7%)',
21
21
  water_light: 'hsl(210, 12%, 8%)',
22
- water_ocean: 'hsl(214, 25%, 7%)',
22
+ water_ocean: 'hsl(214, 5%, 5%)',
23
23
  marsh: 'hsl(180, 3%, 35%)',
24
24
  grass: 'hsl(170, 20%, 14%)',
25
25
  grass_dark: 'hsl(170, 16%, 12%)',
package/dist/maplibre/ScaleControl/ScaleControl.svelte CHANGED
@@ -12,4 +12,5 @@ let { maxWidth = 100, unit = 'metric', position = 'bottom-left' } = $props();
12
12
  font-weight: 400;
13
13
  font-size: var(--fs-small-3);
14
14
  font-family: var(--swr-text);
15
+ margin-bottom: 0.2em;
15
16
  }</style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@swr-data-lab/components",
3
3
  "description": "SWR Data Lab component library",
4
- "version": "2.34.1",
4
+ "version": "2.34.3",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",