@atlasauth/svelte 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlasauth/svelte changelog
 
+## 0.11.0 — 2026-10-24
+
+- Integrator platform release: see the Atlas changelog for 2026-10-24.
+
+## 0.10.0 — 2026-10-24
+
+### Added
+
+- **Policy acceptance** in `<SignUp>` and `<SignIn>` (consent block with in-page viewer, clickwrap line, unskippable scroll dialog, the `needs_policy_acceptance` step), plus `<PolicyGate>`, `<PolicyConsent>`, `<PolicyClickwrap>`, `<PolicyAcceptStep>`; `signUp()` exposes `policies`. New `policy.*` strings.
+
 ## 0.9.0 — 2026-10-23
 
 ### Added

package/dist/accessors.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type OrganizationAuditLogOptions, type OrganizationAuditLogState, type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult, type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
+import { type OrganizationAuditLogOptions, type OrganizationAuditLogState, type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult, PolicyAcceptanceController, type MfaChoices, type MfaEnrollmentController, type MfaEnrollmentState } from '@atlasauth/js';
 import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
@@ -165,6 +165,15 @@ export interface FlowController {
     captcha: CaptchaController;
     /** The sign-up captcha (the create-account step). */
     signUpCaptcha: CaptchaController;
+    /**
+     * The instance's policies (terms, privacy, …) for the create-account form:
+     * `create` sends their acceptances and reloads them after a refusal.
+     */
+    policies: PolicyAcceptanceController;
+    /** Load the sign-up's policies into {@link policies} (`<SignUp>` calls it on mount). */
+    loadPolicies(): Promise<void>;
+    /** The user declined a policy a sign-in was waiting on: cancels the attempt and says why. */
+    declinePolicy(title: string): void;
     /** Stop the magic-link poll loop and remove the captcha widgets — call from `onDestroy`. */
     destroy(): void;
 }

package/dist/accessors.js

@@ -1,5 +1,5 @@
 import { derived, get, readable, writable } from 'svelte/store';
-import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createPasskeySignUp, createSignUp, finishPasskeySignUp, fetchInstanceSettings, fetchLastSignInMethod, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, createOrganizationAuditLog, createMfaEnrollment, acknowledgeRecoveryCodes, pendingRecoveryCodes, mfaChoicesFrom, prepareSecondFactorCode, resendSignUpVerification, } from '@atlasauth/js';
+import { FapiClient, advanceWithCaptcha, atlasCaptchaLabels, createCaptchaController, createPasskeySignUp, createSignUp, finishPasskeySignUp, fetchInstanceSettings, fetchLastSignInMethod, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, createOrganizationAuditLog, createMfaEnrollment, acknowledgeRecoveryCodes, pendingRecoveryCodes, mfaChoicesFrom, prepareSecondFactorCode, resendSignUpVerification, PolicyAcceptanceController, loadPolicies as loadPolicyList, initialFlow as emptyFlow, } from '@atlasauth/js';
 import { useAtlas } from './context';
 import { translate } from './i18n';
 import { evaluate } from './protect';
@@ -191,16 +191,23 @@ function createFlow() {
             await finish(out.state);
         })();
     }
+    const policies = new PolicyAcceptanceController([]);
+    async function loadPolicies() {
+        policies.setPolicies(await loadPolicyList(client, { locale: atlas.locale ?? undefined }));
+    }
+    function declinePolicy(title) {
+        state.set({ ...emptyFlow, errors: [{ code: 'POLICY_DECLINED', message: translate(atlas.catalog, 'policy.declined', { policy: title }) }] });
+    }
     function create(values, consent = true) {
         void (async () => {
             state.update((current) => ({ ...current, busy: true, errors: [] }));
-            await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t }));
+            await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t, policies }));
         })();
     }
     function createWithPasskey(values, consent = true) {
         void (async () => {
             state.update((current) => ({ ...current, busy: true, errors: [] }));
-            await finish(await createPasskeySignUp(client, values, { consent, captcha: signUpCaptcha, t }));
+            await finish(await createPasskeySignUp(client, values, { consent, captcha: signUpCaptcha, t, policies }));
         })();
     }
     async function sendSecondFactorCode(strategy) {
@@ -280,6 +287,9 @@ function createFlow() {
         lastMethod: { subscribe: lastMethod.subscribe },
         captcha,
         signUpCaptcha,
+        policies,
+        loadPolicies,
+        declinePolicy,
         destroy,
     };
 }

package/dist/appearance.d.ts

@@ -31,7 +31,7 @@ export interface DesignTokens {
     spacingUnit?: string;
 }
 /** Every element a customer may target. Named for what it IS, not where it sits. */
-export type ElementKey = 'root' | 'card' | 'headerTitle' | 'headerSubtitle' | 'formField' | 'formFieldLabel' | 'formFieldInput' | 'formFieldError' | 'formButtonPrimary' | 'formButtonSecondary' | 'socialButton' | 'dividerText' | 'footerAction' | 'avatar' | 'menu' | 'menuItem' | 'list' | 'listItem' | 'badge';
+export type ElementKey = 'root' | 'card' | 'headerTitle' | 'headerSubtitle' | 'formField' | 'formFieldLabel' | 'formFieldInput' | 'formFieldError' | 'formButtonPrimary' | 'formButtonSecondary' | 'socialButton' | 'dividerText' | 'footerAction' | 'avatar' | 'menu' | 'menuItem' | 'list' | 'listItem' | 'badge' | 'alert' | 'text' | 'link';
 export interface Appearance extends DesignAppearance {
     /** A prebuilt token theme to start from (pre-design-system themes). */
     baseTheme?: keyof typeof THEMES;

package/dist/appearance.js

@@ -23,7 +23,7 @@ export const DEFAULT_TOKENS = {
     colorPrimary: '#5b5bd6',
     colorText: '#1c1c1f',
     colorBackground: '#ffffff',
-    colorDanger: '#d64545',
+    colorDanger: '#c53030',
     colorBorder: '#e4e4e9',
     borderRadius: '8px',
     fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',

package/dist/components/AttemptFlow.svelte

@@ -11,6 +11,7 @@ import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import CaptchaSlot from "./CaptchaSlot.svelte";
+import PolicyAcceptStep from "./PolicyAcceptStep.svelte";
 export let attempt = null;
 export let busy = false;
 export let errors = [];
@@ -26,6 +27,7 @@ export let enrollment = null;
 export let enrollmentState = null;
 export let emailVerification = "code";
 export let onResend = null;
+export let onPolicyDecline = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
@@ -124,12 +126,13 @@ $: message = (() => {
     case "enroll_second_factor":
     case "collect_email_code":
     case "collect_new_password":
+    case "accept_policies":
       return null;
     default:
       return t("error.generic");
   }
 })();
-$: showSubmit = (!enrolling || enrolSubmitKey !== null) && step.kind !== "done" && step.kind !== "await_oauth" && message === null && !linkOnly && // Only emailed factors on offer: the option buttons are the way forward.
+$: showSubmit = (!enrolling || enrolSubmitKey !== null) && step.kind !== "done" && step.kind !== "await_oauth" && step.kind !== "accept_policies" && message === null && !linkOnly && // Only emailed factors on offer: the option buttons are the way forward.
 (step.kind !== "collect_first_factor" || fields.length > 0);
 $: showEmailOptions = step.kind === "collect_first_factor" && message === null && sent === null && emailOptions.length > 0 && !(sending && busy);
 $: showCaptcha = !!captcha && (step.kind === "collect_identifier" || step.kind === "collect_captcha");
@@ -164,6 +167,10 @@ function handleSubmit(event) {
         <p>{message}</p>
       {/if}
     {:else}
+      {#if step.kind === 'accept_policies'}
+        <!-- A required policy changed: scroll-mode ones in their dialog, the rest as checkboxes. -->
+        <PolicyAcceptStep {attempt} {busy} {onSubmit} onDecline={(policy) => onPolicyDecline?.(policy.title)} />
+      {/if}
       {#if step.kind === 'collect_captcha'}
         <!-- §5 the server withheld the attempt until a captcha clears. Solving
              the widget resubmits the identifier on its own; the button retries. -->

package/dist/components/AttemptFlow.svelte.d.ts

@@ -54,6 +54,7 @@ declare const __propDef: {
            * while the flow polls, and offers a resend (`onResend`).
            */ emailVerification?: string;
         onResend?: (() => Promise<boolean>) | null;
+        /** The user declined a policy the sign-in was waiting on (`needs_policy_acceptance`): cancel the attempt. */ onPolicyDecline?: ((title: string) => void) | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/PolicyAcceptStep.svelte

@@ -0,0 +1,52 @@
+<script>import { onMount } from "svelte";
+import {
+  FapiClient,
+  controllerForPending,
+  injectPolicyStyles,
+  mountPolicyAcceptStep
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { usePolicyUi } from "../policies";
+import { ATLAS_SVELTE_SDK } from "../version";
+export let attempt = null;
+export let busy = false;
+export let onSubmit;
+export let onDecline = void 0;
+const atlas = useAtlas();
+const ui = usePolicyUi();
+let controller = null;
+let step = null;
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  step = mountPolicyAcceptStep(node, c, {
+    ...ui,
+    onSubmit: (acceptances) => onSubmit({ policy_acceptances: JSON.stringify(acceptances) }),
+    onDecline: (policy) => onDecline?.(policy)
+  });
+  step.setBusy(busy);
+  return {
+    destroy() {
+      step?.destroy();
+      step = null;
+    }
+  };
+}
+$: step?.setBusy(busy);
+onMount(() => {
+  const client = new FapiClient({
+    publishableKey: atlas.publishableKey,
+    baseUrl: atlas.frontendApi,
+    locale: atlas.locale,
+    sdk: ATLAS_SVELTE_SDK
+  });
+  void controllerForPending(client, attempt, { locale: atlas.locale ?? void 0 }).then((c) => {
+    controller = c;
+  });
+});
+</script>
+
+{#if controller}
+  <div use:host={controller} />
+{:else}
+  <p class="atlas-text">{ui.t('policy.loading')}</p>
+{/if}

package/dist/components/PolicyAcceptStep.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponent } from "svelte";
+import { type Policy } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The sign-in step for a `needs_policy_acceptance` attempt: scroll-mode
+           * policies in their unskippable dialog, the rest as checkboxes, then "Accept
+           * and continue", which calls `onSubmit` with the `policy_acceptances` JSON for
+           * the flow. Declining a policy calls `onDecline` (cancel the attempt).
+           */ attempt?: {
+            id: string | null;
+            pending_policies?: unknown;
+        } | null;
+        busy?: boolean;
+        onSubmit: (values: Record<string, string>) => void;
+        onDecline?: ((policy: Policy) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyAcceptStepProps = typeof __propDef.props;
+export type PolicyAcceptStepEvents = typeof __propDef.events;
+export type PolicyAcceptStepSlots = typeof __propDef.slots;
+export default class PolicyAcceptStep extends SvelteComponent<PolicyAcceptStepProps, PolicyAcceptStepEvents, PolicyAcceptStepSlots> {
+}
+export {};

package/dist/components/PolicyClickwrap.svelte

@@ -0,0 +1,23 @@
+<script>import { injectPolicyStyles, mountPolicyClickwrap } from "@atlasauth/js";
+import { usePolicyUi } from "../policies";
+export let controller;
+const ui = usePolicyUi();
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  let current = c;
+  let mounted = mountPolicyClickwrap(node, current, ui);
+  return {
+    update(next) {
+      if (next === current) return;
+      mounted.destroy();
+      current = next;
+      mounted = mountPolicyClickwrap(node, current, ui);
+    },
+    destroy() {
+      mounted.destroy();
+    }
+  };
+}
+</script>
+
+<p use:host={controller} />

package/dist/components/PolicyClickwrap.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import { type PolicyAcceptanceController } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /** The clickwrap sentence ("By continuing you agree to …") for `link`-mode policies, under the submit button. */ controller: PolicyAcceptanceController;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyClickwrapProps = typeof __propDef.props;
+export type PolicyClickwrapEvents = typeof __propDef.events;
+export type PolicyClickwrapSlots = typeof __propDef.slots;
+export default class PolicyClickwrap extends SvelteComponent<PolicyClickwrapProps, PolicyClickwrapEvents, PolicyClickwrapSlots> {
+}
+export {};

package/dist/components/PolicyConsent.svelte

@@ -0,0 +1,23 @@
+<script>import { injectPolicyStyles, mountPolicyConsent } from "@atlasauth/js";
+import { usePolicyUi } from "../policies";
+export let controller;
+const ui = usePolicyUi();
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  let current = c;
+  let mounted = mountPolicyConsent(node, current, ui);
+  return {
+    update(next) {
+      if (next === current) return;
+      mounted.destroy();
+      current = next;
+      mounted = mountPolicyConsent(node, current, ui);
+    },
+    destroy() {
+      mounted.destroy();
+    }
+  };
+}
+</script>
+
+<div use:host={controller} />

package/dist/components/PolicyConsent.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import { type PolicyAcceptanceController } from '@atlasauth/js';
+declare const __propDef: {
+    props: {
+        /**
+           * The checkbox-mode policies (terms, privacy, …): one combined checkbox or one
+           * each, the names opening the document in an in-page viewer. The state lives in
+           * the `controller` (`policies` of `signUp()`, or a `PolicyAcceptanceController`
+           * of your own). The DOM is drawn by `@atlasauth/js`, shared with every SDK.
+           */ controller: PolicyAcceptanceController;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyConsentProps = typeof __propDef.props;
+export type PolicyConsentEvents = typeof __propDef.events;
+export type PolicyConsentSlots = typeof __propDef.slots;
+export default class PolicyConsent extends SvelteComponent<PolicyConsentProps, PolicyConsentEvents, PolicyConsentSlots> {
+}
+export {};

package/dist/components/PolicyGate.svelte

@@ -0,0 +1,83 @@
+<script>import { onDestroy } from "svelte";
+import {
+  FapiClient,
+  PolicyGateController,
+  formatPolicyDate,
+  injectPolicyStyles,
+  joinTitles,
+  mountPolicyAcceptStep
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
+import { classFor } from "../appearance";
+import { usePolicyUi } from "../policies";
+import { ATLAS_SVELTE_SDK } from "../version";
+export let onAccepted = void 0;
+const atlas = useAtlas();
+const status = atlas.status;
+const ui = usePolicyUi();
+const gate = new PolicyGateController(
+  new FapiClient({ publishableKey: atlas.publishableKey, baseUrl: atlas.frontendApi, locale: atlas.locale, sdk: ATLAS_SVELTE_SDK }),
+  atlas.locale ?? void 0
+);
+let pending = gate.pending;
+let grace = gate.graceEndsAt;
+let controller = null;
+let error = "";
+let step = null;
+const off = gate.subscribe(() => {
+  pending = gate.pending;
+  grace = gate.graceEndsAt;
+});
+onDestroy(() => {
+  off();
+  step?.destroy();
+});
+$: if ($status === "signed_in") void gate.load();
+async function begin() {
+  controller = await gate.begin();
+}
+function host(node, c) {
+  injectPolicyStyles(node.ownerDocument);
+  step = mountPolicyAcceptStep(node, c, {
+    ...ui,
+    onSubmit: async () => {
+      step?.setBusy(true);
+      const res = await gate.accept(c);
+      step?.setBusy(false);
+      if (!res.ok) {
+        error = res.errors[0]?.message ?? ui.t("policy.requiredGeneric");
+        return;
+      }
+      controller = null;
+      onAccepted?.();
+    },
+    onDecline: () => {
+      controller = null;
+    }
+  });
+  return {
+    destroy() {
+      step?.destroy();
+      step = null;
+    }
+  };
+}
+</script>
+
+{#if pending.length > 0 && !controller}
+  <div class={classFor('alert', atlas.appearance, 'atlas-policy-banner')} role="status" data-atlas-policy-banner="">
+    <span>
+      <strong>{ui.t('policy.bannerTitle')}. </strong>
+      {ui.t('policy.bannerBody', { policies: joinTitles(pending.map((p) => p.title), ui.t('policy.and')) })}
+      {#if grace}{' '}{ui.t('policy.bannerGrace', { date: formatPolicyDate(grace) })}{/if}
+    </span>
+    <button type="button" class={ui.classes.link} on:click={begin}>{ui.t('policy.bannerReview')}</button>
+  </div>
+{/if}
+{#if controller}
+  <div class={classFor('card', atlas.appearance, 'atlas-card')} data-atlas-policy-gate="">
+    <div use:host={controller} />
+    {#if error}<p class={ui.classes.error} role="alert">{error}</p>{/if}
+  </div>
+{/if}
+<slot />

package/dist/components/PolicyGate.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        /**
+           * In-app re-acceptance. For a signed-in user, a banner when a policy needs
+           * re-acceptance; "Review and accept" opens the unskippable dialog / checkboxes
+           * and posts `/v1/client/me/policies/accept`. Renders its slot always.
+           */ onAccepted?: (() => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type PolicyGateProps = typeof __propDef.props;
+export type PolicyGateEvents = typeof __propDef.events;
+export type PolicyGateSlots = typeof __propDef.slots;
+export default class PolicyGate extends SvelteComponent<PolicyGateProps, PolicyGateEvents, PolicyGateSlots> {
+}
+export {};

package/dist/components/SignIn.svelte

@@ -59,6 +59,7 @@ $: captcha = drawn($settings, $flowState);
   enrollmentState={$enrollmentState}
   emailDelivery={$settings?.emailDelivery ?? null}
   {captcha}
+  onPolicyDecline={flow.declinePolicy}
 />
 {/if}
 

package/dist/components/SignUp.svelte

@@ -1,4 +1,4 @@
-<script>import { onDestroy } from "svelte";
+<script>import { onDestroy, onMount } from "svelte";
 import { awaitingPasskey, passkeysSupported } from "@atlasauth/js";
 import { signUp } from "../accessors";
 import AttemptFlow from "./AttemptFlow.svelte";
@@ -9,6 +9,9 @@ const flow = signUp();
 const flowState = flow.state;
 const settings = flow.settings;
 onDestroy(() => flow.destroy());
+onMount(() => {
+  void flow.loadPolicies();
+});
 const drawn = (..._deps) => flow.signUpCaptcha.needed ? flow.signUpCaptcha : null;
 $: captcha = drawn($settings, $flowState);
 let mode = "password";
@@ -39,6 +42,7 @@ function switchMode() {
     busy={$flowState.busy}
     errors={$flowState.errors}
     {captcha}
+    policies={flow.policies}
     onSubmit={usingPasskey ? flow.createWithPasskey : flow.create}
     passkey={usingPasskey && offer ? { email: offer.email } : null}
     onSwitchMode={canPasskey ? switchMode : undefined}

package/dist/components/SignUpForm.svelte

@@ -1,10 +1,15 @@
 <script>import {
-  localizedErrorMessage
+  confirmPolicies,
+  localizedErrorMessage,
+  policyTranslator
 } from "@atlasauth/js";
+import { onDestroy } from "svelte";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import CaptchaSlot from "./CaptchaSlot.svelte";
+import PolicyClickwrap from "./PolicyClickwrap.svelte";
+import PolicyConsent from "./PolicyConsent.svelte";
 export let settings = null;
 export let busy = false;
 export let errors = [];
@@ -12,15 +17,30 @@ export let captcha = null;
 export let onSubmit;
 export let passkey = null;
 export let onSwitchMode = void 0;
+export let policies = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
 const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
 let values = {};
 let agreed = false;
-$: legal = settings?.legal;
+let declined = null;
+let policyTick = 0;
+let watched = null;
+let unwatch = null;
+$: if (policies !== watched) {
+  unwatch?.();
+  watched = policies;
+  unwatch = policies ? policies.subscribe(() => policyTick += 1) : null;
+}
+onDestroy(() => unwatch?.());
+const hasAny = (_tick, c) => !!c && c.policies.length > 0;
+const okFor = (_tick, c) => !c || c.policies.length === 0 || c.canSubmit();
+$: hasPolicies = hasAny(policyTick, policies);
+$: legal = hasPolicies ? void 0 : settings?.legal;
 $: showLegal = !!legal && (!!legal.termsUrl || !!legal.privacyUrl);
-$: consentOk = !legal?.required || agreed;
+$: policyOk = okFor(policyTick, policies);
+$: consentOk = (!legal?.required || agreed) && policyOk;
 $: fields = settings?.signUpFields ?? [];
 $: emailUnavailable = settings?.emailDelivery?.passwordSignUp === false && !(passkey && passkey.email !== "required");
 $: showEmail = !passkey || passkey.email !== "off";
@@ -38,6 +58,14 @@ function toggle(f, option, on) {
 function handleSubmit(event) {
   event.preventDefault();
   if (!consentOk) return;
+  declined = null;
+  if (hasPolicies && policies) {
+    void confirmPolicies(policies, { t: policyTranslator(t) }).then((res) => {
+      if (res.ok) onSubmit({ ...values }, true);
+      else declined = res.declined;
+    });
+    return;
+  }
   onSubmit({ ...values }, legal?.required ? agreed : true);
 }
 </script>
@@ -188,6 +216,15 @@ function handleSubmit(event) {
         </label>
       {/if}
 
+      {#if hasPolicies && policies}
+        <PolicyConsent controller={policies} />
+        {#if declined}
+          <span class={cls('formFieldError', 'atlas-error')} role="alert" data-atlas-policy-declined="">
+            {t('policy.declined', { policy: declined })}
+          </span>
+        {/if}
+      {/if}
+
       {#if captcha}
         <CaptchaSlot controller={captcha} />
       {/if}
@@ -199,6 +236,9 @@ function handleSubmit(event) {
       >
         {t('signUp.submit')}
       </button>
+      {#if hasPolicies && policies}
+        <PolicyClickwrap controller={policies} />
+      {/if}
       {#if onSwitchMode}
         <div class="atlas-alternatives">
           <button

package/dist/components/SignUpForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type CaptchaController, type FieldError, type InstanceSettings } from '@atlasauth/js';
+import { type CaptchaController, type FieldError, type InstanceSettings, type PolicyAcceptanceController } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**
@@ -20,6 +20,7 @@ declare const __propDef: {
             email: "off" | "optional" | "required";
         } | null;
         /** Toggle between the password and passkey forms (only when both are offered). */ onSwitchMode?: (() => void) | undefined;
+        /** The instance's policies (terms, privacy, …); they replace the legacy consent row. */ policies?: PolicyAcceptanceController | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/context.d.ts

@@ -95,6 +95,7 @@ export interface AtlasClient extends AtlasStores {
     pendingAttempt: {
         id: string;
         status: string;
+        policyToken?: string;
     } | null;
     /** The session JWT; with `{ template }` a short-lived named-template token (e.g. `'chatly'`). */
     getToken(options?: {

package/dist/context.js

@@ -52,7 +52,7 @@ export function createAtlasClient(options) {
             return null;
         const result = readRedirectResult(window.location.search);
         return result?.status && !result.ticket
-            ? { id: result.attemptId, status: result.status }
+            ? { id: result.attemptId, status: result.status, ...(result.policyToken ? { policyToken: result.policyToken } : {}) }
             : null;
     })();
     async function call(path, init) {

package/dist/i18n.js

@@ -9,7 +9,7 @@
  * A missing key renders the KEY, not an empty string. A blank button is a bug
  * nobody can report; a button reading `signIn.submit` is one anyone can.
  */
-import { EMAIL_UNAVAILABLE_MESSAGE } from '@atlasauth/js';
+import { EMAIL_UNAVAILABLE_MESSAGE, POLICY_STRINGS } from '@atlasauth/js';
 export const EN_US = {
     'signIn.title': 'Sign in',
     'signIn.subtitle': 'to continue to {application}',
@@ -148,6 +148,8 @@ export const EN_US = {
     'impersonation.banner': 'You are signed in as {name} on someone else\'s behalf.',
     'impersonation.returnToAdmin': 'Return to admin',
     'impersonation.end': 'End impersonation',
+    // Policy acceptance (terms, privacy, any policy).
+    ...POLICY_STRINGS,
     'error.generic': 'Something went wrong. Please try again.',
     'error.network': 'We could not reach the server. Check your connection.',
     // Server errors, by the stable `reason` the Frontend API sends. Shown instead

package/dist/index.d.ts

@@ -32,6 +32,10 @@ export { default as OrganizationProfile } from './components/OrganizationProfile
 export { default as OrganizationAuditLog } from './components/OrganizationAuditLog.svelte';
 export type { OrganizationAuditLogEntry, OrganizationAuditLogState } from '@atlasauth/js';
 export { default as ImpersonationBanner } from './components/ImpersonationBanner.svelte';
+export { default as PolicyConsent } from './components/PolicyConsent.svelte';
+export { default as PolicyClickwrap } from './components/PolicyClickwrap.svelte';
+export { default as PolicyAcceptStep } from './components/PolicyAcceptStep.svelte';
+export { default as PolicyGate } from './components/PolicyGate.svelte';
 export type { InstanceSettings, EmailDelivery, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';
 export { SignOutError } from '@atlasauth/js';
 export type { SignOutOptions, SignOutResult } from '@atlasauth/js';

package/dist/index.js

@@ -35,6 +35,11 @@ export { default as OrganizationSwitcher } from './components/OrganizationSwitch
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
 export { default as OrganizationAuditLog } from './components/OrganizationAuditLog.svelte';
 export { default as ImpersonationBanner } from './components/ImpersonationBanner.svelte';
+// Policy acceptance (terms, privacy, any policy): the consent block, clickwrap line, sign-in step and in-app gate.
+export { default as PolicyConsent } from './components/PolicyConsent.svelte';
+export { default as PolicyClickwrap } from './components/PolicyClickwrap.svelte';
+export { default as PolicyAcceptStep } from './components/PolicyAcceptStep.svelte';
+export { default as PolicyGate } from './components/PolicyGate.svelte';
 // What `signOut()` resolves with, and what it rejects with under `{ strict: true }`.
 export { SignOutError } from '@atlasauth/js';
 // `onSignOut({ reason })` event types + the `atlas:signout` window event; this SDK's version.

package/dist/policies.d.ts

@@ -0,0 +1,6 @@
+import { type PolicyClasses, type PolicyT } from '@atlasauth/js';
+/** The policy UI's translator (catalog, else the English policy strings) and class hooks, for the current Atlas context. */
+export declare function usePolicyUi(): {
+    t: PolicyT;
+    classes: PolicyClasses;
+};

package/dist/policies.js

@@ -0,0 +1,17 @@
+import { policyTranslator } from '@atlasauth/js';
+import { useAtlas } from './context';
+import { classFor } from './appearance';
+import { translate } from './i18n';
+/** The policy UI's translator (catalog, else the English policy strings) and class hooks, for the current Atlas context. */
+export function usePolicyUi() {
+    const atlas = useAtlas();
+    return {
+        t: policyTranslator((key, vars) => translate(atlas.catalog, key, vars)),
+        classes: {
+            link: classFor('link', atlas.appearance, 'atlas-link'),
+            text: classFor('text', atlas.appearance, 'atlas-text'),
+            primaryButton: classFor('formButtonPrimary', atlas.appearance, 'atlas-button'),
+            error: classFor('formFieldError', atlas.appearance, 'atlas-error'),
+        },
+    };
+}

package/dist/version.d.ts

@@ -1,4 +1,4 @@
 import type { AtlasSdkInfo } from '@atlasauth/js';
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export declare const ATLAS_SVELTE_VERSION = "0.9.0";
+export declare const ATLAS_SVELTE_VERSION = "0.10.0";
 export declare const ATLAS_SVELTE_SDK: AtlasSdkInfo;

package/dist/version.js

@@ -1,3 +1,3 @@
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-export const ATLAS_SVELTE_VERSION = '0.9.0';
+export const ATLAS_SVELTE_VERSION = '0.10.0';
 export const ATLAS_SVELTE_SDK = { name: '@atlasauth/svelte', version: ATLAS_SVELTE_VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,10 +22,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@atlasauth/design": "0.2.0",
-    "@atlasauth/authz": "0.2.0",
-    "@atlasauth/backend": "0.15.0",
-    "@atlasauth/js": "0.16.0"
+    "@atlasauth/design": "0.3.0",
+    "@atlasauth/backend": "0.19.0",
+    "@atlasauth/js": "0.20.0",
+    "@atlasauth/authz": "0.2.0"
   },
   "peerDependencies": {
     "svelte": ">=4",