@hotosm/hanko-auth 0.4.7 → 0.4.9

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hotosm/hanko-auth",
3
- "version": "0.4.7",
3
+ "version": "0.4.9",
4
4
  "description": "Web component for HOTOSM SSO authentication with Hanko and OSM integration",
5
5
  "type": "module",
6
6
  "main": "dist/hanko-auth.umd.js",
@@ -21,7 +21,8 @@
21
21
  "dev": "vite",
22
22
  "build": "vite build",
23
23
  "watch": "vite build --watch",
24
- "preview": "vite preview"
24
+ "preview": "vite preview",
25
+ "prepublishOnly": "pnpm build"
25
26
  },
26
27
  "keywords": [
27
28
  "hotosm",
@@ -25,8 +25,10 @@ export const styles = css`
25
25
  display: flex;
26
26
  flex-direction: column;
27
27
  align-items: center;
28
+ width: 100%;
28
29
  gap: var(--hot-spacing-small);
29
30
  padding: var(--hot-spacing-large);
31
+ box-sizing: border-box;
30
32
  }
31
33
 
32
34
  .spinner {
@@ -146,15 +148,20 @@ export const styles = css`
146
148
  font-size: var(--hot-font-size-large);
147
149
  font-weight: var(--hot-font-weight-bold);
148
150
  color: var(--hot-color-gray-600);
151
+ overflow: hidden;
152
+ flex-shrink: 0;
149
153
  }
150
154
 
151
155
  .profile-info {
152
- padding: var(--hot-spacing-x-small) var(--hot-spacing-medium);
156
+ min-width: 0;
153
157
  }
154
158
 
155
159
  .profile-email {
156
160
  font-size: var(--hot-font-size-small);
157
161
  font-weight: var(--hot-font-weight-bold);
162
+ overflow: hidden;
163
+ text-overflow: ellipsis;
164
+ white-space: nowrap;
158
165
  }
159
166
 
160
167
  .osm-section {
@@ -238,6 +245,15 @@ export const styles = css`
238
245
  .osm-status-badge.required {
239
246
  background-color: var(--hot-color-warning-600);
240
247
  }
248
+ /* Avatar image — fills the circle, hides the initial letter */
249
+ .avatar-img {
250
+ width: 100%;
251
+ height: 100%;
252
+ border-radius: 50%;
253
+ object-fit: cover;
254
+ display: block;
255
+ }
256
+
241
257
  .header-avatar {
242
258
  width: var(--hot-spacing-2x-large);
243
259
  height: var(--hot-spacing-2x-large);
@@ -247,8 +263,10 @@ export const styles = css`
247
263
  align-items: center;
248
264
  justify-content: center;
249
265
  font-size: var(--hot-font-size-small);
266
+ overflow: hidden;
250
267
  font-weight: var(--hot-font-weight-semibold);
251
268
  color: white;
269
+ flex-shrink: 0;
252
270
  }
253
271
 
254
272
  .login-link {
@@ -267,8 +285,14 @@ export const styles = css`
267
285
  display: inline-block;
268
286
  cursor: pointer;
269
287
  transition: all 0.2s;
270
- font-weight: var(--login-btn-font-weight, var(--font-weight, var(--hot-font-weight-medium)));
271
- font-family: var(--login-btn-font-family, var(--font-family, var(--hot-font-sans)));
288
+ font-weight: var(
289
+ --login-btn-font-weight,
290
+ var(--font-weight, var(--hot-font-weight-medium))
291
+ );
292
+ font-family: var(
293
+ --login-btn-font-family,
294
+ var(--font-family, var(--hot-font-sans))
295
+ );
272
296
  }
273
297
 
274
298
  /* Button variants - filled */
@@ -493,4 +517,9 @@ export const styles = css`
493
517
  box-sizing: border-box;
494
518
  text-decoration: none;
495
519
  }
520
+
521
+ /* Style Hanko's internal link button (e.g. "Create account") */
522
+ hanko-auth::part(link) {
523
+ font-weight: bold;
524
+ }
496
525
  `;