@ons/design-system 62.2.4 → 64.0.0

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/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -63,7 +63,7 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim-remaining', node => node.textContent);
+          const limitText = await page.$eval('#feedback-lim', node => node.textContent);
           expect(limitText).toBe('You have 200 characters remaining');
         });
 

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 %}

package/components/pagination/_macro.spec.js

@@ -12,7 +12,8 @@ const PAGINATION_PREV_NEXT_LABELS = {
 
 const EXAMPLE_PAGINATION_MINIMAL = {
   ...PAGINATION_PREV_NEXT_LABELS,
-  pages: [{ url: '/page/1', current: true }],
+  currentPageNumber: 1,
+  pages: [{ url: '/page/1' }],
 };
 
 describe('macro: pagination', () => {
@@ -54,7 +55,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }],
       }),
     );
 
@@ -85,7 +87,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }, { url: '/page/2' }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -118,7 +121,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -151,7 +155,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
       }),
     );
 
@@ -186,7 +191,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
       }),
     );
 
@@ -223,14 +229,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [
-          { url: '/page/1' },
-          { url: '/page/2', current: true },
-          { url: '/page/3' },
-          { url: '/page/4' },
-          { url: '/page/5' },
-          { url: '/page/6' },
-        ],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }, { url: '/page/6' }],
       }),
     );
 
@@ -267,12 +267,13 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 5,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
           { url: '/page/3' },
           { url: '/page/4' },
-          { url: '/page/5', current: true },
+          { url: '/page/5' },
           { url: '/page/6' },
           { url: '/page/7' },
           { url: '/page/8' },
@@ -318,6 +319,7 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 10,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
@@ -328,7 +330,7 @@ describe('macro: pagination', () => {
           { url: '/page/7' },
           { url: '/page/8' },
           { url: '/page/9' },
-          { url: '/page/10', current: true },
+          { url: '/page/10' },
           { url: '/page/11' },
         ],
       }),

package/components/pagination/example-pagination-first.njk

@@ -5,19 +5,19 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 1,
         "pages": [
             {
-                "url": "#page1",
-                "current": true
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination-last.njk

@@ -5,19 +5,19 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 4,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4",
-                "current": true
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination-with-no-range-indicator.njk

@@ -5,37 +5,37 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 5,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             },
             {
-                "url": "#page5",
-                "current": true
+                "url": "#0"
             },
             {
-                "url": "#page6"
+                "url": "#0"
             },
             {
-                "url": "#page7"
+                "url": "#0"
             },
             {
-                "url": "#page8"
+                "url": "#0"
             },
             {
-                "url": "#page9"
+                "url": "#0"
             },
             {
-                "url": "#page10"
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination.njk

@@ -4,6 +4,7 @@
     onsPagination({
         "previous": "Previous",
         "next": "Next",
+        "currentPageNumber": 5,
         "pages": [
             {
                 "url": "#0"
@@ -18,8 +19,7 @@
                 "url": "#0"
             },
             {
-                "url": "#0",
-                "current": true
+                "url": "#0"
             },
             {
                 "url": "#0"

package/components/panel/_macro.njk

@@ -39,7 +39,7 @@
             {% endif %}
 
             {% if params.type == "announcement" %}
-                {% from "components/icons/_macro.njk" import onsIcon %}
+                {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{
                         onsIcon({
@@ -70,7 +70,7 @@
             {% endif %}
 
             {% if params.iconType %}
-                {% from "components/icons/_macro.njk" import onsIcon %}
+                {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                     {{
                         onsIcon({

package/components/panel/_macro.spec.js

@@ -313,7 +313,7 @@ describe('macro: panel', () => {
 
     it('has `arrow-forward` icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,
@@ -385,7 +385,7 @@ describe('macro: panel', () => {
 
     it('has a custom icon `iconType`', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,

package/components/panel/example-panel-with-error-summary.njk

@@ -1,5 +1,5 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% call onsPanel({
         "title": 'There are 2 problems with your answer',

package/components/phase-banner/_phase-banner.scss

@@ -1,5 +1,6 @@
 .ons-phase-banner {
-  background: var(--ons-color-grey-5);
+  background: var(--ons-color-white);
+  border-bottom: 1px solid var(--ons-color-borders);
   padding: 0.5rem 0;
 
   &__badge {

package/components/question/_macro.njk

@@ -52,7 +52,7 @@
                         {% if item.listLeadingLine %}
                             <p class="ons-question-guidance__list-leading-line">{{ item.listLeadingLine }}</p>
                         {% endif %}
-                        {% from "components/lists/_macro.njk" import onsList %}
+                        {% from "components/list/_macro.njk" import onsList %}
                         {{
                             onsList({
                                 "itemsList": item.itemsList

package/components/question/_macro.spec.js

@@ -239,7 +239,7 @@ describe('macro: question', () => {
 
     it('outputs the expected list', () => {
       const faker = templateFaker();
-      const listSpy = faker.spy('lists');
+      const listSpy = faker.spy('list');
 
       faker.renderComponent('question', EXAMPLE_QUESTION_GUIDANCE);
 

package/components/quote/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsQuote(params) %}
     <blockquote class="ons-quote">
-        {% from "components/icons/_macro.njk" import onsIcon %}
+        {% from "components/icon/_macro.njk" import onsIcon %}
         {{
             onsIcon({
                 "iconType": 'quote'

package/components/quote/_macro.spec.js

@@ -70,7 +70,7 @@ describe('macro: quote', () => {
 
   it('has `quote` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('quote', {
       text: 'Example quote text.',

package/components/related-content/_macro.njk

@@ -15,7 +15,7 @@
           }
         ) %}            
           <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
-            {% from "components/lists/_macro.njk" import onsList %}
+            {% from "components/list/_macro.njk" import onsList %}
             {{
               onsList({
                 "variants": 'bare',

package/components/related-content/_macro.spec.js

@@ -111,7 +111,7 @@ describe('macro: related-content', () => {
 
     it('renders the expected list items using the list macro', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
 

package/components/related-content/example-related-content-general.njk

@@ -1,6 +1,6 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% call onsRelatedContent({
     "ariaLabel": 'Related content'

package/components/relationships/example-relationships-error.njk

@@ -6,7 +6,7 @@ layout: ~
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/relationships/_macro.njk" import onsRelationships %}
 {% from "components/panel/_macro.njk" import onsPanel %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% set pageConfig = {
     "header": {

package/components/section-navigation/_macro.njk

@@ -6,7 +6,7 @@
           {% if section.title %}
             <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
               <ul class="ons-section-nav__list">
-                {% for item in (section.itemsList if section.itemsList is iterable else section.itemsList.items()) %}
+                {% for item in section.itemsList %}
                   {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                     {% set isCurrent = true %}
                   {% else %}
@@ -33,7 +33,7 @@
           <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
         {% endif %}
             <ul class="ons-section-nav__list">
-              {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+              {% for item in params.itemsList %}
                 {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                   {% set isCurrent = true %}
                 {% else %}

package/components/select/_macro.njk

@@ -22,7 +22,6 @@
             id="{{ params.id }}"
             name="{{ params.name }}"
             class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error %} ons-input--error{% endif %}"
-            {% if params.value %}value="{{ params.value}}" {% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {% for option in params.options %}
@@ -30,7 +29,7 @@
                 {% if option.id %}id="{{ option.id }}" {% endif %}
                 {% if option.selected %}selected {% endif %}
                 {% if option.disabled %}disabled {% endif %}
-                {% if params.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                {% if option.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
             >
                 {{- option.text -}}
             </option>

package/components/share-page/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSharePage(params) %}
-    {% from "components/lists/_macro.njk" import onsList %}
+    {% from "components/list/_macro.njk" import onsList %}
 
     {% if params.title %}
         {% set titleTag = params.titleTag | default("h2") %}