@ilo-org/twig 1.4.0 → 1.6.0

package/dist/components/button/button.component.yml

@@ -33,8 +33,7 @@ button:
       label: Icon
       description: Optional icon to include in button. See the `Icon` component for a full list of arguments
       preview:
-        name: "plus"
-        size: 24
+        name: "calendar"
       required: false
     className:
       type: string
@@ -42,6 +41,12 @@ button:
       description: optional class name
       preview: "optionalclass"
       required: false
+    elementId:
+      type: string
+      label: ID
+      description: optional id
+      preview: "optionalid"
+      required: false
   settings:
     size:
       type: select

package/dist/components/button/button.twig

@@ -1,28 +1,43 @@
-{#
-  BUTTON COMPONENT
-#}
+{# button.twig #}
+
+{# Default values#}
+{% set size = size|default("medium")%}
+{% set type = type|default("primary")%}
+{% set iconPosition = iconPosition|default("left")%}
+{% set icon = icon|default(null)%}
+{% set icononly = icononly|default(false)%}
+{% set disabled = disabled|default(false)%}
+{% set opensmodal = opensmodal|default(false)%}
+
+{% set iconSize = 24%}
+
+{% if size == 'small' %}
+	{% set iconSize = 16 %}
+{% endif %}
+
+
 {% if url %}
-	<a class="ilo--button ilo--button__{{size}} ilo--button__{{type}}{% if icon %} ilo--button--icon ilo--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} ilo--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" href="{{url}}" {% if target is defined and target != 'false' %} target="{{target}}" rel="noopener noreferrer" {% endif %} {{ disabled|boolval ? ' disabled' }}>
-		<span class="link__label">{{label}}</span>
+	<a class="ilo--button ilo--button__{{size}} ilo--button__{{type}}{% if icon %} ilo--button--icon ilo--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} ilo--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" {%if elementId%}id="{{elementId}}"{%endif%} href="{{url}}" {% if target is defined and target != 'false' %} target="{{target}}" rel="noopener noreferrer" {% endif %} {{ disabled|boolval ? ' disabled' }}>
 		{% if icon %}
 			{% include '@components/icon/icon.twig' with {
 					prefix: prefix,
 					name: icon.name,
-					size: icon.size,
+					size: iconSize,
 					color: icon.color
-				} only %}
+			} only %}
 		{% endif %}
+		<span class="link__label">{{label}}</span>
 	</a>
 {% else %}
-	<button class="ilo--button ilo--button__{{size}} ilo--button__{{type}}{% if icon %} ilo--button--icon ilo--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} ilo--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {{ disabled|boolval ? ' disabled' }}>
-		<span class="button__label">{{label}}</span>
+	<button class="ilo--button ilo--button__{{size}} ilo--button__{{type}}{% if icon %} ilo--button--icon ilo--button--icon--position__{{iconPosition}}{% endif %}{% if icononly|boolval %} ilo--button--icon--only{% endif %}{% if className %} {{className}}{% endif %}" {%if elementId%}id="{{elementId}}"{%endif%} {% if kind %} type="{{kind}}" {% endif %} {% if opensmodal %} aria-haspopup="dialog" {% endif %} {{ disabled|boolval ? ' disabled' }}>
 		{% if icon %}
 			{% include '@components/icon/icon.twig' with {
 					prefix: prefix,
 					name: icon.name,
-					size: icon.size,
+					size: iconSize,
 					color: icon.color
 				} only %}
 		{% endif %}
+		<span class="button__label">{{label}}</span>
 	</button>
 {% endif %}

package/dist/components/button/button.wingsuit.yml

@@ -33,8 +33,7 @@ button:
       label: Icon
       description: Optional icon to include in button. See the `Icon` component for a full list of arguments
       preview:
-        name: "plus"
-        size: 24
+        name: "calendar"
       required: false
     className:
       type: string
@@ -42,6 +41,12 @@ button:
       description: optional class name
       preview: "optionalclass"
       required: false
+    elementId:
+      type: string
+      label: ID
+      description: optional id
+      preview: "optionalid"
+      required: false
   settings:
     size:
       type: select

package/dist/components/card_detail/card_detail.component.yml

@@ -8,12 +8,15 @@ detailcard:
     date:
       type: object
       label: Date
-      description: Date copy readable for both humans and machines
+      description: Date copy readable for both humans and machines. Will not be shown if `dateExtra` is also used.
+      preview:
+        human: 20 September 2025
+        unix: "1741276180"
     dateExtra:
       type: string
       label: dateExtra
-      description: Strong date copy that could include other information such as the location of an event.
-      preview: 20 September 2022 | Geneva
+      description: Strong date copy that could include other information such as the location of an event. Overrides the `date` field.
+      preview: 20 September 2025 | Kuala Lumpur, Malaysia
     eyebrow:
       type: string
       label: Eyebrow
@@ -28,13 +31,13 @@ detailcard:
         loading: "lazy"
         url:
           - breakpoint: "(min-width: 0px)"
-            src: "/images/small.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 800px)"
-            src: "/images/medium.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 1200px)"
-            src: "/images/large.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 1440px)"
-            src: "/images/large.jpg"
+            src: "/images/publication.jpg"
     intro:
       type: string
       label: Intro

package/dist/components/card_detail/card_detail.twig

@@ -1,8 +1,6 @@
-{#
-  DETAIL CARD COMPONENT
-#}
+{# card_detail.twig #}
 
-<div class="ilo--card ilo--card__type__detail ilo--card__action ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %}">
+<div class="ilo--card ilo--card__type__detail ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} ilo--card__theme__light">
 	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 		<span class="ilo--card--link--text">{{title}}</span>
 	</a>
@@ -26,11 +24,18 @@
 			{% if intro %}
 				<p class="ilo--card--intro">{{intro}}</p>
 			{% endif %}
-			{% if date %}
+			{% if date and not dateExtra %}
 				<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
 			{% endif %}
 			{% if dateExtra %}
-				<p class="ilo--card--date-extra">{{dateExtra}}</p>
+				<p class="ilo--card--date-extra">
+					{% include "@components/icon/icon.twig" with {
+						name: "triangle_right",
+						size: 20,
+						color: "var(--ilo-color-gray-charcoal)"
+					} %}
+					{{dateExtra}}
+				</p>
 			{% endif %}
 		</div>
 	</div>

package/dist/components/card_detail/card_detail.wingsuit.yml

@@ -8,12 +8,15 @@ detailcard:
     date:
       type: object
       label: Date
-      description: Date copy readable for both humans and machines
+      description: Date copy readable for both humans and machines. Will not be shown if `dateExtra` is also used.
+      preview:
+        human: 20 September 2025
+        unix: "1741276180"
     dateExtra:
       type: string
       label: dateExtra
-      description: Strong date copy that could include other information such as the location of an event.
-      preview: 20 September 2022 | Geneva
+      description: Strong date copy that could include other information such as the location of an event. Overrides the `date` field.
+      preview: 20 September 2025 | Kuala Lumpur, Malaysia
     eyebrow:
       type: string
       label: Eyebrow
@@ -28,13 +31,13 @@ detailcard:
         loading: "lazy"
         url:
           - breakpoint: "(min-width: 0px)"
-            src: "/images/small.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 800px)"
-            src: "/images/medium.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 1200px)"
-            src: "/images/large.jpg"
+            src: "/images/publication.jpg"
           - breakpoint: "(min-width: 1440px)"
-            src: "/images/large.jpg"
+            src: "/images/publication.jpg"
     intro:
       type: string
       label: Intro

package/dist/components/card_feature/card_feature.twig

@@ -1,8 +1,10 @@
-{#
-  FEATURE CARD COMPONENT
-#}
+{# card_feature.twig #}
 
-<div class="ilo--card ilo--card__type__feature ilo--card__action ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
+{% set theme = theme|default("light") %}
+{% set titleLevel = titleLevel|default(p) %}
+{% set size = size|default("narrow") %}
+
+<div class="ilo--card ilo--card__type__feature ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if cta %} ilo--card__linklist {% endif %}">
 	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 		<span class="ilo--card--link--text">{{title}}</span>
 	</a>
@@ -26,7 +28,7 @@
 			{% if date %}
 				<time class="ilo--card--date" datetime="{{date.unix}}">{{date.human}}</time>
 			{% endif %}
-			{% if cta %}
+			{% if cta and size == "narrow" %}
 				{% include "@components/linklist/linklist.twig" with {
 					theme: theme,
           linkgroup: [{
@@ -37,4 +39,13 @@
 			{% endif %}
 		</div>
 	</div>
+		{% if cta and size == "wide" or size == "fluid" %}
+			{% include "@components/linklist/linklist.twig" with {
+				theme: theme,
+				linkgroup: [{
+					links: [cta]
+				}],
+				prefix: prefix
+			} only %}
+		{% endif %}
 </div>

package/dist/components/card_multilink/card_multilink.twig

@@ -5,7 +5,7 @@
 	{% set theme = "light" %}
 {% endif %}
 
-<div class="ilo--card ilo--card__theme__{{theme}} ilo--card__type__multilink {% if link|length > 0 %} ilo--card__action {% endif %} ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %} {% if not image %} ilo--card--no-image {% endif %}">
+<div class="ilo--card ilo--card__theme__{{theme}} ilo--card__type__multilink {% if link|length > 0 %} {% endif %} ilo--card__size__{{size}} {% if isvideo|boolval %} ilo--card__isvideo {% endif %} {% if linklist %} ilo--card__linklist {% endif %} {% if size == "wide" or size == "fluid" %} ilo--card__align__{{alignment}} {% endif %} {% if not image %} ilo--card--no-image {% endif %}">
 	{% if link|length > 0 %}
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>

package/dist/components/card_promo/card_promo.twig

@@ -3,7 +3,7 @@
 #}
 
 <div class="ilo--card--wrapper ilo--card--wrapper__type__promo ilo--card--wrapper__type__promo__size__{{ size }}">
-	<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}} {% if cornercut|boolval %}ilo--card__cornercut{% endif %}">
+	<div class="ilo--card ilo--card__type__promo ilo--card__size__{{ size }} ilo--card__theme__{{theme}} {% if cornercut|boolval %}ilo--card__cornercut{% endif %}">
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>
 		</a>

package/dist/components/card_score/card_score.component.yml

@@ -0,0 +1,102 @@
+scorecard:
+  namespace: Components/Cards
+  use: "@components/card_score/card_score.twig"
+  label: Score Card
+  description: A  card component for prominently displaying status information or metadata around topics or events.
+  visibility: storybook
+  fields:
+    status:
+      type: object
+      label: Status
+      description: Sets the status of the card. See the `Status` component for more information. If not set, the status will not be displayed.
+      preview:
+        content: "Live"
+        statusType: "alert"
+    dataset:
+      type: object
+      label: Dataset
+      description: Exposes an array of Content objects with `icon` and `label` and an array of CTAs (buttons) with `label`, `icon`, and `url`.
+      preview:
+        content:
+          items:
+            - icon: "time"
+              label: 28 February 2025
+            - icon: "pin"
+              label: "Geneva, Switzerland"
+        cta:
+          items:
+            - label: Reminder
+              url: "https://www.ilo.org"
+              icon: "time"
+            - label: Add to calendar
+              url: "https://www.ilo.org"
+              icon: "calendar"
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. This should include a `url`, which is an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. It can also contain an `alt` property for the image's alt text and a `loading` property for the image's loading attribute.
+      preview:
+        alt: "Image alt text"
+        loading: "lazy"
+        url:
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/small.jpg"
+          - breakpoint: "(min-width: 800px)"
+            src: "/images/medium.jpg"
+          - breakpoint: "(min-width: 1200px)"
+            src: "/images/large.jpg"
+          - breakpoint: "(min-width: 1440px)"
+            src: "/images/large.jpg"
+    link:
+      type: string
+      label: Link
+      description: Link field for the card
+      preview: "https://www.ilo.org/"
+    title:
+      type: string
+      label: Title
+      description: Title field for the card
+      preview: Can digital technology be an equality machine?
+  settings:
+    isvideo:
+      type: boolean
+      label: Is a Video
+      description: Whether the card should display a video icon (for Score card)
+      preview: false
+    size:
+      type: select
+      label: size
+      description: Sets the size of the card. If not set, the card will appear as `narrow`.
+      required: false
+      preview: "narrow"
+      options:
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+        simple: simple
+    theme:
+      type: select
+      label: Theme
+      description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
+      required: false
+      preview: "light"
+      options:
+        dark: Dark
+        light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_score/card_score.twig

@@ -0,0 +1,71 @@
+{# card_score.twig #}
+
+{% set theme = theme|default("light") %}
+{% set titleLevel = titleLevel|default(p) %}
+{% set size = size|default("narrow") %}
+{% set iconColor = "var(--ilo-color-gray-accessible)" %}
+
+{% if theme == "dark" %}
+	{% set iconColor = "var(--ilo-color-white)" %}
+{% endif %}
+
+<div class="ilo--card ilo--card__type__score ilo--card__theme__{{theme}} ilo--card__size__{{ size }} {% if isvideo|boolval %} ilo--card__isvideo {% endif %}">
+	<a class="ilo--card--link" href="{{link}}" title="{{title}}">
+		<span class="ilo--card--link--text">{{title}}</span>
+	</a>
+	<div class="ilo--card--wrap">
+		{% if image and size != "simple"  %}
+			<div class="ilo--card--image--wrapper">
+				{% include "@components/picture/picture.twig" with {
+          image: image,
+          class: "card"
+        }
+      %}
+			</div>
+		{% endif %}
+		<div class="ilo--card--content">
+			{% if status %}
+				{% include "@components/status/status.twig" with {
+					content: status.content,
+					statusType: status.statusType
+				} %}
+			{% endif %}
+			{% if eyebrow and size != "simple" %}
+				<p class="ilo--card--eyebrow">{{eyebrow}}</p>
+			{% endif %}
+			{% if title %}
+				<{{titleLevel|default('p')}} class="{{ prefix }}--card--title">{{ title }}</{{titleLevel|default('p')}}>
+			{% endif %}
+			{% if dataset.content %}
+				<div class="ilo--card--area--content">
+				{% for item in dataset.content.items %}
+						<div class="ilo--card--content--item">
+							{% include "@components/icon/icon.twig" with {
+								name: item.icon,
+								size: 20,
+								color: iconColor
+							} %}
+							<span datetime="{{item.unix}}">{{item.label}}</span>
+						</div>
+				{% endfor %}
+				</div>
+			{% endif %}
+			{% if dataset.content %}
+				<div class="ilo--card--area--cta">
+					{% for item in dataset.cta.items %}
+						<div class="ilo--card--cta">
+							{% include "@components/button/button.twig" with {
+								icon: {name: item.icon, size: 16},
+								label: item.label,
+								prefix: prefix,
+								type: "secondary",
+								size: "small",
+								iconPosition: "left",
+							} %}
+					</div>
+					{% endfor %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

package/dist/components/card_score/card_score.wingsuit.yml

@@ -0,0 +1,102 @@
+scorecard:
+  namespace: Components/Cards
+  use: "@components/card_score/card_score.twig"
+  label: Score Card
+  description: A  card component for prominently displaying status information or metadata around topics or events.
+  visibility: storybook
+  fields:
+    status:
+      type: object
+      label: Status
+      description: Sets the status of the card. See the `Status` component for more information. If not set, the status will not be displayed.
+      preview:
+        content: "Live"
+        statusType: "alert"
+    dataset:
+      type: object
+      label: Dataset
+      description: Exposes an array of Content objects with `icon` and `label` and an array of CTAs (buttons) with `label`, `icon`, and `url`.
+      preview:
+        content:
+          items:
+            - icon: "time"
+              label: 28 February 2025
+            - icon: "pin"
+              label: "Geneva, Switzerland"
+        cta:
+          items:
+            - label: Reminder
+              url: "https://www.ilo.org"
+              icon: "time"
+            - label: Add to calendar
+              url: "https://www.ilo.org"
+              icon: "calendar"
+    eyebrow:
+      type: string
+      label: Eyebrow
+      description: Eyebrow copy
+      preview: "Podcast"
+    image:
+      type: object
+      label: Image
+      description: Image settings for the card. This should include a `url`, which is an array of objects with an `src` property pointing to the image file and a `breakpoint` property which is either a number indicating the minimum viewport width at which the image should be displayed or a media query. It can also contain an `alt` property for the image's alt text and a `loading` property for the image's loading attribute.
+      preview:
+        alt: "Image alt text"
+        loading: "lazy"
+        url:
+          - breakpoint: "(min-width: 0px)"
+            src: "/images/small.jpg"
+          - breakpoint: "(min-width: 800px)"
+            src: "/images/medium.jpg"
+          - breakpoint: "(min-width: 1200px)"
+            src: "/images/large.jpg"
+          - breakpoint: "(min-width: 1440px)"
+            src: "/images/large.jpg"
+    link:
+      type: string
+      label: Link
+      description: Link field for the card
+      preview: "https://www.ilo.org/"
+    title:
+      type: string
+      label: Title
+      description: Title field for the card
+      preview: Can digital technology be an equality machine?
+  settings:
+    isvideo:
+      type: boolean
+      label: Is a Video
+      description: Whether the card should display a video icon (for Score card)
+      preview: false
+    size:
+      type: select
+      label: size
+      description: Sets the size of the card. If not set, the card will appear as `narrow`.
+      required: false
+      preview: "narrow"
+      options:
+        narrow: narrow
+        wide: wide
+        fluid: fluid
+        simple: simple
+    theme:
+      type: select
+      label: Theme
+      description: Sets the card to appear as either light or dark. If not set, the card will inherit the theme of its parent.
+      required: false
+      preview: "light"
+      options:
+        dark: Dark
+        light: Light
+    titleLevel:
+      type: select
+      label: Title Element
+      description: HTML element used for the title
+      required: false
+      options:
+        p: p
+        h1: h1
+        h2: h2
+        h3: h3
+        h4: h4
+        h5: h5

package/dist/components/card_text/card_text.component.yml

@@ -25,11 +25,10 @@ textcard:
     profile:
       type: object
       label: Profile
-      description: Optional profile of the author who created the content
+      description: Optional profile of the author who created the content. Uses only the `avatar` and `name` properties from the  `Profile` component.
       preview:
         avatar: "/images/ilo-dg.jpg"
         name: "Gilbert F. Houngbo"
-        role: "ILO Director-General"
     title:
       type: string
       label: Title

package/dist/components/card_text/card_text.twig

@@ -1,9 +1,7 @@
-{#
-  FEATURE CARD COMPONENT
-#}
+{# card_text.twig #}
 
 <div class="ilo--card--wrapper">
-	<div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__action ilo--card__theme__{{theme}}">
+	<div class="ilo--card ilo--card__type__text ilo--card__size__{{ size }} ilo--card__theme__{{theme}}">
 		<a class="ilo--card--link" href="{{link}}" title="{{title}}">
 			<span class="ilo--card--link--text">{{title}}</span>
 		</a>
@@ -21,11 +19,9 @@
 				{% if profile %}
 					{% include "@components/profile/profile.twig" with {
             avatar: profile.avatar,
-            description: profile.description,
-            link: profile.link,
             name: profile.name,
-            role: profile.role,
             prefix: prefix,
+						size: "small",
             theme: theme,
           } only %}
 				{% endif %}

package/dist/components/card_text/card_text.wingsuit.yml

@@ -25,11 +25,10 @@ textcard:
     profile:
       type: object
       label: Profile
-      description: Optional profile of the author who created the content
+      description: Optional profile of the author who created the content. Uses only the `avatar` and `name` properties from the  `Profile` component.
       preview:
         avatar: "/images/ilo-dg.jpg"
         name: "Gilbert F. Houngbo"
-        role: "ILO Director-General"
     title:
       type: string
       label: Title

package/dist/components/icon/icon.behavior.js

@@ -920,7 +920,7 @@
     UploadGlyph: index
   });
 
-  const SIZING=[16,20,24,32];const DEFAULT_SIZE=24;const SVG_NS="http://www.w3.org/2000/svg";const PATH_NS="http://www.w3.org/2000/path";class Icon{constructor(element){this.element=element;this.init();}init(){const isValid=this.validate();if(!isValid){return}const svg=this.build();this.prepare(svg);this.element.outerHTML=svg.outerHTML;return this}validate(){let{name,size}=this.element.dataset;if(!SIZING.includes(+size)){console.warn(`Icon size ${size} is not supported. Defaulting to ${DEFAULT_SIZE}px`);size=DEFAULT_SIZE;}if(!name){console.warn("Icon name is required");return false}const reference=this.getIconConfig(name,size);if(!reference){console.warn(`Icon "${name}" not found`);return false}return true}build(){const{name,size,color}=this.element.dataset;const config=this.getIconConfig(name,size);const element=document.createElementNS(SVG_NS,"svg");for(const[key,value]of Object.entries(config.attrs)){element.setAttribute(key,value);}if(color){element.setAttribute("fill",color);}for(const item of config.content){const child=document.createElementNS(PATH_NS,item.elem);for(let[key,value]of Object.entries(item.attrs)){if(key==="fill"&&color){value=color;}child.setAttribute(key,value);}element.appendChild(child);}return element}getIconConfig(name,size){const nameUpper=name.split("_").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join("");return Icons[`${nameUpper}${size}`]}prepare(icon){icon.setAttribute("class",this.element.getAttribute("class"));icon.setAttribute("data-js-processed",true);}}
+  const SIZING=[16,20,24,32];const DEFAULT_SIZE=24;const SVG_NS="http://www.w3.org/2000/svg";const PATH_NS="http://www.w3.org/2000/path";class Icon{constructor(element){this.element=element;this.init();}init(){const isValid=this.validate();if(!isValid){return}const svg=this.build();this.prepare(svg);this.element.outerHTML=svg.outerHTML;return this}validate(){let{name,size}=this.element.dataset;if(!SIZING.includes(+size)){console.warn(`Icon size ${size} is not supported. Defaulting to ${DEFAULT_SIZE}px`);size=DEFAULT_SIZE;this.element.dataset.size=size;}if(!name){console.warn("Icon name is required");return false}const reference=this.getIconConfig(name,size);if(!reference){console.warn(`Icon "${name}" not found`);return false}return true}build(){const{name,size,color}=this.element.dataset;const config=this.getIconConfig(name,size);const element=document.createElementNS(SVG_NS,"svg");for(const[key,value]of Object.entries(config.attrs)){element.setAttribute(key,value);}if(color){element.setAttribute("fill",color);}for(const item of config.content){const child=document.createElementNS(PATH_NS,item.elem);for(let[key,value]of Object.entries(item.attrs)){if(key==="fill"&&color){value=color;}child.setAttribute(key,value);}element.appendChild(child);}return element}getIconConfig(name,size){const nameUpper=name.split("_").map(part=>part.charAt(0).toUpperCase()+part.slice(1)).join("");return Icons[`${nameUpper}${size}`]}prepare(icon){icon.setAttribute("class",this.element.getAttribute("class"));icon.setAttribute("data-js-processed",true);}}
 
   Drupal.behaviors.icon={attach(){Array.prototype.forEach.call(document.querySelectorAll(`[data-loadcomponent="Icon"]`),element=>{if(!element.dataset.jsProcessed){new Icon(element);element.dataset.jsProcessed=true;}});}};
 

package/dist/components/icon/icon.twig

@@ -1 +1 @@
-<svg class="ilo--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon"></svg>
+<svg class="ilo--icon" data-name="{{name}}" data-size="{{size}}" data-color="{{color}}" data-loadcomponent="Icon" aria-hidden="true"></svg>

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

@@ -0,0 +1,8 @@
+(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)}}
+
+  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;}});}};
+
+})();