rorschach

2023-06-09 17:04:04 +02:00
parent 47d640beb3
commit 9beeb37aaa
486 changed files with 38480 additions and 26956 deletions
@@ -0,0 +1,22 @@
+{#
+/**
+ * @file
+ * Theme override for rendering book outlines within a block.
+ *
+ * This template is used only when the block is configured to "show block on all
+ * pages", which presents multiple independent books on all pages.
+ *
+ * Available variables:
+ * - book_menus: Book outlines.
+ *   - id: The parent book ID.
+ *   - title: The parent book title.
+ *   - menu: The top-level book links.
+ *
+ * @see template_preprocess_book_all_books_block()
+ */
+#}
+{% for book in book_menus %}
+  <nav id="book-block-menu-{{ book.id }}" class="book-block-menu" role="navigation" aria-label="{% trans %}Book outline for {{ book.title }}{% endtrans %}">
+    {{ book.menu }}
+  </nav>
+{% endfor %}
@@ -0,0 +1,57 @@
+{#
+/**
+ * @file
+ * Theme override to navigate books.
+ *
+ * Presented under nodes that are a part of book outlines.
+ *
+ * Available variables:
+ * - tree: The immediate children of the current node rendered as an unordered
+ *   list.
+ * - current_depth: Depth of the current node within the book outline. Provided
+ *   for context.
+ * - prev_url: URL to the previous node.
+ * - prev_title: Title of the previous node.
+ * - parent_url: URL to the parent node.
+ * - parent_title: Title of the parent node. Not printed by default. Provided
+ *   as an option.
+ * - next_url: URL to the next node.
+ * - next_title: Title of the next node.
+ * - has_links: Flags TRUE whenever the previous, parent or next data has a
+ *   value.
+ * - book_id: The book ID of the current outline being viewed. Same as the node
+ *   ID containing the entire outline. Provided for context.
+ * - book_url: The book/node URL of the current outline being viewed. Provided
+ *   as an option. Not used by default.
+ * - book_title: The book/node title of the current outline being viewed.
+ *
+ * @see template_preprocess_book_navigation()
+ * @see rorschach_preprocess_book_navigation()
+ */
+#}
+{{ attach_library('rorschach/book') }}
+{% if tree or has_links %}
+  <nav id="book-navigation-{{ book_id }}" class="book-navigation" role="navigation" aria-labelledby="book-label-{{ book_id }}">
+    {{ tree }}
+    {% if has_links %}
+      <h2 class="visually-hidden" id="book-label-{{ book_id }}">{{ 'Book traversal links for'|t }} {{ book_title }}</h2>
+      <ul class="book-pager">
+      {% if prev_url %}
+        <li class="book-pager__item book-pager__item--previous">
+          <a class="book-pager__link book-pager__link--previous" href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}">{{ prev_title }}</a>
+        </li>
+      {% endif %}
+      {% if parent_url %}
+        <li class="book-pager__item book-pager__item--center">
+          <a class="book-pager__link book-pager__link--center" href="{{ parent_url }}" title="{{ 'Go to parent page'|t }}">{{ 'Up'|t }}</a>
+        </li>
+      {% endif %}
+      {% if next_url %}
+        <li class="book-pager__item book-pager__item--next">
+          <a class="book-pager__link book-pager__link--next" href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}">{{ next_title }}</a>
+       </li>
+      {% endif %}
+    </ul>
+    {% endif %}
+  </nav>
+{% endif %}
@@ -0,0 +1,68 @@
+{#
+/**
+ * @file
+ * Theme override to display a book tree.
+ *
+ * Returns HTML for a wrapper for a book sub-tree.
+ *
+ * Available variables:
+ * - items: A nested list of book items. Each book item contains:
+ *   - attributes: HTML attributes for the book item.
+ *   - below: The book item child items.
+ *   - title: The book link title.
+ *   - url: The book link URL, instance of \Drupal\Core\Url.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     book tree.
+ *   - is_collapsed: TRUE if the link has children within the current book tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ */
+#}
+{% import _self as book_tree %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{{ book_tree.book_links(items, attributes, 0) }}
+
+{% macro book_links(items, attributes, menu_level) %}
+  {% import _self as book_tree %}
+  {% if items %}
+    {% if menu_level == 0 %}
+      <ul{{ attributes.addClass('book-navigation__menu menu', 'menu--level-' ~ (menu_level + 1)) }}>
+    {% else %}
+      <ul class='menu menu--level-{{ menu_level + 1 }}'>
+    {% endif %}
+    {% for item in items %}
+      {%
+        set item_classes = [
+          'book-navigation__item',
+          'menu__item--level-' ~ (menu_level + 1),
+          item.is_expanded ? 'menu__item--expanded',
+          item.is_collapsed ? 'menu__item--collapsed',
+          item.in_active_trail ? 'menu__item--active-trail',
+        ]
+      %}
+      {% set link_classes = [
+          'book-navigation__link',
+          'menu__link',
+          'menu__link--link',
+          'menu__link--level-' ~ (menu_level + 1),
+          item.in_active_trail ? 'menu__link--active-trail',
+          item.below ? 'menu__link--has-children',
+        ]
+      %}
+      <li{{ item.attributes.addClass(item_classes) }}>
+        {{ link(item.title, item.url, {
+          'class': link_classes
+          })
+        }}
+        {% if item.below %}
+          {{ book_tree.book_links(item.below, attributes, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}
@@ -0,0 +1,27 @@
+{#
+/**
+ * @file
+ * Theme override for a breadcrumb trail.
+ *
+ * Available variables:
+ * - breadcrumb: Breadcrumb trail items.
+ */
+#}
+{% if breadcrumb %}
+  <nav class="breadcrumb" role="navigation" aria-labelledby="system-breadcrumb">
+    <h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
+    <div class="breadcrumb__content">
+      <ol class="breadcrumb__list">
+        {% for item in breadcrumb %}
+          <li class="breadcrumb__item">
+            {% if item.url %}
+              <a href="{{ item.url }}" class="breadcrumb__link">{{ item.text }}</a>
+            {% else %}
+              {{ item.text }}
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ol>
+    </div>
+  </nav>
+{% endif %}
@@ -0,0 +1,60 @@
+{#
+/**
+ * @file
+ * Rorschach's theme override for comment links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See https://juicystudio.com/article/screen-readers-display-none.php and
+ *   https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ */
+#}
+{%
+  set classes = [
+    'comment__links',
+  ]
+%}
+{% if links -%}
+  {%- if heading -%}
+    {%- if heading.level -%}
+      <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+    {%- else -%}
+      <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+    {%- endif -%}
+  {%- endif -%}
+  <ul{{ attributes.addClass(classes) }}>
+    {% for item in links %}
+      <li{{ item.attributes.addClass('comment__links-item') }}>
+        {%- if item.link -%}
+          {{ item.link }}
+        {%- elseif item.text_attributes -%}
+          <span{{ item.text_attributes }}>{{ item.text }}</span>
+        {%- else -%}
+          {{ item.text }}
+        {%- endif -%}
+      </li>
+    {% endfor %}
+  </ul>
+{%- endif %}
@@ -0,0 +1,55 @@
+{#
+/**
+ * @file
+ * Rorschach's theme override for a set of links.
+ *
+ * Available variables:
+ * - attributes: Attributes for the UL containing the list of links.
+ * - links: Links to be output.
+ *   Each link will have the following elements:
+ *   - title: The link text.
+ *   - href: The link URL. If omitted, the 'title' is shown as a plain text
+ *     item in the links list. If 'href' is supplied, the entire link is passed
+ *     to l() as its $options parameter.
+ *   - attributes: (optional) HTML attributes for the anchor, or for the <span>
+ *     tag if no 'href' is supplied.
+ * - heading: (optional) A heading to precede the links.
+ *   - text: The heading text.
+ *   - level: The heading level (e.g. 'h2', 'h3').
+ *   - attributes: (optional) A keyed list of attributes for the heading.
+ *   If the heading is a string, it will be used as the text of the heading and
+ *   the level will default to 'h2'.
+ *
+ *   Headings should be used on navigation menus and any list of links that
+ *   consistently appears on multiple pages. To make the heading invisible use
+ *   the 'visually-hidden' CSS class. Do not use 'display:none', which
+ *   removes it from screen readers and assistive technology. Headings allow
+ *   screen reader and keyboard only users to navigate to or skip the links.
+ *   See https://juicystudio.com/article/screen-readers-display-none.php and
+ *   https://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @see template_preprocess_links()
+ */
+#}
+{% if links -%}
+  {%- if heading -%}
+    {%- if heading.level -%}
+      <{{ heading.level }}{{ heading.attributes }}>{{ heading.text }}</{{ heading.level }}>
+    {%- else -%}
+      <h2{{ heading.attributes }}>{{ heading.text }}</h2>
+    {%- endif -%}
+  {%- endif -%}
+  <ul{{ attributes }}>
+    {% for item in links %}
+      <li{{ item.attributes }}>
+        {%- if item.link -%}
+          {{ item.link }}
+        {%- elseif item.text_attributes -%}
+          <span{{ item.text_attributes }}>{{ item.text }}</span>
+        {%- else -%}
+          {{ item.text }}
+        {%- endif -%}
+      </li>
+    {% endfor %}
+  </ul>
+{%- endif %}
@@ -0,0 +1,139 @@
+{#
+/**
+ * @file
+ * Rorschach's theme implementation for the menus in the primary_menu region.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('rorschach/navigation-primary') }}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0, 'primary-menu-item-') }}
+
+{% macro menu_links(items, attributes, menu_level, aria_id) %}
+  {% set primary_nav_level = 'primary-nav__menu--level-' ~ (menu_level + 1) %}
+  {% set drupal_selector_primary_nav_level = menu_level <= 1 ? 'primary-nav-menu--level-' ~ (menu_level + 1) : false %}
+  {% set is_top_level_menu = menu_level == 0 %}
+  {% import _self as menus %}
+  {% if items %}
+
+    {#
+      Place the menu arrow (caret) outside of the submenu because the submenu
+      has the overflow:hidden CSS rule applied.
+    #}
+    {% if menu_level == 1 %}
+      <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
+    {% endif %}
+
+    <ul {{ attributes.addClass('primary-nav__menu', primary_nav_level).setAttribute('data-drupal-selector', drupal_selector_primary_nav_level) }}>
+      {% set attributes = attributes.removeClass(primary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'primary-nav__menu-item',
+            'primary-nav__menu-item--' ~ menu_item_type,
+            'primary-nav__menu-item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'primary-nav__menu-item--active-trail',
+            item.below ? 'primary-nav__menu-item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'primary-nav__menu-link',
+            'primary-nav__menu-link--' ~ menu_item_type,
+            'primary-nav__menu-link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'primary-nav__menu-link--active-trail',
+            item.below ? 'primary-nav__menu-link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes).setAttribute('data-drupal-selector', is_top_level_menu and item.below ? 'primary-nav-menu-item-has-children': false) }}>
+          {#
+            A unique HTML ID should be used, but that isn't available through
+            Twig yet, so the |clean_id filter is used for now.
+            @see https://www.drupal.org/project/drupal/issues/3115445
+          #}
+          {% set aria_id = (aria_id ~ loop.index )|clean_id %}
+          {% set link_title %}
+            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-{{ menu_level + 1 }}">{{ item.title }}</span>
+          {% endset %}
+
+          {% if menu_item_type == 'link' or menu_item_type == 'nolink' %}
+            {{ link(menu_item_type == 'link' ? link_title : item.title, item.url, {
+              'class': link_classes,
+              'data-drupal-selector': is_top_level_menu ? 'primary-nav-menu-link-has-children' : false,
+              })
+            }}
+
+            {% if item.below %}
+              {#
+                Aria-hidden  and tabindex attributes are removed via JS. Button is non-functional,
+                but still visible in non-JS environments so that chevron can indicate presence of
+                drop menu).
+              #}
+              {% if is_top_level_menu %}
+                {% set toggle_button_attributes = create_attribute({
+                  'class': 'primary-nav__button-toggle',
+                  'data-drupal-selector': 'primary-nav-submenu-toggle-button',
+                  'aria-controls': aria_id,
+                  'aria-expanded': 'false',
+                  'aria-hidden': 'true',
+                  'tabindex': '-1',
+                }) %}
+
+                <button{{ toggle_button_attributes }}>
+                  <span class="visually-hidden">{{ '@title sub-navigation'|t({'@title': item.title}) }}</span>
+                  <span class="icon--menu-toggle"></span>
+                </button>
+              {% endif %}
+
+              {% set attributes = attributes.setAttribute('id', aria_id) %}
+              {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
+            {% endif %}
+
+          {% elseif menu_item_type == 'button' %}
+
+            {{ link(link_title, item.url, {
+              'class': link_classes,
+              'aria-controls': is_top_level_menu and item.below ? aria_id : false,
+              'aria-expanded': is_top_level_menu and item.below ? 'false' : false,
+              'data-drupal-selector': is_top_level_menu and item.below ? 'primary-nav-submenu-toggle-button' : false,
+            }) }}
+
+            {% set attributes = attributes.setAttribute('id', aria_id) %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1, aria_id) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}
@@ -0,0 +1,78 @@
+{#
+/**
+ * @file
+ * Rorschach's theme implementation for the menus in the secondary_menu region.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{{ attach_library('rorschach/navigation-secondary') }}
+
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% set secondary_nav_level = 'secondary-nav__menu--level-' ~ (menu_level + 1) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul{{ attributes.addClass('secondary-nav__menu', secondary_nav_level) }}>
+      {% set attributes = attributes.removeClass(secondary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'secondary-nav__menu-item',
+            'secondary-nav__menu-item--' ~ menu_item_type,
+            'secondary-nav__menu-item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-item--active-trail',
+            item.below ? 'secondary-nav__menu-item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'secondary-nav__menu-link',
+            'secondary-nav__menu-link--' ~ menu_item_type,
+            'secondary-nav__menu-link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'secondary-nav__menu-link--active-trail',
+            item.below ? 'secondary-nav__menu-link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes) }}>
+          {{ link(item.title, item.url, { 'class': link_classes }) }}
+
+          {% if item.below %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+          {% endif %}
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}
@@ -0,0 +1,29 @@
+{#
+/**
+ * @file
+ * Theme override for a local task link.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the wrapper element.
+ * - is_active: Whether the task item is an active tab.
+ * - link: A rendered link element.
+ * - level: The menu level where the tab is rendered.
+ *
+ * Note: This template renders the content for each task item in
+ * menu-local-tasks.html.twig.
+ *
+ * @see template_preprocess_menu_local_task()
+ */
+#}
+<li{{ attributes.addClass('tabs__tab', is_active ? 'is-active') }}>
+  {{ link }}
+  {% if is_active and level == 'primary' %}
+    <button class="tabs__trigger" aria-label="{{ 'Tabs display toggle'|t }}" aria-expanded="false">
+      <span class="tabs__trigger-icon">
+        <span></span>
+        <span></span>
+        <span></span>
+      </span>
+    </button>
+  {% endif %}
+</li>
@@ -0,0 +1,30 @@
+{#
+/**
+ * @file
+ * Rorschach theme implementation to display primary and secondary local tasks.
+ *
+ * Available variables:
+ * - primary: HTML list items representing primary tasks.
+ * - secondary: HTML list items representing secondary tasks.
+ *
+ * Each item in these variables (primary and secondary) can be individually
+ * themed in menu-local-task.html.twig.
+ *
+ * @ingroup themeable
+ */
+#}
+
+{{ attach_library('rorschach/tabs') }}
+
+{% if primary %}
+  <h2 id="primary-tabs-title" class="visually-hidden">{{ 'Primary tabs'|t }}</h2>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="primary-tabs-title" data-drupal-nav-primary-tabs>
+    <ul class="tabs tabs--primary">{{ primary }}</ul>
+  </nav>
+{% endif %}
+{% if secondary %}
+  <h2 id="secondary-tabs-title" class="visually-hidden">{{ 'Secondary tabs'|t }}</h2>
+  <nav role="navigation" class="tabs-wrapper" aria-labelledby="secondary-tabs-title">
+    <ul class="tabs tabs--secondary">{{ secondary }}</ul>
+  </nav>
+{% endif %}
@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Rorschach's theme implementation for the main menu.
+ *
+ * Available variables:
+ * - menu_name: The machine name of the menu.
+ * - items: A nested list of menu items. Each menu item contains:
+ *   - attributes: HTML attributes for the menu item.
+ *   - below: The menu item child items.
+ *   - title: The menu link title.
+ *   - url: The menu link url, instance of \Drupal\Core\Url
+ *   - localized_options: Menu link localized options.
+ *   - is_expanded: TRUE if the link has visible children within the current
+ *     menu tree.
+ *   - is_collapsed: TRUE if the link has children within the current menu tree
+ *     that are not currently visible.
+ *   - in_active_trail: TRUE if the link is in the active trail.
+ *
+ * @ingroup themeable
+ */
+#}
+{% import _self as menus %}
+
+{#
+  We call a macro which calls itself to render the full tree.
+  @see https://twig.symfony.com/doc/1.x/tags/macro.html
+#}
+{% set attributes = attributes.addClass('menu') %}
+{{ menus.menu_links(items, attributes, 0) }}
+
+{% macro menu_links(items, attributes, menu_level) %}
+  {% set primary_nav_level = 'menu--level-' ~ (menu_level + 1) %}
+  {% import _self as menus %}
+  {% if items %}
+    <ul {{ attributes.addClass('menu', primary_nav_level) }}>
+      {% set attributes = attributes.removeClass(primary_nav_level) %}
+      {% for item in items %}
+
+        {% if item.url.isRouted and item.url.routeName == '<nolink>' %}
+          {% set menu_item_type = 'nolink' %}
+        {% elseif item.url.isRouted and item.url.routeName == '<button>' %}
+          {% set menu_item_type = 'button' %}
+        {% else %}
+          {% set menu_item_type = 'link' %}
+        {% endif %}
+
+        {% set item_classes = [
+            'menu__item',
+            'menu__item--' ~ menu_item_type,
+            'menu__item--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'menu__item--active-trail',
+            item.below ? 'menu__item--has-children',
+          ]
+        %}
+
+        {% set link_classes = [
+            'menu__link',
+            'menu__link--' ~ menu_item_type,
+            'menu__link--level-' ~ (menu_level + 1),
+            item.in_active_trail ? 'menu__link--active-trail',
+            item.below ? 'menu__link--has-children',
+          ]
+        %}
+
+        <li{{ item.attributes.addClass(item_classes) }}>
+          {#
+            A unique HTML ID should be used, but that isn't available through
+            Twig yet, so the |clean_id filter is used for now.
+            @see https://www.drupal.org/project/drupal/issues/3115445
+          #}
+          {% set aria_id = (item.title ~ '-submenu-' ~ loop.index )|clean_id %}
+
+          {{ link(item.title, item.url, { 'class': link_classes }) }}
+
+          {% if item.below %}
+            {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
+          {% endif %}
+
+        </li>
+      {% endfor %}
+    </ul>
+  {% endif %}
+{% endmacro %}
@@ -0,0 +1,119 @@
+{#
+/**
+ * @file
+ * Theme override to display a pager.
+ *
+ * Available variables:
+ * - heading_id: Pagination heading ID.
+ * - items: List of pager items.
+ *   The list is keyed by the following elements:
+ *   - first: Item for the first page; not present on the first page of results.
+ *   - previous: Item for the previous page; not present on the first page
+ *     of results.
+ *   - next: Item for the next page; not present on the last page of results.
+ *   - last: Item for the last page; not present on the last page of results.
+ *   - pages: List of pages, keyed by page number.
+ *   Sub-sub elements:
+ *   items.first, items.previous, items.next, items.last, and each item inside
+ *   items.pages contain the following elements:
+ *   - href: URL with appropriate query parameters for the item.
+ *   - attributes: A keyed list of HTML attributes for the item.
+ *   - text: The visible text used for the item link, such as "‹ Previous"
+ *     or "Next ›".
+ * - current: The page number of the current page.
+ * - ellipses: If there are more pages than the quantity allows, then an
+ *   ellipsis before or after the listed pages may be present.
+ *   - previous: Present if the currently visible list of pages does not start
+ *     at the first page.
+ *   - next: Present if the visible list of pages ends before the last page.
+ *
+ * @see template_preprocess_pager()
+ */
+#}
+{% if items %}
+  <nav class="pager layout--content-medium" role="navigation" aria-labelledby="{{ heading_id }}">
+    <h4 id="{{ heading_id }}" class="visually-hidden">{{ 'Pagination'|t }}</h4>
+    <ul class="pager__items js-pager__items">
+      {# Print first item if we are not on the first page. #}
+      {% if items.first %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--first">
+            <a href="{{ items.first.href }}" class="pager__link" title="{{ 'Go to first page'|t }}"{{ items.first.attributes|without('href', 'title', 'class') }}>
+              <span class="visually-hidden">{{ 'First page'|t }}</span>
+              {% include "@rorschach/../images/pager-first.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Print previous item if we are not on the first page. #}
+      {% if items.previous %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--previous">
+            <a href="{{ items.previous.href }}" class="pager__link" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel', 'class') }}>
+              <span class="visually-hidden">{{ 'Previous page'|t }}</span>
+              {% include "@rorschach/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Add an ellipsis if there are further previous pages. #}
+      {% if ellipses.previous %}
+        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+
+      {# Now generate the actual pager piece. #}
+      {% for key, item in items.pages %}
+        {% apply spaceless %}
+          <li class="pager__item{{ current == key ? ' pager__item--active' : '' }} pager__item--number">
+            {% if current == key %}
+              {% set title = 'Current page'|t %}
+            {% else %}
+              {% set title = 'Go to page @key'|t({'@key': key}) %}
+            {% endif %}
+            {% if current != key %}
+              <a href="{{ item.href }}" class="pager__link{{ current == key ? ' is-active' }}" title="{{ title }}"{{ item.attributes|without('href', 'title', 'class') }}>
+            {% endif %}
+            <span class="visually-hidden">
+              {{ current == key ? 'Current page'|t : 'Page'|t }}
+            </span>
+            {{ key }}
+            {% if current != key %}
+              </a>
+            {% endif %}
+          </li>
+        {% endapply %}
+      {% endfor %}
+
+      {# Add an ellipsis if there are further next pages. #}
+      {% if ellipses.next %}
+        <li class="pager__item pager__item--ellipsis" role="presentation">&hellip;</li>
+      {% endif %}
+
+      {# Print next item if we are not on the last page. #}
+      {% if items.next %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--next">
+            <a href="{{ items.next.href }}" class="pager__link" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel', 'class') }}>
+              <span class="visually-hidden">{{ 'Next page'|t }}</span>
+              {% include "@rorschach/../images/pager-previous.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+
+      {# Print last item if we are not on the last page. #}
+      {% if items.last %}
+        {% apply spaceless %}
+          <li class="pager__item pager__item--control pager__item--last">
+            <a href="{{ items.last.href }}" class="pager__link" title="{{ 'Go to last page'|t }}"{{ items.last.attributes|without('href', 'title', 'class') }}>
+              <span class="visually-hidden">{{ 'Last page'|t }}</span>
+              {% include "@rorschach/../images/pager-first.svg" %}
+            </a>
+          </li>
+        {% endapply %}
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %}