@iqual/nuxt-icms 1.4.9 → 1.5.0

package/components/Blokkli/Button/Element/index.vue

@@ -9,10 +9,17 @@ const props = defineProps<ParagraphIcmsButtonElementFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_button_element',
+  options: {
+    buttonStyle: {
+      type: 'radios',
+      label: 'Style',
+      default: 'normal',
+      options: {
+        normal: 'Normal',
+        focus: 'Focus',
+        minimal: 'Minimal',
+      },
+    },
+  },
 })
-
 </script>
-
-
-
-

package/components/Blokkli/CallToAction/icon.svg

@@ -1,5 +1,10 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M12.8205 19.3335L10.6667 17.1797M12.8205 19.3335C13.8234 18.9521 14.7855 18.4711 15.6923 17.8976M12.8205 19.3335V22.9233C12.8205 22.9233 14.9959 22.5284 15.6923 21.4874C16.4677 20.3243 15.6923 17.8976 15.6923 17.8976M10.6667 17.1797C11.0487 16.1885 11.5298 15.2384 12.1026 14.3438C12.9391 13.0062 14.1039 11.9049 15.4863 11.1447C16.8686 10.3844 18.4224 9.99039 20 10.0002C20 11.953 19.44 15.3848 15.6923 17.8976M10.6667 17.1797L7.07692 17.1797C7.07692 17.1797 7.47179 15.0043 8.51282 14.3079C9.6759 13.5325 12.1026 14.3079 12.1026 14.3079M7.4359 20.4105C6.35897 21.3151 6 24.0002 6 24.0002C6 24.0002 8.68513 23.6413 9.58974 22.5643C10.0995 21.9613 10.0923 21.0351 9.52513 20.4751C9.24607 20.2087 8.87847 20.0548 8.49288 20.0429C8.10729 20.031 7.73089 20.1619 7.4359 20.4105Z" fill="none" stroke="currentColor" stroke-width="1.4359" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.2764 7.3618L11.2764 10.8618C11.107 10.9465 11 11.1196 11 11.309V18.691C11 18.8804 11.107 19.0535 11.2764 19.1382L18.2764 22.6382C18.6088 22.8044 19 22.5627 19 22.191V7.80902C19 7.43733 18.6088 7.19558 18.2764 7.3618Z" fill="currentColor"/>
+<path d="M9.5 11C9.77614 11 10 11.2239 10 11.5V18.5C10 18.7761 9.77614 19 9.5 19H8V25.5C8 25.7761 7.77614 26 7.5 26H5.5C5.22386 26 5 25.7761 5 25.5V19H3.5C3.22386 19 3 18.7761 3 18.5V11.5C3 11.2239 3.22386 11 3.5 11H9.5Z" fill="currentColor"/>
+<path d="M21.5 7C21.7761 7 22 7.22386 22 7.5V13H22.5C22.7761 13 23 13.2239 23 13.5V16.5C23 16.7761 22.7761 17 22.5 17H22V22.5C22 22.7761 21.7761 23 21.5 23H20.5C20.2239 23 20 22.7761 20 22.5V7.5C20 7.22386 20.2239 7 20.5 7H21.5Z" fill="currentColor"/>
+<path d="M24.248 7.57053C24.386 7.33138 24.6918 7.24945 24.931 7.38752C25.1701 7.52559 25.2521 7.83138 25.114 8.07053L24.1125 9.80512C23.9744 10.0443 23.6686 10.1262 23.4295 9.98813C23.1904 9.85006 23.1084 9.54426 23.2465 9.30512L24.248 7.57053Z" fill="currentColor"/>
+<path d="M25.118 21.3647C25.2561 21.6038 25.1742 21.9096 24.935 22.0477C24.6959 22.1858 24.3901 22.1038 24.252 21.8647L23.2521 20.1328C23.1141 19.8937 23.196 19.5879 23.4351 19.4498C23.6743 19.3118 23.9801 19.3937 24.1181 19.6328L25.118 21.3647Z" fill="currentColor"/>
+<path d="M26.934 10.9966C27.1732 10.8586 27.479 10.9405 27.6171 11.1796C27.7551 11.4188 27.6732 11.7246 27.434 11.8627L25.6978 12.8651C25.4586 13.0032 25.1528 12.9212 25.0147 12.6821C24.8767 12.443 24.9586 12.1372 25.1978 11.9991L26.934 10.9966Z" fill="currentColor"/>
+<path d="M27.4279 17.9998C27.667 18.1379 27.749 18.4437 27.6109 18.6828C27.4728 18.922 27.167 19.0039 26.9279 18.8658L25.198 17.8671C24.9588 17.729 24.8769 17.4232 25.015 17.1841C25.153 16.9449 25.4588 16.863 25.698 17.0011L27.4279 17.9998Z" fill="currentColor"/>
+<path d="M28 14.5C28.2761 14.5 28.5 14.7239 28.5 15C28.5 15.2761 28.2761 15.5 28 15.5H26C25.7239 15.5 25.5 15.2761 25.5 15C25.5 14.7239 25.7239 14.5 26 14.5H28Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/CallToAction/index.vue

@@ -9,7 +9,33 @@ const props = defineProps<ParagraphIcmsLayoutCallToActionFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_call_to_action',
-  globalOptions: ['spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme',
+  ],
+  options: {
+    callToActionVariant: {
+      type: 'radios',
+      label: 'Variant',
+      default: 'default',
+      displayAs: 'icons',
+      options: {
+        default: {
+          label: 'Default',
+          icon: 'icon-blokkli-option-call-to-action-variant-default',
+        },
+        fullwidth: {
+          label: 'Full-width',
+          icon: 'icon-blokkli-option-call-to-action-variant-fullwidth',
+        },
+        feature: {
+          label: 'Feature',
+          icon: 'icon-blokkli-option-call-to-action-variant-feature',
+        },
+      },
+    },
+  },
 })
-
 </script>

package/components/Blokkli/Card/Element/icon.svg

@@ -1,6 +1,5 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.65" y="1.65" width="24.7" height="24.7" rx="1.08333" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
-<path d="M1 17.25L27 17.25" fill="none" stroke="currentColor" stroke-width="1.3"/>
-<path d="M1.86664 1.86666L26.5 17" fill="none" stroke="currentColor" stroke-width="1.3"/>
-<path d="M26.1334 1.86666L2 17" fill="none" stroke="currentColor" stroke-width="1.3"/>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="19" width="20" height="2" rx="0.5" fill="currentColor"/>
+<rect x="5" y="23" width="14" height="2" rx="0.5" fill="currentColor"/>
+<rect x="5" y="5" width="20" height="12" rx="0.5" fill="currentColor"/>
 </svg>

package/components/Blokkli/Card/Layout/Nested/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <ParagraphCardLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutCardsFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_cards',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: ['spacingTop', 'spacingBottom', 'alignHorizontalFull'],
+  options: {
+    cardVariant: {
+      type: 'radios',
+      label: 'Card variant',
+      default: 'feature',
+      displayAs: 'icons',
+      options: {
+        feature: {
+          label: 'Feature',
+          icon: 'icon-blokkli-option-card-variant-feature',
+        },
+        text: {
+          label: 'Center',
+          icon: 'icon-blokkli-option-card-variant-text',
+        },
+        spotlight: {
+          label: 'Bottom',
+          icon: 'icon-blokkli-option-card-variant-spotlight',
+        },
+      },
+    },
+  },
+})
+</script>

package/components/Blokkli/Card/Layout/icon.svg

@@ -1,8 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<rect x="5.75" y="9.75" width="14.5" height="14.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M5 19L21 19" fill="none" stroke="currentColor" stroke-width="1.5"/>
-<path d="M6 10L20 19" fill="none" stroke="currentColor" stroke-width="1.5"/>
-<path d="M20 10L6 19" fill="none" stroke="currentColor" stroke-width="1.5"/>
+<g clip-path="url(#clip0_67_373)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM3.5 25C3.22386 25 3 25.2239 3 25.5V26.5C3 26.7761 3.22386 27 3.5 27H16.5C16.7761 27 17 26.7761 17 26.5V25.5C17 25.2239 16.7761 25 16.5 25H3.5ZM3.5 21C3.22386 21 3 21.2239 3 21.5V22.5C3 22.7761 3.22386 23 3.5 23H22.5C22.7761 23 23 22.7761 23 22.5V21.5C23 21.2239 22.7761 21 22.5 21H3.5ZM3.5 7C3.22386 7 3 7.22386 3 7.5V18.5C3 18.7761 3.22386 19 3.5 19H22.5C22.7761 19 23 18.7761 23 18.5V7.5C23 7.22386 22.7761 7 22.5 7H3.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_373">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/components/Blokkli/Card/Layout/index.vue

@@ -9,7 +9,12 @@ const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_cards',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'cardVariant',
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme',
+  ],
 })
-
 </script>

package/components/Blokkli/Collapsible/Element/icon.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.2676 6.43953C25.4629 6.24427 25.7794 6.24429 25.9746 6.43953L26.6817 7.14656C26.8769 7.34182 26.8769 7.65833 26.6817 7.85359L23.8535 10.6817C23.8292 10.7061 23.8031 10.7279 23.7754 10.7462C23.5813 10.8744 23.3174 10.8526 23.1465 10.6817L20.3184 7.85359C20.1231 7.65833 20.1231 7.34182 20.3184 7.14656L21.0254 6.43953C21.2207 6.24432 21.5372 6.24429 21.7325 6.43953L23.5 8.20711L25.2676 6.43953Z" fill="currentColor"/>
+<rect x="4" y="6" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="4" y="18" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="4" y="10" width="6" height="2" rx="0.5" fill="currentColor"/>
+<rect x="4" y="22" width="6" height="2" rx="0.5" fill="currentColor"/>
+</svg>

package/components/Blokkli/Collapsible/Element/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <ParagraphCollapsibleElement v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsCollapsibleElementFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsCollapsibleElementFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_collapsible_element',
+})
+</script>

package/components/Blokkli/Collapsible/Layout/icon.svg

@@ -0,0 +1,11 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_67_437)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM3.5 24C3.22386 24 3 24.2239 3 24.5V25.5C3 25.7761 3.22386 26 3.5 26H8.5C8.77614 26 9 25.7761 9 25.5V24.5C9 24.2239 8.77614 24 8.5 24H3.5ZM3.5 20C3.22386 20 3 20.2239 3 20.5V21.5C3 21.7761 3.22386 22 3.5 22H12.5C12.7761 22 13 21.7761 13 21.5V20.5C13 20.2239 12.7761 20 12.5 20H3.5ZM3.5 12C3.22386 12 3 12.2239 3 12.5V13.5C3 13.7761 3.22386 14 3.5 14H8.5C8.77614 14 9 13.7761 9 13.5V12.5C9 12.2239 8.77614 12 8.5 12H3.5ZM21.9746 8.43945C21.7794 8.24423 21.4628 8.24422 21.2676 8.43945L19.5 10.207L17.7324 8.43945C17.5372 8.24423 17.2207 8.24427 17.0254 8.43945L16.3184 9.14648C16.1231 9.34174 16.1231 9.65825 16.3184 9.85352L19.1465 12.6816C19.2197 12.7548 19.3098 12.801 19.4043 12.8193C19.4674 12.8316 19.5326 12.8316 19.5957 12.8193C19.6587 12.8071 19.72 12.7827 19.7754 12.7461C19.803 12.7278 19.8292 12.706 19.8535 12.6816L22.6816 9.85352C22.8769 9.65825 22.8769 9.34174 22.6816 9.14648L21.9746 8.43945ZM3.5 8C3.22386 8 3 8.22386 3 8.5V9.5C3 9.77614 3.22386 10 3.5 10H12.5C12.7761 10 13 9.77614 13 9.5V8.5C13 8.22386 12.7761 8 12.5 8H3.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_437">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/Blokkli/Collapsible/Layout/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <ParagraphCollapsibleLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutCollapsibleFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutCollapsibleFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_collapsible',
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme',
+  ],
+  options: {
+    collapsibleVariant: {
+      type: 'radios',
+      label: 'Collapsible variant',
+      default: 'tabs',
+      options: {
+        tabs: 'Tabs',
+        accordion: 'Accordion',
+        carousel: 'Carousel',
+      },
+    },
+  },
+})
+</script>

package/components/Blokkli/Contact/icon.svg

@@ -1,5 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M19.9995 20.9791V23.3877C20.0004 23.6113 19.9574 23.8327 19.8732 24.0375C19.7891 24.2424 19.6657 24.4263 19.5109 24.5775C19.3561 24.7286 19.1734 24.8437 18.9744 24.9154C18.7754 24.987 18.5646 25.0136 18.3554 24.9935C16.0346 24.725 13.8053 23.8808 11.8467 22.5286C10.0244 21.2959 8.47945 19.6512 7.3215 17.7113C6.0469 15.6168 5.25368 13.2321 5.00612 10.7504C4.98727 10.5283 5.01206 10.3046 5.0789 10.0933C5.14574 9.88203 5.25317 9.6879 5.39436 9.52325C5.53554 9.35861 5.70738 9.22706 5.89893 9.13699C6.09049 9.04691 6.29756 9.00029 6.50697 9.00008H8.76956C9.13558 8.99624 9.49041 9.13422 9.76793 9.3883C10.0455 9.64237 10.2267 9.99521 10.278 10.381C10.3734 11.1519 10.5506 11.9087 10.8059 12.6371C10.9074 12.9245 10.9293 13.2368 10.8692 13.5371C10.809 13.8373 10.6693 14.1129 10.4665 14.3312L9.50867 15.3509C10.5823 17.3609 12.1457 19.0252 14.0338 20.1682L14.9917 19.1485C15.1967 18.9326 15.4556 18.7839 15.7377 18.7198C16.0197 18.6558 16.3131 18.6792 16.583 18.7872C17.2673 19.059 17.9782 19.2476 18.7023 19.3492C19.0687 19.4042 19.4033 19.6007 19.6424 19.9012C19.8816 20.2017 20.0087 20.5853 19.9995 20.9791Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.9993 20.4713V23.7831C26.0006 24.0905 25.9404 24.395 25.8225 24.6766C25.7048 24.9583 25.532 25.2112 25.3153 25.4191C25.0986 25.6268 24.8428 25.7851 24.5642 25.8837C24.2856 25.9821 23.9905 26.0187 23.6976 25.9911C20.4485 25.6219 17.3274 24.4611 14.5854 22.6018C12.0342 20.9069 9.87124 18.6454 8.25011 15.978C6.46567 13.0981 5.35516 9.81913 5.00857 6.4068C4.98218 6.10141 5.01689 5.79382 5.11046 5.50328C5.20404 5.21279 5.35444 4.94586 5.55211 4.71947C5.74976 4.49309 5.99034 4.3122 6.25851 4.18836C6.52669 4.0645 6.81659 4.0004 7.10977 4.00011H10.2774C10.7898 3.99483 11.2866 4.18455 11.6751 4.53391C12.0637 4.88326 12.3174 5.36841 12.3892 5.89887C12.5228 6.95886 12.7709 7.99946 13.1283 9.00101C13.2704 9.39618 13.301 9.8256 13.2169 10.2385C13.1326 10.6513 12.937 11.0302 12.6531 11.3304L11.3122 12.7325C12.8152 15.4962 15.004 17.7846 17.6473 19.3563L18.9884 17.9542C19.2754 17.6573 19.6379 17.4529 20.0328 17.3647C20.4276 17.2767 20.8384 17.3089 21.2162 17.4574C22.1743 17.8311 23.1695 18.0904 24.1833 18.2301C24.6962 18.3058 25.1647 18.576 25.4994 18.9891C25.8343 19.4023 26.0122 19.9298 25.9993 20.4713Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/Contact/index.vue

@@ -9,7 +9,12 @@ const props = defineProps<ParagraphIcmsLayoutContactFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_contact',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
+    'colorScheme',
+  ],
 })
-
 </script>

package/components/Blokkli/Downloads/Nested/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ParagraphDownloads v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutDownloadsFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutDownloadsFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_downloads',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
+  ],
+})
+</script>

package/components/Blokkli/Downloads/icon.svg

@@ -1,5 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M11.5921 17.7047C11.8944 18.1093 12.2801 18.444 12.723 18.6863C13.166 18.9285 13.6558 19.0725 14.1592 19.1086C14.6627 19.1447 15.168 19.072 15.6409 18.8954C16.1138 18.7189 16.5432 18.4425 16.9 18.0852L19.0119 15.9712C19.6531 15.3066 20.0079 14.4166 19.9999 13.4928C19.9918 12.569 19.6217 11.6853 18.9691 11.032C18.3164 10.3787 17.4336 10.0082 16.5107 10.0001C15.5878 9.99211 14.6987 10.3472 14.0349 10.9891L12.824 12.1941M14.4079 16.2953C14.1056 15.8907 13.7199 15.556 13.277 15.3137C12.834 15.0715 12.3442 14.9275 11.8408 14.8914C11.3373 14.8553 10.832 14.928 10.3591 15.1046C9.88624 15.2811 9.45681 15.5575 9.09998 15.9148L6.98807 18.0288C6.3469 18.6934 5.99211 19.5834 6.00013 20.5072C6.00815 21.431 6.37833 22.3147 7.03094 22.968C7.68355 23.6213 8.56638 23.9918 9.48927 23.9999C10.4122 24.0079 11.3013 23.6528 11.9651 23.0109L13.1689 21.8059" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<g clip-path="url(#clip0_67_382)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM3.5 23C3.22386 23 3 23.2239 3 23.5V26.5C3 26.7761 3.22386 27 3.5 27H22.5C22.7761 27 23 26.7761 23 26.5V23.5C23 23.2239 22.7761 23 22.5 23H3.5ZM12.5 9.70703C12.2239 9.70706 12.0001 9.93099 12 10.207V17.6885L9.11133 14.7988C8.91607 14.6036 8.59858 14.6036 8.40332 14.7988L7.69629 15.5059C7.50139 15.701 7.50146 16.0177 7.69629 16.2129L12.6465 21.1631C12.8417 21.358 13.1583 21.358 13.3535 21.1631L18.3037 16.2129C18.4985 16.0177 18.4986 15.701 18.3037 15.5059L17.5967 14.7988C17.4014 14.6036 17.0839 14.6036 16.8887 14.7988L14 17.6885V10.207C13.9999 9.93099 13.7761 9.70706 13.5 9.70703H12.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_382">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/components/Blokkli/Downloads/index.vue

@@ -3,14 +3,18 @@
 </template>
 
 <script lang="ts" setup>
-
 import type { ParagraphIcmsLayoutDownloadsFragment } from '#graphql-operations'
 
 const props = defineProps<ParagraphIcmsLayoutDownloadsFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_downloads',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
+    'colorScheme',
+  ],
 })
-
 </script>

package/components/Blokkli/FAQ/Element/icon.svg

@@ -1,3 +1,3 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.4774 21H11.4998M5 5.95332C5.53604 4.29605 6.57424 2.90285 7.93311 2.01726C9.29199 1.13168 10.8851 0.810038 12.4339 1.10858C13.9828 1.40713 15.3888 2.30686 16.4062 3.6505C17.4237 4.99413 17.9878 6.69619 18 8.45913C18 13.4708 11.299 15.9766 11.299 15.9766" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5205 18.9867V18.4858C11.5205 17.3378 11.6096 16.4228 11.7877 15.741C11.9658 15.0591 12.2295 14.513 12.5788 14.1025C12.9281 13.685 13.3562 13.3093 13.863 12.9753C14.3014 12.6831 14.6918 12.4013 15.0342 12.13C15.3836 11.8586 15.6575 11.5699 15.8562 11.2638C16.0616 10.9576 16.1644 10.6097 16.1644 10.2201C16.1644 9.87223 16.0822 9.5661 15.9178 9.30171C15.7534 9.03732 15.5308 8.83207 15.25 8.68596C14.9692 8.53985 14.6575 8.46679 14.3151 8.46679C13.9452 8.46679 13.6027 8.55376 13.2877 8.7277C12.9795 8.90164 12.7295 9.14168 12.5377 9.44782C12.3527 9.75395 12.2603 10.1088 12.2603 10.5123H7C7.0137 8.98166 7.35616 7.73972 8.0274 6.78653C8.69863 5.82638 9.58904 5.12366 10.6986 4.67837C11.8082 4.22612 13.0274 4 14.3562 4C15.8219 4 17.1301 4.21917 18.2808 4.6575C19.4315 5.08887 20.339 5.74288 21.0034 6.61954C21.6678 7.48925 22 8.57812 22 9.88615C22 10.728 21.8562 11.469 21.5685 12.1091C21.2877 12.7423 20.8938 13.3023 20.387 13.7894C19.887 14.2694 19.3014 14.7078 18.6301 15.1044C18.137 15.3966 17.7226 15.6992 17.387 16.0123C17.0514 16.3185 16.7979 16.6698 16.6267 17.0664C16.4555 17.456 16.3699 17.9292 16.3699 18.4858V18.9867H11.5205ZM14.0274 26C13.2329 26 12.5514 25.7182 11.9829 25.1546C11.4212 24.5841 11.1438 23.8918 11.1507 23.0778C11.1438 22.2846 11.4212 21.6063 11.9829 21.0427C12.5514 20.4791 13.2329 20.1973 14.0274 20.1973C14.7808 20.1973 15.4452 20.4791 16.0205 21.0427C16.6027 21.6063 16.8973 22.2846 16.9041 23.0778C16.8973 23.6205 16.7568 24.1145 16.4829 24.5598C16.2158 24.9981 15.8664 25.3495 15.4349 25.6139C15.0034 25.8713 14.5342 26 14.0274 26Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/FAQ/Layout/icon.svg

@@ -1,5 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M12.9827 24H12.9998M8 13.715C8.41234 12.472 9.21095 11.4271 10.2562 10.7629C11.3015 10.0988 12.527 9.85753 13.7184 10.0814C14.9098 10.3053 15.9914 10.9801 16.774 11.9879C17.5567 12.9956 17.9906 14.2721 18 15.5943C18 19.3531 12.8454 21.2324 12.8454 21.2324" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<g clip-path="url(#clip0_67_480)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM12.1533 21.252C11.5707 21.252 11.0712 21.4833 10.6543 21.9443C10.2425 22.4054 10.0389 22.9605 10.0439 23.6094C10.039 24.2753 10.2425 24.8419 10.6543 25.3086C11.0711 25.7695 11.5708 26 12.1533 26C12.525 26 12.8691 25.8942 13.1855 25.6836C13.5019 25.4673 13.7582 25.1799 13.9541 24.8213C14.1549 24.4571 14.2576 24.0532 14.2627 23.6094C14.2577 22.9605 14.042 22.4054 13.6152 21.9443C13.1933 21.4832 12.7058 21.252 12.1533 21.252ZM12.3945 8C11.4201 8 10.5256 8.18467 9.71191 8.55469C8.89832 8.91902 8.2461 9.49476 7.75391 10.2803C7.26171 11.0601 7.01006 12.0759 7 13.3281H10.8574C10.8574 12.998 10.925 12.7075 11.0605 12.457C11.2012 12.2066 11.3853 12.0105 11.6113 11.8682C11.8423 11.726 12.0932 11.6543 12.3643 11.6543C12.6153 11.6543 12.8439 11.7145 13.0498 11.834C13.2557 11.9535 13.4195 12.1216 13.54 12.3379C13.6605 12.5541 13.7207 12.8045 13.7207 13.0889C13.7207 13.4077 13.6448 13.6929 13.4941 13.9434C13.3485 14.1937 13.1476 14.4295 12.8916 14.6514C12.6405 14.8734 12.3546 15.1047 12.0332 15.3438C11.6615 15.617 11.347 15.9241 11.0908 16.2656C10.8347 16.6015 10.6413 17.0486 10.5107 17.6064C10.3802 18.1642 10.3154 18.9126 10.3154 19.8516V20.2617H13.8711V19.8516C13.8711 19.3963 13.934 19.0091 14.0596 18.6904C14.1851 18.366 14.3711 18.0785 14.6172 17.8281C14.8633 17.572 15.1668 17.324 15.5283 17.085C16.0205 16.7605 16.4507 16.4025 16.8174 16.0098C17.1891 15.6113 17.4777 15.1528 17.6836 14.6348C17.8945 14.1112 18 13.505 18 12.8164C18 11.7464 17.7566 10.8551 17.2695 10.1436C16.7823 9.42629 16.1163 8.89103 15.2725 8.53809C14.4286 8.17947 13.4694 8 12.3945 8Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_480">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/components/Blokkli/FAQ/Layout/index.vue

@@ -10,11 +10,11 @@ const props = defineProps<ParagraphIcmsLayoutFaqFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_faq',
   globalOptions: [
-    'spacingBottom',
     'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
     'colorScheme',
-    'buttonAlignment',
   ],
 })
-
 </script>

package/components/Blokkli/Gallery/Nested/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <ParagraphGallery v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_gallery',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: ['spacingTop', 'spacingBottom', 'alignHorizontalFull'],
+})
+</script>

package/components/Blokkli/Gallery/icon.svg

@@ -1,5 +1,5 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M6.77778 24H7.55556M10.6667 24H11.4444M14.5556 24H15.3333M18.4444 24H19.2222M7.55556 10H18.4444C19.3036 10 20 10.6964 20 11.5556V19.3333C20 20.1924 19.3036 20.8889 18.4444 20.8889H7.55556C6.69645 20.8889 6 20.1924 6 19.3333V11.5556C6 10.6964 6.69645 10 7.55556 10Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.5 12C17.7761 12 18 12.2239 18 12.5V27.5C18 27.7417 17.8286 27.9437 17.6006 27.9902C17.5681 27.9969 17.5344 28 17.5 28H2.5C2.46557 28 2.43189 27.9969 2.39941 27.9902C2.20392 27.9503 2.04966 27.7961 2.00977 27.6006C2.00314 27.5681 2 27.5344 2 27.5V12.5C2 12.4656 2.00314 12.4319 2.00977 12.3994C2.05629 12.1714 2.25829 12 2.5 12H17.5ZM4 21.127L8.12012 16.4336C8.32075 16.205 8.67695 16.2067 8.875 16.4375L16 24.749V14H4V21.127Z" fill="currentColor"/>
+<path d="M22.5 7C22.7761 7 23 7.22386 23 7.5V22.5C23 22.7417 22.8286 22.9437 22.6006 22.9902C22.5681 22.9969 22.5344 23 22.5 23H19V17.415L21 19.749V9H9V11H7V7.5C7 7.46557 7.00314 7.43189 7.00977 7.39941C7.05629 7.17145 7.25829 7 7.5 7H22.5Z" fill="currentColor"/>
+<path d="M27.5 2C27.7761 2 28 2.22386 28 2.5V17.5C28 17.7417 27.8286 17.9437 27.6006 17.9902C27.5681 17.9969 27.5344 18 27.5 18H24V12.415L26 14.749V4H14V6H12V2.5C12 2.46557 12.0031 2.43189 12.0098 2.39941C12.0563 2.17145 12.2583 2 12.5 2H27.5Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/Gallery/index.vue

@@ -10,7 +10,12 @@ const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_gallery',
-  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'colorScheme'
+  ],
 })
 
 </script>

package/components/Blokkli/HeroImage/icon.svg

@@ -1,5 +1,3 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M20 19.3333L17.5998 16.9331C17.3081 16.6414 16.9125 16.4776 16.5 16.4776C16.0875 16.4776 15.6919 16.6414 15.4002 16.9331L8.33333 24M7.55556 10H18.4444C19.3036 10 20 10.6964 20 11.5556V22.4444C20 23.3036 19.3036 24 18.4444 24H7.55556C6.69645 24 6 23.3036 6 22.4444V11.5556C6 10.6964 6.69645 10 7.55556 10ZM12.2222 14.6667C12.2222 15.5258 11.5258 16.2222 10.6667 16.2222C9.80756 16.2222 9.11111 15.5258 9.11111 14.6667C9.11111 13.8076 9.80756 13.1111 10.6667 13.1111C11.5258 13.1111 12.2222 13.8076 12.2222 14.6667Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.5 6C26.7761 6 27 6.22386 27 6.5V23.5C27 23.7761 26.7761 24 26.5 24H3.5C3.22386 24 3 23.7761 3 23.5V6.5C3 6.22386 3.22386 6 3.5 6H26.5ZM12.5 16C12.2239 16 12 16.2239 12 16.5V17.5C12 17.7761 12.2239 18 12.5 18H17.5C17.7761 18 18 17.7761 18 17.5V16.5C18 16.2239 17.7761 16 17.5 16H12.5ZM7.5 12C7.22386 12 7 12.2239 7 12.5V13.5C7 13.7761 7.22386 14 7.5 14H22.5C22.7761 14 23 13.7761 23 13.5V12.5C23 12.2239 22.7761 12 22.5 12H7.5Z" fill="currentColor"/>
 </svg>

package/components/Blokkli/HeroImage/index.vue

@@ -9,7 +9,28 @@ const props = defineProps<ParagraphIcmsLayoutHeroImageFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_hero_image',
-  globalOptions: ['buttonAlignment', 'textShadow', 'colorMode', 'reverseColumns', 'imageAlignment'],
+  globalOptions: ['textShadow', 'colorMode', 'alignHorizontalFull'],
+  options: {
+    imageAlignment: {
+      type: 'radios',
+      label: 'Image alingment',
+      default: 'center',
+      displayAs: 'icons',
+      options: {
+        top: {
+          label: 'Top',
+          icon: 'icon-blokkli-option-align-v-top',
+        },
+        center: {
+          label: 'Center',
+          icon: 'icon-blokkli-option-align-v-center',
+        },
+        bottom: {
+          label: 'Bottom',
+          icon: 'icon-blokkli-option-align-v-bottom',
+        },
+      },
+    },
+  },
 })
-
 </script>

package/components/Blokkli/IconText/Element/icon.svg

@@ -1,5 +1,8 @@
-<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 5H17" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M1 9H17" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M1 13H17" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12" y="8" width="14" height="2" rx="0.5" fill="currentColor"/>
+<path d="M4.35355 8.47488C4.54882 8.27961 4.8654 8.27961 5.06066 8.47488L5.41421 8.82843L7.18198 7.06066C7.37724 6.8654 7.69382 6.8654 7.88909 7.06066C8.08435 7.25592 8.08435 7.57251 7.88909 7.76777L5.76777 9.88909C5.5725 10.0844 5.25592 10.0844 5.06066 9.88909L4.35355 9.18198C4.15829 8.98672 4.15829 8.67014 4.35355 8.47488Z" fill="currentColor"/>
+<path d="M4.35355 14.4749C4.54882 14.2796 4.8654 14.2796 5.06066 14.4749L5.41421 14.8284L7.18198 13.0607C7.37724 12.8654 7.69382 12.8654 7.88909 13.0607C8.08435 13.2559 8.08435 13.5725 7.88909 13.7678L5.76777 15.8891C5.5725 16.0844 5.25592 16.0844 5.06066 15.8891L4.35355 15.182C4.15829 14.9867 4.15829 14.6701 4.35355 14.4749Z" fill="currentColor"/>
+<path d="M4.35355 20.4749C4.54882 20.2796 4.8654 20.2796 5.06066 20.4749L5.41421 20.8284L7.18198 19.0607C7.37724 18.8654 7.69382 18.8654 7.88909 19.0607C8.08435 19.2559 8.08435 19.5725 7.88909 19.7678L5.76777 21.8891C5.5725 22.0844 5.25592 22.0844 5.06066 21.8891L4.35355 21.182C4.15829 20.9867 4.15829 20.6701 4.35355 20.4749Z" fill="currentColor"/>
+<rect x="12" y="20" width="14" height="2" rx="0.5" fill="currentColor"/>
+<rect x="12" y="14" width="14" height="2" rx="0.5" fill="currentColor"/>
 </svg>

package/components/Blokkli/IconText/Layout/Nested/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ParagraphIconTextLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextcolIconlistFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTextcolIconlistFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_textcol_iconlist',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
+  ],
+})
+</script>

package/components/Blokkli/IconText/Layout/icon.svg

@@ -1,7 +1,11 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
-<path d="M7 13H19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M7 17H19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M7 21H19" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<g clip-path="url(#clip0_67_462)">
+<path opacity="0.5" d="M29.5 0C29.7761 1.93276e-07 30 0.223858 30 0.5V25.5C30 25.7761 29.7761 26 29.5 26H26V4.5C26 4.22386 25.7761 4 25.5 4H4V0.5C4 0.223858 4.22386 1.00665e-08 4.5 0H29.5Z" fill="currentColor"/>
+<path d="M25.5 4C25.7761 4 26 4.22386 26 4.5V29.5C26 29.7761 25.7761 30 25.5 30H0.5C0.223858 30 1.00666e-08 29.7761 0 29.5V4.5C1.93278e-07 4.22386 0.223858 4 0.5 4H25.5ZM6.88867 22.0605C6.69339 21.8656 6.37681 21.8654 6.18164 22.0605L4.41406 23.8281L4.06055 23.4746C3.86531 23.2796 3.54872 23.2795 3.35352 23.4746C3.15832 23.6698 3.15844 23.9864 3.35352 24.1816L4.06055 24.8887C4.25581 25.0839 4.57232 25.0839 4.76758 24.8887L6.88867 22.7676C7.08393 22.5723 7.08393 22.2558 6.88867 22.0605ZM10.5 23C10.2239 23 10 23.2239 10 23.5V24.5C10 24.7761 10.2239 25 10.5 25H22.5C22.7761 25 23 24.7761 23 24.5V23.5C23 23.2239 22.7761 23 22.5 23H10.5ZM6.88867 16.0605C6.69339 15.8656 6.37681 15.8654 6.18164 16.0605L4.41406 17.8281L4.06055 17.4746C3.86531 17.2796 3.54872 17.2795 3.35352 17.4746C3.15832 17.6698 3.15844 17.9864 3.35352 18.1816L4.06055 18.8887C4.25581 19.0839 4.57232 19.0839 4.76758 18.8887L6.88867 16.7676C7.08393 16.5723 7.08393 16.2558 6.88867 16.0605ZM10.5 17C10.2239 17 10 17.2239 10 17.5V18.5C10 18.7761 10.2239 19 10.5 19H22.5C22.7761 19 23 18.7761 23 18.5V17.5C23 17.2239 22.7761 17 22.5 17H10.5ZM6.88867 10.0605C6.69339 9.86555 6.37681 9.86537 6.18164 10.0605L4.41406 11.8281L4.06055 11.4746C3.86531 11.2796 3.54872 11.2795 3.35352 11.4746C3.15832 11.6698 3.15844 11.9864 3.35352 12.1816L4.06055 12.8887C4.25581 13.0839 4.57232 13.0839 4.76758 12.8887L6.88867 10.7676C7.08393 10.5723 7.08393 10.2558 6.88867 10.0605ZM10.5 11C10.2239 11 10 11.2239 10 11.5V12.5C10 12.7761 10.2239 13 10.5 13H22.5C22.7761 13 23 12.7761 23 12.5V11.5C23 11.2239 22.7761 11 22.5 11H10.5Z" fill="currentColor"/>
+</g>
+<defs>
+<clipPath id="clip0_67_462">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
 </svg>

package/components/Blokkli/IconText/Layout/index.vue

@@ -10,11 +10,11 @@ const props = defineProps<ParagraphIcmsLayoutTextcolIconlistFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_textcol_iconlist',
   globalOptions: [
-    'spacingBottom',
     'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'imageFormat',
     'colorScheme',
-    'buttonAlignment',
   ],
 })
-
 </script>

package/components/Blokkli/Introduction/Nested/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <ParagraphIntroduction v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextImageIntroFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTextImageIntroFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_text_image_intro',
+  renderFor: [
+    {
+      parentBundle: 'icms_collapsible_element',
+    },
+  ],
+  globalOptions: [
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalReduced',
+    'imageFormat',
+  ],
+})
+</script>