@ilo-org/twig 1.7.4 → 1.8.1

package/dist/components/contextmenu/contextmenu.component.yml

@@ -21,4 +21,12 @@ contextmenu:
           url: "http://www.google.com"
         - label: Link Five Is Slightly Longer
           url: "http://www.google.com"
+    className:
+      type: string
+      label: className
+      description: Additional CSS class name(s) to add to the context menu
+    contextMenuId:
+      type: string
+      label: contextMenuId
+      description: Optional HTML ID attribute for the context menu element
   visibility: storybook

package/dist/components/contextmenu/contextmenu.twig

@@ -1,7 +1,9 @@
-{#
-  CONTEXT MENU COMPONENT
-#}
-<ol class="ilo--context-menu">
+{# contextmenu.twig #}
+
+{% set className = className|default("") %}
+{% set contextMenuId = contextMenuId|default("") %}
+
+<ol role="menu" class="ilo--context-menu {{className}}" id="{{contextMenuId}}">
 	{% for link in links %}
 		<li class="ilo--context-menu--item{{ link.endsection|boolval ? ' endsection'}}">
 			<a href="{{link.url}}" class="ilo--context-menu--link">

package/dist/components/contextmenu/contextmenu.wingsuit.yml

@@ -21,4 +21,12 @@ contextmenu:
           url: "http://www.google.com"
         - label: Link Five Is Slightly Longer
           url: "http://www.google.com"
+    className:
+      type: string
+      label: className
+      description: Additional CSS class name(s) to add to the context menu
+    contextMenuId:
+      type: string
+      label: contextMenuId
+      description: Optional HTML ID attribute for the context menu element
   visibility: storybook

package/dist/components/languagetoggle/languagetoggle.behavior.js

@@ -1,7 +1,11 @@
 (function () {
   'use strict';
 
-  class LanguageToggle{constructor(element){this.element=element;this.prefix=`${this.element.dataset.prefix}--language-toggle`;this.contextMenuVisibleClass=`${this.prefix}--context-menu__open`;this.init();}init(){this.cacheDomReferences().setupHandlers().enable();}cacheDomReferences(){this.contextButton=this.element.querySelector(`.${this.prefix}--container`);this.contextMenu=this.element.querySelector(`.${this.prefix}--context-menu`);return this}setupHandlers(){this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this);this.openContextMenu=this.openContextMenu.bind(this);this.closeContextMenu=this.closeContextMenu.bind(this);this.positionContextMenu=this.positionContextMenu.bind(this);this.onClick=this.onClick.bind(this);return this}enable(){this.contextButton.addEventListener("click",this.onClick.bind(this));window.addEventListener("load",()=>{this.positionContextMenu();});}onClick(e){e.stopPropagation();if(this.contexMenuIsOpen()){this.closeContextMenu();}else {this.openContextMenu();window.addEventListener("click",this.closeContextMenu,{once:true});}return this}openContextMenu(){this.contextMenu.classList.add(this.contextMenuVisibleClass);this.contextMenu.removeAttribute("hidden");this.contextButton.setAttribute("aria-expanded","true");this.positionContextMenu();return this}closeContextMenu(){this.contextMenu.classList.remove(this.contextMenuVisibleClass);this.contextMenu.setAttribute("hidden","hidden");this.contextButton.setAttribute("aria-expanded","false");}positionContextMenu(){const containerRect=this.element.getBoundingClientRect();const contextMenuRect=this.contextMenu.getBoundingClientRect();this.contextMenu.style.left=`${containerRect.left+(containerRect.width-contextMenuRect.width)/2}px`;this.contextMenu.style.top=`${containerRect.bottom}px`;}contexMenuIsOpen(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}}
+  function createFocusTrap(event,focusableElements,escapeCallBack,tabCallBack){if(escapeCallBack===void 0)escapeCallBack=event=>{};if(tabCallBack===void 0)tabCallBack=event=>{};const firstFocusableElement=focusableElements[0];const lastFocusableElement=focusableElements[focusableElements.length-1];if(event.key==="Escape"){escapeCallBack(event);}if(event.key==="Tab"){if(event.shiftKey){if(document.activeElement===firstFocusableElement){event.preventDefault();lastFocusableElement.focus();tabCallBack(event);}}else if(document.activeElement===lastFocusableElement){event.preventDefault();firstFocusableElement.focus();tabCallBack(event);}}}
+
+  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 LanguageToggle extends StatefulComponent{constructor(element){const initialState={contextMenuIsOpen:false};super(element,initialState);this.init=()=>{this.cacheDomReferences().enableHandlers().registerStateHandlers();return this};this.cacheDomReferences=()=>{this.contextMenuTemplate=this.element.querySelector(`#${this.prefix}--context-menu--template`);this.contextButton=this.element.querySelector(`.${this.prefix}--container`);return this};this.registerStateHandlers=()=>{this.registerStateHandler("contextMenuIsOpen",value=>{if(value){this.handleOpenContextMenu();}else {this.handleCloseContextMenu();}});return this};this.enableHandlers=()=>{this.contextButton.addEventListener("click",this.handleClick);return this};this.handleClick=e=>{e.stopPropagation();this.state.contextMenuIsOpen=!this.state.contextMenuIsOpen;return this};this.handleOpenContextMenu=()=>{this.contextMenuContent=this.contextMenuTemplate.content.cloneNode(true);document.body.appendChild(this.contextMenuContent);this.contextMenu=document.body.querySelector(`.${this.prefix}--context-menu`);this.positionContextMenu();this.contextMenu.classList.add(this.contextMenuVisibleClass);this.contextButton.setAttribute("aria-expanded","true");window.addEventListener("click",this.handleOutsideClick);window.addEventListener("resize",this.positionContextMenu);this.handleTabNavigation();return this};this.handleCloseContextMenu=()=>{this.contextMenu.classList.remove(this.contextMenuVisibleClass);this.contextMenu.remove();this.contextButton.setAttribute("aria-expanded","false");this.contextMenu.removeEventListener("keydown",this.handleFocusTrap);window.removeEventListener("click",this.handleOutsideClick);window.removeEventListener("resize",this.positionContextMenu);};this.positionContextMenu=()=>{const containerRect=this.element.getBoundingClientRect();const contextMenuRect=this.contextMenu.getBoundingClientRect();this.contextMenu.style.left=`${containerRect.left+(containerRect.width-contextMenuRect.width)/2}px`;this.contextMenu.style.top=`${containerRect.bottom}px`;};this.handleOutsideClick=event=>{if(this.state.contextMenuIsOpen&&!this.element?.contains(event.target)&&!this.contextMenu?.contains(event.target)){this.state.contextMenuIsOpen=false;}};this.handleFocusTrap=event=>{const focusableElements=Array.from(this.contextMenu.querySelectorAll("a"));createFocusTrap(event,focusableElements,()=>{this.state.contextMenuIsOpen=false;this.contextButton.focus();});};this.handleTabNavigation=()=>{setTimeout(()=>{this.contextMenu.focus();this.contextMenu.addEventListener("keydown",this.handleFocusTrap);},100);};this.prefix=`${this.element.dataset.prefix}--language-toggle`;this.contextMenuVisibleClass=`${this.prefix}--context-menu__open`;this.contextMenuTemplate=null;this.contextMenuContent=null;this.contextMenu=null;this.init();}}
 
   Drupal.behaviors.languagetoggle={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="LanguageToggle"]`),element=>{if(!element.dataset.jsProcessed){new LanguageToggle(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/languagetoggle/languagetoggle.component.yml

@@ -4,6 +4,11 @@ languagetoggle:
   label: Language Toggle
   description: The Language Toggle allows users to switch between different language versions of a website.
   fields:
+    className:
+      type: string
+      label: Class Name
+      description: Optional additional CSS class to be added to the component
+      preview: "custom-class"
     language:
       label: Language
       type: string

package/dist/components/languagetoggle/languagetoggle.twig

@@ -3,15 +3,16 @@
 {% set hideicon = hideicon|default(false) %}
 {% set theme = theme|default("light") %}
 
-<div class="{{ prefix }}--language-toggle {{ prefix }}--language-toggle__theme__{{ theme }}" data-prefix="ilo" data-loadcomponent="LanguageToggle">
-    <button class="{{ prefix }}--language-toggle--container" aria-expanded="false" aria-controls="ilo--language-toggle--context-menu">
-      {% if not hideicon %}
-        <span class="{{ prefix }}--language-toggle--icon"></span>
-      {% endif %}
-      <span class="{{ prefix }}--language-toggle--action">{{ language }}</span>
-      <span class="{{ prefix }}--language-toggle--arrow"></span>
-    </button>
-    <div role="menu" class="{{ prefix }}--language-toggle--context-menu" id="ilo--language-toggle--context-menu" hidden>
+<div class="{{ prefix }}--language-toggle {{ prefix }}--language-toggle__theme__{{ theme }} {{ className|default('') }}" data-prefix="ilo" data-loadcomponent="LanguageToggle">
+  <button class="{{ prefix }}--language-toggle--container" aria-expanded="false" aria-controls="ilo--language-toggle--context-menu">
+    {% if not hideicon %}
+      <span class="{{ prefix }}--language-toggle--icon"></span>
+    {% endif %}
+    <span class="{{ prefix }}--language-toggle--action">{{ language }}</span>
+    <span class="{{ prefix }}--language-toggle--arrow"></span>
+  </button>
+  <template id="ilo--language-toggle--context-menu--template">
+    <div class="{{ prefix }}--language-toggle--context-menu" id="ilo--language-toggle--context-menu" tabindex="0">
       {% if links %}
         {% include "@components/contextmenu/contextmenu.twig" with {
           links: links,
@@ -19,4 +20,6 @@
         } only %}
       {% endif %}
     </div>
+  </template>
 </div>
+

package/dist/components/languagetoggle/languagetoggle.wingsuit.yml

@@ -4,6 +4,11 @@ languagetoggle:
   label: Language Toggle
   description: The Language Toggle allows users to switch between different language versions of a website.
   fields:
+    className:
+      type: string
+      label: Class Name
+      description: Optional additional CSS class to be added to the component
+      preview: "custom-class"
     language:
       label: Language
       type: string

package/dist/components/logo/logo.component.yml

@@ -0,0 +1,34 @@
+logo:
+  namespace: Components/Logo
+  use: "@components/logo/logo.twig"
+  label: Logo
+  description: A logo component that can optionally be wrapped in a link
+  fields:
+    src:
+      type: string
+      label: Image Source
+      description: The source URL of the logo image
+      preview: "images/logo_en_horizontal_blue_dark.svg"
+    alt:
+      type: string
+      label: Alt Text
+      description: Alternative text for the logo image
+      preview: "ILO Logo"
+    link:
+      type: object
+      label: Link
+      description: Optional link configuration for the logo
+      preview:
+        href: "https://www.ilo.org"
+        label: "ILO Live Homepage"
+    className:
+      type: string
+      label: Wrapper Class
+      description: CSS class for the logo wrapper element
+      preview: "ilo--logo"
+    imgClassName:
+      type: string
+      label: Image Class
+      description: CSS class for the logo image element
+      preview: "ilo--logo__img"
+  visibility: storybook

package/dist/components/logo/logo.twig

@@ -0,0 +1,27 @@
+{# logo.twig #}
+
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = className|default('ilo' ~ '--logo') %}
+{% set img_class = imgClassName|default(base_class ~ '__img') %}
+
+{% if link and link.href %}
+  <a
+    href="{{ link.href }}"
+    class="{{ base_class }} {{ base_class }}--link"
+    {% if link.label %}
+      aria-label="{{ link.label }}"
+    {% endif %}
+  >
+    <img
+      class="{{ img_class }}"
+      src="{{ src }}"
+      alt="{{ alt }}"
+    >
+  </a>
+{% else %}
+  <img
+    class="{{ base_class }} {{ img_class }}"
+    src="{{ src }}"
+    alt="{{ alt }}"
+  >
+{% endif %}

package/dist/components/logo/logo.wingsuit.yml

@@ -0,0 +1,34 @@
+logo:
+  namespace: Components/Logo
+  use: "@components/logo/logo.twig"
+  label: Logo
+  description: A logo component that can optionally be wrapped in a link
+  fields:
+    src:
+      type: string
+      label: Image Source
+      description: The source URL of the logo image
+      preview: "images/logo_en_horizontal_blue_dark.svg"
+    alt:
+      type: string
+      label: Alt Text
+      description: Alternative text for the logo image
+      preview: "ILO Logo"
+    link:
+      type: object
+      label: Link
+      description: Optional link configuration for the logo
+      preview:
+        href: "https://www.ilo.org"
+        label: "ILO Live Homepage"
+    className:
+      type: string
+      label: Wrapper Class
+      description: CSS class for the logo wrapper element
+      preview: "ilo--logo"
+    imgClassName:
+      type: string
+      label: Image Class
+      description: CSS class for the logo image element
+      preview: "ilo--logo__img"
+  visibility: storybook

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

@@ -0,0 +1,15 @@
+{# navdropdown.twig #}
+
+{% set prefix = prefix|default("ilo") %}
+{% set base_class = 'ilo' ~ "--nav-dropdown" %}
+
+<template id="{{ prefix }}--nav-dropdown__template">
+  <div class="{{ base_class }} {{ className|default("") }}" id="{{ base_class }}" tabindex="0">
+    <div class="{{ base_class }}__container">
+      {% include "@components/nav/desktop/navmenugrid.twig" with {
+        menu: menu,
+        prefix: prefix
+      } only %}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,27 @@
+{# navmenu.twig #}
+
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = 'ilo' ~ '--nav-menu' %}
+
+<div class="{{ base_class }} {{ className }}">
+  <ul class="{{ base_class }}__list">
+    {% for item in menu %}
+      <li class="{{ base_class }}__item {{ item.className }}">
+        <a href="{{ item.href }}" class="{{ base_class }}__link">
+          {{ item.label }}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
+  {% if more %}
+    <button
+      class="{{ base_class }}__more"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-controls="{{ prefix }}--nav-dropdown"
+      id="{{ prefix }}--nav-dropdown__button">
+      {{ more.label }}
+      <span class="{{ base_class }}__more-icon"></span>
+    </button>
+  {% endif %}
+</div>

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

@@ -0,0 +1,16 @@
+{# navmenugrid.twig #}
+
+{% set prefix = prefix|default('ilo') %}
+{% set base_class = 'ilo' ~ '--nav-menu-grid' %}
+
+<div class="{{ base_class }}">
+  {% for chunk in menu|batch(5) %}
+    <div class="{{ base_class }}__column">
+      {% for item in chunk %}
+        <a href="{{ item.href }}" class="{{ base_class }}__item">
+          {{ item.label }}
+        </a>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>

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

@@ -0,0 +1,26 @@
+{% set prefix = prefix|default("ilo") %}
+{% set base_class = 'ilo' ~ "--nav-mobile-drawer" %}
+{% set mobile_class = 'ilo' ~ "--nav-mobile" %}
+{% set id = id|default("primary") %}
+{% set className = className|default("") %}
+
+<template id="{{ base_class }}__template__{{ id }}">
+  <div class="{{ base_class }} {{ className }}" id="{{ base_class }}__{{ id }}" inert>
+    <div class="{{ base_class }}__header">
+      <div class="{{ base_class }}__header-main">
+        {{ block("mobile_drawer_header") }}
+      </div>
+      <button class="{{ base_class }}__header-close" aria-label="Close navigation">
+        <span class="{{ base_class }}__header-close__icon"></span>
+      </button>
+    </div>
+    <div class="{{ base_class }}__container">
+      <div class="{{ base_class }}__widgets">
+        <div class="{{ mobile_class}}__widgets">
+          {{ block("mobile_drawer_widgets") }}
+        </div>
+      </div>
+      {{ block("mobile_drawer_content") }}
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+{% extends "@components/nav/mobile/mobiledrawer_layout.twig" %}
+
+{% block mobile_drawer_header %}
+  <div class="{{ mobile_class }}__branding">
+    <div class="{{ mobile_class }}__logo">
+      <img src="{{ branding.logo.drawer }}" alt="{{ branding.logo.alt }}">
+    </div>
+  </div>
+{% 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 %}
+
+  {% if widgets.link %}
+    <a class="{{ mobile_class }}__widgets-link" href="{{ widgets.link.href }}">{{ widgets.link.label }}</a>
+  {% endif %}
+
+  {% if widgets.language %}
+    <button
+      class="{{ mobile_class }}__widgets-language"
+      aria-label="{{ widgets.language.label }}"
+      aria-expanded="false"
+      aria-haspopup="menu"
+      aria-controls="{{ prefix }}--nav-mobile-drawer__languages"
+      id="{{ prefix }}--nav-mobile-drawer__languages__button"
+    >
+      <span class="{{ mobile_class }}__widgets-language__label">
+        {{ widgets.language.label }}: {{ widgets.language.language }}
+      </span>
+      <span class="{{ mobile_class }}__widgets-language__icon" />
+    </button>
+  {% endif %}
+{% endblock %}
+
+{% block mobile_drawer_content %}
+  {% include "@components/nav/mobile/mobilemenulist.twig" with {
+    menu: menu,
+    prefix: prefix,
+  } only %}
+
+  {% if showMoreButton %}
+    <button class="{{ mobile_class }}__more" aria-expanded="false" aria-controls="more-items" aria-label="More items">More<span class="{{ mobile_class }}__more__icon"></span></button>
+  {% endif %}
+{% endblock %}

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

@@ -0,0 +1,25 @@
+{% extends "@components/nav/mobile/mobiledrawer_layout.twig" %}
+{% set prefix = prefix|default("ilo") %}
+{% set menu_home = menu_home|default("Menu home") %}
+{% set menu_title = title|default("Title") %}
+{% set isActiveLabel = isActiveLabel|default(null) %}
+
+{% block mobile_drawer_header %}
+  <div class="{{ mobile_class}}-drawer__header-main">
+    <button class="{{ mobile_class}}__nested__header" aria-label="Back to menu">
+      <span class="{{ mobile_class}}__nested__header__icon"></span>{{ menu_home }}
+    </button>
+  </div>
+{% endblock %}
+
+{% block mobile_drawer_widgets %}
+  <span class="{{ mobile_class}}__nested__title">{{ menu_title }}</span>
+{% endblock %}
+
+{% block mobile_drawer_content %}
+  {% include "@components/nav/mobile/mobilemenulist.twig" with {
+    menu: menu,
+    prefix: prefix,
+    isActiveLabel: isActiveLabel,
+  } only %}
+{% endblock %}

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

@@ -0,0 +1,20 @@
+{# mobilemenulist.twig #}
+
+{# List items can have url or href attribute #}
+
+{% set prefix = prefix|default("ilo") %}
+{% set base_class = 'ilo' ~ "--nav-mobile-menu" %}
+{% set isActiveLabel = isActiveLabel|default(null) %}
+
+<ul class="{{ base_class }}">
+  {% for item in menu %}
+    {% set url = item.url|default(item.href|default('')) %}
+    {% set isActive = isActiveLabel is not null ? isActiveLabel == item.label : item.isActive %}
+    <li class="{{ base_class }}__item {% if isActive %}{{ base_class }}__item--active{% endif %}">
+      <a href="{{ url }}" class="{{ base_class }}__link">
+        {{ item.label }}
+      </a>
+      {% if isActive %}<span class="{{ base_class }}__marked"></span>{% endif %}
+    </li>
+  {% endfor %}
+</ul>

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

@@ -0,0 +1,16 @@
+(function () {
+  'use strict';
+
+  function createFocusTrap(event,focusableElements,escapeCallBack,tabCallBack){if(escapeCallBack===void 0)escapeCallBack=event=>{};if(tabCallBack===void 0)tabCallBack=event=>{};const firstFocusableElement=focusableElements[0];const lastFocusableElement=focusableElements[focusableElements.length-1];if(event.key==="Escape"){escapeCallBack(event);}if(event.key==="Tab"){if(event.shiftKey){if(document.activeElement===firstFocusableElement){event.preventDefault();lastFocusableElement.focus();tabCallBack(event);}}else if(document.activeElement===lastFocusableElement){event.preventDefault();firstFocusableElement.focus();tabCallBack(event);}}}
+
+  const BREAKPOINTS={xs:320,sm:414,md:610,lg:1024,xl:1140,xxl:1168};function getCurrentBreakpoint(){const width=window.innerWidth;if(width<BREAKPOINTS.xs)return "xs";if(width<BREAKPOINTS.sm)return "sm";if(width<BREAKPOINTS.md)return "md";if(width<BREAKPOINTS.lg)return "lg";if(width<BREAKPOINTS.xl)return "xl";return "xxl"}function createBreakpointObserver(callback){let currentBreakpoint=getCurrentBreakpoint();let timeoutId=null;let observer=null;function checkBreakpoint(){timeoutId=window.requestAnimationFrame(()=>{const newBreakpoint=getCurrentBreakpoint();if(newBreakpoint!==currentBreakpoint){currentBreakpoint=newBreakpoint;callback(newBreakpoint);}});}function start(){observer=new ResizeObserver(()=>{checkBreakpoint();});observer.observe(document.body);callback(currentBreakpoint);}function stop(){if(observer){observer.disconnect();observer=null;}if(timeoutId){window.cancelAnimationFrame(timeoutId);timeoutId=null;}}return {start,stop,getCurrentBreakpoint:()=>currentBreakpoint}}
+
+  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 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();}}
+
+  Drupal.behaviors.nav={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Nav"]`),element=>{if(!element.dataset.jsProcessed){new Nav(element);new MobileNav(element);element.dataset.jsProcessed=true;}});}};
+
+})();

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

@@ -0,0 +1,108 @@
+nav:
+  namespace: Components/Nav
+  use: "@components/nav/nav.twig"
+  label: SubsiteNav
+  description: A complex navigation component with branding, widgets, and menu sections
+  fields:
+    branding:
+      type: object
+      label: Branding
+      description: Branding elements including logo and name
+      required: true
+      preview:
+        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"
+        tag:
+          main: "Advancing social justice, promoting decent work"
+          sub: "ILO is a specialized agency of the United Nations"
+    widgets:
+      type: object
+      label: Widgets
+      description: Widgets section including link and language toggle
+      preview:
+        link:
+          href: "https://www.ilo.org"
+          label: "Go to main ILO website"
+        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"
+    facadeItems:
+      type: object
+      label: Facade Menu Items
+      description: Primary menu items displayed in the main navigation
+      preview:
+        - href: "https://www.ilo.org/"
+          label: "Menu Item 1"
+          isActive: true
+          className: "test"
+        - href: "https://www.ilo.org/"
+          label: "Menu Item 2"
+          isActive: false
+          className: "test"
+        - href: "https://www.ilo.org/"
+          label: "Menu Item 3"
+          isActive: false
+          className: "test"
+    moreItems:
+      type: object
+      label: More Menu Items
+      description: Additional menu items displayed in the dropdown
+      preview:
+        - href: "https://www.ilo.org/more1"
+          label: "More Item 1"
+        - href: "https://www.ilo.org/more2"
+          label: "More Item 2"
+        - href: "https://www.ilo.org/more3"
+          label: "More Item 3"
+        - href: "https://www.ilo.org/more4"
+          label: "More Item 4"
+        - href: "https://www.ilo.org/more5"
+          label: "More Item 5"
+        - href: "https://www.ilo.org/more6"
+          label: "More Item 6"
+        - href: "https://www.ilo.org/more7"
+          label: "More Item 7"
+        - href: "https://www.ilo.org/more8"
+          label: "More Item 8"
+    labels:
+      type: object
+      label: Labels
+      description: Text labels used throughout the navigation
+      preview:
+        more: "More"
+        language: "Language"
+        home: "Menu home"
+  settings:
+    navtype:
+      label: Type
+      type: select
+      description: What kind of navigation component to render
+      options:
+        compact: compact
+        complex: complex
+      preview: "complex"
+  visibility: storybook

package/dist/components/nav/nav.twig

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