<commit_before><bolt-button onclick="changeTheme()" style="margin-bottom: 2rem;">Toggle light/dark theme</bolt-button>

<div id="theme-controller">
  {% if addAnimateButtons %}
    {% set content %}
      <div class="demo-animate">
        <button class="demo-animate__trigger">Trigger Animations In</button>
        <div class="demo-animate__wrapper">
          {{ content }}
        </div>
      </div>
    {% endset %}
  {% endif %}

  {% if enableEditor %}
    {# Editors can only be used when Shadow DOM is present #}
    {% include '@bolt-components-editor/editor-in-pl.twig' with {
      content: content,
    } only %}
  {% else %}
    {{ content }}
  {% endif %}

  {# @TODO It makes no sense, but this and this alone fixes the 2px content overflow. #}
  <div style="overflow: hidden; max-width: 100vw;">
    <hr>
    <h2>Shadow DOM – yes:☝️ no:👇</h2>
    <hr>
  </div>

  {# When Bolt Web Components are wrapped in a `<form>` element all children have Shadow DOM disabled automatically #}
  <form onsubmit="event.preventDefault()">
    {{ content }}
  </form>
</div>

<script>
  // Note: this code is not transpiled so it has to run in IE.
  function changeTheme() {
    const lightClass = 't-bolt-light';
    const darkClass = 't-bolt-dark';
    const themeEl = document.getElementById('theme-controller');
    const classToRemove = themeEl.classList.contains(darkClass) ? darkClass : lightClass;
    const classToAdd = themeEl.classList.contains(darkClass) ? lightClass : darkClass;
    themeEl.classList.remove(classToRemove);
    themeEl.classList.add(classToAdd);
  }
</script><commit_msg>fix(micro-journeys): allow for multiple demo theme controllers to address PR feedback<commit_after><bolt-button onclick="changeTheme()" style="margin-bottom: 2rem;">Toggle light/dark theme</bolt-button>

<div class="bolt-demo-theme-controller">
  {% if addAnimateButtons %}
    {% set content %}
      <div class="demo-animate">
        <button class="demo-animate__trigger">Trigger Animations In</button>
        <div class="demo-animate__wrapper">
          {{ content }}
        </div>
      </div>
    {% endset %}
  {% endif %}

  {% if enableEditor %}
    {# Editors can only be used when Shadow DOM is present #}
    {% include '@bolt-components-editor/editor-in-pl.twig' with {
      content: content,
    } only %}
  {% else %}
    {{ content }}
  {% endif %}

  {# @TODO It makes no sense, but this and this alone fixes the 2px content overflow. #}
  <div style="overflow: hidden; max-width: 100vw;">
    <hr>
    <h2>Shadow DOM – yes:☝️ no:👇</h2>
    <hr>
  </div>

  {# When Bolt Web Components are wrapped in a `<form>` element all children have Shadow DOM disabled automatically #}
  <form onsubmit="event.preventDefault()">
    {{ content }}
  </form>
</div>

<script>
  // Note: this code is not transpiled so it has to run in IE.
  function changeTheme() {
    const lightClass = 't-bolt-light';
    const darkClass = 't-bolt-dark';
    const themeEls = document.querySelectorAll('.bolt-demo-theme-controller');
    Array.prototype.slice.call(themeEls).forEach( function(themeEl) {
      const classToRemove = themeEl.classList.contains(darkClass) ? darkClass : lightClass;
      const classToAdd = themeEl.classList.contains(darkClass) ? lightClass : darkClass;
      themeEl.classList.remove(classToRemove);
      themeEl.classList.add(classToAdd);
    });
  }
</script>
{'fraction_non_alphanumeric': 0.14323607427055704, 'fraction_numerical': 0.00412614205717654, 'mean_word_length': 3.334610472541507, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2375788', 'n_tokens_mistral': 1113, 'n_tokens_neox': 1043, 'n_words': 279}