Password Submit

<div class="u-w-100% u-w-50%-@bp2" x-data="{ value: '' }" data-password-str>
    <label class="c-label | u-w-100%">
        <span class="c-label__text">Password:</span>
        <span class="c-label__input" x-data="show_password($refs.input, $refs.btn)">
            <input class="c-input c-input--password" id="new-password" type="password" autocomplete="new-password" x-ref="input" x-model="value" data-password-str-input>
            <button class="c-label__btn | u-tc-blue-600 u-tc:hover-blue-800" type="button" aria-label="Warning: this will display your password on screen." x-bind="trigger" x-ref="btn">
                <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" x-show.important="show == false">
                    <path fill-rule="nonzero" d="M8 3.002a8.43 8.43 0 0 1 3.559.739c.862.4 1.636.953 2.28 1.63a7.456 7.456 0 0 1 1.585 2.404l.075.226-.08.226C14.245 11.143 11.28 13.05 8 13 4.76 13 1.472 11.07.576 8.227L.501 8l.08-.226a7.57 7.57 0 0 1 1.58-2.404 7.534 7.534 0 0 1 2.28-1.63A8.429 8.429 0 0 1 8 3ZM8 4.43C5.447 4.354 3.104 5.77 2.089 8 3.104 10.234 5.447 11.649 8 11.573c2.553.076 4.895-1.34 5.911-3.571C12.897 5.768 10.553 4.352 8 4.43ZM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
                </svg>
                <svg class="c-icon" viewBox="0 0 16 16" aria-hidden="true" x-show.important="show" style="display: none;">
                    <path fill-rule="nonzero" d="m4.177.249 1.585 2.44A9.038 9.038 0 0 1 8 2.437a8.993 8.993 0 0 1 3.797.789 8.038 8.038 0 0 1 2.433 1.738 7.955 7.955 0 0 1 1.69 2.566l.08.24-.084.241c-.75 1.862-2.184 3.338-3.964 4.212l1.362 2.098a.5.5 0 0 1-.147.692l-.652.423a.5.5 0 0 1-.692-.147L2.686 1.218a.5.5 0 0 1 .147-.692l.652-.424a.5.5 0 0 1 .692.147ZM2.9 3.984l.837 1.287A6.375 6.375 0 0 0 1.694 7.77c1.06 2.333 3.481 3.83 6.14 3.813l.973 1.496c-.266.02-.536.029-.807.025-3.456 0-6.965-2.06-7.92-5.093L0 7.77l.084-.241a8.076 8.076 0 0 1 1.687-2.566 8.01 8.01 0 0 1 1.13-.98ZM8 3.96a6.974 6.974 0 0 0-1.355.091l1.262 1.943L8 5.991c.933 0 1.698.718 1.772 1.632l.006.146c0 .29-.07.565-.194.808l1.536 2.365c1.396-.648 2.542-1.756 3.186-3.173C13.224 5.387 10.724 3.877 8 3.96Z"/>
                </svg>
            </button>
        </span>
    </label>
    <div style="display: none;" x-show="value.length > 0" x-collapse>
        <div class="c-password-str-meter | u-hidden" data-password-str-meter-wrapper>
            <div class="o-grid">
                <div class="o-grid__item | u-col-6 u-flex">
                    <div class="c-password-str-meter__progress" min="0" max="4" value="0" aria-hidden="true" data-password-str-meter>
                        <span class="u-block"></span>
                    </div>
                </div>
                <div class="o-grid__item | u-col-6">
                    <p class="u-right u-fs-sm" aria-live="polite" aria-atomic="true">Password Strength: <span class="u-tc-headings" data-password-str-value></span></p>
                </div>
            </div>
        </div>
        <div class="c-password-str-list" data-password-str-req>
            <ul class="o-list-bare | u-spacing-v--xs">
                <li class="c-password-str-list__item | o-list__item" data-password-req="length:6">
                    <svg class="c-icon c-icon--natural | u-mr-xs" viewBox="0 0 16 16" aria-hidden="true">
                        <g class="c-password-str--icon-grp" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
                            <line x1="-6" y1="8" x2="8" y2="8"></line>
                            <line x1="8" y1="8" x2="22" y2="8"></line>
                        </g>
                    </svg>
                    <span>At least six characters</span>
                </li>
                <li class="c-password-str-list__item | o-list__item" data-password-req="special">
                    <svg class="c-icon c-icon--natural | u-mr-xs" viewBox="0 0 16 16" aria-hidden="true">
                        <g class="c-password-str--icon-grp" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
                            <line x1="-6" y1="8" x2="8" y2="8"></line>
                            <line x1="8" y1="8" x2="22" y2="8"></line>
                        </g>
                    </svg>
                    <span>At least one special character</span>
                </li>
                <li class="c-password-str-list__item | o-list__item" data-password-req="uppercase">
                    <svg class="c-icon c-icon--natural | u-mr-xs" viewBox="0 0 16 16" aria-hidden="true">
                        <g class="c-password-str--icon-grp" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2">
                            <line x1="-6" y1="8" x2="8" y2="8"></line>
                            <line x1="8" y1="8" x2="22" y2="8"></line>
                        </g>
                    </svg>
                    <span>At least one uppercase character</span>
                </li>
            </ul>
        </div>
    </div>
</div>