Contrast switcher

// src/components/elements/contrast-switcher/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/contrast-switcher
required:
  - variant
properties:
  variant:
    type: string
  tag:
    type: string

// src/components/elements/contrast-switcher/mocks.yaml

variant: desktop

// src/components/elements/contrast-switcher/contrast-switcher.html.twig

<{% if tag %}{{ tag }}{% else %}div{% endif %} class="ContrastSwitcher js-ContrastSwitcher{% if class %} {{ class }}{% endif %}">
  <button class="ContrastSwitcher-button js-ContrastSwitcher-button u-typo-copy-small-desktop-copy-bold-mobile" type="button" aria-expanded="false" aria-controls="ContrastSwitcher-content--{{ variant }}" id="ContrastSwitcher-button--{{ variant }}">
    <span class="ContrastSwitcher-buttonText" title="Barrierefreiheit">Barrierefreiheit</span>
    {% include "@elements/icon/icon.html.twig" with {
      name: "chevron",
      class: "ContrastSwitcher-buttonIcon"
    } only %}
  </button>
  <div class="ContrastSwitcher-content js-ContrastSwitcher-content" aria-labelledby="ContrastSwitcher-button--{{ variant }}" id="ContrastSwitcher-content--{{ variant }}" aria-hidden="true">
    <div class="ContrastSwitcher-text">
      <p class="ContrastSwitcher-textHeadline u-typo-copy">Kontrast ändern</p>
      <p class="u-typo-copy-small ContrastSwitcher-textCopy">Verstärken Sie den Kontrast um die Lesbarkeit zu optimieren.</p>
    </div>
    <div class="ContrastSwitcher-inputHolder">
      <input type="checkbox" id="ContrastSwitcher--{{ variant }}" class="ContrastSwitcher-checkbox js-ContrastSwitcher-checkbox">
      <label for="ContrastSwitcher--{{ variant }}" class="ContrastSwitcher-label js-ContrastSwitcher-label" data-title-high="An" data-title-low="Aus">Aus</label>
    </div>
  </div>
</{% if tag %}{{ tag }}{% else %}div{% endif %}>