@swr-data-lab/components 2.34.2 → 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.
@@ -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',
@@ -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>
@@ -215,8 +215,8 @@ const handleDebugCopyLocationClick = (e) => {
215
215
  top: 0.5em;
216
216
  }
217
217
  :global(.maplibregl-ctrl-top-right) {
218
- right: 0;
219
- top: 0;
218
+ right: 0.5em;
219
+ top: 0.5em;
220
220
  }
221
221
  :global(.maplibregl-ctrl-bottom-left) {
222
222
  bottom: 0.5em;
@@ -225,16 +225,16 @@ const handleDebugCopyLocationClick = (e) => {
225
225
  :global(.maplibregl-ctrl-bottom-right) {
226
226
  bottom: 0.5em;
227
227
  right: 0.5em;
228
+ align-items: flex-end;
228
229
  }
229
230
  :global(.maplibregl-ctrl) {
230
231
  pointer-events: auto;
231
232
  transform: translate(0);
232
233
  }
233
234
  :global(.maplibregl-ctrl-group) {
234
- background: var(--color-surfaceFill);
235
+ background: var(--color-pageFill);
235
236
  border: 1px solid var(--color-textSecondary);
236
237
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.075);
237
- border-radius: var(--br-small);
238
238
  overflow: hidden;
239
239
  }
240
240
  :global(.maplibregl-ctrl-group) :global(button) {
@@ -292,6 +292,9 @@ const handleDebugCopyLocationClick = (e) => {
292
292
  :global(.maplibregl-marker) :global(path) {
293
293
  fill: var(--color-textPrimary);
294
294
  }
295
+ :global(.maplibregl-marker) :global(circle) {
296
+ fill: var(--color-pageFill);
297
+ }
295
298
  :global(.maplibregl-cooperative-gesture-screen) {
296
299
  align-items: center;
297
300
  font-family: var(--swr-sans);
@@ -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>
@@ -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%)',
@@ -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.2",
4
+ "version": "2.34.3",
5
5
  "author": "SWR Data Lab",
6
6
  "license": "UNLICENSED",
7
7
  "type": "module",