gent_styleguide 6.0.0-beta2 → 6.0.0-beta21

package/build/styleguide/img/iconfont/for-children.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.1325 13.9781C12.1325 15.2472 11.1033 16.2763 9.8343 16.2763C8.56526 16.2763 7.53613 15.2472 7.53613 13.9781C7.53613 12.7091 8.56526 11.68 9.8343 11.68C11.1033 11.68 12.1325 12.7086 12.1325 13.9781Z" fill="#001823"/>
+<path d="M14.684 17.8168C14.3052 17.2612 14.2042 16.5541 14.4567 15.8974L12.0323 16.6551C11.5777 16.8066 11.1231 16.8571 10.6433 16.8571H8.72395C8.09259 16.8571 7.51174 17.0844 7.0319 17.5137L4.30441 20.0139C3.92559 20.3675 3.90033 20.9736 4.22864 21.3524C4.40543 21.5545 4.68323 21.6555 4.93577 21.6555C5.16306 21.6555 5.39035 21.5797 5.56714 21.4029L7.15817 19.9634L6.24901 22.7162C6.09748 23.1455 6.42579 23.6001 6.90563 23.6001H7.46123L7.13292 26.5043C7.08241 27.0347 7.43597 27.4893 7.96632 27.5398H8.06734C8.54717 27.5398 8.95125 27.1862 9.00175 26.7064L9.35532 23.7011C9.35532 23.6253 9.40583 23.6001 9.48159 23.6001H10.1887C10.2645 23.6001 10.315 23.6506 10.315 23.7011L10.6686 26.7064C10.7191 27.2367 11.1989 27.5903 11.704 27.5398C12.2343 27.4893 12.5879 27.0094 12.5374 26.5043L12.2091 23.6001H12.7647C13.2193 23.6001 13.5476 23.1455 13.4213 22.7162L12.0576 18.5997C12.2343 18.5744 12.4111 18.5239 12.6132 18.4481L14.684 17.8168Z" fill="#001823"/>
+<path d="M27.7707 15.6059L24.9239 11.0531C24.4288 10.2449 23.5871 9.75995 22.6959 9.75995H20.8392C19.9481 9.75995 19.1064 10.2449 18.6113 11.0531L15.7397 15.6059C15.4178 16.0908 15.4426 16.7912 15.8634 17.1953C16.3833 17.7341 17.1755 17.5994 17.5468 17.0067L19.3292 14.1511L17.6706 19.6738C17.4973 20.2125 17.8686 20.7783 18.4132 20.7783H19.0816L18.8093 26.6781C18.7846 27.2707 19.1311 27.8634 19.6757 27.9712C20.3689 28.1328 20.9878 27.594 21.0125 26.8397L21.2848 20.886C21.2848 20.8052 21.3343 20.7513 21.4086 20.7513H22.1513C22.2255 20.7513 22.275 20.8052 22.275 20.886L22.5474 26.8397C22.5721 27.4863 23.0672 27.9981 23.6613 27.9981H23.7108C24.3297 27.9712 24.8001 27.4054 24.7506 26.732L24.4783 20.7783H25.1467C25.6665 20.7783 26.0626 20.2125 25.8893 19.6738L24.2307 14.1511L26.0131 17.0067C26.2359 17.3569 26.5825 17.5455 26.929 17.5455C27.1766 17.5455 27.4241 17.4647 27.6469 17.2761C28.0678 16.8725 28.1173 16.1182 27.7707 15.6063V15.6059Z" fill="#001823"/>
+<path d="M24.1286 6.5002C24.1286 7.88108 23.0093 9.0004 21.6284 9.0004C20.2475 9.0004 19.1282 7.88108 19.1282 6.5002C19.1282 5.11932 20.2475 4 21.6284 4C23.0093 4 24.1286 5.11932 24.1286 6.5002Z" fill="#001823"/>
+</svg>

package/build/styleguide/img/iconfont/music.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: $$$/GeneralStr/196=Adobe Illustrator 27.6.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#001823;}
+</style>
+<path class="st0" d="M25.1,5.2L25.1,5.2L25.1,5.2C24.9,5.1,24.6,4.9,24,5L11.1,7.9c-0.6,0.1-1,0.6-1,1.2v11.5
+	c-0.6-0.2-1.2-0.4-1.9-0.4c-2.5,0-4.5,1.8-4.5,4.1s2.1,4.1,4.5,4.1c2.5,0,4.5-1.8,4.5-4.1v-9.5L23,12.5v6.2
+	c-0.6-0.2-1.2-0.4-1.9-0.4c-2.5,0-4.5,1.8-4.5,4.1s2.1,4.1,4.5,4.1c2.5,0,4.5-1.8,4.5-4.1V6.2C25.6,5.8,25.5,5.5,25.1,5.2z M23,7.7
+	V10l-10.3,2.3V10L23,7.7z M8.2,22.6c1.1,0,1.9,0.8,1.9,1.6c0,0.9-0.8,1.6-1.9,1.6S6.3,25,6.3,24.2C6.3,23.4,7.1,22.6,8.2,22.6z
+	 M21.1,20.7c1.1,0,1.9,0.8,1.9,1.6c0,0.9-0.8,1.6-1.9,1.6s-1.9-0.8-1.9-1.6S20,20.7,21.1,20.7z"/>
+</svg>

package/build/styleguide/img/iconfont/sign-language.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <path fill="#001823" d="m17.359 10.439-6.605-4.888a1.068 1.068 0 0 1-.471-.76c-.04-.313.039-.606.235-.879a1.13 1.13 0 0 1 .767-.483c.314-.049.61.025.884.22l6.605 4.917-1.415 1.873Zm-4.511-1.873-1.062 1.083a4.151 4.151 0 0 0-.53.644l-1.681-1.23a1.068 1.068 0 0 1-.472-.76c-.04-.313.04-.605.236-.879.197-.273.452-.429.767-.468.314-.039.609.04.884.234l1.858 1.376Zm10.88 2.195-8.964-6.644a1.12 1.12 0 0 1-.486-.76c-.05-.313.024-.606.22-.879.197-.273.453-.43.767-.468.315-.04.61.039.885.234l5.779 4.273.265-2.02a2.08 2.08 0 0 1 .56-1.2 2.017 2.017 0 0 1 1.15-.614l1.18-.176 2.77 9.25a3.42 3.42 0 0 1 .09 1.609 3.508 3.508 0 0 1-.65 1.492l-2.506 3.308a4.98 4.98 0 0 0-.309-1.361 5.624 5.624 0 0 0-.663-1.244l1.592-2.107c.118-.156.186-.322.206-.498.02-.175.01-.351-.03-.527L24.17 7.66l-.442 3.102ZM9.78 13.571l-.413-.293a1.12 1.12 0 0 1-.486-.76 1.15 1.15 0 0 1 .221-.879c.197-.273.452-.43.767-.468.314-.04.61.039.884.234l.03.03a3.02 3.02 0 0 0-.104 1.067c.03.361.104.717.222 1.069h-1.12Zm-5.6 7.405c-.334 0-.614-.113-.84-.337a1.128 1.128 0 0 1-.34-.834c0-.332.113-.61.34-.834a1.14 1.14 0 0 1 .84-.337h8.255v2.342H4.179Zm1.18 3.512c-.334 0-.615-.112-.84-.337a1.128 1.128 0 0 1-.34-.834c0-.332.113-.61.34-.834.225-.224.506-.337.84-.337h7.076v2.342H5.359ZM7.717 28c-.334 0-.614-.112-.84-.337a1.128 1.128 0 0 1-.339-.834c0-.331.113-.61.34-.834.225-.224.505-.337.84-.337H19.51c.334 0 .614-.112.84-.336.226-.224.34-.502.34-.834v-5.854c0-.195-.04-.37-.119-.527a1.162 1.162 0 0 0-.354-.41l-4.01-2.985 1.534 2.751H6.538c-.334 0-.614-.112-.84-.336a1.128 1.128 0 0 1-.34-.834c0-.332.114-.61.34-.834.226-.225.506-.337.84-.337h7.194l-1.002-1.756a2.101 2.101 0 0 1-.28-1.303 1.91 1.91 0 0 1 .575-1.185l.825-.82 7.784 5.766c.452.332.8.742 1.046 1.23s.369 1.014.369 1.58v5.854c0 .975-.344 1.805-1.032 2.488-.688.683-1.523 1.024-2.506 1.024H7.717Z"/>
+</svg>

package/build/styleguide/img/iconfont/spoken-language.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <path fill="#001823" d="M3 28v-2.57c.997 0 1.982-.065 2.957-.194a13.291 13.291 0 0 0 2.86-.706 5.651 5.651 0 0 1-2.356-2.137 5.682 5.682 0 0 1-.861-3.037v-2.924h5.2v-3.856h4.387l-4.257-8.42L13.27 3l4.258 8.419c.433.857.4 1.692-.098 2.506-.498.814-1.235 1.221-2.21 1.221H13.4v1.286a2.46 2.46 0 0 1-.764 1.815 2.518 2.518 0 0 1-1.836.756H8.2v.353c0 .75.233 1.409.699 1.976a3.371 3.371 0 0 0 1.771 1.141l.39.096c.867.215 1.354.75 1.463 1.607.108.857-.228 1.5-1.008 1.928-1.3.707-2.67 1.2-4.111 1.478A23.115 23.115 0 0 1 3 28Zm18.59-3.663-1.852-1.8c.454-.45.812-.97 1.072-1.558.26-.59.39-1.227.39-1.912a4.68 4.68 0 0 0-.39-1.912 5.025 5.025 0 0 0-1.072-1.559l1.852-1.831a7.467 7.467 0 0 1 1.625 2.394c.39.91.585 1.88.585 2.908a7.193 7.193 0 0 1-.585 2.892c-.39.9-.932 1.692-1.625 2.378ZM25.262 28l-1.852-1.832a10.235 10.235 0 0 0 2.194-3.197c.53-1.21.796-2.512.796-3.904 0-1.414-.265-2.72-.796-3.92a10.29 10.29 0 0 0-2.194-3.182l1.852-1.831a12.726 12.726 0 0 1 2.747 4.016c.66 1.521.991 3.16.991 4.917 0 1.735-.33 3.369-.991 4.9A12.676 12.676 0 0 1 25.262 28Z"/>
+</svg>

package/build/styleguide/img/iconfont/threads.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5698 28C10.7657 28 6.79847 25.505 5.50123 20.4598C4.77053 17.6113 4.94485 14.3976 5.35306 12.3401C5.81065 10.0306 7.29965 6.81686 9.98711 5.3636C12.814 3.83644 16.1944 3.80602 18.2296 4.24359C20.8009 4.79707 22.6617 5.9026 24.0854 7.72388C25.5903 9.64949 25.984 11.5939 26 11.6751L23.9851 12.0677L24.9918 11.8721L23.9851 12.0721C23.9822 12.0561 23.6554 10.5058 22.4656 8.98299C21.3398 7.54277 19.9002 6.69805 17.7953 6.24599C15.9678 5.85333 13.1481 5.98374 10.9633 7.1646C8.75814 8.35706 7.66427 11.2288 7.36502 12.7371C7.01783 14.4903 6.84205 17.4316 7.4885 19.9498C8.13785 22.4753 9.57019 24.243 11.7449 25.205C14.21 26.2961 17.1808 26.015 18.9763 25.4441C20.7616 24.8761 22.3886 23.2707 22.7605 21.7103C23.2399 19.7006 22.4903 18.1532 20.9084 17.2433C20.583 19.4557 19.537 21.1104 17.9362 21.8392C15.548 22.9273 12.4233 22.0479 11.3788 19.9947C10.8035 18.8617 10.8311 17.4925 11.4543 16.4188C11.8799 15.6857 12.9767 14.4338 15.548 14.2976C16.7639 14.2339 17.8737 14.2817 18.8732 14.4425C18.6698 13.2138 18.0219 11.7229 16.0796 11.649C14.3103 11.5823 13.4677 12.3358 13.0711 12.9805L11.3207 11.9112C11.771 11.1795 13.1423 9.48721 16.1581 9.60313C18.9632 9.7089 20.8168 11.7837 20.997 15.0163C24.0708 16.2565 25.5061 19.0385 24.7565 22.1812C24.2147 24.456 22.0937 26.5989 19.5995 27.3929C18.4867 27.7464 17.0733 27.9971 15.5669 27.9971L15.5698 28ZM16.5779 16.3188C15.3736 16.3188 13.8382 16.4 13.2324 17.4447C12.9535 17.9257 12.9462 18.5473 13.2106 19.0689C13.7466 20.1237 15.7383 20.5917 17.0849 19.9774C18.1236 19.5036 18.7773 18.2546 18.9313 16.5304C18.2311 16.3884 17.4452 16.3174 16.5779 16.3174V16.3188Z" fill="black"/>
+</svg>

package/build/styleguide/img/iconfont/tiktok.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4986 10.5899V7.70077C15.7671 7.54123 15.6361 4.10969 15.6361 3.78771V3.75H12.7238V15.0135C12.7238 16.2898 11.7031 17.3239 10.4362 17.3224C9.16939 17.3224 8.14727 16.2869 8.14871 15.0106C8.14871 13.7343 9.18235 12.7002 10.4492 12.7016C10.6752 12.7016 10.8912 12.735 11.1201 12.8017V9.82119C8.27252 9.4499 5.66395 11.4717 5.29397 14.3391C4.924 17.2064 6.92937 19.833 9.77547 20.2057C12.6216 20.5785 15.2287 18.5552 15.5987 15.6893C15.639 15.3804 15.6375 15.0932 15.6375 14.7959V9.25555C16.9792 10.4855 19.5 10.5899 19.5 10.5899H19.4986Z" fill="#001823"/>
+</svg>

package/build/styleguide/img/iconfont/uit-met-vlieg.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <path fill="#001823" d="M21.94 10.162a1.002 1.002 0 1 0-.254 1.988 1.002 1.002 0 0 0 .254-1.988Zm3.948 1.403a1.002 1.002 0 1 0-.25 1.989 1.002 1.002 0 0 0 .25-1.99Z"/>
+  <path fill="#001823" d="M26.571 14.408a2.551 2.551 0 0 0-2.621-4.33 3.42 3.42 0 0 0-2.058-2.267 3.45 3.45 0 0 0-4.547 4.261h-.05c-.233 0-.465.009-.697.018.9-2.861 1.782-6.999.177-8.972-.841-1.033-2.247-1.352-4.188-.949-1.148.239-2.022.635-2.622 1.187C8.942 3.28 7.837 3.76 6.67 4.79 5.186 6.1 4.598 7.42 4.922 8.712c.499 1.988 3.092 3.526 5.561 4.568-2.502.965-4.315 2.436-4.95 4.139l-1.085.51L3 18.607l1.458.66.952.433a4.69 4.69 0 0 0 .978 1.83l-1.05 1.272a.68.68 0 1 0 .388.317l1.007-1.216c.3.303.625.582.97.832l-.44.535a.68.68 0 1 0 .387.316l.465-.568c2.218 1.447 5.549 2.356 9.268 2.334 6.654-.04 12.03-3.047 12.01-6.714-.02-1.616-1.075-3.09-2.822-4.23ZM10.852 5.072a.249.249 0 1 0-.497 0l.024 3.536-2.312-2.617a.249.249 0 0 0-.373.329l3.167 3.585-3.792-.603a.249.249 0 0 0-.078.49l4.388.698 3.246 3.675c-2.229-.62-8.474-2.615-9.22-5.58a2.324 2.324 0 0 1-.071-.549c-.005-.93.552-1.896 1.665-2.878C8.332 3.98 9.543 3.59 10.598 4c2.854 1.106 4.056 7.553 4.397 9.84l-4.121-4.665a.185.185 0 0 0 0-.035l-.022-4.068Zm3.255 2.933 1.974-3.522a.25.25 0 1 0-.435-.243l-1.73 3.084-.712-3.42a.25.25 0 0 0-.488.102l.372 1.782c-.62-1.057-1.38-1.892-2.305-2.247a2.889 2.889 0 0 0-.174-.06c.516-.367 1.21-.642 2.083-.825 1.74-.362 2.986-.102 3.7.775.559.686.775 1.692.783 2.827.016 2.574-1.05 5.811-1.682 7.501-.18-1.228-.596-3.59-1.388-5.754h.002Zm2.232 7.794 1.476 1.483-1.362 1.354c-.575-1.148-.654-2.232-.116-2.837h.002Zm1.52 4.756a7.774 7.774 0 0 1-1.24-1.61l1.431-1.422 1.464 1.472L17.9 20.6l-.041-.046Zm.287.274 1.605-1.602 1.464 1.472-1.33 1.325a7.285 7.285 0 0 1-1.74-1.195Zm3.386 1.622a3.65 3.65 0 0 1-1.317-.282l1.235-1.231 1.156 1.162c-.265.233-.627.352-1.076.351h.002Zm4.28-8.163a2.052 2.052 0 0 1-2.711-1.07l-.144-.332-.26.253a2.958 2.958 0 1 1 .84-2.648l.067.356.31-.19a2.054 2.054 0 1 1 1.897 3.63h.002Z"/>
+</svg>

package/build/styleguide/img/iconfont/uitpas.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 32 32">
+  <path fill="#001823" d="M11.336 17.307c0 1.082-.117 1.95-.958 2.729-.751.694-1.67.938-2.592 1.015-.8.07-1.85-.049-2.524-.52-.933-.66-1.11-1.64-1.11-2.89v-6.88l2.73.223v6.24c0 .334-.014.788.163 1.088.206.31.614.422.958.405.305-.014.688-.13.918-.367.344-.335.305-.837.305-1.287v-5.887l2.106.17v5.96h.004Zm3.357 2.99-2.528.206v-6.229l2.528.077v5.946Zm0-6.62-2.528-.107v-2.15l2.528.206v2.052Zm5.039 6.251-2.553.209v-6.31l-1.837-.076v-2.073l6.19.51v1.825l-1.8-.077v5.992Z"/>
+  <path fill="#001823" d="M2 8h27v16H2l21.6-2.666V10.666L2 8Z"/>
+</svg>

package/build/styleguide/js/accordion.functions-min.js

@@ -1 +1 @@
-"use strict";!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.Accordion=t()}(window,function(){return function(c,u){let h=[];u=(()=>{var t={expand:(e,t)=>{t.style.maxHeight=t.scrollHeight+"px"},collapse:(e,t)=>{t.style.maxHeight=0},transitionEnd:e=>{"max-height"!==e.propertyName||e.currentTarget.classList.contains("accordion--expanded")||e.currentTarget.setAttribute("hidden","hidden")},resizeEvent:(e,t)=>{for(let e=t.length;e--;)u.expand(null,t[e])},init:!0,buttonSelector:"button.accordion--button",linkSelector:"button.accordion--link--button",accordionExpandedClass:"accordion--expanded"},r=Object.keys(t);u=u||{};for(let e=r.length;e--;)u[r[e]]=u[r[e]]||t[r[e]];return u})();let a;a=0===c.querySelectorAll(u.linkSelector).length?c.querySelectorAll(u.buttonSelector):c.querySelectorAll(u.linkSelector);const i=e=>{e.preventDefault();e=e.currentTarget;e.setAttribute("aria-expanded","true"===e.getAttribute("aria-expanded")?"false":"true"),d(e)},o=t=>{var e=t.keyCode||t.which;let r=(()=>{for(let e=a.length;e--;)if(a[e]===t.currentTarget)return e})();switch(e){case 40:t.preventDefault(),r===a.length-1&&(r=-1),a[r+1].focus();break;case 38:t.preventDefault(),0===r&&(r=a.length),a[r-1].focus();break;case 36:t.preventDefault(),a[0].focus();break;case 35:t.preventDefault(),a[a.length-1].focus()}},d=(e,t)=>{const r=c.querySelector("#"+e.getAttribute("aria-controls")),n=c.querySelector("#"+e.getAttribute("data-controls-img"));r&&("true"===e.getAttribute("aria-expanded")?(r.classList.add(u.accordionExpandedClass),r.setAttribute("aria-hidden","false"),r.removeAttribute("hidden"),h.push(r),n&&(n.classList.add(u.accordionExpandedClass),n.setAttribute("aria-hidden","false"),n.removeAttribute("hidden"),h.push(n),u.expand(e,n)),u.expand(e,r)):(r.classList.remove(u.accordionExpandedClass),r.setAttribute("aria-hidden","true"),t&&r.setAttribute("hidden","hidden"),n&&(n.classList.remove(u.accordionExpandedClass),n.setAttribute("aria-hidden","true"),t&&n.setAttribute("hidden","hidden"),h.filter(e=>e!==n),u.collapse(e,n)),h.filter(e=>e!==r),u.collapse(e,r)))};window.onclick=function(e){if(!e.target.matches(".dropdown button, .opening-hours *, .dropdown--link button")){for(var t=c.getElementsByClassName("dropdown"),r=0;r<t.length;r++){var n=t[r].querySelector("button");if("false"===n.getAttribute("aria-expanded"))return;const o=t[r].querySelector("#"+n.getAttribute("aria-controls")),d=t[r].querySelector("#"+n.getAttribute("data-controls-img"));if(!o)return;o.classList.remove(u.accordionExpandedClass),o.setAttribute("aria-hidden","true"),o.setAttribute("hidden","hidden"),h.filter(e=>e!==o),u.collapse(n,o),n.setAttribute("aria-expanded","false"),d&&(d.classList.remove(u.accordionExpandedClass),d.setAttribute("aria-hidden","true"),d.setAttribute("hidden","hidden"),h.filter(e=>e!==d),u.collapse(n,d))}for(var a=c.getElementsByClassName("dropdown--link"),r=0;r<a.length;r++){var i=t[r].querySelector("button.accordion--link--button");if("false"===i.getAttribute("aria-expanded"))return;const s=t[r].querySelector("#"+i.getAttribute("aria-controls")),l=t[r].querySelector("#"+i.getAttribute("data-controls-img"));if(!s)return;s.classList.remove(u.accordionExpandedClass),s.setAttribute("aria-hidden","true"),s.setAttribute("hidden","hidden"),h.filter(e=>e!==s),u.collapse(i,s),i.setAttribute("aria-expanded","false"),l&&(l.classList.remove(u.accordionExpandedClass),l.setAttribute("aria-hidden","true"),l.setAttribute("hidden","hidden"),h.filter(e=>e!==l),u.collapse(i,l))}}};const r=e=>{e.setAttribute("aria-expanded","true"),d(e)};const e=()=>{var e=window.location.hash.replace("#","");if(e)try{var t=c.querySelector(`[aria-controls=${e}]`);t&&(r(t),t.focus())}catch(e){}};var t=()=>{for(let e=a.length;e--;)d(a[e],!0);var t=e=>{u.resizeEvent(e,h)};for(let e=a.length;e--;){var r=a[e],n=(r.addEventListener("click",i),r.addEventListener("keydown",o),c.querySelector("#"+r.getAttribute("aria-controls"))),r=c.querySelector("#"+r.getAttribute("data-controls-img"));n.addEventListener("transitionend",u.transitionEnd),r&&r.addEventListener("transitionend",u.transitionEnd),u.resizeEvent&&window.addEventListener("resize",t)}window.addEventListener("hashchange",e),e()};return!1!==u.init&&t(),{init:t,closeAll:()=>{for(let e=a.length;e--;)(t=a[e]).setAttribute("aria-expanded","false"),d(t);var t},openAll:()=>{for(let e=a.length;e--;)r(a[e])}}}});
+"use strict";!function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.Accordion=t()}(window,function(){return function(c,u){let h=[];u=(()=>{var t={expand:(e,t)=>{},collapse:(e,t)=>{},transitionEnd:e=>{"max-height"!==e.propertyName||e.currentTarget.classList.contains("accordion--expanded")||e.currentTarget.setAttribute("hidden","hidden")},resizeEvent:(e,t)=>{for(let e=t.length;e--;)u.expand(null,t[e])},init:!0,buttonSelector:"button.accordion--button",linkSelector:"button.accordion--link--button",accordionExpandedClass:"accordion--expanded"},r=Object.keys(t);u=u||{};for(let e=r.length;e--;)u[r[e]]=u[r[e]]||t[r[e]];return u})();let a;a=0===c.querySelectorAll(u.linkSelector).length?c.querySelectorAll(u.buttonSelector):c.querySelectorAll(u.linkSelector);const i=e=>{e.preventDefault();e=e.currentTarget;e.setAttribute("aria-expanded","true"===e.getAttribute("aria-expanded")?"false":"true"),d(e)},o=t=>{var e=t.keyCode||t.which;let r=(()=>{for(let e=a.length;e--;)if(a[e]===t.currentTarget)return e})();switch(e){case 40:t.preventDefault(),r===a.length-1&&(r=-1),a[r+1].focus();break;case 38:t.preventDefault(),0===r&&(r=a.length),a[r-1].focus();break;case 36:t.preventDefault(),a[0].focus();break;case 35:t.preventDefault(),a[a.length-1].focus()}},d=(e,t)=>{const r=c.querySelector("#"+e.getAttribute("aria-controls")),n=c.querySelector("#"+e.getAttribute("data-controls-img"));r&&("true"===e.getAttribute("aria-expanded")?(r.classList.add(u.accordionExpandedClass),r.setAttribute("aria-hidden","false"),r.removeAttribute("hidden"),h.push(r),n&&(n.classList.add(u.accordionExpandedClass),n.setAttribute("aria-hidden","false"),n.removeAttribute("hidden"),h.push(n),u.expand(e,n)),u.expand(e,r)):(r.classList.remove(u.accordionExpandedClass),r.setAttribute("aria-hidden","true"),t&&r.setAttribute("hidden","hidden"),n&&(n.classList.remove(u.accordionExpandedClass),n.setAttribute("aria-hidden","true"),t&&n.setAttribute("hidden","hidden"),h.filter(e=>e!==n),u.collapse(e,n)),h.filter(e=>e!==r),u.collapse(e,r)))};window.onclick=function(e){if(!e.target.matches(".dropdown button, .opening-hours *, .dropdown--link button")){for(var t=c.getElementsByClassName("dropdown"),r=0;r<t.length;r++){var n=t[r].querySelector("button");if("false"===n.getAttribute("aria-expanded"))return;const o=t[r].querySelector("#"+n.getAttribute("aria-controls")),d=t[r].querySelector("#"+n.getAttribute("data-controls-img"));if(!o)return;o.classList.remove(u.accordionExpandedClass),o.setAttribute("aria-hidden","true"),o.setAttribute("hidden","hidden"),h.filter(e=>e!==o),u.collapse(n,o),n.setAttribute("aria-expanded","false"),d&&(d.classList.remove(u.accordionExpandedClass),d.setAttribute("aria-hidden","true"),d.setAttribute("hidden","hidden"),h.filter(e=>e!==d),u.collapse(n,d))}for(var a=c.getElementsByClassName("dropdown--link"),r=0;r<a.length;r++){var i=t[r].querySelector("button.accordion--link--button");if("false"===i.getAttribute("aria-expanded"))return;const s=t[r].querySelector("#"+i.getAttribute("aria-controls")),l=t[r].querySelector("#"+i.getAttribute("data-controls-img"));if(!s)return;s.classList.remove(u.accordionExpandedClass),s.setAttribute("aria-hidden","true"),s.setAttribute("hidden","hidden"),h.filter(e=>e!==s),u.collapse(i,s),i.setAttribute("aria-expanded","false"),l&&(l.classList.remove(u.accordionExpandedClass),l.setAttribute("aria-hidden","true"),l.setAttribute("hidden","hidden"),h.filter(e=>e!==l),u.collapse(i,l))}}};const r=e=>{e.setAttribute("aria-expanded","true"),d(e)};const e=()=>{var e=window.location.hash.replace("#","");if(e)try{var t=c.querySelector(`[aria-controls=${e}]`);t&&(r(t),t.focus())}catch(e){}};var t=()=>{for(let e=a.length;e--;)d(a[e],!0);var t=e=>{u.resizeEvent(e,h)};for(let e=a.length;e--;){var r=a[e],n=(r.addEventListener("click",i),r.addEventListener("keydown",o),c.querySelector("#"+r.getAttribute("aria-controls"))),r=c.querySelector("#"+r.getAttribute("data-controls-img"));n.addEventListener("transitionend",u.transitionEnd),r&&r.addEventListener("transitionend",u.transitionEnd),u.resizeEvent&&window.addEventListener("resize",t)}window.addEventListener("hashchange",e),e()};return!1!==u.init&&t(),{init:t,closeAll:()=>{for(let e=a.length;e--;)(t=a[e]).setAttribute("aria-expanded","false"),d(t);var t},openAll:()=>{for(let e=a.length;e--;)r(a[e])}}}});

package/build/styleguide/js/accordion.functions.js

@@ -24,10 +24,10 @@
     options = (() => {
       const defaults = {
         expand: (button, content) => {
-          content.style.maxHeight = `${content.scrollHeight}px`;
+          // content.style.maxHeight = `${content.scrollHeight}px`;
         },
         collapse: (button, content) => {
-          content.style.maxHeight = 0;
+          // content.style.maxHeight = 0;
         },
         transitionEnd: (e) => {
           if (e.propertyName !== 'max-height') {

package/build/styleguide/sass/00-mixins/themify/_themify.scss

@@ -130,6 +130,50 @@
   }
 }
 
+///
+/// This mixin is similar to the theme-mixin, but uses the first element
+/// selector as a body class.
+///
+/// The themify theme() function creates style selectors like this:
+/// <code>
+///   .cs--blue .original-selector .child ... {}
+/// </code>
+/// Where cs--blue is the theme color and that class is added to the <body>
+/// element.
+///
+/// But sometimes the .original-selector is a body class which is not supported
+/// by the theme() function.
+//
+/// The theme-body() function adds the color class to the first element of the
+/// selector:
+///
+/// <code>
+///   .cs--blue.original-selector .child ... {}
+/// </code>
+///
+/// @see theme()
+/// @group colors
+/// @access public
+/// @author Peter Decuyper
+///
+/// @param {string} $property [null]
+///   The property to themify.
+///
+/// @param {string} $default [null]
+///   The default value for the themified property.
+///
+/// @param {string} $exception [null]
+///   The exception value for the themified property.
+///   This is the exception optionally used in subthemes.
+///
+@mixin theme-body($property: null, $default: null, $exception: null, $extra-values: null) {
+  @each $theme, $colors in $themes {
+    @at-root .cs--#{$theme}#{&} {
+      #{$property}: set-themified-property($colors, $default, $exception);
+    }
+  }
+}
+
 ///
 /// This mixin is similar to the theme-mixin, but uses the @content directive
 /// to make it possible to pass in custom values for a property (as often seen

package/build/styleguide/sass/11-base/base/_base.scss

@@ -61,18 +61,11 @@ dl,
 table,
 address,
 pre {
-  margin-bottom: .5em;
+  margin-bottom: 10px;
   font-size: inherit;
   line-height: inherit;
 }
 
-p {
-  @include large-text();
-
-  margin-bottom: 20px;
-  line-height: 177.778%;
-}
-
 address {
   font-style: normal;
 }

package/build/styleguide/sass/11-base/fonts/_icons.scss

@@ -178,225 +178,249 @@ $id: random(1000);
     @if $filename == flickr {
       $char: "\E027";
     }
-    @if $filename == fullscreen-enter {
+    @if $filename == for-children {
       $char: "\E028";
     }
-    @if $filename == fullscreen-exit {
+    @if $filename == fullscreen-enter {
       $char: "\E029";
     }
-    @if $filename == ghent {
+    @if $filename == fullscreen-exit {
       $char: "\E02A";
     }
-    @if $filename == globe {
+    @if $filename == ghent {
       $char: "\E02B";
     }
-    @if $filename == googleplus {
+    @if $filename == globe {
       $char: "\E02C";
     }
-    @if $filename == gsport {
+    @if $filename == googleplus {
       $char: "\E02D";
     }
-    @if $filename == hamburger {
+    @if $filename == gsport {
       $char: "\E02E";
     }
-    @if $filename == health {
+    @if $filename == hamburger {
       $char: "\E02F";
     }
-    @if $filename == heart {
+    @if $filename == health {
       $char: "\E030";
     }
-    @if $filename == home {
+    @if $filename == heart {
       $char: "\E031";
     }
-    @if $filename == image {
+    @if $filename == home {
       $char: "\E032";
     }
-    @if $filename == info-circle {
+    @if $filename == image {
       $char: "\E033";
     }
-    @if $filename == info {
+    @if $filename == info-circle {
       $char: "\E034";
     }
-    @if $filename == instagram {
+    @if $filename == info {
       $char: "\E035";
     }
-    @if $filename == layers {
+    @if $filename == instagram {
       $char: "\E036";
     }
-    @if $filename == level {
+    @if $filename == layers {
       $char: "\E037";
     }
-    @if $filename == lightning {
+    @if $filename == level {
       $char: "\E038";
     }
-    @if $filename == link {
+    @if $filename == lightning {
       $char: "\E039";
     }
-    @if $filename == linkedin {
+    @if $filename == link {
       $char: "\E03A";
     }
-    @if $filename == living {
+    @if $filename == linkedin {
       $char: "\E03B";
     }
-    @if $filename == lock-closed {
+    @if $filename == living {
       $char: "\E03C";
     }
-    @if $filename == lock-open {
+    @if $filename == lock-closed {
       $char: "\E03D";
     }
-    @if $filename == logo-en {
+    @if $filename == lock-open {
       $char: "\E03E";
     }
-    @if $filename == logo-es {
+    @if $filename == logo-en {
       $char: "\E03F";
     }
-    @if $filename == logo-fr {
+    @if $filename == logo-es {
       $char: "\E040";
     }
-    @if $filename == logo-nl {
+    @if $filename == logo-fr {
       $char: "\E041";
     }
-    @if $filename == logo-sp {
+    @if $filename == logo-nl {
       $char: "\E042";
     }
-    @if $filename == map {
+    @if $filename == logo-sp {
       $char: "\E043";
     }
-    @if $filename == marker {
+    @if $filename == map {
       $char: "\E044";
     }
-    @if $filename == minus {
+    @if $filename == marker {
       $char: "\E045";
     }
-    @if $filename == mobility {
+    @if $filename == minus {
       $char: "\E046";
     }
-    @if $filename == next {
+    @if $filename == mobility {
       $char: "\E047";
     }
-    @if $filename == normalphone {
+    @if $filename == music {
       $char: "\E048";
     }
-    @if $filename == pause {
+    @if $filename == next {
       $char: "\E049";
     }
-    @if $filename == pencil {
+    @if $filename == normalphone {
       $char: "\E04A";
     }
-    @if $filename == phone {
+    @if $filename == pause {
       $char: "\E04B";
     }
-    @if $filename == pinterest {
+    @if $filename == pencil {
       $char: "\E04C";
     }
-    @if $filename == play {
+    @if $filename == phone {
       $char: "\E04D";
     }
-    @if $filename == plus {
+    @if $filename == pinterest {
       $char: "\E04E";
     }
-    @if $filename == previous {
+    @if $filename == play {
       $char: "\E04F";
     }
-    @if $filename == question-circle {
+    @if $filename == plus {
       $char: "\E050";
     }
-    @if $filename == question {
+    @if $filename == previous {
       $char: "\E051";
     }
-    @if $filename == readspeaker {
+    @if $filename == question-circle {
       $char: "\E052";
     }
-    @if $filename == refresh {
+    @if $filename == question {
       $char: "\E053";
     }
-    @if $filename == search {
+    @if $filename == readspeaker {
       $char: "\E054";
     }
-    @if $filename == settings {
+    @if $filename == refresh {
       $char: "\E055";
     }
-    @if $filename == share {
+    @if $filename == search {
       $char: "\E056";
     }
-    @if $filename == shopping {
+    @if $filename == settings {
       $char: "\E057";
     }
-    @if $filename == size {
+    @if $filename == share {
       $char: "\E058";
     }
-    @if $filename == sportclub {
+    @if $filename == shopping {
       $char: "\E059";
     }
-    @if $filename == star-empty {
+    @if $filename == sign-language {
       $char: "\E05A";
     }
-    @if $filename == star-full {
+    @if $filename == size {
       $char: "\E05B";
     }
-    @if $filename == star-half {
+    @if $filename == spoken-language {
       $char: "\E05C";
     }
-    @if $filename == stop {
+    @if $filename == sportclub {
       $char: "\E05D";
     }
-    @if $filename == subscribe {
+    @if $filename == star-empty {
       $char: "\E05E";
     }
-    @if $filename == tag {
+    @if $filename == star-full {
       $char: "\E05F";
     }
-    @if $filename == target {
+    @if $filename == star-half {
       $char: "\E060";
     }
-    @if $filename == trashcan {
+    @if $filename == stop {
       $char: "\E061";
     }
-    @if $filename == twitter-outline {
+    @if $filename == subscribe {
       $char: "\E062";
     }
-    @if $filename == twitter {
+    @if $filename == tag {
       $char: "\E063";
     }
-    @if $filename == update {
+    @if $filename == target {
       $char: "\E064";
     }
-    @if $filename == url {
+    @if $filename == threads {
       $char: "\E065";
     }
-    @if $filename == user {
+    @if $filename == tiktok {
       $char: "\E066";
     }
-    @if $filename == users {
+    @if $filename == trashcan {
       $char: "\E067";
     }
-    @if $filename == view-grid {
+    @if $filename == twitter-outline {
       $char: "\E068";
     }
-    @if $filename == view-list {
+    @if $filename == twitter {
       $char: "\E069";
     }
-    @if $filename == vimeo {
+    @if $filename == uit-met-vlieg {
       $char: "\E06A";
     }
-    @if $filename == virus {
+    @if $filename == uitpas {
       $char: "\E06B";
     }
-    @if $filename == whatsapp {
+    @if $filename == update {
       $char: "\E06C";
     }
-    @if $filename == wheelchair-no {
+    @if $filename == url {
       $char: "\E06D";
     }
-    @if $filename == wheelchair {
+    @if $filename == user {
       $char: "\E06E";
     }
-    @if $filename == work {
+    @if $filename == users {
       $char: "\E06F";
     }
-    @if $filename == youtube {
+    @if $filename == view-grid {
       $char: "\E070";
     }
+    @if $filename == view-list {
+      $char: "\E071";
+    }
+    @if $filename == vimeo {
+      $char: "\E072";
+    }
+    @if $filename == virus {
+      $char: "\E073";
+    }
+    @if $filename == whatsapp {
+      $char: "\E074";
+    }
+    @if $filename == wheelchair-no {
+      $char: "\E075";
+    }
+    @if $filename == wheelchair {
+      $char: "\E076";
+    }
+    @if $filename == work {
+      $char: "\E077";
+    }
+    @if $filename == youtube {
+      $char: "\E078";
+    }
 
     @return $char;
 }
@@ -549,6 +573,9 @@ $id: random(1000);
 .icon-flickr {
   @include icon(flickr);
 }
+.icon-for-children {
+  @include icon(for-children);
+}
 .icon-fullscreen-enter {
   @include icon(fullscreen-enter);
 }
@@ -642,6 +669,9 @@ $id: random(1000);
 .icon-mobility {
   @include icon(mobility);
 }
+.icon-music {
+  @include icon(music);
+}
 .icon-next {
   @include icon(next);
 }
@@ -693,9 +723,15 @@ $id: random(1000);
 .icon-shopping {
   @include icon(shopping);
 }
+.icon-sign-language {
+  @include icon(sign-language);
+}
 .icon-size {
   @include icon(size);
 }
+.icon-spoken-language {
+  @include icon(spoken-language);
+}
 .icon-sportclub {
   @include icon(sportclub);
 }
@@ -720,6 +756,12 @@ $id: random(1000);
 .icon-target {
   @include icon(target);
 }
+.icon-threads {
+  @include icon(threads);
+}
+.icon-tiktok {
+  @include icon(tiktok);
+}
 .icon-trashcan {
   @include icon(trashcan);
 }
@@ -729,6 +771,12 @@ $id: random(1000);
 .icon-twitter {
   @include icon(twitter);
 }
+.icon-uit-met-vlieg {
+  @include icon(uit-met-vlieg);
+}
+.icon-uitpas {
+  @include icon(uitpas);
+}
 .icon-update {
   @include icon(update);
 }

package/build/styleguide/sass/11-base/grid/_grid.scss

@@ -156,7 +156,7 @@
 }
 
 .row-no-gutter {
-  gap: 0; // sass-lint:disable-line no-misspelled-properties
+  gap: 0;
 }
 
 .col-no-gutter {

package/build/styleguide/sass/11-base/grid/flexbox-grid/mixins/_grid-mixins.scss

@@ -15,7 +15,7 @@
   flex-wrap: wrap;
   width: 100%;
   margin: 0 auto;
-  gap: $gap; // sass-lint:disable-line no-misspelled-properties
+  gap: $gap;
 
   @if type-of($content-well-max-width) == number and $content-well-max-width != 0 and $full-width == "false" {
     max-width: $content-well-max-width;