Passwords and input masks

<div class="bs-form-group" data-bs-password>
  <label class="bs-label" for="password">Password</label>
  <div class="bs-input-wrap">
    <input
      class="bs-input bs-input-has-icon-end"
      id="password"
      name="password"
      type="password"
      autocomplete="current-password"
      data-bs-password-input
    />
    <button
      class="bs-input-action"
      type="button"
      data-bs-password-toggle
      data-bs-password-show-label="Show password"
      data-bs-password-hide-label="Hide password"
    >
      <span data-bs-password-label>Show password</span>
    </button>
  </div>
</div>

import "@boobstrap/boobstrap";
import { initPasswords } from "@boobstrap/boobstrap/js/password";

const passwordFields = initPasswords(document);

<div class="bs-form-group">
  <label class="bs-label" for="phone">Phone number</label>
  <input
    class="bs-input"
    id="phone"
    name="phone"
    type="tel"
    autocomplete="tel"
    data-bs-mask="(999) 999-9999"
    placeholder="(555) 555-0123"
  />
</div>

<label class="bs-label" for="reference-date">Reference date</label>
<input class="bs-input" id="reference-date" name="reference_date" inputmode="numeric" data-bs-mask="99/99/9999" placeholder="MM/DD/YYYY" />

<label class="bs-label" for="product-key">Product key</label>
<input class="bs-input" id="product-key" name="product_key" data-bs-mask="AAAA-9999-****" placeholder="ABCD-1234-E5F6" />

import "@boobstrap/boobstrap";
import { initInputMasks } from "@boobstrap/boobstrap/js/input-mask";

const masks = initInputMasks(document);