@ilo-org/twig 1.0.3 → 1.0.4

package/dist/components/breadcrumb/breadcrumb.behavior.js

@@ -1 +1 @@
-!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var s=n.call(t,e||"default");if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,n){for(var s=0;s<n.length;s++){var i=n[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,t(i.key),i)}}var n="click",s="resize",i=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.prefix=this.element.dataset.prefix,this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable().onResize(),this}},{key:"cacheDomReferences",value:function(){return this.breadcrumbsId="".concat(this.prefix,"--breadcrumb--container"),this.contextAreaClass="".concat(this.prefix,"--breadcrumb--context"),this.contextMenuItemsClass="".concat(this.prefix,"--context-menu"),this.contextCollapseClass="".concat(this.contextAreaClass,"__collapse"),this.contextButtonClass="".concat(this.contextAreaClass,"--button"),this.contextMenuClass="".concat(this.contextAreaClass,"--menu"),this.contextMenuVisibleClass="".concat(this.contextMenuClass,"__visible"),this.breadcrumbs=this.element.querySelector("#".concat(this.breadcrumbsId)),this.contextArea=this.element.querySelector(".".concat(this.contextAreaClass)),this.contextMenu=this.element.querySelector(".".concat(this.contextMenuClass)),this.contextButton=this.element.querySelector(".".concat(this.contextButtonClass)),this.breadcrumbsLastLink=this.element.querySelector("#".concat(this.breadcrumbsId," > li:last-child a")),this.contextMenuItems=this.element.querySelector(".".concat(this.contextMenuItemsClass)),this.contextMenuItemFirstLink=this.contextMenuItems.querySelector("li:first-child a"),this.contextMenuItemLastLink=this.contextMenuItems.querySelector("li:last-child a"),this.breadcrumbsWidth=this.breadcrumbs.offsetWidth,this}},{key:"setupHandlers",value:function(){return this.onResize=this.onResize.bind(this),this.onClick=this.onClick.bind(this),this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this),this.openContextMenu=this.openContextMenu.bind(this),this.closeContextMenu=this.closeContextMenu.bind(this),this.focusBreadcrumbsLastLink=this.focusBreadcrumbsLastLink.bind(this),this.focusContextMenuItemFirstLink=this.focusContextMenuItemFirstLink.bind(this),this.onKeydown=this.onKeydown.bind(this),this}},{key:"enable",value:function(){var t=this;if(window.addEventListener(s,(function(e){return t.onResize(e)})),this.contextButton)return this.contextButton.addEventListener(n,(function(e){return t.onClick(e)})),this.element.addEventListener("keydown",(function(e){return t.onKeydown(e)})),this}},{key:"onClick",value:function(t){return t.stopPropagation(),this.contexMenuIsOpen()?this.closeContextMenu():(this.openContextMenu(),window.addEventListener("click",this.closeContextMenu,{once:!0})),this}},{key:"onResize",value:function(){return this.contextArea&&this.breadcrumbsWidth&&(this.breadcrumbsWidth>=window.innerWidth/1.5?this.contextArea.classList.add(this.contextCollapseClass):(this.contextArea.classList.remove(this.contextCollapseClass),this.closeContextMenu())),this}},{key:"onKeydown",value:function(t){return t.shiftKey?("tab"===t.key.toLowerCase()&&document.activeElement===this.contextMenuItemFirstLink&&(t.preventDefault(),this.contextButton.focus()),this):("tab"===t.key.toLowerCase()&&this.contexMenuIsOpen()&&(document.activeElement===this.contextButton&&(t.preventDefault(),this.focusContextMenuItemFirstLink()),document.activeElement===this.contextMenuItemLastLink&&(t.preventDefault(),this.focusBreadcrumbsLastLink(),this.closeContextMenu())),this)}},{key:"positionContextMenu",value:function(){var t=this.contextButton.getBoundingClientRect(),e=t.left+t.width/2-this.contextMenu.offsetWidth/2,n=t.bottom+16;return this.contextMenu.style.left=e+"px",this.contextMenu.style.top=n+"px",this}},{key:"openContextMenu",value:function(){return this.contextMenu.classList.add(this.contextMenuVisibleClass),this.contextButton.setAttribute("aria-expanded","true"),this.positionContextMenu(),this}},{key:"closeContextMenu",value:function(){this.contextMenu.classList.remove(this.contextMenuVisibleClass),this.contextButton.setAttribute("aria-expanded","false")}},{key:"contexMenuIsOpen",value:function(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}},{key:"focusContextMenuItemFirstLink",value:function(){return this.contextMenuItemFirstLink.focus(),this}},{key:"focusBreadcrumbsLastLink",value:function(){return this.breadcrumbsLastLink.focus(),this}}])&&e(t.prototype,i),o&&e(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,i,o}();Drupal.behaviors.breadcrumb={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Breadcrumb"]'),(function(t){t.dataset.jsProcessed||(new i(t),t.dataset.jsProcessed=!0)}))}}}));
+!function(t){"function"==typeof define&&define.amd?define(t):t()}((function(){"use strict";function t(t){var e=function(t,e){if("object"!=typeof t||!t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var s=n.call(t,e||"default");if("object"!=typeof s)return s;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}(t,"string");return"symbol"==typeof e?e:e+""}function e(e,n){for(var s=0;s<n.length;s++){var i=n[s];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,t(i.key),i)}}var n="click",s="resize",i=function(){return t=function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.element=e,this.prefix=this.element.dataset.prefix,this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable().onResize(),this}},{key:"cacheDomReferences",value:function(){return this.breadcrumbsId="".concat(this.prefix,"--breadcrumb--container"),this.contextAreaClass="".concat(this.prefix,"--breadcrumb--context"),this.contextMenuItemsClass="".concat(this.prefix,"--context-menu"),this.contextCollapseClass="".concat(this.contextAreaClass,"__collapse"),this.contextButtonClass="".concat(this.contextAreaClass,"--button"),this.contextMenuClass="".concat(this.contextAreaClass,"--menu"),this.contextMenuVisibleClass="".concat(this.contextMenuClass,"__visible"),this.breadcrumbs=this.element.querySelector("#".concat(this.breadcrumbsId)),this.contextArea=this.element.querySelector(".".concat(this.contextAreaClass)),this.contextMenu=this.element.querySelector(".".concat(this.contextMenuClass)),this.contextButton=this.element.querySelector(".".concat(this.contextButtonClass)),this.breadcrumbsLastLink=this.element.querySelector("#".concat(this.breadcrumbsId," > li:last-child a")),this.contextMenuItems=this.element.querySelector(".".concat(this.contextMenuItemsClass)),this.contextMenuItemFirstLink=this.contextMenuItems.querySelector("li:first-child a"),this.contextMenuItemLastLink=this.contextMenuItems.querySelector("li:last-child a"),this.breadcrumbsWidth=this.breadcrumbs.offsetWidth,this}},{key:"setupHandlers",value:function(){return this.onResize=this.onResize.bind(this),this.onClick=this.onClick.bind(this),this.contexMenuIsOpen=this.contexMenuIsOpen.bind(this),this.openContextMenu=this.openContextMenu.bind(this),this.closeContextMenu=this.closeContextMenu.bind(this),this.focusBreadcrumbsLastLink=this.focusBreadcrumbsLastLink.bind(this),this.focusContextMenuItemFirstLink=this.focusContextMenuItemFirstLink.bind(this),this.onKeydown=this.onKeydown.bind(this),this}},{key:"enable",value:function(){var t=this;if(window.addEventListener(s,(function(e){return t.onResize(e)})),this.contextButton)return this.contextButton.addEventListener(n,(function(e){return t.onClick(e)})),this.element.addEventListener("keydown",(function(e){return t.onKeydown(e)})),this}},{key:"onClick",value:function(t){return t.stopPropagation(),this.contexMenuIsOpen()?this.closeContextMenu():(this.openContextMenu(),window.addEventListener("click",this.closeContextMenu,{once:!0})),this}},{key:"onResize",value:function(){return this.contextArea&&this.breadcrumbsWidth&&(this.breadcrumbsWidth>=window.innerWidth/1.5?this.contextArea.classList.add(this.contextCollapseClass):(this.contextArea.classList.remove(this.contextCollapseClass),this.closeContextMenu())),this}},{key:"onKeydown",value:function(t){if(t.shiftKey)return"tab"===t.key.toLowerCase()&&document.activeElement===this.contextMenuItemFirstLink&&(t.preventDefault(),this.contextButton.focus()),this;if("tab"===t.key.toLowerCase()&&this.contexMenuIsOpen()){if(document.activeElement===this.contextButton)return t.preventDefault(),this.focusContextMenuItemFirstLink(),this;if(document.activeElement===this.contextMenuItemLastLink)return t.preventDefault(),this.focusBreadcrumbsLastLink(),this.closeContextMenu(),this}return this}},{key:"positionContextMenu",value:function(){var t=this.contextButton.getBoundingClientRect(),e=t.left+t.width/2-this.contextMenuItems.offsetWidth/2,n=t.bottom+16;return this.contextMenu.style.left=e+"px",this.contextMenu.style.top=n+"px",this}},{key:"openContextMenu",value:function(){return this.contextMenu.classList.add(this.contextMenuVisibleClass),this.contextMenu.removeAttribute("hidden"),this.contextButton.setAttribute("aria-expanded",!0),this.positionContextMenu(),this}},{key:"closeContextMenu",value:function(){this.contextMenu.classList.remove(this.contextMenuVisibleClass),this.contextMenu.setAttribute("hidden","hidden"),this.contextButton.setAttribute("aria-expanded",!1)}},{key:"contexMenuIsOpen",value:function(){return this.contextMenu.classList.contains(this.contextMenuVisibleClass)}},{key:"focusContextMenuItemFirstLink",value:function(){return this.contextMenuItemFirstLink.focus(),this}},{key:"focusBreadcrumbsLastLink",value:function(){return this.breadcrumbsLastLink.focus(),this}}])&&e(t.prototype,i),o&&e(t,o),Object.defineProperty(t,"prototype",{writable:!1}),t;var t,i,o}();Drupal.behaviors.breadcrumb={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Breadcrumb"]'),(function(t){t.dataset.jsProcessed||(new i(t),t.dataset.jsProcessed=!0)}))}}}));

package/dist/components/breadcrumb/breadcrumb.css

@@ -1 +1 @@
-@charset "UTF-8";.ilo--breadcrumb{position:relative;display:inline-block;z-index:10}.ilo--breadcrumb--inner{display:inline-flex;padding-inline-start:var(--breadcrumb-padding);padding-inline-end:2.5723472669rem;padding-block:.857449089rem;background-color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 2.5723472669rem) 100%,0 100%)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,2.5723472669rem 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E");background-position:0;padding-inline:1.2861736334rem .857449089rem}[dir=rtl] .ilo--breadcrumb--context__collapse,[dir=rtl] .ilo--breadcrumb--item{background-position:100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{display:none;padding:0;margin:0;border:none;background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;height:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--button:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:.6430868167rem .2143622722rem}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{position:relative;background:0 0!important;padding-inline-start:2px}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;width:.857449089rem;height:.857449089rem;position:relative}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link{display:inline-flex;align-items:center;color:#230050;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{white-space:nowrap;overflow-x:clip;text-overflow:ellipsis;max-width:30ch;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-underline-offset:.2143622722rem;text-decoration-thickness:.1071811361rem}
+@charset "UTF-8";.ilo--breadcrumb{position:relative;z-index:10}.ilo--breadcrumb--inner{display:inline-flex;padding-inline-start:var(--breadcrumb-padding);padding-inline-end:2.5723472669rem;padding-block:.857449089rem;background-color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 2.5723472669rem) 100%,0 100%)}[dir=rtl] .ilo--breadcrumb--inner{clip-path:polygon(0 0,100% 0,100% 100%,2.5723472669rem 100%)}.ilo--breadcrumb--context,.ilo--breadcrumb--items{align-items:center;display:inline-flex;justify-content:flex-start;list-style:none}.ilo--breadcrumb--context__collapse,.ilo--breadcrumb--item{background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M1.731 16l-1.118-.815L5.838 8 .613.814 1.731 0l5.522 7.593a.69.69 0 0 1 0 .814L1.731 16z'/%3E%3C/svg%3E");background-position:0;padding-inline:1.2861736334rem .857449089rem}[dir=rtl] .ilo--breadcrumb--context__collapse,[dir=rtl] .ilo--breadcrumb--item{background-position:100%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'%3E%3Cpath fill='%23230050' d='M.7 8.4c0-.1-.1-.3-.1-.4s0-.3.1-.4L6.3 0l1.1.8L2.2 8l5.2 7.2-1.1.8L.7 8.4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context{position:relative}.ilo--breadcrumb--context--button{display:none;padding:0;margin:0;border:none;background-position:50%;background-repeat:no-repeat;background-size:16px 4px;position:relative;width:2.2508038585rem;height:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%23230050' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--button:hover{cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 4'%3E%3Cpath fill='%231E2DBE' d='M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm6 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E")}.ilo--breadcrumb--context--menu{display:none;position:fixed;width:6.4308681672rem;z-index:10}.ilo--breadcrumb--context--menu__visible{display:inline-block}.ilo--breadcrumb--context__collapse{padding-inline:.6430868167rem .2143622722rem}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--items{display:none}.ilo--breadcrumb--context__collapse .ilo--breadcrumb--context--button{display:inline-block}.ilo--breadcrumb--item,.ilo--breadcrumb--item__first{align-items:center;display:flex}.ilo--breadcrumb--item__first{position:relative;background:0 0!important;padding-inline-start:2px}.ilo--breadcrumb--item__first:focus .ilo--breadcrumb--link:after,.ilo--breadcrumb--item__first:hover .ilo--breadcrumb--link:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231E2DBE' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--item__first .ilo--breadcrumb--link{background:0 0;width:.857449089rem;height:.857449089rem;position:relative}.ilo--breadcrumb--item__first .ilo--breadcrumb--link:after{background-position:50%;background-repeat:no-repeat;content:"";display:block;height:.857449089rem;left:0;position:absolute;top:0;width:.857449089rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23230050' d='M15.388 5.717L8.43.152a.696.696 0 0 0-.862 0L.612 5.717a.696.696 0 0 0-.264.542v9.044a.696.696 0 0 0 .695.695h4.87v-5.565h4.174V16h4.87a.696.696 0 0 0 .695-.696V6.259a.695.695 0 0 0-.264-.542z'/%3E%3C/svg%3E")}.ilo--breadcrumb--link{display:inline-flex;align-items:center;color:#230050;height:.857449089rem;padding-block:0;text-decoration:none}.ilo--breadcrumb--link--label{white-space:nowrap;overflow-x:clip;text-overflow:ellipsis;max-width:30ch;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:11.94px;letter-spacing:normal;line-height:16.24px}.ilo--breadcrumb--link--label:focus,.ilo--breadcrumb--link--label:hover{color:#1e2dbe;text-decoration:underline;text-underline-offset:.2143622722rem;text-decoration-thickness:.1071811361rem}

package/dist/components/breadcrumb/breadcrumb.twig

@@ -19,7 +19,7 @@
 		<ol class="ilo--breadcrumb--items" id="ilo--breadcrumb--container">
 			{# Render the first link on its own as a custom icon #}
 			<li class="ilo--breadcrumb--item ilo--breadcrumb--item__first">
-				<a aria-label="{{firstlink.label}}" class="ilo--breadcrumb--link" href="{{firstlink.url}}}"></a>
+				<a aria-label="{{firstlink.label}}" class="ilo--breadcrumb--link" href="{{firstlink.url}}"></a>
 			</li>
 			{# Render all but the first and last items in the context area #}
 			{% if contextLinks|length > 0 %}
@@ -33,7 +33,7 @@
 							</li>
 						{% endfor %}
 					</ol>
-					<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" controls="ilo--breadcrumb--menu" class="ilo--breadcrumb--context--button"></button>
+					<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" aria-controls="ilo--breadcrumb--menu" class="ilo--breadcrumb--context--button"></button>
 				</li>
 			{% endif %}
 			{# Render the last one outside the context area #}
@@ -46,7 +46,7 @@
 			{% endif %}
 		</ol>
 	</div>
-	<div class="ilo--breadcrumb--context--menu" id="ilo--breadcrumb--menu">
+	<div class="ilo--breadcrumb--context--menu" id="ilo--breadcrumb--menu" hidden>
 		{% include '@components/contextmenu/contextmenu.twig' with {
 			links: contextLinks,
 			prefix: prefix

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/twig",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "Apache-2.0",
   "description": "Twig components for the ILO's Design System",
   "publishConfig": {
@@ -51,7 +51,7 @@
     "@ilo-org/brand-assets": "0.5.1",
     "@ilo-org/fonts": "0.2.2",
     "@ilo-org/icons": "0.3.1",
-    "@ilo-org/styles": "1.0.3",
+    "@ilo-org/styles": "1.0.4",
     "@ilo-org/themes": "0.9.0",
     "@ilo-org/utils": "0.1.1"
   },

package/src/patterns/components/breadcrumb/breadcrumb.js

@@ -187,6 +187,7 @@ export default class Breadcrumb {
         if (document.activeElement === this.contextButton) {
           e.preventDefault();
           this.focusContextMenuItemFirstLink();
+          return this;
         }
 
         // If the last context menu item is focused then the next focusable
@@ -195,6 +196,7 @@ export default class Breadcrumb {
           e.preventDefault();
           this.focusBreadcrumbsLastLink();
           this.closeContextMenu();
+          return this;
         }
       }
     }
@@ -211,8 +213,8 @@ export default class Breadcrumb {
   positionContextMenu() {
     const buttonRect = this.contextButton.getBoundingClientRect();
     const buttonCenterX = buttonRect.left + buttonRect.width / 2;
-    const contextMenuWidth = this.contextMenu.offsetWidth;
-    const navStart = buttonCenterX - contextMenuWidth / 2;
+    const contextMenuItemsWidth = this.contextMenuItems.offsetWidth;
+    const navStart = buttonCenterX - contextMenuItemsWidth / 2;
     const navTop = buttonRect.bottom + 16;
     this.contextMenu.style.left = navStart + "px";
     this.contextMenu.style.top = navTop + "px";
@@ -227,7 +229,8 @@ export default class Breadcrumb {
    */
   openContextMenu() {
     this.contextMenu.classList.add(this.contextMenuVisibleClass);
-    this.contextButton.setAttribute("aria-expanded", "true");
+    this.contextMenu.removeAttribute("hidden");
+    this.contextButton.setAttribute("aria-expanded", true);
     this.positionContextMenu();
     return this;
   }
@@ -240,7 +243,8 @@ export default class Breadcrumb {
    */
   closeContextMenu() {
     this.contextMenu.classList.remove(this.contextMenuVisibleClass);
-    this.contextButton.setAttribute("aria-expanded", "false");
+    this.contextMenu.setAttribute("hidden", "hidden");
+    this.contextButton.setAttribute("aria-expanded", false);
   }
 
   /**

package/src/patterns/components/breadcrumb/breadcrumb.twig

@@ -19,7 +19,7 @@
 		<ol class="{{prefix}}--breadcrumb--items" id="{{prefix}}--breadcrumb--container">
 			{# Render the first link on its own as a custom icon #}
 			<li class="{{prefix}}--breadcrumb--item {{prefix}}--breadcrumb--item__first">
-				<a aria-label="{{firstlink.label}}" class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}}"></a>
+				<a aria-label="{{firstlink.label}}" class="{{prefix}}--breadcrumb--link" href="{{firstlink.url}}"></a>
 			</li>
 			{# Render all but the first and last items in the context area #}
 			{% if contextLinks|length > 0 %}
@@ -33,7 +33,7 @@
 							</li>
 						{% endfor %}
 					</ol>
-					<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" controls="{{prefix}}--breadcrumb--menu" class="{{prefix}}--breadcrumb--context--button"></button>
+					<button aria-label="{{buttonlabel|default('More links')}}" aria-expanded="false" aria-controls="{{prefix}}--breadcrumb--menu" class="{{prefix}}--breadcrumb--context--button"></button>
 				</li>
 			{% endif %}
 			{# Render the last one outside the context area #}
@@ -46,7 +46,7 @@
 			{% endif %}
 		</ol>
 	</div>
-	<div class="{{prefix}}--breadcrumb--context--menu" id="{{prefix}}--breadcrumb--menu">
+	<div class="{{prefix}}--breadcrumb--context--menu" id="{{prefix}}--breadcrumb--menu" hidden>
 		{% include '@components/contextmenu/contextmenu.twig' with {
 			links: contextLinks,
 			prefix: prefix