@authhero/widget 0.38.7 → 0.38.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/dist/authhero-widget/authhero-widget.esm.js +1 -1
- package/dist/authhero-widget/index.esm.js +1 -1
- package/dist/authhero-widget/{p-f94037cd.entry.js → p-74f95441.entry.js} +1 -1
- package/dist/cjs/authhero-widget.cjs.entry.js +1 -1
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/collection/components/authhero-widget/authhero-widget.css +41 -9
- package/dist/collection/page-chrome/chrome.js +165 -0
- package/dist/collection/page-chrome/colors.js +94 -0
- package/dist/collection/page-chrome/css.js +523 -0
- package/dist/collection/page-chrome/html.js +121 -0
- package/dist/collection/page-chrome/index.js +13 -0
- package/dist/collection/page-chrome/types.js +1 -0
- package/dist/components/authhero-widget.js +1 -1
- package/dist/components/index.js +1 -1
- package/dist/esm/authhero-widget.entry.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/page-chrome/chrome.d.ts +73 -0
- package/dist/types/page-chrome/colors.d.ts +10 -0
- package/dist/types/page-chrome/css.d.ts +42 -0
- package/dist/types/page-chrome/html.d.ts +55 -0
- package/dist/types/page-chrome/index.d.ts +13 -0
- package/dist/types/page-chrome/types.d.ts +23 -0
- package/hydrate/index.js +1 -1
- package/hydrate/index.mjs +1 -1
- package/package.json +6 -2
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import type { DarkModePreference, ChipStyle, LanguageOption } from "./types";
|
|
2
|
+
/**
|
|
3
|
+
* Dark-mode toggle: cycles auto -> dark -> light and swaps which of the three
|
|
4
|
+
* icons is visible. `data-ah-dm` lets the inline handler find every instance
|
|
5
|
+
* on the page, so the chip and the footer copy stay in sync when either is
|
|
6
|
+
* clicked.
|
|
7
|
+
*/
|
|
8
|
+
export declare function renderDarkModeToggle(opts: {
|
|
9
|
+
darkMode: DarkModePreference;
|
|
10
|
+
size?: number;
|
|
11
|
+
}): string;
|
|
12
|
+
/**
|
|
13
|
+
* Language picker. Returns "" for fewer than two languages — a select with a
|
|
14
|
+
* single option is chrome that does nothing.
|
|
15
|
+
*/
|
|
16
|
+
export declare function renderLanguagePicker(opts: {
|
|
17
|
+
language?: string;
|
|
18
|
+
languages: LanguageOption[];
|
|
19
|
+
size?: number;
|
|
20
|
+
}): string;
|
|
21
|
+
/** Top-left logo chip. Only rendered when the caller opts into the chip variant. */
|
|
22
|
+
export declare function renderLogoChip(opts: {
|
|
23
|
+
logoUrl?: string | null;
|
|
24
|
+
clientName: string;
|
|
25
|
+
variant?: ChipStyle;
|
|
26
|
+
}): string;
|
|
27
|
+
/** Top-right settings chip: dark-mode toggle plus the language picker. */
|
|
28
|
+
export declare function renderSettingsChip(opts: {
|
|
29
|
+
darkMode: DarkModePreference;
|
|
30
|
+
language?: string;
|
|
31
|
+
languages?: LanguageOption[];
|
|
32
|
+
variant?: ChipStyle;
|
|
33
|
+
}): string;
|
|
34
|
+
/** Bottom-left "powered by" trust mark. */
|
|
35
|
+
export declare function renderPoweredByChip(opts: {
|
|
36
|
+
url: string;
|
|
37
|
+
href?: string;
|
|
38
|
+
alt?: string;
|
|
39
|
+
height?: number;
|
|
40
|
+
variant?: ChipStyle;
|
|
41
|
+
}): string;
|
|
42
|
+
/** Bottom-right terms/privacy link. `termsLabel` arrives already translated. */
|
|
43
|
+
export declare function renderLegalChip(opts: {
|
|
44
|
+
termsAndConditionsUrl?: string;
|
|
45
|
+
termsLabel: string;
|
|
46
|
+
variant?: ChipStyle;
|
|
47
|
+
}): string;
|
|
48
|
+
/**
|
|
49
|
+
* Phone footer bar.
|
|
50
|
+
*
|
|
51
|
+
* On a phone the corner chips have nowhere to float: the widget fills the
|
|
52
|
+
* screen, so a fixed pill either overlaps the form or gets hidden (which is
|
|
53
|
+
* what used to happen — terms and the trust mark were simply dropped below
|
|
54
|
+
* 480px, and the settings chip sat on top of the card). This collects the
|
|
55
|
+
* same four pieces into one strip pinned to the bottom of the viewport.
|
|
56
|
+
*
|
|
57
|
+
* Rendered on every page but only displayed under the mobile breakpoint, so
|
|
58
|
+
* the same HTML serves both layouts and nothing depends on user-agent
|
|
59
|
+
* sniffing. Returns "" when there is nothing to put in it.
|
|
60
|
+
*/
|
|
61
|
+
export declare function renderMobileFooter(opts: {
|
|
62
|
+
darkMode: DarkModePreference;
|
|
63
|
+
language?: string;
|
|
64
|
+
languages?: LanguageOption[];
|
|
65
|
+
termsAndConditionsUrl?: string;
|
|
66
|
+
termsLabel: string;
|
|
67
|
+
poweredBy?: {
|
|
68
|
+
url: string;
|
|
69
|
+
href?: string;
|
|
70
|
+
alt?: string;
|
|
71
|
+
height?: number;
|
|
72
|
+
};
|
|
73
|
+
}): string;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Dark-mode CSS variables and the contrast maths behind them.
|
|
3
|
+
*
|
|
4
|
+
* Pure functions, moved out of the authhero page module so the widget demo
|
|
5
|
+
* renders the same dark mode the real login page does.
|
|
6
|
+
*/
|
|
7
|
+
export declare const DARK_MODE_CSS_VARS: Record<string, string>;
|
|
8
|
+
export declare function darkContrastRatio(h1: string, h2: string): number;
|
|
9
|
+
export declare function lightenHexDark(hex: string, pct: number): string;
|
|
10
|
+
export declare function darkModeCssVarRules(selector: string, primaryColor?: string): string;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { BrandingPageBackground, ThemePageBackground } from "./html";
|
|
2
|
+
/** Layout values for the page `<body>` — shared by the body-fragment path
|
|
3
|
+
* (applied inline) and the full-document path (emitted into the stylesheet). */
|
|
4
|
+
export type BodyLayout = {
|
|
5
|
+
background: string;
|
|
6
|
+
fontFamily: string;
|
|
7
|
+
justifyContent: string;
|
|
8
|
+
padding: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Resolve the page-body layout (centering, background, font) from the theme
|
|
12
|
+
* and branding. Keeps the inline `<body>` style (fragment path) and the
|
|
13
|
+
* `auth0:head` stylesheet rule (full-document path) in sync so an Auth0-style
|
|
14
|
+
* template centers on the page background just like the default chrome does.
|
|
15
|
+
*
|
|
16
|
+
* The "left"/"right" offsets below are the wide-viewport values; the mobile
|
|
17
|
+
* block in `buildPageCss` collapses them back to centered under 768px.
|
|
18
|
+
*/
|
|
19
|
+
export declare function buildBodyLayout(opts: {
|
|
20
|
+
themePageBackground?: ThemePageBackground;
|
|
21
|
+
brandingPageBackground?: BrandingPageBackground;
|
|
22
|
+
fontUrl?: string | null;
|
|
23
|
+
}): BodyLayout;
|
|
24
|
+
export declare function buildPageCss(opts: {
|
|
25
|
+
primaryColor?: string;
|
|
26
|
+
themePrimary?: string;
|
|
27
|
+
widgetBackground: string;
|
|
28
|
+
/**
|
|
29
|
+
* Whether `theme.page_background.background_image_url` is set. Drives the
|
|
30
|
+
* phone layout: with an image the card floats on the background, without
|
|
31
|
+
* one it goes full-bleed. See the MOBILE block below.
|
|
32
|
+
*/
|
|
33
|
+
hasBgImage?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Page-body layout (centering, background, font). Only the full-document
|
|
36
|
+
* (Auth0-style) path passes this — there the tenant owns `<body>`, so the
|
|
37
|
+
* centering/background that the body-fragment path applies inline must come
|
|
38
|
+
* from the stylesheet instead. The fragment path omits it: its inline
|
|
39
|
+
* `<body>` style already covers layout and wins over a stylesheet rule.
|
|
40
|
+
*/
|
|
41
|
+
bodyLayout?: BodyLayout;
|
|
42
|
+
}): string;
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* HTML/CSS escaping and sanitization for the page chrome.
|
|
3
|
+
*
|
|
4
|
+
* Self-contained on purpose: this module is consumed both by the authhero
|
|
5
|
+
* server (which has its own copy of these primitives in
|
|
6
|
+
* `sanitization-utils.ts` for its other routes) and by the widget demo
|
|
7
|
+
* server. Security primitives are deliberately NOT shared across the package
|
|
8
|
+
* boundary — they are small, stable, and a broken import here would silently
|
|
9
|
+
* weaken escaping on every login page.
|
|
10
|
+
*/
|
|
11
|
+
/** Escape HTML special characters to prevent XSS. */
|
|
12
|
+
export declare function escapeHtml(str: string): string;
|
|
13
|
+
/**
|
|
14
|
+
* Escape a URL for safe use inside a CSS `url("...")` function, so a crafted
|
|
15
|
+
* image URL can't break out of the url() context and inject rules.
|
|
16
|
+
*/
|
|
17
|
+
export declare function escapeCssUrl(url: string): string;
|
|
18
|
+
/** Sanitize a URL for use in href/src attributes. Returns "" if unsafe. */
|
|
19
|
+
export declare function sanitizeUrl(url: string | undefined): string;
|
|
20
|
+
/**
|
|
21
|
+
* Sanitize a URL for use inside a CSS `url("...")`. Returns "" if unsafe.
|
|
22
|
+
*
|
|
23
|
+
* Deliberately not `sanitizeUrl` + `escapeCssUrl`: HTML entities are never
|
|
24
|
+
* decoded inside a `<style>` element, so HTML-escaping here would put the
|
|
25
|
+
* literal text `&` into the stylesheet and corrupt every query string it
|
|
26
|
+
* touches — a signed `?sig=x&expires=y` would be requested as
|
|
27
|
+
* `?sig=x&expires=y` and the image would fail to load.
|
|
28
|
+
*
|
|
29
|
+
* Angle brackets still have to go, or a `</style>` inside the URL would end
|
|
30
|
+
* the element and let the rest of it parse as markup. They are percent-encoded
|
|
31
|
+
* rather than entity-encoded so the URL stays a valid URL.
|
|
32
|
+
*/
|
|
33
|
+
export declare function sanitizeCssUrl(url: string | undefined): string;
|
|
34
|
+
/** Sanitize a CSS color value. Returns "" if it doesn't look like a color. */
|
|
35
|
+
export declare function sanitizeCssColor(color: string | undefined): string;
|
|
36
|
+
/** Branding-shaped page background: a flat color or a gradient descriptor. */
|
|
37
|
+
export type BrandingPageBackground = string | {
|
|
38
|
+
type?: string;
|
|
39
|
+
start?: string;
|
|
40
|
+
end?: string;
|
|
41
|
+
angle_deg?: number;
|
|
42
|
+
};
|
|
43
|
+
/** Theme-shaped page background, which may carry an image. */
|
|
44
|
+
export type ThemePageBackground = {
|
|
45
|
+
background_color?: string;
|
|
46
|
+
background_image_url?: string;
|
|
47
|
+
page_layout?: string;
|
|
48
|
+
};
|
|
49
|
+
/** Build a CSS `background` value from a branding page_background. */
|
|
50
|
+
export declare function buildPageBackground(pageBackground: BrandingPageBackground | undefined): string;
|
|
51
|
+
/**
|
|
52
|
+
* Build a CSS `background` value from a theme page_background, falling back
|
|
53
|
+
* to the branding one. Supports `background_image_url`.
|
|
54
|
+
*/
|
|
55
|
+
export declare function buildThemePageBackground(themePageBackground: ThemePageBackground | undefined, fallbackBrandingBackground: BrandingPageBackground | undefined): string;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Login page chrome — the furniture around the widget card.
|
|
3
|
+
*
|
|
4
|
+
* Shared between the authhero login page (which renders it for real) and the
|
|
5
|
+
* widget demo server (which previews it), so the two can't drift. Everything
|
|
6
|
+
* here is framework-free: plain strings in, plain strings out, no JSX runtime
|
|
7
|
+
* and no i18n stack.
|
|
8
|
+
*/
|
|
9
|
+
export * from "./types";
|
|
10
|
+
export * from "./html";
|
|
11
|
+
export * from "./colors";
|
|
12
|
+
export * from "./chrome";
|
|
13
|
+
export * from "./css";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/** Shared types for the login page chrome. */
|
|
2
|
+
/** Page-level dark-mode preference: follow the OS, or an explicit override. */
|
|
3
|
+
export type DarkModePreference = "auto" | "light" | "dark";
|
|
4
|
+
/** Where the tenant logo renders. */
|
|
5
|
+
export type LogoPosition = "widget" | "chip" | "none";
|
|
6
|
+
/**
|
|
7
|
+
* How a corner chip renders its surface.
|
|
8
|
+
* - "auto" (default): pill when there's a background image, plain text on a
|
|
9
|
+
* solid background — driven by the page-level `data-bg` attribute.
|
|
10
|
+
* - "plain": always text-only, regardless of background.
|
|
11
|
+
* - "pill": always a translucent pill, regardless of background.
|
|
12
|
+
*
|
|
13
|
+
* Templates choose this per slot via `{%- authhero:legal style="plain" -%}`.
|
|
14
|
+
*/
|
|
15
|
+
export type ChipStyle = "auto" | "plain" | "pill";
|
|
16
|
+
/**
|
|
17
|
+
* One entry in the language picker. The label is already localized by the
|
|
18
|
+
* caller — this module does no i18n of its own.
|
|
19
|
+
*/
|
|
20
|
+
export type LanguageOption = {
|
|
21
|
+
value: string;
|
|
22
|
+
label: string;
|
|
23
|
+
};
|
package/hydrate/index.js
CHANGED
|
@@ -7228,7 +7228,7 @@ function escapeAttr(value) {
|
|
|
7228
7228
|
.replace(/>/g, ">");
|
|
7229
7229
|
}
|
|
7230
7230
|
|
|
7231
|
-
const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family,
|
|
7231
|
+
const authheroWidgetCss = () => `:host{display:block;font-family:var( --ah-font-family, "ulp-font", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif );font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.fields-list{display:flex;flex-direction:column}.fields-list-scroll{max-height:var(--ah-choice-list-max-height, 320px);overflow-y:auto;gap:var(--ah-choice-list-gap, 8px);padding-right:4px}.choice-list-search{width:100%;padding:16px;margin-bottom:12px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out}.choice-list-search:hover{border-color:var(--ah-color-border-hover, #65676e)}.choice-list-search:focus{border-color:var(--ah-color-primary, var(--ah-color-link, #635dff))}.choice-list-empty{padding:16px;text-align:center;font-size:14px;color:var(--ah-color-text-muted, #65676e)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host(:not([floating])){display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}:host(:not([floating])) .widget-container{box-shadow:none;border-radius:0;border:0;width:100%;margin:0}:host([floating]) .widget-container{width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
|
|
7232
7232
|
|
|
7233
7233
|
/**
|
|
7234
7234
|
* When a screen's field section is made up entirely of choice buttons
|
package/hydrate/index.mjs
CHANGED
|
@@ -7226,7 +7226,7 @@ function escapeAttr(value) {
|
|
|
7226
7226
|
.replace(/>/g, ">");
|
|
7227
7227
|
}
|
|
7228
7228
|
|
|
7229
|
-
const authheroWidgetCss = () => `:host{display:block;font-family:var(--ah-font-family,
|
|
7229
|
+
const authheroWidgetCss = () => `:host{display:block;font-family:var( --ah-font-family, "ulp-font", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif );font-size:var(--ah-font-size-base, 16px);line-height:var(--ah-line-height-base, 1.5);color:var(--ah-color-text, #1e212a);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.widget-container{width:var(--ah-widget-max-width, 400px);margin:0 auto;background-color:var(--ah-color-bg, #ffffff);border-radius:var(--ah-widget-radius, 5px);border:var(--ah-widget-border-width, 0) solid var(--ah-widget-border-color, transparent);box-shadow:var(--ah-widget-shadow, 0 4px 22px 0 rgba(0, 0, 0, 0.11));box-sizing:border-box}.widget-header{padding:var(--ah-header-padding, 40px 48px 24px)}.widget-body{padding:var(--ah-body-padding, 0 48px 40px)}.logo-wrapper{display:var(--ah-logo-display, flex);justify-content:var(--ah-logo-align, center);margin-bottom:8px}.logo{display:block;height:var(--ah-logo-height, 52px);max-width:100%;width:auto;object-fit:contain}.title{font-size:var(--ah-font-size-title, 24px);font-weight:var(--ah-font-weight-title, 700);text-align:var(--ah-title-align, center);margin:var(--ah-title-margin, 24px 0 24px);color:var(--ah-color-text-header, var(--ah-color-header, #1e212a));line-height:1.2}.description{font-size:var(--ah-font-size-subtitle, 16px);font-weight:var(--ah-font-weight-subtitle, 400);text-align:var(--ah-title-align, center);margin:var(--ah-description-margin, 0 0 8px);color:var(--ah-color-text, #1e212a);line-height:1.5}.message{padding:12px 16px;border-radius:4px;margin-bottom:16px;font-size:14px;line-height:1.5}.message-error{background-color:var(--ah-color-error-bg, #ffeaea);color:var(--ah-color-error, #d03c38);border-left:3px solid var(--ah-color-error, #d03c38)}.message-success{background-color:var(--ah-color-success-bg, #e6f9f1);color:var(--ah-color-success, #13a769);border-left:3px solid var(--ah-color-success, #13a769)}form{display:flex;flex-direction:column}.form-content{display:flex;flex-direction:column}.social-section{display:flex;flex-direction:column;gap:8px;order:var(--ah-social-order, 2)}.fields-section{display:flex;flex-direction:column;order:var(--ah-fields-order, 0)}.fields-list{display:flex;flex-direction:column}.fields-list-scroll{max-height:var(--ah-choice-list-max-height, 320px);overflow-y:auto;gap:var(--ah-choice-list-gap, 8px);padding-right:4px}.choice-list-search{width:100%;padding:16px;margin-bottom:12px;font-size:16px;font-family:inherit;color:var(--ah-color-input-text, var(--ah-color-text, #1e212a));background-color:var(--ah-color-input-bg, #ffffff);border:var(--ah-input-border-width, 1px) solid var(--ah-color-border, #c9cace);border-radius:var(--ah-input-radius, 3px);outline:none;box-sizing:border-box;transition:border-color 0.15s ease-out, box-shadow 0.15s ease-out}.choice-list-search:hover{border-color:var(--ah-color-border-hover, #65676e)}.choice-list-search:focus{border-color:var(--ah-color-primary, var(--ah-color-link, #635dff))}.choice-list-empty{padding:16px;text-align:center;font-size:14px;color:var(--ah-color-text-muted, #65676e)}.divider{display:flex;align-items:center;text-align:center;margin:16px 0;order:var(--ah-divider-order, 1)}.divider::before,.divider::after{content:"";flex:1;border-bottom:1px solid var(--ah-color-border-muted, #c9cace)}.divider-text{padding:0 10px;font-size:12px;font-weight:400;color:var(--ah-color-text-muted, #65676e);text-transform:uppercase;letter-spacing:0}.links{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:16px}.link-wrapper{font-size:var(--ah-font-size-body, 14px);font-weight:var(--ah-font-weight-body, 400);color:var(--ah-color-text, #1e212a)}.link{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:var(--ah-font-size-link, 14px);font-weight:var(--ah-font-weight-link, 400);transition:color 150ms ease}.link:hover{text-decoration:underline}.link:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.widget-footer{margin-top:16px;text-align:center;font-size:12px;color:var(--ah-color-text-muted, #65676e)}.widget-footer a{color:var(--ah-color-link, #635dff);text-decoration:var(--ah-link-decoration, none);font-size:12px;transition:color 150ms ease}.widget-footer a:hover{text-decoration:underline}.widget-footer a:focus-visible{outline:2px solid var(--ah-color-focus-ring, var(--ah-color-link, #635dff));outline-offset:2px;border-radius:2px}.loading-spinner{width:32px;height:32px;margin:24px auto;border:3px solid var(--ah-color-border-muted, #e0e1e3);border-top-color:var(--ah-color-primary, #635dff);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.error-message{text-align:center;color:var(--ah-color-error, #d03c38);padding:16px;font-size:14px}@media (max-width: 480px){:host(:not([floating])){display:block;width:100%;min-height:100vh;background-color:var(--ah-color-bg, #ffffff)}:host(:not([floating])) .widget-container{box-shadow:none;border-radius:0;border:0;width:100%;margin:0}:host([floating]) .widget-container{width:100%;margin:0}.widget-header{padding:24px 16px 16px}.widget-body{padding:0 16px 24px}}`;
|
|
7230
7230
|
|
|
7231
7231
|
/**
|
|
7232
7232
|
* When a screen's field section is made up entirely of choice buttons
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@authhero/widget",
|
|
3
|
-
"version": "0.38.
|
|
3
|
+
"version": "0.38.9",
|
|
4
4
|
"description": "Server-Driven UI widget for AuthHero authentication flows",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -26,6 +26,10 @@
|
|
|
26
26
|
"require": "./hydrate/index.js"
|
|
27
27
|
},
|
|
28
28
|
"./loader": "./loader/index.js",
|
|
29
|
+
"./page-chrome": {
|
|
30
|
+
"import": "./dist/collection/page-chrome/index.js",
|
|
31
|
+
"types": "./dist/types/page-chrome/index.d.ts"
|
|
32
|
+
},
|
|
29
33
|
"./dist/esm/loader.js": "./dist/esm/loader.js",
|
|
30
34
|
"./server": {
|
|
31
35
|
"import": "./dist/collection/server/index.js",
|
|
@@ -38,7 +42,7 @@
|
|
|
38
42
|
},
|
|
39
43
|
"dependencies": {
|
|
40
44
|
"country-list": "^2.4.1",
|
|
41
|
-
"@authhero/adapter-interfaces": "4.
|
|
45
|
+
"@authhero/adapter-interfaces": "4.14.0"
|
|
42
46
|
},
|
|
43
47
|
"devDependencies": {
|
|
44
48
|
"@hono/node-server": "^1.19.14",
|