@hotosm/hanko-auth 0.4.6 → 0.4.7

package/README.md

@@ -204,21 +204,36 @@ The component uses Shadow DOM and can be customized using CSS custom properties.
 
 ### CSS Custom Properties
 
-| Property                      | Description                        | Default                              |
-| ----------------------------- | ---------------------------------- | ------------------------------------ |
-| `--login-btn-margin`          | Margin around the login button     | `0`                                  |
+#### Whole component
+
+| Property          | Description                                   | Default                                 |
+| ----------------- | --------------------------------------------- | --------------------------------------- |
+| `--font-family`   | Font family for all text in the component     | `system-ui, -apple-system, sans-serif`  |
+| `--font-weight`   | Font weight for all text in the component     | `500`                                   |
+
+#### Login button
+
+| Property                      | Description                        | Default                                                |
+| ----------------------------- | ---------------------------------- | ------------------------------------------------------ |
+| `--login-btn-margin`          | Margin around the login button     | `0`                                                    |
 | `--login-btn-padding`         | Padding inside the login button    | `var(--hot-spacing-x-small) var(--hot-spacing-medium)` |
-| `--login-btn-bg-color`        | Background color of login button   | `var(--hot-color-primary-1000)`      |
-| `--login-btn-hover-bg-color`  | Background color on hover          | `var(--hot-color-primary-900)`       |
-| `--login-btn-border-radius`   | Border radius of login button      | `var(--hot-border-radius-medium)`    |
-| `--login-btn-text-color`      | Text color of login button         | `white`                              |
-| `--login-btn-text-size`       | Font size of login button text     | `var(--hot-font-size-medium)`        |
-| `--login-btn-font-family`     | Font family of login button        | `inherit`                            |
+| `--login-btn-bg-color`        | Background color of login button   | `var(--hot-color-primary-1000)`                        |
+| `--login-btn-hover-bg-color`  | Background color on hover          | `var(--hot-color-primary-900)`                         |
+| `--login-btn-border-radius`   | Border radius of login button      | `var(--hot-border-radius-medium)`                      |
+| `--login-btn-text-color`      | Text color of login button         | `white`                                                |
+| `--login-btn-text-size`       | Font size of login button text     | `var(--hot-font-size-medium)`                          |
+| `--login-btn-font-family`     | Font family of login button        | falls back to `--font-family`                          |
+| `--login-btn-font-weight`     | Font weight of login button        | falls back to `--font-weight`                          |
 
 **Example:**
 
 ```css
 hotosm-auth {
+  /* Whole component */
+  --font-family: 'Inter', sans-serif;
+  --font-weight: 400;
+
+  /* Login button overrides */
   --login-btn-margin: 8px;
   --login-btn-padding: 12px 24px;
   --login-btn-bg-color: #d73f3f;
@@ -227,6 +242,7 @@ hotosm-auth {
   --login-btn-text-color: #ffffff;
   --login-btn-text-size: 16px;
   --login-btn-font-family: 'Arial', sans-serif;
+  --login-btn-font-weight: 700;
 }
 ```
 

package/dist/hanko-auth.esm.js

@@ -3950,7 +3950,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
 }, Symbol.toStringTag, { value: "Module" })), ms = Vi`
   :host {
     display: block;
-    font-family: var(--hot-font-sans);
+    font-family: var(--font-family, var(--hot-font-sans));
   }
 
   .container {
@@ -3985,34 +3985,26 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     animation: spin 1s linear infinite;
     margin: 0 auto;
   }
-  /* Container that mimics the login button dimensions */
+  /* Container that mimics the avatar/dropdown-trigger dimensions */
   .loading-placeholder {
     display: inline-grid;
     place-items: center;
-    /* Use same styling as login-link button */
-    padding: var(
-      --login-btn-padding,
-      var(--hot-spacing-x-small) var(--hot-spacing-medium)
-    );
-    margin: var(--login-btn-margin, 0);
-    font-size: var(--login-btn-text-size, var(--hot-font-size-medium));
-    font-family: var(--login-btn-font-family, inherit);
-    border-radius: var(
-      --login-btn-border-radius,
-      var(--hot-border-radius-medium)
-    );
+    /* Match dropdown-trigger padding so size is stable pre/post load */
+    padding: var(--hot-spacing-x-small);
+    width: var(--hot-spacing-2x-large);
+    height: var(--hot-spacing-2x-large);
+    box-sizing: content-box;
   }
 
   /* Invisible text to reserve button width */
   .loading-placeholder-text {
-    visibility: hidden;
-    grid-area: 1 / 1;
+    display: none;
   }
 
   .spinner-small {
     grid-area: 1 / 1;
-    width: 1em;
-    height: 1em;
+    width: var(--hot-spacing-2x-large);
+    height: var(--hot-spacing-2x-large);
     border: 2px solid var(--hot-color-gray-200);
     border-top: 2px solid var(--hot-color-gray-600);
     border-radius: 50%;
@@ -4040,7 +4032,8 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     border: none;
     border-radius: 6px;
     font-size: 14px;
-    font-weight: 500;
+    font-family: var(--font-family, var(--hot-font-sans));
+    font-weight: var(--font-weight, 500);
     cursor: pointer;
     transition: all 0.2s;
   }
@@ -4221,8 +4214,8 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     display: inline-block;
     cursor: pointer;
     transition: all 0.2s;
-    font-weight: var(--hot-font-weight-medium);
-    font-family: var(--login-btn-font-family, inherit);
+    font-weight: var(--login-btn-font-weight, var(--font-weight, var(--hot-font-weight-medium)));
+    font-family: var(--login-btn-font-family, var(--font-family, var(--hot-font-sans)));
   }
 
   /* Button variants - filled */
@@ -4344,7 +4337,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   .dropdown-content.open {
     opacity: 1;
     visibility: visible;
-    transform: translateY(-1);
+    transform: translateY(-1px);
   }
 
   .dropdown-content button {
@@ -4358,6 +4351,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     text-align: left;
     transition: background-color 0.2s ease;
     gap: var(--hot-spacing-small);
+    font-family: var(--font-family, var(--hot-font-sans, inherit));
     font-size: var(--hot-font-size-small);
     color: var(--hot-color-gray-900);
   }
@@ -4406,6 +4400,7 @@ const ps = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     border: none;
     cursor: pointer;
     gap: var(--hot-spacing-small);
+    font-family: var(--font-family, var(--hot-font-sans, inherit));
   }
 
   .bar-trigger:hover,
@@ -5279,7 +5274,7 @@ let re = class extends Mt {
         this.log("🕒 Hanko session expired event received"), this.handleSessionExpired();
       }), this._hanko.onUserLoggedOut(() => {
         this.log("🚪 Hanko user logged out event received"), this.handleUserLoggedOut();
-      }), await this.checkSession(), this.user && (this.osmRequired && await this.checkOSMConnection(), await this.fetchProfileDisplayName()), this.loading = !1, this._broadcastState(), this.setupEventListeners();
+      }), await this.checkSession(), this.user && (this.osmRequired && await this.checkOSMConnection(), await this.fetchProfileDisplayName()), await new Promise((s) => setTimeout(s, 3e3)), this.loading = !1, this._broadcastState(), this.setupEventListeners();
     } catch (n) {
       this.logError("Failed to initialize hanko-auth:", n), this.error = n.message, this.loading = !1, this._broadcastState();
     }