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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 7.0.0-next.1
+
+### Patch Changes
+
+- Fix versioned icons to work with next versions. _[`#3186`](https://github.com/solid-design-system/solid/pull/3186) [`30af3ad`](https://github.com/solid-design-system/solid/commit/30af3ad6d2e8daebeaa9d6a863fdd5794a015da9) [@auroraVasconcelos](https://github.com/auroraVasconcelos)_
+
+## 7.0.0-next.0
+
+## 6.28.0
+
+## 6.27.2
+
 ## 6.27.1
 
 ### Patch Changes

package/metadata/packages/components/sd-datepicker/stories/alignment.md

@@ -4,7 +4,7 @@ Use the `alignment` attribute to define where the flyout should appear:
 - `right`
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" size="lg" alignment="right" value="2025.11.10"></sd-datepicker>
 </div>
 ```

package/metadata/packages/components/sd-datepicker/stories/disabled-dates.md

@@ -1,7 +1,7 @@
 Use the `disable-dates` attribute to manually disable days in your datepicker. If this attribute is active the range selection will not be possible.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker
     label="Label"
     value="2025-11-10"

package/metadata/packages/components/sd-datepicker/stories/disabled-weekends.md

@@ -1,7 +1,7 @@
 Use the `disabled-weekends` attribute to manually disable days in your datepicker.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" disabled-weekends></sd-datepicker>
 </div>
 ```

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

@@ -2,7 +2,7 @@ Use the `disabled` attribute to disable the datepicker.
 **Hint**: Clicks will be suppressed until the disabled state is removed.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" placeholder="Disabled" disabled></sd-datepicker>
 </div>
 ```

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

@@ -2,7 +2,7 @@ Use the `floating-label` attribute to enable a floating label on the datepicker.
 **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 h-[500px] w-[370px]">
+<div class="flex gap-12 h-[500px] max-w-[370px]">
   <sd-datepicker label="Floating Label" floating-label></sd-datepicker>
 </div>
 ```

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

@@ -2,9 +2,13 @@ Use the `help-text` attribute to add a descriptive “help text”.
 For help texts that contain HTML, use the `help-text` slot instead.
 
 ```html
-<div class="flex gap-12 h-[500px] w-[370px] h-[500px]">
-  <sd-datepicker label="Label" help-text="Help text attribute"></sd-datepicker>
-  <sd-datepicker label="Label">
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[500px]">
+  <sd-datepicker
+    label="Label"
+    help-text="Help text attribute"
+    class="min-w-[200px] md:min-w-0 max-w-[370px]"
+  ></sd-datepicker>
+  <sd-datepicker label="Label" class="min-w-[200px] md:min-w-0 max-w-[370px]">
     <div slot="help-text">Help text slot</div>
   </sd-datepicker>
 </div>

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

@@ -1,7 +1,7 @@
 The component gets `invalid` state when the datepicker is not valid.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker id="invalid-example" label="Label" style-on-valid="" required></sd-datepicker>
 </div>
 <script type="module">

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

@@ -2,9 +2,9 @@ Use the `label` attribute to give the datepicker an accessible label.
 For labels that contain HTML, use the `label` slot instead.
 
 ```html
-<div class="flex gap-12 h-[500px]">
-  <sd-datepicker label="Label attribute"></sd-datepicker>
-  <sd-datepicker>
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[500px]">
+  <sd-datepicker label="Label attribute" class="min-w-[200px] md:min-w-0 max-w-[370px]"></sd-datepicker>
+  <sd-datepicker class="min-w-[200px] md:min-w-0 max-w-[370px]">
     <div slot="label">Label slot</div>
   </sd-datepicker>
 </div>

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

@@ -1,7 +1,7 @@
 Use the `placeholder` attribute to add a placeholder text.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" placeholder="Select date"></sd-datepicker>
 </div>
 ```

package/metadata/packages/components/sd-datepicker/stories/range.md

@@ -1,7 +1,7 @@
 Use the `range` attribute to enable range selection.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" range range-start="2025-11-02" range-end="2025-11-12"></sd-datepicker>
 </div>
 ```

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

@@ -1,7 +1,7 @@
 Use the `required` attribute to mark the element as required.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" required></sd-datepicker>
 </div>
 ```

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

@@ -6,7 +6,7 @@ Use the `size` attribute to change the size:
   **Note:** On the `floating-label` variant “sm” size is not available.
 
 ```html
-<div class="flex flex-col gap-4 w-[370px] h-[500px]">
+<div class="flex flex-col gap-4 max-w-[370px] h-[500px]">
   <sd-datepicker size="lg" placeholder="Large" label="Label"></sd-datepicker>
   <sd-datepicker size="md" placeholder="Medium" label="Label"></sd-datepicker>
   <sd-datepicker size="sm" placeholder="Small" label="Label"></sd-datepicker>

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

@@ -2,7 +2,7 @@ The component gets `valid` state when the datepicker is valid.
 Use the `style-on-valid` attribute to automatically indicate and show a valid state.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker id="valid-example" label="Label" value="2025.11.10" style-on-valid=""></sd-datepicker>
 </div>
 <script type="module">

package/metadata/packages/components/sd-datepicker/stories/visible-month.md

@@ -1,7 +1,7 @@
 Use the `view-month` attribute to set the initially visible month.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-datepicker label="Label" view-month="2026-08"></sd-datepicker>
 </div>
 ```

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

@@ -3,7 +3,7 @@ Use the `visually-disabled` attribute to style the component as if it was disa
 **Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
 
 ```html
-<div class="w-[370px] h-[500px]">
+<div class="max-w-[370px] h-[500px]">
   <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
     <sd-datepicker label="Label" placeholder="Visually Disabled" visually-disabled></sd-datepicker>
   </sd-tooltip>

package/metadata/packages/components/sd-input/stories/clearable.md

@@ -1,7 +1,7 @@
 Use the `clearable` attribute to add a clear button when the input has content.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Clearable" clearable spellcheck value="Input text"></sd-input>
 </div>
 ```

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

@@ -1,7 +1,7 @@
 Use the `disabled` attribute to disable the input.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Label" value="Disabled" disabled></sd-input>
 </div>
 ```

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

@@ -2,7 +2,7 @@ Use the `floating-label` attribute to enable a floating label on the input.
 **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="w-[350px]">
+<div class="max-w-[400px]">
   <sd-input label="Floating Label" floating-label></sd-input>
 </div>
 ```

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

@@ -2,9 +2,9 @@ Use the `help-text` attribute to add a descriptive “help text”.
 For help texts that contain HTML, use the `help-text` slot instead.
 
 ```html
-<div class="flex flex-rows gap-12">
-  <sd-input label="Label" help-text="Help text attribute"></sd-input>
-  <sd-input label="Label">
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-input label="Label" help-text="Help text attribute" class="min-w-[200px] md:min-w-0 max-w-[400px]"></sd-input>
+  <sd-input label="Label" class="min-w-[200px] md:min-w-0 max-w-[400px]">
     <div slot="help-text" class="text-lg">Help text slot</div>
   </sd-input>
 </div>

package/metadata/packages/components/sd-input/stories/icon.md

@@ -1,12 +1,12 @@
 Use the `left` or `right` slot to add system icons.
 
 ```html
-<div class="flex flex-rows gap-12">
-  <sd-input label="Label" spellcheck>
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-input label="Label" spellcheck class="min-w-[200px] md:min-w-0 max-w-[400px]">
     <sd-icon label="landscape" name="system/image" slot="left"></sd-icon>
   </sd-input>
 
-  <sd-input label="Label" spellcheck>
+  <sd-input label="Label" spellcheck class="min-w-[200px] md:min-w-0 max-w-[400px]">
     <sd-icon label="landscape" name="system/image" slot="right"></sd-icon>
   </sd-input>
 </div>

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

@@ -2,7 +2,13 @@ The component gets `invalid` state when the form is not valid.
 
 ```html
 <form id="invalid-form">
-  <sd-input id="invalid-input" class="w-[250px]" label="Label" style-on-valid placeholder="Placeholder text"></sd-input>
+  <sd-input
+    id="invalid-input"
+    class="max-w-[400px]"
+    label="Label"
+    style-on-valid
+    placeholder="Placeholder text"
+  ></sd-input>
 </form>
 <script type="module">
   await Promise.all([customElements.whenDefined('sd-input')]).then(() => {

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

@@ -2,9 +2,9 @@ Use the `label` attribute to give the input an accessible label.
 For labels that contain HTML, use the `label` slot instead.
 
 ```html
-<div class="flex flex-row gap-12 items-baseline">
-  <sd-input label="Label attribute" spellcheck></sd-input>
-  <sd-input spellcheck>
+<div class="flex flex-wrap md:flex-nowrap gap-12 items-baseline">
+  <sd-input label="Label attribute" spellcheck class="min-w-[200px] md:min-w-0 max-w-[400px]"></sd-input>
+  <sd-input spellcheck class="min-w-[200px] md:min-w-0 max-w-[400px]">
     <div slot="label" class="text-lg">Label slot</div>
   </sd-input>
 </div>

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

@@ -1,7 +1,7 @@
 Use the `maxlength` attribute to set the maximum length of the input to be valid.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Maxlength" maxlength="25" help-text="25 is the maximum allowed characters" required></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/max.md

@@ -1,7 +1,7 @@
 Use the `max` attribute to set the maximum number value of the input to be valid.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Max" type="number" max="5000" help-text="Maximum value is 5000" required></sd-input>
 </div>
 ```

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

@@ -1,7 +1,7 @@
 Use the `minlength` attribute to set the minimum length of the input to be valid.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Minlength" minlength="5" help-text="5 is the minimum allowed characters" required></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/min.md

@@ -1,7 +1,7 @@
 Use the `min` attribute to set the minimum number value of the input to be valid.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Min" type="number" min="1000" help-text="Minimum value is 1000" required></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/pattern.md

@@ -1,7 +1,7 @@
 Use the `pattern` attribute to use a regular expression to validate the input.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Pattern" pattern="[A-Za-z]{3,}" help-text="Required pattern is [A-Za-z]{3,}" required></sd-input>
 </div>
 ```

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

@@ -1,7 +1,7 @@
 Use the `placeholder` attribute to add a placeholder.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input placeholder="Placeholder example" label="Label" spellcheck></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/read-only.md

@@ -2,7 +2,7 @@ Use the `read-only` attribute to render an input as read only.
 Interaction is enabled, but the textarea cannot be edited. Events will be fired.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Label" value="Read only example" readonly></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/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-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Label" required></sd-input>
 </div>
 ```

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

@@ -6,9 +6,9 @@ Use the `size` attribute to change the size:
   **Note:** On the `floating-label` variant “sm” size is not available.
 
 ```html
-<div class="grid grid-cols-2 gap-12 content-end">
-  <sd-input size="lg" label="Label" placeholder="Large"></sd-input>
-  <sd-input size="md" label="Label" placeholder="Medium"></sd-input>
-  <sd-input size="sm" label="Label" placeholder="Small"></sd-input>
+<div class="flex flex-wrap md:flex-nowrap gap-12">
+  <sd-input size="lg" label="Label" placeholder="Large" class="min-w-[200px] md:min-w-0 max-w-[400px]"></sd-input>
+  <sd-input size="md" label="Label" placeholder="Medium" class="min-w-[200px] md:min-w-0 max-w-[400px]"></sd-input>
+  <sd-input size="sm" label="Label" placeholder="Small" class="min-w-[200px] md:min-w-0 max-w-[400px]"></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/spin-buttons.md

@@ -1,7 +1,7 @@
 Use the `spin-buttons` attribute display custom spin buttons for number inputs.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input
     label="Spin buttons"
     type="number"

package/metadata/packages/components/sd-input/stories/toggle-password.md

@@ -2,7 +2,7 @@ Use the `password-toggle` attribute to add a toggle button that will show the pa
 **Hint:** Only works with `type=password`.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input type="password" label="Toggle password" password-toggle spellcheck></sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/stories/type.md

@@ -1,10 +1,24 @@
 Use the `type` attribute to control the type of input the browser renders.
 
 ```html
-<div class="grid grid-cols-2 gap-12 content-end">
-  <sd-input type="text" placeholder="Lorem ipsum" label="Text (default)" help-text="Default type" spellcheck></sd-input>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-12 content-end">
+  <sd-input
+    type="text"
+    placeholder="Lorem ipsum"
+    label="Text (default)"
+    help-text="Default type"
+    spellcheck
+    class="max-w-[400px]"
+  ></sd-input>
 
-  <sd-input type="search" placeholder="Search term" label="Search" help-text="Use search format" spellcheck></sd-input>
+  <sd-input
+    type="search"
+    placeholder="Search term"
+    label="Search"
+    help-text="Use search format"
+    spellcheck
+    class="max-w-[400px]"
+  ></sd-input>
 
   <sd-input
     type="date"
@@ -12,6 +26,7 @@ Use the `type` attribute to control the type of input the browser renders.
     value="2025-03-01"
     help-text="Value is restricted to date format"
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -20,9 +35,17 @@ Use the `type` attribute to control the type of input the browser renders.
     value="2025-03-01T10:30"
     help-text="Value is restricted to datetime format"
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
-  <sd-input type="time" label="Time" value="10:30" help-text="Value is restricted to time format" spellcheck></sd-input>
+  <sd-input
+    type="time"
+    label="Time"
+    value="10:30"
+    help-text="Value is restricted to time format"
+    spellcheck
+    class="max-w-[400px]"
+  ></sd-input>
 
   <sd-input
     type="number"
@@ -31,6 +54,7 @@ Use the `type` attribute to control the type of input the browser renders.
     help-text="Value is restricted to numbers"
     spin-buttons
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -39,6 +63,7 @@ Use the `type` attribute to control the type of input the browser renders.
     label="Email"
     help-text="Validate with email address format"
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -47,6 +72,7 @@ Use the `type` attribute to control the type of input the browser renders.
     label="Tel"
     help-text="Shows optimized keyboard on touch devices or similar"
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -56,6 +82,7 @@ Use the `type` attribute to control the type of input the browser renders.
     help-text="Use password display format"
     password-toggle
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -66,6 +93,7 @@ Use the `type` attribute to control the type of input the browser renders.
     password-toggle
     password-visible
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 
   <sd-input
@@ -75,6 +103,7 @@ Use the `type` attribute to control the type of input the browser renders.
     help-text="Validate with url format"
     name="url field"
     spellcheck
+    class="max-w-[400px]"
   ></sd-input>
 </div>
 ```

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

@@ -3,7 +3,7 @@ Use the `style-on-valid` attribute to automatically indicate and show a valid st
 
 ```html
 <form id="valid-form">
-  <sd-input id="valid-input" class="w-[250px]" label="Label" style-on-valid value="Input text here"></sd-input>
+  <sd-input id="valid-input" class="max-w-[400px]" label="Label" style-on-valid value="Input text here"></sd-input>
 </form>
 <script type="module">
   await Promise.all([customElements.whenDefined('sd-input')]).then(() => {

package/metadata/packages/components/sd-input/stories/value.md

@@ -1,7 +1,7 @@
 Use the `value` attribute to set the value.
 
 ```html
-<div class="w-[250px]">
+<div class="max-w-[400px]">
   <sd-input label="Label" value="Value example"> </sd-input>
 </div>
 ```

package/metadata/packages/components/sd-input/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-[250px] h-[200px] pt-12">
+<div class="max-w-[400px] h-[200px] pt-12">
   <sd-tooltip content="Visually disabled" trigger="hover focus" size="sm" placement="top">
     <sd-input label="Label" value="Visually disabled" visually-disabled></sd-input>
   </sd-tooltip>

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

@@ -1,7 +1,7 @@
 Use the `clearable` attribute to add a clear button that removes the selected value.
 
 ```html
-<div class="w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select size="lg" label="Label" placement="bottom" clearable="" value="option-1">
     <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/disabled.md

@@ -1,7 +1,7 @@
 Use the `disabled` attribute to disable the select.
 
 ```html
-<div class="w-[400px]">
+<div class="max-w-[400px]">
   <sd-select size="lg" label="Label" placeholder="Disabled" placement="bottom" value="" disabled>
     <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/floating-label.md

@@ -2,7 +2,7 @@ Use the `floating-label` attribute to enable a floating label on the select.
 **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 w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select size="lg" label="Floating Label" floating-label 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/help-text.md

@@ -2,8 +2,15 @@ Use the `help-text` attribute to provide additional context or instructions.
 For help texts that contain HTML, use the `help-text` slot instead.
 
 ```html
-<div class="flex gap-12 h-[500px]">
-  <sd-select size="lg" label="Label" placement="bottom" value="" help-text="Help text attribute">
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[500px]">
+  <sd-select
+    size="lg"
+    label="Label"
+    placement="bottom"
+    value=""
+    help-text="Help text attribute"
+    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>
@@ -11,7 +18,7 @@ For help texts that contain HTML, use the `help-text` slot instead.
     <sd-option value="option-5">Option 5</sd-option>
   </sd-select>
 
-  <sd-select size="lg" label="Label" placement="bottom" value="">
+  <sd-select size="lg" label="Label" placement="bottom" value="" class="w-full min-w-[200px] md:min-w-0 max-w-[400px]">
     <div slot="help-text" class="text-lg">Help text slot</div>
     <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/invalid.md

@@ -1,7 +1,7 @@
 The component gets `invalid` state when the form is not valid.
 
 ```html
-<div class="w-[400px] h-[300px]">
+<div class="max-w-[400px] h-[300px]">
   <sd-select
     size="lg"
     placement="bottom"

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

@@ -2,8 +2,14 @@ Use the `label` attribute to give the select element an accessible label.
 For labels that contain HTML, use the `label` slot instead.
 
 ```html
-<div class="flex gap-12 h-[500px]">
-  <sd-select size="lg" label="Label attribute" placement="bottom" value="">
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[500px]">
+  <sd-select
+    size="lg"
+    label="Label attribute"
+    placement="bottom"
+    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>
@@ -11,7 +17,7 @@ For labels that contain HTML, use the `label` slot instead.
     <sd-option value="option-5">Option 5</sd-option>
   </sd-select>
 
-  <sd-select size="lg" placement="bottom" value="">
+  <sd-select size="lg" placement="bottom" value="" class="w-full min-w-[200px] md:min-w-0 max-w-[400px]">
     <div slot="label" class="text-lg">Label slot</div>
     <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/max-options-visible.md

@@ -4,7 +4,7 @@ Once the maximum number of options is reached, the selection will display a mess
 To remove the limit, set the attribute to `0`.
 
 ```html
-<div class="w-[400px] h-[500px]">
+<div class="max-w-[400px] h-[500px]">
   <sd-select
     size="lg"
     label="Label"