@solid-design-system/mcp 0.0.1 → 6.28.0

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-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",

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

@@ -50,9 +50,9 @@
     "tags": ["Favoriten", "Wunschliste", "merken"]
   },
   {
-    "technicalId": "",
-    "displayNameDe": "",
-    "tags": []
+    "technicalId": "slide",
+    "displayNameDe": "Folie",
+    "tags": ["Folien", "Folie"]
   },
   {
     "technicalId": "list",
@@ -314,16 +314,16 @@
     "displayNameDe": "einklappen unten",
     "tags": ["verstecken", "komprimieren", "Seitenleiste"]
   },
-  {
-    "technicalId": "bug",
-    "displayNameDe": "Fehler",
-    "tags": ["Mangel", "Problem"]
-  },
   {
     "technicalId": "shopping-cart",
     "displayNameDe": "Einkaufswagen",
     "tags": ["Onlineshop", "Warenkorb", "Erwerb", "Einkauf"]
   },
+  {
+    "technicalId": "bug",
+    "displayNameDe": "Fehler",
+    "tags": ["Mangel", "Problem"]
+  },
   {
     "technicalId": "eraser",
     "displayNameDe": "Radiergummi",
@@ -481,7 +481,7 @@
   },
   {
     "technicalId": "expand-bottom",
-    "displayNameDe": "anzeigen unten",
+    "displayNameDe": "ausklappen unten",
     "tags": ["anzeigen", "Seitenleiste"]
   },
   {
@@ -614,26 +614,26 @@
     "displayNameDe": "Bildschirm Cursor",
     "tags": ["klicken", "auswählen"]
   },
-  {
-    "technicalId": "layers",
-    "displayNameDe": "Ebenen",
-    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
-  },
   {
     "technicalId": "file-read-out",
     "displayNameDe": "Dokument vorlesen",
     "tags": ["vorlesen", "Audio", "Lautstärke"]
   },
   {
-    "technicalId": "collapse-left",
-    "displayNameDe": "einklappen links",
-    "tags": ["komprimieren", "verstecken", "Seitenleiste"]
+    "technicalId": "layers",
+    "displayNameDe": "Ebenen",
+    "tags": ["gruppieren", "Stapel", "mehrere Folien erzeugen"]
   },
   {
     "technicalId": "file-wai",
     "displayNameDe": "Dokument wAI",
     "tags": ["Dokument", "Datei", "wAI"]
   },
+  {
+    "technicalId": "collapse-left",
+    "displayNameDe": "einklappen links",
+    "tags": ["komprimieren", "verstecken", "Seitenleiste"]
+  },
   {
     "technicalId": "download",
     "displayNameDe": "Download",
@@ -1044,16 +1044,16 @@
     "displayNameDe": "antworten",
     "tags": ["Rückmeldung", "Nachricht", "Kommunikation"]
   },
-  {
-    "technicalId": "e-mail-send",
-    "displayNameDe": "E-Mail abschicken",
-    "tags": ["Brief", "E-Mail", "Kommunikation"]
-  },
   {
     "technicalId": "password",
     "displayNameDe": "Passwort",
     "tags": ["sicherheitsgeschützt", "privat", "verschlüsselt"]
   },
+  {
+    "technicalId": "e-mail-send",
+    "displayNameDe": "E-Mail abschicken",
+    "tags": ["Brief", "E-Mail", "Kommunikation"]
+  },
   {
     "technicalId": "e-mail-exclamation",
     "displayNameDe": "E-Mail Ausrufezeichen",

package/metadata/packages/templates/combobox.md

@@ -11,7 +11,7 @@ version: 1.0.0
 ## Template: Simple Suggests
 
 ```html
-<div class="h-[260px] w-[400px]">
+<div class="h-[260px] max-w-[400px]">
   <sd-combobox label="Funds"> ${createFondsOptionsHtml()} </sd-combobox>
 </div>
 ```
@@ -19,7 +19,7 @@ version: 1.0.0
 ## Template: Highlight Query
 
 ```html
-<div class="h-[260px] w-[400px]">
+<div class="h-[260px] max-w-[400px]">
   <sd-combobox label="Funds" class="highlight-combobox" value="g"> ${createFondsOptionsHtml()} </sd-combobox>
 </div>
 <script type="module">
@@ -40,7 +40,7 @@ version: 1.0.0
 ## Template: Multiple Highlight Query
 
 ```html
-<div class="h-[260px] w-[400px]">
+<div class="h-[260px] max-w-[400px]">
   <sd-combobox label="Funds" class="multiple-highlight-combobox"> ${createFondsOptionsHtml()} </sd-combobox>
 </div>
 <script type="module">
@@ -80,7 +80,7 @@ version: 1.0.0
 ## Template: Grouping Query
 
 ```html
-<div class="h-[260px] w-[400px]">
+<div class="h-[260px] max-w-[400px]">
   <sd-combobox label="Group elements" value="g">
     <sd-optgroup label="Funds"> ${createFondsOptionsHtml()} </sd-optgroup>
     <sd-optgroup label="Search Suggestions">

package/metadata/packages/templates/datepicker.md

@@ -9,7 +9,7 @@ version: 1.0.0
 ## Template: Datepicker with a Selected Date and Unavailable Weekends
 
 ```html
-<div class="w-[370px]">
+<div class="max-w-[370px]">
   <sd-datepicker value="2025.11.21" disabled-weekends alignment="right" label="Appointment"></sd-datepicker>
 </div>
 ```
@@ -17,7 +17,7 @@ version: 1.0.0
 ## Template: Datepicker with a Selected Date and Unavailable Dates
 
 ```html
-<div class="w-[370px]">
+<div class="max-w-[370px]">
   <sd-datepicker
     value="2025.11.21"
     disabled-dates="2025.11.04,2025.11.12,2025.11.18,2025.11.26"
@@ -31,7 +31,7 @@ version: 1.0.0
 ## Template: Datepicker with a Selected Range
 
 ```html
-<div class="w-[370px]">
+<div class="max-w-[370px]">
   <sd-datepicker
     value="2025.11.21"
     range

package/metadata/packages/templates/input.md

@@ -10,7 +10,7 @@ version: 1.0.0
 ## Template: Input With Currency Stepper
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[250px]">
   <sd-input label="Currency stepper" id="stepperSampleInput" type="number" spin-buttons min="0" value="0.00">
     <span slot="right" class="text-sm inline-flex items-center">
       <span class="text-neutral-700">EUR</span>