@ons/design-system 62.2.4 → 63.0.0

package/components/{lists → list}/_macro.spec.js

@@ -22,11 +22,11 @@ const EXAMPLE_ITEM_NAVIGATION_TITLE = {
   navigationTitle: 'Nav friendly title',
 };
 
-describe('macro: lists', () => {
+describe('macro: list', () => {
   describe('list element', () => {
     it('has `id` attribute when provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           id: 'example-id',
         }),
@@ -37,7 +37,7 @@ describe('macro: lists', () => {
 
     it('has additionally provided style classes', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           classes: 'extra-class another-extra-class',
         }),
@@ -49,7 +49,7 @@ describe('macro: lists', () => {
 
     it('has provided variant style class when one variant is provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           variants: 'dashed',
         }),
@@ -60,7 +60,7 @@ describe('macro: lists', () => {
 
     it('has provided variant style classes when multiple variants are provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           variants: ['dashed', 'inline'],
         }),
@@ -72,7 +72,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a prefix modifier class when the first list item has a prefix', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: 'Item text', prefix: 'Abc' }],
         }),
       );
@@ -83,7 +83,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a suffix modifier class when the first list item has a suffix', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: 'Item text', suffix: 'Abc' }],
         }),
       );
@@ -94,7 +94,7 @@ describe('macro: lists', () => {
 
     it('assumes the "bare" variant with a icons modifier class when the first list item has an icon', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           iconPosition: 'before',
           iconType: 'check',
@@ -106,14 +106,14 @@ describe('macro: lists', () => {
     });
 
     it('renders a <ul> element by default', () => {
-      const $ = cheerio.load(renderComponent('lists', EXAMPLE_LIST_TEXT_ITEMS));
+      const $ = cheerio.load(renderComponent('list', EXAMPLE_LIST_TEXT_ITEMS));
 
       expect($('.ons-list')[0].tagName).toBe('ul');
     });
 
     it('renders a custom element when a custom `element` is provided', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'div',
         }),
@@ -124,7 +124,7 @@ describe('macro: lists', () => {
 
     it('renders a <ol> element when specified', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'ol',
         }),
@@ -135,7 +135,7 @@ describe('macro: lists', () => {
 
     it('has the expected quantity of <li> elements when a <ol> element is specified', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           element: 'ol',
         }),
@@ -146,7 +146,7 @@ describe('macro: lists', () => {
 
     describe('when <ol> is specified but there is only one list item', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [{ text: 'Only item' }],
         }),
@@ -167,7 +167,7 @@ describe('macro: lists', () => {
 
     it('has additionally provided `attributes`', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           ...EXAMPLE_LIST_TEXT_ITEMS,
           attributes: {
             a: 123,
@@ -189,7 +189,7 @@ describe('macro: lists', () => {
     describe('content without link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -200,7 +200,7 @@ describe('macro: lists', () => {
 
       it('renders the expected list item text', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -210,7 +210,7 @@ describe('macro: lists', () => {
 
       it('does not render a hyperlink element', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [item],
           }),
         );
@@ -222,7 +222,7 @@ describe('macro: lists', () => {
     describe('content with an internal link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -238,7 +238,7 @@ describe('macro: lists', () => {
 
       it('renders a hyperlink element', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -254,7 +254,7 @@ describe('macro: lists', () => {
 
       it('does not render a hyperlink element for current item', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -270,7 +270,7 @@ describe('macro: lists', () => {
 
       it('supports the `inPageLink` variant', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -286,7 +286,7 @@ describe('macro: lists', () => {
 
       it('has additionally provided style classes', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -303,7 +303,7 @@ describe('macro: lists', () => {
 
       it('has the provided `target` attribute', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -319,7 +319,7 @@ describe('macro: lists', () => {
 
       it('renders visually hidden screen reader message when target is "_blank"', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -336,7 +336,7 @@ describe('macro: lists', () => {
 
       it('renders a default visually hidden screen reader message when target is "_blank"', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -352,7 +352,7 @@ describe('macro: lists', () => {
 
       it('has additionally provided `attributes`', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -372,7 +372,7 @@ describe('macro: lists', () => {
 
       it('renders visually hidden prefix', () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -390,7 +390,7 @@ describe('macro: lists', () => {
     describe('content with an external link', () => {
       it('passes jest-axe checks', async () => {
         const $ = cheerio.load(
-          renderComponent('lists', {
+          renderComponent('list', {
             itemsList: [
               {
                 ...item,
@@ -409,7 +409,7 @@ describe('macro: lists', () => {
         const faker = templateFaker();
         const externalLinkSpy = faker.spy('external-link');
 
-        faker.renderComponent('lists', {
+        faker.renderComponent('list', {
           itemsList: [
             {
               ...item,
@@ -429,7 +429,7 @@ describe('macro: lists', () => {
         const faker = templateFaker();
         const externalLinkSpy = faker.spy('external-link');
 
-        faker.renderComponent('lists', {
+        faker.renderComponent('list', {
           itemsList: [
             {
               ...item,
@@ -448,7 +448,7 @@ describe('macro: lists', () => {
   describe('prefix', () => {
     it('renders item `prefix` content', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               prefix: '[PREFIX]',
@@ -467,7 +467,7 @@ describe('macro: lists', () => {
 
     it('marks `prefix` content as visually hidden when list element is not <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               prefix: '[PREFIX]',
@@ -482,7 +482,7 @@ describe('macro: lists', () => {
 
     it('does not mark `prefix` content as visually hidden when list element is <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [
             {
@@ -504,7 +504,7 @@ describe('macro: lists', () => {
   describe('suffix', () => {
     it('renders item `suffix` content', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               suffix: '[SUFFIX]',
@@ -523,7 +523,7 @@ describe('macro: lists', () => {
 
     it('marks `suffix` content as visually hidden when list element is not <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [
             {
               suffix: '[SUFFIX]',
@@ -538,7 +538,7 @@ describe('macro: lists', () => {
 
     it('does not mark `suffix` content as visually hidden when list element is <ol>', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           element: 'ol',
           itemsList: [
             {
@@ -560,9 +560,9 @@ describe('macro: lists', () => {
   describe('icons', () => {
     it.each([['before'], ['after']])('renders default icon on list items when icon is positioned %s', iconPosition => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
-      faker.renderComponent('lists', {
+      faker.renderComponent('list', {
         ...EXAMPLE_LIST_TEXT_ITEMS,
         iconPosition,
         iconType: 'check',
@@ -575,9 +575,9 @@ describe('macro: lists', () => {
 
     it.each([['before'], ['after']])('renders a custom icon on specific list items when icon is positioned %s', iconPosition => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
-      faker.renderComponent('lists', {
+      faker.renderComponent('list', {
         itemsList: [{ text: 'First item' }, { text: 'Second item', iconType: 'print' }, { text: 'Third item' }],
         iconPosition,
         iconType: 'check',
@@ -591,7 +591,7 @@ describe('macro: lists', () => {
 
     it('renders the icon before the item text', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
           iconPosition: 'before',
           iconType: 'check',
@@ -604,7 +604,7 @@ describe('macro: lists', () => {
 
     it('renders the icon after the item text', () => {
       const $ = cheerio.load(
-        renderComponent('lists', {
+        renderComponent('list', {
           itemsList: [{ text: '<span id="first">First item</span>' }, { text: '<span id="second">Second item</span>' }],
           iconPosition: 'after',
           iconType: 'check',

package/components/message/_macro.njk

@@ -1,7 +1,7 @@
 {%- macro onsMessage(params) -%}
   <div class="ons-message ons-message--{{ params.type }}">
     <div class="ons-message__head">
-      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %}>
+      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <div class="ons-message__sender">
           <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
           <dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
@@ -15,7 +15,7 @@
           <a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
       {% endif %}
     </div>
-    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName %} name="{{ params.messageName }}"{% endif %}>
+    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %}>
       {{ caller() }}
     </div>
   </div>

package/components/message/_macro.spec.js

@@ -18,7 +18,6 @@ const EXAMPLE_MESSAGE = {
   unreadLink: 'https://example.com/message/1',
   unreadLinkText: 'Unread message',
   id: 'message1',
-  name: 'example-message-1',
   fromId: 'from1',
   sentId: 'sent1',
   unreadLinkId: 'unreadLink1',

package/components/metadata/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsMetadata(params) %}
   <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes }}"{% if params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
-    {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+    {% for item in params.itemsList %}
       {% if item.term | length %}
           <dt class="ons-metadata__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
       {% endif %}

package/components/navigation/_macro.njk

@@ -40,7 +40,7 @@
             {% endif %}
             <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                 <ul class="ons-navigation__list">
-                    {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
+                    {% for item in params.navigation.itemsList %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
@@ -53,7 +53,7 @@
         <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
             <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
-                    {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
+                    {% for item in params.navigation.subNavigation.itemsList %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
                             <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
@@ -79,7 +79,7 @@
                         <li class="ons-navigation__item">
                             <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a>
                         </li>
-                        {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
+                        {% for item in params.navigation.subNavigation.itemsList %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
                                 <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}

package/components/pagination/_macro.njk

@@ -1,72 +1,68 @@
 {% macro onsPagination(params) %}
-  {% set currentPageIndex = "" %}
-  {% for page in params.pages %}
-      {% if page.current %}
-          {% set currentPageIndex = loop.index %}
-      {% endif %}
-  {% endfor %}
+    {% set currentPageIndex = params.currentPageNumber|int %}
+    {% set totalPages = params.pages | length|int %}
+    {% set position = "Page " ~ currentPageIndex ~ " of " ~ totalPages %}
+    {% set lastPage = params.pages | last %}
+    {% set firstPage = params.pages | first %}
+    {% set prevPageIndex = currentPageIndex - 1 %}
+    {% set nextPageIndex = currentPageIndex + 1 %}
 
-  {% set totalPages = params.pages | length %}
-  {% set position = "Page " + currentPageIndex + " of " + totalPages %}
-  {% set lastPage = params.pages | last %}
-  {% set firstPage = params.pages | first %}
-
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
-      <div class="ons-pagination__position">{{ position }}</div>
-      <ul class="ons-pagination__items">
-          {% if currentPageIndex != 1 %}
-              {% set prevPageIndex = currentPageIndex - 2 %}
-              <li class="ons-pagination__item ons-pagination__item--previous">
-                  <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
-              </li>
-          {% endif %}
-          {% if currentPageIndex > 2 %}
-            <li class="ons-pagination__item{% if firstPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
-            </li>
-          {% endif %}
-          {% if currentPageIndex > 4 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% for page in params.pages %}
-              {% set showPage = false %}
-              {# Show the current, next and previous page
-              Show page 2 if the current page index is within the first 4 pages
-              Show the penultimate page if the current page index is within the last 4 pages  #}
-              {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
-                {% set showPage = true %}                    
-              {% endif %}
-              {% if showPage == true %}
-                  <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
-                      <a href="{{ page.url }}" class="ons-pagination__link"
-                          {%- if page.current -%}
-                              aria-current="true" aria-label="Current page ({{ position }})"
-                          {%- else -%}
-                              aria-label="Go to page {{ loop.index }}"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex - 1 -%}
-                              rel="prev"
-                          {%- endif -%}
-                          {%- if loop.index == currentPageIndex + 1 -%}
-                              rel="next"
-                          {%- endif -%}
-                      >{{ loop.index }}</a>
-                  </li>
-              {% endif %}
-          {% endfor %}
-          {% if currentPageIndex < totalPages - 3 %}
-              <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
-          {% endif %}
-          {% if currentPageIndex < totalPages - 1 %}
-            <li class="ons-pagination__item{% if lastPage.current == true %} ons-pagination__item--current{% endif %}">
-                <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
-            </li>
-          {% endif %}
-          {% if totalPages > 1 and totalPages != currentPageIndex %}
-              <li class="ons-pagination__item ons-pagination__item--next">
-                  <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
-              </li>
-          {% endif %}
-      </ul>
-  </nav>
+    <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+        <div class="ons-pagination__position">{{ position }}</div>
+        <ul class="ons-pagination__items">
+            {% if currentPageIndex != 1 %}
+                {% set prevPageIndex = currentPageIndex - 2 %}
+                <li class="ons-pagination__item ons-pagination__item--previous">
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex > 2 %}
+                <li class="ons-pagination__item{% if (currentPageIndex == 1) %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+                </li>
+            {% endif %}
+            {% if currentPageIndex > 4 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% for page in params.pages %}
+                {% set showPage = false %}
+                {# Show the current, next and previous page
+                Show page 2 if the current page index is within the first 4 pages
+                Show the penultimate page if the current page index is within the last 4 pages  #}
+                {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
+                    {% set showPage = true %}
+                {% endif %}
+                {% if showPage == true %}
+                    <li class="ons-pagination__item{% if loop.index == currentPageIndex %} ons-pagination__item--current{% endif %}">
+                        <a href="{{ page.url }}" class="ons-pagination__link"
+                            {%- if loop.index == currentPageIndex -%}
+                                aria-current="true" aria-label="Current page ({{ position }})"
+                            {%- else -%}
+                                aria-label="Go to page {{ loop.index }}"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex - 1 -%}
+                                rel="prev"
+                            {%- endif -%}
+                            {%- if loop.index == currentPageIndex + 1 -%}
+                                rel="next"
+                            {%- endif -%}
+                        >{{ loop.index }}</a>
+                    </li>
+                {% endif %}
+            {% endfor %}
+            {% if currentPageIndex < totalPages - 3 %}
+                <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
+            {% endif %}
+            {% if currentPageIndex < totalPages - 1 %}
+                <li class="ons-pagination__item{% if currentPageIndex == totalPages %} ons-pagination__item--current{% endif %}">
+                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+                </li>
+            {% endif %}
+            {% if totalPages > 1 and totalPages != currentPageIndex %}
+                <li class="ons-pagination__item ons-pagination__item--next">
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
 {% endmacro %}