@dloizides/auth-web 1.12.1 → 1.13.0

package/dist/index.d.mts

@@ -412,6 +412,17 @@ interface DemoCredentialsHintLabels {
     useCredentials: string;
     /** Accessibility hint for that button. */
     useCredentialsHint: string;
+    /**
+     * The collapsed disclosure trigger (e.g. "Try the demo").
+     *
+     * Keep the word "demo" in it. This one line is the ONLY thing an evaluator
+     * scanning the page has to find, so it must be searchable by the word they
+     * are looking for — a coy label like "Just looking?" is discreet at the cost
+     * of being undiscoverable, which defeats the point of shipping a demo.
+     */
+    toggle: string;
+    /** Accessibility hint for the disclosure trigger. */
+    toggleHint: string;
 }
 declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
 
@@ -1286,7 +1297,35 @@ interface PreferredMethodHintProps {
 declare function PreferredMethodHint({ method, theme: themeProp, labels: labelsProp, testIdPrefix, }: Readonly<PreferredMethodHintProps>): ReactElement | null;
 
 /**
- * `<DemoCredentialsHint>` — the public-demo credentials panel.
+ * How `<DemoCredentialsHint>` presents itself on the login surface.
+ *
+ * The two variants answer opposite questions, and the choice is a product
+ * decision rather than a styling one:
+ *
+ *  - `Panel` assumes the page exists FOR the demo — a sales/marketing console
+ *    where every visitor is an evaluator. It advertises loudly.
+ *  - `Disclosure` assumes the page is a real customer's front door that ALSO
+ *    happens to offer a demo. Real account holders outnumber evaluators, so the
+ *    demo collapses behind one quiet line of text and costs them nothing.
+ *
+ * `Disclosure` is the default because the second case is the common one across
+ * the estate: every product login screen is a page paying customers use daily.
+ *
+ * ⚠️ "Discreet" is achieved with SIZE, WEIGHT and POSITION — never by lowering
+ * contrast. Both variants draw their text from `colors.textSecondary`, a token
+ * every app already holds to the WCAG AA 4.5:1 floor. Dimming this further with
+ * opacity would trade an accessibility guarantee for a visual preference; if a
+ * consuming app's `textSecondary` fails AA, that is the app's token to fix.
+ */
+declare const enum DemoCredentialsHintVariant {
+    /** Always-open inset panel with a brand rail. The original presentation. */
+    Panel = "panel",
+    /** One quiet "try the demo" line that expands the credentials on tap. */
+    Disclosure = "disclosure"
+}
+
+/**
+ * `<DemoCredentialsHint>` — the public-demo credentials surface.
  *
  * Mount on the login surface of a product with an OPEN demo account whose
  * credentials are already published (typically on the marketing site). It shows
@@ -1302,9 +1341,36 @@ declare function PreferredMethodHint({ method, theme: themeProp, labels: labelsP
  * Fails closed: no credentials (or a half-configured pair) renders `null` — zero
  * DOM — so a misconfigured env var can never publish an empty demo panel.
  *
- * Compose it as a child of `<AuthScreen>`, above a `chromeless` `<LoginForm>`;
- * `useDemoCredentials` wires the two together. Read-only mode (no `onUse`) drops
- * the button and just displays the credentials.
+ * ## Two variants, and why the default changed in 1.13.0
+ *
+ * Originally this only rendered an always-open panel above the form. That is
+ * right for a page whose whole purpose IS the demo, and wrong for the far more
+ * common case: a login screen paying customers use every day, where an
+ * unmissable "here are some credentials" block is noise at best and a trust
+ * problem at worst.
+ *
+ * `DemoCredentialsHintVariant.Disclosure` — now the default — collapses the
+ * whole thing to one quiet line ("Try the demo") that expands on tap. Pass
+ * `variant={DemoCredentialsHintVariant.Panel}` to keep the original block.
+ *
+ * ⚠️ Two things this deliberately does NOT do to achieve discretion:
+ *
+ *  - **It does not lower contrast.** The trigger uses `colors.textSecondary`,
+ *    the same AA-held token as every other piece of helper copy. Discretion is
+ *    carried by size, placement and the absence of chrome.
+ *  - **It does not hide from assistive tech.** The trigger is a real focusable
+ *    button carrying `accessibilityState.expanded`, so a screen reader
+ *    announces both that it exists and whether it is open. Visually quiet must
+ *    not mean absent — a demo nobody can find is a demo nobody uses.
+ *
+ * ## Layout stability
+ *
+ * The expanded body renders BELOW the trigger, and the component is designed to
+ * sit BELOW `<LoginForm>` (see the zygos login route). Expanding therefore grows
+ * the card downward and never displaces the username or password inputs the
+ * visitor may already be interacting with. Mounting it ABOVE the form would make
+ * every expansion shove the fields down the page — precisely the jarring
+ * behaviour a disclosure exists to avoid.
  */
 
 interface DemoCredentialsHintProps {
@@ -1313,6 +1379,11 @@ interface DemoCredentialsHintProps {
      * username or password — renders nothing at all.
      */
     credentials?: DemoCredentials;
+    /**
+     * Presentation. Defaults to `Disclosure` (one quiet expandable line); pass
+     * `Panel` for the original always-open block.
+     */
+    variant?: DemoCredentialsHintVariant;
     /** Explicit theme; overrides any `<AuthThemeProvider>`. */
     theme?: AuthTheme;
     /** Localised copy. Partial — unspecified keys fall back to English defaults. */
@@ -1321,13 +1392,13 @@ interface DemoCredentialsHintProps {
     testIdPrefix?: string;
     /**
      * Called with the resolved credentials when the user taps "use these
-     * credentials". Omit to render the panel read-only (no button) — the values
-     * are still selectable, so a visitor can copy them by hand.
+     * credentials". Omit to render read-only (no button) — the values are still
+     * selectable, so a visitor can copy them by hand.
      */
     onUse?: (credentials: DemoCredentials) => void;
 }
-/** Themeable public-demo credentials panel. Renders `null` when there is no demo. */
-declare function DemoCredentialsHint({ credentials, theme: themeProp, labels: labelsProp, testIdPrefix, onUse, }: Readonly<DemoCredentialsHintProps>): ReactElement | null;
+/** Themeable public-demo credentials surface. Renders `null` when there is no demo. */
+declare function DemoCredentialsHint({ credentials, variant, theme: themeProp, labels: labelsProp, testIdPrefix, onUse, }: Readonly<DemoCredentialsHintProps>): ReactElement | null;
 
 /**
  * React context for the `AuthTheme`.
@@ -1438,6 +1509,7 @@ declare const AuthTestIds: {
     readonly demoCredentialsUsername: "auth-demo-credentials-username";
     readonly demoCredentialsPassword: "auth-demo-credentials-password";
     readonly demoCredentialsUseButton: "auth-demo-credentials-use";
+    readonly demoCredentialsToggle: "auth-demo-credentials-toggle";
 };
 /** Apply an optional prefix to a base test ID. */
 declare function withTestIdPrefix(baseId: string, prefix?: string): string;
@@ -2255,4 +2327,4 @@ declare function validatePasswordPolicy(password: string): PasswordPolicyError[]
 /** `true` when the password satisfies every policy rule. */
 declare function isPasswordValid(password: string): boolean;
 
-export { AuthScreen, type AuthScreenProps, AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type BffLogoutClient, type CreateBffAuthClientOptions, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DemoCredentialsHint, type DemoCredentialsHintLabels, type DemoCredentialsHintProps, type DemoCredentialsHintWiring, type DemoCredentialsLoginFormProps, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyCeremonyMode, PasskeyCeremonyStatus, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, type PerformBffLogoutOptions, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, PrefillIntent, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDemoCredentialsOptions, type UseDemoCredentialsResult, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePasskeyCeremonyOptions, type UsePasskeyCeremonyResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolveDemoCredentials, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDemoCredentials, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthScreen, type AuthScreenProps, AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type BffLogoutClient, type CreateBffAuthClientOptions, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DemoCredentialsHint, type DemoCredentialsHintLabels, type DemoCredentialsHintProps, DemoCredentialsHintVariant, type DemoCredentialsHintWiring, type DemoCredentialsLoginFormProps, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyCeremonyMode, PasskeyCeremonyStatus, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, type PerformBffLogoutOptions, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, PrefillIntent, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDemoCredentialsOptions, type UseDemoCredentialsResult, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePasskeyCeremonyOptions, type UsePasskeyCeremonyResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolveDemoCredentials, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDemoCredentials, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };

package/dist/index.d.ts

@@ -412,6 +412,17 @@ interface DemoCredentialsHintLabels {
     useCredentials: string;
     /** Accessibility hint for that button. */
     useCredentialsHint: string;
+    /**
+     * The collapsed disclosure trigger (e.g. "Try the demo").
+     *
+     * Keep the word "demo" in it. This one line is the ONLY thing an evaluator
+     * scanning the page has to find, so it must be searchable by the word they
+     * are looking for — a coy label like "Just looking?" is discreet at the cost
+     * of being undiscoverable, which defeats the point of shipping a demo.
+     */
+    toggle: string;
+    /** Accessibility hint for the disclosure trigger. */
+    toggleHint: string;
 }
 declare const DEFAULT_DEMO_CREDENTIALS_HINT_LABELS: DemoCredentialsHintLabels;
 
@@ -1286,7 +1297,35 @@ interface PreferredMethodHintProps {
 declare function PreferredMethodHint({ method, theme: themeProp, labels: labelsProp, testIdPrefix, }: Readonly<PreferredMethodHintProps>): ReactElement | null;
 
 /**
- * `<DemoCredentialsHint>` — the public-demo credentials panel.
+ * How `<DemoCredentialsHint>` presents itself on the login surface.
+ *
+ * The two variants answer opposite questions, and the choice is a product
+ * decision rather than a styling one:
+ *
+ *  - `Panel` assumes the page exists FOR the demo — a sales/marketing console
+ *    where every visitor is an evaluator. It advertises loudly.
+ *  - `Disclosure` assumes the page is a real customer's front door that ALSO
+ *    happens to offer a demo. Real account holders outnumber evaluators, so the
+ *    demo collapses behind one quiet line of text and costs them nothing.
+ *
+ * `Disclosure` is the default because the second case is the common one across
+ * the estate: every product login screen is a page paying customers use daily.
+ *
+ * ⚠️ "Discreet" is achieved with SIZE, WEIGHT and POSITION — never by lowering
+ * contrast. Both variants draw their text from `colors.textSecondary`, a token
+ * every app already holds to the WCAG AA 4.5:1 floor. Dimming this further with
+ * opacity would trade an accessibility guarantee for a visual preference; if a
+ * consuming app's `textSecondary` fails AA, that is the app's token to fix.
+ */
+declare const enum DemoCredentialsHintVariant {
+    /** Always-open inset panel with a brand rail. The original presentation. */
+    Panel = "panel",
+    /** One quiet "try the demo" line that expands the credentials on tap. */
+    Disclosure = "disclosure"
+}
+
+/**
+ * `<DemoCredentialsHint>` — the public-demo credentials surface.
  *
  * Mount on the login surface of a product with an OPEN demo account whose
  * credentials are already published (typically on the marketing site). It shows
@@ -1302,9 +1341,36 @@ declare function PreferredMethodHint({ method, theme: themeProp, labels: labelsP
  * Fails closed: no credentials (or a half-configured pair) renders `null` — zero
  * DOM — so a misconfigured env var can never publish an empty demo panel.
  *
- * Compose it as a child of `<AuthScreen>`, above a `chromeless` `<LoginForm>`;
- * `useDemoCredentials` wires the two together. Read-only mode (no `onUse`) drops
- * the button and just displays the credentials.
+ * ## Two variants, and why the default changed in 1.13.0
+ *
+ * Originally this only rendered an always-open panel above the form. That is
+ * right for a page whose whole purpose IS the demo, and wrong for the far more
+ * common case: a login screen paying customers use every day, where an
+ * unmissable "here are some credentials" block is noise at best and a trust
+ * problem at worst.
+ *
+ * `DemoCredentialsHintVariant.Disclosure` — now the default — collapses the
+ * whole thing to one quiet line ("Try the demo") that expands on tap. Pass
+ * `variant={DemoCredentialsHintVariant.Panel}` to keep the original block.
+ *
+ * ⚠️ Two things this deliberately does NOT do to achieve discretion:
+ *
+ *  - **It does not lower contrast.** The trigger uses `colors.textSecondary`,
+ *    the same AA-held token as every other piece of helper copy. Discretion is
+ *    carried by size, placement and the absence of chrome.
+ *  - **It does not hide from assistive tech.** The trigger is a real focusable
+ *    button carrying `accessibilityState.expanded`, so a screen reader
+ *    announces both that it exists and whether it is open. Visually quiet must
+ *    not mean absent — a demo nobody can find is a demo nobody uses.
+ *
+ * ## Layout stability
+ *
+ * The expanded body renders BELOW the trigger, and the component is designed to
+ * sit BELOW `<LoginForm>` (see the zygos login route). Expanding therefore grows
+ * the card downward and never displaces the username or password inputs the
+ * visitor may already be interacting with. Mounting it ABOVE the form would make
+ * every expansion shove the fields down the page — precisely the jarring
+ * behaviour a disclosure exists to avoid.
  */
 
 interface DemoCredentialsHintProps {
@@ -1313,6 +1379,11 @@ interface DemoCredentialsHintProps {
      * username or password — renders nothing at all.
      */
     credentials?: DemoCredentials;
+    /**
+     * Presentation. Defaults to `Disclosure` (one quiet expandable line); pass
+     * `Panel` for the original always-open block.
+     */
+    variant?: DemoCredentialsHintVariant;
     /** Explicit theme; overrides any `<AuthThemeProvider>`. */
     theme?: AuthTheme;
     /** Localised copy. Partial — unspecified keys fall back to English defaults. */
@@ -1321,13 +1392,13 @@ interface DemoCredentialsHintProps {
     testIdPrefix?: string;
     /**
      * Called with the resolved credentials when the user taps "use these
-     * credentials". Omit to render the panel read-only (no button) — the values
-     * are still selectable, so a visitor can copy them by hand.
+     * credentials". Omit to render read-only (no button) — the values are still
+     * selectable, so a visitor can copy them by hand.
      */
     onUse?: (credentials: DemoCredentials) => void;
 }
-/** Themeable public-demo credentials panel. Renders `null` when there is no demo. */
-declare function DemoCredentialsHint({ credentials, theme: themeProp, labels: labelsProp, testIdPrefix, onUse, }: Readonly<DemoCredentialsHintProps>): ReactElement | null;
+/** Themeable public-demo credentials surface. Renders `null` when there is no demo. */
+declare function DemoCredentialsHint({ credentials, variant, theme: themeProp, labels: labelsProp, testIdPrefix, onUse, }: Readonly<DemoCredentialsHintProps>): ReactElement | null;
 
 /**
  * React context for the `AuthTheme`.
@@ -1438,6 +1509,7 @@ declare const AuthTestIds: {
     readonly demoCredentialsUsername: "auth-demo-credentials-username";
     readonly demoCredentialsPassword: "auth-demo-credentials-password";
     readonly demoCredentialsUseButton: "auth-demo-credentials-use";
+    readonly demoCredentialsToggle: "auth-demo-credentials-toggle";
 };
 /** Apply an optional prefix to a base test ID. */
 declare function withTestIdPrefix(baseId: string, prefix?: string): string;
@@ -2255,4 +2327,4 @@ declare function validatePasswordPolicy(password: string): PasswordPolicyError[]
 /** `true` when the password satisfies every policy rule. */
 declare function isPasswordValid(password: string): boolean;
 
-export { AuthScreen, type AuthScreenProps, AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type BffLogoutClient, type CreateBffAuthClientOptions, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DemoCredentialsHint, type DemoCredentialsHintLabels, type DemoCredentialsHintProps, type DemoCredentialsHintWiring, type DemoCredentialsLoginFormProps, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyCeremonyMode, PasskeyCeremonyStatus, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, type PerformBffLogoutOptions, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, PrefillIntent, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDemoCredentialsOptions, type UseDemoCredentialsResult, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePasskeyCeremonyOptions, type UsePasskeyCeremonyResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolveDemoCredentials, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDemoCredentials, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };
+export { AuthScreen, type AuthScreenProps, AuthTestIds, type AuthTheme, type AuthThemeColors, AuthThemeProvider, type AuthThemeProviderProps, type AuthThemeRadii, type AuthThemeSpacing, type AuthThemeTypography, BffAuthStatus, type BffDeviceState, type BffLoginConfig, type BffLogoutClient, type CreateBffAuthClientOptions, DEFAULT_AUTH_CARD_MAX_WIDTH, DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, DEFAULT_DEVICE_PIN_ENROLL_LABELS, DEFAULT_DEVICE_PIN_SETTINGS_LABELS, DEFAULT_DEVICE_PIN_UNLOCK_LABELS, DEFAULT_FORGOT_PASSWORD_FIELDS_LABELS, DEFAULT_FORGOT_PASSWORD_LABELS, DEFAULT_LOGIN_LABELS, DEFAULT_OTP_LABELS, DEFAULT_PASSKEY_LOGIN_LABELS, DEFAULT_PASSKEY_SETTINGS_LABELS, DEFAULT_PIN_LABELS, DEFAULT_PREFERRED_METHOD_HINT_LABELS, DEFAULT_PREFERRED_METHOD_SETTINGS_LABELS, DEFAULT_RESET_PASSWORD_LABELS, DEVICE_PIN_ALLOWED_DIGITS, DEVICE_PIN_DEFAULT_DIGITS, DemoCredentialsHint, type DemoCredentialsHintLabels, type DemoCredentialsHintProps, DemoCredentialsHintVariant, type DemoCredentialsHintWiring, type DemoCredentialsLoginFormProps, type DevicePinCapableClient, type DevicePinDisableCapableClient, type DevicePinEnrollCapableClient, DevicePinEnrollErrorKey, DevicePinEnrollForm, type DevicePinEnrollFormProps, type DevicePinEnrollLabels, type DevicePinEnrollResult, DevicePinErrorKey, DevicePinInput, type DevicePinInputProps, DevicePinLengthPicker, type DevicePinLengthPickerProps, DevicePinOffer, type DevicePinOfferProps, DevicePinSettingsCard, type DevicePinSettingsCardProps, type DevicePinSettingsLabels, type DevicePinUnlockCapableClient, type DevicePinUnlockLabels, type DevicePinUnlockResult, DevicePinUnlockScreen, type DevicePinUnlockScreenProps, type DevicePinUnlockedUser, ForgotPasswordFields, type ForgotPasswordFieldsLabels, type ForgotPasswordFieldsProps, ForgotPasswordForm, type ForgotPasswordFormLabels, type ForgotPasswordFormProps, type LoginConfigCapableClient, LoginForm, type LoginFormLabels, type LoginFormProps, OtpForm, type OtpFormLabels, type OtpFormProps, OtpLoginStep, PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PasskeyCeremonyMode, PasskeyCeremonyStatus, type PasskeyErrorCode, PasskeyLoginButton, type PasskeyLoginButtonProps, type PasskeyLoginLabels, PasskeySettingsCard, type PasskeySettingsCardProps, type PasskeySettingsLabels, PasswordPolicyError, type PerformBffLogoutOptions, PinForm, type PinFormLabels, type PinFormProps, type PreferencesClientOptions, type PreferredMethodClient, PreferredMethodHint, type PreferredMethodHintLabels, type PreferredMethodHintProps, PreferredMethodSettingsCard, type PreferredMethodSettingsCardProps, type PreferredMethodSettingsLabels, PrefillIntent, ResetPasswordError, ResetPasswordForm, type ResetPasswordFormLabels, type ResetPasswordFormProps, type RoleRoute, type RoleRouteTable, type UseBffAuthOptions, type UseBffAuthResult, type UseBffForgotPasswordOptions, type UseBffLoginConfigResult, type UseBffResetPasswordOptions, type UseDemoCredentialsOptions, type UseDemoCredentialsResult, type UseDevicePinDisableArgs, type UseDevicePinDisableResult, type UseDevicePinEnrollArgs, type UseDevicePinEnrollResult, type UseDevicePinUnlockArgs, type UseDevicePinUnlockResult, type UseForgotPasswordSubmitArgs, type UseForgotPasswordSubmitResult, type UseOtpLoginOptions, type UseOtpLoginResult, type UsePasskeyCeremonyOptions, type UsePasskeyCeremonyResult, type UsePinLoginOptions, type UsePinLoginResult, type UsePreferredMethodSettingArgs, type UsePreferredMethodSettingResult, type UseResetPasswordFormArgs, type UseResetPasswordFormResult, cachePreferredMethod, clearCachedPreferredMethod, collectUserRoles, createBffAuthClient, createPreferencesClient, defaultAuthTheme, isAllowedPinDigits, isPasswordValid, isValidForgotPasswordEmail, performBffLogout, readCachedPreferredMethod, readPasskeyError, readPasskeyRegistered, resolveAccessibleRoutes, resolveDemoCredentials, resolvePostLoginRoute, startPasskeyLogin, startPasskeyRegistration, syncPreferredMethodFromServer, useAuthTheme, useBffAuth, useBffForgotPassword, useBffLoginConfig, useBffResetPassword, useDemoCredentials, useDevicePinDisable, useDevicePinEnroll, useDevicePinUnlock, useForgotPasswordSubmit, useOtpLogin, usePasskeyCeremony, usePinLogin, usePreferredMethodSetting, useResetPasswordForm, validatePasswordPolicy, withTestIdPrefix };

package/dist/index.js

@@ -282,7 +282,9 @@ var DEFAULT_DEMO_CREDENTIALS_HINT_LABELS = {
   usernameLabel: "Username",
   passwordLabel: "Password",
   useCredentials: "Use these credentials",
-  useCredentialsHint: "Fill the sign-in form with the demo username and password"
+  useCredentialsHint: "Fill the sign-in form with the demo username and password",
+  toggle: "Try the demo",
+  toggleHint: "Show the demo account username and password"
 };
 
 // src/components/labels/resetPasswordLabels.ts
@@ -379,7 +381,9 @@ var AuthTestIds = {
   demoCredentialsHint: "auth-demo-credentials-hint",
   demoCredentialsUsername: "auth-demo-credentials-username",
   demoCredentialsPassword: "auth-demo-credentials-password",
-  demoCredentialsUseButton: "auth-demo-credentials-use"
+  demoCredentialsUseButton: "auth-demo-credentials-use",
+  // The collapsed disclosure trigger (`disclosure` variant only).
+  demoCredentialsToggle: "auth-demo-credentials-toggle"
 };
 function withTestIdPrefix(baseId, prefix) {
   return prefix === void 0 || prefix === "" ? baseId : `${prefix}-${baseId}`;
@@ -3216,7 +3220,62 @@ function PreferredMethodHint({
   }
   return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: withTestIdPrefix(AuthTestIds.preferredMethodHint, testIdPrefix), children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.helperText, children: text }) });
 }
+function DemoCredentialsBody({
+  credentials,
+  labels,
+  styles: styles3,
+  authStyles,
+  testIdPrefix,
+  onUse
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          selectable: true,
+          style: styles3.rowValue,
+          testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
+          children: credentials.username
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          selectable: true,
+          style: styles3.rowValue,
+          testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
+          children: credentials.password
+        }
+      )
+    ] }),
+    onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TouchableOpacity,
+      {
+        accessibilityHint: labels.useCredentialsHint,
+        accessibilityLabel: labels.useCredentials,
+        accessibilityRole: "button",
+        style: [authStyles.secondaryButton, styles3.useButton],
+        testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
+        onPress: onUse,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+      }
+    ) : null
+  ] });
+}
+
+// src/components/DemoCredentialsHintVariant.ts
+var DemoCredentialsHintVariant = /* @__PURE__ */ ((DemoCredentialsHintVariant2) => {
+  DemoCredentialsHintVariant2["Panel"] = "panel";
+  DemoCredentialsHintVariant2["Disclosure"] = "disclosure";
+  return DemoCredentialsHintVariant2;
+})(DemoCredentialsHintVariant || {});
 var PANEL_BORDER_WIDTH = 1;
+var TRIGGER_MIN_HEIGHT = 32;
 var ACCENT_RAIL_WIDTH = 3;
 var TITLE_LETTER_SPACING = 0.8;
 var DESCRIPTION_LINE_HEIGHT_RATIO = 1.45;
@@ -3277,6 +3336,40 @@ function useDemoCredentialsStyles(theme) {
         flexShrink: 1,
         backgroundColor: colors.surface,
         color: colors.text
+      },
+      // ── Disclosure variant ──────────────────────────────────────────────
+      // No panel fill, no border, no brand rail: the collapsed state is one
+      // line of text and nothing else, so on a page a real customer uses it
+      // reads as a footnote rather than as a second call to action.
+      disclosure: {
+        marginTop: spacing.md,
+        alignSelf: "stretch"
+      },
+      disclosureTrigger: {
+        alignSelf: "center",
+        justifyContent: "center",
+        minHeight: TRIGGER_MIN_HEIGHT,
+        paddingHorizontal: spacing.xs
+      },
+      disclosureTriggerText: {
+        fontSize: typography.caption,
+        textDecorationLine: "underline",
+        // `textSecondary`, NOT a dimmed `text`. This is the same token the rest
+        // of the helper copy uses, so it inherits whatever AA contrast the
+        // consuming app already guarantees. Discretion here is carried by the
+        // caption size, the centred placement below the form, and the absence
+        // of any fill or border — never by fading the text toward the
+        // background, which is how "discreet" quietly becomes a contrast bug.
+        color: colors.textSecondary
+      },
+      disclosureBody: {
+        marginTop: spacing.sm,
+        paddingTop: spacing.sm,
+        borderTopWidth: PANEL_BORDER_WIDTH,
+        borderTopColor: colors.border
+      },
+      useButton: {
+        alignSelf: "stretch"
       }
     });
   }, [theme]);
@@ -3297,6 +3390,7 @@ function resolveDemoCredentials(credentials) {
 }
 function DemoCredentialsHint({
   credentials,
+  variant = "disclosure" /* Disclosure */,
   theme: themeProp,
   labels: labelsProp,
   testIdPrefix,
@@ -3305,6 +3399,7 @@ function DemoCredentialsHint({
   const theme = useAuthTheme(themeProp);
   const authStyles = useAuthStyles(theme);
   const styles3 = useDemoCredentialsStyles(theme);
+  const [expanded, setExpanded] = react.useState(false);
   const labels = react.useMemo(
     () => ({ ...DEFAULT_DEMO_CREDENTIALS_HINT_LABELS, ...labelsProp }),
     [labelsProp]
@@ -3315,53 +3410,57 @@ function DemoCredentialsHint({
       onUse(resolved);
     }
   }, [resolved, onUse]);
+  const handleToggle = react.useCallback(() => {
+    setExpanded((current) => !current);
+  }, []);
   if (resolved === null) {
     return null;
   }
+  const body = /* @__PURE__ */ jsxRuntime.jsx(
+    DemoCredentialsBody,
+    {
+      authStyles,
+      credentials: resolved,
+      labels,
+      styles: styles3,
+      testIdPrefix,
+      onUse: onUse === void 0 ? void 0 : handleUse
+    }
+  );
+  if (variant === "panel" /* Panel */) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.View,
+      {
+        style: styles3.panel,
+        testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.description, children: labels.description }),
+          body
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     reactNative.View,
     {
-      style: styles3.panel,
+      style: styles3.disclosure,
       testID: withTestIdPrefix(AuthTestIds.demoCredentialsHint, testIdPrefix),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.title, children: labels.title }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.description, children: labels.description }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.usernameLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
-            {
-              selectable: true,
-              style: styles3.rowValue,
-              testID: withTestIdPrefix(AuthTestIds.demoCredentialsUsername, testIdPrefix),
-              children: resolved.username
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles3.row, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.rowLabel, children: labels.passwordLabel }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.Text,
-            {
-              selectable: true,
-              style: styles3.rowValue,
-              testID: withTestIdPrefix(AuthTestIds.demoCredentialsPassword, testIdPrefix),
-              children: resolved.password
-            }
-          )
-        ] }),
-        onUse !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.TouchableOpacity,
           {
-            accessibilityHint: labels.useCredentialsHint,
-            accessibilityLabel: labels.useCredentials,
+            accessibilityHint: labels.toggleHint,
+            accessibilityLabel: labels.toggle,
             accessibilityRole: "button",
-            style: authStyles.secondaryButton,
-            testID: withTestIdPrefix(AuthTestIds.demoCredentialsUseButton, testIdPrefix),
-            onPress: handleUse,
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: authStyles.secondaryButtonText, children: labels.useCredentials })
+            accessibilityState: { expanded },
+            style: styles3.disclosureTrigger,
+            testID: withTestIdPrefix(AuthTestIds.demoCredentialsToggle, testIdPrefix),
+            onPress: handleToggle,
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: styles3.disclosureTriggerText, children: labels.toggle })
           }
-        ) : null
+        ),
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: styles3.disclosureBody, children: body }) : null
       ]
     }
   );
@@ -3637,6 +3736,7 @@ exports.DEFAULT_RESET_PASSWORD_LABELS = DEFAULT_RESET_PASSWORD_LABELS;
 exports.DEVICE_PIN_ALLOWED_DIGITS = DEVICE_PIN_ALLOWED_DIGITS;
 exports.DEVICE_PIN_DEFAULT_DIGITS = DEVICE_PIN_DEFAULT_DIGITS;
 exports.DemoCredentialsHint = DemoCredentialsHint;
+exports.DemoCredentialsHintVariant = DemoCredentialsHintVariant;
 exports.DevicePinEnrollErrorKey = DevicePinEnrollErrorKey;
 exports.DevicePinEnrollForm = DevicePinEnrollForm;
 exports.DevicePinErrorKey = DevicePinErrorKey;