@solid-design-system/mcp 6.27.1 → 7.0.0-next.1

package/metadata/packages/components/sd-select/stories/multiple.md

@@ -2,7 +2,7 @@ Use the `multiple` attribute to allow multiple options to be selected.
 Use `--tag-max-width` to set the maximum width of the tags and to show an ellipsis, e.g. `<sd-select style="--tag-max-width: 40px">`. The default value is `15ch`
 
 ```html
-<div class="w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select size="lg" label="Label" placement="bottom" multiple="" value="option-1 option-2">
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>

package/metadata/packages/components/sd-select/stories/placeholder.md

@@ -1,7 +1,7 @@
 Use the `placeholder` attribute to show a placeholder when no option is selected.
 
 ```html
-<div class="w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select size="lg" label="Label" placeholder="Placeholder example" placement="bottom" value="">
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>

package/metadata/packages/components/sd-select/stories/placement.md

@@ -4,8 +4,14 @@ Use the `placement` attribute to define where the select panel should appear:
 - `top`
 
 ```html
-<div class="flex items-center gap-12 h-[500px]">
-  <sd-select class="self-baseline" size="lg" label="Label" placement="bottom" value="">
+<div class="flex flex-wrap md:flex-nowrap items-center gap-12 h-[500px]">
+  <sd-select
+    class="self-baseline w-full min-w-[200px] md:min-w-0 max-w-[400px]"
+    size="lg"
+    label="Label"
+    placement="bottom"
+    value=""
+  >
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>
     <sd-option value="option-3">Option 3</sd-option>
@@ -13,7 +19,7 @@ Use the `placement` attribute to define where the select panel should appear:
     <sd-option value="option-5">Option 5</sd-option>
   </sd-select>
 
-  <sd-select size="lg" label="Label" placement="top" value="">
+  <sd-select size="lg" label="Label" placement="top" value="" class="w-full min-w-[200px] md:min-w-0 max-w-[400px]">
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>
     <sd-option value="option-3">Option 3</sd-option>

package/metadata/packages/components/sd-select/stories/required.md

@@ -1,7 +1,7 @@
 Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
 
 ```html
-<div class="w-[400px] h-[400px]">
+<div class="max-w-[400px] h-[400px]">
   <sd-select size="lg" label="Required" placeholder="Please select" placement="bottom" value="" required="">
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>

package/metadata/packages/components/sd-select/stories/size.md

@@ -6,8 +6,15 @@ Use the `size` attribute to change the size. It will cascade to slotted `sd-opti
   **Note:** On the `floating-label` variant “sm” size is not available.
 
 ```html
-<div class="flex gap-12 h-[500px]">
-  <sd-select size="lg" label="Label" placeholder="Large" placement="bottom" value="" class="test">
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[500px]">
+  <sd-select
+    size="lg"
+    label="Label"
+    placeholder="Large"
+    placement="bottom"
+    value=""
+    class="test w-full min-w-[200px] md:min-w-0 max-w-[400px]"
+  >
     <sd-option value="option-1" size="lg">Option 1</sd-option>
     <sd-option value="option-2" size="lg">Option 2</sd-option>
     <sd-option value="option-3" size="lg">Option 3</sd-option>
@@ -15,7 +22,14 @@ Use the `size` attribute to change the size. It will cascade to slotted `sd-opti
     <sd-option value="option-5" size="lg">Option 5</sd-option>
   </sd-select>
 
-  <sd-select size="md" label="Label" placeholder="Medium" placement="bottom" value="" class="test">
+  <sd-select
+    size="md"
+    label="Label"
+    placeholder="Medium"
+    placement="bottom"
+    value=""
+    class="test w-full min-w-[200px] md:min-w-0 max-w-[400px]"
+  >
     <sd-option value="option-1" size="md">Option 1</sd-option>
     <sd-option value="option-2" size="md">Option 2</sd-option>
     <sd-option value="option-3" size="md">Option 3</sd-option>
@@ -23,7 +37,14 @@ Use the `size` attribute to change the size. It will cascade to slotted `sd-opti
     <sd-option value="option-5" size="md">Option 5</sd-option>
   </sd-select>
 
-  <sd-select size="sm" label="Label" placeholder="Small" placement="bottom" value="">
+  <sd-select
+    size="sm"
+    label="Label"
+    placeholder="Small"
+    placement="bottom"
+    value=""
+    class="w-full min-w-[200px] md:min-w-0 max-w-[400px]"
+  >
     <sd-option value="option-1" size="sm">Option 1</sd-option>
     <sd-option value="option-2" size="sm">Option 2</sd-option>
     <sd-option value="option-3" size="sm">Option 3</sd-option>

package/metadata/packages/components/sd-select/stories/use-tags.md

@@ -2,7 +2,7 @@ Use the `useTags` attribute to display selected options as tags using the `sd-ta
 **Hint:** It requires the `multiple` attribute to be set.
 
 ```html
-<div class="w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select size="lg" label="Label" placement="bottom" multiple="" value="option-1 option-2" useTags>
     <sd-option value="option-1">Option 1</sd-option>
     <sd-option value="option-2">Option 2</sd-option>

package/metadata/packages/components/sd-select/stories/valid.md

@@ -2,7 +2,7 @@ The component gets `valid` state when the input is valid.
 Use the `style-on-valid` attribute to automatically indicate and show a valid state.
 
 ```html
-<div class="w-[400px] h-[400px]">
+<div class="max-w-[400px] h-[400px]">
   <sd-select
     size="lg"
     placement="bottom"

package/metadata/packages/components/sd-select/stories/visually-disabled.md

@@ -3,7 +3,7 @@ Use the `visually-disabled` attribute to style the component as if it was disabl
 **Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
 
 ```html
-<div class="w-[400px] h-[200px] mt-12">
+<div class="max-w-[400px] h-[200px] mt-12">
   <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm">
     <sd-select size="lg" label="Label" placeholder="Visually disabled" placement="bottom" value="" visually-disabled>
       <sd-option value="option-1">Option 1</sd-option>

package/metadata/packages/components/sd-teaser/stories/breakpoint.md

@@ -6,7 +6,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
 ```html
 <div class="flex gap-8 flex-col">
   <sd-teaser breakpoint="0">
-    <h3 slot="headline">Horizontal</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
     <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
     <p>
       Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
@@ -16,7 +16,7 @@ Use the `breakpoint` attribute to change the teaser's layout at a specific break
   </sd-teaser>
 
   <sd-teaser breakpoint="9999" class="w-[256px]">
-    <h3 slot="headline">Vertical</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Vertical</h3>
     <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
     <p>
       Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim

package/metadata/packages/components/sd-teaser/stories/default-and-headline-slot.md

@@ -4,7 +4,7 @@
 
 ```html
 <sd-teaser>
-  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
     reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt

package/metadata/packages/components/sd-teaser/stories/distribution.md

@@ -2,7 +2,7 @@ Use the `--distribution-media` and `--distribution-content` CSS properties to ad
 
 ```html
 <sd-teaser style="--distribution-media: 20%; --distribution-content: 80%;">
-  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim

package/metadata/packages/components/sd-teaser/stories/inset.md

@@ -2,7 +2,7 @@ Use the `inset` attribute to create a teaser with an inset padding if the contex
 
 ```html
 <sd-teaser inset variant="primary-100">
-  <h3 slot="headline">Teaser with inset Padding</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with inset Padding</h3>
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim
     reprehenderit aliquip officia in minim. Eu ipsum pariatur dolor. Do ex in cupidatat anim aliqua sint voluptate sunt

package/metadata/packages/components/sd-teaser/stories/media-slot.md

@@ -3,7 +3,7 @@ Teasers accept a `media` slot to display images or videos.
 
 ```html
 <sd-teaser>
-  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" style="width:100%; height: auto;" />
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim

package/metadata/packages/components/sd-teaser/stories/meta-slot.md

@@ -2,7 +2,7 @@ Use the `meta` slot to add additional content to the teaser.
 
 ```html
 <sd-teaser>
-  <h3 slot="headline">Lorem ipsum sic semper</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Lorem ipsum sic semper</h3>
   <div slot="meta">
     <time class="sd-meta sd-meta--pipe" datetime="2023-01-01">01.01.2023</time>
     <span class="sd-meta">Author name</span>

package/metadata/packages/components/sd-teaser/stories/reverse.md

@@ -3,7 +3,7 @@ Use the `reversed-layout` attribute to invert the horizontal layout.
 
 ```html
 <sd-teaser reversed-layout>
-  <h3 slot="headline">Horizontal</h3>
+  <h3 slot="headline" class="sd-headline sd-headline--size-lg">Horizontal</h3>
   <img slot="media" src="./placeholders/images/architecture.jpg" alt="" class="w-full h-auto" />
   <p>
     Quis ut ex cupidatat proident cillum ullamco ea aute ad laborum aliqua incididunt sint ipsum. Elit enim

package/metadata/packages/components/sd-teaser/stories/variant.md

@@ -9,23 +9,27 @@ Use the `variant` attribute to use the appropriate teaser for your context:
 ```html
 <div class="grid grid-cols-2 gap-12">
   <sd-teaser variant="white" inset>
-    <h3 slot="headline">Teaser with white background</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with white background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="white border-neutral-400">
-    <h3 slot="headline">Teaser with white background and border neutral-400</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">
+      Teaser with white background and border neutral-400
+    </h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="neutral-100" inset>
-    <h3 slot="headline">Teaser with neutral-100 background</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with neutral-100 background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="primary-100" inset>
-    <h3 slot="headline">Teaser with primary-100 background</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg">Teaser with primary-100 background</h3>
     <p class="sd-paragraph">Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.</p>
   </sd-teaser>
   <sd-teaser variant="primary" inset>
-    <h3 slot="headline">Teaser with primary background</h3>
+    <h3 slot="headline" class="sd-headline sd-headline--size-lg sd-headline--inverted">
+      Teaser with primary background
+    </h3>
     <p class="sd-paragraph sd-paragraph--inverted">
       Lorem ipsum dolor sit amet, consetetur sadi pscing elitr, sed diam nonumy eirmod tempor.
     </p>

package/metadata/packages/components/sd-textarea/stories/disabled.md

@@ -1,7 +1,7 @@
 Use the `disabled` attribute to disable the textarea.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea size="lg" label="Label" placeholder="Input text disabled" rows="4" spellcheck disabled></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/floating-label.md

@@ -2,7 +2,14 @@ Use the `floating-label` attribute to enable a floating label on the text-area.
 **Note:** Floating labels only work with the `label` attribute. The `label` slot is not supported. Only the `lg` and `md` sizes are available.
 
 ```html
-<div class="flex gap-12">
-  <sd-textarea size="lg" label="Floating Label" floating-label rows="4" spellcheck class="w-full"></sd-textarea>
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-textarea
+    size="lg"
+    label="Floating Label"
+    floating-label
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/help-text.md

@@ -2,9 +2,15 @@ Use the `help-text` attribute to provide an accessible help text for the textare
 For help texts that contain HTML, use the `help-text` slot instead.
 
 ```html
-<div class="flex gap-12">
-  <sd-textarea size="lg" label="Label" help-text="Help text attribute" rows="4" class="w-full"></sd-textarea>
-  <sd-textarea size="lg" label="Label" rows="4" spellcheck class="w-full">
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-textarea
+    size="lg"
+    label="Label"
+    help-text="Help text attribute"
+    rows="4"
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
+  <sd-textarea size="lg" label="Label" rows="4" spellcheck class="w-full min-w-[200px] md:min-w-0 max-w-[500px]">
     <div slot="help-text" class="text-lg">Help text slot</div>
   </sd-textarea>
 </div>

package/metadata/packages/components/sd-textarea/stories/invalid.md

@@ -1,7 +1,7 @@
 The component gets `invalid` state when the form is not valid.
 
 ```html
-<form class="w-[500px]">
+<form class="max-w-[500px]">
   <sd-textarea
     id="invalid-textarea"
     value=""

package/metadata/packages/components/sd-textarea/stories/label.md

@@ -2,9 +2,15 @@ Use the `label` attribute to provide an accessible label for the textarea elemen
 For labels that contain HTML, use the `label` slot instead.
 
 ```html
-<div class="flex gap-12">
-  <sd-textarea size="lg" label="Label attribute" rows="4" spellcheck class="w-full"></sd-textarea>
-  <sd-textarea size="lg" rows="4" spellcheck class="w-full">
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-textarea
+    size="lg"
+    label="Label attribute"
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
+  <sd-textarea size="lg" rows="4" spellcheck class="w-full min-w-[200px] md:min-w-0 max-w-[500px]">
     <div slot="label" class="text-lg">Label slot</div>
   </sd-textarea>
 </div>

package/metadata/packages/components/sd-textarea/stories/max-length.md

@@ -1,7 +1,7 @@
 Use the `maxlength` attribute to set a maximum length for the textarea to be valid.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea
     value=""
     size="lg"

package/metadata/packages/components/sd-textarea/stories/min-length.md

@@ -1,7 +1,7 @@
 Use the `minlength` attribute to set a minimum length for the textarea to be valid.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea
     value=""
     size="lg"

package/metadata/packages/components/sd-textarea/stories/placeholder.md

@@ -1,7 +1,7 @@
 Use the `placeholder` attribute to add a placeholder.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea size="lg" label="Label" placeholder="Placeholder example" rows="4" spellcheck></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/readonly.md

@@ -3,7 +3,7 @@ Interaction is enabled, but the textarea cannot be edited.
 Events will be fired.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea
     value="Read only example Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod."
     size="lg"

package/metadata/packages/components/sd-textarea/stories/required.md

@@ -1,7 +1,7 @@
 Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
 
 ```html
-<div class="w-[500px]">
+<div class="max-w-[500px]">
   <sd-textarea size="lg" label="Required" rows="4" required spellcheck></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/rows.md

@@ -1,11 +1,29 @@
 Use the `rows` attribute to set the number of rows.
 
 ```html
-<div class="flex gap-12">
-  <sd-textarea size="lg" label="Label" rows="4" spellcheck></sd-textarea>
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-textarea
+    size="lg"
+    label="Label"
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 
-  <sd-textarea size="lg" label="Label" rows="8" spellcheck></sd-textarea>
+  <sd-textarea
+    size="lg"
+    label="Label"
+    rows="8"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 
-  <sd-textarea size="lg" label="Label" rows="12" spellcheck></sd-textarea>
+  <sd-textarea
+    size="lg"
+    label="Label"
+    rows="12"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/size.md

@@ -6,11 +6,32 @@ Use the `size` attribute to change the size:
   **Note:** On the `floating-label` variant “sm” size is not available.
 
 ```html
-<div class="flex gap-12">
-  <sd-textarea value="Large" size="lg" label="Label" rows="4" spellcheck></sd-textarea>
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-textarea
+    value="Large"
+    size="lg"
+    label="Label"
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 
-  <sd-textarea value="Medium" size="md" label="Label" rows="4" spellcheck></sd-textarea>
+  <sd-textarea
+    value="Medium"
+    size="md"
+    label="Label"
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 
-  <sd-textarea value="Small" size="sm" label="Label" rows="4" spellcheck></sd-textarea>
+  <sd-textarea
+    value="Small"
+    size="sm"
+    label="Label"
+    rows="4"
+    spellcheck
+    class="w-full min-w-[200px] md:min-w-0 max-w-[500px]"
+  ></sd-textarea>
 </div>
 ```

package/metadata/packages/components/sd-textarea/stories/valid.md

@@ -1,7 +1,7 @@
 The component gets `valid` state when the input is valid. Use the `style-on-valid` attribute to automatically indicate and show a valid state.
 
 ```html
-<form class="w-[500px]">
+<form class="max-w-[500px]">
   <sd-textarea
     id="valid-textarea"
     value="Input text here"

package/metadata/packages/components/sd-textarea/stories/visually-disabled.md

@@ -3,7 +3,7 @@ Use the `visually-disabled` attribute to style the component as if it was disabl
 **Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
 
 ```html
-<div class="w-[500px] mt-12">
+<div class="max-w-[500px] mt-12">
   <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm">
     <sd-textarea
       size="lg"

package/metadata/packages/icons/default/content.json

@@ -244,6 +244,11 @@
     "displayNameDe": "Quadrate",
     "tags": ["Viereck", "Geometrie", "Würfel"]
   },
+  {
+    "technicalId": "speech-bubble-question",
+    "displayNameDe": "Sprechblase Frage",
+    "tags": ["Fragen", "Frage", "FAQ"]
+  },
   {
     "technicalId": "puzzle",
     "displayNameDe": "Puzzel",
@@ -844,6 +849,11 @@
     "displayNameDe": "Wertpapier",
     "tags": ["beglaubigt", "Anteilsschein", "Wertpapiere", "Dokument"]
   },
+  {
+    "technicalId": "wave",
+    "displayNameDe": "Welle",
+    "tags": ["Trend", "Tendenz", "Altersvorsorge"]
+  },
   {
     "technicalId": "wind-energy",
     "displayNameDe": "Windenergie",
@@ -1169,6 +1179,11 @@
     "displayNameDe": "Wecker",
     "tags": ["Uhr", "Deadline", "dringend", "Alarm", "Eile"]
   },
+  {
+    "technicalId": "wind",
+    "displayNameDe": "Wind",
+    "tags": ["Wandel", "Altersvorsorge", "Veränderung"]
+  },
   {
     "technicalId": "commen-ground",
     "displayNameDe": "Schnittmenge",
@@ -1319,16 +1334,16 @@
     "displayNameDe": "Alarm",
     "tags": ["Eile", "Notfall", "Deadline", "Uhr", "dringend"]
   },
-  {
-    "technicalId": "yen",
-    "displayNameDe": "Yen",
-    "tags": ["Japan", "Geld", "Symbol", "Währung"]
-  },
   {
     "technicalId": "checkbox",
     "displayNameDe": "Checkbox",
     "tags": ["fertig", "erledigt", "Haken", "abhaken"]
   },
+  {
+    "technicalId": "yen",
+    "displayNameDe": "Yen",
+    "tags": ["Japan", "Geld", "Symbol", "Währung"]
+  },
   {
     "technicalId": "badge",
     "displayNameDe": "Abzeichen",
@@ -1459,6 +1474,11 @@
     "displayNameDe": "Gerät drehen",
     "tags": ["Handy", "umdrehen", "Device", "kippen"]
   },
+  {
+    "technicalId": "lighthouse",
+    "displayNameDe": "Leutturm",
+    "tags": ["Orientierung", "Sicherheit", "Zuverlässigkeit", "Altersvorsorge"]
+  },
   {
     "technicalId": "face-neutral",
     "displayNameDe": "Gesicht neutral",
@@ -1537,7 +1557,7 @@
   {
     "technicalId": "beaver",
     "displayNameDe": "Biber",
-    "tags": []
+    "tags": ["Gemeinschaftssinn", "kreative Gestaltungskraft", "Fleiß"]
   },
   {
     "technicalId": "airplane",
@@ -1629,6 +1649,11 @@
     "displayNameDe": "Bulle/Bär",
     "tags": ["Baisse", "Kurse", "Hausse", "Aktien"]
   },
+  {
+    "technicalId": "circles-concentric-2",
+    "displayNameDe": "Kreise konzentrisch 2",
+    "tags": ["Zukunftsschmiede", "Entwicklungsraum", "ZS-Campus"]
+  },
   {
     "technicalId": "skyscraper-measures",
     "displayNameDe": "Hochhaus Maße",
@@ -1724,16 +1749,16 @@
     "displayNameDe": "Flussdiagramm",
     "tags": ["Ablauf", "Prozess", "Projekt"]
   },
-  {
-    "technicalId": "house-percent",
-    "displayNameDe": "Haus Prozent",
-    "tags": ["Immobilien", "Quoten", "mieten", "Vermietungsquote"]
-  },
   {
     "technicalId": "person-newspaper",
     "displayNameDe": "Person Zeitung",
     "tags": ["Neuigkeiten", "News", "Magazin", "Zeitung"]
   },
+  {
+    "technicalId": "house-percent",
+    "displayNameDe": "Haus Prozent",
+    "tags": ["Immobilien", "Quoten", "mieten", "Vermietungsquote"]
+  },
   {
     "technicalId": "house-protective-shield",
     "displayNameDe": "Haus Schutzschild",
@@ -2179,6 +2204,11 @@
     "displayNameDe": "Handschlag",
     "tags": ["partnerschaftliches Unternehmen", "Vertragsabschluss", "Partnerschaft", "Partner"]
   },
+  {
+    "technicalId": "person-mountain-goal",
+    "displayNameDe": "Person Berg/Ziel",
+    "tags": ["ZS-Campus", "Zukunftsschmiede", "Persönliche Wirksamkeit"]
+  },
   {
     "technicalId": "group-presentation",
     "displayNameDe": "Gruppe Vorstellung",