component Captcha {
    props {
        provider = "self-hosted"
        siteKey = ""
        type = "alphanumeric"
        action = "form-submit"
        presentation = "visual"
        difficulty = "normal"
        disturbance = 50
        imageStyle = "random"
        allowedStyles = ""
        excludedStyles = ""
        randomizeStyle = false
        locale = "en"
        size = "normal"
        color = "primary"
        class = ""

        id = ""
        name = "wrn-captcha-response"
        endpoint = "/__wrnexus/captcha/challenge"
        verifyEndpoint = "/__wrnexus/captcha/verify"
        responseField = "wrn-captcha-response"

        label = "Security verification"
        description = "Complete the challenge to continue."
        helpText = ""
        requiredMessage = "Please complete the security check."
        incorrectMessage = "That answer was not correct. Try again."
        expiredMessage = "This challenge expired. Load a new one."
        networkMessage = "The verification service is unavailable. Try again."

        autoLoad = true
        autoVerify = false
        showVerify = true
        showRefresh = true
        showAudio = true
        showListen = true
        showStatus = true
        disabled = false
        required = true
        resetOnError = true
        compact = false
        layout = "vertical"

        @event ready = function
        @event challenge = function
        @event input = function
        @event verify = function
        @event success = function
        @event failure = function
        @event expired = function
        @event refresh = function
        @event audioStart = function
        @event audioEnd = function
        @event error = function
    }

    view {
        <section
            {...attrs}
            id='{id}'
            data-wrn-captcha
            data-wrnexus-runtime="captcha"
            data-captcha-provider='{provider}'
            data-captcha-site-key='{siteKey}'
            data-captcha-type='{type}'
            data-captcha-action='{action}'
            data-captcha-presentation='{presentation}'
            data-captcha-difficulty='{difficulty}'
            data-captcha-disturbance='{disturbance}'
            data-captcha-image-style='{imageStyle}'
            data-captcha-allowed-styles='{allowedStyles}'
            data-captcha-excluded-styles='{excludedStyles}'
            data-captcha-randomize-style='{randomizeStyle}'
            data-captcha-locale='{locale}'
            data-captcha-size='{size}'
            data-captcha-color='{color}'
            data-captcha-endpoint='{endpoint}'
            data-captcha-verify-endpoint='{verifyEndpoint}'
            data-captcha-response-field='{responseField}'
            data-captcha-name='{name}'
            data-captcha-auto-load='{autoLoad}'
            data-captcha-auto-verify='{autoVerify}'
            data-captcha-show-verify='{showVerify}'
            data-captcha-show-refresh='{showRefresh}'
            data-captcha-show-audio='{showAudio}'
            data-captcha-show-listen='{showListen}'
            data-captcha-show-status='{showStatus}'
            data-captcha-disabled='{disabled}'
            data-captcha-required='{required}'
            data-captcha-reset-on-error='{resetOnError}'
            data-captcha-compact='{compact}'
            data-captcha-layout='{layout}'
            data-captcha-required-message='{requiredMessage}'
            data-captcha-incorrect-message='{incorrectMessage}'
            data-captcha-expired-message='{expiredMessage}'
            data-captcha-network-message='{networkMessage}'
            data-captcha-status="idle"
            data-server-verification-required="true"
            aria-busy="false"
            class='group/captcha relative flex w-full max-w-lg flex-col gap-3 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] p-4 text-[var(--wrn-color-text)] shadow-[var(--wrn-shadow-1)] [--captcha-accent:var(--wrn-color-primary)] data-[captcha-color=secondary]:[--captcha-accent:var(--wrn-color-secondary)] data-[captcha-color=success]:[--captcha-accent:var(--wrn-color-success)] data-[captcha-color=warning]:[--captcha-accent:var(--wrn-color-warning)] data-[captcha-color=danger]:[--captcha-accent:var(--wrn-color-danger)] data-[captcha-color=info]:[--captcha-accent:var(--wrn-color-info)] data-[captcha-size=compact]:max-w-xs data-[captcha-size=compact]:gap-1.5 data-[captcha-size=compact]:p-2 data-[captcha-size=big]:max-w-2xl data-[captcha-size=big]:gap-4 data-[captcha-size=big]:p-5 data-[captcha-compact=true]:max-w-xs data-[captcha-compact=true]:gap-1.5 data-[captcha-compact=true]:p-2 data-[captcha-layout=horizontal]:max-w-2xl data-[captcha-layout=horizontal]:grid data-[captcha-layout=horizontal]:grid-cols-1 sm:data-[captcha-layout=horizontal]:grid-cols-[minmax(0,1fr)_minmax(12rem,0.8fr)] sm:data-[captcha-layout=horizontal]:items-start data-[captcha-type=not-robot]:max-w-sm data-[captcha-type=not-robot]:gap-0 data-[captcha-type=not-robot]:p-0 data-[captcha-disabled=true]:pointer-events-none data-[captcha-disabled=true]:opacity-60 data-[captcha-status=verified]:border-[var(--wrn-color-success)] data-[captcha-status=incorrect]:border-[var(--wrn-color-danger)] data-[captcha-status=expired]:border-[var(--wrn-color-danger)] data-[captcha-status=network-error]:border-[var(--wrn-color-danger)] data-[captcha-status=provider-error]:border-[var(--wrn-color-danger)] {class}'
        >
            <header data-captcha-header class='flex items-start justify-between gap-3 group-data-[captcha-size=compact]/captcha:gap-1.5 group-data-[captcha-layout=horizontal]/captcha:col-span-full group-data-[captcha-type=not-robot]/captcha:hidden'>
                <div class='min-w-0'>
                    <div class='flex items-center gap-2 group-data-[captcha-size=compact]/captcha:gap-1.5'>
                        <span
                            aria-hidden="true"
                            class='icon-[lucide--shield-check] size-5 shrink-0 text-[var(--captcha-accent)] group-data-[captcha-size=compact]/captcha:size-4'
                        ></span>
                        <h3 class='m-0 text-sm font-semibold leading-5 text-[var(--wrn-color-text)] group-data-[captcha-size=compact]/captcha:text-[11px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-size=big]/captcha:text-base'>
                            {label}
                        </h3>
                    </div>
                    <p class='m-0 mt-1 text-xs leading-5 text-[var(--wrn-color-muted)] group-data-[captcha-size=compact]/captcha:hidden group-data-[captcha-size=big]/captcha:text-sm'>
                        {description}
                    </p>
                </div>

                <span
                    data-captcha-verified-badge
                    hidden
                    class='shrink-0 items-center gap-1 rounded-full bg-[color-mix(in_srgb,var(--wrn-color-success)_12%,transparent)] px-2 py-1 text-xs font-semibold text-[var(--wrn-color-success)] group-data-[captcha-size=compact]/captcha:gap-0.5 group-data-[captcha-size=compact]/captcha:px-1.5 group-data-[captcha-size=compact]/captcha:py-0.5 group-data-[captcha-size=compact]/captcha:text-[10px]'
                >
                    <span aria-hidden="true" class='icon-[lucide--circle-check] size-3.5 group-data-[captcha-size=compact]/captcha:size-3'></span>
                    Verified
                </span>
            </header>

            <div
                data-captcha-provider-mount
                hidden
                class='flex min-h-16 w-full items-center justify-center overflow-hidden rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-surface-2)] p-2 group-data-[captcha-size=compact]/captcha:min-h-12 group-data-[captcha-size=compact]/captcha:p-1.5'
            ></div>

            <div
                data-captcha-loading
                hidden
                class='flex min-h-28 items-center justify-center gap-2 rounded-[var(--wrn-radius-sm)] bg-[var(--wrn-color-surface-2)] text-sm text-[var(--wrn-color-muted)] group-data-[captcha-size=compact]/captcha:min-h-14 group-data-[captcha-size=compact]/captcha:gap-1.5 group-data-[captcha-size=compact]/captcha:text-[11px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-size=big]/captcha:min-h-36 group-data-[captcha-type=not-robot]/captcha:m-3 group-data-[captcha-type=not-robot]/captcha:min-h-16'
            >
                <span aria-hidden="true" class='icon-[lucide--loader-circle] size-5 animate-spin group-data-[captcha-size=compact]/captcha:size-4'></span>
                Loading challenge…
            </div>

            <div data-captcha-challenge hidden class='flex min-w-0 flex-col gap-3 group-data-[captcha-size=compact]/captcha:gap-1.5 group-data-[captcha-size=big]/captcha:gap-4 group-data-[captcha-type=not-robot]/captcha:p-3'>
                <div data-captcha-prompt-row class='flex items-start justify-between gap-3 group-data-[captcha-size=compact]/captcha:gap-2'>
                    <p data-captcha-prompt class='m-0 text-sm font-medium text-[var(--wrn-color-text)] group-data-[captcha-size=compact]/captcha:text-[11px] group-data-[captcha-size=compact]/captcha:leading-4'></p>
                    <span data-captcha-countdown hidden class='shrink-0 text-xs tabular-nums text-[var(--wrn-color-muted)] group-data-[captcha-size=compact]/captcha:text-[10px]'></span>
                </div>

                <div data-captcha-not-robot hidden class='w-full'>
                    <button
                        data-captcha-not-robot-button
                        type="button"
                        aria-pressed="false"
                        class='flex min-h-20 w-full items-center gap-3 rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface-2)] px-4 py-3 text-left transition-[border-color,box-shadow,background-color] hover:border-[var(--captcha-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] disabled:cursor-wait disabled:opacity-80 group-data-[captcha-size=compact]/captcha:min-h-16 group-data-[captcha-size=compact]/captcha:gap-2.5 group-data-[captcha-size=compact]/captcha:px-3 group-data-[captcha-size=compact]/captcha:py-2.5 group-data-[captcha-size=big]/captcha:min-h-24 group-data-[captcha-size=big]/captcha:px-5 group-data-[captcha-size=big]/captcha:py-4'
                    >
                        <span
                            data-captcha-not-robot-control
                            aria-hidden="true"
                            class='inline-flex size-7 shrink-0 items-center justify-center rounded-md border-2 border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] text-white transition-colors data-[verified=true]:border-[var(--wrn-color-success)] data-[verified=true]:bg-[var(--wrn-color-success)] group-data-[captcha-size=compact]/captcha:size-6 group-data-[captcha-size=big]/captcha:size-8'
                        >
                            <span data-captcha-not-robot-empty class='size-full'></span>
                            <span data-captcha-not-robot-spinner hidden class='icon-[lucide--loader-circle] size-4 animate-spin text-[var(--captcha-accent)]'></span>
                            <span data-captcha-not-robot-check hidden class='icon-[lucide--check] size-5'></span>
                        </span>

                        <span data-captcha-not-robot-label class='min-w-0 flex-1 text-sm font-semibold text-[var(--wrn-color-text)] group-data-[captcha-size=compact]/captcha:text-[11px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-size=big]/captcha:text-base'>
                            I'm not a robot
                        </span>

                        <span class='flex shrink-0 flex-col items-center gap-0.5 text-[10px] leading-none text-[var(--wrn-color-muted)]'>
                            <span aria-hidden="true" class='icon-[lucide--shield-check] size-6 text-[var(--captcha-accent)] group-data-[captcha-size=compact]/captcha:size-5 group-data-[captcha-size=big]/captcha:size-7'></span>
                            <span>WRNexus</span>
                        </span>
                    </button>
                </div>

                <div
                    data-captcha-image-wrap
                    hidden
                    class='overflow-hidden rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-white'
                >
                    <img
                        data-captcha-image
                        src=""
                        alt="CAPTCHA challenge"
                        draggable="false"
                        class='block h-auto min-h-20 w-full select-none object-contain group-data-[captcha-size=compact]/captcha:max-h-24 group-data-[captcha-size=compact]/captcha:min-h-12 group-data-[captcha-size=big]/captcha:min-h-28'
                    />
                </div>

                <div
                    data-captcha-items
                    hidden
                    role="group"
                    class='grid grid-cols-2 gap-2 group-data-[captcha-size=compact]/captcha:gap-1 sm:grid-cols-3 group-data-[captcha-size=big]/captcha:gap-3'
                ></div>

                <template data-captcha-item-template>
                    <button
                        type="button"
                        aria-pressed="false"
                        class='group relative overflow-hidden rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-white p-1 group-data-[captcha-size=compact]/captcha:p-0.5 transition-[border-color,box-shadow,transform] duration-[var(--wrn-motion-fast)] hover:border-[var(--captcha-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] aria-[pressed=true]:border-[var(--captcha-accent)] aria-[pressed=true]:ring-2 aria-[pressed=true]:ring-[var(--captcha-accent)]'
                    >
                        <img
                            data-captcha-item-image
                            src=""
                            alt=""
                            draggable="false"
                            class='aspect-[4/3] w-full select-none object-cover'
                        />
                        <span
                            data-captcha-item-check
                            hidden
                            aria-hidden="true"
                            class='absolute right-1.5 top-1.5 inline-flex size-5 group-data-[captcha-size=compact]/captcha:right-1 group-data-[captcha-size=compact]/captcha:top-1 group-data-[captcha-size=compact]/captcha:size-4 items-center justify-center rounded-full bg-[var(--captcha-accent)] text-white shadow-sm'
                        >
                            <span class='icon-[lucide--check] size-3.5'></span>
                        </span>
                    </button>
                </template>

                <input
                    data-captcha-honeypot
                    type="text"
                    name=""
                    value=""
                    tabindex="-1"
                    autocomplete="off"
                    aria-hidden="true"
                    class='pointer-events-none absolute -left-[10000px] top-auto h-px w-px overflow-hidden opacity-0'
                />
            </div>

            <div data-captcha-response-panel class='flex min-w-0 flex-col gap-2 group-data-[captcha-layout=horizontal]/captcha:self-stretch'>
            <label data-captcha-answer-wrap hidden class='flex min-w-0 flex-col gap-1.5 group-data-[captcha-size=compact]/captcha:gap-1'>
                <span class='text-xs font-semibold text-[var(--wrn-color-text)] group-data-[captcha-size=compact]/captcha:text-[10px]'>Your answer</span>
                <input
                    data-captcha-answer
                    type="text"
                    inputmode="text"
                    autocomplete="off"
                    autocapitalize="characters"
                    spellcheck="false"
                    class='h-11 w-full rounded-[var(--wrn-radius-sm)] border border-[var(--wrn-color-border)] bg-[var(--wrn-color-surface)] px-3 text-base font-semibold tracking-[0.18em] text-[var(--wrn-color-text)] outline-none transition-[border-color,box-shadow] placeholder:tracking-normal focus:border-[var(--captcha-accent)] focus:ring-2 focus:ring-[var(--captcha-accent)] disabled:cursor-not-allowed disabled:bg-[var(--wrn-color-surface-2)] aria-[invalid=true]:border-[var(--wrn-color-danger)] aria-[invalid=true]:ring-2 aria-[invalid=true]:ring-[var(--wrn-color-danger)] group-data-[captcha-size=compact]/captcha:h-8 group-data-[captcha-size=compact]/captcha:px-2 group-data-[captcha-size=compact]/captcha:text-xs group-data-[captcha-size=compact]/captcha:tracking-[0.12em] group-data-[captcha-size=big]/captcha:h-12 group-data-[captcha-size=big]/captcha:px-4 group-data-[captcha-size=big]/captcha:text-lg'
                    placeholder="Enter the answer"
                />
            </label>

            <div data-captcha-success hidden role="status" aria-live="polite" class='flex items-start gap-1.5 text-xs leading-5 text-[var(--wrn-color-success)] group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:text-[10px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-type=not-robot]/captcha:hidden'>
                <span aria-hidden="true" class='icon-[lucide--circle-check] mt-0.5 size-3.5 shrink-0'></span>
                <span data-captcha-success-message>Verification completed.</span>
            </div>

            <div data-captcha-error hidden role="alert" aria-live="polite" class='flex items-start gap-1.5 text-xs leading-5 text-[var(--wrn-color-danger)] group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:text-[10px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-type=not-robot]/captcha:mx-3 group-data-[captcha-type=not-robot]/captcha:mb-3'>
                <span aria-hidden="true" class='icon-[lucide--circle-alert] mt-0.5 size-3.5 shrink-0'></span>
                <span data-captcha-error-message></span>
            </div>

            <p data-captcha-help class='m-0 text-xs leading-5 text-[var(--wrn-color-muted)] group-data-[captcha-size=compact]/captcha:text-[10px] group-data-[captcha-size=compact]/captcha:leading-4 group-data-[captcha-type=not-robot]/captcha:hidden'>
                {helpText}
            </p>

            <footer data-captcha-footer class='flex flex-wrap items-center justify-between gap-2 group-data-[captcha-size=compact]/captcha:flex-nowrap group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-type=not-robot]/captcha:hidden'>
                <div class='flex flex-wrap items-center gap-1.5 group-data-[captcha-size=compact]/captcha:flex-nowrap group-data-[captcha-size=compact]/captcha:gap-0.5'>
                    <button
                        data-captcha-audio
                        hidden
                        type="button"
                        class='inline-flex h-9 items-center justify-center gap-1.5 rounded-[var(--wrn-radius-sm)] px-2.5 text-xs group-data-[captcha-size=compact]/captcha:h-8 group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:px-1.5 group-data-[captcha-size=compact]/captcha:text-[10px] font-semibold text-[var(--wrn-color-muted)] transition-colors hover:bg-[var(--wrn-color-surface-2)] hover:text-[var(--captcha-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] disabled:cursor-not-allowed disabled:opacity-50'
                    >
                        <span aria-hidden="true" class='icon-[lucide--volume-2] size-4 group-data-[captcha-size=compact]/captcha:size-3.5'></span>
                        Listen
                    </button>

                    <button
                        data-captcha-audio-alternative
                        hidden
                        type="button"
                        class='inline-flex h-9 items-center justify-center gap-1.5 rounded-[var(--wrn-radius-sm)] px-2.5 text-xs group-data-[captcha-size=compact]/captcha:h-8 group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:px-1.5 group-data-[captcha-size=compact]/captcha:text-[10px] font-semibold text-[var(--wrn-color-muted)] transition-colors hover:bg-[var(--wrn-color-surface-2)] hover:text-[var(--captcha-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] disabled:cursor-not-allowed disabled:opacity-50'
                    >
                        <span aria-hidden="true" class='icon-[lucide--ear] size-4 group-data-[captcha-size=compact]/captcha:size-3.5'></span>
                        Use audio
                    </button>

                    <button
                        data-captcha-refresh
                        type="button"
                        class='inline-flex h-9 items-center justify-center gap-1.5 rounded-[var(--wrn-radius-sm)] px-2.5 text-xs group-data-[captcha-size=compact]/captcha:h-8 group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:px-1.5 group-data-[captcha-size=compact]/captcha:text-[10px] font-semibold text-[var(--wrn-color-muted)] transition-colors hover:bg-[var(--wrn-color-surface-2)] hover:text-[var(--captcha-accent)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] disabled:cursor-not-allowed disabled:opacity-50'
                    >
                        <span aria-hidden="true" class='icon-[lucide--refresh-cw] size-4 group-data-[captcha-size=compact]/captcha:size-3.5'></span>
                        New challenge
                    </button>
                </div>

                <button
                    data-captcha-verify
                    type="button"
                    class='inline-flex h-9 items-center justify-center gap-1.5 rounded-[var(--wrn-radius-sm)] bg-[var(--captcha-accent)] px-3 text-xs group-data-[captcha-size=compact]/captcha:h-8 group-data-[captcha-size=compact]/captcha:gap-1 group-data-[captcha-size=compact]/captcha:px-2.5 group-data-[captcha-size=compact]/captcha:text-[10px] font-semibold text-white shadow-sm transition-[filter,transform] hover:brightness-95 active:translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--captcha-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--wrn-color-surface)] disabled:cursor-not-allowed disabled:opacity-50'
                >
                    <span data-captcha-verify-icon aria-hidden="true" class='icon-[lucide--shield-check] size-4 group-data-[captcha-size=compact]/captcha:size-3.5'></span>
                    <span data-captcha-verify-spinner hidden aria-hidden="true" class='icon-[lucide--loader-circle] size-4 animate-spin group-data-[captcha-size=compact]/captcha:size-3.5'></span>
                    <span data-captcha-verify-label>Verify</span>
                </button>
            </footer>

            <input
                data-captcha-response
                type="hidden"
                name='{responseField}'
                value=""
            />

            <p data-captcha-credit class='m-0 text-[11px] leading-4 text-[var(--wrn-color-muted)] group-data-[captcha-size=compact]/captcha:hidden group-data-[captcha-type=not-robot]/captcha:hidden'>
                Protected by WRNexus CAPTCHA. Server-side verification is required.
            </p>
            </div>
        </section>
    }

    style {
        /*
         * Compact image challenges read as a single sequence: challenge,
         * secondary actions, answer, then verification. Flattening the footer
         * lets Listen/New challenge move directly beneath the image without
         * changing the DOM or the client runtime selectors.
         */
        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])[data-captcha-layout="horizontal"] {
            grid-template-columns: minmax(0, 1fr);
        }

        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
            [data-captcha-response-panel]
            [data-captcha-footer] {
            display: contents;
        }

        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
            [data-captcha-footer]
            > div:first-child {
            order: -1;
            justify-content: flex-start;
        }

        [data-wrn-captcha]:is([data-captcha-compact="true"], [data-captcha-size="compact"])
            [data-captcha-verify] {
            align-self: flex-start;
        }
    }
}