@solid-design-system/mcp 0.0.1

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

@@ -0,0 +1,29 @@
+The component gets `invalid` state when the form is not valid.
+
+```html
+<div class="h-[300px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-combobox
+    size="lg"
+    placement="bottom"
+    label="Label"
+    placeholder="Please search and select"
+    style-on-valid=""
+    value=""
+    required=""
+    class="invalid-example"
+  >
+    <sd-option class="option" value="option-1">Option 1</sd-option>
+    <sd-option class="option" value="option-2">Option 2</sd-option>
+    <sd-option class="option" value="option-3">Option 3</sd-option>
+  </sd-combobox>
+</div>
+
+<script>
+  var invalidSelect = document.querySelector('.invalid-example');
+  setTimeout(() => {
+    invalidSelect.checkValidity();
+    invalidSelect.reportValidity();
+    invalidSelect.setCustomValidity('Error text');
+  }, 500);
+</script>
+```

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

@@ -0,0 +1,26 @@
+Use the `label` attribute to give the combobox element an accessible label.
+For labels that contain HTML, use the `label` slot instead.
+
+```html
+<div class="flex flex-wrap md:flex-nowrap gap-6">
+  <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px] h-[350px]">
+    <sd-combobox size="lg" label="Label" placement="bottom" value="" class="w-full">
+      <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>
+      <sd-option value="option-4">Option 4</sd-option>
+      <sd-option value="option-5">Option 5</sd-option>
+    </sd-combobox>
+  </div>
+  <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px] h-[350px]">
+    <sd-combobox size="lg" placement="bottom" value="" class="w-full">
+      <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>
+      <sd-option value="option-3">Option 3</sd-option>
+      <sd-option value="option-4">Option 4</sd-option>
+      <sd-option value="option-5">Option 5</sd-option>
+    </sd-combobox>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-combobox/stories/max-options-visible.md

@@ -0,0 +1,23 @@
+Use the `max-options-visible` attribute to define the maximum number of selected options that will be visible.
+**Hint:** It requires the `multiple` and `useTags` attributes to be set.<br />
+Once the maximum number of options is reached, the selection will display a message indicating how many additional options have been selected.<br />
+To remove the limit, set the attribute to `0`.
+
+```html
+<div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[700px]">
+  <sd-combobox
+    size="lg"
+    label="Funds name"
+    placement="bottom"
+    multiple
+    value="BBBank_Dynamik_Union BBBank_Kontinuität_Union BBBank_Nachhaltigkeit_Union"
+    max-options-visible="2"
+  >
+    <sd-option value="BBBank_Dynamik_Union" checkbox>BBBank Dynamik Union</sd-option>
+    <sd-option value="BBBank_Kontinuität_Union" checkbox>BBBank Kontinuität Union</sd-option>
+    <sd-option value="BBBank_Nachhaltigkeit_Union" checkbox>BBBank Nachhaltigkeit Union</sd-option>
+    <sd-option value="BBBank_Wachstum_Union" checkbox>BBBank Wachstum Union</sd-option>
+    <sd-option value="BBBank_Zukunft_Union" checkbox>BBBank Zukunft Union</sd-option>
+  </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,24 @@
+Use the `multiple` attribute to allow multiple options to be selected.
+To inform your users about their selected options tags are displayed.
+Use Backspace to remove the last selected option.
+Use `--tag-max-width` to set the maximum width of the tags and to show an ellipsis, e.g. `<sd-combobox style="--tag-max-width: 40px">`. The default value is `15ch`.
+**Hint:** If you really don't want to show tags, you can hide them with CSS via `::part(tags)`.
+
+```html
+<div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[700px]">
+  <sd-combobox
+    size="lg"
+    label="Funds name"
+    placement="bottom"
+    multiple
+    value="BBBank_Dynamik_Union BBBank_Kontinuität_Union"
+    style="--tag-max-width: 100px"
+  >
+    <sd-option value="BBBank_Dynamik_Union" checkbox>BBBank Dynamik Union</sd-option>
+    <sd-option value="BBBank_Kontinuität_Union" checkbox>BBBank Kontinuität Union</sd-option>
+    <sd-option value="BBBank_Nachhaltigkeit_Union" checkbox>BBBank Nachhaltigkeit Union</sd-option>
+    <sd-option value="BBBank_Wachstum_Union" checkbox>BBBank Wachstum Union</sd-option>
+    <sd-option value="BBBank_Zukunft_Union" checkbox>BBBank Zukunft Union</sd-option>
+  </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,13 @@
+Use the `placeholder` attribute to show a placeholder when no option is selected.
+
+```html
+<div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-combobox 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>
+    <sd-option value="option-3">Option 3</sd-option>
+    <sd-option value="option-4">Option 4</sd-option>
+    <sd-option value="option-5">Option 5</sd-option>
+  </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,29 @@
+Use the `placement` attribute to define where the combobox panel should appear:
+
+- `bottom` (default)
+- `top`
+
+```html
+<div class="flex flex-wrap md:flex-nowrap items-center gap-12 h-[400px]">
+  <sd-combobox
+    class="self-baseline 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>
+    <sd-option value="option-4">Option 4</sd-option>
+    <sd-option value="option-5">Option 5</sd-option>
+  </sd-combobox>
+  <sd-combobox class="min-w-[200px] md:min-w-0 max-w-[400px]" size="lg" label="Label" placement="top" 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>
+    <sd-option value="option-4">Option 4</sd-option>
+    <sd-option value="option-5">Option 5</sd-option>
+  </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,20 @@
+Use the `required` attribute to mark the element as required. This can be used for form validation purposes.
+
+```html
+<div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-combobox
+    size="lg"
+    label="Required"
+    placeholder="Please search and select"
+    placement="bottom"
+    value=""
+    required=""
+  >
+    <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>
+    <sd-option value="option-4">Option 4</sd-option>
+    <sd-option value="option-5">Option 5</sd-option>
+  </sd-combobox>
+</div>
+```

package/metadata/packages/components/sd-combobox/stories/search.md

@@ -0,0 +1,13 @@
+Use the `type="search"` to control the type of input the browser renders.
+
+```html
+<div class="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-combobox size="lg" label="Label" placement="bottom" type="search" 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>
+    <sd-option value="option-4">Option 4</sd-option>
+    <sd-option value="option-5">Option 5</sd-option>
+  </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,38 @@
+Use the `size` attribute to change the size. It will cascade to slotted `sd-option` elements:
+
+- `lg` (default)
+- `md`
+- `sm`
+  **Note:** On the `floating-label` variant “sm” size is not available.
+
+```html
+<div class="flex flex-wrap md:flex-nowrap gap-12 h-[400px]">
+  <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+    <sd-combobox size="lg" label="Label" placeholder="Large" placement="bottom" value="" class="test">
+      <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>
+      <sd-option value="option-4" size="lg">Option 4</sd-option>
+      <sd-option value="option-5" size="lg">Option 5</sd-option>
+    </sd-combobox>
+  </div>
+  <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+    <sd-combobox size="md" label="Label" placeholder="Medium" placement="bottom" value="" class="test">
+      <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>
+      <sd-option value="option-4" size="md">Option 4</sd-option>
+      <sd-option value="option-5" size="md">Option 5</sd-option>
+    </sd-combobox>
+  </div>
+  <div class="flex-1 min-w-[200px] md:min-w-0 max-w-[400px]">
+    <sd-combobox size="sm" label="Label" placeholder="Small" placement="bottom" value="">
+      <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>
+      <sd-option value="option-4" size="sm">Option 4</sd-option>
+      <sd-option value="option-5" size="sm">Option 5</sd-option>
+    </sd-combobox>
+  </div>
+</div>
+```

package/metadata/packages/components/sd-combobox/stories/suggestion-container-height.md

@@ -0,0 +1,12 @@
+The height of the filtered options list can be customized by setting the max-height on the listbox part of the combobox.
+
+```html
+<div class="h-[260px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <style>
+    #max-height::part(listbox) {
+      max-height: 100px;
+    }
+  </style>
+  <sd-combobox label="Preferred color" id="max-height" value="g"> ${createColorOptionsHtml()} </sd-combobox>
+</div>
+```

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

@@ -0,0 +1,29 @@
+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="h-[400px] min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-combobox
+    size="lg"
+    placement="bottom"
+    label="Label"
+    placeholder="Please search and select"
+    style-on-valid=""
+    value="option-1"
+    class="valid-example"
+  >
+    <sd-option class="option" value="option-1">Option 1</sd-option>
+    <sd-option class="option" value="option-2">Option 2</sd-option>
+    <sd-option class="option" value="option-3">Option 12</sd-option>
+  </sd-combobox>
+</div>
+
+<script>
+  var validSelect = document.querySelector('.valid-example');
+  var options = validSelect.querySelectorAll('.option');
+  setTimeout(() => {
+    validSelect.checkValidity();
+    validSelect.reportValidity();
+  }, 500);
+</script>
+```

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

@@ -0,0 +1,17 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="h-[200px] pt-12 min-w-[200px] md:min-w-0 max-w-[400px]">
+  <sd-tooltip content="Visually Disabled" trigger="hover focus" size="sm" placement="top">
+    <sd-combobox size="lg" label="Label" placeholder="Visually disabled" placement="bottom" value="" visually-disabled>
+      <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>
+      <sd-option value="option-4">Option 4</sd-option>
+      <sd-option value="option-5">Option 5</sd-option>
+    </sd-combobox>
+  </sd-tooltip>
+</div>
+```

package/metadata/packages/components/sd-datepicker/info.md

@@ -0,0 +1,159 @@
+## Overview
+
+`<sd-datepicker>` — Used to enter or select a date or a range of dates using a calendar view.
+
+## API
+
+### Examples
+
+Use the components tool by passing the args `component` and `example` for any of these combinations:
+
+- component: sd-datepicker, example: size
+- component: sd-datepicker, example: alignment
+- component: sd-datepicker, example: label
+- component: sd-datepicker, example: floating-label
+- component: sd-datepicker, example: placeholder
+- component: sd-datepicker, example: disabled
+- component: sd-datepicker, example: visually-disabled
+- component: sd-datepicker, example: help-text
+- component: sd-datepicker, example: required
+- component: sd-datepicker, example: valid
+- component: sd-datepicker, example: invalid
+- component: sd-datepicker, example: disabled-weekends
+- component: sd-datepicker, example: disabled-dates
+- component: sd-datepicker, example: range
+- component: sd-datepicker, example: visible-month
+
+### Key Properties
+
+- prop.locale: string, default='en-US' — Used for formatting and announcements (e.g., 'en-US', 'de-DE').
+- prop.value: string|null, default=null — Selected date when not in range mode.
+  Eg: `value="2025.11.10"` or `value="2025-11-10"` (both accepted)
+- prop.range: boolean, default=false — Enables date range selection when true.
+- prop.rangeStart [attr: range-start]: string|null, default=null — Range start date when in range mode.
+  Eg: `range-start="2025.11.10"` or `range-start="2025-11-10"` (both accepted)
+- prop.rangeEnd [attr: range-end]: string|null, default=null — Range end date when in range mode.
+  Eg: `range-end="2025.11.10"` or `range-end="2025-11-10"` (both accepted)
+- prop.allowSameDayRange: boolean, default=false — Allows selecting the same start and end date when true.
+- prop.min: string|number|Date|undefined, default=undefined — Minimum selectable date
+  Eg: `min="2025.11.10"` or `min="2025-11-10"` (both accepted)
+- prop.max: string|number|Date|undefined, default=undefined — Maximum selectable date
+  Eg: `max="2025.11.10"` or `max="2025-11-10"` (both accepted)
+- prop.viewMonth [attr: view-month]: Date|null, default=null — The month initially displayed by the calendar grid.
+  Eg: `view-month="2026-07"` or `view-month="2026.07"`
+- prop.firstDayOfWeek: number|null, default=null — First day of the week (0=Sun .. 6=Sat). If null, defaults to 1 (Monday).
+- prop.disabledWeekends [attr: disabled-weekends]: boolean, default=false — When true, weekends (Saturday/Sunday) are disabled.
+- prop.disabledDates [attr: disabled-dates]: string[]|string, default=[] — List of disabled dates.
+  Eg: `disabled-dates="2025-10-31,2025-11-11"` or `disabled-dates="2025.10.31,2025.11.11"` (both accepted)
+- prop.isDateDisabled: ((d: Date) => boolean)|null, default=null — Custom predicate that can disable specific dates at runtime.
+- prop.size: 'lg'|'md'|'sm', default='lg' — Size of the input and calendar visuals.
+- prop.alignment: 'left'|'right', default='left' — Horizontal alignment of the flyout relative to the input.
+- prop.label: string, default='' — Text label for the input. Can be overridden with slot="label".
+- prop.helpText [attr: help-text]: string, default='' — Help text shown below the input. Can be overridden with slot="help-text".
+- prop.floatingLabel [attr: floating-label]: boolean, default=false — Enables the floating label behavior for the input.
+- prop.disabled: boolean, default=false — Disables the control entirely when true.
+- prop.required: boolean, default=false — Makes the input a required field.
+- prop.visuallyDisabled [attr: visually-disabled]: boolean, default=false — Makes the control non-interactive visually (like disabled) without disabling it functionally.
+- prop.styleOnValid [attr: style-on-valid]: boolean, default=false — When true, applies success styling for valid selections.
+- prop.readonly: boolean, default=false — Makes the input read-only (non-editable) when true.
+- prop.placement: 'top'|'bottom', default='bottom' — Preferred placement of the flyout relative to the input (top|bottom).
+- prop.placeholder: string, default='' — Placeholder text for the input when no date is selected.
+- prop.name: string, default='' — The name of the datepicker, submitted as a name/value pair with form data.
+- prop.form: string, default='' — By default, form controls are associated with the nearest containing `<form>` element.
+  This attribute allows you to place the form control outside of a form and associate it
+  with the form that has this `id`.
+- prop.hasFocus: boolean, default=false — True when the input or calendar has focus.
+- prop.showValidStyle: boolean, default=false — Whether to show the valid styling state.
+- prop.showInvalidStyle: boolean, default=false — Whether to show the invalid styling state.
+- prop.currentPlacement: — Actual placement currently used by the flyout.
+- prop.dir: 'ltr'|'rtl'|'auto' — The element's directionality.
+- prop.lang: string — The element's language.
+
+### Events
+
+- event.sd-change: Emitted when the date selection changes.
+- event.sd-range-select: Emitted when the date range selection changes.
+- event.sd-select: Emitted when the date selection changes.
+- event.sd-datepicker-close: Emitted when the datepicker is closed.
+- event.sd-focus: Emitted when the datepicker is focused.
+- event.sd-blur: Emitted when the datepicker is blurred.
+- event.sd-month-change: Emitted when the month is changed.
+- event.sd-month-year: Emitted when the year is changed.
+
+### Slots
+
+- slot.default: The default slot.
+- slot.label: The label for the date input.
+- slot.help-text: The help text, displayed below the input.
+- slot.tooltip: The tooltip icon and content.
+
+### CSS Parts
+
+- part.datepicker: The component's base wrapper.
+- part.header: The header containing the month/year and navigation buttons.
+- part.prev-year-button: The button to go to the previous year.
+- part.prev-month-button: The button to go to the previous month.
+- part.month-label: The month and year label.
+- part.next-month-button: The button to go to the next month.
+- part.next-year-button: The button to go to the next year.
+- part.grid: The calendar grid container.
+- part.weekday: Each weekday label in the calendar header.
+- part.day: Each day button in the calendar grid.
+- part.form-control: The form control wrapper around the input.
+- part.form-control-label: The label for the input.
+- part.form-control-input: The input element.
+- part.border: The border around the input.
+- part.invalid-icon: The icon shown when the input is invalid.
+- part.valid-icon: The icon shown when the input is valid.
+- part.form-control-help-text: The help text, displayed below the input.
+
+## Guidelines
+
+### Use Cases
+
+- Reservations & Scheduling: Select or enter a specific date for bookings, appointments, or events.
+- Data Filtering & Analysis: Choose a start and end date to define a time range for reports, trends, or historical records.
+
+#### Default Datepicker
+
+Use the “default” variant when clarity, scannability, and accessibility are your primary concerns.
+
+- Long or descriptive labels, helper text, or units are needed.
+- Forms with many fields that users must scan quickly.
+- Complex fields with adornments, counters, or tooltips.
+
+#### Floating Label Datepicker
+
+Use the “floating-label” variant to conserve vertical space and streamline simple forms, while still keeping the label visible.
+
+- Compact layouts and simple fields.
+- Short labels (1–3 words); minimal helper text.
+- You want a clean look without duplicate placeholder text.
+
+<sd-notification variant="warning" open>**Don’t use sd-datepicker for the following use cases:**
+
+If entering a birth date is required: Use sd-input with type date.
+
+If a week selection is required: Use sd-select with a list of weeks to select from. </sd-notification>
+
+### Rules
+
+### Variant Consistency
+
+Do not mix the two variants (default / floating label) within the same product, flow or form. Read the use cases above to know when to use each type.
+
+### Behavior
+
+- Opens a calendar flyout when clicking the input for quick date selection.
+- Supports manual date entry (e.g., DD.MM.YYYY) for users who prefer typing.
+
+### Content
+
+- Use the default label.
+- Append an asterisk (\*) to indicate required fields.
+- Include placeholder text (e.g., “Select date”) for usability.
+- Provide contextual hints where additional guidance is needed.
+
+### Background
+
+- Place on light backgrounds (white, neutral-100, or primary-100) for clarity and readability.

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

@@ -0,0 +1,10 @@
+Use the `alignment` attribute to define where the flyout should appear:
+
+- `left` (default)
+- `right`
+
+```html
+<div class="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

@@ -0,0 +1,11 @@
+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]">
+  <sd-datepicker
+    label="Label"
+    value="2025-11-10"
+    disabled-dates="2025-10-31,2025-11-11,2025-11-19,2025-11-20,2025-11-24"
+  ></sd-datepicker>
+</div>
+```

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

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

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

@@ -0,0 +1,8 @@
+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]">
+  <sd-datepicker label="Label" placeholder="Disabled" disabled></sd-datepicker>
+</div>
+```

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

@@ -0,0 +1,8 @@
+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]">
+  <sd-datepicker label="Floating Label" floating-label></sd-datepicker>
+</div>
+```

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

@@ -0,0 +1,11 @@
+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 slot="help-text">Help text slot</div>
+  </sd-datepicker>
+</div>
+```

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

@@ -0,0 +1,15 @@
+The component gets `invalid` state when the datepicker is not valid.
+
+```html
+<div class="w-[370px] h-[500px]">
+  <sd-datepicker id="invalid-example" label="Label" style-on-valid="" required></sd-datepicker>
+</div>
+<script type="module">
+  var invalidDatepicker = document.querySelector('#invalid-example');
+  setTimeout(() => {
+    invalidDatepicker.checkValidity();
+    invalidDatepicker.reportValidity();
+    invalidDatepicker.setCustomValidity('Please enter the date in the format DD.MM.YYYY');
+  }, 500);
+</script>
+```

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

@@ -0,0 +1,11 @@
+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 slot="label">Label slot</div>
+  </sd-datepicker>
+</div>
+```

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

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

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

@@ -0,0 +1,7 @@
+Use the `range` attribute to enable range selection.
+
+```html
+<div class="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

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

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

@@ -0,0 +1,14 @@
+Use the `size` attribute to change the size:
+
+- `lg`(default)
+- `md`
+- `sm`
+  **Note:** On the `floating-label` variant “sm” size is not available.
+
+```html
+<div class="flex flex-col gap-4 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>
+</div>
+```

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

@@ -0,0 +1,16 @@
+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]">
+  <sd-datepicker id="valid-example" label="Label" value="2025.11.10" style-on-valid=""></sd-datepicker>
+</div>
+<script type="module">
+  var validDatepicker = document.querySelector('#valid-example');
+  setTimeout(() => {
+    validDatepicker.checkValidity();
+    validDatepicker.reportValidity();
+    validDatepicker.setCustomValidity('');
+  }, 500);
+</script>
+```

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

@@ -0,0 +1,7 @@
+Use the `view-month` attribute to set the initially visible month.
+
+```html
+<div class="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

@@ -0,0 +1,11 @@
+Use the `visually-disabled` attribute to style the component as if it was disabled and enable `aria-disabled` to allow it to be reachable by screen readers.
+**Hint:** When using this attribute, make sure to provide ways to inform the user why the element is disabled and how to enable it. This can be done by using the `help-text` attribute or wrapping the element in a sd-tooltip.
+**Accessibility Hint:** Disabling elements is not recommended for accessibility reasons.
+
+```html
+<div class="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>
+</div>
+```