@ilo-org/twig 1.9.0 → 1.11.0

package/dist/components/linklist/linklist.component.yml

@@ -52,4 +52,15 @@ linklist:
         light: Light
         dark: Dark
       preview: "light"
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h3"
   visibility: storybook

package/dist/components/linklist/linklist.twig

@@ -1,9 +1,11 @@
 {#
   LINK LIST COMPONENT
 #}
+{% set titleLevel = titleLevel|default('h3') %}
+
 <div class="ilo--link-list ilo--link-list--{{theme}}" data-loadcomponent="LinkList" data-prefix="ilo">
   {% if headline %}
-    <h3 class="ilo--link-list--headline">{{headline}}</h3>
+    <{{titleLevel}} class="ilo--link-list--headline">{{headline}}</{{titleLevel}}>
   {% endif %}
   <ul class="ilo--link-list--linkgroups">
     {% for group in linkgroup %}

package/dist/components/linklist/linklist.wingsuit.yml

@@ -52,4 +52,15 @@ linklist:
         light: Light
         dark: Dark
       preview: "light"
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5
+      preview: "h3"
   visibility: storybook

package/dist/components/list/list.component.yml

@@ -64,4 +64,15 @@ list:
       options:
         light: light
         dark: dark
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+          h2: h2
+          h3: h3
+          h4: h4
+          h5: h5
+      preview: "h2"
   visibility: storybook

package/dist/components/list/list.twig

@@ -8,10 +8,11 @@
 	{% set theme = "light" %}
 {% endif %}
 
+{% set titleLevel = titleLevel|default('h2') %}
 
 <div class="ilo--list {% if ordered == 'unstyled' %} ilo--list__unstyled {% endif %} {% if alignment == 'horizontal' %} ilo--list__horizontal {% endif %} ilo--list__theme__{{theme}}">
 	{% if title %}
-		<h2 class="ilo--list--title">{{ title }}</h2>
+		<{{ titleLevel }} class="ilo--list--title">{{ title }}</{{ titleLevel }}>
 	{% endif %}
 	{% if ordered == "ordered" %}
 		<ol>

package/dist/components/list/list.wingsuit.yml

@@ -64,4 +64,15 @@ list:
       options:
         light: light
         dark: dark
+    titleLevel:
+      type: select
+      label: Headline Title Level
+      description: Select the title level for the headline.
+      required: false
+      options:
+          h2: h2
+          h3: h3
+          h4: h4
+          h5: h5
+      preview: "h2"
   visibility: storybook

package/dist/components/loading/loading.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class Loading{constructor(element){this.element=element;this.prefix=`${this.element.dataset.prefix}--loading`;this.status="idle";this.init();}init(){this.setupHandlers().enable();return this}setupHandlers(){this.LoadingHandler=this.loading.bind(this);this.LoadedHandler=this.loaded.bind(this);return this}enable(){document.addEventListener(d.ITEMSLOADING,()=>this.LoadingHandler);document.addEventListener(d.ITEMSLOADED,()=>this.LoadedHandler);return this}loading(){this.element.classList.remove(`${this.prefix}--idle`);this.element.classList.add(`${this.prefix}--loading`);return this}loaded(){this.element.classList.remove(`${this.prefix}--loading`);this.element.classList.add(`${this.prefix}--loaded`);this.element.querySelector(`.${this.prefix}--copy`).innerHTML=this.element.dataset.loadedmessage;return this}}
+  class Loading{constructor(element){this.element=element;this.prefix=`${this.element.dataset.prefix}--loading`;this.status="idle";this.init();}init(){this.setupHandlers().enable();return this}setupHandlers(){this.LoadingHandler=this.loading.bind(this);this.LoadedHandler=this.loaded.bind(this);return this}enable(){document.addEventListener("itemsloading",()=>this.LoadingHandler);document.addEventListener("itemsloaded",()=>this.LoadedHandler);return this}loading(){this.element.classList.remove(`${this.prefix}--idle`);this.element.classList.add(`${this.prefix}--loading`);return this}loaded(){this.element.classList.remove(`${this.prefix}--loading`);this.element.classList.add(`${this.prefix}--loaded`);this.element.querySelector(`.${this.prefix}--copy`).innerHTML=this.element.dataset.loadedmessage;return this}}
 
   Drupal.behaviors.loading={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Loading"]`),element=>{if(!element.dataset.jsProcessed){new Loading(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/localnav/localnav.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class Navigation{constructor(element,callback=null){this.element=element;this.prefix=this.element.dataset.prefix;this.callback=callback;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.subNav=this.element.querySelector(`.${this.prefix}--subnav`);this.subnavButton=this.element.querySelector(`.${this.prefix}--nav--trigger`);this.menuCloseSet=this.element.querySelectorAll(`.${this.prefix}--header--menu--close`);this.subnavBack=this.element.querySelectorAll(`.${this.prefix}--mobile--subnav--back`);this.menuOpen=this.element.querySelector(`.${this.prefix}--header--menu`);this.searchButton=this.element.querySelector(`.${this.prefix}--search--button`);this.searchBox=this.element.querySelector(`.${this.prefix}--search-box`);this.searchInput=this.searchBox?this.searchBox.querySelector("input"):null;this.contextButton=this.element.querySelector(`.${this.prefix}--language-switcher--button`);this.languageButton=this.element.querySelector(`.${this.prefix}--mobile--nav--language--switcher--button`);this.contextLinks=this.element.querySelectorAll(`.${this.prefix}--context-menu--link`);this.languageLinks=this.element.querySelectorAll(`.${this.prefix}--nav--language`);this.body=document.body;return this}setupHandlers(){this.subnavClick=this.handleSubnavClick.bind(this);this.subnavClickOff=this.handleSubnavClickOff.bind(this);this.subnavClickOn=this.handleSubnavClickOn.bind(this);this.subnavBackClick=this.handleSubnavBackClick.bind(this);this.menuCloseClick=this.handleMenuCloseClick.bind(this);this.menuOpenClick=this.handleMenuOpenClick.bind(this);this.languageButtonClick=this.handleLanguageButtonClick.bind(this);this.contextLinkClick=this.handleContextLinkClick.bind(this);this.onResize=this.handleResize.bind(this);this.keyPress=this.handleKeyPress.bind(this);this.contextButtonClick=this.handleContextButtonClick.bind(this);this.contextButtonClickOff=this.handleContextButtonClickOff.bind(this);this.contextButtonClickOn=this.handleContextButtonClickOn.bind(this);this.searchButtonClick=this.handleSearchButtonClick.bind(this);this.searchButtonClickOff=this.handleSearchButtonClickOff.bind(this);this.searchButtonClickOn=this.handleSearchButtonClickOn.bind(this);return this}enable(){if(this.subnavButton){this.subnavButton.addEventListener(d.CLICK,e=>this.subnavClick(e));this.subnavButton.addEventListener(d.TOUCH_START,e=>this.subnavClick(e));}if(this.subnavBack.length>0){this.subnavBack.forEach(button=>{button.addEventListener(d.CLICK,e=>this.subnavBackClick(e));button.addEventListener(d.TOUCH_START,e=>this.subnavBackClick(e));});}if(this.searchButton){this.searchButton.addEventListener(d.CLICK,e=>this.searchButtonClick(e));this.searchButton.addEventListener(d.TOUCH_START,e=>this.searchButtonClick(e));}if(this.menuCloseSet.length>0){this.menuCloseSet.forEach((closeButton,i)=>{closeButton.addEventListener(d.CLICK,e=>this.menuCloseClick(i,e));closeButton.addEventListener(d.TOUCH_START,e=>this.menuCloseClick(i,e));});}if(this.menuOpen){this.menuOpen.addEventListener(d.CLICK,e=>this.menuOpenClick(e));this.menuOpen.addEventListener(d.TOUCH_START,e=>this.menuOpenClick(e));}if(this.contextButton){this.contextButton.addEventListener(d.CLICK,e=>this.contextButtonClick(e));this.contextButton.addEventListener(d.TOUCH_START,e=>this.contextButtonClick(e));}if(this.languageButton){this.languageButton.addEventListener(d.CLICK,e=>this.languageButtonClick(e));this.languageButton.addEventListener(d.TOUCH_START,e=>this.languageButtonClick(e));}if(this.contextLinks.length>0&&this.callback){this.contextLinks.forEach(contextLink=>{contextLink.addEventListener(d.CLICK,e=>this.contextLinkClick(e));contextLink.addEventListener(d.TOUCH_START,e=>this.contextLinkClick(e));});}if(this.languageLinks.length>0&&this.callback){this.languageLinks.forEach(languageLink=>{languageLink.addEventListener(d.CLICK,e=>this.contextLinkClick(e));languageLink.addEventListener(d.TOUCH_START,e=>this.contextLinkClick(e));});}if(this.searchBox){this.searchBox.addEventListener(d.CLICK,ev=>{ev.stopPropagation();},false);}if(this.subNav){this.subNav.addEventListener(d.CLICK,ev=>{ev.stopPropagation();},false);}window.addEventListener(d.RESIZE,e=>{if(window.innerWidth>=1024){this.onResize(e);}});return this}handleContextLinkClick(event){event.preventDefault();this.callback(event);return this}handleKeyPress(e,callback){if(e.key==="Escape"){callback(e);}return this}handleLanguageButtonClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.toggle(`${this.prefix}--select--open`);return this}handleContextButtonClickOn(e){e.stopImmediatePropagation();this.element.classList.add(`${this.prefix}--context--open`);window.addEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.contextButtonClickOff),false);window.addEventListener(d.CLICK,this.contextButtonClickOff);return this}handleContextButtonClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--context--open`);window.removeEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.contextButtonClickOff),false);window.removeEventListener(d.CLICK,this.contextButtonClickOff);return this}handleContextButtonClick(e){if(this.element.classList.contains(`${this.prefix}--context--open`)){this.contextButtonClickOff(e);}else {this.contextButtonClickOn(e);}return this}handleSearchButtonClickOn(e){e.stopImmediatePropagation();this.searchBox.style.display="block";window.setTimeout(()=>{this.element.classList.add(`${this.prefix}--search--open`);},10);setTimeout(()=>{this.searchInput.focus();},50);window.addEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.searchButtonClickOff),false);if(window.innerWidth>=1024){window.addEventListener(d.CLICK,this.searchButtonClickOff,false);}return this}handleSearchButtonClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--search--open`);window.setTimeout(()=>{this.searchBox.style.display="none";},225);window.removeEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.searchButtonClickOff),false);window.removeEventListener(d.CLICK,this.searchButtonClickOff,false);return this}handleSearchButtonClick(e){this.element.classList.remove(`${this.prefix}--subnav--open`);if(this.element.classList.contains(`${this.prefix}--search--open`)){this.searchButtonClickOff(e);}else {this.searchButtonClickOn(e);}return this}handleMenuOpenClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.add(`${this.prefix}--mobile--open`);this.body.classList.add(`${this.prefix}--menu--open`);return this}handleSubnavClickOn(e){e.stopImmediatePropagation();this.subNav.style.display="block";window.setTimeout(()=>{this.element.classList.add(`${this.prefix}--subnav--open`);},10);window.addEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.subnavClickOff),false);if(window.innerWidth>=1024){window.addEventListener(d.CLICK,this.subnavClickOff);}return this}handleSubnavClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--subnav--open`);window.setTimeout(()=>{this.subNav.style.display="none";},150);window.removeEventListener(d.KEY_DOWN,ev=>this.keyPress(ev,this.subnavClickOff),false);window.removeEventListener(d.CLICK,this.subnavClickOff);return this}handleSubnavClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--search--open`);if(this.element.classList.contains(`${this.prefix}--subnav--open`)){this.subnavClickOff(e);}else {this.subnavClickOn(e);}return this}handleSubnavBackClick(e){e.stopImmediatePropagation();e.preventDefault();this.subnavClickOff(e);this.element.classList.remove(`${this.prefix}--select--open`);return this}handleMenuCloseClick(i,e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--mobile--open`);this.element.classList.remove(`${this.prefix}--subnav--open`);this.body.classList.remove(`${this.prefix}--menu--open`);return this}handleResize(){this.element.classList.remove(`${this.prefix}--context--open`);this.element.classList.remove(`${this.prefix}--mobile--open`);this.element.classList.remove(`${this.prefix}--subnav--open`);this.element.classList.remove(`${this.prefix}--search--open`);return this}}
+  class Navigation{constructor(element,callback=null){this.element=element;this.prefix=this.element.dataset.prefix;this.callback=callback;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.subNav=this.element.querySelector(`.${this.prefix}--subnav`);this.subnavButton=this.element.querySelector(`.${this.prefix}--nav--trigger`);this.menuCloseSet=this.element.querySelectorAll(`.${this.prefix}--header--menu--close`);this.subnavBack=this.element.querySelectorAll(`.${this.prefix}--mobile--subnav--back`);this.menuOpen=this.element.querySelector(`.${this.prefix}--header--menu`);this.searchButton=this.element.querySelector(`.${this.prefix}--search--button`);this.searchBox=this.element.querySelector(`.${this.prefix}--search-box`);this.searchInput=this.searchBox?this.searchBox.querySelector("input"):null;this.contextButton=this.element.querySelector(`.${this.prefix}--language-switcher--button`);this.languageButton=this.element.querySelector(`.${this.prefix}--mobile--nav--language--switcher--button`);this.contextLinks=this.element.querySelectorAll(`.${this.prefix}--context-menu--link`);this.languageLinks=this.element.querySelectorAll(`.${this.prefix}--nav--language`);this.body=document.body;return this}setupHandlers(){this.subnavClick=this.handleSubnavClick.bind(this);this.subnavClickOff=this.handleSubnavClickOff.bind(this);this.subnavClickOn=this.handleSubnavClickOn.bind(this);this.subnavBackClick=this.handleSubnavBackClick.bind(this);this.menuCloseClick=this.handleMenuCloseClick.bind(this);this.menuOpenClick=this.handleMenuOpenClick.bind(this);this.languageButtonClick=this.handleLanguageButtonClick.bind(this);this.contextLinkClick=this.handleContextLinkClick.bind(this);this.onResize=this.handleResize.bind(this);this.keyPress=this.handleKeyPress.bind(this);this.contextButtonClick=this.handleContextButtonClick.bind(this);this.contextButtonClickOff=this.handleContextButtonClickOff.bind(this);this.contextButtonClickOn=this.handleContextButtonClickOn.bind(this);this.searchButtonClick=this.handleSearchButtonClick.bind(this);this.searchButtonClickOff=this.handleSearchButtonClickOff.bind(this);this.searchButtonClickOn=this.handleSearchButtonClickOn.bind(this);return this}enable(){if(this.subnavButton){this.subnavButton.addEventListener("click",e=>this.subnavClick(e));this.subnavButton.addEventListener("touchstart",e=>this.subnavClick(e));}if(this.subnavBack.length>0){this.subnavBack.forEach(button=>{button.addEventListener("click",e=>this.subnavBackClick(e));button.addEventListener("touchstart",e=>this.subnavBackClick(e));});}if(this.searchButton){this.searchButton.addEventListener("click",e=>this.searchButtonClick(e));this.searchButton.addEventListener("touchstart",e=>this.searchButtonClick(e));}if(this.menuCloseSet.length>0){this.menuCloseSet.forEach((closeButton,i)=>{closeButton.addEventListener("click",e=>this.menuCloseClick(i,e));closeButton.addEventListener("touchstart",e=>this.menuCloseClick(i,e));});}if(this.menuOpen){this.menuOpen.addEventListener("click",e=>this.menuOpenClick(e));this.menuOpen.addEventListener("touchstart",e=>this.menuOpenClick(e));}if(this.contextButton){this.contextButton.addEventListener("click",e=>this.contextButtonClick(e));this.contextButton.addEventListener("touchstart",e=>this.contextButtonClick(e));}if(this.languageButton){this.languageButton.addEventListener("click",e=>this.languageButtonClick(e));this.languageButton.addEventListener("touchstart",e=>this.languageButtonClick(e));}if(this.contextLinks.length>0&&this.callback){this.contextLinks.forEach(contextLink=>{contextLink.addEventListener("click",e=>this.contextLinkClick(e));contextLink.addEventListener("touchstart",e=>this.contextLinkClick(e));});}if(this.languageLinks.length>0&&this.callback){this.languageLinks.forEach(languageLink=>{languageLink.addEventListener("click",e=>this.contextLinkClick(e));languageLink.addEventListener("touchstart",e=>this.contextLinkClick(e));});}if(this.searchBox){this.searchBox.addEventListener("click",ev=>{ev.stopPropagation();},false);}if(this.subNav){this.subNav.addEventListener("click",ev=>{ev.stopPropagation();},false);}window.addEventListener("resize",e=>{if(window.innerWidth>=1024){this.onResize(e);}});return this}handleContextLinkClick(event){event.preventDefault();this.callback(event);return this}handleKeyPress(e,callback){if(e.key==="Escape"){callback(e);}return this}handleLanguageButtonClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.toggle(`${this.prefix}--select--open`);return this}handleContextButtonClickOn(e){e.stopImmediatePropagation();this.element.classList.add(`${this.prefix}--context--open`);window.addEventListener("keydown",ev=>this.keyPress(ev,this.contextButtonClickOff),false);window.addEventListener("click",this.contextButtonClickOff);return this}handleContextButtonClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--context--open`);window.removeEventListener("keydown",ev=>this.keyPress(ev,this.contextButtonClickOff),false);window.removeEventListener("click",this.contextButtonClickOff);return this}handleContextButtonClick(e){if(this.element.classList.contains(`${this.prefix}--context--open`)){this.contextButtonClickOff(e);}else {this.contextButtonClickOn(e);}return this}handleSearchButtonClickOn(e){e.stopImmediatePropagation();this.searchBox.style.display="block";window.setTimeout(()=>{this.element.classList.add(`${this.prefix}--search--open`);},10);setTimeout(()=>{this.searchInput.focus();},50);window.addEventListener("keydown",ev=>this.keyPress(ev,this.searchButtonClickOff),false);if(window.innerWidth>=1024){window.addEventListener("click",this.searchButtonClickOff,false);}return this}handleSearchButtonClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--search--open`);window.setTimeout(()=>{this.searchBox.style.display="none";},225);window.removeEventListener("keydown",ev=>this.keyPress(ev,this.searchButtonClickOff),false);window.removeEventListener("click",this.searchButtonClickOff,false);return this}handleSearchButtonClick(e){this.element.classList.remove(`${this.prefix}--subnav--open`);if(this.element.classList.contains(`${this.prefix}--search--open`)){this.searchButtonClickOff(e);}else {this.searchButtonClickOn(e);}return this}handleMenuOpenClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.add(`${this.prefix}--mobile--open`);this.body.classList.add(`${this.prefix}--menu--open`);return this}handleSubnavClickOn(e){e.stopImmediatePropagation();this.subNav.style.display="block";window.setTimeout(()=>{this.element.classList.add(`${this.prefix}--subnav--open`);},10);window.addEventListener("keydown",ev=>this.keyPress(ev,this.subnavClickOff),false);if(window.innerWidth>=1024){window.addEventListener("click",this.subnavClickOff);}return this}handleSubnavClickOff(e){e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--subnav--open`);window.setTimeout(()=>{this.subNav.style.display="none";},150);window.removeEventListener("keydown",ev=>this.keyPress(ev,this.subnavClickOff),false);window.removeEventListener("click",this.subnavClickOff);return this}handleSubnavClick(e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--search--open`);if(this.element.classList.contains(`${this.prefix}--subnav--open`)){this.subnavClickOff(e);}else {this.subnavClickOn(e);}return this}handleSubnavBackClick(e){e.stopImmediatePropagation();e.preventDefault();this.subnavClickOff(e);this.element.classList.remove(`${this.prefix}--select--open`);return this}handleMenuCloseClick(i,e){e.preventDefault();e.stopImmediatePropagation();this.element.classList.remove(`${this.prefix}--mobile--open`);this.element.classList.remove(`${this.prefix}--subnav--open`);this.body.classList.remove(`${this.prefix}--menu--open`);return this}handleResize(){this.element.classList.remove(`${this.prefix}--context--open`);this.element.classList.remove(`${this.prefix}--mobile--open`);this.element.classList.remove(`${this.prefix}--subnav--open`);this.element.classList.remove(`${this.prefix}--search--open`);return this}}
 
   Drupal.behaviors.navigation={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Navigation"]`),element=>{if(!element.dataset.jsProcessed){new Navigation(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/modal/modal.behavior.js

@@ -1,9 +1,7 @@
 (function () {
   'use strict';
 
-  const d={ANIMATIONEND:"animationend",BEFOREUNLOAD:"beforeunload",BLUR:"blur",CHANGE:"change",CLEAR_FILTERS:"clearfilters",CLICK:"click",CUSTOM_EVENT:"customevent",DISPLAY_SUBHEADING:"displaysubheading",DROPDOWN_CHANGED:"dropdownchanged",FORM_ERROR:"formerror",FORM_SUCCESS:"formsuccess",FOCUS:"focus",HEADER_HIDING:"header-hiding",INDEX_CHANGED:"indexChanged",INPUT:"input",ITEMSLOADING:"itemsloading",ITEMSLOADED:"itemsloaded",KEY_DOWN:"keydown",MOUSEMOVE:"mousemove",MOUSEOUT:"mouseout",MOUSEOVER:"mouseover",PAGESHOW:"pageshow",PAUSE_VIDEO:"pausevideo",RENDERED:"rendered",REQUEST_MADE:"requestmade",RESIZE:"resize",RESULTS_RETURNED:"resultsreturnd",SCROLL:"scroll",SIMULATED_CLICK:"simulated-click",SHOW_HIDE:"showhide",SUBMIT:"submit",TOUCH_END:"touchend",TOUCH_START:"touchstart",TRANSITIONEND:"transitionend",TWEET_LOADED:"tweetLoaded",UPDATE_POST_COUNT:"updatepostcount",UPDATE_IN_VIEWPORT_MODULES:"updateinviewportmodules",UPDATE_SEARCH_WITH_NEW_ITEMS:"updatesearchwithnewitems",UPDATE_SETTINGS:"updatesettings",WHEEL:"wheel"};
-
-  class Modal{constructor(element){this.element=element;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.OpenButton=this.element.querySelector(`.modal--open`);this.CloseButton=this.element.querySelector(`.modal--close`);return this}setupHandlers(){this.OpenButtonHandler=this.openButtonClick.bind(this);this.CloseHandler=this.closeButtonClick.bind(this);this.KeyPressHandler=this.keyPress.bind(this);return this}enable(){if(!this.OpenButton||!this.CloseButton)return this;this.OpenButton.addEventListener(d.CLICK,()=>this.OpenButtonHandler());this.CloseButton.addEventListener(d.CLICK,()=>this.CloseHandler());return this}openButtonClick(){this.element.classList.add("show");setTimeout(()=>{this.element.classList.add("fadein");},125);window.addEventListener(d.KEY_DOWN,e=>this.KeyPressHandler(e));return this}closeButtonClick(){this.element.classList.remove("fadein");setTimeout(()=>{this.element.classList.remove("show");},125);window.removeEventListener(d.KEY_DOWN,e=>this.KeyPressHandler(e));return this}keyPress(e){if(e.key==="Escape"){this.closeButtonClick();}return this}}
+  class Modal{constructor(element){this.element=element;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();return this}cacheDomReferences(){this.OpenButton=this.element.querySelector(`.modal--open`);this.CloseButton=this.element.querySelector(`.modal--close`);return this}setupHandlers(){this.OpenButtonHandler=this.openButtonClick.bind(this);this.CloseHandler=this.closeButtonClick.bind(this);this.KeyPressHandler=this.keyPress.bind(this);return this}enable(){if(!this.OpenButton||!this.CloseButton)return this;this.OpenButton.addEventListener("click",()=>this.OpenButtonHandler());this.CloseButton.addEventListener("click",()=>this.CloseHandler());return this}openButtonClick(){this.element.classList.add("show");setTimeout(()=>{this.element.classList.add("fadein");},125);window.addEventListener("keydown",e=>this.KeyPressHandler(e));return this}closeButtonClick(){this.element.classList.remove("fadein");setTimeout(()=>{this.element.classList.remove("show");},125);window.removeEventListener("keydown",e=>this.KeyPressHandler(e));return this}keyPress(e){if(e.key==="Escape"){this.closeButtonClick();}return this}}
 
   Drupal.behaviors.modal={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Modal"]`),element=>{if(!element.dataset.jsProcessed){new Modal(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/nav/desktop/navmenu.twig

@@ -2,8 +2,7 @@
 
 {% set prefix = prefix|default('ilo') %}
 {% set base_class = 'ilo' ~ '--nav-menu' %}
-
-<div class="{{ base_class }} {{ className }}">
+<div class="{{ base_class }} {{ className }} {% if light|boolval %}{{ base_class }}--light{% endif %}">
   <ul class="{{ base_class }}__list">
     {% for item in menu %}
       <li class="{{ base_class }}__item {{ item.className }}">
@@ -18,7 +17,7 @@
       class="{{ base_class }}__more"
       aria-expanded="false"
       aria-haspopup="menu"
-      aria-controls="{{ prefix }}--nav-dropdown"
+      aria-controls="{{ prefix }}__nav-extra-menu"
       id="{{ prefix }}--nav-dropdown__button">
       {{ more.label }}
       <span class="{{ base_class }}__more-icon"></span>

package/dist/components/nav/desktop/navsearch.twig

@@ -0,0 +1,24 @@
+{# navsearch.twig #}
+{% set prefix = prefix|default("ilo") %}
+{% set base_class = 'ilo' ~ "--nav-dropdown" %}
+
+<template id="{{ prefix }}--nav-search__template">
+	<div class="{{ base_class }} {{ className|default("") }}" id="{{ base_class }}" tabindex="0">
+		<div class="{{ base_class }}__container">
+			{% include '@components/form/form.twig' with {
+        attributes: {
+          action: search.url,
+          "aria-label": search.label,
+          "data-search": "true",
+        },
+        fieldsets: [{
+          fields: [{
+            type: "search",
+            placeholder: search.label,
+            id: 'ilo' ~ '__widgets-search-input-field',
+          }]
+        }]
+      } %}
+		</div>
+	</div>
+</template>

package/dist/components/nav/mobile/mobiledrawer_main.twig

@@ -9,14 +9,33 @@
 {% endblock %}
 
 {% block mobile_drawer_widgets %}
-  {% if widgets.search %}
-    <a class="{{ mobile_class }}__widgets-search" href="{{ widgets.search.url }}" aria-label="{{ widgets.search.label }}">
-      <span class="{{ mobile_class }}__widgets-search__label">
-        {{ widgets.search.label }}
-      </span>
-      <span class="{{ mobile_class }}__widgets-search__icon" />
-    </a>
-  {% endif %}
+	{# Search Widget #}
+	{% if inputSearch|boolval %}
+		<div class="{{ mobile_class }}__widgets-search-input">
+			{% include '@components/form/form.twig' with {
+      attributes: {
+        action: widgets.search.url,
+        "aria-label": widgets.search.label,
+        "data-search": "true",
+      },
+      fieldsets: [{
+        fields: [{
+          type: "search",
+          placeholder: widgets.search.label,
+          id: prefix|default("ilo") ~ '__widgets-search-input-field',
+        }]
+      }]
+    }
+    %}
+		</div>
+	{% elseif widgets.search %}
+		<a class="{{ mobile_class }}__widgets-search" href="{{ widgets.search.url }}" aria-label="{{ widgets.search.label }}">
+			<span class="{{ mobile_class }}__widgets-search__label">
+				{{ widgets.search.label }}
+			</span>
+			<span class="{{ mobile_class }}__widgets-search__icon"/>
+		</a>
+	{% endif %}
 
   {% if widgets.link %}
     <a class="{{ mobile_class }}__widgets-link" href="{{ widgets.link.href }}">{{ widgets.link.label }}</a>

package/dist/components/nav/nav.behavior.js

@@ -7,7 +7,7 @@
 
   class StatefulComponent{constructor(element,initialState={}){this.element=element;this.initialState=initialState;this.state=this.#setupState(this.initialState);this.stateHandlers=new Map;this.#init();}#init(){this.setupState=this.#setupState.bind(this);this.registerStateHandler=this.registerStateHandler.bind(this);}registerStateHandler(prop,handler){if(!this.stateHandlers.has(prop)){this.stateHandlers.set(prop,[]);}this.stateHandlers.get(prop).push(handler);}#setupState(initialState){if(initialState===void 0)initialState={};return new Proxy(initialState,{set:(target,prop,value)=>{if(value!==target[prop]){target[prop]=value;const handlers=this.stateHandlers.get(prop);if(handlers){handlers.forEach(handler=>handler(value,prop));}}return true}})}}
 
-  class Nav extends StatefulComponent{constructor(element){const initialState={dropDownIsOpen:false,isDesktop:true};super(element,initialState);this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const dropdownTemplate=this.element.querySelector(`#${this.prefix}--nav-dropdown__template`);if(dropdownTemplate){const dropdownContent=dropdownTemplate.content.cloneNode(true);document.body.appendChild(dropdownContent);}return this};this.cacheDomReferences=()=>{this.dropdownButton=this.element.querySelector(`.${this.prefix}--nav-menu__more`);this.dropdown=document.body.querySelector(`.${this.prefix}--nav-dropdown`);return this};this.enableHandlers=()=>{if(this.dropdownButton){this.dropdownButton.addEventListener("click",this.handleDropdownClick);}return this};this.registerStateHandlers=()=>{this.registerStateHandler("dropDownIsOpen",value=>{if(value){this.handleOpenDropdown();}else {this.handleCloseDropdown();}});this.registerStateHandler("isDesktop",this.handleBreakpointChange);return this};this.handleBreakpointChange=isDesktop=>{if(!isDesktop){this.state.dropDownIsOpen=false;}};this.handleOpenDropdown=()=>{this.handleResizeDropdown();this.resizeObserver.observe(this.element);window.addEventListener("click",this.handleOutsideClick);this.dropdown?.classList.add(`${this.prefix}--nav-dropdown--open`);this.dropdownButton.setAttribute("aria-expanded","true");this.dropdownButton?.classList.add(`${this.prefix}--nav-menu__more--open`);this.handleTabNavigation();};this.handleCloseDropdown=()=>{this.dropdown?.classList.remove(`${this.prefix}--nav-dropdown--open`);this.dropdownButton?.classList.remove(`${this.prefix}--nav-menu__more--open`);this.dropdownButton.setAttribute("aria-expanded","false");this.resizeObserver.disconnect();window.removeEventListener("click",this.handleOutsideClick);};this.handleResizeDropdown=()=>{this.dropdown.style.width=`${this.element.offsetWidth}px`;this.dropdown.style.left=`${this.element.getBoundingClientRect().left}px`;this.dropdown.style.top=`${this.element.getBoundingClientRect().bottom}px`;};this.handleDropdownClick=()=>{this.state.dropDownIsOpen=!this.state.dropDownIsOpen;};this.handleOutsideClick=event=>{if(this.state.dropDownIsOpen&&!this.element?.contains(event.target)&&!this.dropdown?.contains(event.target)){this.state.dropDownIsOpen=false;}};this.handleFocusTrap=event=>{createFocusTrap(event,this.dropdown.querySelectorAll("a"),()=>{this.state.dropDownIsOpen=false;this.dropdownButton.focus();});};this.handleTabNavigation=()=>{setTimeout(()=>{this.dropdown.focus();this.dropdown.addEventListener("keydown",this.handleFocusTrap);},100);};this.prefix=this.element.dataset.prefix;this.dropdown=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isDesktop=["xl","xxl"].includes(breakpoint);});this.resizeObserver=new ResizeObserver(()=>{if(this.state.dropDownIsOpen){this.handleResizeDropdown();}});this.init();}init(){this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this}}
+  class Nav extends StatefulComponent{constructor(element){const initialState={dropDownIsOpen:false,searchIsOpen:false,isDesktop:true};super(element,initialState);this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const items=[`#${this.prefix}--nav-dropdown__template`,`#${this.prefix}--nav-search__template`];for(const templateSelector of items){const template=document.querySelector(templateSelector);if(template){const content=template.content.cloneNode(true);document.body.appendChild(content);}}return this};this.cacheDomReferences=()=>{this.dropdownButton=this.element.querySelector(`.${this.prefix}--nav-menu__more`);this.inputSearchButton=this.element.querySelector(`.${this.prefix}--main-nav__nav-search`);this.dropdown=document.body.querySelector(`.${this.prefix}__nav-extra-menu.${this.prefix}--nav-dropdown`);this.inputSearch=document.body.querySelector(`.${this.prefix}--main-nav__nav-extra-search.${this.prefix}--nav-dropdown`);return this};this.enableHandlers=()=>{if(this.dropdownButton){this.dropdownButton.addEventListener("click",()=>{this.state.dropDownIsOpen=!this.state.dropDownIsOpen;});}if(this.inputSearchButton){this.inputSearchButton.addEventListener("click",()=>{this.state.searchIsOpen=!this.state.searchIsOpen;});}return this};this.registerStateHandlers=()=>{this.registerStateHandler("dropDownIsOpen",value=>{if(value){this.handleOpen("dropdown");}else {this.handleClose("dropdown");}});this.registerStateHandler("searchIsOpen",value=>{if(value){this.handleOpen("search");}else {this.handleClose("search");}});this.registerStateHandler("isDesktop",this.handleBreakpointChange);return this};this.handleBreakpointChange=isDesktop=>{if(!isDesktop){this.state.dropDownIsOpen=false;this.state.searchIsOpen=false;}};this.getDropdownConfig=type=>{const configs={dropdown:{element:this.dropdown,button:this.dropdownButton,stateKey:"dropDownIsOpen",otherStateKey:"searchIsOpen",resizeObserver:this.menuResizeObserver,focusTrapHandler:this.handleMenuFocusTrap},search:{element:this.inputSearch,button:this.inputSearchButton,stateKey:"searchIsOpen",otherStateKey:"dropDownIsOpen",resizeObserver:this.searchResizeObserver,focusTrapHandler:this.handleSearchFocusTrap}};return configs[type]};this.handleOpen=type=>{const config=this.getDropdownConfig(type);if(!config.element||!config.button)return;this.state[config.otherStateKey]=false;this.handleResize(config.element);config.resizeObserver.observe(this.element);window.addEventListener("click",this.handleOutsideClick);config.element.classList.add(`${this.prefix}--nav-dropdown--open`);config.button.setAttribute("aria-expanded","true");this.handleTabNavigation(config);};this.handleClose=type=>{const config=this.getDropdownConfig(type);if(!config.element||!config.button)return;config.element.classList.remove(`${this.prefix}--nav-dropdown--open`);config.button.setAttribute("aria-expanded","false");if(!this.state.dropDownIsOpen&&!this.state.searchIsOpen){config.resizeObserver.disconnect();window.removeEventListener("click",this.handleOutsideClick);}};this.handleResize=element=>{element.style.width=`${this.element.offsetWidth}px`;element.style.left=`${this.element.getBoundingClientRect().left}px`;element.style.top=`${this.element.getBoundingClientRect().bottom}px`;};this.handleOutsideClick=event=>{if(this.state.dropDownIsOpen&&!this.element?.contains(event.target)&&!this.dropdown?.contains(event.target)){this.state.dropDownIsOpen=false;}if(this.state.searchIsOpen&&!this.element?.contains(event.target)&&!this.inputSearch?.contains(event.target)){this.state.searchIsOpen=false;}};this.handleMenuFocusTrap=event=>{createFocusTrap(event,this.dropdown.querySelectorAll("a"),()=>{this.state.dropDownIsOpen=false;this.dropdownButton.focus();});};this.handleSearchFocusTrap=event=>{createFocusTrap(event,this.inputSearch.querySelectorAll("input"),()=>{this.state.searchIsOpen=false;this.inputSearchButton.focus();});};this.handleTabNavigation=config=>{setTimeout(()=>{config.element.focus();config.element.addEventListener("keydown",config.focusTrapHandler);},100);};this.prefix=this.element.dataset.prefix;this.dropdown=null;this.inputSearch=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isDesktop=["xl","xxl"].includes(breakpoint);});this.menuResizeObserver=new ResizeObserver(()=>{if(this.state.dropDownIsOpen){this.handleResize(this.dropdown);}});this.searchResizeObserver=new ResizeObserver(()=>{if(this.state.searchIsOpen){this.handleResize(this.inputSearch);}});this.init();}init(){this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this}}
 
   class MobileNav extends StatefulComponent{constructor(element){const initialState={isMobile:false,mobDrawerIsOpen:false,languagesMobDrawerIsOpen:false,moreMobDrawerIsOpen:false};super(element,initialState);this.init=()=>{this.renderClientContent().cacheDomReferences().enableHandlers().registerStateHandlers().startBreakpointObserver();return this};this.startBreakpointObserver=()=>{this.breakpointObserver.start();return this};this.renderClientContent=()=>{const mobileDrawerTemplates=[`${this.prefix}--nav-mobile-drawer__template__main`,`${this.prefix}--nav-mobile-drawer__template__languages`,`${this.prefix}--nav-mobile-drawer__template__more`];mobileDrawerTemplates.forEach(templateId=>{const template=this.element.querySelector(`#${templateId}`);if(template){const content=template.content.cloneNode(true);document.body.appendChild(content);}});return this};this.cacheDomReferences=()=>{this.burger=this.element.querySelector(`[class$="burger"]`);this.mobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__main`);this.menuHomeButtons=document.body.querySelectorAll(`.${this.prefix}--nav-mobile__nested__header`);this.mobileDrawerCloseButtons=document.body.querySelectorAll(`.${this.prefix}--nav-mobile-drawer__header-close`);this.mobileLanguageButton=this.mobileDrawer.querySelector(`.${this.prefix}--nav-mobile__widgets-language`);this.languagesMobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__languages`);this.moreMobileDrawer=document.body.querySelector(`#${this.prefix}--nav-mobile-drawer__more`);this.mobileMoreButton=this.mobileDrawer.querySelector(`.${this.prefix}--nav-mobile__more`);return this};this.enableHandlers=()=>{this.burger.addEventListener("click",this.handleBurgerClick);if(this.mobileLanguageButton){this.mobileLanguageButton.addEventListener("click",this.handleLanguageButtonClick);}if(this.mobileMoreButton){this.mobileMoreButton.addEventListener("click",this.handleMoreButtonClick);}this.mobileDrawerCloseButtons.forEach(button=>{button.addEventListener("click",this.handleMobileDrawerClose);});this.menuHomeButtons.forEach(button=>{button.addEventListener("click",this.handleMenuHomeButtonClick);});return this};this.registerStateHandlers=()=>{this.registerStateHandler("mobDrawerIsOpen",value=>{if(value){this.handleOpenMobileDrawer();}else {this.handleCloseMobileDrawer();}});this.registerStateHandler("languagesMobDrawerIsOpen",value=>{if(value){this.handleOpenLanguagesMobileDrawer();}else {this.handleCloseLanguagesMobileDrawer();}});this.registerStateHandler("moreMobDrawerIsOpen",value=>{if(value){this.handleOpenMoreMobileDrawer();}else {this.handleCloseMoreMobileDrawer();}});this.registerStateHandler("isMobile",this.handleBreakpointChange);return this};this.handleBurgerClick=()=>{this.burger.setAttribute("aria-expanded","true");this.state.mobDrawerIsOpen=true;};this.handleLanguageButtonClick=()=>{this.state.languagesMobDrawerIsOpen=true;};this.handleMoreButtonClick=()=>{this.state.moreMobDrawerIsOpen=true;};this.handleMenuHomeButtonClick=()=>{this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;};this.handleMobileDrawerClose=()=>{this.state.mobDrawerIsOpen=false;this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;};this.handleOpenMobileDrawer=()=>{this.mobileDrawer.inert=false;this.mobileDrawer?.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseMobileDrawer=()=>{this.mobileDrawer.inert=true;this.mobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);this.burger.setAttribute("aria-expanded","false");};this.handleOpenLanguagesMobileDrawer=()=>{this.languagesMobileDrawer.inert=false;this.mobileDrawer.inert=true;this.mobileLanguageButton.setAttribute("aria-expanded","true");this.languagesMobileDrawer.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseLanguagesMobileDrawer=()=>{this.languagesMobileDrawer.inert=true;this.mobileDrawer.inert=false;this.mobileLanguageButton.setAttribute("aria-expanded","false");this.languagesMobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);};this.handleOpenMoreMobileDrawer=()=>{this.moreMobileDrawer.inert=false;this.mobileDrawer.inert=true;this.mobileMoreButton.setAttribute("aria-expanded","true");this.moreMobileDrawer.classList.add(`${this.prefix}--nav-mobile-drawer--open`);};this.handleCloseMoreMobileDrawer=()=>{this.moreMobileDrawer.inert=true;this.mobileDrawer.inert=false;this.mobileMoreButton.setAttribute("aria-expanded","false");this.moreMobileDrawer?.classList.remove(`${this.prefix}--nav-mobile-drawer--open`);};this.handleBreakpointChange=isMobile=>{if(!isMobile){this.state.mobDrawerIsOpen=false;this.state.languagesMobDrawerIsOpen=false;this.state.moreMobDrawerIsOpen=false;}};this.prefix=this.element.dataset.prefix;this.mobileDrawer=null;this.mobileDrawerClose=null;this.languagesMobileDrawer=null;this.languagesMobileDrawerClose=null;this.mobileLanguageButton=null;this.burger=null;this.breakpointObserver=createBreakpointObserver(breakpoint=>{this.state.isMobile=!["xl","xxl"].includes(breakpoint);});this.init();}}
 

package/dist/components/nav/nav.component.yml

@@ -18,9 +18,6 @@ nav:
           link:
             href: "https://live.ilo.org"
             label: "ILO Live Homepage"
-        tag:
-          main: "Advancing social justice, promoting decent work"
-          sub: "ILO is a specialized agency of the United Nations"
     widgets:
       type: object
       label: Widgets
@@ -104,5 +101,67 @@ nav:
       options:
         compact: compact
         complex: complex
-      preview: "complex"
+        main: main
+      preview: "compact"
+
+  variants:
+    default:
+      label: Default
+    compact:
+      label: Compact
+    complex:
+      label: Complex
+      fields:
+        navtype: complex
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/ilo-live-logo-en-dark.png"
+            mobile: "images/ilo-live-logo-en-light.png"
+            drawer: "images/ilo-live-logo-en-dark.png"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+    main:
+      label: Main
+      fields:
+        navtype: main
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/logo_en_horizontal_white.svg"
+            mobile: "images/logo_en_horizontal_white.svg"
+            drawer: "images/logo_en_horizontal_blue.svg"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+        widgets:
+          language:
+            label: "Language"
+            language: "English"
+            links:
+              - label: "English"
+                url: "https://www.ilo.org/en"
+              - label: "Français"
+                url: "https://www.ilo.org/fr"
+              - label: "Español"
+                url: "https://www.ilo.org/es"
+              - label: "العربية"
+                url: "https://www.ilo.org/ar"
+              - label: "中文"
+                url: "https://www.ilo.org/ru"
+              - label: "Português"
+                url: "https://www.ilo.org/pt"
+              - label: "Italiano"
+                url: "https://www.ilo.org/it"
+          search:
+            label: "Search"
+            url: "https://www.ilo.org/search"
+
   visibility: storybook

package/dist/components/nav/nav.twig

@@ -1,5 +1,7 @@
 {% if navtype == 'compact' %}
   {% include '@components/nav/nav_compact.twig' %}
-{% else %}
+{% elseif navtype == 'complex' %}
   {% include '@components/nav/nav_complex.twig' %}
+{% else %}
+  {% include '@components/nav/nav_main.twig' %}
 {% endif %}

package/dist/components/nav/nav.wingsuit.yml

@@ -18,9 +18,6 @@ nav:
           link:
             href: "https://live.ilo.org"
             label: "ILO Live Homepage"
-        tag:
-          main: "Advancing social justice, promoting decent work"
-          sub: "ILO is a specialized agency of the United Nations"
     widgets:
       type: object
       label: Widgets
@@ -104,5 +101,67 @@ nav:
       options:
         compact: compact
         complex: complex
-      preview: "complex"
+        main: main
+      preview: "compact"
+
+  variants:
+    default:
+      label: Default
+    compact:
+      label: Compact
+    complex:
+      label: Complex
+      fields:
+        navtype: complex
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/ilo-live-logo-en-dark.png"
+            mobile: "images/ilo-live-logo-en-light.png"
+            drawer: "images/ilo-live-logo-en-dark.png"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+    main:
+      label: Main
+      fields:
+        navtype: main
+        branding:
+          tag:
+            main: "Advancing social justice, promoting decent work"
+            sub: "ILO is a specialized agency of the United Nations"
+          logo:
+            main: "images/logo_en_horizontal_white.svg"
+            mobile: "images/logo_en_horizontal_white.svg"
+            drawer: "images/logo_en_horizontal_blue.svg"
+            alt: "ILO Logo"
+            link:
+              href: "https://live.ilo.org"
+              label: "ILO Live Homepage"
+        widgets:
+          language:
+            label: "Language"
+            language: "English"
+            links:
+              - label: "English"
+                url: "https://www.ilo.org/en"
+              - label: "Français"
+                url: "https://www.ilo.org/fr"
+              - label: "Español"
+                url: "https://www.ilo.org/es"
+              - label: "العربية"
+                url: "https://www.ilo.org/ar"
+              - label: "中文"
+                url: "https://www.ilo.org/ru"
+              - label: "Português"
+                url: "https://www.ilo.org/pt"
+              - label: "Italiano"
+                url: "https://www.ilo.org/it"
+          search:
+            label: "Search"
+            url: "https://www.ilo.org/search"
+
   visibility: storybook

package/dist/components/nav/nav_compact.twig

@@ -72,7 +72,8 @@
   {% if moreItems %}
     {% include "@components/nav/desktop/navdropdown.twig" with {
       menu: moreItems,
-      prefix: prefix
+      prefix: prefix,
+      className: 'ilo' ~ '__nav-extra-menu'
     } only %}
   {% endif %}
 

package/dist/components/nav/nav_complex.twig

@@ -88,7 +88,8 @@
       {% if moreItems|length %}
         {% include "@components/nav/desktop/navdropdown.twig" with {
           menu: moreItems,
-          prefix: prefix
+          prefix: prefix,
+					className: 'ilo' ~ '__nav-extra-menu'
         } only %}
       {% endif %}
 
@@ -136,4 +137,3 @@
     </nav>
   </div>
 </header>
-

package/dist/components/nav/nav_main.twig

@@ -0,0 +1,135 @@
+{# navcomplex.twig #}
+
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = 'ilo' ~ '--main-nav' %}
+{% set mobile_drawer_class = 'ilo' ~ '--nav-mobile-drawer' %}
+
+<header class="{{ base_class }}" data-loadcomponent="Nav" data-prefix="ilo">
+	<div class="{{ base_class }}-bg--dark">
+		<div class="{{ base_class }}__widgets {{ base_class }}__container">
+			<span class="{{ base_class }}__widgets-bar-corner"></span>
+			<span class="{{ base_class }}__widgets-bar">
+				{% if widgets.language %}
+					{% include "@components/languagetoggle/languagetoggle.twig" with {
+            className: base_class ~ '__widgets-bar__language',
+            hideIcon: false,
+            language: widgets.language.language,
+            links: widgets.language.links,
+						theme: "dark-blue"
+          } %}
+				{% endif %}
+			</span>
+		</div>
+	</div>
+
+	<div class="{{ base_class }}-bg--dark">
+		<div class="{{ base_class }}__branding {{ base_class }}__container">
+			<div class="{{ base_class }}__branding-main">
+				<div class="{{ base_class }}__branding-main__logo" role="button" tabindex="0" aria-label="Branding">
+					{% include "@components/logo/logo.twig" with {
+            src: branding.logo.main,
+            alt: branding.logo.alt,
+            link: branding.logo.link,
+            className: base_class ~ '__branding-main__logo',
+            imgClassName: base_class ~ '__branding-main__logo-img',
+            prefix: prefix
+          } %}
+				</div>
+			</div>
+			<div class="{{ base_class }}__branding-tag">
+				<h4 class="{{ base_class }}__branding-tag__main">{{ branding.tag.main }}</h4>
+				{% if branding.tag.sub %}
+					<span class="{{ base_class }}__branding-tag__sub">{{ branding.tag.sub }}</span>
+				{% endif %}
+			</div>
+		</div>
+	</div>
+
+	<div class="{{ base_class }}-bg--darker">
+		<nav class="{{ base_class }}__nav {{ base_class }}__container">
+			<div class="{{ base_class }}__nav-mobile">
+				<div class="{{ base_class }}__nav-mobile__logo" role="button" tabindex="0" aria-label="Branding">
+					{% include "@components/logo/logo.twig" with {
+            src: branding.logo.mobile,
+            alt: branding.logo.alt,
+            link: branding.logo.link,
+            className: base_class ~ '__nav-mobile__logo',
+            imgClassName: base_class ~ '__nav-mobile__logo-img',
+            prefix: prefix
+          } %}
+				</div>
+			</div>
+
+			{% if facadeItems %}
+				{% include "@components/nav/desktop/navmenu.twig" with {
+          className: base_class ~ '__nav-menu',
+          menu: facadeItems,
+          more: moreItems|length ? {
+            label: labels.more,
+          } : null,
+          prefix: prefix,
+					light: true
+        } only %}
+			{% endif %}
+
+			{% if moreItems|length %}
+				{% include "@components/nav/desktop/navdropdown.twig" with {
+          menu: moreItems,
+          prefix: prefix,
+					className: 'ilo' ~ '__nav-extra-menu'
+        } only %}
+			{% endif %}
+
+			<button class="{{ base_class }}__nav-search" aria-label="Open search"
+			  aria-extanded="false"
+				aria-haspopup="menu"
+				aria-controls="{{ prefix }}__extra-"
+			>
+				<span class="{{ base_class }}__nav-search__icon"></span>
+			</button>
+
+			{% include "@components/nav/desktop/navsearch.twig" with {
+          prefix: prefix,
+          search: widgets.search,
+						className: base_class ~ '__nav-extra-search ' ~ 'ilo' ~ '--main-nav__nav-search-dropdown'
+        } only %}
+
+			<button class="{{ base_class }}__nav-burger" aria-label="Toggle navigation" aria-expanded="false" aria-haspopup="menu" aria-controls="{{ prefix }}--nav-mobile-drawer__main">
+				<span class="{{ base_class }}__nav-burger__icon"></span>
+			</button>
+
+			{% include "@components/nav/mobile/mobiledrawer_main.twig" with {
+        menu: facadeItems,
+        prefix: prefix,
+        branding: branding,
+        widgets: widgets,
+        labels: labels,
+        showMoreButton: moreItems|length,
+        inputSearch: true,
+        id: "main",
+      } only %}
+
+			{% if widgets.language.links|length %}
+				{% include "@components/nav/mobile/mobiledrawer_nested.twig" with {
+        menu: widgets.language.links,
+        prefix: prefix,
+        title: labels.language,
+        menu_home: labels.home,
+          isActiveLabel: widgets.language.language,
+          id: "languages",
+        } only %}
+			{% endif %}
+
+			{% if moreItems|length %}
+				{% include "@components/nav/mobile/mobiledrawer_nested.twig" with {
+          menu: moreItems,
+          prefix: prefix,
+          title: labels.more,
+          menu_home: labels.home,
+          id: "more",
+        } only %}
+			{% endif %}
+
+		</nav>
+	</div>
+</header>