@hotosm/hanko-auth 0.4.6 → 0.4.8
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 +25 -9
- package/dist/hanko-auth.esm.js +632 -589
- package/dist/hanko-auth.iife.js +95 -57
- package/dist/hanko-auth.umd.js +98 -60
- package/package.json +1 -1
- package/src/hanko-auth.styles.ts +39 -22
- package/src/hanko-auth.ts +146 -116
package/package.json
CHANGED
package/src/hanko-auth.styles.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { css } from "lit";
|
|
|
3
3
|
export const styles = css`
|
|
4
4
|
:host {
|
|
5
5
|
display: block;
|
|
6
|
-
font-family: var(--hot-font-sans);
|
|
6
|
+
font-family: var(--font-family, var(--hot-font-sans));
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.container {
|
|
@@ -38,34 +38,26 @@ export const styles = css`
|
|
|
38
38
|
animation: spin 1s linear infinite;
|
|
39
39
|
margin: 0 auto;
|
|
40
40
|
}
|
|
41
|
-
/* Container that mimics the
|
|
41
|
+
/* Container that mimics the avatar/dropdown-trigger dimensions */
|
|
42
42
|
.loading-placeholder {
|
|
43
43
|
display: inline-grid;
|
|
44
44
|
place-items: center;
|
|
45
|
-
/*
|
|
46
|
-
padding: var(
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
margin: var(--login-btn-margin, 0);
|
|
51
|
-
font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
|
|
52
|
-
font-family: var(--login-btn-font-family, inherit);
|
|
53
|
-
border-radius: var(
|
|
54
|
-
--login-btn-border-radius,
|
|
55
|
-
var(--hot-border-radius-medium)
|
|
56
|
-
);
|
|
45
|
+
/* Match dropdown-trigger padding so size is stable pre/post load */
|
|
46
|
+
padding: var(--hot-spacing-x-small);
|
|
47
|
+
width: var(--hot-spacing-2x-large);
|
|
48
|
+
height: var(--hot-spacing-2x-large);
|
|
49
|
+
box-sizing: content-box;
|
|
57
50
|
}
|
|
58
51
|
|
|
59
52
|
/* Invisible text to reserve button width */
|
|
60
53
|
.loading-placeholder-text {
|
|
61
|
-
|
|
62
|
-
grid-area: 1 / 1;
|
|
54
|
+
display: none;
|
|
63
55
|
}
|
|
64
56
|
|
|
65
57
|
.spinner-small {
|
|
66
58
|
grid-area: 1 / 1;
|
|
67
|
-
width:
|
|
68
|
-
height:
|
|
59
|
+
width: var(--hot-spacing-2x-large);
|
|
60
|
+
height: var(--hot-spacing-2x-large);
|
|
69
61
|
border: 2px solid var(--hot-color-gray-200);
|
|
70
62
|
border-top: 2px solid var(--hot-color-gray-600);
|
|
71
63
|
border-radius: 50%;
|
|
@@ -93,7 +85,8 @@ export const styles = css`
|
|
|
93
85
|
border: none;
|
|
94
86
|
border-radius: 6px;
|
|
95
87
|
font-size: 14px;
|
|
96
|
-
font-
|
|
88
|
+
font-family: var(--font-family, var(--hot-font-sans));
|
|
89
|
+
font-weight: var(--font-weight, 500);
|
|
97
90
|
cursor: pointer;
|
|
98
91
|
transition: all 0.2s;
|
|
99
92
|
}
|
|
@@ -153,6 +146,7 @@ export const styles = css`
|
|
|
153
146
|
font-size: var(--hot-font-size-large);
|
|
154
147
|
font-weight: var(--hot-font-weight-bold);
|
|
155
148
|
color: var(--hot-color-gray-600);
|
|
149
|
+
overflow: hidden;
|
|
156
150
|
}
|
|
157
151
|
|
|
158
152
|
.profile-info {
|
|
@@ -245,6 +239,15 @@ export const styles = css`
|
|
|
245
239
|
.osm-status-badge.required {
|
|
246
240
|
background-color: var(--hot-color-warning-600);
|
|
247
241
|
}
|
|
242
|
+
/* Avatar image — fills the circle, hides the initial letter */
|
|
243
|
+
.avatar-img {
|
|
244
|
+
width: 100%;
|
|
245
|
+
height: 100%;
|
|
246
|
+
border-radius: 50%;
|
|
247
|
+
object-fit: cover;
|
|
248
|
+
display: block;
|
|
249
|
+
}
|
|
250
|
+
|
|
248
251
|
.header-avatar {
|
|
249
252
|
width: var(--hot-spacing-2x-large);
|
|
250
253
|
height: var(--hot-spacing-2x-large);
|
|
@@ -254,6 +257,7 @@ export const styles = css`
|
|
|
254
257
|
align-items: center;
|
|
255
258
|
justify-content: center;
|
|
256
259
|
font-size: var(--hot-font-size-small);
|
|
260
|
+
overflow: hidden;
|
|
257
261
|
font-weight: var(--hot-font-weight-semibold);
|
|
258
262
|
color: white;
|
|
259
263
|
}
|
|
@@ -274,8 +278,14 @@ export const styles = css`
|
|
|
274
278
|
display: inline-block;
|
|
275
279
|
cursor: pointer;
|
|
276
280
|
transition: all 0.2s;
|
|
277
|
-
font-weight: var(
|
|
278
|
-
|
|
281
|
+
font-weight: var(
|
|
282
|
+
--login-btn-font-weight,
|
|
283
|
+
var(--font-weight, var(--hot-font-weight-medium))
|
|
284
|
+
);
|
|
285
|
+
font-family: var(
|
|
286
|
+
--login-btn-font-family,
|
|
287
|
+
var(--font-family, var(--hot-font-sans))
|
|
288
|
+
);
|
|
279
289
|
}
|
|
280
290
|
|
|
281
291
|
/* Button variants - filled */
|
|
@@ -397,7 +407,7 @@ export const styles = css`
|
|
|
397
407
|
.dropdown-content.open {
|
|
398
408
|
opacity: 1;
|
|
399
409
|
visibility: visible;
|
|
400
|
-
transform: translateY(-
|
|
410
|
+
transform: translateY(-1px);
|
|
401
411
|
}
|
|
402
412
|
|
|
403
413
|
.dropdown-content button {
|
|
@@ -411,6 +421,7 @@ export const styles = css`
|
|
|
411
421
|
text-align: left;
|
|
412
422
|
transition: background-color 0.2s ease;
|
|
413
423
|
gap: var(--hot-spacing-small);
|
|
424
|
+
font-family: var(--font-family, var(--hot-font-sans, inherit));
|
|
414
425
|
font-size: var(--hot-font-size-small);
|
|
415
426
|
color: var(--hot-color-gray-900);
|
|
416
427
|
}
|
|
@@ -459,6 +470,7 @@ export const styles = css`
|
|
|
459
470
|
border: none;
|
|
460
471
|
cursor: pointer;
|
|
461
472
|
gap: var(--hot-spacing-small);
|
|
473
|
+
font-family: var(--font-family, var(--hot-font-sans, inherit));
|
|
462
474
|
}
|
|
463
475
|
|
|
464
476
|
.bar-trigger:hover,
|
|
@@ -498,4 +510,9 @@ export const styles = css`
|
|
|
498
510
|
box-sizing: border-box;
|
|
499
511
|
text-decoration: none;
|
|
500
512
|
}
|
|
513
|
+
|
|
514
|
+
/* Style Hanko's internal link button (e.g. "Create account") */
|
|
515
|
+
hanko-auth::part(link) {
|
|
516
|
+
font-weight: bold;
|
|
517
|
+
}
|
|
501
518
|
`;
|