@atlasauth/embed 0.1.2 → 0.2.1

package/dist/styles.d.ts

@@ -12,6 +12,6 @@
  * before `GET /v1/appearance` resolves — and re-themes when it does.
  */
 export declare const STYLE_MARKER = "atlas-embed-styles";
-export declare const EMBED_CSS = "\n.atlas-embed-root {\n  --_bg: var(--atlas-embed-color-background, #ffffff);\n  --_card: var(--atlas-embed-color-card, #ffffff);\n  --_text: var(--atlas-embed-color-text, #1c1c1f);\n  --_primary: var(--atlas-embed-color-primary, #5b5bd6);\n  --_border: var(--atlas-embed-color-border, #e4e4e9);\n  --_radius: var(--atlas-embed-border-radius, 10px);\n  /* Transition tempo \u2014 the widget sets --atlas-embed-motion from motionSpeed and\n     to 0s when animations are off; reduced-motion forces 0s below regardless. */\n  --_motion: var(--atlas-embed-motion, 0.16s);\n  font-family: var(--atlas-embed-font-family, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  color: var(--_text);\n  box-sizing: border-box;\n  display: block;\n}\n.atlas-embed-root *, .atlas-embed-root *::before, .atlas-embed-root *::after { box-sizing: border-box; }\n.atlas-embed-card {\n  max-width: 400px;\n  margin: 0 auto;\n  padding: 28px 26px;\n  background: var(--_card);\n  border: 1px solid var(--_border);\n  border-radius: calc(var(--_radius) + 4px);\n  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);\n}\n.atlas-embed-logo { display: block; max-height: 40px; margin: 0 auto 16px; }\n.atlas-embed-title { font-size: 20px; font-weight: 650; text-align: center; margin: 0 0 4px; }\n.atlas-embed-subtitle { font-size: 14px; color: #6b7280; text-align: center; margin: 0 0 20px; }\n.atlas-embed-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n.atlas-embed-social-button {\n  display: flex; align-items: center; justify-content: center; gap: 8px;\n  width: 100%; padding: 10px 12px; font-size: 14px; font-weight: 550; cursor: pointer;\n  color: var(--_text); background: var(--_card);\n  border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-social-button:hover { filter: brightness(0.97); }\n.atlas-embed-social-icon { display: inline-flex; flex: none; line-height: 0; }\n.atlas-embed-social-icon svg { width: 18px; height: 18px; display: block; }\n.atlas-embed-social-label { display: inline-block; }\n\n/* Size \u2014 button scale and icon size together. */\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-button { padding: 8px 10px; font-size: 13px; }\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-icon svg { width: 16px; height: 16px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-button { padding: 13px 16px; font-size: 15px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-icon svg { width: 22px; height: 22px; }\n\n/* Icon-only variant: a square button, name in the tooltip. Always laid out as a\n   centred wrap (or a carousel), never a full-width bar. */\n.atlas-embed-social-button[data-variant=\"icon\"] { width: auto; padding: 10px; aspect-ratio: 1; }\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-button[data-variant=\"icon\"] { padding: 8px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-button[data-variant=\"icon\"] { padding: 13px; }\n.atlas-embed-social[data-variant=\"icon\"]:not([data-layout=\"carousel\"]) {\n  flex-direction: row; flex-wrap: wrap; justify-content: center;\n}\n\n/* Grid \u2014 bars share a row and wrap. */\n.atlas-embed-social[data-layout=\"grid\"] { flex-direction: row; flex-wrap: wrap; }\n.atlas-embed-social[data-layout=\"grid\"] .atlas-embed-social-button { width: auto; flex: 1 1 auto; }\n.atlas-embed-social[data-layout=\"grid\"] .atlas-embed-social-button[data-variant=\"icon\"] { flex: 0 0 auto; }\n\n/* Carousel \u2014 one swipeable, scroll-snapped row. The raw scrollbar is hidden; the\n   arrow buttons (below) are the affordance instead. */\n.atlas-embed-social[data-layout=\"carousel\"] {\n  flex-direction: row; flex-wrap: nowrap; overflow-x: auto;\n  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;\n  scrollbar-width: none;\n}\n.atlas-embed-social[data-layout=\"carousel\"]::-webkit-scrollbar { display: none; }\n.atlas-embed-social[data-layout=\"carousel\"] .atlas-embed-social-button { width: auto; flex: 0 0 auto; scroll-snap-align: start; }\n.atlas-embed-social[data-layout=\"carousel\"] .atlas-embed-social-button[data-variant=\"block\"] { min-width: 60%; }\n\n/* Carousel shell \u2014 prev/next controls flanking the scroll row. */\n.atlas-embed-carousel { position: relative; display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }\n.atlas-embed-carousel .atlas-embed-social { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }\n.atlas-embed-carousel-nav {\n  flex: none; display: inline-flex; align-items: center; justify-content: center;\n  width: 30px; height: 30px; padding: 0; cursor: pointer;\n  color: var(--_text); background: var(--_card);\n  border: 1px solid var(--_border); border-radius: 999px; transition: opacity 0.15s;\n}\n.atlas-embed-carousel-nav svg { width: 16px; height: 16px; display: block; }\n.atlas-embed-carousel-nav:hover:not(:disabled) { filter: brightness(0.97); }\n.atlas-embed-carousel-nav:disabled { opacity: 0.35; cursor: default; }\n/* Nothing overflows \u2192 no controls at all. */\n.atlas-embed-carousel[data-overflow=\"false\"] .atlas-embed-carousel-nav { display: none; }\n/* When the carousel sits inside a search field, the field owns the bottom margin. */\n.atlas-embed-social-field .atlas-embed-carousel { margin-bottom: 0; }\n\n/* Search \u2014 a filter box above a long provider list (socialButtons.search). The\n   field wraps the button container so its own margin replaces the button block's. */\n.atlas-embed-social-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n.atlas-embed-social-field .atlas-embed-social { margin-bottom: 0; }\n.atlas-embed-social-search {\n  width: 100%; padding: 9px 12px; font-size: 14px; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-social-search:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }\n.atlas-embed-social-button[hidden] { display: none; }\n.atlas-embed-social-empty { font-size: 13px; color: #9ca3af; text-align: center; padding: 6px 0; }\n.atlas-embed-social-empty[hidden] { display: none; }\n.atlas-embed-divider {\n  display: flex; align-items: center; text-align: center; gap: 10px;\n  color: #9ca3af; font-size: 12px; margin: 14px 0;\n}\n.atlas-embed-divider::before, .atlas-embed-divider::after {\n  content: \"\"; flex: 1; height: 1px; background: var(--_border);\n}\n.atlas-embed-field { display: block; margin: 0 0 12px; }\n.atlas-embed-label { display: block; font-size: 13px; margin: 0 0 5px; color: var(--_text); }\n.atlas-embed-input {\n  width: 100%; padding: 10px 12px; font-size: 14px; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-input:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }\n/* Password field with a show/hide toggle. */\n.atlas-embed-password { position: relative; display: flex; align-items: center; }\n.atlas-embed-password .atlas-embed-input { width: 100%; padding-right: 54px; }\n.atlas-embed-password-toggle {\n  position: absolute; right: 6px; padding: 4px 7px; font: inherit; font-size: 12px; font-weight: 600;\n  cursor: pointer; color: var(--_primary); background: none; border: 0; border-radius: 6px;\n}\n.atlas-embed-password-toggle:hover { text-decoration: underline; }\nselect.atlas-embed-input { appearance: auto; }\n.atlas-embed-field-checkbox { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 8px; }\n.atlas-embed-field-checkbox .atlas-embed-label { margin: 0; }\n.atlas-embed-checkbox { width: 16px; height: 16px; margin: 0; flex: none; }\ntextarea.atlas-embed-input { min-height: 72px; resize: vertical; font-family: inherit; }\nfieldset.atlas-embed-field { border: 0; padding: 0; margin: 0 0 12px; }\n.atlas-embed-choices { display: flex; flex-direction: column; gap: 6px; }\n.atlas-embed-choice { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }\n.atlas-embed-choice input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--_primary); }\n.atlas-embed-button {\n  width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 14px; font-weight: 650;\n  cursor: pointer; color: #ffffff; background: var(--_primary);\n  border: 0; border-radius: var(--_radius);\n}\n.atlas-embed-button:disabled { opacity: 0.6; cursor: default; }\n.atlas-embed-handle-back {\n  width: 100%; margin-top: 8px; padding: 6px; font-size: 13px; font-weight: 550;\n  cursor: pointer; color: #6b7280; background: none; border: 0;\n}\n.atlas-embed-handle-back:hover { color: #374151; }\n.atlas-embed-error { display: block; font-size: 13px; color: #d64545; margin: 6px 0 0; }\n.atlas-embed-form-error { font-size: 13px; color: #d64545; margin: 0 0 12px; min-height: 0; }\n/* A success/confirmation banner (e.g. after a force-login password reset). */\n.atlas-embed-flash {\n  font-size: 13px; color: #0f7a4d; background: rgba(16,163,101,0.08);\n  border: 1px solid rgba(16,163,101,0.25); border-radius: var(--_radius);\n  padding: 9px 11px; margin: 0 0 14px; text-align: center;\n}\n.atlas-embed-footer { font-size: 13px; color: #6b7280; text-align: center; margin: 16px 0 0; }\n/* \u00A75.1 legal consent row on sign-up. */\n.atlas-embed-consent { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; font-size: 13px; color: #6b7280; }\n.atlas-embed-consent-check { margin: 2px 0 0; width: 15px; height: 15px; flex: none; accent-color: var(--_primary); cursor: pointer; }\n.atlas-embed-consent-link { color: var(--_primary); text-decoration: underline; }\n/* \u00A77.5 Remember-me row. */\n.atlas-embed-remember { display: flex; align-items: center; gap: 8px; margin: -2px 0 14px; font-size: 13px; color: var(--_text); cursor: pointer; }\n.atlas-embed-remember-check { width: 15px; height: 15px; flex: none; accent-color: var(--_primary); cursor: pointer; }\n.atlas-embed-note { font-size: 14px; color: #6b7280; text-align: center; margin: 8px 0; }\n\n/* Verification step \u2014 a continuation of the email panel, not a new screen: the\n   context line (\"Enter the code we sent to \u2026\") + a way back, then a segmented\n   one-box-per-digit code input that spawns in. */\n.atlas-embed-step-context { text-align: center; margin: 0 0 20px; }\n.atlas-embed-step-context .atlas-embed-subtitle { margin: 0 0 6px; }\n.atlas-embed-step-back {\n  display: inline-block; padding: 2px 4px; font: inherit; font-size: 13px; font-weight: 550;\n  cursor: pointer; color: var(--_primary); background: none; border: 0;\n}\n.atlas-embed-step-back:hover { text-decoration: underline; }\n/* A standalone action under the submit button (Forgot password?, Back to sign in,\n   the 2FA toggle) reads as a centred link, not a left-aligned fragment. */\nform > .atlas-embed-step-back { display: block; width: 100%; text-align: center; margin-top: 10px; }\n.atlas-embed-code { display: flex; gap: 8px; justify-content: space-between; }\n.atlas-embed-code-box {\n  flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1.15; padding: 0; text-align: center;\n  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-code-box:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }\n/* A real step change eases its content in; error/busy re-renders (same step) do\n   not, and a reduced-motion viewer gets no animation at all. */\n@media (prefers-reduced-motion: no-preference) {\n  .atlas-embed-card[data-enter] > form,\n  .atlas-embed-card[data-enter] > .atlas-embed-step-context {\n    animation: atlas-embed-spawn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;\n  }\n}\n@keyframes atlas-embed-spawn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Interaction / polish layer \u2014 how controls FEEL. Driven by data-attributes on\n   the root (data-button-style / -button-effect / -shadow / -density /\n   -input-style) that the widget sets from the resolved interaction config, plus\n   the --_motion tempo var. Every rule is additive: with no attributes set the\n   widget looks exactly as it did before this layer existed.\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Smooth every interactive control at the configured tempo. */\n.atlas-embed-button, .atlas-embed-social-button, .atlas-embed-carousel-nav,\n.atlas-embed-handle-back, .atlas-embed-step-back, .atlas-embed-password-toggle,\n.atlas-embed-input, .atlas-embed-code-box {\n  transition:\n    transform var(--_motion) ease, box-shadow var(--_motion) ease,\n    background-color var(--_motion) ease, border-color var(--_motion) ease,\n    color var(--_motion) ease, filter var(--_motion) ease, outline-color var(--_motion) ease;\n}\n\n/* Primary CTA \u2014 a subtle hover darken by default (was static). */\n.atlas-embed-button:hover:not(:disabled) { filter: brightness(1.06); }\n\n/* Button fill style (primary CTA only \u2014 social buttons keep provider styling). */\n.atlas-embed-root[data-button-style=\"outline\"] .atlas-embed-button {\n  background: transparent; color: var(--_primary); border: 1px solid var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"outline\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 10%, transparent);\n}\n.atlas-embed-root[data-button-style=\"soft\"] .atlas-embed-button {\n  background: color-mix(in srgb, var(--_primary) 14%, transparent); color: var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"soft\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 22%, transparent);\n}\n.atlas-embed-root[data-button-style=\"ghost\"] .atlas-embed-button {\n  background: transparent; color: var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"ghost\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 12%, transparent);\n}\n\n/* Press/hover effect \u2014 applies to every button. */\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-button:active:not(:disabled),\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-social-button:active,\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-carousel-nav:active:not(:disabled) {\n  transform: scale(0.97);\n}\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-button:hover:not(:disabled),\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-social-button:hover {\n  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.14); filter: none;\n}\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-button:active:not(:disabled),\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-social-button:active { transform: translateY(0); }\n.atlas-embed-root[data-button-effect=\"glow\"] .atlas-embed-button:hover:not(:disabled),\n.atlas-embed-root[data-button-effect=\"glow\"] .atlas-embed-social-button:hover {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary) 35%, transparent); filter: none;\n}\n/* Ripple \u2014 the widget appends a span on pointer-down; buttons must clip it. */\n.atlas-embed-root[data-button-effect=\"ripple\"] .atlas-embed-button,\n.atlas-embed-root[data-button-effect=\"ripple\"] .atlas-embed-social-button {\n  position: relative; overflow: hidden;\n}\n.atlas-embed-ripple {\n  position: absolute; border-radius: 50%; transform: scale(0);\n  background: currentColor; opacity: 0.28; pointer-events: none;\n  animation: atlas-embed-ripple 0.55s ease-out;\n}\n@keyframes atlas-embed-ripple { to { transform: scale(2.6); opacity: 0; } }\n\n/* Card + solid-button elevation. */\n.atlas-embed-root[data-shadow=\"none\"] .atlas-embed-card { box-shadow: none; }\n.atlas-embed-root[data-shadow=\"sm\"] .atlas-embed-card { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }\n.atlas-embed-root[data-shadow=\"lg\"] .atlas-embed-card {\n  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.12);\n}\n\n/* Density \u2014 compact tightens padding and gaps. */\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-card { padding: 20px 18px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-social { gap: 6px; margin-bottom: 12px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-field { margin-bottom: 9px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-button { padding: 9px 12px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-social-button { padding: 8px 10px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-subtitle { margin-bottom: 14px; }\n\n/* Input style \u2014 filled and underline treatments (default is the outlined field). */\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-input,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-code-box,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-social-search {\n  background: color-mix(in srgb, var(--_border) 24%, transparent); border-color: transparent;\n}\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-input:focus,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-code-box:focus,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-social-search:focus {\n  background: var(--_bg); border-color: var(--_primary);\n}\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-input,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-code-box,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-social-search {\n  background: transparent; border: 0; border-bottom: 1.5px solid var(--_border);\n  border-radius: 0; padding-left: 2px; padding-right: 2px;\n}\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-input:focus,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-code-box:focus,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-social-search:focus {\n  outline: none; border-bottom-color: var(--_primary);\n}\n\n/* \u2500\u2500 Loading states \u2014 spinner / skeleton / dots / bar (interaction.loading).\n   Shown while appearance resolves, while a redirect ticket is exchanged, and the\n   button spinner while a form submits \u2014 so the widget never flashes blank. \u2500\u2500 */\n.atlas-embed-button { display: flex; align-items: center; justify-content: center; gap: 8px; }\n.atlas-embed-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 168px; padding: 12px 0; }\n.atlas-embed-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n\n/* Spinner (default) + the in-button spinner. */\n.atlas-embed-spinner, .atlas-embed-btn-spinner {\n  border-radius: 50%; border-style: solid; flex: none;\n  animation: atlas-embed-spin 0.7s linear infinite;\n}\n.atlas-embed-spinner { width: 30px; height: 30px; border-width: 3px;\n  border-color: color-mix(in srgb, var(--_primary) 22%, transparent); border-top-color: var(--_primary); }\n.atlas-embed-btn-spinner { width: 17px; height: 17px; border-width: 2px;\n  border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }\n@keyframes atlas-embed-spin { to { transform: rotate(360deg); } }\n\n/* Dots. */\n.atlas-embed-loading[data-loading=\"dots\"] { flex-direction: row; }\n.atlas-embed-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_primary);\n  animation: atlas-embed-bounce 1.2s ease-in-out infinite; }\n.atlas-embed-dot:nth-child(2) { animation-delay: 0.15s; }\n.atlas-embed-dot:nth-child(3) { animation-delay: 0.30s; }\n@keyframes atlas-embed-bounce { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }\n\n/* Indeterminate bar. */\n.atlas-embed-loading[data-loading=\"bar\"] { min-height: 132px; }\n.atlas-embed-loadbar { position: relative; width: 64%; height: 4px; border-radius: 999px; overflow: hidden;\n  background: color-mix(in srgb, var(--_border) 60%, transparent); }\n.atlas-embed-loadbar::before { content: \"\"; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px;\n  background: var(--_primary); animation: atlas-embed-slide 1.1s ease-in-out infinite; }\n@keyframes atlas-embed-slide { 0% { left: -45%; } 100% { left: 105%; } }\n\n/* Skeleton \u2014 placeholders shaped like the form. */\n.atlas-embed-loading[data-loading=\"skeleton\"] { align-items: stretch; min-height: 0; gap: 12px; }\n.atlas-embed-skel { border-radius: var(--_radius); position: relative; overflow: hidden;\n  background: color-mix(in srgb, var(--_border) 55%, transparent); }\n.atlas-embed-skel::after { content: \"\"; position: absolute; inset: 0; transform: translateX(-100%);\n  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--_text) 8%, transparent), transparent);\n  animation: atlas-embed-shimmer 1.3s infinite; }\n.atlas-embed-skel-title { height: 22px; width: 55%; margin: 2px auto 2px; }\n.atlas-embed-skel-sub { height: 13px; width: 75%; margin: 0 auto 8px; }\n.atlas-embed-skel-input { height: 42px; }\n.atlas-embed-skel-button { height: 44px; margin-top: 6px; }\n@keyframes atlas-embed-shimmer { to { transform: translateX(100%); } }\n\n/* Reduced motion always wins \u2014 no transitions, presses, ripples, or spawn; and\n   loaders swap their spin/bounce/slide/shimmer for a minimal opacity pulse. */\n@media (prefers-reduced-motion: reduce) {\n  .atlas-embed-root { --_motion: 0s; }\n  .atlas-embed-root [class^=\"atlas-embed-\"] { transition: none !important; }\n  .atlas-embed-root .atlas-embed-button:active,\n  .atlas-embed-root .atlas-embed-social-button:active { transform: none !important; }\n  .atlas-embed-ripple { display: none; }\n  .atlas-embed-spinner, .atlas-embed-btn-spinner, .atlas-embed-dot,\n  .atlas-embed-loadbar::before, .atlas-embed-skel::after {\n    animation: atlas-embed-pulse 1.4s ease-in-out infinite !important;\n  }\n  .atlas-embed-loadbar::before { position: static; width: 100%; }\n}\n@keyframes atlas-embed-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n";
+export declare const EMBED_CSS = "\n.atlas-embed-root {\n  --_bg: var(--atlas-embed-color-background, #ffffff);\n  --_card: var(--atlas-embed-color-card, #ffffff);\n  --_text: var(--atlas-embed-color-text, #1c1c1f);\n  --_primary: var(--atlas-embed-color-primary, #5b5bd6);\n  --_on-primary: var(--atlas-embed-color-text-on-primary, #ffffff);\n  /* Keyboard focus ring \u2014 a solid outline (3:1 on the default background). */\n  --_focus: var(--atlas-embed-color-focus-ring, var(--_primary));\n  --_border: var(--atlas-embed-color-border, #e4e4e9);\n  --_radius: var(--atlas-embed-border-radius, 10px);\n  /* Transition tempo \u2014 the widget sets --atlas-embed-motion from motionSpeed and\n     to 0s when animations are off; reduced-motion forces 0s below regardless. */\n  --_motion: var(--atlas-embed-motion, 0.16s);\n  font-family: var(--atlas-embed-font-family, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif);\n  color: var(--_text);\n  box-sizing: border-box;\n  display: block;\n}\n.atlas-embed-root *, .atlas-embed-root *::before, .atlas-embed-root *::after { box-sizing: border-box; }\n.atlas-embed-card {\n  max-width: 400px;\n  margin: 0 auto;\n  padding: 28px 26px;\n  background: var(--_card);\n  border: 1px solid var(--_border);\n  border-radius: calc(var(--_radius) + 4px);\n  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.06);\n}\n.atlas-embed-logo { display: block; max-height: 40px; margin: 0 auto 16px; }\n.atlas-embed-title { font-size: 20px; font-weight: 650; text-align: center; margin: 0 0 4px; }\n.atlas-embed-subtitle { font-size: 14px; color: #6b7280; text-align: center; margin: 0 0 20px; }\n.atlas-embed-social { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n.atlas-embed-social-button {\n  display: flex; align-items: center; justify-content: center; gap: 8px;\n  width: 100%; padding: 10px 12px; font-size: 14px; font-weight: 550; cursor: pointer;\n  color: var(--_text); background: var(--_card);\n  border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-social-button:hover { filter: brightness(0.97); }\n.atlas-embed-social-icon { display: inline-flex; flex: none; line-height: 0; }\n.atlas-embed-social-icon svg { width: 18px; height: 18px; display: block; }\n.atlas-embed-social-label { display: inline-block; }\n\n/* Size \u2014 button scale and icon size together. */\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-button { padding: 8px 10px; font-size: 13px; }\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-icon svg { width: 16px; height: 16px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-button { padding: 13px 16px; font-size: 15px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-icon svg { width: 22px; height: 22px; }\n\n/* Icon-only variant: a square button, name in the tooltip. Always laid out as a\n   centred wrap (or a carousel), never a full-width bar. */\n.atlas-embed-social-button[data-variant=\"icon\"] { width: auto; padding: 10px; aspect-ratio: 1; }\n.atlas-embed-social[data-size=\"sm\"] .atlas-embed-social-button[data-variant=\"icon\"] { padding: 8px; }\n.atlas-embed-social[data-size=\"lg\"] .atlas-embed-social-button[data-variant=\"icon\"] { padding: 13px; }\n.atlas-embed-social[data-variant=\"icon\"]:not([data-layout=\"carousel\"]) {\n  flex-direction: row; flex-wrap: wrap; justify-content: center;\n}\n\n/* Grid \u2014 bars share a row and wrap. */\n.atlas-embed-social[data-layout=\"grid\"] { flex-direction: row; flex-wrap: wrap; }\n.atlas-embed-social[data-layout=\"grid\"] .atlas-embed-social-button { width: auto; flex: 1 1 auto; }\n.atlas-embed-social[data-layout=\"grid\"] .atlas-embed-social-button[data-variant=\"icon\"] { flex: 0 0 auto; }\n\n/* Carousel \u2014 one swipeable, scroll-snapped row. The raw scrollbar is hidden; the\n   arrow buttons (below) are the affordance instead. */\n.atlas-embed-social[data-layout=\"carousel\"] {\n  flex-direction: row; flex-wrap: nowrap; overflow-x: auto;\n  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth;\n  scrollbar-width: none;\n}\n.atlas-embed-social[data-layout=\"carousel\"]::-webkit-scrollbar { display: none; }\n.atlas-embed-social[data-layout=\"carousel\"] .atlas-embed-social-button { width: auto; flex: 0 0 auto; scroll-snap-align: start; }\n.atlas-embed-social[data-layout=\"carousel\"] .atlas-embed-social-button[data-variant=\"block\"] { min-width: 60%; }\n\n/* Carousel shell \u2014 prev/next controls flanking the scroll row. */\n.atlas-embed-carousel { position: relative; display: flex; align-items: center; gap: 4px; margin-bottom: 16px; }\n.atlas-embed-carousel .atlas-embed-social { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }\n.atlas-embed-carousel-nav {\n  flex: none; display: inline-flex; align-items: center; justify-content: center;\n  width: 30px; height: 30px; padding: 0; cursor: pointer;\n  color: var(--_text); background: var(--_card);\n  border: 1px solid var(--_border); border-radius: 999px; transition: opacity 0.15s;\n}\n.atlas-embed-carousel-nav svg { width: 16px; height: 16px; display: block; }\n.atlas-embed-carousel-nav:hover:not(:disabled) { filter: brightness(0.97); }\n.atlas-embed-carousel-nav:disabled { opacity: 0.35; cursor: default; }\n/* Nothing overflows \u2192 no controls at all. */\n.atlas-embed-carousel[data-overflow=\"false\"] .atlas-embed-carousel-nav { display: none; }\n/* When the carousel sits inside a search field, the field owns the bottom margin. */\n.atlas-embed-social-field .atlas-embed-carousel { margin-bottom: 0; }\n\n/* Search \u2014 a filter box above a long provider list (socialButtons.search). The\n   field wraps the button container so its own margin replaces the button block's. */\n.atlas-embed-social-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n.atlas-embed-social-field .atlas-embed-social { margin-bottom: 0; }\n.atlas-embed-social-search {\n  width: 100%; padding: 9px 12px; font-size: 16px; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-social-search:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }\n.atlas-embed-social-button[hidden] { display: none; }\n.atlas-embed-social-empty { font-size: 13px; color: #9ca3af; text-align: center; padding: 6px 0; }\n.atlas-embed-social-empty[hidden] { display: none; }\n.atlas-embed-divider {\n  display: flex; align-items: center; text-align: center; gap: 10px;\n  color: #9ca3af; font-size: 12px; margin: 14px 0;\n}\n.atlas-embed-divider::before, .atlas-embed-divider::after {\n  content: \"\"; flex: 1; height: 1px; background: var(--_border);\n}\n.atlas-embed-field { display: block; margin: 0 0 12px; }\n.atlas-embed-label { display: block; font-size: 13px; margin: 0 0 5px; color: var(--_text); }\n.atlas-embed-input {\n  /* 16px: iOS Safari zooms the page when a smaller field takes focus. */\n  width: 100%; padding: 10px 12px; font-size: 16px; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-input:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }\n/* Password field with a show/hide toggle. */\n.atlas-embed-password { position: relative; display: flex; align-items: center; }\n.atlas-embed-password .atlas-embed-input { width: 100%; padding-right: 54px; }\n.atlas-embed-password-toggle {\n  position: absolute; right: 6px; padding: 4px 7px; font: inherit; font-size: 12px; font-weight: 600;\n  cursor: pointer; color: var(--_primary); background: none; border: 0; border-radius: 6px;\n}\n.atlas-embed-password-toggle:hover { text-decoration: underline; }\nselect.atlas-embed-input { appearance: auto; }\n.atlas-embed-field-checkbox { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 8px; }\n.atlas-embed-field-checkbox .atlas-embed-label { margin: 0; }\n.atlas-embed-checkbox { width: 16px; height: 16px; margin: 0; flex: none; }\ntextarea.atlas-embed-input { min-height: 72px; resize: vertical; font-family: inherit; }\nfieldset.atlas-embed-field { border: 0; padding: 0; margin: 0 0 12px; }\n.atlas-embed-choices { display: flex; flex-direction: column; gap: 6px; }\n.atlas-embed-choice { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }\n.atlas-embed-choice input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--_primary); }\n.atlas-embed-button {\n  width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 14px; font-weight: 650;\n  cursor: pointer; color: var(--_on-primary); background: var(--_primary);\n  border: 0; border-radius: var(--_radius);\n}\n.atlas-embed-button:disabled { opacity: 0.6; cursor: default; }\n.atlas-embed-button:focus-visible, .atlas-embed-social-button:focus-visible,\n.atlas-embed-handle-back:focus-visible, .atlas-embed-step-back:focus-visible,\n.atlas-embed-password-toggle:focus-visible, .atlas-embed-carousel-nav:focus-visible {\n  outline: 2px solid var(--_focus); outline-offset: 2px;\n}\n.atlas-embed-handle-back {\n  width: 100%; margin-top: 8px; padding: 6px; font-size: 13px; font-weight: 550;\n  cursor: pointer; color: #6b7280; background: none; border: 0;\n}\n.atlas-embed-handle-back:hover { color: #374151; }\n.atlas-embed-error { display: block; font-size: 13px; color: #d64545; margin: 6px 0 0; }\n.atlas-embed-form-error { font-size: 13px; color: #d64545; margin: 0 0 12px; min-height: 0; }\n/* A success/confirmation banner (e.g. after a force-login password reset). */\n.atlas-embed-flash {\n  font-size: 13px; color: #0f7a4d; background: rgba(16,163,101,0.08);\n  border: 1px solid rgba(16,163,101,0.25); border-radius: var(--_radius);\n  padding: 9px 11px; margin: 0 0 14px; text-align: center;\n}\n.atlas-embed-footer { font-size: 13px; color: #6b7280; text-align: center; margin: 16px 0 0; }\n/* \u00A75.1 legal consent row on sign-up. */\n.atlas-embed-consent { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 14px; font-size: 13px; color: #6b7280; }\n.atlas-embed-consent-check { margin: 2px 0 0; width: 15px; height: 15px; flex: none; accent-color: var(--_primary); cursor: pointer; }\n.atlas-embed-consent-link { color: var(--_primary); text-decoration: underline; }\n/* \u00A77.5 Remember-me row. */\n.atlas-embed-remember { display: flex; align-items: center; gap: 8px; margin: -2px 0 14px; font-size: 13px; color: var(--_text); cursor: pointer; }\n.atlas-embed-remember-check { width: 15px; height: 15px; flex: none; accent-color: var(--_primary); cursor: pointer; }\n.atlas-embed-note { font-size: 14px; color: #6b7280; text-align: center; margin: 8px 0; }\n\n/* Verification step \u2014 a continuation of the email panel, not a new screen: the\n   context line (\"Enter the code we sent to \u2026\") + a way back, then a segmented\n   one-box-per-digit code input that spawns in. */\n.atlas-embed-step-context { text-align: center; margin: 0 0 20px; }\n.atlas-embed-step-context .atlas-embed-subtitle { margin: 0 0 6px; }\n.atlas-embed-step-back {\n  display: inline-block; padding: 2px 4px; font: inherit; font-size: 13px; font-weight: 550;\n  cursor: pointer; color: var(--_primary); background: none; border: 0;\n}\n.atlas-embed-step-back:hover { text-decoration: underline; }\n/* A standalone action under the submit button (Forgot password?, Back to sign in,\n   the 2FA toggle) reads as a centred link, not a left-aligned fragment. */\nform > .atlas-embed-step-back { display: block; width: 100%; text-align: center; margin-top: 10px; }\n.atlas-embed-code { display: flex; gap: 8px; justify-content: space-between; }\n.atlas-embed-code-box {\n  flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1.15; padding: 0; text-align: center;\n  font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--_text);\n  background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);\n}\n.atlas-embed-code-box:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }\n/* A real step change eases its content in; error/busy re-renders (same step) do\n   not, and a reduced-motion viewer gets no animation at all. */\n@media (prefers-reduced-motion: no-preference) {\n  .atlas-embed-card[data-enter] > form,\n  .atlas-embed-card[data-enter] > .atlas-embed-step-context {\n    animation: atlas-embed-spawn 0.26s cubic-bezier(0.22, 0.61, 0.36, 1) both;\n  }\n}\n@keyframes atlas-embed-spawn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   Interaction / polish layer \u2014 how controls FEEL. Driven by data-attributes on\n   the root (data-button-style / -button-effect / -shadow / -density /\n   -input-style) that the widget sets from the resolved interaction config, plus\n   the --_motion tempo var. Every rule is additive: with no attributes set the\n   widget looks exactly as it did before this layer existed.\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Smooth every interactive control at the configured tempo. */\n.atlas-embed-button, .atlas-embed-social-button, .atlas-embed-carousel-nav,\n.atlas-embed-handle-back, .atlas-embed-step-back, .atlas-embed-password-toggle,\n.atlas-embed-input, .atlas-embed-code-box {\n  transition:\n    transform var(--_motion) ease, box-shadow var(--_motion) ease,\n    background-color var(--_motion) ease, border-color var(--_motion) ease,\n    color var(--_motion) ease, filter var(--_motion) ease, outline-color var(--_motion) ease;\n}\n\n/* Primary CTA \u2014 a subtle hover darken by default (was static). */\n.atlas-embed-button:hover:not(:disabled) { filter: brightness(1.06); }\n\n/* Button fill style (primary CTA only \u2014 social buttons keep provider styling). */\n.atlas-embed-root[data-button-style=\"outline\"] .atlas-embed-button {\n  background: transparent; color: var(--_primary); border: 1px solid var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"outline\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 10%, transparent);\n}\n.atlas-embed-root[data-button-style=\"soft\"] .atlas-embed-button {\n  background: color-mix(in srgb, var(--_primary) 14%, transparent); color: var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"soft\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 22%, transparent);\n}\n.atlas-embed-root[data-button-style=\"ghost\"] .atlas-embed-button {\n  background: transparent; color: var(--_primary);\n}\n.atlas-embed-root[data-button-style=\"ghost\"] .atlas-embed-button:hover:not(:disabled) {\n  filter: none; background: color-mix(in srgb, var(--_primary) 12%, transparent);\n}\n\n/* Press/hover effect \u2014 applies to every button. */\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-button:active:not(:disabled),\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-social-button:active,\n.atlas-embed-root[data-button-effect=\"scale\"] .atlas-embed-carousel-nav:active:not(:disabled) {\n  transform: scale(0.97);\n}\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-button:hover:not(:disabled),\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-social-button:hover {\n  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.14); filter: none;\n}\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-button:active:not(:disabled),\n.atlas-embed-root[data-button-effect=\"lift\"] .atlas-embed-social-button:active { transform: translateY(0); }\n.atlas-embed-root[data-button-effect=\"glow\"] .atlas-embed-button:hover:not(:disabled),\n.atlas-embed-root[data-button-effect=\"glow\"] .atlas-embed-social-button:hover {\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_primary) 35%, transparent); filter: none;\n}\n/* Ripple \u2014 the widget appends a span on pointer-down; buttons must clip it. */\n.atlas-embed-root[data-button-effect=\"ripple\"] .atlas-embed-button,\n.atlas-embed-root[data-button-effect=\"ripple\"] .atlas-embed-social-button {\n  position: relative; overflow: hidden;\n}\n.atlas-embed-ripple {\n  position: absolute; border-radius: 50%; transform: scale(0);\n  background: currentColor; opacity: 0.28; pointer-events: none;\n  animation: atlas-embed-ripple 0.55s ease-out;\n}\n@keyframes atlas-embed-ripple { to { transform: scale(2.6); opacity: 0; } }\n\n/* Card + solid-button elevation. */\n.atlas-embed-root[data-shadow=\"none\"] .atlas-embed-card { box-shadow: none; }\n.atlas-embed-root[data-shadow=\"sm\"] .atlas-embed-card { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }\n.atlas-embed-root[data-shadow=\"lg\"] .atlas-embed-card {\n  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.12);\n}\n\n/* Density \u2014 compact tightens padding and gaps. */\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-card { padding: 20px 18px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-social { gap: 6px; margin-bottom: 12px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-field { margin-bottom: 9px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-button { padding: 9px 12px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-social-button { padding: 8px 10px; }\n.atlas-embed-root[data-density=\"compact\"] .atlas-embed-subtitle { margin-bottom: 14px; }\n\n/* Input style \u2014 filled and underline treatments (default is the outlined field). */\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-input,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-code-box,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-social-search {\n  background: color-mix(in srgb, var(--_border) 24%, transparent); border-color: transparent;\n}\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-input:focus,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-code-box:focus,\n.atlas-embed-root[data-input-style=\"filled\"] .atlas-embed-social-search:focus {\n  background: var(--_bg); border-color: var(--_primary);\n}\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-input,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-code-box,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-social-search {\n  background: transparent; border: 0; border-bottom: 1.5px solid var(--_border);\n  border-radius: 0; padding-left: 2px; padding-right: 2px;\n}\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-input:focus,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-code-box:focus,\n.atlas-embed-root[data-input-style=\"underline\"] .atlas-embed-social-search:focus {\n  outline: none; border-bottom-color: var(--_primary);\n}\n\n/* \u2500\u2500 Loading states \u2014 spinner / skeleton / dots / bar (interaction.loading).\n   Shown while appearance resolves, while a redirect ticket is exchanged, and the\n   button spinner while a form submits \u2014 so the widget never flashes blank. \u2500\u2500 */\n.atlas-embed-button { display: flex; align-items: center; justify-content: center; gap: 8px; }\n.atlas-embed-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 168px; padding: 12px 0; }\n.atlas-embed-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }\n\n/* Spinner (default) + the in-button spinner. */\n.atlas-embed-spinner, .atlas-embed-btn-spinner {\n  border-radius: 50%; border-style: solid; flex: none;\n  animation: atlas-embed-spin 0.7s linear infinite;\n}\n.atlas-embed-spinner { width: 30px; height: 30px; border-width: 3px;\n  border-color: color-mix(in srgb, var(--_primary) 22%, transparent); border-top-color: var(--_primary); }\n.atlas-embed-btn-spinner { width: 17px; height: 17px; border-width: 2px;\n  border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }\n@keyframes atlas-embed-spin { to { transform: rotate(360deg); } }\n\n/* Dots. */\n.atlas-embed-loading[data-loading=\"dots\"] { flex-direction: row; }\n.atlas-embed-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--_primary);\n  animation: atlas-embed-bounce 1.2s ease-in-out infinite; }\n.atlas-embed-dot:nth-child(2) { animation-delay: 0.15s; }\n.atlas-embed-dot:nth-child(3) { animation-delay: 0.30s; }\n@keyframes atlas-embed-bounce { 0%,80%,100% { transform: scale(0.5); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }\n\n/* Indeterminate bar. */\n.atlas-embed-loading[data-loading=\"bar\"] { min-height: 132px; }\n.atlas-embed-loadbar { position: relative; width: 64%; height: 4px; border-radius: 999px; overflow: hidden;\n  background: color-mix(in srgb, var(--_border) 60%, transparent); }\n.atlas-embed-loadbar::before { content: \"\"; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 999px;\n  background: var(--_primary); animation: atlas-embed-slide 1.1s ease-in-out infinite; }\n@keyframes atlas-embed-slide { 0% { left: -45%; } 100% { left: 105%; } }\n\n/* Skeleton \u2014 placeholders shaped like the form. */\n.atlas-embed-loading[data-loading=\"skeleton\"] { align-items: stretch; min-height: 0; gap: 12px; }\n.atlas-embed-skel { border-radius: var(--_radius); position: relative; overflow: hidden;\n  background: color-mix(in srgb, var(--_border) 55%, transparent); }\n.atlas-embed-skel::after { content: \"\"; position: absolute; inset: 0; transform: translateX(-100%);\n  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--_text) 8%, transparent), transparent);\n  animation: atlas-embed-shimmer 1.3s infinite; }\n.atlas-embed-skel-title { height: 22px; width: 55%; margin: 2px auto 2px; }\n.atlas-embed-skel-sub { height: 13px; width: 75%; margin: 0 auto 8px; }\n.atlas-embed-skel-input { height: 42px; }\n.atlas-embed-skel-button { height: 44px; margin-top: 6px; }\n@keyframes atlas-embed-shimmer { to { transform: translateX(100%); } }\n\n/* Reduced motion always wins \u2014 no transitions, presses, ripples, or spawn; and\n   loaders swap their spin/bounce/slide/shimmer for a minimal opacity pulse. */\n@media (prefers-reduced-motion: reduce) {\n  .atlas-embed-root { --_motion: 0s; }\n  .atlas-embed-root [class^=\"atlas-embed-\"] { transition: none !important; }\n  .atlas-embed-root .atlas-embed-button:active,\n  .atlas-embed-root .atlas-embed-social-button:active { transform: none !important; }\n  .atlas-embed-ripple { display: none; }\n  .atlas-embed-spinner, .atlas-embed-btn-spinner, .atlas-embed-dot,\n  .atlas-embed-loadbar::before, .atlas-embed-skel::after {\n    animation: atlas-embed-pulse 1.4s ease-in-out infinite !important;\n  }\n  .atlas-embed-loadbar::before { position: static; width: 100%; }\n}\n@keyframes atlas-embed-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }\n";
 /** Inject the sheet once per document. Safe to call on every mount. */
 export declare function injectStyles(doc?: Document): void;

package/dist/styles.js

@@ -22,6 +22,9 @@ exports.EMBED_CSS = `
   --_card: var(--atlas-embed-color-card, #ffffff);
   --_text: var(--atlas-embed-color-text, #1c1c1f);
   --_primary: var(--atlas-embed-color-primary, #5b5bd6);
+  --_on-primary: var(--atlas-embed-color-text-on-primary, #ffffff);
+  /* Keyboard focus ring — a solid outline (3:1 on the default background). */
+  --_focus: var(--atlas-embed-color-focus-ring, var(--_primary));
   --_border: var(--atlas-embed-color-border, #e4e4e9);
   --_radius: var(--atlas-embed-border-radius, 10px);
   /* Transition tempo — the widget sets --atlas-embed-motion from motionSpeed and
@@ -110,10 +113,10 @@ exports.EMBED_CSS = `
 .atlas-embed-social-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
 .atlas-embed-social-field .atlas-embed-social { margin-bottom: 0; }
 .atlas-embed-social-search {
-  width: 100%; padding: 9px 12px; font-size: 14px; color: var(--_text);
+  width: 100%; padding: 9px 12px; font-size: 16px; color: var(--_text);
   background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
 }
-.atlas-embed-social-search:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }
+.atlas-embed-social-search:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }
 .atlas-embed-social-button[hidden] { display: none; }
 .atlas-embed-social-empty { font-size: 13px; color: #9ca3af; text-align: center; padding: 6px 0; }
 .atlas-embed-social-empty[hidden] { display: none; }
@@ -127,10 +130,11 @@ exports.EMBED_CSS = `
 .atlas-embed-field { display: block; margin: 0 0 12px; }
 .atlas-embed-label { display: block; font-size: 13px; margin: 0 0 5px; color: var(--_text); }
 .atlas-embed-input {
-  width: 100%; padding: 10px 12px; font-size: 14px; color: var(--_text);
+  /* 16px: iOS Safari zooms the page when a smaller field takes focus. */
+  width: 100%; padding: 10px 12px; font-size: 16px; color: var(--_text);
   background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
 }
-.atlas-embed-input:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }
+.atlas-embed-input:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }
 /* Password field with a show/hide toggle. */
 .atlas-embed-password { position: relative; display: flex; align-items: center; }
 .atlas-embed-password .atlas-embed-input { width: 100%; padding-right: 54px; }
@@ -150,10 +154,15 @@ fieldset.atlas-embed-field { border: 0; padding: 0; margin: 0 0 12px; }
 .atlas-embed-choice input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--_primary); }
 .atlas-embed-button {
   width: 100%; margin-top: 6px; padding: 11px 12px; font-size: 14px; font-weight: 650;
-  cursor: pointer; color: #ffffff; background: var(--_primary);
+  cursor: pointer; color: var(--_on-primary); background: var(--_primary);
   border: 0; border-radius: var(--_radius);
 }
 .atlas-embed-button:disabled { opacity: 0.6; cursor: default; }
+.atlas-embed-button:focus-visible, .atlas-embed-social-button:focus-visible,
+.atlas-embed-handle-back:focus-visible, .atlas-embed-step-back:focus-visible,
+.atlas-embed-password-toggle:focus-visible, .atlas-embed-carousel-nav:focus-visible {
+  outline: 2px solid var(--_focus); outline-offset: 2px;
+}
 .atlas-embed-handle-back {
   width: 100%; margin-top: 8px; padding: 6px; font-size: 13px; font-weight: 550;
   cursor: pointer; color: #6b7280; background: none; border: 0;
@@ -196,7 +205,7 @@ form > .atlas-embed-step-back { display: block; width: 100%; text-align: center;
   font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--_text);
   background: var(--_bg); border: 1px solid var(--_border); border-radius: var(--_radius);
 }
-.atlas-embed-code-box:focus { outline: 2px solid var(--_primary); outline-offset: -1px; }
+.atlas-embed-code-box:focus { outline: 2px solid var(--_focus); outline-offset: -1px; }
 /* A real step change eases its content in; error/busy re-renders (same step) do
    not, and a reduced-motion viewer gets no animation at all. */
 @media (prefers-reduced-motion: no-preference) {

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;AA0XA,oCAMC;AAhYD;;;;;;;;;;;;GAYG;AACU,QAAA,YAAY,GAAG,oBAAoB,CAAC;AAEpC,QAAA,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwWxB,CAAC;AAEF,uEAAuE;AACvE,SAAgB,YAAY,CAAC,MAAgB,QAAQ;IACnD,IAAI,GAAG,CAAC,aAAa,CAAC,cAAc,oBAAY,GAAG,CAAC;QAAE,OAAO;IAC7D,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,YAAY,CAAC,QAAQ,oBAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,KAAK,CAAC,WAAW,GAAG,iBAAS,CAAC;IAC9B,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACvD,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":";;;AAmYA,oCAMC;AAzYD;;;;;;;;;;;;GAYG;AACU,QAAA,YAAY,GAAG,oBAAoB,CAAC;AAEpC,QAAA,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiXxB,CAAC;AAEF,uEAAuE;AACvE,SAAgB,YAAY,CAAC,MAAgB,QAAQ;IACnD,IAAI,GAAG,CAAC,aAAa,CAAC,cAAc,oBAAY,GAAG,CAAC;QAAE,OAAO;IAC7D,MAAM,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzC,KAAK,CAAC,YAAY,CAAC,QAAQ,oBAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/C,KAAK,CAAC,WAAW,GAAG,iBAAS,CAAC;IAC9B,CAAC,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACvD,CAAC"}

package/dist/widget/captcha.d.ts

@@ -1,21 +1,15 @@
-import type { FlowCaptcha } from '../appearance';
-export declare function isRenderable(provider?: string | null): boolean;
-/** True when this flow needs a rendered token before its request can proceed. */
-export declare function flowNeedsCaptcha(flow: FlowCaptcha | undefined): flow is FlowCaptcha;
-type Win = Window & Record<string, unknown>;
 /**
- * Load a provider's script and resolve its global. Idempotent: a second call for
- * the same provider reuses the in-flight or resolved load. When the global is
- * already present (a prior load, or a test that preset it) it resolves at once.
- */
-export declare function loadProvider(provider: string, siteKey: string, win: Win): Promise<unknown>;
-/**
- * Obtain a captcha token for a flow. Loads the provider, renders/executes the
- * right widget for the mode, and resolves the token. `container` is where a
- * visible/managed widget draws; for score providers it is unused.
+ * Client-side captcha rendering for the hosted widget.
+ *
+ * The server tells the widget, per flow, which provider to render and in what
+ * mode (see `/v1/appearance` → `captchaFlows`). The loader/renderer lives in
+ * `@atlasauth/js` so the embed widget and the React components draw the same
+ * widget the same way; this module keeps the widget's historical names.
  *
- * Rejects on provider error/timeout — the caller decides whether to surface it
- * or let the (fail-closed) server reject the tokenless request.
+ * Only the providers that expose a standard browser widget are renderable here;
+ * score/edge/fingerprint providers are verified server-side from a token a
+ * custom integration supplies, so `isRenderable` returns false for them and the
+ * caller proceeds without a token (the server still fails closed if it required
+ * one).
  */
-export declare function getCaptchaToken(flow: FlowCaptcha, container: HTMLElement): Promise<string>;
-export {};
+export { isRenderableCaptcha as isRenderable, flowNeedsCaptcha, loadCaptchaProvider as loadProvider, getCaptchaToken, } from '@atlasauth/js';

package/dist/widget/captcha.js

@@ -1,197 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isRenderable = isRenderable;
-exports.flowNeedsCaptcha = flowNeedsCaptcha;
-exports.loadProvider = loadProvider;
-exports.getCaptchaToken = getCaptchaToken;
+exports.getCaptchaToken = exports.loadProvider = exports.flowNeedsCaptcha = exports.isRenderable = void 0;
 /**
  * Client-side captcha rendering for the hosted widget.
  *
  * The server tells the widget, per flow, which provider to render and in what
- * mode (see `/v1/appearance` → `captchaFlows`). This module loads that
- * provider's script once and resolves a token the flow's API call then carries
- * as `captcha_token`. Only the providers that expose a standard browser widget
- * are renderable here; score/edge/fingerprint providers (SEON, PerimeterX,
- * Akamai, Kasada, Incapsula, mCaptcha, AWS WAF, …) are verified server-side from
- * a token a custom integration supplies, so the hosted widget does not draw
- * them — `isRenderable` returns false and the caller proceeds without a token
- * (the server still fails closed if it required one).
- */
-/** The providers the hosted widget can natively render. */
-const RENDERABLE = new Set([
-    'turnstile',
-    'hcaptcha',
-    'recaptcha',
-    'recaptcha_v3',
-    'recaptcha_enterprise',
-]);
-function isRenderable(provider) {
-    return !!provider && RENDERABLE.has(provider);
-}
-/** True when this flow needs a rendered token before its request can proceed. */
-function flowNeedsCaptcha(flow) {
-    return !!flow && flow.enabled === true && isRenderable(flow.provider);
-}
-const SCRIPTS = {
-    turnstile: {
-        src: () => 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit',
-        global: 'turnstile',
-    },
-    hcaptcha: {
-        src: () => 'https://js.hcaptcha.com/1/api.js?render=explicit',
-        global: 'hcaptcha',
-    },
-    recaptcha: {
-        src: () => 'https://www.google.com/recaptcha/api.js?render=explicit',
-        global: 'grecaptcha',
-    },
-    recaptcha_v3: {
-        src: (siteKey) => `https://www.google.com/recaptcha/api.js?render=${encodeURIComponent(siteKey)}`,
-        global: 'grecaptcha',
-    },
-    recaptcha_enterprise: {
-        src: (siteKey) => `https://www.google.com/recaptcha/enterprise.js?render=${encodeURIComponent(siteKey)}`,
-        global: 'grecaptcha',
-    },
-};
-/**
- * Load a provider's script and resolve its global. Idempotent: a second call for
- * the same provider reuses the in-flight or resolved load. When the global is
- * already present (a prior load, or a test that preset it) it resolves at once.
- */
-function loadProvider(provider, siteKey, win) {
-    const spec = SCRIPTS[provider];
-    if (!spec)
-        return Promise.reject(new Error(`captcha: ${provider} is not renderable`));
-    if (win[spec.global])
-        return Promise.resolve(win[spec.global]);
-    const doc = win.document;
-    const cacheKey = `__atlasCaptchaLoad_${provider}`;
-    const existing = win[cacheKey];
-    if (existing)
-        return existing;
-    const promise = new Promise((resolve, reject) => {
-        const done = () => {
-            if (win[spec.global])
-                resolve(win[spec.global]);
-            else
-                reject(new Error(`captcha: ${provider} script loaded but global missing`));
-        };
-        const src = spec.src(siteKey);
-        // Reuse a script tag another flow may have injected for the same src.
-        let el = doc.querySelector(`script[src="${src}"]`);
-        if (el) {
-            if (win[spec.global])
-                return resolve(win[spec.global]);
-            el.addEventListener('load', done, { once: true });
-            el.addEventListener('error', () => reject(new Error(`captcha: ${provider} script failed`)), {
-                once: true,
-            });
-            return;
-        }
-        el = doc.createElement('script');
-        el.src = src;
-        el.async = true;
-        el.defer = true;
-        el.addEventListener('load', done, { once: true });
-        el.addEventListener('error', () => reject(new Error(`captcha: ${provider} script failed`)), {
-            once: true,
-        });
-        (doc.head ?? doc.body ?? doc.documentElement).appendChild(el);
-    });
-    win[cacheKey] = promise;
-    return promise;
-}
-/** Cloudflare Turnstile: render into the container, resolve on the callback. */
-function turnstileToken(api, el, siteKey, mode) {
-    return new Promise((resolve, reject) => {
-        const id = api.render(el, {
-            sitekey: siteKey,
-            // Turnstile's own modes map cleanly onto ours.
-            appearance: mode === 'invisible' ? 'interaction-only' : 'always',
-            callback: (token) => resolve(token),
-            'error-callback': () => reject(new Error('captcha: turnstile error')),
-            'timeout-callback': () => reject(new Error('captcha: turnstile timeout')),
-        });
-        if (mode === 'invisible' && api.execute)
-            api.execute(id);
-    });
-}
-/** hCaptcha: render, then execute for invisible; resolve on the callback. */
-function hcaptchaToken(api, el, siteKey, mode) {
-    return new Promise((resolve, reject) => {
-        const id = api.render(el, {
-            sitekey: siteKey,
-            size: mode === 'invisible' ? 'invisible' : 'normal',
-            callback: (token) => resolve(token),
-            'error-callback': () => reject(new Error('captcha: hcaptcha error')),
-        });
-        if (mode === 'invisible') {
-            const r = api.execute(id, { async: true });
-            if (r && typeof r.then === 'function') {
-                r.then((v) => resolve(v.response), reject);
-            }
-        }
-    });
-}
-/** reCAPTCHA v2 (checkbox/invisible): render, resolve on callback. */
-function recaptchaV2Token(api, el, siteKey, mode) {
-    return new Promise((resolve, reject) => {
-        const id = api.render(el, {
-            sitekey: siteKey,
-            size: mode === 'invisible' ? 'invisible' : 'normal',
-            callback: (token) => resolve(token),
-            'error-callback': () => reject(new Error('captcha: recaptcha error')),
-        });
-        if (mode === 'invisible' && api.execute) {
-            const r = api.execute(undefined, { widgetId: id });
-            if (r && typeof r.then === 'function') {
-                r.then(resolve, reject);
-            }
-        }
-    });
-}
-/** reCAPTCHA v3 / Enterprise (score): execute programmatically, no visible widget. */
-function recaptchaV3Token(api, siteKey) {
-    const run = () => {
-        const r = api.execute(siteKey, { action: 'submit' });
-        return r && typeof r.then === 'function'
-            ? r
-            : Promise.reject(new Error('captcha: recaptcha v3 execute returned no promise'));
-    };
-    return new Promise((resolve, reject) => {
-        if (api.ready)
-            api.ready(() => run().then(resolve, reject));
-        else
-            run().then(resolve, reject);
-    });
-}
-/**
- * Obtain a captcha token for a flow. Loads the provider, renders/executes the
- * right widget for the mode, and resolves the token. `container` is where a
- * visible/managed widget draws; for score providers it is unused.
+ * mode (see `/v1/appearance` → `captchaFlows`). The loader/renderer lives in
+ * `@atlasauth/js` so the embed widget and the React components draw the same
+ * widget the same way; this module keeps the widget's historical names.
  *
- * Rejects on provider error/timeout — the caller decides whether to surface it
- * or let the (fail-closed) server reject the tokenless request.
+ * Only the providers that expose a standard browser widget are renderable here;
+ * score/edge/fingerprint providers are verified server-side from a token a
+ * custom integration supplies, so `isRenderable` returns false for them and the
+ * caller proceeds without a token (the server still fails closed if it required
+ * one).
  */
-async function getCaptchaToken(flow, container) {
-    const provider = flow.provider ?? '';
-    const siteKey = flow.siteKey ?? '';
-    const mode = flow.widget ?? 'managed';
-    const win = (container.ownerDocument?.defaultView ?? globalThis);
-    const api = await loadProvider(provider, siteKey, win);
-    switch (provider) {
-        case 'turnstile':
-            return turnstileToken(api, container, siteKey, mode);
-        case 'hcaptcha':
-            return hcaptchaToken(api, container, siteKey, mode);
-        case 'recaptcha':
-            return recaptchaV2Token(api, container, siteKey, mode);
-        case 'recaptcha_v3':
-        case 'recaptcha_enterprise':
-            return recaptchaV3Token(api, siteKey);
-        default:
-            throw new Error(`captcha: ${provider} is not renderable`);
-    }
-}
+var js_1 = require("@atlasauth/js");
+Object.defineProperty(exports, "isRenderable", { enumerable: true, get: function () { return js_1.isRenderableCaptcha; } });
+Object.defineProperty(exports, "flowNeedsCaptcha", { enumerable: true, get: function () { return js_1.flowNeedsCaptcha; } });
+Object.defineProperty(exports, "loadProvider", { enumerable: true, get: function () { return js_1.loadCaptchaProvider; } });
+Object.defineProperty(exports, "getCaptchaToken", { enumerable: true, get: function () { return js_1.getCaptchaToken; } });
 //# sourceMappingURL=captcha.js.map

package/dist/widget/captcha.js.map

@@ -1 +1 @@
-{"version":3,"file":"captcha.js","sourceRoot":"","sources":["../../src/widget/captcha.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"captcha.js","sourceRoot":"","sources":["../../src/widget/captcha.ts"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;GAaG;AACH,oCAKuB;AAJrB,kGAAA,mBAAmB,OAAgB;AACnC,sGAAA,gBAAgB,OAAA;AAChB,kGAAA,mBAAmB,OAAgB;AACnC,qGAAA,eAAe,OAAA"}

package/dist/widget.d.ts

@@ -1,5 +1,6 @@
 import { BehaviorRecorder, type FapiClient, type FlowState, type ResetFlowState } from '@atlasauth/js';
 import { type CodeInputStyle, type CaptchaFlowKey, type FlowCaptcha, type PublicAppearance, type PublicSignUpField, type ResolvedSocialButtons, type ResolvedInteraction, type WidgetAppearance } from './appearance';
+import { type WidgetDesign } from './design';
 /**
  * The framework-agnostic sign-in panel.
  *
@@ -35,6 +36,9 @@ export declare class AtlasWidget {
     readonly client: FapiClient;
     readonly mode: 'sign-in' | 'sign-up';
     appearance: PublicAppearance | null;
+    /** The design-system layer (dashboard design + inline preset/design), when any. */
+    design: WidgetDesign | null;
+    private appliedDesign?;
     providers: string[];
     /** Providers that render the official native button (Google GSI), by client_id. */
     nativeProviders: {
@@ -114,6 +118,8 @@ export declare class AtlasWidget {
     /** Boot: handle any redirect landing, fetch appearance, then render. */
     mount(): Promise<void>;
     private applyTheme;
+    /** Resolve the design layer (null when there is none). */
+    private resolveDesign;
     /**
      * Reflect the resolved interaction config onto the root as data-attributes (the
      * stylesheet keys off them) plus the motion-tempo variable. Turning animations

package/dist/widget.js

@@ -5,6 +5,8 @@ const js_1 = require("@atlasauth/js");
 const appearance_1 = require("./appearance");
 const client_1 = require("./client");
 const styles_1 = require("./styles");
+const runtime_1 = require("@atlasauth/design/runtime");
+const design_1 = require("./design");
 const render_1 = require("./widget/render");
 const flow_1 = require("./widget/flow");
 const passkey_1 = require("./widget/passkey");
@@ -14,6 +16,9 @@ class AtlasWidget {
     client;
     mode;
     appearance = null;
+    /** The design-system layer (dashboard design + inline preset/design), when any. */
+    design = null;
+    appliedDesign;
     providers = [];
     /** Providers that render the official native button (Google GSI), by client_id. */
     nativeProviders = [];
@@ -101,6 +106,8 @@ class AtlasWidget {
     async mount() {
         (0, styles_1.injectStyles)(this.root.ownerDocument ?? document);
         this.root.classList.add('atlas-embed-root');
+        // An inline preset/design themes the very first (loading) paint.
+        this.resolveDesign(null);
         this.applyTheme();
         this.applyInteraction();
         (0, render_1.renderLoading)(this);
@@ -132,13 +139,19 @@ class AtlasWidget {
             this.rememberMeEnabled = data.rememberMe === true;
             this.trustedDeviceEnabled = data.rememberDevice === true;
             this.captchaFlows = data.captchaFlows ?? {};
+            this.resolveDesign((0, runtime_1.instanceDesignFrom)(data));
             this.applyTheme();
         }
         // Social-button look: tenant server default (if any) overlaid by the inline
         // appearance override the embedding page passed.
-        this.social = (0, appearance_1.resolveSocialButtons)(this.appearance?.socialButtons, this.options.appearance?.socialButtons);
+        // A design's social layout sits over the tenant's default (inline still wins).
+        this.social = (0, appearance_1.resolveSocialButtons)(this.design
+            ? { ...this.appearance?.socialButtons, ...this.design.socialButtons }
+            : this.appearance?.socialButtons, this.options.appearance?.socialButtons);
         this.codeInputStyle = (0, appearance_1.resolveCodeInput)(this.appearance?.codeInput, this.options.appearance?.codeInput);
-        this.interaction = (0, appearance_1.resolveInteraction)(this.appearance?.interaction, this.options.appearance?.interaction);
+        this.interaction = (0, appearance_1.resolveInteraction)(this.design
+            ? { ...this.appearance?.interaction, ...this.design.interaction }
+            : this.appearance?.interaction, this.options.appearance?.interaction);
         this.applyInteraction();
         this.signUpFields = this.appearance?.signUpFields ?? [];
         // §bot — begin passive behavioural collection once the form is up. Never
@@ -156,10 +169,32 @@ class AtlasWidget {
         void (0, passkey_1.startConditionalPasskey)(this);
     }
     applyTheme() {
-        const tokens = (0, appearance_1.resolveTokens)(this.appearance, this.options.appearance);
+        // With a design (dashboard or inline preset/design) the tokens come from it;
+        // otherwise exactly as before: tenant branding, then the inline variables.
+        const tokens = this.design?.tokens ?? (0, appearance_1.resolveTokens)(this.appearance, this.options.appearance);
         const vars = (0, appearance_1.cssVariables)(tokens);
         for (const [key, value] of Object.entries(vars))
             this.root.style.setProperty(key, value);
+        // Derived, not a token: the primary button's label follows the primary's contrast.
+        this.root.style.setProperty('--atlas-embed-color-text-on-primary', (0, appearance_1.textOnPrimary)(tokens.colorPrimary));
+        if (this.design) {
+            this.appliedDesign = (0, runtime_1.applyAppearanceToDom)(this.root.ownerDocument ?? document, this.root, this.design.render, this.appliedDesign);
+        }
+    }
+    /** Resolve the design layer (null when there is none). */
+    resolveDesign(instance) {
+        const win = this.root.ownerDocument?.defaultView ?? (typeof window !== 'undefined' ? window : null);
+        let prefersDark = false;
+        try {
+            prefersDark = !!win?.matchMedia?.('(prefers-color-scheme: dark)').matches;
+        }
+        catch {
+            /* no media queries: light */
+        }
+        this.design = (0, design_1.widgetDesign)(instance, this.options.appearance, {
+            frontendApi: this.options.frontendApi,
+            prefersDark,
+        });
     }
     /**
      * Reflect the resolved interaction config onto the root as data-attributes (the

package/dist/widget.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget.js","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":";;;AAAA,sCAMuB;AACvB,6CAiBsB;AACtB,qCAAyD;AACzD,qCAAwC;AACxC,4CAAwD;AACxD,wCAAsD;AACtD,8CAA2D;AAgC3D,MAAa,WAAW;IA2EX;IACA;IA3EF,MAAM,CAAa;IACnB,IAAI,CAAwB;IACrC,UAAU,GAA4B,IAAI,CAAC;IAC3C,SAAS,GAAa,EAAE,CAAC;IACzB,mFAAmF;IACnF,eAAe,GAA8C,EAAE,CAAC;IAChE,6EAA6E;IAC7E,eAAe,GAAiD,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;IACnF,yFAAyF;IACzF,MAAM,GAA0B,IAAA,iCAAoB,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC3E,oFAAoF;IACpF,cAAc,GAAmB,OAAO,CAAC;IACzC,qFAAqF;IACrF,WAAW,GAAwB,IAAA,+BAAkB,EAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAC5E;;;;;OAKG;IACH,cAAc,GAAG,KAAK,CAAC;IACvB;;;;OAIG;IACH,iBAAiB,GAAkB,IAAI,CAAC;IACxC,uGAAuG;IACvG,YAAY,GAAkB,IAAI,CAAC;IACnC,gFAAgF;IAChF,YAAY,GAAwB,EAAE,CAAC;IACvC,kFAAkF;IAClF,eAAe,GAAG,IAAI,CAAC;IACvB,6FAA6F;IAC7F,cAAc,GAAG,KAAK,CAAC;IACvB,+FAA+F;IAC/F,gBAAgB,CAAmB;IACnC,4EAA4E;IAC5E,iBAAiB,GAAG,KAAK,CAAC;IAC1B,+EAA+E;IAC/E,QAAQ,GAAG,IAAI,CAAC;IAChB,iFAAiF;IACjF,oBAAoB,GAAG,KAAK,CAAC;IAC7B,8EAA8E;IAC9E,cAAc,GAAG,KAAK,CAAC;IACvB;;;;OAIG;IACH,YAAY,GAAiD,EAAE,CAAC;IAChE,mEAAmE;IACnE,WAAW,CAAe;IAC1B,KAAK,GAAc,gBAAW,CAAC;IAC/B;;;;OAIG;IACH,SAAS,GAA0B,IAAI,CAAC;IACxC;;;;OAIG;IACH,KAAK,GAAkB,IAAI,CAAC;IAC5B;kFAC8E;IAC9E,YAAY,GAAkB,IAAI,CAAC;IACnC,IAAI,GAAG,KAAK,CAAC;IACb,0EAA0E;IAC1E,QAAQ,CAAoB;IAE5B,YACW,IAAiB,EACjB,OAAsB;QADtB,SAAI,GAAJ,IAAI,CAAa;QACjB,YAAO,GAAP,OAAO,CAAe;QAE/B,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,CAAC;QACtC,+EAA+E;QAC/E,0EAA0E;QAC1E,6EAA6E;QAC7E,IAAI,CAAC,WAAW,GAAG,IAAA,+BAAkB,EAAC,SAAS,EAAE,OAAO,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;QAClF,IAAI,CAAC,MAAM,GAAG,IAAA,qBAAY,EAAC;YACzB,cAAc,EAAE,OAAO,CAAC,cAAc;YACtC,WAAW,EAAE,OAAO,CAAC,WAAW;YAChC,SAAS,EAAE,OAAO,CAAC,SAAS;SAC7B,CAAC,CAAC;IACL,CAAC;IAED,wEAAwE;IACxE,KAAK,CAAC,KAAK;QACT,IAAA,qBAAY,EAAC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,CAAC;QAClD,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC5C,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAA,sBAAa,EAAC,IAAI,CAAC,CAAC;QAEpB,2EAA2E;QAC3E,uEAAuE;QACvE,MAAM,OAAO,GAAG,MAAM,IAAA,4BAAqB,EAAC,IAAI,CAAC,CAAC;QAClD,IAAI,OAAO;YAAE,OAAO;QAEpB,MAAM,IAAI,GAA8B,MAAM,IAAA,wBAAe,EAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3E,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAClC,qEAAqE;YACrE,qEAAqE;YACrE,qEAAqE;YACrE,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,IAAI,EAAE,CAAC;YAC1C,MAAM,cAAc,GAAG,CAAC,EAAU,EAAW,EAAE;gBAC7C,MAAM,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC;gBACrB,IAAI,CAAC,CAAC;oBAAE,OAAO,IAAI,CAAC;gBACpB,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;YACzD,CAAC,CAAC;YACF,IAAI,CAAC,SAAS,GAAG,IAAA,6BAAgB,EAAC,IAAI,CAAC,SAAS,IAAI,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAC7E,cAAc,CACf,CAAC;YACF,IAAI,CAAC,eAAe,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;YAC/F,6EAA6E;YAC7E,2EAA2E;YAC3E,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,UAAU,EAAE,QAAQ,IAAI,IAAI,CAAC;YACzD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,OAAO,IAAI,KAAK,CAAC;YACxD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,kBAAkB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;YACrE,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC;YAClD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,cAAc,KAAK,IAAI,CAAC;YACzD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC;YAC5C,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC;QACD,4EAA4E;QAC5E,iDAAiD;QACjD,IAAI,CAAC,MAAM,GAAG,IAAA,iCAAoB,EAChC,IAAI,CAAC,UAAU,EAAE,aAAa,EAC9B,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CACvC,CAAC;QACF,IAAI,CAAC,cAAc,GAAG,IAAA,6BAAgB,EACpC,IAAI,CAAC,UAAU,EAAE,SAAS,EAC1B,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,SAAS,CACnC,CAAC;QACF,IAAI,CAAC,WAAW,GAAG,IAAA,+BAAkB,EACnC,IAAI,CAAC,UAAU,EAAE,WAAW,EAC5B,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,WAAW,CACrC,CAAC;QACF,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,UAAU,EAAE,YAAY,IAAI,EAAE,CAAC;QACxD,yEAAyE;QACzE,0DAA0D;QAC1D,IAAI,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,IAAI,qBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,QAAQ,CAAC,CAAC;QAC5E,CAAC;QAAC,MAAM,CAAC;YACP,8BAA8B;QAChC,CAAC;QACD,IAAA,eAAM,EAAC,IAAI,CAAC,CAAC;QACb,+EAA+E;QAC/E,wEAAwE;QACxE,yEAAyE;QACzE,KAAK,IAAA,iCAAuB,EAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEO,UAAU;QAChB,MAAM,MAAM,GAAG,IAAA,0BAAa,EAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,IAAA,yBAAY,EAAC,MAAM,CAAC,CAAC;QAClC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;YAAE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAC3F,CAAC;IAED;;;;;OAKG;IACK,gBAAgB;QACtB,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,oBAAoB,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC;QAChD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;QACzD,MAAM,EAAE,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,sBAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;IACjE,CAAC;CACF;AArLD,kCAqLC"}
+{"version":3,"file":"widget.js","sourceRoot":"","sources":["../src/widget.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@atlasauth/embed",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@atlasauth/js": "0.1.9"
+    "@atlasauth/design": "0.1.0",
+    "@atlasauth/js": "0.6.0"
   },
   "devDependencies": {
     "esbuild": "^0.21.5",
@@ -17,7 +18,8 @@
   },
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node build.mjs",