@ilo-org/twig 0.17.0 → 0.17.1

package/dist/components/pagination/pagination.twig

@@ -0,0 +1,49 @@
+{#
+  PAGINATION COMPONENT
+#}
+<div class="ilo--pagination icon icon--{{type}}">
+  <div class="ilo--pagination--previous-set">
+    <a
+      class="ilo--pagination--first-page ilo--pagination--link {% if currentPage == 0 %}ilo--pagination--disable{% endif %}"
+      href="{{ firstPageUrl }}"
+      title="{{ firstPageTitle }}"
+    >
+      {{ firstPageTitle }}
+    </a>
+
+    <a
+      class="ilo--pagination--prev-page ilo--pagination--link {% if currentPage == 0 %}ilo--pagination--disable{% endif %}"
+      href="{{ prevPageUrl }}"
+      title="{{ prevPageTitle }}"
+    >
+      {{ prevPageTitle }}
+    </a>
+  </div>
+
+  <p class="ilo--pagination--page">
+    {% set currentPageZeroIndex = currentPage * 1 %}
+    {% set currentPageIndex = currentPageZeroIndex + 1 %}
+
+    <span>{{currentPageIndex}}</span> 
+    <span>{{pageCountPreposition}}</span>
+    <span>{{totalPages}}</span>
+  </p>
+
+  <div class="ilo--next-set">
+    <a
+      class="ilo--pagination--next-page ilo--pagination--link {% if currentPageIndex == totalPages %}ilo--pagination--disable{% endif %}"
+      href="{{ nextPageUrl }}"
+      title="{{ nextPageTitle }}"
+    >
+      {{ nextPageTitle }}
+    </a>
+
+    <a
+      class="ilo--pagination--last-page ilo--pagination--link {% if currentPageIndex == totalPages %}ilo--pagination--disable{% endif %}"
+      href="{{ lastPageUrl }}"
+      title="{{ lastPageTitle }}"
+    >
+      {{ lastPageTitle }}
+    </a>
+  </div>
+</div>

package/dist/components/pagination/pagination.wingsuit.yml

@@ -0,0 +1,75 @@
+pagination:
+  namespace: Components/Navigation
+  use: "@components/pagination/pagination.twig"
+  label: Pagination
+  description: The Pagination component breaks content into pages for easier navigation with intuitive controls like 'Previous' and 'Next' buttons.
+  fields:
+    currentPage:
+      type: numeric
+      label: Current page
+      description: current page number that the user is on, zero-indexed
+      required: true
+      preview: 0
+      escape: false
+    firstPageUrl:
+      type: string
+      label: First Page link
+      description: Link to the first page
+      required: true
+      preview: "http://www.google.com?s=first"
+    firstPageTitle:
+      type: string
+      label: First Page Title
+      description: Title label for the first page
+      required: true
+      preview: "First"
+    lastPageUrl:
+      type: string
+      label: Last Page link
+      description: Link to the last page
+      required: true
+      preview: "http://www.google.com?s=last"
+    lastPageTitle:
+      type: string
+      label: Last Page Title
+      description: Title label for the last page
+      required: true
+      preview: "Last"
+    nextPageUrl:
+      type: string
+      label: Next Page link
+      description: Link to the next page
+      required: true
+      preview: "http://www.google.com?s=next"
+    nextPageTitle:
+      type: string
+      label: Next Page Title
+      description: Title label for the next page
+      required: true
+      preview: "Next"
+    prevPageUrl:
+      type: string
+      label: Prev Page link
+      description: Link to the prev page
+      required: true
+      preview: "http://www.google.com?s=prev"
+    prevPageTitle:
+      type: string
+      label: Prev Page Title
+      description: Title label for the prev page
+      required: true
+      preview: "Previous"
+    pageCountPreposition:
+      type: string
+      label: Page Count Preposition
+      description: Linking word for the page count
+      required: true
+      preview: "of"
+    totalPages:
+      type: numeric
+      label: Total Pages
+      description: The number of total pages
+      required: true
+      preview: 8
+      escape: false
+  visibility: storybook

package/dist/components/picture/picture.twig

@@ -0,0 +1,21 @@
+{#
+  PICTURE COMPONENT
+#}
+{% if image.url is iterable %}
+  <picture>
+    {% for img in image.url|reverse %}
+      {% if loop.length == 1 or loop.last == false %}
+        {% if img.breakpoint matches '/^\\d+$/' %}
+          <source srcset="{{img.src}}" media="(min-width: {{img.breakpoint}}px)">
+        {% else %}
+          <source srcset="{{img.src}}" media="{{img.breakpoint}}">
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+    <img class="ilo--{{class}}--picture" src="{{image.url|reverse|last.src}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+  </picture>
+  {% else %}
+  <picture>
+    <img class="ilo--{{class}}--picture" src="{{image.url}}" alt="{{image.alt}}" {% if image.loading %} loading="{{ image.loading }}" {% endif %}>
+  </picture>
+{% endif %}

package/dist/components/polyfill/polyfill.twig

@@ -0,0 +1,10 @@
+{#
+  POLYFILL COMPONENT
+
+  This component is specifically to make this polyfill work correctly in Wingsuit. To use this in the context of Drupal, Wordpress, etc, consider using the approach documented at https://github.com/GoogleChromeLabs/container-query-polyfill
+#}
+<script>
+  if (!("container" in document.documentElement.style)) {
+    import("https://unpkg.com/container-query-polyfill@^0.2.0");
+  }
+</script>

package/dist/components/profile/profile.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--profile{display:grid;grid-template-columns:min-content 1fr;grid-template-rows:minmax(64px,auto) auto;max-width:18.3815648446rem;width:100%}.ilo--profile--avatar{grid-row:1;border-radius:50%}.ilo--profile figcaption{grid-row:1;grid-column-end:-1}.ilo--profile--figcaption--content,.ilo--profile figcaption{box-sizing:border-box;display:flex;flex-flow:column;justify-content:center;align-items:start}.ilo--profile--figcaption--content{width:100%;position:relative}.ilo--profile--figcaption--content:after{content:"";position:absolute;bottom:-12px;width:100%;border-bottom:2px solid #edf0f2}.ilo--profile--name{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif}.ilo--profile--description,.ilo--profile--role{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif}.ilo--profile--description{grid-row:2;grid-column:1/-1}.ilo--profile--link{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;grid-column:1/-1}.ilo--profile--link a{text-decoration:none;color:#230050;display:inline-block}.ilo--profile--link--label{display:flex;flex-flow:row nowrap;align-items:center}.ilo--profile--link--label:after{position:relative;bottom:.0535905681rem;height:1.2861736334rem;width:1.2861736334rem;margin-inline-start:.4287245445rem;content:"";background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--profile--link a:focus .ilo--profile--link--label,.ilo--profile--link a:hover .ilo--profile--link--label{color:#1e2dbe;outline:0}.ilo--profile--link a:focus .ilo--profile--link--label:after,.ilo--profile--link a:hover .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--profile--link a:focus .ilo--profile--link--label:after,[dir=rtl] .ilo--profile--link a:hover .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--profile__theme__dark{color:#edf0f2}.ilo--profile__theme__dark .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--profile__theme__dark .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EDF0F2' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--profile__theme__dark .ilo--profile--link a{color:#edf0f2}.ilo--profile__theme__dark .ilo--profile--link a:focus .ilo--profile--link--label,.ilo--profile__theme__dark .ilo--profile--link a:hover .ilo--profile--link--label{color:#05d2d2;outline:0}.ilo--profile__theme__dark .ilo--profile--link a:focus .ilo--profile--link--label:after,.ilo--profile__theme__dark .ilo--profile--link a:hover .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2305D2D2' d='M8.638 19.996l-.988-.988L14.657 12 7.65 4.992l.988-.989 7.505 7.5a.702.702 0 0 1 0 .995l-7.505 7.498z'/%3E%3C/svg%3E")}[dir=rtl] .ilo--profile__theme__dark .ilo--profile--link a:focus .ilo--profile--link--label:after,[dir=rtl] .ilo--profile__theme__dark .ilo--profile--link a:hover .ilo--profile--link--label:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2305D2D2' d='M7.9 12.5l-.2-.2c0-.1-.1-.2-.1-.3s0-.2.1-.3c0-.1.1-.2.2-.2L15.4 4l1 1-7 7 7 7-1 1-7.5-7.5z'/%3E%3C/svg%3E")}.ilo--profile__size__large .ilo--profile--avatar{width:3.4297963558rem;height:3.4297963558rem;margin-inline-end:.857449089rem}.ilo--profile__size__large .ilo--profile--name{font-weight:700;font-size:16px;letter-spacing:normal;line-height:23.36px}.ilo--profile__size__large .ilo--profile--description,.ilo--profile__size__large .ilo--profile--role{font-size:14.93px;letter-spacing:normal;line-height:20.3px}.ilo--profile__size__large .ilo--profile--description{padding-block-start:1.0718113612rem}.ilo--profile__size__large .ilo--profile--link{font-size:16px;letter-spacing:normal;line-height:23.36px;padding-block-start:1.2861736334rem}

package/dist/components/profile/profile.twig

@@ -0,0 +1,26 @@
+{# profile.twig #}
+
+{% set defaultAlt = "Photo of " ~ name %}
+<figure class="ilo--profile ilo--profile__theme__{{theme|default("light")}} ilo--profile__size__{{size|default("large")}}">
+	{% if avatar %}
+		<img class="ilo--profile--avatar" src="{{avatar}}" alt="{{alt|default(defaultAlt)}}">
+	{% endif %}
+	<figcaption>
+		<div class="ilo--profile--figcaption--content">
+			<div class="ilo--profile--name">{{name}}</div>
+			{% if role %}
+				<div class="ilo--profile--role">{{role}}</div>
+			{% endif %}
+		</div>
+	</figcaption>
+	{% if description %}
+		<p class="ilo--profile--description">{{description}}</p>
+	{% endif %}
+	{% if link and link.url and link.label %}
+		<div class="ilo--profile--link">
+			<a href={{link.url}} target="__blank" rel="noopener noreferrer">
+				<span class="ilo--profile--link--label">{{link.label}}</span>
+			</a>
+		</div>
+	{% endif %}
+</figure>

package/dist/components/profile/profile.wingsuit.yml

@@ -0,0 +1,46 @@
+profile:
+  namespace: Components/Content
+  use: "@components/profile/profile.twig"
+  label: Profile
+  description: The Profile component is used to display information about a person.
+  fields:
+    avatar:
+      type: string
+      label: Avatar
+      description: The avatar for the profile
+      required: true
+      preview: "/images/ilo-dg.jpg"
+    description:
+      type: string
+      label: Description
+      description: An optional plain-text description (e.g. a short bio)
+      preview: "Gilbert F. Houngbo was elected as the ILO’s 11th Director-General by the organization’s Governing Body in March 2022. "
+    link:
+      type: object
+      label: Link
+      description: An optional url and label for a link associated with the profile
+      preview:
+        label: "Learn more"
+        url: "https://www.ilo.org"
+    name:
+      type: string
+      label: Name
+      description: The name of the person associated with the profile
+      preview: "Gilbert F. Houngbo"
+      required: true
+    role:
+      type: string
+      label: Role
+      description: An optional plain-text field indicating the person's role in the organization
+      preview: "ILO Director-General"
+  settings:
+    theme:
+      type: select
+      label: Theme
+      description: The theme for the profile styles
+      required: false
+      options:
+        light: Light
+        dark: Dark
+      preview: "light"
+  visibility: storybook

package/dist/components/promocard/promocard.css

@@ -0,0 +1 @@
+.ilo--card--wrapper__type__promo{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__narrow{--max-width:18.3815648446rem}@media screen and (max-width:609px){.ilo--card--wrapper__type__promo__size__narrow{--max-width:100%}}.ilo--card--wrapper__type__promo__size__standard{--max-width:33.9764201501rem}.ilo--card--wrapper__type__promo__size__wide{--max-width:49.3033226152rem}.ilo--card--wrapper__type__promo__size__fluid{--max-width:100%}.ilo--card__type__promo{padding:2.1436227224rem 1.2861736334rem;width:100%}@media screen and (min-width:610px){.ilo--card__type__promo{padding:2.5723472669rem}}@media screen and (min-width:1024px){.ilo--card__type__promo{padding:3.4297963558rem 3.8585209003rem}}.ilo--card__type__promo .ilo--card--title{margin-bottom:.6430868167rem}.ilo--card__type__promo.ilo--card__size__standard{padding:2.5723472669rem}.ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 87px) 0,100% 48px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__standard.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 87px) 0,100% 48px,100% 100%,0 100%);clip-path:polygon(87px 0,100% 0,100% 100%,0 100%,0 48px)}.ilo--card__type__promo.ilo--card__size__fluid,.ilo--card__type__promo.ilo--card__size__wide{padding:3.4297963558rem 3.8585209003rem}.ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut,.ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 116px) 0,100% 64px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__fluid.ilo--card__cornercut,[dir=rtl] .ilo--card__type__promo.ilo--card__size__wide.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 116px) 0,100% 64px,100% 100%,0 100%);clip-path:polygon(116px 0,100% 0,100% 100%,0 100%,0 64px)}.ilo--card__type__promo.ilo--card__size__narrow{padding:2.1436227224rem 1.2861736334rem}.ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}[dir=rtl] .ilo--card__type__promo.ilo--card__size__narrow.ilo--card__cornercut{clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px left,100% 100%,0 100%)}.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px;margin-bottom:.4287245445rem}@media screen and (min-width:610px){.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--title{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}}.ilo--card__type__promo.ilo--card__size__narrow .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px}.ilo--card__type__promo.ilo--card__theme__light:not(:hover) .ilo--card--title{color:#2d2d2d;transition-property:color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--card__type__promo .ilo--card--title{font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}@media screen and (min-width:610px){.ilo--card__type__promo .ilo--card--title{font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}}.ilo--card__type__promo .ilo--card--intro{font-size:16px;letter-spacing:normal;line-height:23.36px;margin-bottom:1.7148981779rem}@media screen and (min-width:610px){.ilo--card__type__promo .ilo--card--intro{font-size:18.66px;letter-spacing:normal;line-height:27.24px}}

package/dist/components/radio/radio.css

@@ -0,0 +1 @@
+.ilo--radio{border:none;display:grid;margin:0;position:relative;place-content:center}.ilo--radio,.ilo--radio input{height:1.2861736334rem;width:1.2861736334rem;cursor:pointer}.ilo--radio input{appearance:none;border-radius:50%}.ilo--radio--control:before{border:.2143622722rem solid #b8c4cc;border-radius:50%;height:.9646302251rem;left:.1607717042rem;top:.1607717042rem;width:.9646302251rem;z-index:1}.ilo--radio--control:after,.ilo--radio--control:before{content:"";background-color:#b8c4cc;position:absolute;pointer-events:none}.ilo--radio--control:after{border-radius:50%;height:1.2861736334rem;left:0;top:0;width:1.2861736334rem;z-index:0}input:checked+.ilo--radio--control:before{background-color:#ebf5fd;border-color:#230050}input:checked+.ilo--radio--control:after{background-color:#230050}input:focus+.ilo--radio--control:after{background-color:#ffcd2d}input:disabled+.ilo--radio--control:after,input:disabled+.ilo--radio--control:before{opacity:.45}.ilo--radio__error .ilo--radio--control:after,input:invalid+.ilo--radio--control:after{background-color:#fa3c4b}

package/dist/components/radio/radio.twig

@@ -0,0 +1,23 @@
+{# checkbox.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = (prefix is defined ? prefix ~ "--radio" : "--radio") %}
+{% set controlClass = baseClass ~ "--control" %}
+
+{% set errorClass = baseClass ~ "__error" %}
+
+{% set radioClasses = [baseClass, class] %}
+
+{% if error is defined and error %}
+	{% set radioClasses = radioClasses|merge([errorClass]) %}
+{% endif %}
+
+
+{% block formfield %}
+	<div class="{{ radioClasses|join(" ") }}">
+		<input id="{{ id is defined ? id : name }}" name="{{ name }}" type="radio" {% if defaultChecked is defined and defaultChecked %} defaultchecked {% endif %} {% if checked is defined and checked %} checked {% endif %} {% if ariaDescribedBy is defined %} aria-describedby="{{ ariaDescribedBy }}" {% endif %} {% if checked is defined and checked %} checked {% endif %} value="{{ value }}" {% if disabled is defined and disabled %} disabled {% endif %} {% if required is defined and required %} required {% endif %}/>
+		<span class="{{ controlClass }}"></span>
+	</div>
+
+{% endblock %}

package/dist/components/radio/radio.wingsuit.yml

@@ -0,0 +1,83 @@
+radio:
+  namespace: Components/Forms
+  use: "@components/radio/radio.twig"
+  label: Radio
+  description: The Radio component provides users with a switch they can use to
+    turn a single option on or off or alternate between multiple
+    different states.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+      preview: "Do you agree to these terms?"
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the input.
+    name:
+      type: text
+      label: Name
+      description: The name of the input.
+    class:
+      type: text
+      label: Class
+      description: The class of the form field.
+      preview: radio
+      default: ""
+    value:
+      type: text
+      label: Value
+      description: The value of the input.
+      preview: "1"
+  settings:
+    defaultSelected:
+      type: boolean
+      label: Default Selected
+      description: The default selected state of the form element.
+      preview: false
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "end"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "small"
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the form element.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the form element.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/readmore/readmore.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}var n="click",i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.prefix=this.element.dataset.prefix,this.openclass="".concat(this.prefix,"--read-more--open"),this.buttonopenclass="".concat(this.prefix,"--read-more--button--open"),this.fulltext=this.element.dataset.fulltext,this.excerpt=this.element.dataset.excerpt,this.buttonlabel={closed:this.element.dataset.closed,opened:this.element.dataset.opened},this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.ReadMoreButton=this.element.querySelector(".".concat(this.prefix,"--read-more--button")),this.RichText=this.element.querySelector(".".concat(this.prefix,"--richtext")),this}},{key:"setupHandlers",value:function(){return this.onClick=this.onClick.bind(this),this}},{key:"enable",value:function(){var e=this;return this.ReadMoreButton.addEventListener(n,(function(){return e.onClick()})),this}},{key:"onClick",value:function(){return this.element.classList.contains(this.openclass)?(this.RichText.innerHTML=this.excerpt,this.ReadMoreButton.innerHTML=this.buttonlabel.closed):(this.RichText.innerHTML=this.fulltext,this.ReadMoreButton.innerHTML=this.buttonlabel.opened),this.element.classList.toggle(this.openclass),this.ReadMoreButton.classList.toggle(this.buttonopenclass),this}}])&&t(e.prototype,i),r&&t(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,i,r}();Drupal.behaviors.readmore={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="ReadMore"]'),(function(e){e.dataset.jsProcessed||(new i(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/readmore/readmore.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--read-more--button{background:transparent;border:none;border-top:2px solid #ebf5fd;color:#230050;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;height:3.0010718114rem;margin-top:1.7148981779rem;padding:.857449089rem 1.5005359057rem .857449089rem 0;position:relative;text-align:left;width:auto;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--read-more--button:after{background-repeat:no-repeat;content:"";display:inline-block;height:1.2861736334rem;position:absolute;right:.1071811361rem;top:50%;transform:translateY(-50%);transform-origin:center center;width:1.2861736334rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E")}.ilo--read-more--button:hover{background:#ebf5fd;border-top:2px solid #1e2dbe;color:#1e2dbe;cursor:pointer;transition-property:color,background-color,border-color;transition-duration:.15s;transition-timing-function:ease-out}.ilo--read-more--button:hover:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M12 16.78l-8-8 1.455-1.56L12 13.767l6.546-6.545L20 8.779l-8 8z'/%3E%3C/svg%3E")}.ilo--read-more--button--open:after{transform:translateY(-50%) rotateX(180deg);transform-origin:center center}

package/dist/components/readmore/readmore.twig

@@ -0,0 +1,16 @@
+{#
+  READ MORE COMPONENT
+#}
+{% set content = excerpt %}
+{% set btnlabel = buttonlabel.closed %}
+{% if openatstart is defined and openatstart == 'true' %}
+  {% set content = fulltext %}
+  {% set btnlabel = buttonlabel.opened %}
+{% endif %}
+
+<div class="ilo--read-more" data-excerpt="{{excerpt|escape}}" data-fulltext="{{fulltext|escape}}" data-closed="{{buttonlabel.closed}}" data-opened="{{buttonlabel.opened}}" data-loadcomponent="ReadMore" data-prefix="ilo">
+  {% include "@components/richtext/richtext.twig" with {
+    content: content,
+  } %}
+  <button class="ilo--read-more--button">{{btnlabel}}</button>
+</div>

package/dist/components/readmore/readmore.wingsuit.yml

@@ -0,0 +1,37 @@
+readmore:
+  namespace: Components/User Interface
+  use: "@components/readmore/readmore.twig"
+  label: Read More
+  description: A component for displaying rich text as entered in a WYSIWYG editor.
+  fields:
+    buttonlabel:
+      type: object
+      label: Button Label
+      description: labels for the two states of button
+      required: true
+      preview:
+        closed: Read More
+        opened: Close
+    excerpt:
+      type: string
+      label: Excerpt
+      description: HTML content
+      preview: "<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p>"
+      required: true
+    fulltext:
+      type: string
+      label: Full Text
+      description: HTML content
+      preview: "<p>Underlying the ILO’s work is the importance of cooperation between governments and employers’ and workers’ organizations in fostering social and economic progress. The ILO aims to ensure that it serves the needs of working women and men by bringing together governments, employers and workers to set labour standards, develop policies and devise programmes.</p> <p>The very structure of the ILO, where workers and employers together have an equal voice with governments in its deliberations, shows social dialogue in action. It ensures that the views of the social partners are closely reflected in ILO labour standards, policies and programmes.</p> <p>The ILO encourages this tripartism within its constituents - employers , workers and member States , by promoting a social dialogue between trade unions and employers in formulating, and where appropriate, implementing national policy on social, economic, and many other issues.</p>."
+      required: true
+  settings:
+    openatstart:
+      type: select
+      label: Open At Start
+      description: should the read more be open at page load?
+      options:
+        "true": "true"
+        "false": "false"
+      preview: "false"
+      required: true
+  visibility: storybook

package/dist/components/richtext/richtext.css

@@ -0,0 +1 @@
+@charset "UTF-8";.ilo--richtext{font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:400;font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext a{background:transparent;color:#230050;font-size:inherit;font-weight:inherit;line-height:inherit;text-decoration:underline;text-underline-offset:.3215434084rem;text-decoration-thickness:.0803858521rem;padding-bottom:.2143622722rem}.ilo--richtext a:visited{background:transparent;color:#960a55}.ilo--richtext a:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a:active,.ilo--richtext a:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--dark{background:transparent;color:#edf0f2}.ilo--richtext a--dark:visited{background:transparent;color:#b8c4cc}.ilo--richtext a--dark:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--dark:active,.ilo--richtext a--dark:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext a--footer{font-size:11.94px;letter-spacing:normal;line-height:16.24px;background:transparent;color:#6d6d6d}.ilo--richtext a--footer:visited{background:transparent;color:#960a55}.ilo--richtext a--footer:hover{background:#fff;color:#1e2dbe;text-decoration-thickness:3px}.ilo--richtext a--footer:active,.ilo--richtext a--footer:focus{background:#ffcd2d;color:#230050;text-decoration-thickness:3px}.ilo--richtext img{width:100%}.ilo--richtext p{margin-bottom:1.2861736334rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:2.7675813769rem}.ilo--richtext article,.ilo--richtext figure,.ilo--richtext iframe{margin-bottom:3.0010718114rem}.ilo--richtext figure{width:100%}.ilo--richtext figcaption{border-left:3px solid #b8c4cc;color:#6d6d6d;font-weight:400;margin-top:.857449089rem;padding-left:.4287245445rem;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext em,.ilo--richtext i{font-style:italic}.ilo--richtext b,.ilo--richtext strong{font-weight:700}.ilo--richtext hr{background-color:#edf0f2;border:none;height:.2143622722rem;margin-bottom:3.0010718114rem}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;font-weight:700;margin-top:3.0010718114rem}.ilo--richtext h1{margin-bottom:.6830690456rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h2{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h3{margin-bottom:.5741425509rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h4{margin-bottom:.7188906752rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext h5{margin-bottom:.8175044291rem;font-size:16px;letter-spacing:-.02em;line-height:21.6px}.ilo--richtext blockquote{background-color:#edf0f2;background-position:100% 0;background-repeat:no-repeat;background-size:3.8585209003rem 2.1436227224rem;display:block;font-family:Overpass,Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin:1.2861736334rem 0 2.1436227224rem;padding:4.0728831726rem 0 1.9292604502rem 1.7148981779rem;position:relative;width:fit-content;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%)}.ilo--richtext blockquote p{color:#960a55;font-weight:300;margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:29.16px;letter-spacing:-.035em;line-height:36.45px}.ilo--richtext blockquote p:after{background-repeat:no-repeat;bottom:0;content:"";display:inline-block;height:1.0718113612rem;position:absolute;right:0;transform:scaleX(-1);width:1.4201500536rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext blockquote cite{color:#6d6d6d;font-weight:400;font-size:14.93px;letter-spacing:-.02em;line-height:20.16px}.ilo--richtext blockquote:before{background-repeat:no-repeat;content:"";display:inline-block;height:2.1436227224rem;left:0;position:absolute;width:2.8403001072rem;top:0;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65 48'%3E%3Cpath fill='%23960A55' d='M38.688 0v18.963c0 14.634 9.574 26.372 23.053 29.037l2.564-5.515c-6.238-2.357-10.251-11.145-10.251-16.821h10.251V0H38.688zM0 0v18.963C0 33.597 9.62 45.343 23.107 48l2.557-5.515c-6.255-2.357-10.267-11.152-10.267-16.821h10.22V0H0z'/%3E%3C/svg%3E")}.ilo--richtext ol{counter-reset:a}.ilo--richtext ol li{counter-increment:a;display:table}.ilo--richtext ol li:before{content:counter(a) ".";display:table-cell;text-align:right;padding-inline-end:.4287245445rem}.ilo--richtext ul li{position:relative;padding-inline-start:1.2861736334rem}.ilo--richtext ul li:before{content:"";position:absolute;height:.7502679528rem;width:.6430868167rem;top:.3215434084rem;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 12.4'%3E%3Cpath fill='%23B8C4CC' d='M10.8 6.4L0 .4v12l10.8-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;left:0;right:0}[dir=rtl] .ilo--richtext ul li:before{transform:rotate(180deg)}@media screen and (min-width:610px){.ilo--richtext ul li:before{top:.3751339764rem}}.ilo--richtext li{font-size:16px;letter-spacing:normal;line-height:23.36px;font-family:Noto Sans,Noto Sans CJK JP,Yu Gothic,Hiragino Sans,TakaoPGothic,PingFang SC,Microsoft YaHei,微软雅黑,sans-serif;margin-bottom:.857449089rem}.ilo--richtext li b,.ilo--richtext li strong{font-weight:700;letter-spacing:-.02em}@media screen and (min-width:610px){.ilo--richtext,.ilo--richtext li{font-size:18.66px;letter-spacing:normal;line-height:27.24px}.ilo--richtext h1,.ilo--richtext h2,.ilo--richtext h3,.ilo--richtext h4,.ilo--richtext h5{margin-top:3.4297963558rem}.ilo--richtext h1{margin-bottom:.8520418857rem;font-size:44px;letter-spacing:-.035em;line-height:50.6px}.ilo--richtext h2{margin-bottom:1.1117935901rem;font-size:36px;letter-spacing:-.035em;line-height:43.2px}.ilo--richtext h3{margin-bottom:.8565309039rem;font-size:28px;letter-spacing:-.035em;line-height:35px}.ilo--richtext h4{margin-bottom:1.0028670954rem;font-size:24px;letter-spacing:-.035em;line-height:30px}.ilo--richtext h5{margin-bottom:1.1476152197rem;font-size:18px;letter-spacing:-.02em;line-height:23.4px}.ilo--richtext p{margin-bottom:.9381095829rem}.ilo--richtext blockquote+hr,.ilo--richtext dl+hr,.ilo--richtext dl+img,.ilo--richtext ol+hr,.ilo--richtext ol+img,.ilo--richtext p+blockquote,.ilo--richtext p+figure,.ilo--richtext p+hr,.ilo--richtext p+iframe,.ilo--richtext p+img,.ilo--richtext ul+hr,.ilo--richtext ul+img{margin-top:3.0817323053rem}.ilo--richtext hr{margin-bottom:4.0728831726rem}.ilo--richtext figure{width:100%;margin-bottom:3.0817323053rem}.ilo--richtext blockquote{background-size:4.6087888532rem 2.5723472669rem;margin:1.7148981779rem 0 4.0728831726rem;padding:3.4297963558rem 0 2.5723472669rem 2.5723472669rem;clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%)}.ilo--richtext blockquote p{margin-bottom:1.2861736334rem;padding:0 2.5723472669rem 0 0;position:relative;font-size:36.45px;letter-spacing:-.035em;line-height:43.74px}.ilo--richtext blockquote p:after{height:1.2861736334rem;width:1.7148981779rem}.ilo--richtext blockquote:before{height:2.5723472669rem;width:3.4297963558rem}}[dir=rtl] .ilo--richtext figcaption{border-left:none;border-right:3px solid #b8c4cc;padding-left:0;padding-right:.4287245445rem}[dir=rtl] .ilo--richtext blockquote{background-position:-1px -1px;padding:3.0010718114rem 1.7148981779rem 1.9292604502rem 0;clip-path:polygon(0 0,calc(100% - 72px) 0,100% 40px,100% 100%,0 100%);clip-path:polygon(72px 0,100% 0,100% 100%,0 100%,0 40px)}[dir=rtl] .ilo--richtext blockquote p{padding:0 0 0 2.5723472669rem}[dir=rtl] .ilo--richtext blockquote p:after{left:0;right:auto;transform:scaleX(1)}[dir=rtl] .ilo--richtext blockquote:before{left:auto;right:0;transform:scaleX(-1)}@media screen and (min-width:610px){[dir=rtl] .ilo--richtext blockquote{padding:3.2154340836rem 2.5723472669rem 2.5723472669rem 0}[dir=rtl] .ilo--richtext blockquote blockquote{clip-path:polygon(0 0,calc(100% - 86px) 0,100% 48px,100% 100%,0 100%);clip-path:polygon(86px 0,100% 0,100% 100%,0 100%,0 48px)}}

package/dist/components/richtext/richtext.twig

@@ -0,0 +1,6 @@
+{#
+  RICH TEXT COMPONENT
+#}
+<div class="ilo--richtext">
+  {{content}}
+</div>

package/dist/components/richtext/richtext.wingsuit.yml

@@ -0,0 +1,13 @@
+richtext:
+  namespace: Components/Content
+  use: "@components/richtext/richtext.twig"
+  label: Rich Text
+  description: A component for displaying rich text as entered in a WYSIWYG editor.
+  fields:
+    content:
+      type: string
+      label: Content
+      description: HTML content
+      preview: "<h2>International Labour Organization</h2> <p>The <b>International Labour Organization</b> (<b>ILO</b>) is a <a href='https://www.un.org'>United Nations</a> agency whose mandate is to advance social and economic justice by setting international labour standards. Founded in October 1919 under the League of Nations, it is the first and oldest specialised agency of the UN. The ILO has 187 member states: 186 out of 193 UN member states plus the Cook Islands.</p> <p>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</p> <figure><img alt='placeholder image' class='right' src='/images/ilo-headquarters.jpg'><figcaption>The ILO's headquarters in Geneva, Switzerland. ©Steiner SA</figcaption></figure> <h3>ILO Constitution</h3> <p>The driving forces for the ILO's creation arose from security, humanitarian, political and economic considerations.</p> <blockquote> <p>The fundamental ideas that forged the ILO one hundred and three years ago still underpin the global pledge to leave no one behind.</p> <cite>ILO Director-General Gilbert F. Houngbo</cite> </blockquote> Reflecting these ideas, the Preamble of the ILO Constitution states:</p> <ol> <li>Whereas universal and lasting peace can be established only if it is based upon social justice;</li> <li>And whereas conditions of labour exist involving such injustice, hardship and privation to large numbers of people as to produce unrest so great that the peace and harmony of the world are imperilled; and an improvement of those conditions is urgently required;</li> <li>Whereas also the failure of any nation to adopt humane conditions of labour is an obstacle in the way of other nations which desire to improve the conditions in their own countries.</li> </ol>"
+      required: true
+  visibility: storybook

package/dist/components/search/search.behavior.js

@@ -0,0 +1 @@
+!function(e){"function"==typeof define&&define.amd?define(e):e()}((function(){"use strict";function e(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var i=n.call(e,t||"default");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}function t(t,n){for(var i=0;i<n.length;i++){var r=n[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,e(r.key),r)}}var n="click",i=function(){return e=function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.element=t,this.multipleExpanded=!1,this.init()},(i=[{key:"init",value:function(){return this.cacheDomReferences().setupHandlers().enable(),this}},{key:"cacheDomReferences",value:function(){return this.searchButton=this.element.querySelector(".ilo--searchfield--clear-button"),this.searchInputField=this.element.querySelector(".ilo--input"),this}},{key:"setupHandlers",value:function(){return this.onClick=this.onClick.bind(this),this.KeyPressHandler=this.onKeyPress.bind(this),this}},{key:"enable",value:function(){return this.searchButton.addEventListener(n,this.onClick.bind(this)),this.searchInputField.addEventListener("keyup",this.onKeyPress.bind(this,this.searchButton)),this}},{key:"onClick",value:function(e){this.searchInputField.value="",this.searchButton.classList.remove("show")}},{key:"onKeyPress",value:function(e,t){""!==t.target.value.trim()?this.searchButton.classList.add("show"):this.searchButton.classList.remove("show")}}])&&t(e.prototype,i),r&&t(e,r),Object.defineProperty(e,"prototype",{writable:!1}),e;var e,i,r}();Drupal.behaviors.search={attach:function(){Array.prototype.forEach.call(document.querySelectorAll('[data-loadcomponent="Search"]'),(function(e){e.dataset.jsProcessed||(new i(e),e.dataset.jsProcessed=!0)}))}}}));

package/dist/components/search/search.twig

@@ -0,0 +1,31 @@
+{# dropdown.twig #}
+
+{% extends "@components/form/formcontrol.twig" %}
+
+{% set baseClass = prefix ~ "--searchfield" %}
+{% set searchClass = [baseClass, class] %}
+{% set inputClass = prefix ~ "--input" %}
+{% set buttonClass = baseClass ~ "--button" %}
+{% set fieldSetClass = prefix ~ "--fieldset" %}
+{% set clearButtonClass = baseClass ~ "--clear-button" %}
+
+{% if error %}
+	{% set inputClass = inputClass|merge([baseClass ~ "__error"]) %}
+{% endif %}
+
+{% block formfield %}
+	<div data-loadcomponent="Search" class="{{ searchClass|join(" ") }}" {% if style %} style={{ style }} {% endif %}>
+		<div class="{{fieldSetClass}}">
+		<input name="{{name}}" type="{{type}}" class="{{ inputClass }}{% if error %} error{% endif %}" {% if placeholder %} placeholder="{{placeholder}}" {% endif %} {% if disabled %} disabled {% endif %} {% if required %} required {% endif %} id="{% if id %}{{id}}{% else %}{{name}}{% endif %}"/>
+		<span class="{{clearButtonClass}}" >
+			{% include "@components/icon/icon.twig" with {
+  				"name": "Close",
+  				"size": "24",
+  				"color": "#230050"
+			} %}
+		</span>
+		</div>
+		<input class="{{ buttonClass }}" type="submit"/>
+
+	</div>
+{% endblock %}

package/dist/components/search/search.wingsuit.yml

@@ -0,0 +1,89 @@
+searchfield:
+  namespace: Components/Forms
+  use: "@components/search/search.twig"
+  label: Search
+  description: A component for displaying a search field.
+  visibility: storybook
+  fields:
+    label:
+      type: text
+      label: Label
+      description: The label for the form element.
+    tooltip:
+      type: string
+      description: The tooltip for the form element.
+    helper:
+      type: text
+      label: Helper Text
+      description: The helper text for the form element.
+    id:
+      type: text
+      label: ID
+      description: The ID of the text input.
+    name:
+      type: text
+      label: Name
+      description: The name of the text input.
+    placeholder:
+      type: text
+      label: Placeholder
+      description: The placeholder of the text input.
+      preview: Search for something
+    class:
+      type: text
+      label: Class
+      description: The class of the text input.
+      preview: textinput
+      default: ""
+    style:
+      type: text
+      label: Style
+      description: The style of the text input.
+      preview: "width: 100%"
+      default: ""
+    pattern:
+      type: text
+      label: Pattern
+      description: The pattern of the text input.
+      preview: textinput``
+      default: ""
+  settings:
+    labelPlacement:
+      type: select
+      label: Label Placement
+      description: The placement of the label for the form element.
+      preview: "top"
+      default: "top"
+      options:
+        start: start
+        end: end
+        top: top
+        bottom: bottom
+    labelSize:
+      type: select
+      label: Label Size
+      description: The size of the label for the form element.
+      preview: "medium"
+      default: "medium"
+      options:
+        small: small
+        medium: medium
+        large: large
+    disabled:
+      type: boolean
+      label: Disabled
+      description: The disabled state of the text input.
+      preview: false
+      default: false
+    required:
+      type: boolean
+      label: Required
+      description: The required state of the text input.
+      preview: false
+      default: false
+    error:
+      type: boolean
+      label: Error
+      description: Adds an error state to the form control.
+      preview: false
+      default: false

package/dist/components/searchfield/searchfield.css

@@ -0,0 +1 @@
+.ilo--searchfield{display:flex}.ilo--searchfield .ilo--fieldset{position:relative;width:100%}.ilo--searchfield .ilo--input{padding-inline-end:3.0010718114rem}.ilo--searchfield--button{background-color:#edf0f2;background-position:50%;background-repeat:no-repeat;background-size:1.2861736334rem 1.2861736334rem;border-bottom:.1071811361rem solid #b8c4cc;border-left:0 solid #b8c4cc;border-right:.1071811361rem solid #b8c4cc;border-top:.1071811361rem solid #b8c4cc;height:2.5723472669rem;width:2.4651661308rem;text-indent:-9999px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23230050' d='M16.707 15.257a6.85 6.85 0 0 0 1.4-4.2 7 7 0 0 0-7-7.1 7.1 7.1 0 0 0 0 14.2 6.64 6.64 0 0 0 4.2-1.4l3 3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4l-3-3.1zm-5.6.8a5 5 0 0 1-5.1-5 5.1 5.1 0 0 1 10.2 0 4.999 4.999 0 0 1-5.1 5z'/%3E%3C/svg%3E")}.ilo--searchfield--button:focus{background-color:#ebf5fd;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231E2DBE' d='M16.707 15.257a6.85 6.85 0 0 0 1.4-4.2 7 7 0 0 0-7-7.1 7.1 7.1 0 0 0 0 14.2 6.64 6.64 0 0 0 4.2-1.4l3 3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4l-3-3.1zm-5.6.8a5 5 0 0 1-5.1-5 5.1 5.1 0 0 1 10.2 0 4.999 4.999 0 0 1-5.1 5z'/%3E%3C/svg%3E")}.ilo--searchfield--button:active{background-color:#1e2dbe;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EBF5FD' d='M16.707 15.257a6.85 6.85 0 0 0 1.4-4.2 7 7 0 0 0-7-7.1 7.1 7.1 0 0 0 0 14.2 6.64 6.64 0 0 0 4.2-1.4l3 3a1 1 0 0 0 1.4 0 1 1 0 0 0 0-1.4l-3-3.1zm-5.6.8a5 5 0 0 1-5.1-5 5.1 5.1 0 0 1 10.2 0 4.999 4.999 0 0 1-5.1 5z'/%3E%3C/svg%3E")}.haslabel .ilo--searchfield--button{margin-top:1.5005359057rem}.ilo--searchfield--button:disabled{opacity:.45;pointer-events:none}.ilo--searchfield--clear-button{display:none;align-items:center;cursor:pointer}.ilo--searchfield--clear-button.show{display:inline;position:absolute;top:12px;right:2%}.ilo--searchfield [type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}[dir=rtl] .ilo--searchfield .ilo--searchfield--button{border-left:.1071811361rem solid #b8c4cc;border-right:0}[dir=rtl] .ilo--searchfield .ilo--searchfield--clear-button.show{right:95%}