File, range, and color controls

<!-- Default file upload with help text -->
<div class="bs-form-group">
  <label class="bs-label" for="brief">Project brief</label>
  <input class="bs-file" id="brief" type="file" accept=".pdf,.doc,.docx" aria-describedby="brief-help" />
  <span class="bs-form-text" id="brief-help">PDF or Word document, up to 10 MB.</span>
</div>

<!-- Compact and large file sizes -->
<input class="bs-file bs-file-sm" type="file" aria-label="Compact file upload" />
<input class="bs-file bs-file-lg" type="file" aria-label="Large file upload" disabled />

<div class="bs-form-group">
  <div class="bs-flex bs-items-center bs-justify-between bs-gap-3">
    <label class="bs-label" for="volume">Notification volume</label>
    <output class="bs-badge bs-badge-primary" id="volume-value" for="volume">65%</output>
  </div>
  <input class="bs-range" id="volume" type="range" min="0" max="100" value="65" aria-describedby="volume-value" data-native-output="volume-value" />
</div>

<div class="bs-form-group">
  <label class="bs-label" for="accent">Accent color</label>
  <div class="bs-flex bs-items-center bs-gap-3">
    <input class="bs-color" id="accent" type="color" value="#d9468f" aria-describedby="accent-value" data-native-output="accent-value" />
    <output class="bs-badge" id="accent-value" for="accent">#D9468F</output>
  </div>
</div>

<div class="bs-form-group">
  <label class="bs-label" for="id-document">
    Identity verification document <span class="bs-label-required" aria-hidden="true">*</span>
  </label>
  <input
    class="bs-file bs-is-invalid"
    id="id-document"
    type="file"
    accept=".jpg,.png,.pdf"
    aria-invalid="true"
    aria-describedby="doc-error"
    required
  />
  <span class="bs-form-feedback bs-form-feedback-invalid" id="doc-error">
    Please select a valid image or PDF under 5 MB.
  </span>
</div>

document.querySelectorAll("[data-native-output]").forEach((input) => {
  const output = document.querySelector(`#${input.dataset.nativeOutput}`);
  const render = () => {
    output.value = input.type === "range" ? `${input.value}%` : input.value.toUpperCase();
  };
  input.addEventListener("input", render);
  render();
});