Replace tab macro with new tab web component

core/templates/core/macros.jinja

@@ -245,65 +245,3 @@
   <button type="button" onclick="checkbox_{{form_id}}(true);">{% trans %}Select All{% endtrans %}</button>
   <button type="button" onclick="checkbox_{{form_id}}(false);">{% trans %}Unselect All{% endtrans %}</button>
 {% endmacro %}
-
-{% macro tabs(tab_list, attrs = "") %}
-  {# Tab component
-
-  Parameters:
-    tab_list: list[tuple[str, str]] The list of tabs to display.
-        Each element of the list is a tuple which first element
-        is the title of the tab and the second element its content
-    attrs: str Additional attributes to put on the enclosing div
-
-  Example:
-    A basic usage would be as follow :
-
-        {{ tabs([("title 1", "content 1"), ("title 2", "content 2")]) }}
-
-    If you want to display more complex logic, you can define macros
-    and use those macros in parameters :
-
-        {{ tabs([("title", my_macro())]) }}
-
-    It's also possible to get and set the currently selected tab using Alpine.
-    Here, the title of the currently selected tab will be displayed.
-    Moreover, on page load, the tab will be opened on "tab 2".
-
-        <div x-data="{current_tab: 'tab 2'}">
-          <p x-text="current_tab"></p>
-          {{ tabs([("tab 1", "Hello"), ("tab 2", "World")], "x-model=current_tab") }}
-        </div>
-
-    If you want to have translated tab titles, you can enclose the macro call
-    in a with block :
-
-        {% with title=_("title"), content=_("Content") %}
-            {{ tabs([(tab1, content)]) }}
-        {% endwith %}
-  #}
-  <div
-    class="tabs shadow"
-    x-data="{selected: '{{ tab_list[0][0] }}'}"
-    x-modelable="selected"
-    {{ attrs }}
-  >
-    <div class="tab-headers">
-      {% for title, _ in tab_list %}
-        <button
-          class="tab-header clickable"
-          :class="{active: selected === '{{ title }}'}"
-          @click="selected = '{{ title }}'"
-        >
-          {{ title }}
-        </button>
-      {% endfor %}
-    </div>
-    <div class="tab-content">
-      {% for title, content in tab_list %}
-        <section x-show="selected === '{{ title }}'">
-          {{ content }}
-        </section>
-      {% endfor %}
-    </div>
-  </div>
-{% endmacro %}